.slider-element .heading-block p{
    color:hsla(0,0%,100%,.7);
    font-size:12px;
    font-style:normal;
    font-weight:400;
    letter-spacing:5px;
    margin-bottom:15px;
    text-transform:uppercase
}
.slider-element .slider-product-desc{
    bottom:0;
    left:auto;
    position:absolute;
    right:0;
    top:auto;
    width:65%;
    z-index:2
}
.slider-element .slider-product-desc [class^=col-]{
    background-color:#353535;
    padding:30px
}
.slider-element .vertical-middle .container{
    top:-60px
}
.play-icon{
    border:2px solid #eee;
    border-radius:50%;
    color:#fff!important;
    display:block;
    font-size:18px;
    height:60px;
    line-height:60px;
    margin:20px 0 0;
    position:relative;
    text-align:center;
    transition:transform .3s ease;
    width:60px
}
.play-icon i{
    left:2px;
    position:relative
}
.play-icon:hover{
    transform:scale(1.1)
}
.heading-block h3{
    font-size:2.3rem;
    font-weight:800;
    letter-spacing:0;
    text-transform:none
}
.edge-underline h3,.product:hover .product-title h3{
    -webkit-text-decoration-skip:edges;
    text-decoration-skip:edges;
    text-decoration:underline
}
.showcase-target-images{
    position:relative
}
.showcase-target{
    display:none;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    transform:scale(1);
    transition-duration:.3s;
    transition-timing-function:cubic-bezier(.57,.21,.69,1);
    width:100%
}
.showcase-target.showcase-target-active{
    display:block;
    position:relative
}
.showcase-section:hover .showcase-target{
    transform:scale(1.05)
}
.showcase-section ul li{
    background-color:#000;
    border:1px solid #eee;
    border-radius:50%;
    cursor:pointer;
    height:14px;
    width:14px
}
.showcase-section ul li.headphone-red{
    background-color:#af1e2b
}
.showcase-section ul li.headphone-black{
    background-color:#000
}
.showcase-section ul li.headphone-blue{
    background-color:#00008b
}
.showcase-section ul li.headphone-pink{
    background-color:pink
}
.showcase-section ul li.headphone-white{
    background-color:#fff
}
.showcase-section .badge{
    background-color:#222!important;
    font-size:11px;
    font-weight:400;
    left:50%;
    letter-spacing:3px;
    position:absolute;
    text-shadow:none;
    text-transform:uppercase;
    top:0;
    top:20px;
    transform:translateX(-50%)
}
.section-product{
    position:relative;
    width:100%
}
.section-product .section-product-image{
    width:100%
}
.section-product .section-product-content{
    background-color:#fff;
    bottom:0;
    max-width:100%;
    padding:20px;
    position:relative;
    right:0;
    z-index:1
}
.section-product .section-product-content h3{
    font-weight:800
}
.section-product.alt .section-product-content,.section-product.alt .section-product-image{
    float:none
}
.section-product .section-product-price{
    font-size:1.5rem;
    font-weight:700
}
.explore-text-overlay{
    background-color:rgba(0,0,0,.6);
    display:block;
    height:100%;
    left:0;
    margin-left:15px;
    opacity:0;
    position:absolute;
    top:0;
    transition:all .4s ease;
    width:calc(100% - 30px);
    z-index:1
}
.text-overlay-wrap:hover .explore-text-overlay{
    opacity:1
}
.section-contact h3{
    font-size:1.4rem;
    font-weight:700
}
.section-contact>div{
    border:1px solid #eee;
    padding:30px 20px
}
.social-icon.si-mini{
    font-size:12px;
    height:28px;
    line-height:27px!important;
    width:28px
}
.social-icon.si-mini:hover i:first-child{
    margin-top:-27px
}
@media (min-width:1199px){
    .menu-link{
        font-size:15px;
        letter-spacing:0;
        text-transform:none
    }
    .menu-link div{
        overflow:hidden;
        position:relative
    }
    .menu-link div:after,.menu-link div:before{
        background:hsla(0,0%,100%,.4);
        content:"";
        height:100%;
        left:0;
        position:absolute;
        top:0;
        transform:translate3d(-100%,0,0) translate3d(-1px,0,0);
        transition:transform .7s;
        transition-timing-function:cubic-bezier(.7,0,.3,1);
        width:100%;
        z-index:-1
    }
    .menu-item.current>.menu-link div:before,.menu-link:hover div:before{
        transform:translate3d(100%,0,0) translate3d(1px,0,0)
    }
    .menu-item.current>.menu-link div:after,.menu-link:hover div:after{
        transform:translate3d(0,5px,0)
    }
    .menu-link div:after{
        height:4px;
        top:50%
    }
    .product{
        border-right:1px solid #eee;
        padding:65px
    }
    .slider-element .heading-block h2{
        font-size:3.1rem;
        font-weight:700;
        letter-spacing:0;
        line-height:1.35;
        text-transform:none
    }
    .slider-element .slider-product-desc [class^=col-]{
        padding:50px
    }
    .play-icon{
        margin:0 auto
    }
    .section-product .section-product-image{
        background:#fff;
        position:relative;
        width:85%
    }
    .section-product .section-product-content{
        bottom:30px;
        max-width:400px;
        padding:30px;
        position:absolute;
        right:0
    }
    .section-product.alt .section-product-image{
        float:right
    }
    .section-product.alt .section-product-content{
        left:0;
        right:auto
    }
}
@media (max-width:991px){
    .slider-element .vertical-middle .container{
        top:0
    }
}
.inline-YTPlayer{
    z-index:1
}
#ytb-video-button.play-icon{
    border-width:2px;
    bottom:10px;
    font-size:20px;
    height:42px;
    left:auto;
    line-height:39px;
    position:absolute;
    right:10px;
    text-align:center;
    width:42px;
    z-index:2
}
#ytb-video-button.play-icon i:first-of-type{
    left:1px;
    position:relative
}
#ytb-video-button.play-icon.video-played i:first-of-type,#ytb-video-button.play-icon i:nth-of-type(2){
    display:none
}
#ytb-video-button.play-icon.video-played i:nth-of-type(2){
    display:block
}
.grid{
    position:relative
}
.description{
    display:none
}
.grid-item-current{
    opacity:0!important
}
.img-wrap{
    display:block
}
.img-wrap img{
    display:block;
    max-width:100%
}
.img-grayscale img{
    -webkit-filter:grayscale(90%);
    -moz-filter:grayscale(90%);
    -o-filter:grayscale(90%);
    -webkit-transition:.4s ease-in-out;
    -moz-transition:.4s ease-in-out;
    -o-transition:.4s ease-in-out
}
.img-grayscale:hover img{
    -webkit-filter:grayscale(0);
    -moz-filter:grayscale(0);
    -o-filter:grayscale(0)
}
.preview{
    align-content:center;
    align-items:center;
    display:-ms-flex;
    display:flex;
    justify-content:center;
    pointer-events:none;
    width:50%;
    z-index:1000
}
.preview,.preview:before{
    height:100%;
    left:0;
    position:fixed;
    top:0
}
.preview:before{
    background:#1f1d1d;
    content:"";
    opacity:0;
    transition:opacity .6s;
    width:100%
}
.preview-open{
    pointer-events:auto
}
.preview-open:before{
    opacity:1
}
.clone{
    position:fixed;
    transition:transform .5s;
    z-index:110
}
.clone,.original{
    -webkit-backface-visibility:hidden
}
.original{
    display:block;
    -o-object-fit:contain;
    object-fit:contain;
    position:relative;
    transition:opacity .2s;
    z-index:120
}
.preview-open .animate{
    transition:transform .6s,opacity .2s
}
.animate{
    transition:transform .3s,opacity .2s
}
.description{
    color:#fff
}
.js .description-grid{
    display:none
}
.description-preview{
    align-items:flex-start;
    display:-ms-flex;
    display:flex;
    flex-direction:column;
    font-size:2em;
    height:100%;
    justify-content:center;
    left:100%;
    opacity:0;
    padding:0 1em;
    position:absolute;
    top:0;
    transform:translate3d(0,30px,0);
    transition:opacity 1s,transform 1s;
    transition-timing-function:cubic-bezier(.2,1,.3,1);
    width:100%;
    z-index:140
}
.preview-open .description-preview{
    opacity:1;
    transform:translateZ(0);
    transition-delay:.2s
}
.description-preview h3{
    color:#333;
    font-weight:400;
    letter-spacing:2px;
    margin:0;
    /*text-transform:uppercase*/
}
.dark .description-preview h3{
    color:#fff
}
.description-preview p{
    color:#555;
    font-size:17px;
    font-weight:300;
    margin-top:20px;
    max-width:100%
}
.dark .description-preview p{
    color:#ccc
}
.description-preview p span{
    color:#888;
    display:block;
    font-size:14px;
    font-weight:300;
    padding:10px 0 0
}
.dark .description-preview p span{
    color:#aaa
}
.details{
    max-width:100%
}
.details ul{
    line-height:1;
    list-style:none;
    margin:0;
    padding:0;
    position:relative
}
.details ul li{
    color:#9d9d9d;
    display:inline-block;
    font-size:.5em;
    margin:0 1em 0 0;
    opacity:0;
    padding:.15em 0;
    position:relative;
    transform:translate3d(0,20px,0);
    transition:transform 1s,opacity 1s;
    transition-timing-function:cubic-bezier(.2,1,.3,1);
    white-space:nowrap
}
.preview-open .details ul li{
    opacity:1;
    transform:translateZ(0)
}
.preview-open .details ul li:first-child{
    transition-delay:.2s
}
.preview-open .details ul li:nth-child(2){
    transition-delay:.3s
}
.preview-open .details ul li:nth-child(3){
    transition-delay:.4s
}
.preview-open .details ul li:nth-child(4){
    transition-delay:.5s
}
.preview-open .details ul li:nth-child(5){
    transition-delay:.6s
}
.details ul li:first-child{
    color:#909090;
    font-weight:700
}
.icon+span{
    margin-left:5px;
    vertical-align:middle
}
.details .icon{
    color:#c85e51;
    margin-right:5px
}
.action{
    background:none;
    border:none;
    color:#c85e51;
    cursor:pointer;
    font-size:40px;
    margin:0;
    padding:0;
    vertical-align:top
}
.action:focus,.action:hover{
    color:#c85e51;
    outline:none
}
.action-close{
    opacity:0;
    padding:0;
    position:fixed;
    right:30px;
    top:30px;
    transform:scale3d(.6,.6,1);
    transition:opacity .3s,transform .3s;
    z-index:150
}
.preview-image-loaded .action-close{
    opacity:1;
    transform:scaleX(1)
}
.text-hidden{
    color:transparent;
    display:block;
    height:0;
    overflow:hidden;
    position:absolute;
    width:0
}
@media screen and (max-width:40em){
    .description-preview h3{
        font-size:.5em
    }
    .description-preview p,.details{
        display:none
    }
}
/*# sourceMappingURL=demo.css.map */