.img-viewer {
    position:fixed;
    width:100vw;
    height:100vh;
    background:#000;
    top:0;
    transform:translateY(0%);
    transition:transform 300ms ease;
    transform: translateY(-100%);
    z-index: 10000;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding:5px;


}
.img-viewer.active {
    position:fixed;
    transform:translateY(0%);
  
}
.img-viewer .hide{
    display:none;
}

.viewer-gallery-container {
    position:relative;
    display: flex;
    justify-content: center;
    width:100%;
    height:100%;
    align-items: center;
}
.viewed-img {
    position:absolute;
    width:auto;
    max-height: 100%;
    height:auto;
    object-fit:contain;
    opacity:0;
    transform:translateX(40px);
    transition:all 300ms ease;
    border-radius:8px;
    z-index: -10;
}
.viewed-img.active {
    filter:brightness(1) ;
    opacity:1;
    transform:translateX(0px);
    z-index:10;
}
.viewer-topbar {
    width:100%;
    height:10%;
    display: flex;
    justify-content: end;
    padding-top:10px;
}
.viewer-close-btn {
    aspect-ratio:1/1;
    height:80%;
    cursor:pointer;
    padding:0;
    border-radius:0px;
}
.viewer-close-btn img {
    object-fit: contain;
    width:50%;
}
.viewer-footer {
    width:100%;
    height:15%;
}
.viewer-body {
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items:center;
    height:100%;
}
.transparent-btn {
    background:transparent;
    color:white; 
    border:none;
    font-family: 'Font Awesome 5 Pro';
    font-size:50px;
    cursor:pointer;
}
.chevron-btn {
    padding: 30px 0px 30px 40px; 
    height:100%;
}
.circle-btn {
    background:transparent;
    border:solid 2px #fff;
    border-radius:100%;
    padding:7px;
    margin: 0 2px;
}
.circle-btn:hover,.circle-btn:focus,.circle-btn:focus-visible,.circle-btn.active {
    background: #fff;
    border:solid 2px #fff;
}
.transparent-btn:hover, .transparent-btn:focus, .transparent-btn:focus-visible {
    border:none;
}
.viewer-chevron {
    width:25px;
    aspect-ratio: 1/2;
}

.viewer-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}
.viewed-yt{
    width:100%;
    padding: 0 30px;
    aspect-ratio: 16/9;
    /*YouTube already handle the resolution so display the video in large*/
}
.yt-loader {
    position:absolute;
    object-fit: contain;;
    width:50px;
    height:50px;
    top: 50%;
    left:50%;
    display:block;
    transform:translate(-50%,-50%);
    z-index:10;
    opacity:0;
}
.yt-loader.active {
    opacity:1;
}
.play-yt-icon, .card-yt {
    position: relative;
}
.play-yt-icon::before{
    content:"";
    pointer-events: none;
    background:url("/shop/templates/murga/assets/images/image-viewer/yt-icon.png") center no-repeat;
    aspect-ratio: 10/7;
    max-width:100px;
    width:30%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    position:absolute;
    background-size:contain;
}

.card-yt::before {
    pointer-events: none;
    aspect-ratio:1/1;
    width:30%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    position:absolute;
    background-size:contain;
}
.chevron-btn.active {
    transform:scale(0.9);
}
/*disable click swiper on touch device*/
@media (pointer:coarse) {
    .chevron-btn {
        display: none;
    }
    .circle-btn:hover, .circle-btn:focus,.circle-btn:focus-visible {
        background: transparent;
        border:solid 2px #fff;
    }
    .circle-btn.active {
        background:#fff;
    }
}
.main-product-thumbnail {
    cursor:pointer;
}
/*responsive stuff*/
@media (min-width:640px) {
    .viewer-chevron {
        width:30px;
    }
    .img-viewer {
        padding: 0 10px;
    }
    .circle-btn {
        padding: 10px;
    }
}
@media(min-width:768px) {
    .viewer-chevron {
        width:40px;
    }
    .img-viewer {
        padding: 0 20px;
    }
}

@media(min-width:1024px) {
    .img-viewer {
        padding: 0 30px;
    }
}
@media (min-width:1280px) {
    .viewer-chevron {
        width:45px;
    }
    .img-viewer {
        padding: 0 35px;
    }
}
@media (min-width: 1536px) {
    .viewer-chevron {
        width:50px;
    }
    .img-viewer {
        padding: 0 45px;
    }
}