.galleryArea,
.galleryArea *,
.galleryContainer,
.galleryContainer *,
.productInfo,
.productInfo * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.galleryThumbnails>ul li img {
    display: block;
}

.galleryContainer {
    width: auto;
    display: block;
}

.galleryContainer a {
    display: block;
    /* make sure child not placed on half pixel */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
    height: 350px;
}

.galleryContainer a img {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    max-width: 100%;
    max-height: 100%;
    margin: auto !important;
    display: block !important;
    /* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
}

.galleryContainer a .playButton {
    background-image: url('../../../static/CKFinderJava/userfiles/images/2016/general/icons/playbutton.svg');
    background-repeat: no-repeat;
    display: block;
    width: 60px !important;
    height: 60px !important;
    background-size: cover;
    margin: 0 auto;
    opacity: 1;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

.galleryArea .galleryThumbnails.overflowingItems.vertical .thumbScrollForward {
    position: absolute;
    right: 0;
    left: 0;
    top: calc(100% - 30px);
    z-index: 1000;
    height: 30px;
    width: 100%;
    background: #fff;
    padding: 0;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    display: block;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
}

.galleryArea .galleryThumbnails.overflowingItems.vertical .thumbScrollBack {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1000;
    height: 30px;
    width: 100%;
    background: #fff;
    padding: 0;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    display: block;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
}

.galleryArea .galleryThumbnails.overflowingItems.vertical .thumbScrollForward.inactive {
    pointer-events: none;
    transform: translate(0, 34px);
    -webkit-transform: translate(0, 34px);
    -moz-transform: translate(0, 34px);
    -ms-transform: translate(0, 34px);
    -o-transform: translate(0, 34px);
}

.galleryArea .galleryThumbnails.overflowingItems.vertical .thumbScrollBack.inactive {
    pointer-events: none;
    transform: translate(0, -34px);
    -webkit-transform: translate(0, -34px);
    -moz-transform: translate(0, -34px);
    -ms-transform: translate(0, -34px);
    -o-transform: translate(0, -34px);
}

.galleryArea .galleryThumbnails.overflowingItems.horisontal .thumbScrollBack.inactive {
    pointer-events: none;
    transform: translate(-34px, 0);
    -webkit-transform: translate(-34px, 0);
    -moz-transform: translate(-34px, 0);
    -ms-transform: translate(-34px, 0);
    -o-transform: translate(-34px, 0);
}

.galleryArea .galleryThumbnails.overflowingItems.horisontal .thumbScrollForward.inactive {
    pointer-events: none;
    transform: translate(34px, 0);
    -webkit-transform: translate(34px, 0);
    -moz-transform: translate(34px, 0);
    -ms-transform: translate(34px, 0);
    -o-transform: translate(34px, 0);
}

.galleryArea.hasGallery .galleryThumbnails.vertical {
    height: 290px;
}

.galleryArea.hasGallery .galleryThumbnails.horisontal {
    height: 70px;
}

.galleryArea.hasGallery .galleryThumbnails {
    padding-top: 0px;
    overflow: hidden;
    /*height: auto;*/
    /*margin-bottom: -18px; hide the scrollbar*/
    position: relative;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transition: transform 0.2s ease-in-out;
    -webkit-transition: transform 0.2s ease-in-out;
    -moz-transition: transform 0.2s ease-in-out;
    padding-left: 0;
    opacity: 0;
}

.galleryThumbnails.noOverflowingItems.vertical {
    height: auto !important;
    width: fit-content;
}

.galleryThumbnails.noOverflowingItems.horisontal {
    height: auto !important;
    /* 60px */
    width: fit-content;
}

.galleryArea.hasGallery .galleryThumbnails.slideIn {
    opacity: 1;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
}

.galleryThumbnails .thumbScrollForward,
.galleryThumbnails .thumbScrollBack {
    display: none !important;
}

.galleryThumbnails.overflowingItems .thumbScrollForward {
    display: block !important;
    transition: transform 0.2s ease-in-out;
    -webkit-transition: transform 0.2s ease-in-out;
    -moz-transition: transform 0.2s ease-in-out;
}

.galleryThumbnails.overflowingItems .thumbScrollBack {
    display: block !important;
    transition: transform 0.2s ease-in-out;
    -webkit-transition: transform 0.2s ease-in-out;
    -moz-transition: transform 0.2s ease-in-out;
}

.galleryThumbnails.overflowingItems {
    padding-right: 0;
    position: relative;
    /* not overflowingItems*/
    /* padding-left: 8px; */
}

.galleryThumbnails.overflowingItems .galleryThumbScroller {
    padding: 0 5px;
}

.galleryArea .galleryThumbnails.noOverflowingItems .galleryThumbScroller ul li:last-of-type {
    margin-right: 0px;
}

.galleryThumbnails.overflowingItems .galleryThumbScroller ul li {
    margin-right: 5px;
}

.galleryThumbnails .galleryThumbScroller ul li {
    position: relative;
}

.galleryThumbnails .galleryThumbScroller ul li .playButton {
    color: #fff;
    background-repeat: no-repeat;
    display: block;
    width: 30px !important;
    height: 30px !important;
    background-size: cover;
    margin: 0 auto;
    opacity: 1;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    cursor: pointer;
}

