.blue {
    color:#39b5fb;
}

.red {
    color:#bd0707;
}

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

.bg-beige{
    background:#ececec;
}

.lowercase {
    text-transform:lowercase;
}

#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 .overlay.dark {
    background:rgba(0, 0, 0, 0.8);
}

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

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

#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;
}


#pdp .col-half.show-on-mobile {
    display:none;
}

.grid-item  {
    overflow:hidden;
}

.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 section.panel-template h1 {
    font-family:'BebasNeuePro-SmEBd', sans-serif;
    font-size:3.5em;
    letter-spacing:.05em;
    margin-bottom:0;
}

#pdp section.panel-template p{
    font-size:1.5em;
    font-weight:400;
    line-height:1.5em;
    margin:10px 0 20px;
}

#pdp .panel-template .white p {
    font-weight:400;
}

#pdp section.panel-template li {
    display:inline-block;
    font-size:1.3em;
    margin-bottom:25px;
    padding:1%;
    width:46%;
}

#pdp .panel-template .overlay.white {
    background:rgba(255,255,255,.75);
}



/* ==============================
CATEGORY LINKS
============================== */

#pdp .panel-template li img {
    margin-right:12px;
    max-width:80px;
    min-width:0;
}



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

#pdp #panel-hero {
    background:url('//cwsmgmt.corsair.com/hybris/tlc/icue/images/hero_video_still_2x.jpg') center 20% no-repeat;
    background-size:cover;
    margin-top:0;
    min-height:600px;
    overflow:hidden;
    position:relative;
    width:100%;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);padding:0;
    z-index:1;
}

#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 {
    display:table;
    min-height:800px;
    position:relative;
    width:100%;
}

#pdp #panel-hero .wrapper {
    background:rgba(0,0,0,.3);
    display:table-cell;
    min-height:0;
    padding-top:30px;
    position:relative;
    vertical-align:text-top;
    z-index:1;
}

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

#pdp #panel-hero h1 img {
    margin-left:35px;
    margin-top:-17px;
    max-width:180px;
    min-width:0;
    vertical-align: middle;
}

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

    100%{
        top:0%;
    }
}

#pdp #panel-hero.panel-template p {
    font-size:1.5em;
    font-weight:400;
    letter-spacing:0.03em;
    margin:0 auto 35px;
    max-width:800px;
    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;
}



/* ==============================
GAMING GEAR
============================== */

#pdp #gaming-gear {
    background:#000 url('//cwsmgmt.corsair.com/hybris/tlc/icue/images/bg-icue-gaming.jpg') center left no-repeat;
    background-size:cover;
}



/* ==============================
PC COMPONENTS
============================== */

#pdp #pc-components {
    background:#000 url('//cwsmgmt.corsair.com/hybris/tlc/icue/images/bg-icue-pc-components.jpg') center right no-repeat;
    background-size:cover;
}




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

    #pdp section .wrapper {
        width:1400px;
    }
}

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

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



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

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

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

    #pdp section h1.bebas {
        font-size:4.5em !important;
    }

    #pdp section.panel-template li {
        font-size:2em;
        text-align:center;
        width:29%;
    }

    #pdp section.panel-template p {
        font-size:2em;
    }

    #pdp .panel-template li img {
        display:block;
        margin:0 auto;
    }

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

    #pdp #panel-hero {
        height:auto;
    }

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

    #pdp #panel-hero.panel-template p {
        font-size:2em;
        width:calc(100% - 40px);
    }

}


@media only screen and (max-width: 767px) {
    #pdp .img-absolute.stack-on-mobile {
        position:relative;
    }

    #pdp .panel-template.text-center-mobile{
        text-align:center;
    }

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

    #pdp section.panel-template p {
        font-size:1.5em;
    }


    #pdp section.panel-template li {
        font-size:1.5em;
    }

    #pdp .panel-template li img {
        display:block;
        margin:0 auto;
    }

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

    #pdp #panel-hero {
        min-height:0;
    }

    #pdp #panel-hero .hero-content-container  {
        min-height:0;
    }

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

    #pdp #panel-hero .wrapper {
        vertical-align:middle;
    }

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

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

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

    #pdp #panel-hero h1 img {
        margin-left:0;
        margin-top:10px;
        width:140px;
        max-width:100%;
    }

    /* ==============================
    CONTENT
    ============================== */

    #pdp .panel-template .wrapper {
        margin:0 auto;
        width:90%;
    }


}

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

}

@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 .col-half{
        margin-top:0;
    }
    
    #pdp .panel-template p.description{
        margin-top:2em auto 0;
    }

    #pdp section.panel-template li {
        margin:0;
        padding-bottom:25px;
        text-align:center;
        width:47%;
    }



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

    #pdp #panel-hero  {
        height:auto;
        min-height:0;
    }

    #pdp #panel-hero .hero-content-container {
        height:auto;
        min-height:0;
    }

    #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.panel-template p{
        font-size:1.5em;
        margin:2em auto;
        width:calc(100% - 40px);
    }


}

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

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