.lightboxpreview {
  transition: all .3s linear;
  padding-top:60%;
  cursor:pointer;
  background-size:cover;
}

.lightbox-content {
  max-height:75svh;
  height:75svh;
}

.lightbox-close { 
  cursor:pointer;
  margin-left: auto;
  position:absolute;
  right:-30px;
  top:-30px;
  color:white;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.modalscale {transform:scale(0);
  opacity:0;
}

.lightbox-container, .lightbox-btn, .lightbox-image-wrapper, .lightbox-enabled{transition:all .4s ease-in-out;}
.lightbox_img_wrap {
  /*padding-top:65%;*/
  position:relative;
  overflow:hidden;
  border-radius: 10px;
}

.lightbox-enabled:hover {
  transform:scale(1.1)
}

.lightbox-enabled {
  width:100%;
  height:100%;
  /*position:absolute;
  top:0;*/
  object-fit:cover;
  cursor:pointer;
  border-radius: 10px;
}

.lightbox-container {
  width:100svw;
  height:100svh;
  position:fixed;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:rgb(0 0 0 / 91%);
  z-index:9999;
  opacity:0;
  pointer-events:none;
}

.lightbox-container.active {
  opacity:1;
  pointer-events:all;
}

.lightbox-image-wrapper {
  display:flex;
  transform:scale(0);
  align-items:center;
  justify-content:center;
  max-width:90vw;
  max-height:90vh;
  position:relative;
}

.lightbox-container.active .lightbox-image-wrapper {
  transform:scale(1);
}

.lightbox-btn, #close {
  color:white;
  z-index:9999999;
  cursor:pointer; 
  position:absolute;
  font-size:50px;
}

.left {left:50px;}
.right {right:50px;}
#close {top:50px;
right:50px;}

.lightbox-image {
  width:100%;
  max-height:95vh;
  object-fit:cover;
 }

@keyframes slideleft {
  33% {transform:translateX(-300px);
  opacity:0;
  }
  66% {transform:translateX(300px);
  opacity:0;
  }
}

.slideleft {
  animation-name: slideleft;
  animation-duration: .5s; 
  animation-timing-function: ease; 
}
@keyframes slideright {
  33% {transform:translateX(300px);
  opacity:0;}
  66% {transform:translateX(-300px);
  opacity:0;}
}

.slideright{
  animation-name: slideright;
  animation-duration: .5s; 
  animation-timing-function: ease; 
}
    

.lightbox_img_wrap span {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}