html {
  font-size: 62.5%
}
body {
  padding: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  font-size: 1.8rem
}
main {
  padding: 0 24px
}
.fa-icon {
  position: relative
}
.fa-icon::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  top: .25em;
  background: var(--cta)
}
.mask-icon::before {
  content: '';
  display: inline-block;
  mask-type: luminance;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left top;
  mask-position: left top;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: var(--cta);
  margin-right: .5em
}
.smaller {
  font-size: .85em
}
:root {
  --background: #fff;
  --cta: #BC4500;
  --highlight: #E6F5F5;
  --highlight2: #AEDDDD;
  --light-background: rgba(230, 245, 245, 0.5);
  --light: #F5F5F5;
  --medium: #515151;
  --text: #151515;
  --text-highlight: #000;
  --shadow: 174,221,221;
  --font: "Space Grotesk",sans-serif;
  --heading-font: "Josefin Sans",sans-serif;
  --nav-font: var(--heading-font);
  --font-weight: 400;
  --heading-weight: 400;
  --nav-weight: 400
}
@-webkit-keyframes grow_and_glow {
  from {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-color: rgba(187,244,255,.2)
  }
  to {
    width: 150vw;
    height: 150vh;
    left: -50vw;
    top: -50vh;
    border-color: #bbf4ff
  }
}
@keyframes grow_and_glow {
  from {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-color: rgba(187,244,255,.2)
  }
  to {
    width: 150vw;
    height: 150vh;
    left: -50vw;
    top: -50vh;
    border-color: #bbf4ff
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@-webkit-keyframes twinkle {
  0% {
    color: #eee
  }
  15% {
    color: #999
  }
}
@keyframes twinkle {
  0% {
    color: #eee
  }
  15% {
    color: #999
  }
}
::-moz-selection {
  background: var(--cta);
  color: var(--light)
}
::selection {
  background: var(--cta);
  color: var(--light)
}
body {
  line-height: 1.5;
  background: var(--background);
  color: var(--text);
  font-family: var(--font)
}
body.kubrick {
  --background: #fff;
  --background-color: #fff;
  --cta: #BC4500;
  --highlight: #E6F5F5;
  --highlight2: #AEDDDD;
  --light-background: rgba(230, 245, 245, 0.5);
  --light: #F5F5F5;
  --medium: #515151;
  --med-light: #999;
  --text: #151515;
  --text-highlight: #000;
  --shadow: 174,221,221;
  --font: "Space Grotesk",sans-serif;
  --heading-font: "Josefin Sans",sans-serif;
  --nav-font: var(--heading-font);
  --nav-weight: 600
}
body.drjones {
  background-image: url(/img/drjones-background-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
  --background-color: #bd994f;
  --cta: #AE3416;
  --highlight: #A4CDD8;
  --highlight2: #c6dfe7;
  --light-background: rgba(164, 205, 216, 0.5);
  --light: #FFFFFF;
  --medium: #523023;
  --text: #4f2b1e;
  --text-highlight: #000;
  --shadow: 79,43,30;
  --font: "Crimson Pro",serif;
  --heading-font: "Bangers",sans-serif;
  --nav-font: var(--heading-font);
  letter-spacing: .035em;
  font-size: 2.3rem
}
@supports (-webkit-touch-callout:none) {
  body.drjones {
    background-image: none;
    background-color: #bd994f;
    position: relative
  }
  body.drjones::before {
    content: '';
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url(/img/drjones-background-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    z-index: -1
  }
}
body.berlin {
  --background: #F0EFEB;
  --background-color: #F0EFEB;
  --cta: #a91010;
  --highlight: #3C4529;
  --highlight2: #999D8F;
  --light-background: rgba(60, 69, 41, 0.85);
  --light: #FFFFFF;
  --medium: #464C4D;
  --text: #151515;
  --text-highlight: #F0EFEB;
  --shadow: 153,157,143;
  --font: "Helvetica Neue","Helvetica",sans-serif;
  --heading-font: "Helvetica Neue","Helvetica",sans-serif;
  --nav-font: var(--font);
  --nav-weight: 200;
  --heading-weight: 600
}
body.synthwave {
  --background-color: #13033E;
  background: linear-gradient(to right,#7b045f,#13033e,#13033e,#036a96);
  --cta: #AD0886;
  --highlight: #1292C8;
  --highlight2: #85cd20;
  --light-background: #0678a9;
  --light: #FFF;
  --medium: #FFB200;
  --text: #BBF4FF;
  --text-highlight: #BBF4FF;
  --shadow: 18,146,200;
  --font: "Montserrat Alternates",sans-serif;
  --heading-font: "Audiowide",sans-serif;
  --nav-font: var(--font);
  --nav-weight: 600;
  letter-spacing: .035em;
  position: relative
}
body.synthwave::before {
  content: '';
  width: 100vw;
  height: 100vh;
  background: url(/img/svg/synthwave-bkg-3-at-70.svg);
  background-size: cover;
  background-position: center bottom;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1
}
body.jser {
  display: block;
  background-color: #13033e;
  background: linear-gradient(to right,#7b045f,#13033e,#13033e,#036a96)
}
body.jser .adventure,
body.jser .content {
  display: none
}
body.jser #jser {
  width: calc(100% - 48px);
  max-width: 400px;
  margin: 15% auto auto;
  border: 5px solid #ad0886;
  border-radius: 24px
}
body.jser p {
  margin: 48px;
  color: #bbf4ff
}
body.jser b {
  color: #fff
}
body.jser a,
body.jser a:visited {
  color: #1292c8
}
body.jser a:hover {
  color: #ffb200
}
a,
a:visited {
  color: var(--cta)
}
.synthwave a,
.synthwave a:visited {
  color: var(--medium)
}
a:hover {
  color: var(--text)
}
.synthwave a:hover {
  color: var(--highlight2)
}
.mail a {
  text-decoration: none;
  color: var(--cta)
}
.synthwave .mail a {
  color: var(--light)
}
.mail::before {
  width: 1em;
  height: 1em;
  position: relative;
  top: .2em;
  -webkit-mask-image: url(/img/svg/envelope-light.svg);
  mask-image: url(/img/svg/envelope-light.svg);
  background-color: var(--cta)
}
.synthwave .mail::before {
  background-color: var(--light)
}
.mail:hover a {
  color: var(--text)
}
.synthwave .mail:hover a {
  color: var(--highlight2)
}
.mail:hover::before {
  background-color: var(--text)
}
.synthwave .mail:hover::before {
  background-color: var(--highlight2)
}
.download::before {
  width: 1em;
  height: 1em;
  background-color: var(--text);
  -webkit-mask-image: url(/img/svg/file-download-light.svg);
  mask-image: url(/img/svg/file-download-light.svg)
}
div.adventure {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(1000px);
  transform: translateZ(1000px);
  background: #444
}
div.adventure ul {
  margin: 0 auto;
  padding: 0 2em;
  height: 2.5em;
  font-size: 1.4rem;
  list-style-type: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  max-width: 1100px;
  -ms-flex-pack: justify;
  justify-content: space-between
}
div.adventure ul li {
  -ms-flex-item-align: center;
  align-self: center;
  color: #999;
  cursor: pointer
}
div.adventure ul li:hover {
  color: #fff
}
.firstrun div.adventure ul li {
  -webkit-animation: twinkle 4s infinite linear;
  animation: twinkle 4s infinite linear
}
.firstrun div.adventure ul li:nth-child(1) {
  -webkit-animation-delay: .5s;
  animation-delay: .5s
}
.firstrun div.adventure ul li:nth-child(2) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}
.firstrun div.adventure ul li:nth-child(3) {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s
}
.firstrun div.adventure ul li:nth-child(4) {
  -webkit-animation-delay: 2s;
  animation-delay: 2s
}
h1,
h2,
h3,
h4,
h5 {
  color: var(--cta);
  font-family: var(--heading-font);
  font-weight: var(--heading-weight)
}
.drjones h1,
.drjones h2,
.drjones h3,
.drjones h4,
.drjones h5 {
  color: var(--text)
}
.synthwave h1,
.synthwave h2,
.synthwave h3,
.synthwave h4,
.synthwave h5 {
  color: var(--light)
}
.kubrick h3 {
  font-size: 30px;
  margin-bottom: .35em;
  line-height: 1.35;
  color: var(--text)
}
.kubrick section > h3 {
  text-indent: -.1em
}
.kubrick p,
.kubrick ul {
  margin-top: 0
}
.berlin h3 {
  font-size: 1.5em;
  color: var(--highlight)
}
nav {
  font-size: 2.7em;
  line-height: 1.15;
  transition: font-size .3s;
  position: relative
}
@media (max-width:1100px) and (min-width:769px) {
  nav {
    font-size: 4.2vw
  }
}
@media (max-width:768px) {
  nav {
    position: fixed;
    top: 35px;
    z-index: 99;
    padding-top: 12px;
    width: 100%;
    background: var(--background-color);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: end;
    align-items: end;
    box-shadow: 0 2px 6px rgba(var(--shadow),.8);
    -webkit-transform: translateZ(1000px);
    transform: translateZ(1000px)
  }
  .drjones nav {
    background-image: url(/img/drjones-card-bg-1.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    box-shadow: 0 2px 6px rgba(var(--shadow),.8),inset 0 0 48px #71250c
  }
  .synthwave nav {
    box-shadow: 0 1px 30px 12px rgba(255,255,255,.1),0 2px 50px 12px rgba(67,187,238,.2),0 6px 80px 12px rgba(var(--shadow),.8)
  }
}
nav #navmenu {
  position: relative;
  margin-left: auto;
  margin-right: 24px;
  margin-bottom: 12px;
  border: 2px solid var(--text);
  border-right: 0 transparent;
  border-left: 0 transparent;
  background: 0 0;
  -webkit-appearance: none;
  font-size: 1px;
  height: 18px;
  width: 24px;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  transition: border-color .3s
}
@media (min-width:769px) {
  nav #navmenu {
    display: none
  }
}
nav #navmenu span {
  display: inline-block;
  position: relative;
  height: 2px
}
nav #navmenu span::after,
nav #navmenu span::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--text);
  position: absolute;
  left: 0;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s,-webkit-transform .3s
}
nav #navmenu.active {
  border-color: transparent
}
nav #navmenu.active span::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
nav #navmenu.active span::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}
nav #navLinks {
  margin: 0;
  position: relative;
  padding-left: 1.5em;
  padding-right: 1em;
  margin-left: auto;
  list-style-type: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s
}
nav #navLinks.active {
  max-height: 7em;
  margin-bottom: 12px
}
@media (min-width:769px) {
  nav #navLinks {
    position: sticky;
    top: 25%;
    margin-left: 0;
    padding-top: 0;
    max-height: initial;
    overflow: visible
  }
}
nav li.nav-link {
  margin-bottom: 0;
  transition: all .3s
}
@media (min-width:769px) {
  .berlin nav li.nav-link {
    -webkit-transform: rotate(-33deg);
    transform: rotate(-33deg)
  }
}
nav li.nav-link.active {
  position: relative
}
.drjones nav li.nav-link.active span {
  color: var(--cta)
}
nav li.nav-link.active::before {
  content: ''
}
.kubrick nav li.nav-link.active::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  background: var(--cta);
  position: absolute;
  left: -1.2em;
  top: .1em
}
@media (min-width:768px) {
  .berlin nav li.nav-link.active::before {
    display: inline-block;
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background: var(--cta);
    position: absolute;
    left: -1.35em;
    top: -.425em;
    z-index: -1
  }
}
.synthwave nav li.nav-link.active::before {
  display: inline-block;
  width: 6em;
  height: 4px;
  background: var(--highlight);
  position: absolute;
  bottom: 0;
  left: 0
}
nav li.nav-link span {
  color: var(--text);
  text-decoration: none;
  font-family: var(--nav-font);
  font-weight: var(--nav-weight);
  cursor: pointer
}
.drjones nav li.nav-link span {
  cursor: url(/img/svg/plane-solid-cursor-blue.png),pointer;
  text-shadow: 1px 1px 0 rgba(255,255,255,.8),2px 3px 8px #523023
}
.berlin nav li.nav-link span {
  font-size: .8em
}
nav li.nav-link span:hover {
  color: var(--cta)
}
.berlin nav li.nav-link span:hover {
  color: var(--text);
  border-bottom: 3px solid var(--cta)
}
@media (min-width:769px) {
  .berlin nav li.nav-link span:hover {
    border-bottom: none
  }
  .berlin nav li.nav-link span:hover::before {
    content: '';
    width: 100%;
    height: 3px;
    background: var(--cta);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    mix-blend-mode: difference
  }
}
.synthwave nav li.nav-link span:hover {
  color: var(--highlight2)
}
.content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto
}
@media (min-width:768px) {
  .content {
    display: grid;
    grid-template-columns: auto 3fr
  }
}
main.dimmed {
  position: relative
}
main.dimmed::before {
  content: '';
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,.5);
  -webkit-animation: fadein .5s linear;
  animation: fadein .5s linear
}
.kubrick main.dimmed::before {
  background: rgba(230,245,245,.85)
}
.drjones main.dimmed::before {
  background: rgba(189,153,79,.7)
}
.berlin main.dimmed::before {
  background: rgba(153,157,143,.8)
}
.synthwave main.dimmed::before {
  background: rgba(19,3,62,.8)
}
main > section {
  padding-top: 8em
}
main > section header {
  position: relative;
  line-height: 1.15
}
main > section header h1 {
  margin: 0;
  font-size: 3.75em;
  transition: all .2s ease 0s
}
.kubrick main > section header h1 {
  color: var(--text);
  font-weight: var(--nav-weight)
}
.drjones main > section header h1 {
  color: var(--text-highlight);
  background: linear-gradient(to bottom,#efa28f 0,#ae3416 35%,#241611 100%);
  background-size: 100%;
  background-position: left center;
  pointer-events: none;
  text-shadow: 3px 4px 8px rgba(0,0,0,.25);
  -webkit-text-stroke-width: .01em;
  -webkit-text-stroke-color: rgba(255,255,255,.9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  -webkit-font-smoothing: antialiased;
  box-decoration-break: clone
}
.synthwave main > section header h1 {
  color: var(--light)
}
main > section header h2 {
  margin-top: 0
}
.berlin main > section header h2 {
  color: var(--text)
}
.drjones main > section header h2 {
  color: var(--text)
}
.synthwave main > section header h2 {
  color: var(--highlight)
}
.kubrick main > section header.fancy h1 {
  text-align: right;
  font-size: 7em
}
@media (max-width:1100px) {
  .kubrick main > section header.fancy h1 {
    font-size: 12.2vw
  }
}
.berlin main > section header.fancy h1 {
  font-size: 6em
}
@media (max-width:1100px) {
  .berlin main > section header.fancy h1 {
    font-size: 14vw
  }
}
@media (min-width:768px) {
  .berlin main > section header.fancy h1 {
    text-indent: -.07em
  }
}
.drjones main > section header.fancy {
  -webkit-perspective: 35em;
  perspective: 35em;
  -webkit-perspective-origin: top center;
  perspective-origin: top center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  backface-visibility: visible
}
.drjones main > section header.fancy h1 {
  font-size: 9em;
  padding-left: .05em;
  padding-top: .16em;
  background: linear-gradient(to bottom,#efa28f 0,#ae3416 35%,#241611 100%);
  background-size: contain;
  background-position: left center;
  pointer-events: none;
  text-shadow: 3px 4px 8px rgba(0,0,0,.25);
  -webkit-text-stroke-width: .02em;
  -webkit-text-stroke-color: rgba(255,255,255,.9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  -webkit-font-smoothing: antialiased;
  box-decoration-break: clone;
  -webkit-transform: rotateY(50deg) translate3d(-.05em,-.32em,1px);
  transform: rotateY(50deg) translate3d(-.05em,-.32em,1px);
  -webkit-transform-origin: center top 0;
  transform-origin: center top 0
}
@media (max-width:1100px) {
  .drjones main > section header.fancy h1 {
    font-size: 11vw;
    -webkit-transform: rotateY(50deg) translate3d(-1.1vw,-.32em,1px);
    transform: rotateY(50deg) translate3d(-1.1vw,-.32em,1px)
  }
}
@media (max-width:768px) {
  .drjones main > section header.fancy h1 {
    font-size: 17vw
  }
}
@supports (-webkit-touch-callout:none) {
  .drjones main > section header.fancy h1 {
    -webkit-transform: none;
    transform: none
  }
}
@supports (-moz-appearance:none) {
  .drjones main > section header.fancy h1 {
    font-size: 11vw;
    -moz-transform: none
  }
}
.synthwave main > section header.fancy::after,
.synthwave main > section header.fancy::before {
  font-size: 7em;
  content: '';
  width: .2em;
  height: 4em;
  background: radial-gradient(rgba(255,255,255,.1) 0,rgba(255,255,255,0) 50%);
  position: absolute;
  top: -1.3em;
  left: .1em;
  z-index: 3;
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  pointer-events: none;
  opacity: .6
}
.synthwave main > section header.fancy::after {
  height: 6em;
  top: -2.2em;
  left: .4em;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  background: radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,0) 50%)
}
.synthwave main > section header.fancy h1 {
  font-size: 7em;
  display: inline-block;
  color: var(--text);
  background: linear-gradient(to bottom,#003d64 0,#07456d 35%,#bae2ff 52%,#45075a 53%,#9e49ba 65%,#d8d8d8 100%);
  background-size: 100%;
  background-position: left center;
  text-shadow: 0 0 .95em rgba(145,218,248,.7);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #aaa;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  -webkit-font-smoothing: antialiased;
  box-decoration-break: clone
}
@media (max-width:1100px) {
  .synthwave main > section header.fancy h1 {
    font-size: 11vw
  }
}
@media (max-width:768px) {
  .synthwave main > section header.fancy h1 {
    font-size: 17vw;
    text-indent: -.07em
  }
}
@media not all and (min-resolution:0.001dpcm) {
  @supports (-webkit-appearance:none) {
    .synthwave main > section header.fancy h1 {
      text-shadow: 0 0 .95em rgba(145,218,248,.25)
    }
  }
}
.synthwave main > section header.fancy h1::after,
.synthwave main > section header.fancy h1::before {
  content: '';
  width: 1em;
  height: 1em;
  background: radial-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.07) 25%,rgba(255,255,255,.2) 30%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 40%,rgba(255,255,255,.05) 60%,rgba(255,255,255,0) 61%);
  position: absolute;
  top: -.05em;
  left: -.19em;
  pointer-events: none
}
.synthwave main > section header.fancy h1::after {
  width: 6em;
  height: 6em;
  top: -.9em;
  left: -1.79em;
  opacity: .3
}
ul.bullet {
  list-style-type: initial;
  padding-left: 1em
}
ul.bullet li {
  margin-bottom: .5em
}
ul.bullet li::marker {
  color: var(--highlight2)
}
ul.bullet li.mask-icon {
  list-style-type: none;
  position: relative;
  margin-left: 1em
}
ul.bullet li.mask-icon::before {
  width: 1em;
  height: 1em;
  position: absolute;
  left: -1em;
  top: .25em
}
.kubrick ul.bullet li.mask-icon::before {
  width: .5em;
  height: .5em;
  background: var(--highlight2);
  -webkit-mask-image: url(/img/svg/circle-solid.svg);
  mask-image: url(/img/svg/circle-solid.svg)
}
.drjones ul.bullet li.mask-icon::before {
  -webkit-mask-image: url(/img/svg/map-marker-solid.svg);
  mask-image: url(/img/svg/map-marker-solid.svg)
}
.berlin ul.bullet li.mask-icon::before {
  -webkit-mask-image: url(/img/svg/square-solid.svg);
  mask-image: url(/img/svg/square-solid.svg);
  width: .65em;
  height: .65em;
  top: .25em
}
.synthwave ul.bullet li.mask-icon::before {
  -webkit-mask-image: url(/img/svg/synthwave-triangles2.svg);
  mask-image: url(/img/svg/synthwave-triangles2.svg);
  left: -1em;
  top: -.25em;
  width: 2em;
  height: 2em;
  z-index: -1
}
ul.bullet.cta li::marker {
  color: var(--cta)
}
ul.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(12em,auto));
  grid-gap: .5em;
  padding-left: 0;
  list-style-type: none
}
dl.grid {
  display: grid;
  grid-template-columns: 1fr
}
dl.grid dt {
  color: var(--cta)
}
dl.grid dd {
  margin-left: 0;
  margin-bottom: 1em
}
.kubrick dl.grid dt {
  color: var(--med-light);
  font-size: .8em
}
#shadowbox {
  display: none
}
#shadowbox.active {
  display: block;
  position: fixed;
  top: 35px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background-color);
  z-index: 100;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(1000px);
  transform: translateZ(1000px);
  transition: background-color 1s
}
#shadowbox.active.firstrun {
  background-color: rgba(52,67,67,.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column
}
#shadowbox__close {
  font-size: 1.5em;
  position: absolute;
  top: .5em;
  right: .5em;
  color: var(--background-color);
  background: var(--text);
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  border-radius: 1em;
  text-align: center;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center
}
.firstrun #shadowbox__close {
  display: none
}
.berlin #shadowbox__close span {
  -webkit-transform: translateY(-.1em);
  transform: translateY(-.1em)
}
#shadowbox__content {
  width: calc(100% - 24px);
  max-width: 1100px;
  height: auto;
  max-height: calc(100vh - 35px);
  overflow-y: auto;
  margin: 24px auto 0
}
#shadowbox__content video {
  width: 100%;
  margin: auto
}
#shadowbox__content-firstrun {
  color: #aedddd;
  font-family: "Space Grotesk",sans-serif;
  font-size: 16px;
  max-width: 30em;
  margin: auto
}
#shadowbox__content-firstrun img {
  width: 100%;
  max-width: 260px
}
#shadowbox__content-firstrun h2 {
  color: #fff;
  font-size: 2em;
  margin: 0
}
#shadowbox__content-firstrun > p {
  font-size: 1.15em
}
#shadowbox__content-firstrun em {
  color: #e6f5f5;
  font-weight: 600
}
#shadowbox__content-firstrun strong {
  font-size: 1.35em;
  color: #fff;
  display: block
}
#shadowbox__content-firstrun ul.grid {
  margin-top: 3em;
  grid-gap: 1.5em;
  grid-template-columns: repeat(auto-fit,minmax(13em,auto))
}
#shadowbox__content-firstrun li {
  cursor: pointer
}
#shadowbox__content-firstrun li:hover {
  background: rgba(230,245,245,.1)
}
#shadowbox__content-firstrun li p {
  font-size: .85em;
  margin: 0
}
#shadowbox__content-firstrun .wip {
  border: 6px solid rgba(32,6,8,.6);
  padding: .5em;
  background: #681e29;
  color: #f6e2d6;
  -webkit-transform: rotate(-3deg) translateX(6px);
  transform: rotate(-3deg) translateX(6px);
  width: calc(100% - 48px);
  margin-bottom: 48px
}
.hideme {
  display: none
}