.blue {
    color:#39b5fb;
}

.red {
    color:#bd0707;
}

.white{
    color:#fff;
}
.gray{
    color:#797979;
}

.bg-beige{
    background:#ececec;
}

.thin {
    font-weight:100 !important;
}

#pdp .panel-spacer{
    opacity:0;
}

/* PANEL TEMPLATE */
#pdp {
    overflow:hidden;
}

#pdp .panel-template{
}


#pdp .panel-template.padding-top-4{
    padding-top:4em;
}

#pdp .panel-template.padding-bottom-4{
    padding-bottom:4em;
}

#pdp .panel-template .position-relative.wide100{
    position:relative;
    width:100%;
}

#pdp .panel-template .col-half,
#pdp .panel-template .col-third{
    /*padding:1.2%;*/
    position:relative;
}

#pdp .panel-template .position-absolute.col-half{
    height:100%;
    margin:0;
    padding: 0;
    position: absolute;
    top:0;
}

#pdp .panel-template .position-absolute.col-half.left{
    left:0;
}

#pdp .panel-template .position-absolute.col-half.right{
    right:0;
}

#pdp .panel-template .position-absolute.col-half.right.fromCenter{
    left:50%;
    max-width:572px;
    right:auto;
}

#pdp .panel-template .wrapper{
    display:table;
}

#pdp .panel-template .wrapper .vertical-center{
    display:table-cell;
    vertical-align:middle;
}


#pdp .panel-template .position-absolute.vertical-center{
    display:block;
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    transform-origin:bottom left;
    vertical-align:baseline;
}

.mobile .mobile-only{
    display:block;
}

.desktop .mobile-only{
    display:none;
}

.mobile .desktop-only{
    display:none;
}

.desktop .desktop-only{
    cursor:pointer;
    display:block;
}

#pdp .panel-template .position-absolute.col-half{
    bottom:0;
    padding: 0;
    position: absolute;
    height:61%;
    top:auto;
}


#pdp .panel-template .position-absolute.fromCenter{
    left:50%;
    top:50%;

}

/* ============================== 
HERO
============================== */

#pdp #panel-hero{
    background-size: cover;
    display: table;
    padding:0;
    min-height:500px;
    margin-top: 0px;
    overflow: hidden;
    position: relative;
    width:100%;
    z-index:1;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
}
   
#pdp #panel-hero video {
    display:block;
    left: 50%;
    min-height: 100%;
    position:absolute;
    top: 50%;
    transform:translate(-50%,-50%);
    z-index:0;
}

/*#pdp #panel-hero .hero-content-container {
    background:linear-gradient(to right, rgba(0,0,0,0) 33%, rgba(0,0,0,.8) 50%, rgba(0,0,0,0) 66%);

    background:linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1));
    background:rgba(0,0,0,.2);
}*/

#pdp #panel-hero .background img{
    height:100%;
    position:relative;
    z-index:1;
}

#pdp #panel-hero h1 {
    font-size:5em;
    text-shadow:0 1px 10px rgba(0,0,0,.5);
}

@keyframes hero-animation{
    0%{
        top:-100;
    }

    100%{
        top:0%;
    }
}


#pdp #panel-hero .hero-content-container{
    display:table;
    min-height:500px;
    position:relative;
    width:100%;
    background-color:rgba(0,0,0,.25);
}

#pdp #panel-hero.panel-template .wrapper{
    display:table-cell;
    padding:10vw 0;
    min-height:0;
}

#pdp #panel-hero.panel-template p{
    letter-spacing:0.5em;
    text-shadow:0 1px 10px rgba(0,0,0,.5);
}

#pdp #panel-hero .cta:link,
#pdp #panel-hero .cta:visited {
    background-color:#fecb00;
    color:#000;
}

#pdp #panel-hero .cta:hover,
#pdp #panel-hero .cta:active {
    background-color:#f6dc73;
}



/* ============================== 
VIVID RGB LIGHTING
============================== */

#pdp #vivid-light {
    background:#000;
    overflow:hidden;
}

#pdp #vivid-light .wrapper {
    z-index:2;
}

#pdp .vid-bg-wrapper {
    height:100%;
    left:0;
    overflow:hidden;
    position:absolute;
    top:0;
    width:75%;
    z-index:1;
}

