:root {
  --lightbox-title-color: #fff;
  --lightbox-title-bg: transparent;
  --lightbox-inner-bg: transparent;

  --gallery-nav-color: #fff;
  --gallery-nav-hover-color: #ccc;
}
.sfwdpress-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90000;

  background: rgba(0, 0, 0, 0.8);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  overflow: hidden;

  padding: 0 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  gap: 8px;

  display: none;
}

.sfwdpress-lightbox.show {
  display: flex;
}

.sfwdpress-lightbox .prev-button,
.sfwdpress-lightbox .next-button {
  order: 1;
  border: 0;
  background: transparent;
  color: #fff;
  fill: #fff;
  cursor: pointer;
}

.sfwdpress-lightbox .prev-button svg,
.sfwdpress-lightbox .next-button svg {
  height: 35px !important;
}

.sfwdpress-lightbox .next-button {
  order: 3;
  transform: scaleX(-1);
}

.sfwdpress-lightbox .inner {
  order: 2;
  position: relative;

  max-height: calc(100vh - 100px);
  background: var(--lightbox-inner-bg);
  padding: 0px;

  width: 90vw;
  height: 80vh;
}

.sfwdpress-lightbox img {
  display: block;
  margin: 0 auto;
  object-fit: contain;

  width: auto;
  height: 100%;
  min-height: 100%;

  max-width: 100%;
  max-height: 100%;
}

.sfwdpress-lightbox h2 {
  order: 1;
  background: var(--lightbox-title-bg);
  margin: 0;
  text-transform: uppercase;
  color: var(--lightbox-title-color);
  padding: 0;
  font-size: 21px;
  text-align: center;
}

.sfwdpress-lightbox .popup-nav {
  order: 3;
  display: flex;
  gap: 16px;
  text-align: center;
  width: 100%;
  justify-content: center;
}

.sfwdpress-lightbox .popup-nav button {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 24px;
  color: var(--gallery-nav-color);
  fill: var(--gallery-nav-color);
}

.sfwdpress-lightbox .popup-nav button:hover {
  color: var(--gallery-nav-hover-color);
  fill: var(--gallery-nav-hover-color);
}

.sfwdpress-lightbox .popup-nav button svg {
  display: block;
  height: 25px;
}

.sfwdpress-lightbox .popup-nav .close svg {
  height: 25px !important;
}

.sfwdpress-lightbox.video-lightbox .inner {
  position: relative;
  padding: 0;
  overflow-y: unset;
  width: 90vw;
  background: #000;
  aspect-ratio: calc(16 / 9);
}

.sfwdpress-lightbox.video-lightbox .inner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 512 512"%3E%3Cpath d="M256 52a12 12 0 1 1 0 24 12 12 0 1 1 0-24zM204 64a52 52 0 1 0 104 0A52 52 0 1 0 204 64zm20 384a32 32 0 1 0 64 0 32 32 0 1 0 -64 0zM480 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM64 220a36 36 0 1 0 0 72 36 36 0 1 0 0-72zm339.1-88.5a16 16 0 1 1 -22.6-22.6 16 16 0 1 1 22.6 22.6zm28.3-50.9a56 56 0 1 0 -79.2 79.2 56 56 0 1 0 79.2-79.2zM97.6 369.1a32 32 0 1 0 45.3 45.3A32 32 0 1 0 97.6 369.1zm316.8 45.3a32 32 0 1 0 -45.3-45.3 32 32 0 1 0 45.3 45.3zM125.9 125.9a8 8 0 1 1 -11.3-11.3 8 8 0 1 1 11.3 11.3zm28.3-39.6A48 48 0 1 0 86.3 154.2a48 48 0 1 0 67.9-67.9z"/%3E%3C/svg%3E')
    center center no-repeat;
  background-size: 35px;

  animation: rotate-bg 1.5s linear infinite;
}

.video-lightbox {
  grid-template-columns: 1fr 1fr 1fr;
}

@keyframes rotate-bg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.sfwdpress-lightbox.video-lightbox iframe {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;

  border: 0 !important;

  aspect-ratio: calc(16 / 9);

  background: #000;
}

.video-lightbox .video-lightbox-nav {
  position: absolute;
  top: -40px;
  right: -5px;

  z-index: 55555555;
}

.video-lightbox .video-lightbox-nav button {
  background: transparent;
  border: 0;
  fill: #fff;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
}

@media only screen and (max-height: 450px) and (orientation: landscape) {
  .sfwdpress-lightbox {
    padding: 0 !important;
  }

  .sfwdpress-lightbox.video-lightbox .inner {
    width: 65vw;
  }
}