.tt_lightbox {position: fixed;top: 0;left: 0;width: 100%;height: 100%;;z-index: 1000;background: rgba(0,0,0,0.8);}
.tt_lightbox_flex {max-width: calc(80% - 140px);margin: 0 auto 0 0;height: 80vh;position: relative;width: calc(80% - 20px);}
.tt_lightbox_close {background: 0!important;width: 30px;height: 30px;display: block;padding: 5px;position: absolute;right: 30px;top: 40px;z-index: 102;cursor: pointer;}
.tt_lightbox_close:before,.tt_lightbox_close:after {transition: all .5s ease-out;content: '';width: 21px;height: 3px;position: absolute;background: #fff;display: block;border-radius: 3px;transform: rotate(-45deg);margin: 8px 0 0;}
.tt_lightbox_close:after {transform: rotate(45deg);}
.tt_lightbox_back {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 101;cursor: pointer;}
.tt_lightbox iframe {width: 100%;position: absolute;height: 100%;z-index: 1102;}
.tt_lightbox_flex img{max-height:100%;transition:all 0.5s cubic-bezier(.26,.54,.32, 1);}
.tt_lightbox_img{height:100%;}

.tt_lightbox .sqr{}

img.ttprefadein{opacity:0.5;transform:scale(0.9);}
img.ttfadein{opacity:1;transform:scale(1);}

img.ttfadeout_next{opacity:0;transform:translateX(-100px);}
img.ttfadein_prev{opacity:0;transform:translateX(100px);}

img.ttfadein_next{opacity:1;transform:translateX(0px);}
img.ttfadein_prev{opacity:1;transform:translateX(0px);}

.tt_lightbox_next, .tt_lightbox_prev {color: #fff;width: 50%;height: 100%;border-radius: 50px;display: block;padding: 5px;position: absolute;left: 0;top: 0;z-index: 110;cursor: pointer;}
.tt_lightbox_prev:after,.tt_lightbox_next:after{content:'';background: rgba(255,255,255,0.3);color:#fff;width: 40px;height: 40px;border-radius:50px;display: block;padding: 5px;position: absolute;left: 20px;top: calc(50% - 20px);z-index: 110;cursor: pointer;}
.tt_lightbox_next {left: auto;right: 0;}
.tt_lightbox_next:after {left: auto;right: 20px;}

.tt_lightbox_next:before, .tt_lightbox_prev:before {transition: all .5s ease-out;content: '';width: 16px;height: 16px;background: 0 0;display: block;border: 3px solid;border-width: 0 3px 3px 0;position: absolute;border-radius: 0 2px 0 0;left: 32px;transform: translateX(3px) rotate(-225deg);}
.tt_lightbox_next:before {transform: translateX(-3px) rotate(-45deg);left: auto;right: 32px;}

.tt_lightbox_flex img.tt_lightbox_prepare_prev{position:absolute;left:0;top:0;opacity:0;transform:translateX(-100px);}
.tt_lightbox_flex img.tt_lightbox_prepare_next{position:absolute;left:0;top:0;opacity:0;transform:translateX(100px);}

.tt_lightbox,.tt_lightbox_img,.tt_lightbox_prev,.tt_lightbox_next{display: flex;align-items: center;justify-content: center}

.tt_lightbox_preview {width: 20%;overflow: auto;position: absolute;height: 80vh;right: 120px;z-index: 103;}
.tt_preview_img {margin: 10px 0 10px 20px;cursor: pointer;border-radius: 10px;}
.sqr{height:0;padding:0 0 100%;width:100%;position:relative;}
.sqr img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit: cover;}
.bd_over_hidden{overflow: hidden;}
.bd_over_hidden .single{filter: blur(2px);}
.tt_preview_img.active .sqr:before {content: '';position: absolute;left: -4px;top: -4px;width: calc(100% + 8px);height: calc(100% + 8px);border: 2px solid #fff;border-radius: 4px;pointer-events: none;}





@media(max-width: 767px){
    .tt_lightbox_flex {height: calc(100vh - 150px - 120px);max-width: 100%;margin: 0 0 calc(100px);width: calc(100% - 60px);}
    .tt_lightbox_preview {width: 100%;overflow: auto;height: 110px;right: 0;bottom: 20px;z-index: 103;white-space: nowrap;overflow-x: auto;padding:0 5px;}
    .tt_preview_img {margin: 5px 5px;cursor: pointer;display: inline-block;}
    .tt_preview_img img{max-height: 100px;width:auto;}
    .tt_lightbox_next {}
    .tt_lightbox_prev{}
    .tt_lightbox_close {right: 20px;top: 20px;}
    .tt_preview_img .sqr{width:80px;height:80px;}
    .tt_lightbox_prev:before{left:-8px;}
    .tt_lightbox_prev:after{left:-20px;}
    .tt_lightbox_next:before{right:-8px;}
    .tt_lightbox_next:after{right:-20px;}
    .tt_lightbox iframe {width: calc(100% - 100px);position: absolute;height: 100%;left: 50px;z-index: 1102;top: 0;}
}

@media(min-width: 768px){
    .tt_lightbox_preview_flex {display: flex;flex-wrap: wrap;padding: 0 20px 0 0;}
    .tt_preview_img:nth-child(3n){width:100%;}
    .tt_preview_img {margin: 10px 0 10px 20px;cursor: pointer;border-radius: 10px;width: calc(50% - 20px);}
    .tt_lightbox{padding-left:100px;}

    .tt_lightbox iframe {width: calc(100% - 200px);position: absolute;height: 100%;left: 100px;z-index: 1102;top: 0;}
}