img.clearpath-lightbox-img {
  position: relative;
  cursor: zoom-in;
  transform-origin: top left 0;
  z-index: 0;
  transform: translate(0, 0) scale(1);
  transition: transform 300ms 300ms, background 300ms 600ms, outline 300ms 600ms, z-index 0s 600ms;
  outline: 3px solid rgba(255, 255, 255, 0);
  will-change: auto;
}

img.clearpath-lightbox-img.clearpath-lightbox-img-active {
  transition: transform 300ms 300ms, background 300ms 0ms, outline 300ms 300ms, z-index 0s 0s;
  cursor: zoom-out;
  background: rgba(255, 255, 255, 255);
  outline: 3px solid rgba(255, 255, 255, 255);
  z-index: 99999;
}

.clearpath-lightbox-overlay {
  position:fixed;
  display:block;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow:hidden;
  background:#7f7f7f;
  opacity:0;
  margin:0;
  padding:0;
  transition:opacity 300ms;
  pointer-events:none;
  z-index:99998;
  will-change: auto;
}

.clearpath-lightbox-overlay.clearpath-lightbox-active {
  cursor:zoom-out;
  opacity:0.5;
  pointer-events:auto;
}