/* The container itself never gets a fractional opacity: an ancestor with opacity < 1
   forms a backdrop root, which switches backdrop-filter off for everything inside it.
   The backdrop and the contents each fade on their own instead. */
#lightbox {
  pointer-events:none;
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  cursor:pointer;
  z-index:9999999;
  line-height:0;
  font-family: sans-serif;
}
/* backdrop matches the substack popup overlay (see substack.css) */
#lightbox::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 0;
  opacity:0;
  /* no backdrop-filter: blurring a full-screen overlay on every frame of the fade is
     expensive in Chrome, and at 0.9 alpha there is next to nothing left to see */
  background:rgba(24, 18, 19, 0.9);
  transition:opacity .3s ease
}
#lightbox > * {
  opacity:0;
  transition:opacity .3s ease
}
body.lightbox_visible #lightbox {
  pointer-events:all
}
body.lightbox_visible #lightbox::before,
body.lightbox_visible #lightbox > * {
  opacity:1
}
#lightbox .img {
  position:relative;
  top:50%;
  left:50%;
  -ms-transform:translateX(-50%)translateY(-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  max-width:100%;
  max-height:100%
}
#lightbox .img img {
  opacity:0;
  pointer-events:none;
  width:auto
}
@media screen and (min-width:1200px) {
  #lightbox .img {
    max-width:1200px
  }
}
@media screen and (min-height:1200px) {
  #lightbox .img {
    max-height:1200px
  }
}
#lightbox span {
  display:block;
  position:fixed;
  bottom:13px;
  height:1.5em;
  line-height:1.4em;
  width:100%;
  text-align:center;
  color:#fff;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000
}
#lightbox span {
  display:none
}
#lightbox .videoWrapperContainer {
  position:relative;
  top:50%;
  left:50%;
  -ms-transform:translateX(-50%)translateY(-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  width:1200px;
  max-width:100%;
  max-height:100%
}
#lightbox .videoWrapperContainer .videoWrapper {
  height:0;
  line-height:0;
  margin:0;
  padding:0;
  position:relative;
  padding-bottom:56.333%;
  background:#000
}
#lightbox .videoWrapper iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
  display:block
}
#lightbox #prev,
#lightbox #next {
  height:50px;
  line-height:36px;
  display:none;
  margin-top:-25px;
  position:fixed;
  top:50%;
  padding:0 15px;
  cursor:pointer;
  text-decoration:none;
  z-index:99;
  color:#fff;
  font-size:60px
}
#lightbox.gallery #prev,
#lightbox.gallery #next {
  display:block
}
#lightbox #prev {
  left:0
}
#lightbox #next {
  right:0
}
#lightbox #close {
  height:50px;
  width:50px;
  position:fixed;
  cursor:pointer;
  text-decoration:none;
  z-index:99;
  right:0;
  top:0;
  background:0 0 !important
}
#lightbox #close:after,
#lightbox #close:before {
  position:absolute;
  margin-top:22px;
  margin-left:14px;
  content:"";
  height:2px;
  background:#fff;
  width:23px;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg)
}
#lightbox #close:after {
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg)
}
#lightbox,
#lightbox * {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}