
#prodCarousel {
    padding: 0;
    max-width: 100%;
    min-height: 235px;
    margin: auto;
}
#prodCarousel h4 {font-family: 'LL Brown Bold'; font-size:20px; letter-spacing: 0.2px;line-height: 26px; margin-bottom: 0; margin-top: 15px; font-weight: 700; text-align: center;}
#prodCarousel .main-carousel-arrows, .accessoryCarousel .main-carousel-arrows {width: 14px; height: 33px;}	
.carousel-control-next, .carousel-control-prev {display: block; margin: auto;width:14px; height:33px;}
.owl-carousel .owl-item img {display: none!important;}

#prodCarousel .carousel-control-prev{left:5px!important; display: none; }	
#prodCarousel .carousel-control-next{right:5px!important; display: none}	

.accessoryCarousel .carousel-control-prev {display: none; }	
.accessoryCarousel .carousel-control-next {display: none}

#prodCarousel iframe {display:block; margin:auto;}
.pdp-carousel-container {padding: 0; position: relative; top:15px}
.mobile-carousel-padding {padding-left:0; padding-right: 0;}


.prodThumbs, .accessoryThumbs {max-width:100%;}
.prodThumbs .owl-carousel, .accessoryThumbs .owl-carousel {position: relative;}
.prodThumbs .owl-carousel .owl-stage, .accessoryThumbs .owl-carousel .owl-stage {transform: none;}
.prodThumbs .owl-carousel .owl-stage-outer, .accessoryThumbs .owl-carousel .owl-stage-outer {z-index: 2; }

.prodThumbs .owl-dots, .accessoryThumbs .owl-dots {display:none;}
.prodThumbs .owl-item, .accessoryThumbs .owl-item {
    cursor: pointer; 
}
.prodThumbs .item, .accessoryThumbs .item-accessory {width: 10px;}
.prodThumbs .owl-item.active .item, .accessoryThumbs .owl-item.active .item-accessory {
    border: 2px solid #F5F8FA; 
    background:#CCC; 
    width:10px;
    height: 10px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}
.accessoryThumbs .owl-item.active .item-accessory {
    border: 2px solid #FFF; 
}
.prodThumbs .owl-item.active .item:hover , .accessoryThumbs .owl-item.active .item-accessory:hover {
    border: 2px solid #0066DD!important;
    -webkit-transition: border 0.3s ease-out;
    -moz-transition: border 0.3s ease-out;
    -o-transition: border 0.3s ease-out;
    transition: border 0.3s ease-out;
    background: #0066DD!important;

}
	
.active-state {
    border: 2px solid #0066DD!important;
    -webkit-transition: border 0.3s ease-out;
    -moz-transition: border 0.3s ease-out;
    -o-transition: border 0.3s ease-out;
    transition: border 0.3s ease-out;
    background: #0066DD!important;
    width: 15px;
    height: 15px;
    border-radius: 50%;

}

.prodThumbs li, .accessoryThumbs li {
    position: relative;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: auto;
    height: auto;
    min-width: 130px;
    border: 2px solid #000!important;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
}

.prodThumbs .carousel-control-prev, .accessoryThumbs .carousel-control-prev {
    left: -43px;
    width: 28px;
}
.prodThumbs .carousel-control-next, .accessoryThumbs .carousel-control-next {
    right: -43px;
    width: 28px;
}
.prodThumbs .owl-prev, .prodThumbs .owl-next, .accessoryThumbs .owl-prev, .accessoryThumbs .owl-next {
    background: none!important;
}
.prodThumbs .owl-prev.disabled, .prodThumbs .owl-next.disabled, .accessoryThumbs .owl-prev.disabled, .accessoryThumbs .owl-next.disabled {
display: none;
}

.prodThumbs .owl-nav, .accessoryThumbs .owl-nav {
position: absolute;
    top: 5px;
    bottom: 0;
    margin: auto;
    width:100%;
    z-index: 1;
}
.prodThumbs .owl-nav [class*=owl-], .accessoryThumbs .owl-nav [class*=owl-] {
    margin: 0;
    border-radius: 0;
}
.prodThumbs .owl-prev, .accessoryThumbs .owl-prev {
    position: absolute;
    left: -35px;
    margin: auto;
    top: -13px;
    bottom: 0;
    width: 25px;
    min-height: 28px;
}
.prodThumbs .owl-next, .accessoryThumbs .owl-next {
    position: absolute;
    right: -35px;
    margin: auto;
    top: -13px;
    bottom: 0;
    width: 25px;
    min-height: 28px;
}

