/* ============================================== */
/* FancyBoxLight */
/* ============================================== */
.fbl-overlay {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.8); /* overlayColor */
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.3s;
}

.fbl-overlay.active {
  opacity:1;
  pointer-events:auto;
}

/* Contant container */
.fbl-content {
  width:80vw;
  height:80vh;
  max-width:80vw;
  max-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position: relative;
  background: transparent;
}

/* Aspect-ratio for img/video/svg */
.fbl-content img,
.fbl-content svg,
.fbl-content video {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* iframe scalable */
.fbl-content iframe {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
}

/* Buttons */
.fbl-close,
.fbl-prev,
.fbl-next {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  color:#fff;
  font-size:2rem;
  background: rgba(0,0,0,0.4);
  border:none;
  padding:0.2em 0.5em;
  cursor:pointer;
  z-index:10000;
  user-select:none;
}

.fbl-close { top:1rem; right:1rem; transform:none; }
.fbl-prev { left:1rem; }
.fbl-next { right:1rem; }

.fbl-prev:hover,
.fbl-next:hover,
.fbl-close:hover { background: rgba(255,255,255,0.3); }