.blue {
    color:#39b5fb;
}

#pdp section.panel-template h1,
#pdp .interest-points .content_wrapper .full h2.header {
    font-family:'bebas-neue-pro-semiexpanded', sans-serif;
    font-size:3.5em;
    font-weight: 600;
    letter-spacing:.05em;
    margin-bottom:0;
}

#pdp section p {
    letter-spacing:.05em;
}

#pdp section p:first-of-type {
    margin-top:1em;
}

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

#pdp #panel-hero {
    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 .hero-content-container {
    background:rgba(0,0,0,.5); 
    display:table;
    min-height:800px;
    width:100%; 
}

#pdp #panel-hero .wrapper {
    display:table-cell;
    min-height:0;
    position:relative;
    vertical-align:middle;
    z-index:1;
}

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

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

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

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


/* ============================== 
INTEREST POINTS
============================== */

#pdp .interest-points {
    background:#39b5fb;
    background-size:cover;
    height:690px;
    padding:6em 0;

}

#pdp .interest-points .content_wrapper {
    margin: 0 auto;
    max-width: 960px;
    width: 100%;
    color: #fff;
}

#pdp .interest-points .content_wrapper .full.centered{
    width:100%;
    height:100%;
    position:relative;
    text-align:center;
}

#pdp .interest-points .content_wrapper .full h2.header {
    color:#fff;
    margin:1em auto 0;
}

#pdp .interest-points .keyboard {
    margin-top:4em;
    position: relative;
}

#pdp .interest-points .keyboard img.product-img {
    width: 100%;
    margin: auto;
    position: relative;
    transition:500ms opacity;
    z-index:1;
}

#pdp .interest-points .keyboard img.product-img.back{
    left:0;
}

#pdp .interest-points .keyboard.front img.product-img.front{
    display:block;
    max-width:580px;
    opacity:1;
}

#pdp .interest-points .keyboard.front img.product-img.back{
    opacity:0;
    position: absolute;
    top:0;
}

#pdp .interest-points .keyboard.back img.product-img.front{
    opacity:0;
}

#pdp .interest-points .keyboard.back img.product-img.back{
    left:0;
    opacity:1;
    position: absolute;
    top:0;
}

#pdp .interest-points .keyboard img.product-img.shadow {
    bottom:unset;
    height:100%;
    position:absolute;
    transform: scale(1.2);
    z-index:0;
}

#pdp .interest-points .keyboard button {
    background:none;
    border: none;
    height: 60px;
    width: 60px;
    position: absolute;
    transform:translateX(20px) translateY(-20px);
    z-index:2;
}

#pdp .interest-points .keyboard button .svg{
    overflow:visible;
    pointer-events:none;
}

#pdp .interest-points .keyboard button:focus {
    outline: 0 !important;
}

#pdp .interest-points .keyboard button .svg path{
    fill: #fff;
}

#pdp .interest-points .keyboard button.active .svg path{
    fill: rgb(0,132,255, 0.8);
}

#pdp .interest-points .keyboard button .svg path.bullet{
    transform-origin:50%;
    transform:scale(0.8);
}

#pdp .interest-points .keyboard button .svg path.ring{
    transform-origin:50% 50%;
}

#pdp .interest-points .keyboard button.ping .svg path.ring{
    animation:ping 1500ms infinite;
}

@keyframes ping{
    0%{
        opacity:1;
        transform:scale(1);
    }
    100%{
        opacity:0;
        transform:scale(2);
    }
}




/* ============================== 
POINTS
============================== */
#pdp .interest-points .keyboard #one {
    right: 24%;
    top: 95%;
}

#pdp .interest-points .keyboard #two {
    right: 75%;
    top: 38%;
}

#pdp .interest-points .keyboard #three {
    right: 52%;
    top: 86%;
}

#pdp .interest-points .keyboard #four {
    right: 54%;
    top: 98%;
}

#pdp .interest-points .keyboard #five {
    right: 55.5%;
    top: 7%;
}

#pdp .interest-points .keyboard #six {
    right: 58.5%;
    top: 34%;
}

#pdp .interest-points .keyboard #seven {
    right: 90.5%;
    top: 11%;
}

#pdp .interest-points .keyboard.front #one,
#pdp .interest-points .keyboard.front #two,
#pdp .interest-points .keyboard.front #three,
#pdp .interest-points .keyboard.front #four,
#pdp .interest-points .keyboard.front #seven {
    opacity:1;
    pointer-events:auto;
}

