.slbOverlay, .slbWrapOuter, .slbWrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.slbOverlay {
  overflow: hidden;
  z-index: 2000;
  background-color: #000;
  opacity: 0.7;
  -webkit-animation: slbOverlay 0.5s;
  -moz-animation: slbOverlay 0.5s;
  animation: slbOverlay 0.5s;
}

.slbWrapOuter {
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 2010;

  /* This is the scroll container, so vertical panning stays with the browser.
     Claiming the horizontal axis here (it scrolls nothing) means a swipe is ours
     to page with from the first move, without racing the browser for it. */
  touch-action: pan-y;

  /* The image is sized by an inline max-height of the full window height, and is
     border-box, so its vertical padding is what reserves room around it: a bar
     above carrying the close button, and the caption bar below. Both are pinned
     into that padding, and both are this tall - they frame the picture, so they
     match each other rather than each being sized to its own contents. */
  --slb-bar-height: 3rem;
}

.slbWrap {
  position: absolute;
  text-align: center;

  /* Breathing room at the sides. This used to live on .slbContentOuter, but that
     box now has to hug the image exactly so the caption bar can match its width. */
  padding: 0 1rem;
}

.slbWrap:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/* Shrink-to-fit around the image, with no padding of its own, so its edges are the
   image's edges - the caption bar and the arrows are pinned to this box. */
.slbContentOuter {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0px auto;
  padding: 0;
  box-sizing: border-box;
  z-index: 2020;
  text-align: left;
  max-width: 100%;
}

.slbContentEl .slbContentOuter {
  padding: 5em 1em;
}

.slbContent {
  position: relative;
}

.slbContentEl .slbContent {
  -webkit-animation: slbEnter 0.3s;
  -moz-animation: slbEnter 0.3s;
  animation: slbEnter 0.3s;
  background-color: #fff;
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.4);
}

.slbImageWrap {
  position: relative;
}

/* On open the whole panel enters together. When paging between images, though,
   only the picture may move — the caption bar is a child of this wrap, so
   animating the wrap would slide half the bar and leave the arrows behind it. */
.slbContent:not(.slbDirectionNext):not(.slbDirectionPrev) .slbImageWrap {
  -webkit-animation: slbEnter 0.3s;
  -moz-animation: slbEnter 0.3s;
  animation: slbEnter 0.3s;
}

.slbDirectionNext .slbImage {
  -webkit-animation: slbEnterNext 0.4s;
  -moz-animation: slbEnterNext 0.4s;
  animation: slbEnterNext 0.4s;
}

.slbDirectionPrev .slbImage {
  -webkit-animation: slbEnterPrev 0.4s;
  -moz-animation: slbEnterPrev 0.4s;
  animation: slbEnterPrev 0.4s;
}

.slbImage {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: var(--slb-bar-height) 0 var(--slb-bar-height);
  margin: 0 auto;

  /* A white backing for transparent PNGs. Painted on the image rather than on a
     wrapper so it travels with the picture as it is dragged, and clipped to the
     content box so it doesn't fill the padding reserved for the bar and close. */
  background-color: #fff;
  background-clip: content-box;
}

/* Top bar - the close button's backing, and the caption bar's opposite number. Pinned
   to the same box as the caption, so the two are the same width and the same height
   and the picture sits framed between them, rather than the X floating loose over
   whatever happens to be at the top of the image. Drawn as a pseudo-element rather
   than by widening the button, so only the X itself closes the lightbox. */
.slbImageWrap:before {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--slb-bar-height);

  background-color: rgba(0, 0, 0, 0.85);
}

/* Caption bar - a solid strip the width of the image, carrying the image's name in
   the centre and (via .slbArrows below) the paging arrows at either end. Solid so
   the arrows always have something to read against, whatever the image behind. */
.slbCaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--slb-bar-height);
  /* Centred by line-height rather than flex, so text-overflow still applies to a
     long name (ellipsis needs a block container, not a flex one) */
  line-height: var(--slb-bar-height);

  /* Keep the name clear of the arrows sitting on top of the bar */
  padding: 0 var(--slb-bar-height);

  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;

  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.slbCloseBtn, .slbArrow {
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
}

