/* Variables */

/* Text Rendering */

* {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* extends */

/* Inline text link: matches the surrounding copy, with a soft underline so it
   still reads as a link. Overrides the dimmed global `p a` opacity. */

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes flickerFadeIn {
  0% {
    opacity: 0;
  }

  3% {
    opacity: 0.03;
  }

  6% {
    opacity: 0;
  }

  9% {
    opacity: 0.05;
  }

  12% {
    opacity: 0.01;
  }

  15% {
    opacity: 0.05;
  }

  18% {
    opacity: 0.01;
  }

  21% {
    opacity: 0.15;
  }

  22% {
    opacity: 0.01;
  }

  23% {
    opacity: 0.1;
  }

  30% {
    opacity: 0.02;
  }

  37% {
    opacity: 0.1;
  }

  40% {
    opacity: 0.05;
  }

  43% {
    opacity: 0.15;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0.05;
  }

  50% {
    opacity: 0.1;
  }

  100% {
    opacity: 0.05;
  }
}

@keyframes appearIn {
  from {
    transform: perspective(500px) translate3d(0px, 0px, -40px);
    opacity: 0;
    filter: blur(10px);
  }

  to {
    transform: perspective(500px) translate3d(0, 0px, 0px);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes appearUp {
  from {
    transform: perspective(500px) translate3d(0px, 30px, -100px);
    opacity: 0;
    filter: blur(10px);
  }

  to {
    transform: perspective(500px) translate3d(0, 0px, 0px);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes fuzzIn {
  from {
    transform: perspective(500px) translate3d(0px, 0px, 20px);
    opacity: 0.5;
    filter: blur(10px);
  }

  to {
    transform: perspective(500px) translate3d(0, 0px, 0px);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes fadeInFromAbove {
  from {
    transform: translateY(-50px) scale(0.95, 0.95);
    opacity: 0;
    filter: blur(10px);
  }

  to {
    transform: translateY(0%);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes float {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, 5%) rotate(0.8deg);
  }
}

.button {
  cursor: pointer;
  transition: all 50ms ease-in-out;
  display: inline-block;
  margin: 2rem auto 0;
  padding: 1rem 1.618rem;
  border: 1px solid #bd9450;
  color: white;
  font-weight: bold;
  font-size: 0.8rem;
  font-family: "modesto-text", serif;
  line-height: 1.2;
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(20, 20, 20, 0.9);
}

.button:hover {
    background: rgba(255, 255, 255, 0.06);
  }

/* Global */

p {
  max-width: 800px;
  margin: 0 auto;
}

p a {
    color: inherit;
    opacity: 0.8;
  }

p a:hover {
      opacity: 0.9;
    }

/* Buttons are not dimmed inline links. Watch Preview sits next to Get
       Tickets in the same <p> but is a <button>, so it never picked up the
       0.8 above — without this the two read as different colours. */

p a.button {
      opacity: 1;
    }

p a.button:hover {
        opacity: 1;
      }

html {
  margin: 0;
  padding: 0;
  color: white;
  font-size: 18px;
}

@media (max-width: 640px) {

html {
    font-size: 14px
}
  }

body {
  margin: 0;
  padding: 2rem 0 0;
  font-size: 1rem;
  font-family: "calluna", Georgia, "Times New Roman", serif;
  line-height: 1.8;
  background: url(/images/grain.png) #151515;
  background-size: 100px;
}

.fc-toolbar .fc-center h2 {
  display: block;
  width: 100%;
  margin: 0 auto;
  margin-top: -7px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

#current-time {
  display: block;
  width: 100%;
  margin: -4px 0 -14px;
  padding: 0;
  color: #929291;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
}

@media (max-width: 640px) {

#current-time {
    margin-top: -4px
}
  }

.fc-toolbar {
  position: relative;
}

.fc-toolbar .fc-center {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 13px;
}

.fc-toolbar .fc-left,
.fc-toolbar .fc-right {
  position: relative;
  z-index: 4;
}

/* Available to assistive technology, invisible on screen. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

nav.main {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  flex-wrap: no-wrap;

  justify-content: space-between;
  width: 100%;
  font-family: "modesto-text", serif;
  background: #141414;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
}

@media (max-width: 640px) {

nav.main {
    flex-wrap: wrap
}
  }

nav.main .burger {
    display: inline-block;
    max-width: 10%;
    border: 0;
    background: white url(/images/burger.svg) no-repeat center center;
    background-size: 32%;
    cursor: pointer;
  }

nav.main .burger img {
      display: none;
    }

@media (min-width: 640px) {

nav.main .burger {
      display: none
  }
    }

nav.main a,
  nav.main button.burger {
    display: inline-block;
    flex: 1 0 auto;
    font-family: "modesto-text", serif;
    letter-spacing: 3px;
    transition: all 50ms ease-out;
    display: inline-block;
    margin: 0;
    padding: 1rem;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    font-family: "modesto-text", serif;
    line-height: 1.2;
    letter-spacing: 5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
  }

nav.main a:hover,
    nav.main a:focus,
    nav.main a:active,
    nav.main button.burger:hover,
    nav.main button.burger:focus,
    nav.main button.burger:active {
      color: #bd9450;
      outline: none;
      transform: translate(0, -2px);
    }

/* Must come after the shared rule above and match its specificity —
     `button.burger` would otherwise re-assert display: inline-block and
     leave the burger visible on desktop. */

@media (min-width: 640px) {

nav.main button.burger {
      display: none
  }
    }

nav.main .logo {
    flex: 0 1 15%;
    align-self: flex-start;
    padding: 0 0.418rem;
    text-align: left;
  }

@media (max-width: 640px) {

nav.main .logo {
      flex: 1 1 auto;
      text-align: center
  }
    }

nav.main .logo img {
      max-height: 49px;
    }

nav.main div {
    flex: 1 1 auto;
    text-align: center;
  }

nav.main .buy-tickets {
    flex: 0 1 15%;
    color: white;
    background: #bd9450;
    /*align-self: flex-end;*/
  }

@media (max-width: 640px) {

nav.main .buy-tickets {
      flex: 1 1 auto
  }
    }

nav.main .buy-tickets:hover {
      color: black;
      transform: translate(0, 0);
    }

nav.social {
  position: absolute;
  top: 52vh;
  /*@media (max-width:640px) {*/
  top: 3.618rem;
  right: 1rem;
  z-index: 101;
  width: 3rem;
  width: 4rem;
  /*}*/
}

nav.social a {
    display: block;
    width: 100%;
    height: 16px;
    margin: 0.618rem 0;
    opacity: 0.5;
  }

nav.social a.instagram {
      background: url(/images/instagram.svg) no-repeat top center;
      background-size: contain;
    }

nav.social a.facebook {
      background: url(/images/facebook.svg) no-repeat top center;
      background-size: contain;
    }

nav.social a img {
      display: none;
      width: 100%;
    }

nav.social a:hover {
      opacity: 1;
    }

nav.social a {
    display: inline-block;
    width: 45%;
  }

blockquote h2 {
    display: block;
    width: 100%;
    margin: 8rem auto 0rem;
    font-weight: normal;
    font-size: 2.4rem;
    font-family: "calluna", Georgia, "Times New Roman", serif;
    font-style: italic;
  }

blockquote footer {
    color: #bd9450;
    display: inline-block;
    margin: 0;
    padding: 1rem;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    font-family: "modesto-text", serif;
    line-height: 1.2;
    letter-spacing: 5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
  }

.flickety-viewport {
  overflow: visible !important;
  transition: all 0.4s !important;
}

/* Keyboard/touch stop for the autoplaying quotes carousel. */

.carousel-pause {
  display: block;
  margin: 1.2rem auto 0;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 0.65rem;
  font-family: "modesto-text", serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 220ms ease-out;
}

.carousel-pause:hover,
  .carousel-pause.focus-visible {
    opacity: 1;
  }

.carousel-pause:hover,
  .carousel-pause:focus-visible {
    opacity: 1;
  }

.arrows .previous {
    transform: rotate(180deg);
  }

.arrows .previous,
  .arrows .next {
    display: inline-block;
    margin: 0 0.392rem;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: none;
    cursor: pointer;
    opacity: 0.7;
    transition: all 220ms ease-out;
  }

.arrows .previous svg, .arrows .next svg {
      display: inline-block;
      width: 50px;
      height: 50px;
      vertical-align: top;
    }

.arrows .previous svg circle, .arrows .next svg circle {
        transition: all 0ms ease-in;
        fill: transparent;
        stroke: white;
      }

.arrows .previous svg polygon, .arrows .next svg polygon {
        opacity: 1;
        transition: all 0ms ease-in;
        fill: transparent;
        stroke: white;
      }

.arrows .previous:hover, .arrows .next:hover {
      opacity: 1;
      transition: all 0ms ease-in;
    }

.arrows .previous:hover svg circle, .arrows .next:hover svg circle {
        transition: all 0ms ease-in;
        fill: #bd9450;
        stroke: #bd9450;
      }

.arrows .previous:hover svg polygon, .arrows .next:hover svg polygon {
        opacity: 0.6;
        transition: all 0ms ease-in;
        fill: #141414;
        stroke: #141414;
      }

.arrows .previous:active, .arrows .next:active {
      opacity: 0.85;
    }

footer {
  text-align: center;
}

footer .subscribe {
    padding-top: 2rem;
  }

footer .subscribe h2 {
      padding-left: 21px;
      font-weight: normal;
      font-size: 1.8rem;
      font-family: "calluna", Georgia, "Times New Roman", serif;
      letter-spacing: 21px;
      text-transform: uppercase;
    }

footer .subscribe input[type="email"] {
      min-width: 400px;
      font-size: 1rem;
    }

footer .subscribe input[type="email"]::-moz-placeholder {
        color: rgba(0, 0, 0, 0.8);
      }

footer .subscribe input[type="email"]::placeholder {
        color: rgba(0, 0, 0, 0.8);
      }

footer .subscribe div {
      display: inline-block;
    }

@media (max-width: 640px) {

footer .subscribe div {
        display: block !important;
        width: 100% !important
    }
      }

footer .subscribe form {
      margin: -1rem auto 6rem;
      text-align: center;
    }

footer .subscribe form input[type="email"] {
        padding: 1.1rem 2rem !important;
      }

footer .subscribe form input[type="email"] {
        margin-right: 0.392rem;
      }

footer .subscribe form input[type="submit"] {
        font-family: "modesto-text", serif;
        letter-spacing: 3px;
        display: inline-block;
        margin: 0;
        padding: 1rem;
        color: white;
        font-weight: bold;
        font-size: 0.8rem;
        font-family: "modesto-text", serif;
        line-height: 1.2;
        letter-spacing: 5px;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
      }

@media (max-width: 640px) {

footer .subscribe form {
        max-width: 90%
    }

        footer .subscribe form input {
          min-width: 100% !important;
          margin: 0.391rem auto !important;
        }

        footer .subscribe form input {
          box-sizing: border-box;
          width: 100%;
        }
      }

footer .copyright {
    padding-top: 2rem;
  }

footer .copyright .logo {
      display: block;
      max-width: 80px;
      margin: 1rem auto;
    }

footer .copyright .logo img {
        width: 100%;
      }

footer .copyright p {
      font-family: "modesto-text", serif;
      letter-spacing: 3px;
      display: inline-block;
      margin: 0;
      padding: 1rem;
      color: white;
      font-weight: bold;
      font-size: 0.8rem;
      font-family: "modesto-text", serif;
      line-height: 1.2;
      letter-spacing: 5px;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
    }

footer .copyright p a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 1.1em;
        text-decoration: none;
      }

form input,
  form textarea {
    display: inline-block;
    box-sizing: border-box;
    padding: 1.192rem 2rem;
    border: none;
    border: 1px solid white;
    border-radius: 2px;
    font-weight: normal;
    font-size: 0.9rem;
    font-family: "calluna", Georgia, "Times New Roman", serif;
    line-height: 1.2;
    transition: all 50ms ease-in-out;
    zoom: 1;
  }

form input:focus, form textarea:focus {
      border-bottom-color: #bd9450 !important;
    }

form input:focus, form textarea:focus {
      outline: none;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.12);
    }

form input[type="email"] + input[type="submit"], form input[type="text"] + input[type="submit"] {
      margin: 0 1rem;
    }

form input[type="submit"] {
    padding: 1.192rem 2rem;
    background: #bd9450;
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    margin: 2rem auto 0;
    padding: 1rem 1.618rem;
    border: 1px solid #bd9450;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    font-family: "modesto-text", serif;
    line-height: 1.2;
    letter-spacing: 5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background: rgba(20, 20, 20, 0.9);
  }

form .hide {
    display: none;
  }

@media (max-width: 640px) {

body section {
    padding: 2rem
}
  }

/* Home Sections */

body.home section {
  min-height: 100vh;
  margin: 0 auto;
  text-align: center;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 90%;
}

@media (max-width: 940px) {

body.home section {
    min-height: auto !important
}
  }

body.home section .info h2,
    body.home section .info h3,
    body.home section .info p {
      animation-play-state: paused;
    }

body.home section .info h3 {
      animation-duration: 1s;
    }

body.home section .info h2 {
      animation-duration: 2s;
    }

body.home section .info p {
      animation-duration: 3s;
    }

body.home section:hover .info h2,
    body.home section:hover .info h3,
    body.home section:hover .info p {
      animation-play-state: running;
    }

section.intro {
  min-height: 100vh;
  padding-top: 10vh;
}

@media (max-width: 940px) {

section.intro {
    min-height: auto !important
}
  }

.main-logo {
  display: block;
  max-width: 420px;
  margin: 0rem auto;
}

@media (max-width: 467px) {

.main-logo {
    max-width: 90%
}
  }

.main-logo img {
    max-width: 420px;
  }

@media (max-width: 467px) {

.main-logo img {
      display: block;
      max-width: 90%;
      margin: 0 auto
  }
    }

/*background: #000;*/

@media (min-width: 641px) {
      body.home:not(.revealed) #sections,
      body.home:not(.revealed) nav {
        animation: flickerFadeIn 4s ease-in-out 3s both;
      }
  }

body.home #sections {
    background: url(/images/grain.png) #151515;
  }

@media (min-width: 641px) {

body.home:not(.revealed) #first-reveals blockquote {
          animation: appearIn 1.5s ease-out 2s both
      }
        }

body.home #first-reveals {
    position: absolute;
    top: 2rem;
    left: 0;
    z-index: 100;
    width: 100%;
    margin-bottom: -198px;
    text-align: center;
  }

body.home #first-reveals #logo-container {
      margin-top: 10vh;
    }

