.lightbox{
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.9);
    z-index:999;
    overflow: auto;
    animation: lightboxIn 0.5s;
    transition: opacity 0.3s;
}
.lightbox::-webkit-scrollbar{
    width:7px;
}
.lightbox::-webkit-scrollbar-track{
    background:black;
    padding:1px;
}
.lightbox::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.3);
    border-radius:4px;
}
.lightbox.fadeOut{
    opacity:0;
}

.lightbox__prev,
.lightbox__next{
    border:none;
    background:url('../img/arrow.svg') center center / 16px 28px no-repeat;
    width:50px;

    top:0%;
    height:100%;
    margin-top:-14px;
    z-index: 1000;
    right:0;
} 
.lightbox__prev{
   right:auto;
   left:0;
   transform: rotate(180deg);
}

.lightbox__close{
    border:none;

    background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="white" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>') center center / 100% 100% no-repeat;
    top:20px;
    width:24px;
    height:24px;
    z-index: 1001;
    right:10px;
}
.lightbox button{
    opacity:0.5;
    cursor:pointer;
    position: fixed;
    transition:opacity 0.35s;
    text-indent: -99999px;
}
.lightbox button:hover{
    opacity:0.9;
}
.lightbox__container{
    animation: zoomIn 0.5s;
}
.lightbox__container img{
    width: unset;
    max-height: 75vh;
    max-width: 100%;
    animation: lightboxIn 0.5s;
    position: relative;
}
.lightbox__container{
    margin-left: 50px;
    margin-right: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100vh;
}
.lightbox__loader{
    width: 38px;
    height:38px;
    opacity: 0.5;
    background:url('../img/loader.svg') center center no-repeat;
}
.lightbox__thumbs{
    height: 15vh;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    margin: 0 5rem;
    max-width: 100%;
    position: relative;
    text-align: center;
}
.lightbox__thumbs__wrapper{
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: inline-block;
    width: max-content;
    position: relative;
    top:0;
    left: 0;
}
.lightbox__thumbs__wrapper a {
    height: 10vh;
    display: inline-block;
    margin: 5px;
    float: left;
    opacity: 0.5;
    border: 1px solid rgba(255,255,255,0.3);
    cursor: pointer;
    flex: 0 0 10%;
    border-radius: 3px;
    padding: 0;
}
.lightbox__thumbs__wrapper a:hover{
    opacity:0.7;
}
.lightbox__thumbs__wrapper a.selected {
    opacity: 1;
}
.lightbox__thumbs__wrapper img {
    height: 100%;
}
@keyframes lightboxIn{
    from {opacity:0;}
    to {opacity:1;}
}
@keyframes zoomIn{
    from {transform:scale(0.5);}
    to {transform:scale(1);}
}