#pdp .vid-gradient {
    position:absolute;
    width:100%;
    height:100%;
    background:linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 80%);
}

#pdp .vid-bg-wrapper video {
    display:inline-block;
    min-height:100%;
    width:100%;
}




@media only screen and (min-width: 2500px) {

}

@media only screen and (min-width: 1600px) and (max-width: 2499px) {


}

@media only screen and (max-width: 1600px) {



}

@media only screen and (max-width: 1330px) {
}

@media only screen and (max-width: 1200px) {

    .wide-460{
        width: 460px !important;
    }

    #pdp .panel-template .position-absolute.fromCenter{
        top:50%;
    }
    
}

@media only screen and (max-width: 1023px){

}

@media only screen and (max-width: 992px){
    #pdp .wide-460 .col-third h1{
        font-size:1.8em !important;
    }

    #pdp #panel-hero h1{
        font-size: 5em !important;
    }  
}


@media only screen and (max-width: 960px){ 

}


@media only screen and (max-width: 900px){

}

@media only screen and (max-width: 768px) {
    #pdp .panel-template.text-center-mobile{
        text-align:center;
    }

    /* ============================== 
    HERO
    ============================== */

    #pdp #panel-hero{
        background:url(../Content/vengeance_pc_video_screenshot.jpg) #fff no-repeat center bottom;
        background-size:cover;
    }

    #pdp #panel-hero.panel-template .wrapper {
        background:rgba(0,0,0,.4);
    }

    #pdp #panel-hero video {
        display:none !important;
    }

    #pdp #panel-hero h1{
        font-size:5em !important;
    }

    #pdp #panel-hero p{
        font-size:1.5em;
    }

    #pdp #panel-hero .product-container{
        height:auto;
        width:100%;
    }

    #pdp #panel-hero .product-container .relative-container{
        height:auto;
    }

    #pdp #panel-hero .background {
        display:block;
    }

    #pdp #panel-hero .background img{
        height:auto;
        width:100%;
    }



    /* ============================== 
    VIVID RGB LIGHTING
    ============================== */

    #pdp #vivid-light {
        background:#000 url('//res.cloudinary.com/corsair-pwa/image/upload/akamai/pdp/hydro-x/gpu/20-series/20_series_rgb_mobile.gif') center no-repeat;
        background-size:cover;
    }

    #pdp .vid-bg-wrapper {
        display:none;
    }


}

@media only screen and (max-width: 600px) {
}

@media only screen and (max-width: 570px) {

    #pdp .panel-template .col-half.mobile100{
        position:relative;
        text-align:center;
        width:100%;
    }

    #pdp .panel-template.tall110{
        height:110vw;
    }

    #pdp .panel-template.padding-top-4,
    #pdp .panel-template.padding-bottom-4{
        padding: 7em 0 7em;
    }

    #pdp .panel-template .wrapper .vertical-center{
        display:block;
    }

    #pdp .panel-template .position-absolute.col-half.right.fromCenter{
        bottom:5vw;
        height:auto;
        left:5%;
        width:90%;
    }

    #pdp .panel-template .col-half{
        margin-top:0;
    }
    
    #pdp .panel-template p.description{
        margin:2em auto 0;
    }

    /* ============================== 
    HERO
    ============================== */
    #pdp #panel-hero video {
        width:100vh;
    }

    #pdp #panel-hero.panel-template .wrapper {
        padding:10vw 0;
    }

    #pdp #panel-hero h1{
        font-size:4em !important;
        margin:0 auto;
        width:calc(100% - 20px);
    }

    #pdp #panel-hero p{
        font-size:1.5em;
        margin:2em auto;
        width:calc(100% - 20px);
    }

}
    
@media only screen and (max-width: 479px) {
    #pdp #panel-hero {
        min-height:140vw;
    }
}

@media only screen and (max-width: 470px) {
    .wide-460{
        width:100% !important;
    }

    #pdp .wide-460 .col-third h1{
        font-size: 1.4em !important;
    }

    #pdp .panel-template h1{
        font-size:1.9em !important;
    }
}

@media only screen and (max-width: 454px) {
}

@media only screen and (max-width: 440px) {
}

@media only screen and (max-width: 404px) {
}

@media only screen and (max-width: 400px) {
}