/* GLOBALS */
.product-landing .bg-light-grey-one {background-color:#FBF9FA;}
.product-landing .bg-light-grey-two {background-color:#F4F4F4;}

.product-landing .bg-cover {-webkit-background-size: cover!important;-moz-background-size: cover!important;-o-background-size: cover!important; background-size: cover!important; background-repeat:no-repeat!important; background-position:center!important;}

.product-landing .responsive-iframe {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.product-landing .responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* MODAL */
.product-landing .clickable {cursor: pointer;}
.product-landing .modal-backdrop.in {opacity:0.9;}
.product-landing .video-modal .modal-dialog {top: 40px; max-width:80%!important;}
.product-landing .video-modal .modal-body {padding:0;}

.product-landing .video-modal .close {
    position: absolute;top:0;right:-50px;opacity:1;width:40px;height:40px;background-color:orange;z-index:1;padding:0;margin:0;text-align:center;
    background-image:url('../img/icons/icon-dismiss-modal--white.svg'); background-size:contain; background-position:center center; background-size:24px 24px; background-repeat:no-repeat;
}


/* ***** RESPONSIVE PANEL PADDING ***** */
.product-landing .panel-padding {width:100%; overflow:hidden; padding:140px 0 140px 0; margin:0;}
@media screen and (max-width:1199px) {.product-landing .panel-padding {width:100%; overflow:hidden; padding:80px 0 80px 0;}}
@media screen and (max-width:991px)  {.product-landing .panel-padding {width:100%; overflow:hidden; padding:60px 0 60px 0;}}
@media screen and (max-width:767px)  {.product-landing .panel-padding {width:100%; overflow:hidden; padding:40px 0 40px 0;}}
@media screen and (max-width:640px)  {.product-landing .panel-padding {width:100%; overflow:hidden; padding:30px 0 30px 0;}}

.product-landing .hero-banner {
    padding-top:0; 
    overflow:hidden; 
    height:400px; 
    width: 100%;
    padding:10% 0; 
    position:relative; 
    background-position: center
}

.product-landing .hero-banner.lg {
    height: 600px;
}

@media screen and (max-width:640px) {
    .product-landing .hero-banner {
        height: 375px;
    }
    .product-landing .hero-banner.lg {
        height: 425px;
    }
}


.product-landing .hero-banner:before {content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.3); z-index:0;}
.product-landing .hero-banner .hero-module {text-aign:left;}
.product-landing .hero-banner .hero-module h1 {font-family: "Futura LT", sans-serif; font-weight: 900; font-size: 4em; color: #ffffff; text-transform: uppercase; margin:0 0 30px 0; padding:0;}
.product-landing .hero-banner .hero-module h3 {font-family: "Helvetica Neue LT W06_71366369"; color: #e6571d;font-size:1.625em; margin:0 0 30px 0; padding:0;}


.product-landing .hero-banner .hero-module ul.product-actions {padding:0; margin:0; list-style:none;}
.product-landing .hero-banner .hero-module ul.product-actions li {float:left; margin-right:20px;}
.product-landing .hero-banner .hero-module ul.product-actions li:last-child {margin-right:0;}
.product-landing .hero-banner .hero-module .btn--orange {font-family: "Helvetica LT W01 Bold Cond"; background: #E75F24;color: #ffffff; text-decoration:none; min-width:180px;}
.product-landing .hero-banner .hero-module .btn--secondary {font-family: "Helvetica LT W01 Bold Cond"; background:#26b21b; color:#ffffff; text-decoration:none; min-width:180px;}


/* SECTIONS */
.product-landing .product-details {float:left; width:100%;}
.product-landing .product-details-inner {float:left; width:100%; padding-right:10%;}
.product-landing .product-details-inner h3 {font-size: 15px;color: #e5761d;text-transform: uppercase;font-family: "Helvetica LT W01 Roman"; padding:0; margin:0 0 10px 0;}
.product-landing .product-details-inner h2 {color: #000; font-family: "Helvetica Neue LT W06_71366369"; font-size: 36px; display: block; text-transform: none; padding:0; margin:0 0 20px;}

.product-landing .product-details-inner ul.product-list {padding:0; margin:0; list-style:none; width:100%; float:left;}
.product-landing .product-details-inner ul.product-list.margin-top {margin-top:20px;}
.product-landing .product-details-inner ul.product-list.margin-bottom {margin-bottom:30px;}
.product-landing .product-details-inner ul.product-list li {float:left; width:50%; margin-bottom:20px; position:relative; padding-left:30px;}
.product-landing .product-details-inner ul.product-list li:last-child {margin-bottom:0;}
.product-landing .product-details-inner ul.product-list li:before {content:""; position:absolute; diplay:block; width:20px; height:20px; left:0; background:url('../img/icons/icon-check--primary.svg'); background-repeat:no-repeat; background-position:center center; background-size:contain;}

.product-landing .product-details-inner .product-details-image {float:left; width:100%;}
.product-landing .product-details-inner .product-details-image img {max-width:100%;}


/* FULL WIDTH */
.product-landing .full-width {width:100%; float:left; position:relative; background-repeat:no-repeat;}
.product-landing .full-width.video {min-height:500px; height:60vh; position:relative;}
.product-landing .full-width.video:hover, .product-landing .full-width.video:focus {cursor:pointer}

.product-landing .video .video-inner span.video-play-button {position:absolute; left: 50%; top:50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display:block; width:80px; height:60px;} 
.product-landing .video.orange-button .video-inner span.video-play-button {background:url('../img/icons/icon-video-play--orange.svg'); background-repeat:no-repeat; background-position:center center; background-size:contain;}
.product-landing .video.black-button .video-inner  span.video-play-button {background:url('../img/icons/icon-video-play--black.svg'); background-repeat:no-repeat; background-position:center center; background-size:contain;}
.product-landing .video.white-button .video-inner  span.video-play-button {background:url('../img/icons/icon-video-play--white.svg'); background-repeat:no-repeat; background-position:center center; background-size:contain;}

/* ADDITIONAL PRODUCTS */
.product-landing .component .component-title h3 {
    font-size: 2em;
    color: #E75F24;
    text-transform: uppercase;
    font-family: "Futura LT", sans-serif;
    font-weight: 500;
    display: block;
}

.product-landing .component .component-title p {font-size:1em;}

.product-landing .component.popular-tools a.product-item {text-align:center;}
.product-landing .component.popular-tools a.product-item .product-meta .product-title {
    color: #E75F24;
    font-size: 1em;
    font-family: helvetica, sans-serif;
    margin: 0 0 10px 0;
    float: none;
    min-height: 50px;
    font-weight: 600;
    letter-spacing: .5px;
    text-align: center;
    max-width:100%;
}

.product-landing .component.popular-tools a.product-item,
.product-landing .component.popular-tools a.product-item:active,
.product-landing .component.popular-tools a.product-item:visited,
.product-landing .component.popular-tools a.product-item:focus,
.product-landing .component.popular-tools a.product-item:hover {
    outline:none; text-decoration:none;
}

.product-landing .component.popular-tools a.product-item .product-meta .product-ref {display:none;}
.product-landing .component.popular-tools a.product-item .btn--black {background: #232323;color: #ffffff;}
.product-landing .component.popular-tools a.product-item .product-meta .view-product {float: none; display:inline-block;}



@media screen and (max-width:1199px) {
    .product-landing .product-details-inner {float:left; width:100%; padding-right:0%;}
}

@media screen and (max-width:992px) {
    .product-landing .hero-banner .hero-module h1 {font-size:2em; margin-bottom:10px; text-align:center;}
    .product-landing .hero-banner .hero-module h3 {font-size: 1.2em; text-align:center;}
    .product-landing .hero-banner .hero-module ul.product-actions {display:block; width:100%; text-align:center;}
    .product-landing .hero-banner .hero-module ul.product-actions li {display:inline-block; float:none;}
    
    .product-landing .product-details-inner ul.product-list li {margin-bottom:10px;}
}

@media screen and (max-width:767px) {
    .product-details-image img {min-width:100%;}
    .product-landing .video-modal .modal-dialog {top: 40px; max-width:90%!important;}
    .product-landing .full-width.video {min-height:300px; height:40vh;}
    .product-landing .video-modal .close {width:30px;height:30px; background-size:10px 10px; right:0px; top:0;}
    .product-landing .video .video-inner span.video-play-button {width:60px; height:48px;}     
}

@media screen and (max-width:639px) { 
    .product-landing .hero-banner .hero-module ul.product-actions li {width:100%;margin:0; margin-bottom:10px;}
    .product-landing .hero-banner .hero-module ul.product-actions li:last-child {margin-bottom:0;}
    .product-landing .product-details-inner ul.product-list li {width:100%}
}


/* ========= New modules ========== */

.product-landing p {
    font-size: 1em;
}

.product-landing section.content-panel {
    margin: 75px 0;
}

.product-landing section.content-panel h2 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.product-landing section.content-panel .btngreen {
    background: #0db405;
    color: #ffffff;
    margin: 0 auto 0;
    position: relative;
    padding: 8px 15px;
}

.product-landing .banner-with-text-overlay-banner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.product-landing .banner-with-text-overlay-banner .banner-info {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

.banner-with-text-overlay-banner .banner-info .content p {
    display: block;
}

.product-landing .banner-with-text-overlay-banner .banner-info  .banner-details {
    display: none;
}

.product-landing .banner-with-text-overlay-banner .banner-image {
    min-height: 250px !important;
    width: 100%;
}

.product-landing .banner-with-text-overlay-banner .banner-image img {
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.product-landing .img-hotspot-wrapper {
    padding: 75px 0;
}

.product-landing .img-hotspots .hotarea {
    position: absolute;
    top: 0;
}

.product-landing .img-wrapper {
    padding: 75px 0;
}

.product-landing .img-wrapper .img-hotspots {
   position: relative; 
}