.galleryThumbnails .galleryThumbScroller {
    padding: 0;
}

.galleryThumbnails.overflowingItems .thumbScrollForward {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000;
    width: 30px;
    height: 100%;
    background: #fff;
    padding: 0;
    line-height: 57px;
    font-weight: bold;
    cursor: pointer;
    display: block;
    box-shadow: -1px 0 9px #333;
    transform: translate(0 0);
    -webkit-transform: translate(0 0);
    -moz-transform: translate(0 0);
    -ms-transform: translate(0 0);
    -o-transform: translate(0 0);
}

.galleryThumbnails.overflowingItems .thumbScrollBack {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 30px;
    height: 100%;
    background: #fff;
    padding: 0;
    line-height: 57px;
    font-weight: bold;
    cursor: pointer;
    display: block;
    box-shadow: -1px 0 9px #333;
    transform: translate(0 0);
    -webkit-transform: translate(0 0);
    -moz-transform: translate(0 0);
    -ms-transform: translate(0 0);
    -o-transform: translate(0 0);
}

.galleryContainer .clearfix {
    clear: both;
}

.galleryArea .galleryThumbnails .galleryThumbScroller {
    overflow-x: auto;
    scroll-behavior: smooth;
}

.galleryArea .galleryThumbnails ul {
    padding: 5px 2.5px 0 2.5px;
    margin: 0;
    width: auto;
    white-space: nowrap;
}

.galleryArea .galleryThumbnails ul li {
    padding: 2.5px !important;
    margin: 0;
    margin-right: 5px;
    display: inline-block;
    height: 48px;
    background: #fff;
    outline: 1px solid #d0d0d0;
}

.galleryArea .galleryThumbnails ul li.active {
    outline: 2px solid #9f9f9f !important;
}

.galleryArea .galleryThumbnails li img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    margin: auto;
    text-align: center;
    display: block;
    cursor: pointer;
    margin: auto !important;
}




@media screen and (max-width: 992px) {
    .galleryContainer a {
        height: 300px;
    }
}






/***********************
 Fancybox general and  thumbnail style 
 
 ******************/

/* Hide the thumbnail images and iframe, if not inside the ul */
 
 /* .galleryThumbnails .thumbnailDropArea,
 .galleryThumbnails iframe {
     display: none;
 } */
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 not all,
 not all {
     #fancybox-loading,
     .fancybox-close,
     .fancybox-next span,
     .fancybox-prev span {
         background-image: url(plugin-img/fancybox_sprite@2x.png);
         background-size: 36px 36px;
     }
     .fancybox-next span,
     .fancybox-prev span {
         visibility: visible !important;
     }
 }
 
 @media only screen and (min-width: 200px) and (max-width: 1028px) {
     .fancybox-wrap img {
         display: block;
         margin: 0 auto !important;
         float: none !important;
         max-width: 100%;
         height: auto !important;
         padding: 0 !important;
     }
 }
 
 #fancybox-loading {
     background-image: none;
 }
 /* fancybox */
 
 .fancybox-close {
     background-image: url(../../../2015/css/plugin-img/close.png);
     background-size: 36px 36px;
 }
 
 .galleryContainer a.fancybox {
     display: block !important;
 }
 
 .fancybox-wrap .fancybox-skin {
     min-width: 100%;
     min-height: 100%;
 }
 
 .fancybox-wrap .fancybox-inner {
     width: 100vw;
 }
 /* for thumbs */
 
 #fancybox-thumbs {
     position: fixed;
     left: 0;
     width: 100%;
     overflow: hidden;
     z-index: 8050;
     background: #333;
     padding: 3vh 10px 3vh 10px;
     transform: translateY(100%);
     -moz-transform: translateY(100%);
     -webkit-transform: translateY(100%);
     transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -webkit-transition: all .3s ease-in-out;
     transition-delay: 0.2s;
     -moz-transition-delay: 0.2s;
     -webkit-transition-delay: 0.2s;
 }
 
 #fancybox-thumbs.bottom {
     transform: translateY(0%);
     -moz-transform: translateY(0%);
     -webkit-transform: translateY(0%);
 }
 
 #fancybox-thumbs.bottom {
     bottom: 0;
 }
 
 #fancybox-thumbs.top {
     top: 2px;
 }
 
 #fancybox-thumbs ul {
     position: relative;
     list-style: none;
     margin: 0;
     padding: 0;
 }
 
 #fancybox-thumbs ul li {
     float: left;
     padding: 1px;
     opacity: 0.5;
     margin-bottom: 0 !important;
 }
 
 #fancybox-thumbs ul li.active {
     opacity: 0.75;
     padding: 0;
     border: 1px solid #fff;
 }
 
 #fancybox-thumbs ul li:hover {
     opacity: 1;
 }
 
 #fancybox-thumbs ul li a {
     display: block;
     position: relative;
     overflow: hidden;
     border: 1px solid #222;
     background: #111;
     outline: none;
 }
 
 #fancybox-thumbs ul li img {
     display: block;
     position: relative;
     border: 0;
     padding: 0;
     max-width: none;
 }
 
 #fancybox-loading {
     z-index: 99999;
 }