.lightbox{
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .90);
  overflow: auto;
  animation: lightboxIn .5s;
  transition: opacity .3s;
}

.lightbox.fadeOut{
  opacity: 0;
}

.lightbox__next,
.lightbox__prev{
  background-color: rgba(0, 0, 0, .90);
  background: url(/assets/svg/arrow-f211bef3c452c0e3fa7a23dcbb58909714fb51a0897ab87719132c50f2bf57b4.svg) center center / 16px 28px no-repeat;
  width: 50px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  margin-top: -14px;
  z-index: 11;
}

.lightbox__prev{
  right: auto;
  left: 0;
  transform: rotate(180deg);
}

.lightbox__close{
  width: 30px;
  height: 30px;
  background: url(/assets/svg/cross-3b2080353466137cd1d49478c4031aa82c0d186aa63ced149202808d41698579.svg) center center / 100% 100% no-repeat transparent;
  position: fixed;
  top: 20px;
  right: 8px;
  z-index: 12;
}

.lightbox button {
  opacity: .5;
  transition: opacity .3s;
  text-indent: -3000px;
  border: none;
}

.lightbox button:hover {
  opacity: 1;
}

.lightbox__container {
  margin-left: 50px;
  margin-right: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0 50px;
}

.lightbox__container img {
  width: 65%;
  height: 100vh;
  -o-object-fit: contain;
     object-fit: contain;
  animation: lightboxIn .5s;
}

.lightbox__loader{
  width: 38px;
  height: 38px;
  opacity: .5;
  background: url(/assets/svg/loader-749a7911a79ea2490f93781af13940a8cab90fbb12bef0843c8499c3d033a559.svg) center center no-repeat;
}

@keyframes lightboxIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@media (max-width: 1260px) {
  .lightbox__container img {
    width: 80%;
  }
}

@media (max-width: 960px) {
  .lightbox__container img {
    width: 100%;
  }
}