body.home #first-reveals blockquote {
      margin-right: 1em;
      margin-left: 1em;
    }

body.home #first-reveals blockquote h2 {
        width: 100%;
        margin: 8rem auto 1rem;
      }

@media (max-width: 640px) {

body.home #first-reveals blockquote h2 {
          margin-top: 5rem
      }
        }

body.home #first-reveals blockquote h2 img {
          display: block;
          width: 100%;
          max-height: 77px;
        }

/* First Section */

@media (min-width: 641px) {

body.home:not(.revealed) .section.intro .brief {
        animation: fadeIn 1.5s ease-out 4s both
    }
      }

body.home section.intro {
  min-height: 100vh;
  padding-top: 10vh;
  background-image: url(/images/Home-01-Intro.jpg);
}

@media (max-width: 940px) {

body.home section.intro {
    min-height: auto !important
}
  }

body.home section.intro .brief {
    margin-top: 500px;
  }

@media (max-width: 640px) {

body.home section.intro .brief {
      margin-top: calc(60vw + 10vh)
  }
    }

body.home section.intro .tiles {
    display: flex;
    gap: 2em;
    max-width: 960px;
    margin: 2rem auto 0;
    padding: 1rem 0;
    list-style: none;
  }

body.home section.intro .tiles li {
      position: relative;
      width: 100%;
      margin: 0 auto 1rem;
      margin: 0;
      padding: 0;
      box-shadow: 0 0 24px 4px rgba(0, 0, 0, 0.5);
    }

body.home section.intro .tiles li a {
        display: block;
        padding: 1rem;
        color: white;
        font-weight: 500;
        font-size: 1.5rem;
        font-family: "modesto-text", serif;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        background: transparent;
        transition: 400ms ease-out;
      }

body.home section.intro .tiles li a:hover {
          color: #bd9450;
          background: rgba(255, 255, 255, 0.05);
        }

body.home section.intro p {
    margin-top: 48px;
    font-size: 1.2rem;
  }

/* wide enough for the venue announcement to fit three lines */

@media (min-width: 941px) {

body.home section.intro p {
      max-width: min(940px, 100vw - 48px)
  }
    }

/* `:not(.button)` so buttons in this section keep their own styling */

body.home section.intro p a:not(.button) {
      color: inherit;
      text-decoration: underline;
      text-decoration-color: rgba(255, 255, 255, 0.5);
      text-decoration-thickness: 1px;
      text-underline-offset: 0.18em;
      opacity: 1;
    }

body.home section.intro p a:not(.button):hover {
    opacity: 1;
    text-decoration-color: rgba(255, 255, 255, 1);
  }

body.home section.intro h3 {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
  }

@media (max-width: 640px) {

body.home section.intro h3 {
      font-size: 18px;
      line-height: 28px
  }
    }

/* The Watch Preview control is a <button>; Get Tickets is still an <a>. */

body.home section.intro a.button,
  body.home section.intro button.button {
    display: inline-block;
    margin: 1rem auto 0;
    line-height: 17px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.84);
  }

body.home section.intro a.button img, body.home section.intro button.button img {
      display: inline-block;
      width: 9px;
      height: 17px;
      margin-right: 16px;
      vertical-align: bottom;
    }

body.home section.intro a.button:hover, body.home section.intro button.button:hover {
      color: white;
      background: #bd9450;
    }

@media (max-width: 640px) {
  body.home section.intro {
    background-size: 250% auto;
  }

    body.home section.intro blockquote {
      margin: 0 auto 3rem;
      padding: 0;
    }

      body.home section.intro blockquote h2 {
        margin: 5rem auto 0;
        background: url(/images/unforgettable-m.svg) no-repeat;
        background-size: contain;
      }
}

/* Scroll */

body.home .scroll {
  position: relative;
  z-index: 100;
  display: block;
  max-width: 200px;
  margin: 10rem auto -4rem;
  animation: float 8s infinite ease-in;
}

@media (max-width: 640px) {

body.home .scroll {
    max-width: 160px;
    margin: 4rem auto -4rem
}
  }

/* Second Section */