#pdp .interest-points .keyboard.back #one,
#pdp .interest-points .keyboard.back #two,
#pdp .interest-points .keyboard.back #three,
#pdp .interest-points .keyboard.back #four,
#pdp .interest-points .keyboard.back #seven {
    opacity:0;
    pointer-events:none;
}

#pdp .interest-points .keyboard.front #five,
#pdp .interest-points .keyboard.front #six {
    opacity:0;
    pointer-events:none;
}

#pdp .interest-points .keyboard.back #five,
#pdp .interest-points .keyboard.back #six {
    opacity:1;
    pointer-events:auto;
}

#pdp .interest-points .all {
    background-color: #000;
    border-radius: 3px;
    border:1px solid #a9a9a9;
    color: #4e4e4e;
    height: 170px;
    width: 395px;
    overflow:hidden;
    z-index:2;
}

#pdp .interest-points .all .text {
    color: #4e4e4e;
    float: right;
    width: 57%;
}

#pdp .interest-points .all .text .wrap {
    padding: 0 30px 0 25px;
    text-align: left;
}

#pdp .interest-points .all .text .wrap p {
    color:#a9a9a9;
    line-height: 1.5em !important;
}

#pdp .interest-points #popup-g.all .text .wrap p{
    line-height: 1.1em !important;
}

#pdp .interest-points #popup-c.all .text .wrap p{
    line-height: 1.25em !important;
}

#pdp .interest-points .all .text .wrap h3 {
    line-height: 15px;
    letter-spacing: -.2px;
}

#pdp .interest-points .all .image {
    float: left;
    overflow:hidden;
    width: 43%;
}

#pdp .interest-points .all .image img {
    width: 171px;
}

#pdp .interest-points .all h3 {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

#pdp .interest-points .all p {
    font-size:1em;
}

#pdp .interest-points .all.new .image .new-label{
    bottom:0;
    color:#fff;
    background:rgb(0,132,255, 0.8);
    position:absolute;
    text-align:center;
    transform:rotate(-90deg) translateX(-21px);
    transform-origin: 0 0;
    width:172px;
}

#pdp .interest-points .all.new .image .new-label p{
    margin:0;
}

#pdp .interest-points .flip-nav{
    background:rgba(255, 255, 255, 0.5);
    border-radius:20px;
    display:block;
    margin: 2em auto 0;
    padding:0 5px;
    position: relative;
    width:130px;
}

#pdp .interest-points .flip-nav .flip-option{
    cursor:pointer;
    display:inline-block;
    padding:0.5em 0;
    width:50%;
}

#pdp .interest-points .flip-nav .flip-option.selected{
    pointer-events:none;
}

#pdp .interest-points .flip-nav .flip-option#flip-front{
    border-right:1px solid #b9b9b9;
    width: calc(50% - 5px);
}

#pdp .interest-points .flip-nav .flip-option h4{
    color:#000;
    font-size:10px;
    font-weight:400;
    margin:0;
    text-align:center;
    transition:500ms color;
}

#pdp .interest-points .flip-nav .flip-option.selected h4{
    color:rgb(0,132,255, 1);
}

#pdp .interest-points .flip-nav .flip-option:hover h4{
    color:#848484;
}





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

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



    /* ============================== 
    INTEREST POINTS
    ============================== */
    #pdp .interest-points .content_wrapper {
        margin: 0 auto;
        max-width: 100%;
        width: calc(100% - 15px);
        color: #fff;
    }

}


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

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

    #pdp #panel-hero{
    }

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




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

    #pdp .interest-points .keyboard{
        margin:0 auto;
        width:calc(100% - 30px);
    }

    #pdp .interest-points .popup{
        border-radius:0;
        left:50% !important;
        overflow:hidden;
        top:calc(78vw + 40px) !important;
        transform: translateX(-50%) !important;
    }

    #pdp .interest-points .all .image img{
        transform:scale(1.1);
    }

    #pdp .interest-points .flip-nav{
        margin: 2.5vw auto 0;
    }
}





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

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

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

    /* ============================== 
    INTEREST POINTS
    ============================== */
    #pdp .interest-points .popup{
        bottom:1vw;
    }
}


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


}