.blue {
    color:#39b5fb;
}

.red {
    color:#bd0707;
}

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

.bg-blue{
    background:#1074b7;
}



.text-gray{
    color:#aeaeae !important;
}

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

/* ============================== 
RESPONSIVE
============================== */
.mobile{
    display:none;
}

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

}

#pdp .panel-template picture.half {
    width: 46%;
    max-width: 100%;
}


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

#pdp #pdp-panel-hero {
    background:url('images/void_elite_stereo_hero_2x.jpg') center no-repeat;
    background-size:cover;
}

#pdp #pdp-panel-hero .hero-content-container {
    background:rgba(0,0,0,.5);
    position:relative;
}

#pdp #pdp-panel-hero .hero-content-container .wrapper {
    position:relative;
    z-index:1;
}


/* ============================== 
STUNNING SOUND
============================== */

#pdp #sound {
    background:#fff;
}


/* ============================== 
ENDURING COMFORT
============================== */

#pdp #comfort {
    background:#eee;
}

#pdp #comfort img {
    left:0%;
    bottom:0vw;
}


/* ============================== 
MULTI-PLATFORM COMPATIBLE
============================== */

#pdp #platform {
    background:#fff;
}


/* ============================== 
PREPARE FOR BATTLE
============================== */

#pdp #battle {
    background:#eee;
}

#pdp #battle img {
    width:100%;
    max-width:600px;
}






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


    #pdp .double .third:nth-child(1){
        margin-left:3%;
        width:30%;
    }

}



@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: 1150px){

    /* ============================== 
    MODES
    ============================== */
    #pdp .double#modes .content-wrapper .mode-numbers{
        top:0;
    }
}

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

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

    #pdp #pdp-panel-hero {
        background:url('images/void_elite_stereo_hero.jpg') center no-repeat;
    }



    /* ============================== 
    KEY SLIDER
    ============================== */

    #pdp #key-slider {
        background:#222 url('images/scimitar_pro_slider.jpg') right center no-repeat;
        background-size:cover;
    }

}

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


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

    /* ============================== 
    RESPONSIVE
    ============================== */
    .mobile{
        display:block;
    }

    .desktop{
        display:none;
    }


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



}



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

}
    

    


@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) {

    /* ============================== 
    INTEREST POINTS
    ============================== */
    #pdp .interest-points{
        height:106vw;
    }
}