body.home section.experience {
  position: relative;
  min-height: 100vh;
  padding-top: 20vh;
  padding-bottom: 3rem;
  background-image: url(/images/Home-02-Experience.jpg);
  background-size: 110% auto;
}

@media (max-width: 940px) {

body.home section.experience {
    min-height: auto !important
}
  }

@media (min-width: 1441px) {

body.home section.experience {
    padding-bottom: 24rem !important
}
  }

@media (max-width: 640px) {

body.home section.experience {
    margin-bottom: -10vh;
    padding-top: 80vh;
    padding-bottom: 30px;
    background-position: 50% -10%;
    background-size: 300% auto
}
  }

.info {
  padding-left: 55vw;
  text-align: left;
}

@media (max-width: 640px) {

.info {
    padding-left: 0
}
  }

.info h3 {
    margin-top: 12vh;
    padding: 0;
    color: #bd9450;
    display: inline-block;
    margin: 0;
    padding: 1rem;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    font-family: "modesto-text", serif;
    line-height: 1.2;
    letter-spacing: 5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
  }

.info h2 {
    max-width: 420px;
    margin-bottom: 3rem;
    font-weight: normal;
    font-family: "calluna", Georgia, "Times New Roman", serif;
    font-style: italic;
  }

.info p {
    max-width: 400px;
    margin: 0;
    font-size: 1rem;
  }

.sally {
  z-index: 2001;
  width: 90%;
  max-width: 960px;
  margin: 6.618rem auto 0;
  animation: float 5s infinite ease-in;
}

@media (max-width: 640px) {

.sally {
    margin: 2.618rem auto 2rem
}
  }

/* Third Section */

body.home section.video {
  position: relative;
  z-index: 1000;
  min-height: auto;
  margin-bottom: -1.618rem;
}

@media (max-width: 640px) {

body.home section.video {
    min-height: auto
}
  }

body.home section.video .contain {
    margin: 0 auto;
    padding: 0 12vw;
    white-space: nowrap;
    text-align: center;
  }

@media (max-width: 640px) {

body.home section.video .contain {
      width: 100%;
      padding: 0
  }
    }

body.home section.video .contain a,
  body.home section.video .contain button.mux {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 0;
    /* Buttons don't inherit font; without this the line box around the
       poster image shrinks and the element loses height against the old <a>. */
    font: inherit;
    text-align: center;
    background: none;
    cursor: pointer;
    transition: all 220ms ease-out;
  }

body.home section.video .contain a:hover, body.home section.video .contain button.mux:hover {
      transform: translate(0, -4px);
    }

body.home section.video .contain a img, body.home section.video .contain button.mux img {
      width: 100%;
      margin: 0 auto;
    }

/* Fourth Section */

body.home section.the-magician {
  position: relative;
  /*min-height: 100vh;*/
  padding-bottom: 880px;
  background-image: url(/images/Home-04-The-Magician.jpg);
  background-size: 120% auto;
}

@media (max-width: 940px) {

body.home section.the-magician {
    min-height: auto !important
}
  }

@media (min-width: 1441px) {

body.home section.the-magician {
    background-size: 95% auto
}
  }

@media (max-width: 640px) {

body.home section.the-magician {
    padding-top: 0;
    padding-bottom: 420px;
    background-image: url(/images/Home-04-The-Magician-m.jpg);
    background-position: 0 160%;
    background-size: 100% auto
}
  }

body.home section.the-magician ul.quotes {
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }

body.home section.the-magician ul.quotes li {
      width: 100%;
      background: transparent;
    }

body.home section.the-magician ul.quotes li:nth-child(3) h2 {
      max-width: 1020px;
      font-size: 1.4rem;
    }

body.home section.the-magician ul.quotes h2 {
      max-width: 70vw;
      margin-top: 0;
      line-height: 1.2;
    }

body.home section.the-magician .info {
    padding-top: 25vh;
    padding-left: 20vw;
  }

@media (max-width: 640px) {

body.home section.the-magician .info {
      padding-top: 0;
      padding-left: 0;
      text-align: center
  }

      body.home section.the-magician .info h3 {
        display: block;
        width: 100%;
      }

      body.home section.the-magician .info h3:before {
        display: block;
        width: 100%;
        height: 30px;
        margin: 1rem auto;
        text-indent: -9999px;
        background: url(/images/danwhite.svg) no-repeat top center;
        background-size: contain;
        content: "Dan White";
      }
    }

/* Fourth Section */

body.home section.gallery {
  min-height: 100vh;
  padding-top: 10vh;
  background-image: url(/images/Home-05-Gallery.jpg);
  background-size: 76% auto;
}

@media (max-width: 940px) {

body.home section.gallery {
    min-height: auto !important
}
  }

body.home section.gallery h4 {
    font-weight: normal;
    font-size: 0.9rem;
    letter-spacing: 14px;
    text-transform: uppercase;
  }

body.home section.gallery h4 span {
      display: block;
      font-size: 1.4rem;
    }

body.home section.gallery ul.gallery {
    min-height: 500px;
    margin: 2rem auto;
    padding: 0.618rem;
    list-style: none;
  }

@media (max-width: 640px) {

body.home section.gallery ul.gallery {
      min-height: 200px
  }
    }

body.home section.gallery ul.gallery li {
    display: inline-block;
    height: 400px;
    margin: 1rem 0.618rem;
    box-shadow: 0 0 24px 4px rgba(0, 0, 0, 0.8);
  }

@media (max-width: 480px) {

body.home section.gallery ul.gallery li {
      height: 240px
  }
    }

body.home section.gallery ul.gallery li.is-selected div,
      body.home section.gallery ul.gallery li.is-selected img {
        z-index: 1000;
        filter: none;
      }

body.home section.gallery ul.gallery li div,
    body.home section.gallery ul.gallery li img {
      filter: grayscale(100%);
    }

body.home section.gallery ul.gallery li img {
      display: block;
      height: 100%;
      margin: 0 auto;
      padding: 0;
      line-height: 1;
    }

body.home section.gallery ul.gallery li div {
      position: relative;
      width: 658px;
      height: 0;
      padding-top: 30px;
      padding-bottom: 56.25%;
      overflow: hidden;
    }

body.home section.gallery ul.gallery li div iframe,
      body.home section.gallery ul.gallery li div object,
      body.home section.gallery ul.gallery li div embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

div.featured-in {
  margin-top: 7rem;
}

div.featured-in h3 {
    display: block;
    flex: 1 1 100%;
    font-weight: normal;
    font-size: 0.618rem;
    letter-spacing: 6px;
    display: inline-block;
    margin: 0;
    padding: 1rem;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    font-family: "modesto-text", serif;
    line-height: 1.2;
    letter-spacing: 5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
  }

div.featured-in ul {
    display: flex;
    flex-wrap: no-wrap;
    align-items: center;
    justify-content: space-around;
    max-width: 900px;
    margin: 3rem auto 5rem;
    padding: 0;
    list-style: none;
  }

@media (max-width: 640px) {

div.featured-in ul {
      flex-direction: column
  }
    }

div.featured-in ul li {
    flex: 1 1 auto;
    margin: 0 2rem;
  }

@media (max-width: 640px) {

div.featured-in ul li {
      max-width: 40%;
      max-height: 50%;
      margin: 1rem 1.618rem
  }
    }

div.featured-in li:hover img {
    opacity: 0.8;
  }

div.featured-in img {
    width: 100%;
    opacity: 0.5;
    transition: opacity 220ms ease-in;
  }

/* FAQ PAGE */

body.faq section.intro {
  min-height: 100vh;
  padding-top: 10vh;
  background-image: url(/images/FAQ.jpg);
  background-repeat: no-repeat;
  background-position: 39% 0%;
  background-size: 85% auto;
}

@media (max-width: 940px) {

body.faq section.intro {
    min-height: auto !important
}
  }

@media (min-width: 1441px) {

body.faq section.intro {
    background-position: 39% -5%
}
  }

body.faq section.intro h1 {
    max-width: 500px;
    height: 80px;
    margin: 6rem auto 3rem;
    text-indent: -9999px;
    background: url(/images/FAQ.svg) no-repeat top center;
    background-size: contain;
  }

@media (max-width: 640px) {

body.faq section.intro h1 {
      margin: 4rem auto 1rem
  }
    }

body.faq ul.questions,
body.faq ul.tiles {
  max-width: 960px;
  margin: 0 auto 8rem;
  padding: 0;
  list-style: none;
}

body.faq ul.questions li, body.faq ul.tiles li {
    position: relative;
    margin: 0 auto 1rem;
    padding: 2rem;
    box-shadow: 0 0 24px 4px rgba(0, 0, 0, 0.5);
  }

body.faq ul.questions li:hover h2, body.faq ul.tiles li:hover h2 {
    color: #bd9450;
  }

body.faq ul.questions li.show h2:after, body.faq ul.tiles li.show h2:after {
    transform: rotate(0deg);
  }

body.faq ul.questions li h2, body.faq ul.tiles li h2 {
    margin: 0;
    font-weight: normal;
    cursor: pointer;
  }

/* The toggle is a real <button> for keyboard and screen-reader users;
       strip the UA styling so it still reads as the heading it sits in. */

body.faq ul.questions li h2 .question-toggle, body.faq ul.tiles li h2 .question-toggle {
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
      text-align: left;
      text-transform: inherit;
      background: none;
      cursor: pointer;
    }