.slbCloseBtn::-moz-focus-inner, .slbArrow::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.slbCloseBtn:hover {
  opacity: 0.5;
}

.slbCloseBtn:active {
  opacity: 0.8;
}

/* The arrows are dimmed white on a dark bar, so they brighten rather than fade
   on interaction. Tinting the chevron itself rather than fading the whole button
   keeps their backing exactly the same shade as the bar. */
.slbArrow.next:hover:before {
  border-left-color: #fff;
}

.slbArrow.prev:hover:before {
  border-right-color: #fff;
}

.slbArrow:active {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Square, the height of the top bar, flush with the image's right edge - the same
   footprint the arrows take at the ends of the caption bar below. */
.slbCloseBtn {
  -webkit-animation: slbEnter 0.3s;
  -moz-animation: slbEnter 0.3s;
  animation: slbEnter 0.3s;
  font-size: 2rem;
  width: var(--slb-bar-height);
  height: var(--slb-bar-height);
  line-height: var(--slb-bar-height);
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.slbLoading .slbCloseBtn {
  display: none;
}

.slbLoadingText {
  font-size: 1.4em;
  color: #fff;
  color: rgba(255, 255, 255, 0.9);
}

/* The arrows sit at either end of the caption bar rather than floating over the
   middle of the image, where a light picture could swallow them. .slbContentOuter
   hugs the image, so pinning to its bottom edge lands them exactly on the bar. */
.slbArrows {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--slb-bar-height);
}

.slbLoading .slbArrows {
  display: none;
}

.slbArrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--slb-bar-height);
  height: 100%;
  margin: 0;
  /* Matches the caption bar they sit on, so they still have a backing to read
     against on an image that has no caption */
  background-color: rgba(0, 0, 0, 0.85);
  text-indent: -999em;
  overflow: hidden;
}

.slbArrow:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.4375rem 0 0 -0.4375rem;
  border: 0.4375rem solid transparent;
}

.slbArrow.next {
  right: 0;
}

.slbArrow.next:before {
  border-left-color: rgba(255, 255, 255, 0.75);
}

.slbArrow.prev {
  left: 0;
}

.slbArrow.prev:before {
  border-right-color: rgba(255, 255, 255, 0.75);
}

.slbIframeCont {
  width: 80em;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
  margin: 5em 0;
}

.slbIframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.6);
  background: #000;
}

@-webkit-keyframes slbOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}

@-moz-keyframes slbOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}

@keyframes slbOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}

@-webkit-keyframes slbEnter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -1em, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@-moz-keyframes slbEnter {
  from {
    opacity: 0;
    -moz-transform: translate3d(0, -1em, 0);
  }
  to {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
  }
}

@keyframes slbEnter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -1em, 0);
    -moz-transform: translate3d(0, -1em, 0);
    -ms-transform: translate3d(0, -1em, 0);
    -o-transform: translate3d(0, -1em, 0);
    transform: translate3d(0, -1em, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slbEnterNext {
  from {
    opacity: 0;
    -webkit-transform: translate3d(4em, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@-moz-keyframes slbEnterNext {
  from {
    opacity: 0;
    -moz-transform: translate3d(4em, 0, 0);
  }
  to {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
  }
}

@keyframes slbEnterNext {
  from {
    opacity: 0;
    -webkit-transform: translate3d(4em, 0, 0);
    -moz-transform: translate3d(4em, 0, 0);
    -ms-transform: translate3d(4em, 0, 0);
    -o-transform: translate3d(4em, 0, 0);
    transform: translate3d(4em, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slbEnterPrev {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-4em, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@-moz-keyframes slbEnterPrev {
  from {
    opacity: 0;
    -moz-transform: translate3d(-4em, 0, 0);
  }
  to {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
  }
}

@keyframes slbEnterPrev {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-4em, 0, 0);
    -moz-transform: translate3d(-4em, 0, 0);
    -ms-transform: translate3d(-4em, 0, 0);
    -o-transform: translate3d(-4em, 0, 0);
    transform: translate3d(-4em, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}