.blue {
    color:#39b5fb;
}

.red {
    color:#bd0707;
}

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

.bg-beige{
    background:#ececec;
}

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

#pdp {
    overflow:hidden;
}

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

/* PANEL TEMPLATE */
#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:#000 url('sf750p-hero-screenshot.jpg') center no-repeat;
    background-size: cover;
    display: table;
    padding:0;
    min-height:600px;
    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) 75%, 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 12px rgba(0,0,0,.7);
}

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

    100%{
        top:0%;
    }
}


#pdp #panel-hero .hero-content-container{
    display:table;
    min-height:800px;
    width:100%;
}

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

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

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




@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('sf750p-hero-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%;
    }


}

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

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

    #pdp .interest-points .popup{
        border-radius:0;
        bottom:4vw;
        left:50% !important;
        overflow:hidden;
        top:auto !important;
        transform: translateX(-50%) !important;
    }
}

@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:2vw 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) {

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

@media only screen and (max-width: 440px) {
    #pdp #tempered.panel-template .col-half.left{
        width:100%;
    }
}

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

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

    #pdp .interest-points .popup{
        border-radius:0;
        left:50% !important;
        overflow:hidden;
        transform: translateX(-50%) !important;
    }
}

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

    /* ============================== 
    INTEREST POINTS
    ============================== */
    #pdp .interest-points .all{
        top:124vw !important;
        width:100%;
    }

    #pdp .interest-points .all .text .wrap{
        padding:8px;
    }

    #pdp .interest-points .all.new .image .new-label{
        width:170px;
    }
}