body.faq ul.questions li h2:after, body.faq ul.tiles li h2:after {
      position: absolute;
      top: 3rem;
      right: 1.618rem;
      display: block;
      width: 16px;
      height: 16px;
      background: url(/images/triangle.svg) no-repeat top center;
      background-size: contain;
      transform: rotate(180deg);
      transition: all 50ms ease-in-out;
      content: "";
    }

body.faq ul.questions li p, body.faq ul.tiles li p {
    display: none;
    max-width: 720px;
    margin: 0 0 0.618rem;
    padding-top: 1rem;
    color: #bcbcbc;
  }

body.faq ul.tiles {
  display: flex;
  gap: 2em;
}

@media (max-width: 940px) {

body.faq ul.tiles {
    flex-direction: column
}
  }

body.faq ul.tiles li {
    width: 100%;
    margin: 0;
    padding: 0;
  }

body.faq ul.tiles li a {
      display: block;
      padding: 2rem;
      color: white;
      font-weight: 500;
      font-size: 2rem;
      font-family: "modesto-text", serif;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
      background: transparent;
      transition: 400ms ease-out;
    }

body.faq ul.tiles li a:hover {
        color: #bd9450;
        background: rgba(255, 255, 255, 0.05);
      }

/* Private Events Page */

/* Shared horizontal inset so label text, input text, and the email
   suggestion hint all start on the same vertical line. */

body.private-events section.intro {
  min-height: 100vh;
  padding-top: 10vh;
  background-image: url(/images/PrivateEvents.jpg);
  background-repeat: no-repeat;
  background-position: -150px 10%;
  background-size: 110% auto;
}

@media (max-width: 940px) {

body.private-events section.intro {
    min-height: auto !important
}
  }

body.private-events section.intro h1 {
    max-width: 900px;
    height: 90px;
    margin: 6rem auto 3rem;
    text-indent: -9999px;
    background: url(/images/private-events.svg) no-repeat top center;
    background-size: contain;
  }

@media (max-width: 640px) {

body.private-events section.intro h1 {
      height: 45px;
      margin: 4rem auto 1rem
  }
    }

body.private-events section.intro p,
  body.private-events section.intro ul {
    margin: 0 auto 3rem !important;
  }

body.private-events section.intro p,
  body.private-events section.intro ul {
    max-width: 720px;
    color: #bcbcbc;
    font-size: 1.2rem;
    text-align: center;
  }

body.private-events section.intro ul.lightboxes li {
      max-width: 800px;
    }

body.private-events section.intro ul.logos {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-around;
    max-width: 1200px;
    list-style: none;
  }

body.private-events section.intro ul.logos li {
      min-width: 0;
    }

body.private-events section.intro ul.logos li img {
        display: block;
        width: 100%;
        max-width: 200px;
        max-height: 100px;
      }

body.private-events section.intro form {
    display: flex;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 3rem auto;
    padding: 3rem;
    box-shadow: 0 0 24px 4px rgba(0, 0, 0, 0.5);
  }

@media (max-width: 640px) {

body.private-events section.intro form {
      padding: 0
  }
    }

body.private-events section.intro form div.name,
    body.private-events section.intro form div.email,
    body.private-events section.intro form div.phone {
      flex: 1 0 46%;
      margin: 1rem;
    }

body.private-events section.intro form div.details,
    body.private-events section.intro form div.submit {
      flex: 1 0 92%;
      margin: 1rem;
    }

/* Declarations after the mixin win over the ones it sets (centered text,
       1rem padding), so the label text lines up with the input text. */

body.private-events section.intro form label {
      display: inline-block;
      margin: 0;
      padding: 1rem;
      color: white;
      font-weight: bold;
      font-size: 0.8rem;
      font-family: "modesto-text", serif;
      line-height: 1.2;
      letter-spacing: 5px;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
      display: inline-block;
      padding-right: 0;
      padding-left: 1rem;
      text-align: left;
      opacity: 0.8;
    }

body.private-events section.intro form .email-suggestion {
      margin-top: 0.5rem;
      padding-left: 1rem;
      color: #bcbcbc;
      font-size: 0.9rem;
      text-align: left;
    }

body.private-events section.intro form .email-suggestion a {
        color: #bd9450;
        text-decoration: underline;
      }

body.private-events section.intro form input,
    body.private-events section.intro form textarea {
      display: block;
      box-sizing: border-box;
      width: 100%;
      padding: 1rem 1rem;
      border-color: #363636;
      color: #bcbcbc;
      font-weight: normal;
      font-size: 1rem;
      font-family: "calluna", Georgia, "Times New Roman", serif;
      letter-spacing: 0;
      background: #363636;
    }

body.private-events section.intro form input[type="submit"] {
      background: #bd9450;
      display: inline-block;
      margin: 2rem auto 0;
      padding: 1rem 1.618rem;
      border: 1px solid #bd9450;
      color: white;
      font-weight: bold;
      font-size: 0.8rem;
      font-family: "modesto-text", serif;
      line-height: 1.2;
      letter-spacing: 5px;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
      background: rgba(20, 20, 20, 0.9);
    }

body.private-events section.intro form input[type="submit"]:hover {
        color: black;
      }

/* Reviews Page */

body.reviews section.intro {
  min-height: 100vh;
  padding-top: 10vh;
  background-image: url(/images/Reviews.jpg);
  background-repeat: no-repeat;
  background-position: -180px 20%;
  background-size: 130% auto;
}

@media (max-width: 940px) {

body.reviews section.intro {
    min-height: auto !important
}
  }

@media (min-width: 1441px) {

body.reviews section.intro {
    background-position: -180px 5%
}
  }

body.reviews section.intro h1 {
    max-width: 900px;
    height: 70px;
    margin: 6rem auto 3rem;
    text-indent: -9999px;
    background: url(/images/reviews.svg) no-repeat top center;
    background-size: contain;
  }

@media (max-width: 640px) {

body.reviews section.intro h1 {
      margin: 4rem auto 1rem
  }
    }

body.reviews section.intro .quotes {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    list-style-type: none;
  }

body.reviews section.intro .quotes li {
      flex: 1 1 40%;
      margin: 0.618rem;
      padding: 3.618rem 2.618rem;
      box-shadow: 0 0 24px 4px rgba(0, 0, 0, 0.5);
    }