#accessoryDrawer .accessoryThumbs .owl-prev {
    position: absolute;
    left: -30px;
    margin: auto;
    top: 0;
    bottom: 0;
    width: 25px;
    min-height: 28px;
}
#accessoryDrawer .accessoryThumbs .owl-next {
    position: absolute;
    right: -30px;
    margin: auto;
    top: 0;
    bottom: 0;
    width: 25px;
    min-height: 28px;
}

.prodThumbs .owl-next img, .prodThumbs .owl-prev img, .accessoryThumbs .owl-next img, .accessoryThumbs .owl-prev img {width: 9px; height:14px;}

.prodThumbs button.owl-next:focus, .prodThumbs button.owl-prev:focus, .accessoryThumbs button.owl-next:focus, .accessoryThumbs button.owl-prev:focus {
    outline: none!important; 
    filter: url(#arrow-hover);

}

.prodThumbs button.owl-next:hover, .prodThumbs button.owl-prev:hover, .accessoryThumbs button.owl-next:hover, .accessoryThumbs button.owl-prev:hover {
    filter: url(#arrow-hover);
}
.video-icon #videoModalLink:hover:before, 
.prodThumbs .owl-carousel .owl-stage-outer .owl-item .item.video-thumb.active-state:hover:before
.accessoryThumbs .owl-carousel .owl-stage-outer .owl-item .item-accessory.video-thumb.active-state:hover:before {
    filter: opacity(100%);
}

#prodCarousel .carousel-inner {border-radius: 0;}

#prodCarousel .carousel-inner img {
    border-radius: 0; 
    object-fit: contain;
    max-height: 272px;
}

#prodCarousel .owl-carousel .owl-item img {display: none;}
.prodThumbs .wrapper, .accessoryThumbs .wrapper {
    max-width: 100%;
    margin: auto;
}
#videoPlayer .modal-header, #videoPlayer .modal-content {
    background: transparent; box-shadow: none; border: none;
}
#videoPlayer .modal-header .close {color: #FFF;}
#videoPlayer .modal-content {min-height: auto!important;}
.prodThumbs .owl-carousel .owl-stage-outer .owl-item .item.video-thumb:before,
.accessoryThumbs .owl-carousel .owl-stage-outer .owl-item .item-accessory.video-thumb:before {
    background: url("../images/adt/product-display-page/video_icon_inactive.svg") no-repeat center;
    background-size: 11px;
    z-index: 1111111111;
    margin: 0 auto;
    position: absolute;
    left:1px;
    right: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    content: '';
}

.prodThumbs .owl-item.active .item.video-thumb, .accessoryThumbs .owl-item.active .item-accessory.video-thumb {
background-color: transparent;    width: 12px;
height: 12px;
}

.modal#videoPlayer {top: -60px;}

.prodThumbs .owl-carousel .owl-stage-outer .owl-item .item.video-thumb:hover, 
.prodThumbs .owl-carousel .owl-stage-outer .owl-item .item.video-thumb.active-state,
.prodThumbs .owl-carousel .owl-stage-outer .owl-item .item.video-thumb.active-state:hover,
.accessoryThumbs .owl-carousel .owl-stage-outer .owl-item .item-accessory.video-thumb:hover, 
.accessoryThumbs .owl-carousel .owl-stage-outer .owl-item .item-accessory.video-thumb.active-state,
.accessoryThumbs .owl-carousel .owl-stage-outer .owl-item .item-accessory.video-thumb.active-state:hover  {
    border: 2px solid transparent!important; background: transparent!important;transition: none;}
    .prodThumbs .owl-carousel .owl-stage-outer .owl-item .item.video-thumb.active-state:before,
    .accessoryThumbs .owl-carousel .owl-stage-outer .owl-item .item-accessory.video-thumb.active-state:before
 {
    background: url("../images/adt/product-display-page/video_icon_active_mbl.svg") no-repeat center;
    background-size: 11px;
    z-index: 1111111111;
    margin: 0 auto;
    position: absolute;
    left:1px;
    right: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    content: '';
 }

 .prodThumbs .owl-carousel-accessory .owl-stage-outer .owl-item .item.video-thumb:before, 
 .prodThumbs .owl-carousel-accessory .owl-stage-outer .owl-item .item.video-thumb.active-state:before,
 .accessoryThumbs .owl-carousel-accessory .owl-stage-outer .owl-item .item-accessory.video-thumb:before, 
 .accessoryThumbs .owl-carousel-accessory .owl-stage-outer .owl-item .item-accessory.video-thumb.active-state:before {
    left:10px!important;
 }
