/*add this to the page

<link
  rel="stylesheet"
  href="https://krono-dc.com/themes/custom/tatee/css/lightbox.css"
/>

<div id="lightbox" style="display: none">
  <div class="close">x</div>

  <div class="prev">&lt;</div>

  <div class="next">&gt;</div>
  <img class="zoom-img" src="https://picsum.photos/596" />
</div>
<script src="https://krono-dc.com/themes/custom/tatee/js/lightbox_1.js"></script>
<script src="https://krono-dc.com/themes/custom/tatee/js/lightbox_2.js"></script>
<script src="https://krono-dc.com/themes/custom/tatee/js/lightbox_3.js"></script>*/

/*add gallery class  for this to work*/
#lightbox {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: 9999;
}
/* .gallery img {
  cursor: zoom-in;
} */

#lightbox .close,
#lightbox .prev,
#lightbox .next {
  position: absolute;
  cursor: pointer;
  opacity: 0.6;
  font-size: 2.5rem;
  transition: all 0.4s !important;
  font-family: inherit;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  line-height: normal;
  padding-top: 3px;
}

@media (hover: hover) {
  #lightbox .prev:hover,
  #lightbox .next:hover {
    opacity: 0.8;
    background-color: #4d4646d4;
  }
}

#lightbox .close {
  right: 30px;
  top: 25px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(/sites/default/files/redesign/lb-close.svg);
  width: 25px;
  height: 25px;
  opacity: 1 !important;
}

#lightbox .prev {
  left: 15px;
}

#lightbox .next {
  right: 15px;
}

.gallery-hidden {
  display: none;
}

@media (min-width: 580px) {
  #lightbox .prev {
    left: 30px;
  }

  #lightbox .next {
    right: 30px;
  }
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1);
  }
  to {
    -webkit-transform: scale(2);
  }
}
@keyframes zoom {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}

.zoom-img {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
  max-height: 100vh;
}