body.reviews section.intro .quotes li blockquote {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

body.reviews section.intro .quotes li blockquote h2 {
          max-width: 900px;
          height: auto;
          margin: 0 auto;
          font-size: 1.8rem;
          line-height: 1.5;
          /*text-transform: capitalize;*/
        }

body.reviews section.intro .quotes li blockquote footer {
          padding: 1.618rem;
        }

body.reviews section.intro .reviews {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    max-width: 1240px;
    margin: 2rem auto;
    padding: 0;
    text-align: center;
    list-style-type: none;
  }

body.reviews section.intro .reviews li {
      flex: 1 1 30%;
      margin: 1rem;
      text-align: left;
    }

body.reviews section.intro .reviews li blockquote {
      margin: 0;
      padding: 0;
    }

body.reviews section.intro .reviews li blockquote .avatar {
        float: left;
        width: 100px;
        height: 100px;
        margin: 1rem 1rem 3rem 0;
        border-radius: 100px;
        border-radius: 100px;
        background-position: top center;
        background-size: cover;
        filter: grayscale(100%);
      }

@media (max-width: 640px) {

body.reviews section.intro .reviews li blockquote .avatar {
          margin-bottom: 0
      }
        }

body.reviews section.intro .reviews li blockquote .avatar img {
          display: none;
        }

body.reviews section.intro .reviews li blockquote h2 {
        height: auto;
        margin: 0 0 0.618rem;
        font-size: 1.4rem;
        line-height: 1.1;
      }

body.reviews section.intro .reviews li blockquote span.stars {
        display: block;
        width: 100%;
        margin: 0.618rem 0;
      }

body.reviews section.intro .reviews li blockquote span.stars img {
          width: 16px;
        }

body.reviews section.intro .reviews li blockquote h4 {
        margin: 1rem 0;
        padding: 0;
        color: #bd9450;
        display: inline-block;
        margin: 0;
        padding: 1rem;
        color: white;
        font-weight: bold;
        font-size: 0.8rem;
        font-family: "modesto-text", serif;
        line-height: 1.2;
        letter-spacing: 5px;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
      }

body.reviews section.intro .reviews li blockquote p {
        color: silver;
      }

@media (max-width: 640px) {

body.reviews section.intro .reviews li blockquote p {
          text-align: justify
      }
        }

/* About Page */

body.about section.intro {
  min-height: 100vh;
  padding-top: 10vh;
  text-align: center;
  background-image: url(/images/About-01.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 140% auto;
}

@media (max-width: 940px) {

body.about section.intro {
    min-height: auto !important
}
  }

@media (min-width: 1441px) {

body.about section.intro {
    background-size: 100% auto
}
  }

@media (max-width: 640px) {

body.about section.intro {
    background-size: 300% auto
}
  }

body.about section.intro h1 {
    max-width: 900px;
    height: 70px;
    margin: 6rem auto 0;
    text-indent: -9999px;
    background: url(/images/danwhite.svg) no-repeat top center;
    background-size: contain;
  }

body.about section.intro p {
    /* Pushes the copy clear of the hero photo behind it. Trimmed by 5.5rem
       (~1in) from 44rem; ~100px of clearance below the photo remains. */
    margin-top: 38.5rem;
    font-size: 1.2rem;
  }

@media (max-width: 640px) {

body.about section.intro p {
      margin-top: 22rem
  }
    }

body.about h4 {
  margin: 0 auto;
  color: #bd9450;
  display: inline-block;
  margin: 0;
  padding: 1rem;
  color: white;
  font-weight: bold;
  font-size: 0.8rem;
  font-family: "modesto-text", serif;
  line-height: 1.2;
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}

body.about section.more-than-meets-the-eye {
  min-height: 100vh;
  padding-top: 14vh;
  padding-top: 0;
  text-align: center;
  background-image: url(/images/About-02.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 180% auto;
}

@media (max-width: 940px) {

body.about section.more-than-meets-the-eye {
    min-height: auto !important
}
  }

@media (min-width: 1441px) {

body.about section.more-than-meets-the-eye {
    min-height: 80vh !important
}
  }

body.about section.more-than-meets-the-eye,
body.about section.the-nomad {
  max-width: 960px;
  margin: 2rem auto;
  text-align: left;
}

body.about section.more-than-meets-the-eye img, body.about section.the-nomad img {
    width: 100%;
    max-width: 480px;
    margin-bottom: 5rem;
    /*animation: float ease-out 5s infinite;*/
  }

body.about section.more-than-meets-the-eye h4, body.about section.the-nomad h4 {
    margin-bottom: 0;
    padding-left: 0;
  }

body.about section.more-than-meets-the-eye h2, body.about section.the-nomad h2 {
    padding-right: 4rem;
    font-weight: normal;
    font-style: italic;
  }

body.about section.more-than-meets-the-eye p, body.about section.the-nomad p {
    /* flow-root keeps each paragraph in its own column beside the floated
       portrait. Without it, copy taller than the image wraps underneath and
       the last line jumps out to the section's left edge. */
    display: flow-root;
    max-width: 90%;
    margin-left: 0;
    padding: 0.618rem 0;
  }

body.about section.more-than-meets-the-eye.more-than-meets-the-eye, body.about section.the-nomad.more-than-meets-the-eye {
    /* Trimmed by 5.5rem (~1in) from 14rem — this is the dead space directly
       below the intro paragraph. */
    padding-top: 8.5rem;
  }

body.about section.more-than-meets-the-eye.more-than-meets-the-eye img, body.about section.the-nomad.more-than-meets-the-eye img {
      float: right;
      margin-left: 2rem;
    }

body.about section.more-than-meets-the-eye.the-nomad, body.about section.the-nomad.the-nomad {
    margin-bottom: 8rem;
  }

body.about section.more-than-meets-the-eye.the-nomad img, body.about section.the-nomad.the-nomad img {
      float: left;
      margin-right: 2rem;
    }

@media (min-width: 641px) {
  body:not(.revealed) {
    animation: 2s ease-out fadeIn;
  }

    body:not(.revealed) .main-logo {
      animation: 3s ease-out appearIn;
    }

    body:not(.revealed) section h1 {
      animation: 10s ease-out fadeIn;
    }
}

/* Tickets Page */

body.tickets section.intro {
  min-height: 30vh;
  padding-top: 10vh;
  background-image: url(/images/PrivateEvents.jpg);
  background-repeat: no-repeat;
  background-position: 39% 0%;
  background-size: 85% auto;
}

@media (max-width: 940px) {

body.tickets section.intro {
    min-height: auto !important
}
  }

body.tickets section.intro h1 {
    max-width: 605px;
    height: 80px;
    margin: 6rem auto 3rem;
    text-indent: -9999px;
    background: url(/images/get-tickets.svg) no-repeat top center;
    background-size: contain;
  }

@media (max-width: 640px) {

body.tickets section.intro h1 {
      margin: 4rem auto 1rem
  }
    }

body.tickets section.intro p {
    margin: -1rem auto 2rem;
    font-size: 1.2rem;
    text-align: center;
    opacity: 0.8;
  }

/* wide enough for the venue announcement to fit three lines */

@media (min-width: 941px) {

body.tickets section.intro p {
      max-width: min(980px, 100vw - 48px)
  }
    }

body.tickets section.intro p .tussock {
      color: #bd9450;
    }

body.tickets section.intro p + p {
    margin-bottom: 3rem;
    opacity: 0.8;
  }

@media (max-width: 640px) {

body.tickets section.legend {
    margin-top: -4em
}
  }

body.tickets section.legend ul {
    display: flex;
    gap: 48px;
    justify-content: center;
    margin: 0 0 56px;
    padding: 0;
    font-weight: 500;
    font-size: 16px;
    font-family: "modesto-text", serif;
    line-height: 1;
    text-transform: uppercase;
  }

@media (max-width: 640px) {

body.tickets section.legend ul {
      gap: 22px;
      margin: 0 0 10px;
      font-size: 14px
  }
    }

body.tickets section.legend ul li {
      display: flex;
      gap: 12px;
      list-style: none;
    }

body.tickets section.legend ul li::before {
        flex: 16px 0 0;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        content: "";
      }

body.tickets section.legend ul li.new-york-show::before {
          background: #bd9450;
        }

body.tickets section.legend ul li.virtual-show::before {
          background: #3a5c84;
        }

body.tickets section.tickets {
  max-width: 1100px;
  margin: 0 auto;
  box-shadow: 0 0 24px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 640px) {

body.tickets section.tickets {
    padding-top: 0
}
  }

/* Calendar stays hidden until the events API confirms an open show */

body.tickets:not(.has-open-shows) .calendar-info,
  body.tickets:not(.has-open-shows) section.legend,
  body.tickets:not(.has-open-shows) section.tickets {
    display: none;
  }

/* Calendar Theme */

#calendar {
  font-weight: bold;
  font-size: 1rem;
  font-family: "modesto-text", serif;
}

#calendar .fc-event {
  padding: 6px;
  border-radius: 4px;
  text-align: center;
  transition: background 400ms ease-out, opacity 400ms ease-out;
}

#calendar .fc-event::before {
    display: block;
    margin: 0 0 8px;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    content: attr(data-box-office-name);
  }

#calendar .fc-event span {
    margin: 0;
    font-size: 14px;
    line-height: 1.1;
  }

#calendar .fc-event.tmo.available {
      background: #3a5c84;
      box-shadow: 0 2px 0 0 #18385f;
    }

#calendar .fc-event.tmo.available:hover,
      #calendar .fc-event.tmo.available.selected {
        background: #638bba;
      }

#calendar .fc-event.ny.available {
      background: #bd9450;
    }

#calendar .fc-event.ny.available:hover,
      #calendar .fc-event.ny.available.selected {
        background: #d5a556;
      }

#calendar .fc-event.available-soon {
    border: 1px solid #76613e;
  }

#calendar .fc-event.available {
    cursor: pointer !important;
  }

#calendar .fc-event.available:hover,
    #calendar .fc-event.available.selected {
      transition: background 0ms ease-out;
    }

#calendar .fc-event.available::before,
    #calendar .fc-event.available span {
      font-weight: bold;
      text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.35);
    }

#calendar .fc-event.available-soon {
    cursor: default !important;
  }

#calendar .fc-event.sold-out,
  #calendar .fc-event.sold-out:hover,
  #calendar .fc-event.cancelled,
  #calendar .fc-event.cancelled:hover {
    cursor: default !important;
  }

#calendar .fc-event.sold-out,
  #calendar .fc-event.sold-out:hover,
  #calendar .fc-event.cancelled,
  #calendar .fc-event.cancelled:hover {
    border: none;
    text-transform: uppercase;
    background: #7c7c7c;
    opacity: 0.5;
  }

#calendar .fc-event.sold-out .fc-time, #calendar .fc-event.sold-out:hover .fc-time, #calendar .fc-event.cancelled .fc-time, #calendar .fc-event.cancelled:hover .fc-time {
      text-decoration: line-through;
    }

#calendar .fc-event.sold-out .fc-time, #calendar .fc-event.sold-out:hover .fc-time, #calendar .fc-event.cancelled .fc-time, #calendar .fc-event.cancelled:hover .fc-time {
      text-transform: none;
    }

#calendar .fc-event:not(.available),
  #calendar .fc-event:not(.available):hover {
    cursor: default !important;
  }

.fc-content .fc-title {
    display: block;
    margin-top: 0.192rem;
  }

.fc-content .fc-time {
    display: block;
    text-align: center;
  }

.fc-content .fc-time::after {
      content: " ET";
    }

.fc-day-top {
  margin-bottom: 0.618rem;
}

.fc-day-top.fc-today .fc-day-number {
  background: #bd9450 !important;
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
  float: left;
  padding: 0.192rem 0.618rem;
  font-size: 0.8rem;
  background: #323231;
}

tr:first-child > td > .fc-day-grid-event {
  margin-top: 0.192rem;
}

.fc-unthemed td.fc-today {
  background: transparent;
}

.fc-day-header.fc-widget-header {
  padding: 0.392rem 0;
}

.fc-event {
  padding: 0.192rem 0;
  border-color: #323231;
  border-radius: 0;
  background-color: #323231;
}

.fc-event-container {
  padding: 0.2rem 0.192rem !important;
}

.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-row,
.fc-unthemed .fc-content,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-list-heading td {
  border-color: #323231;
}