@media (max-width: 991px) {
    .prodThumbs .owl-carousel .owl-stage, .accessoryThumbs .owl-carousel .owl-stage {
        width: 100%!important;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 0 0 10px; /* adjusts to fix owl margin issue */
    }
    #prodCarousel .carousel-control-prev{left:5px!important; display: block; }	
#prodCarousel .carousel-control-next {right:5px!important; display: block}	
.accessoryCarousel .carousel-control-prev { display: block; }	
.accessoryCarousel .carousel-control-next {display: block}	
}
@media (min-width: 768px) {

            #prodCarousel {padding:0; min-height: 247px;}
            #prodCarousel img {max-height: 247px;}

            .mobile-carousel-padding {padding-left:15px; padding-right: 15px;}

            .carousel-control-next, .carousel-control-prev {display: block; margin: auto;width:16px; height: 38px;}
            #prodCarousel .main-carousel-arrows, .accessoryCarousel .main-carousel-arrows {width: 16px; height: 38px;}	

    .pdp-carousel-container {padding: 0 0 15px 0;}

	.prodThumbs, .accessoryThumbs  {
        position: relative;
        display: block;
    }
    #prodCarousel .carousel-control-prev {left:6px!important; }	
#prodCarousel .carousel-control-next {right:6px!important;}	
#prodCarousel .carousel-inner {border-radius: 16px;}
#prodCarousel .carousel-inner img {border-radius: 16px; max-height: 238px;}

}
    @media (min-width: 992px) {

        .prodThumbs .owl-next img, .prodThumbs .owl-prev img, .accessoryThumbs .owl-next img, .accessoryThumbs .owl-prev img {width: 14px; height:22px;}

        .owl-carousel .owl-stage-outer {
            overflow-x: scroll;
            -ms-overflow-style: none;  /* Internet Explorer 10+ */
            scrollbar-width: none;  /* Firefox */}

            .prodThumbs .owl-carousel .owl-stage-outer::-webkit-scrollbar,
            .accessoryThumbs .owl-carousel .owl-stage-outer::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
        /* if we use videos on all products, have the 3rd thumbnail show video icon */
        .prodThumbs .owl-carousel .owl-stage-outer .owl-item .item.video-thumb:before, 
        .prodThumbs .owl-carousel .owl-stage-outer .owl-item .item.video-thumb.active-state:before,
        .accessoryThumbs .owl-carousel .owl-stage-outer .owl-item .item-accessory.video-thumb:before, 
        .accessoryThumbs .owl-carousel .owl-stage-outer .owl-item .item-accessory.video-thumb.active-state:before {
            background: url("../images/adt/product-display-page/video_icon_active_mbl.svg") no-repeat center;
            background-size: 20px;
            z-index: 1111111111;
            margin: 0 auto;
            position: absolute;
            left:1px;
            right: 0;
            top: 50%;
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            content: '';
        }

        #prodCarousel .carousel-inner img {border-radius: 16px; max-height: 402px;}


        .modal#videoPlayer {top: -35px;}


        .prodThumbs .wrapper .accessoryThumbs {
           /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5f8fa+0,f5f8fa+100&0+0,1+54 */
background: -moz-linear-gradient(top,  rgba(245,248,250,0) 0%, rgba(245,248,250,1) 54%, rgba(245,248,250,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(245,248,250,0) 0%,rgba(245,248,250,1) 54%,rgba(245,248,250,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(245,248,250,0) 0%,rgba(245,248,250,1) 54%,rgba(245,248,250,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f5f8fa', endColorstr='#f5f8fa',GradientType=0 ); /* IE6-9 */
width: 82px;
    height: 45px;
    position: absolute;
    left: 210px;
    top: 228px;
    z-index: 3;
        }

        .prodThumbs .owl-nav, .prodThumbs .owl-nav, .accessoryThumbs .owl-nav, .accessoryThumbs .owl-nav {
                top: 0;
            }
            .prodThumbs .wrapper, .accessoryThumbs .wrapper {
            max-width: 100%;
            margin: auto;
        }
  .owl-carousel .owl-item img {display: block!important; border-radius: 16px; object-fit: contain;}

        #prodCarousel {min-height: 258px; top: 10px;}

        #prodCarousel img {max-height: 258px;}

        .prodThumbs, .accessoryThumbs {
            left: -244px;
        }
        #prodCarousel .carousel-inner {padding:0;border-radius: 16px;}
        .prodThumbs .owl-item, .accessoryThumbs .owl-item {max-width: 64px;}
        .carousel-control-next, .carousel-control-prev {display: block; margin: auto;width:22px; height: 51px;}
        #prodCarousel .main-carousel-arrows, .accessoryCarousel .main-carousel-arrows {width: 22px; height: 51px;}
        .pdp-carousel-container {position: sticky;top:70px}

        .pdp-hero-container .owl-carousel{
            transform: rotate(90deg);
            width: 470px; 
          }
         .item{
            transform: rotate(-90deg);
            border-radius: 16px;
          }
         .owl-carousel .owl-nav{
            display: flex;
            justify-content: space-between;
            position: absolute;
            width: 100%;
            top: calc(50% - 33px);
          }
          .prodThumbs .owl-item.active .item, .accessoryThumbs .owl-item.active .item-accessory {
            border: 2px solid #CCC; 
            background: #F5F8FA; 
            width:64px;
            height: 64px;
            border-radius: 18px;
            display: flex;
            margin: 0;

        }



        .prodThumbs .owl-item.active .item.video-thumb, .accessoryThumbs .owl-item.active .item-accessory.video-thumb {
            background-color: #F5F8FA;
            width:64px;
            height: 64px;
            }


            .prodThumbs .owl-carousel .owl-stage-outer .owl-item .item.video-thumb:hover, 
            .prodThumbs .owl-carousel .owl-stage-outer .owl-item .item.video-thumb.active-state,
            .prodThumbs .owl-carousel .owl-stage-outer .owl-item .item.video-thumb.active-state:hover,
            .accessoryThumbs .owl-carousel .owl-stage-outer .owl-item .item-accessory.video-thumb:hover, 
            .accessoryThumbs .owl-carousel .owl-stage-outer .owl-item .item-accessory.video-thumb.active-state,
            .accessoryThumbs .owl-carousel .owl-stage-outer .owl-item .item-accessory.video-thumb.active-state:hover
              {
                border: 2px solid #0066DD!important; background: transparent!important;transition: none;}

        .prodThumbs .owl-item .item, 
        .accessoryThumbs .owl-item .item-accessory {

            width: 64px;


        }
        .prodThumbs .owl-item.active .item:hover, .accessoryThumbs .owl-item.active .item-accessory:hover {
            border: 2px solid #0066DD!important;
            -webkit-transition: border 0.3s ease-out;
            -moz-transition: border 0.3s ease-out;
            -o-transition: border 0.3s ease-out;
            transition: border 0.3s ease-out;
            background: transparent!Important;

        }

        .active-state {
            border: 2px solid #0066DD!important;
            -webkit-transition: border 0.3s ease-out;
            -moz-transition: border 0.3s ease-out;
            -o-transition: border 0.3s ease-out;
            transition: border 0.3s ease-out;
            background: transparent!Important;
            width: 65px;
            height: 65px;
        }

        .prodThumbs .owl-prev, .accessoryThumbs .owl-prev {
            top: -3px;
            left: -30px;
            width: auto;

        }
        .prodThumbs .owl-next, .accessoryThumbs .owl-next {
            top: -3px;
            right: -20px;
            width: auto;

        }

        .carousel-fader .carousel-inner .carousel-item {
            transition-property: opacity;
            transition: opacity .20s ease-in-out;

          }
          .carousel-fader .carousel-inner .carousel-item,
          .carousel-fader .carousel-inner .active.left,
          .carousel-fader .carousel-inner .active.right {
            opacity: 0;
          }
          .carousel-fader .carousel-inner .active,
          .carousel-fader .carousel-inner .next.left,
          .carousel-fader .carousel-inner .prev.right {
            opacity: 1;
          }
          .carousel-fader .carousel-inner .next,
          .carousel-fader .carousel-inner .prev,
          .carousel-fader .carousel-inner .active.left,
          .carousel-fader .carousel-inner .active.right {
            left: 0;
            transform: translate3d(0, 0, 0);
          }

    }

    @media (min-width: 1200px) {
        #prodCarousel {max-width:500px; min-height: 329px;}
        #prodCarousel img {max-height: 380px;}
        #prodCarousel .carousel-inner img {max-height: 329px;}
        .prodThumbs  {left: -220px;}
        .accessoryThumbs  {left: -220px;}
    }