.fc-day-header {
  font-size: 0.7rem;
  font-family: "modesto-text", serif;
  text-transform: uppercase;
  background: #bd9450;
}

.fc-toolbar {
  padding: 1rem 1rem 0;
  font-size: 0.7rem;
  font-family: "modesto-text", serif;
}

/* Purchase */

#purchase {
  width: 100%;
  padding-bottom: 2rem;
  text-align: center;
}

#purchase h3 {
    display: block;
    margin: 2rem auto;
    display: inline-block;
    margin: 0;
    padding: 1rem;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    font-family: "modesto-text", serif;
    line-height: 1.2;
    letter-spacing: 5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
  }

#purchase p {
    padding: 0 0.618rem;
    color: #888888;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

#purchase > footer {
  margin-top: -50px;
}

@media (max-width: 640px) {

#purchase > footer {
    margin-top: 0;
    padding-top: 2rem
}
  }

#purchase > footer a {
    color: white;
  }

a.help {
  padding: 3px 5px;
  border-radius: 100px;
  color: black;
  font-weight: bold;
  text-decoration: none;
  background: #bd9450;
  opacity: 0.8;
}

a.help:hover {
    color: white;
    opacity: 1;
  }

.fc-list-table td {
  padding: 8px 10px;
}

.fc-right button {
    width: 30px;
    height: 30px;
    border: none;
    text-shadow: none;
    background: url(/images/arrow.svg) no-repeat center top;
    background-size: contain;
    box-shadow: none;
  }

.fc-right button:hover,
    .fc-right button:active,
    .fc-right button:focus {
      background-image: url(/images/arrow-selected.svg);
      outline: none;
      opacity: 1;
    }

.fc-right button:active {
      opacity: 0.7;
    }

.fc-right button span {
      display: none;
    }

.fc-listMonth-view .fc-scroller {
  height: auto !important;
}

.fc-listMonth-view .fc-scroller {
  min-height: 300px;
}

.fc-month-view .fc-scroller {
  height: auto !important;
  overflow-y: hidden !important;
}

.fc-left button {
    transform: rotate(180deg);
    width: 30px;
    height: 30px;
    border: none;
    text-shadow: none;
    background: url(/images/arrow.svg) no-repeat center top;
    background-size: contain;
    box-shadow: none;
  }

.fc-left button:hover,
    .fc-left button:active,
    .fc-left button:focus {
      background-image: url(/images/arrow-selected.svg);
      outline: none;
      opacity: 1;
    }

.fc-left button:active {
      opacity: 0.7;
    }

.fc-left button span {
      display: none;
    }

.fc-list-heading .fc-widget-header,
.fc-event-dot {
  background: #404040 !important;
}

.fc-event-dot {
  margin-right: 20px;
}

.fc-list-item {
  cursor: pointer;
  transition: opacity 400ms ease-out;
}

.fc-list-item .fc-list-item-title {
    white-space: nowrap;
    text-align: right;
  }

.fc-list-item:hover td {
    background: transparent;
  }

.fc-list-item.selected {
    background: rgba(255, 255, 255, 0.1) !important;
  }

.fc-list-item.tmo.available-soon,
      .fc-list-item.tmo.available-soon td,
      .fc-list-item.tmo.available,
      .fc-list-item.tmo.available td,
      .fc-list-item.tmo.selected,
      .fc-list-item.tmo.selected td {
        color: #3a5c84 !important;
      }

.fc-list-item.tmo.available-soon .fc-list-item-title a,
      .fc-list-item.tmo.available-soon .fc-event-dot,
      .fc-list-item.tmo.available .fc-list-item-title a,
      .fc-list-item.tmo.available .fc-event-dot,
      .fc-list-item.tmo.selected .fc-list-item-title a,
      .fc-list-item.tmo.selected .fc-event-dot {
        background: #3a5c84 !important;
      }

.fc-list-item.ny.available-soon,
      .fc-list-item.ny.available-soon td,
      .fc-list-item.ny.available,
      .fc-list-item.ny.available td,
      .fc-list-item.ny.selected,
      .fc-list-item.ny.selected td {
        color: #bd9450 !important;
      }

.fc-list-item.ny.available-soon .fc-list-item-title a,
      .fc-list-item.ny.available-soon .fc-event-dot,
      .fc-list-item.ny.available .fc-list-item-title a,
      .fc-list-item.ny.available .fc-event-dot,
      .fc-list-item.ny.selected .fc-list-item-title a,
      .fc-list-item.ny.selected .fc-event-dot {
        background: #bd9450 !important;
      }

.fc-list-item.available,
  .fc-list-item.available-soon {
    cursor: pointer !important;
  }

.fc-list-item.available .fc-list-item-title a, .fc-list-item.available-soon .fc-list-item-title a {
      opacity: 0.6;
    }

.fc-list-item.available:hover,
    .fc-list-item.available.selected {
      color: #bd9450 !important;
      background: rgba(255, 255, 255, 0.1) !important;
    }

.fc-list-item.available:hover,
    .fc-list-item.available.selected {
      transition: background 0ms ease-out;
    }

.fc-list-item.available .fc-event-dot {
    background: #bd9450 !important;
  }

.fc-list-item.available .fc-list-item-title a {
    margin-right: -14px;
    padding: 12px 14px;
    color: #fff;
    background: #bd9450;
    opacity: 1;
    /*&:before { content: "Buy Now"; }*/
  }

.fc-list-item.available td {
    color: #bd9450;
  }

.fc-list-item.available-soon .fc-event-dot {
    opacity: 0.5;
  }

.fc-list-item.sold-out,
  .fc-list-item.sold-out:hover,
  .fc-list-item.cancelled,
  .fc-list-item.cancelled:hover {
    cursor: default !important;
  }

.fc-list-item.sold-out,
  .fc-list-item.sold-out:hover,
  .fc-list-item.cancelled,
  .fc-list-item.cancelled:hover {
    text-decoration: line-through;
    opacity: 0.4;
  }

.fc-list-item.sold-out .fc-list-item-title a, .fc-list-item.sold-out:hover .fc-list-item-title a, .fc-list-item.cancelled .fc-list-item-title a, .fc-list-item.cancelled:hover .fc-list-item-title a {
      text-decoration: line-through;
      opacity: 0.5;
      /*&:before { content: "Sold Out"; }*/
    }

.fc-list-empty {
  background: transparent !important;
}

#slots {
  margin: 2rem auto 0rem;
  text-align: center;
}

#slots .fc-event {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 3rem 6rem;
    background: rgba(0, 0, 0, 0.12);
    box-shadow: 0px 4px 2rem rgba(0, 0, 0, 0.24);
  }

@media (max-width: 640px) {

#slots .fc-event {
      padding: 3rem 2rem
  }
    }

#slots .fc-event .button {
      line-height: 1.8;
    }

#slots .fc-event .button:hover {
      background: #bd9450;
    }

#slots .fc-event h4 {
      color: #bd9450;
      font-size: 1rem;
    }

#slots .fc-event h2 {
      margin: 0.392rem auto 1rem;
      font-weight: normal;
      /*color: $tussock;*/
      font-size: 2.8rem;
      font-style: italic;
      line-height: 1;
      letter-spacing: -1px;
      opacity: 0.9;
    }

#slots .fc-event h3 {
      margin: 0 auto;
      color: #bd9450;
      font-size: 1rem;
      opacity: 0.8;
    }

#slots .fc-event a.help {
      margin-left: 4px;
    }

#slots .fc-event:after {
      position: absolute;
      top: -2px;
      right: -2px;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent #323231 transparent transparent;
      border-style: solid;
      border-width: 0 20px 20px 0;
      content: "";
    }

#slots .fc-event:before {
      position: absolute;
      top: -2px;
      left: -2px;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent transparent transparent #323231;
      border-style: solid;
      border-width: 0 0 20px 20px;
      content: "";
    }

#slots .fc-event .when {
      color: #bd9450;
      opacity: 1;
    }

#slots .fc-event #tip {
      max-width: 270px;
      min-height: 3rem;
      margin: 1rem auto;
      font-size: 1rem;
      font-style: italic;
      line-height: 1.5;
      letter-spacing: 0;
      text-transform: none;
      opacity: 0.25;
    }

#slots .fc-event #tip.error {
        opacity: 1 !important;
      }

#slots .fc-event #tip.error {
        color: #bd9450;
      }

#slots .fc-event ul.tickets {
      display: flex;
      margin: 2rem auto 0;
      padding: 0;
      font-size: 1rem;
      list-style-type: none;
    }

@media (max-width: 640px) {

#slots .fc-event ul.tickets {
        flex-direction: column
    }
      }

#slots .fc-event ul.tickets li {
        flex: 1 0 auto;
        margin: 0 0.618rem;
      }

#slots .fc-event ul.tickets li strong {
          display: block;
          margin-bottom: 0.618rem;
          opacity: 0.8;
        }

#slots .fc-event ul.tickets li .price {
          display: inline-block;
          margin-top: 6px;
          opacity: 0.8;
        }

#slots .fc-event ul.tickets li .price:after {
          margin-right: 0.192rem;
          font-size: 0.6rem;
          opacity: 0.4;
          content: "  ✕  ";
        }

#slots .fc-event ul.tickets + p {
      margin: 1.618em auto 0;
      font-size: 0.9rem;
      font-style: italic;
      letter-spacing: 0;
      text-transform: none;
      opacity: 0.25;
    }

#slots .ticket-quantity:before {
    display: inline-block;
    margin-right: 0.392rem;
    font-size: 0.6rem;
    opacity: 0.4;
    content: "  ✕  ";
  }

@media (max-width: 640px) {
  ul.tickets li {
    margin-bottom: 1.618rem !important;
  }
  ul.tickets li {
    display: block;
    text-align: center;
  }

    ul.tickets li strong {
      margin-bottom: 1.618rem;
    }

    ul.tickets li .amount {
      margin-top: -4px;
    }
}

#slots .fc-event.sold-out h2,
  #slots .fc-event.sold-out h3 {
    text-decoration: line-through;
  }

.arrows.up,
.arrows.down {
  display: block;
  width: 40px;
  height: 40px;
  margin: 1rem auto;
  background: url(/images/arrow.svg) no-repeat top center;
  background-size: contain;
  cursor: pointer;
  opacity: 0.14;
  content: "";
}

.arrows.up:hover, .arrows.down:hover {
    background-image: url(/images/arrow-selected.svg);
    opacity: 1;
  }

.arrows.up {
  transform: rotate(-90deg);
}

.arrows.down {
  transform: rotate(90deg);
}

a.button.giftcard {
  display: block;
  max-width: 300px;
  margin: -20px auto 20px;
}

body .mfp-bg {
  background: rgba(22, 22, 22, 0.9);
  opacity: 1;
}

body .mfp-container {
  right: 0;
  max-width: calc(100% - 20px);
  margin: auto;
  padding: 0;
}

body .mfp-content {
  box-sizing: border-box;
  max-width: 621px;
}

body .mfp-content figure > img {
  margin: 0;
}

body .mfp-content img {
  display: block;
  max-width: 100%;
  margin: 0 auto 35px;
}

body .mfp-content .popup-content {
    padding: 326px 48px 48px;
    text-align: center;
    background: url(/images/grain.png) #151515;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: 0px 0px 109px rgba(0, 0, 0, 0.63);
  }

@media (max-width: 640px) {

body .mfp-content .popup-content {
      padding: 25vw 20px 20px
  }
    }

body .mfp-content .popup-content h1 {
      height: 65px;
      margin: 0 auto 36px;
      text-indent: -9999px;
      background: url(/images/virtual.svg) no-repeat top center;
      background-size: contain;
    }

@media (max-width: 640px) {

body .mfp-content .popup-content h1 {
        margin: 4rem auto 1rem
    }
      }

body .tmo .mfp-content .popup-content {
    background-image: url(/images/popup-background-tmo.jpg);
  }

body .tmo .mfp-content .popup-content h1 {
      background-image: url(/images/virtual.svg);
    }

body .ny .mfp-content .popup-content {
    background-image: url(/images/popup-background-ny.jpg);
  }

body .ny .mfp-content .popup-content h1 {
      background-image: url(/images/new-york.svg);
    }

body .credits .mfp-content .popup-content {
    padding-top: 265px;
    background-image: url(/images/popup-background-credits.jpg);
  }

body .credits .mfp-content .popup-content h1 {
      background-image: url(/images/credits.png);
    }

body .credits .mfp-content .popup-content h4,
    body .credits .mfp-content .popup-content h5 {
      margin: 1em 0;
      font-weight: normal;
    }

body .credits .mfp-content .popup-content h5 {
      font-size: 17px;
      font-style: italic;
    }

dialog.mux-video-dialog {
  width: min(90vw, calc(90vh * (16 / 9)));
  max-width: min(1400px, calc(100vw - 24px));
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  outline: none;
  opacity: 0;
  transition: opacity 500ms ease;
  aspect-ratio: 16 / 9;
}

dialog.mux-video-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity 500ms ease;
}

dialog.mux-video-dialog.is-visible {
  opacity: 1;
}

dialog.mux-video-dialog.is-visible::backdrop {
  opacity: 1;
}

dialog.mux-video-dialog mux-player {
  --media-accent-color: #bd9450;
  display: block;
  width: 100%;
  height: 100%;
}

dialog.mux-video-dialog mux-player::part(center play button) {
  display: none;
}

/* Must sit INSIDE the dialog: the dialog is overflow:hidden, so anything
   positioned above it is clipped and unclickable. It also takes initial focus
   from showModal(), so it needs a visible resting state and focus ring. */

dialog.mux-video-dialog .mux-dialog-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  color: white;
  font-size: 1.1rem;
  line-height: 1;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

dialog.mux-video-dialog .mux-dialog-close:hover {
    background: rgba(0, 0, 0, 0.85);
  }

dialog.mux-video-dialog .mux-dialog-close.focus-visible {
    background: rgba(0, 0, 0, 0.85);
    outline: 2px solid white;
    outline-offset: 2px;
  }

dialog.mux-video-dialog .mux-dialog-close:focus-visible {
    background: rgba(0, 0, 0, 0.85);
    outline: 2px solid white;
    outline-offset: 2px;
  }

body .mfp-content p {
  max-width: 490px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 26px;
}

body .mfp-content p + p {
    margin-top: 1em;
  }

body .mfp-content p.disclaimer {
    max-width: 100%;
  }

body .mfp-content input[type="text"],
body .mfp-content input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 512px;
  padding: 0 20px;
  border: 2px solid #b78846;
  color: white;
  font-family: "calluna", Georgia, "Times New Roman", serif;
  line-height: 54px;
  background: rgba(0, 0, 0, 0.4);
}

body .mfp-content input[type="text"]::-moz-placeholder, body .mfp-content input[type="email"]::-moz-placeholder {
  color: white;
}

body .mfp-content input[type="text"]::placeholder,
body .mfp-content input[type="email"]::placeholder {
  color: white;
}

body .mfp-content label {
  font-weight: 500;
  font-size: 16px;
}

body .mfp-content form.ny {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin: 40px auto;
}

body .mfp-content form.ny .form-item {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    width: 351px;
    max-width: calc(100vw - 30px);
  }

body .mfp-content form.ny .form-item--select {
      position: relative;
    }

body .mfp-content form.ny .form-item--select::after {
        position: absolute;
        top: 0;
        right: 7px;
        bottom: 0;
        z-index: 100;
        box-sizing: border-box;
        width: 10px;
        height: 8px;
        margin: auto;
        border-top: 8px solid black;
        border-right: 5px solid white;
        border-left: 5px solid white;
        color: black;
        font-size: 12px;
        line-height: 43px;
        content: "";
        pointer-events: none;
      }

body .mfp-content form.ny .form-item--select select {
        flex: 1 0 auto;
        padding: 0 20px 0 15px;
        border: 2px solid white;
        color: black;
        font-size: 16px;
        line-height: 40px;
        background: white;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
      }

body .mfp-content form.ny .form-item--select select:focus {
          border-color: #bd9450;
          outline: none;
        }

body .mfp-content form.ny input[type="submit"] {
    display: block;
    box-sizing: border-box;
    width: 351px;
    max-width: calc(100vw - 30px);
    height: 53px;
    margin: 0;
    padding: 0 30px;
    line-height: 53px;
  }

body .mfp-content form.ny label {
    width: 115px;
    text-align: right;
  }

body .mfp-content input[type="submit"] {
  margin-bottom: 40px;
  font-size: 16px;
  font-family: "modesto-text", serif;
  background: #bd9450;
}

body .mfp-content .mfp-close {
  position: absolute;
  top: auto;
  right: 0;
  bottom: -53px;
  left: 0;
  width: auto;
  height: 19px;
  margin: auto;
  color: #333;
  color: white;
  font-size: 16px;
  font-family: "calluna", Georgia, "Times New Roman", serif;
  font-style: italic;
  line-height: 19px;
  text-align: center;
  text-transform: uppercase;
  opacity: 1;
}

@media (max-width: 640px) {

body .mfp-content .mfp-close {
    bottom: -33px
}
  }

body .mfp-content .mfp-close::before {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  background: url(/images/x.svg) no-repeat center center;
  content: "";
}

/* overlay at start */

body .mfp-fade.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
/* overlay animate in */

body .mfp-fade.mfp-bg.mfp-ready {
  opacity: 1;
}
/* overlay animate out */

body .mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */

body .mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.3s ease-out;
}
/* content animate it */

body .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */

body .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

#email_signup {
  position: relative;
}

/* Subscribe buttons: same hover as Watch Preview — the interior fills with the
   gold accent. The global .button hover is a 6% white wash, which reads as
   almost nothing here.

   This has to cover BOTH sign-up forms: .nyc_subscription_form near the top of
   the homepage and ticket page, and .klaviyo_subscription_form in the footer of
   every page. The two are visually identical, so styling only one made the
   hover look intermittent as you moved around the site.

   Not scoped to .mc-field-group: the footer's submit sits in .clear instead. */

.nyc_subscription_form input[type="submit"]:hover,
  .nyc_subscription_form input[type="submit"].focus-visible,
  .klaviyo_subscription_form input[type="submit"]:hover,
  .klaviyo_subscription_form input[type="submit"].focus-visible {
    color: white;
    background: #bd9450;
  }

.nyc_subscription_form input[type="submit"]:hover,
  .nyc_subscription_form input[type="submit"].focus-visible,
  .klaviyo_subscription_form input[type="submit"]:hover,
  .klaviyo_subscription_form input[type="submit"].focus-visible {
    color: white;
    background: #bd9450;
  }

.nyc_subscription_form input[type="submit"]:hover,
  .nyc_subscription_form input[type="submit"]:focus-visible,
  .klaviyo_subscription_form input[type="submit"]:hover,
  .klaviyo_subscription_form input[type="submit"]:focus-visible {
    color: white;
    background: #bd9450;
  }

@media (min-width: 640px) {
  .klaviyo_messages {
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
  }

  .nyc_subscription_form .klaviyo_messages {
    position: static;
  }
}

.error_message,
.success_message {
  margin: -1px auto 0 !important;
  padding: 0 !important;
  font-weight: normal !important;
}

.error_message,
.success_message {
  right: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 512px;
  color: #fff;
}

.error_message {
  background-color: #6b0505;
}

.success_message {
  background-color: #056b05;
}

@media (min-width: 640px) {
  .error_message a,
  .success_message a {
    margin-bottom: 30px !important;
  }
}

.error_message a,
.success_message a {
  color: white;
}

ul.lightboxes {
  display: flex;
  justify-content: center;
  margin: 2rem 0 0 auto;
  padding: 0;
}

ul.lightboxes li {
    margin: 0 10px;
    list-style: none;
  }

ul.lightboxes li a {
      position: relative;
      display: block;
      width: 800px;
      max-width: 180px;
      height: 0;
      padding: 0 0 72%;
    }

ul.lightboxes li img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      -o-object-fit: cover;
         object-fit: cover;
      box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.4);
      transition: 0.3s;
    }

ul.lightboxes li img:hover {
        box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.4), 0px 0 10px #bd9450;
      }

/* Virtual and New York Show Pages */

body.new-york-show section.intro,
body.virtual-show section.intro {
  min-height: 100vh;
  padding-top: 10vh;
  background-image: url(/images/News.jpg);
  background-repeat: no-repeat;
  background-position: center -52px;
}

@media (max-width: 940px) {

body.new-york-show section.intro,
body.virtual-show section.intro {
    min-height: auto !important
}
  }

body.new-york-show section.intro h1, body.virtual-show section.intro h1 {
    max-width: 900px;
    height: 70px;
    margin: 6rem auto 3rem;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

@media (max-width: 640px) {

body.new-york-show section.intro h1, body.virtual-show section.intro h1 {
      margin: 4rem auto 1rem
  }
    }

body.new-york-show section.intro p, body.virtual-show section.intro p {
    font-size: 24px;
    line-height: 36px;
    text-align: center;
  }

body.new-york-show section.intro p + p, body.virtual-show section.intro p + p {
      margin-top: 1em;
    }

body.new-york-show section.intro p div, body.virtual-show section.intro p div {
      display: inline;
    }

body.new-york-show section.intro p em, body.virtual-show section.intro p em {
      color: #bd9450;
    }

body.new-york-show section.intro p .button, body.virtual-show section.intro p .button {
      box-sizing: border-box;
      width: 277px;
      margin: 2rem 2em 0;
      padding: 1.192rem 2rem;
      font-family: "modesto-text", serif;
      white-space: nowrap;
      cursor: pointer;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      display: inline-block;
      margin: 2rem auto 0;
      padding: 1rem 1.618rem;
      border: 1px solid #bd9450;
      color: white;
      font-weight: bold;
      font-size: 0.8rem;
      font-family: "modesto-text", serif;
      line-height: 1.2;
      letter-spacing: 5px;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
      background: rgba(20, 20, 20, 0.9);
    }

@media (max-width: 640px) {

body.new-york-show section.intro p .button, body.virtual-show section.intro p .button {
        width: 100%;
        margin: 2rem 0 0
    }
      }

body.new-york-show section.intro p .button:hover, body.virtual-show section.intro p .button:hover {
        color: white;
        background: #bd9450;
      }

body.new-york-show section.intro p .button img, body.virtual-show section.intro p .button img {
        display: inline-block;
        width: 9px;
        height: 17px;
        margin-right: 16px;
        vertical-align: bottom;
      }

body.new-york-show section.intro .news, body.virtual-show section.intro .news {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 986px;
    margin: 3rem auto;
    padding: 0;
    text-align: center;
    list-style-type: none;
  }

body.new-york-show section.intro .news li, body.virtual-show section.intro .news li {
      flex: 0 0 100%;
      margin: 0 0 2.5rem;
      text-align: left;
    }

body.new-york-show section.intro .news li:nth-child(2),
    body.new-york-show section.intro .news li:nth-child(3),
    body.virtual-show section.intro .news li:nth-child(2),
    body.virtual-show section.intro .news li:nth-child(3) {
      flex: 0 0 calc(50% - 1rem);
    }

@media (max-width: 940px) {

body.new-york-show section.intro .news li:nth-child(2),
    body.new-york-show section.intro .news li:nth-child(3),
    body.virtual-show section.intro .news li:nth-child(2),
    body.virtual-show section.intro .news li:nth-child(3) {
        flex: 0 0 100%
    }
      }

body.new-york-show section.intro .news li blockquote, body.virtual-show section.intro .news li blockquote {
      margin: 0;
      padding: 0;
    }

body.new-york-show section.intro .news li blockquote a, body.virtual-show section.intro .news li blockquote a {
        display: block;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
      }

body.new-york-show section.intro .news li blockquote .image, body.virtual-show section.intro .news li blockquote .image {
        width: 100%;
        /* placeholder ratio so lazy-loaded images reserve space before they
           load (native lazy loading needs a non-zero box to trigger, and this
           prevents layout shift); the real ratio takes over once loaded */
        aspect-ratio: 3 / 2;
        border-radius: 8px;
        box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.4);
      }

body.new-york-show section.intro .news li blockquote .logo, body.virtual-show section.intro .news li blockquote .logo {
        max-width: 100%;
        height: 47px;
        margin: 1rem 0 0.75rem;
        -o-object-fit: contain;
           object-fit: contain;
      }

@media (max-width: 940px) {

body.new-york-show section.intro .news li blockquote .logo, body.virtual-show section.intro .news li blockquote .logo {
          padding: 0 20px
      }
        }

body.new-york-show section.intro .news li blockquote p, body.virtual-show section.intro .news li blockquote p {
        line-height: 1.4;
      }

body.new-york-show section.intro .news li blockquote h2, body.virtual-show section.intro .news li blockquote h2 {
        height: auto;
        margin: 0 0 0.618rem;
        font-size: 1.4rem;
        line-height: 1.1;
      }

body.new-york-show section.intro .news li blockquote span.stars, body.virtual-show section.intro .news li blockquote span.stars {
        display: block;
        width: 100%;
        margin: 0.618rem 0;
      }

body.new-york-show section.intro .news li blockquote span.stars img, body.virtual-show section.intro .news li blockquote span.stars img {
          width: 16px;
        }

body.new-york-show section.intro .news li blockquote h4, body.virtual-show section.intro .news li blockquote h4 {
        margin: 1rem 0;
        padding: 0;
        color: #bd9450;
        display: inline-block;
        margin: 0;
        padding: 1rem;
        color: white;
        font-weight: bold;
        font-size: 0.8rem;
        font-family: "modesto-text", serif;
        line-height: 1.2;
        letter-spacing: 5px;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
      }

body.new-york-show section.intro .news li blockquote p, body.virtual-show section.intro .news li blockquote p {
        max-width: 670px;
        color: silver;
        font-size: 1.3rem;
        text-align: center;
      }

body.virtual-show section.intro h1 {
    background-image: url(/images/virtual-show.svg);
  }

body.new-york-show section.intro h1 {
    background-image: url(/images/new-york-show.svg);
  }

/* `:not(.button)` so the Watch Preview / Get Tickets buttons in this
     section keep their own styling */

body.new-york-show section.intro p a:not(.button) {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    opacity: 1;
  }

body.new-york-show section.intro p a:not(.button):hover {
    opacity: 1;
    text-decoration-color: rgba(255, 255, 255, 1);
  }

.fc-view-container .goto-banner {
    padding: 10px;
    color: white;
    line-height: 1.4;
    text-align: center;
    background: green;
  }

.fc-view-container .goto-banner a {
      color: white;
    }

/* Shown when the events request fails, so a network error doesn't read as
   "sold out". Lives in section.intro — the calendar itself stays hidden
   until an open show is confirmed. */

.calendar-error {
  box-sizing: border-box;
  max-width: 33em;
  margin: 1.618rem auto 0;
  padding: 16px 20px;
  color: white;
  line-height: 1.4;
  text-align: center;
  background: #8a1c1c;
}

.calendar-error p {
    margin: 0 0 10px;
  }

.calendar-error .calendar-retry {
    padding: 6px 18px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: white;
    font-size: 0.8rem;
    font-family: inherit;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
  }

.calendar-error .calendar-retry:hover,
    .calendar-error .calendar-retry.focus-visible {
      color: #8a1c1c;
      background: white;
    }

.calendar-error .calendar-retry:hover,
    .calendar-error .calendar-retry:focus-visible {
      color: #8a1c1c;
      background: white;
    }

body.terms section.intro h1,
  body.terms section.intro h2,
  body.waiver section.intro h1,
  body.waiver section.intro h2 {
    text-align: center;
  }

body.terms section.intro h3, body.waiver section.intro h3 {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
  }

body.terms section.intro p, body.waiver section.intro p {
    margin: 1em auto;
  }

body.terms section.intro p {
    font-size: 1.2rem;
  }