/*
 * core.css - all global CSS code belongs in this file
 *
 */

html {
  color: #fff;
  background-color: #000;
  font-family: "TradeGothicLTPro";
  font-style: normal;
  font-stretch: normal;
  font-weight: 300;
  font-size: 16px;
  min-width: 320px;
}
@media (min-width:1024px) {
  html {
    font-size: 18px;
  }
}
@media (min-width:2000px) {
  html {
    font-size: 19px;
  }
}

body {
  line-height: 1;
  font-synthesis: none!important;
  text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6, .address .theater-name {
  font-family: "DINSlab";
  font-style: normal;
  font-stretch: normal;
  font-weight: 700;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  color: #fe01da;
}

h1, h2, h3 {
  text-transform: uppercase;
  letter-spacing: .025em;
}

h1 { font-size: 2.5em; margin: 1em auto; }
h2 { font-size: 2em; font-weight: normal; }
h3 { font-size: 1.625em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1em; }
h6 { font-size: .875em; }

a, button, .btn { 
  pointer-events: all;
}

main p, main ul, main ol {
  text-transform: none;
}
blockquote {
  font-family: "DINSlab";
  font-style: normal;
  font-stretch: normal;
  font-weight: 700;
  font-size: 1.5em;
  line-height: .875;
  margin-left: .1875em;
  text-transform: uppercase;
}

p strong {
  font-family: "TradeGothicLTPro1";
  font-style: normal;
  font-stretch: normal;
  font-weight: 700;
}

a { color:#fe01da; transition: color .4s; }
a * { pointer-events: none; }
a:hover { color:#fff; }
p a:hover { color:#fff; }

.white { color: #fff; }
.black { color: #000; }
.pink { color: #fe01da; }
.red { color: #de0000; }

.container.media {
  width: 94vw;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
} @media (max-width:767px) {
  .container.media {
    max-width: 100%;
  }
}

.boxes {
  position: relative;
  justify-content: space-between;
  align-items: stretch;
  row-gap: 1.25em;
} .box {
  position: relative;
  background-color: #000;
  border: 0;
  padding: 1.125em;
  z-index: 3;
} .boxes:after, #mc_embed_shell:before, #mc_embed_shell:after {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; width: 100%; background-color: #fff; filter: blur(10.5em); opacity: .5; z-index:-1;
} #mc_embed_shell:after {
  opacity: .625;
} #mc_embed_shell:before {
  filter:none;  background-color: #000; z-index:0; opacity: 1;
} .box h3, .box h1 {
  font-size: 1.875em;
  line-height: 1;
  margin: 0 auto .5em;
} .box h3.form-thanks {
  margin: 0 auto 0.125em;
} .box p {
  line-height: 1.3;
  margin: .625em auto;
} @media (max-width: 399px) {
  .box h3, .box h1 {
    font-size: 7.5vw;
  }
}
@media (max-width: 1023px) {
  .box.col-1-3 {
    flex: 1 1 100%;
    max-width: none;
  }
}
@media (min-width:533px) and (max-width: 1023px) {
  .box.col-1-3 p br {
    display: none;
  }
}

#outerwrapper {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index:100000;
}

/* rotator */
#outerwrapper .rotator { position: relative; }
#outerwrapper .rotator:not(.quotes) > *:not(:first-child),
#outerwrapper .rotator.quotes > *:not(.longest) { max-width: calc(100% - 2em);
  position: absolute; top: 50%; left: 50%; width: 100%; display: block; transform: translate(-50%,-50%); }
#outerwrapper .rotator:not(.quotes) > *:first-child,
#outerwrapper .rotator.quotes > *.longest { position: relative; }
#outerwrapper .rotator > * { width: 100%; opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 0.5s, 0.5s;
  transition-delay: 0s, 0s; }
#outerwrapper .rotator.slide > * { transition-duration: .5s, 0s; }
#outerwrapper .rotator > *.active { opacity: 1; transition-delay: 0s, .5s; }
#outerwrapper .rotator.slide > *.next,
#outerwrapper .rotator.slide > *.prev { transition-delay: opacity .5s; }
#outerwrapper .rotator.slide > *.next { transform: translate(-150%,-50%); }
#outerwrapper .rotator.slide > *.current { transform: translate(-50%,-50%); }
#outerwrapper .rotator.slide > *.prev { transform: translate(50%,-50%); }
#outerwrapper .rotator.slide > *:first-child.next { transform: translate(-100%,0); }
#outerwrapper .rotator.slide > *:first-child.current { transform: translate(0,0); }
#outerwrapper .rotator.slide > *:first-child.prev { transform: translate(100%,0); }

/*
 GLOBAL SECTION
 ----------------------------------------------------------------------------*/
html, body {
}

#content {
  width: 100%;
  margin: 0 auto;
	position: relative;
  padding-top: 3.1875rem;
  pointer-events: none;
}
#content > * {
  pointer-events: all;
}
body:not(.home):not(.signup) #content {
  font-size: .875rem;
}
body:not(.home) #content {
  padding: 3.1875rem 0 0; /* if no header */
  padding: 3.1875rem 0 0; /* if header */
}


#content > section { 
  width: 100%;
  margin: 0 auto;
  padding: 4em 0;
}

/* fade out */
.fade-sides {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent 100%);
}
.fade-bottom {
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 15%, #000 100%);
  mask-image: linear-gradient(0deg, transparent, #000 15%, #000 100%);
}

#keyart, #title, #billing, #content, #footer {
  z-index: -1;
}

#keyart, #title, #billing, #content, #footer {
  z-index: 1;
}

#outerwrapper:after {
  z-index: 2;
}

#title, #billing, #content, #footer {
  z-index: 3;
}


/*
  HEADER
----------------------------------------------------------------------------*/
#header {
  position: fixed;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  height: 3.25rem;
  background-color:transparent;
  pointer-events: none;
}
@media (max-width:639px) {
  #header {
    height: 4rem;
  }
  #content {
    padding-top: 4rem;
  }
  #header * {
    pointer-events: all;
  }
}
#header.scrolled {
  color: #fff !important;
  background-color: #000000 !important;
  pointer-events: all;
}

#header > div:first-child {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width:1023px) {
  #header > div:first-child {
    padding-right: .5rem;
  }
}

#header h2 {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 1.625em;
  width: 100%;
}
@media (max-width: 439px) {
  #header h2 {
    font-size: 6vw;
  }
}

#btn-tickets {
  font-size: 1.625em;
  line-height: .9;
  position: absolute;
  z-index: 9;
  font-weight: 800;
  letter-spacing: .05em;
  transition: color .3s, background-color .3s;
  flex: 0 0 auto;
  z-index: 4;
  margin: 0;
  filter: drop-shadow(-.0625em .0625em .1875em #0008);
  pointer-events: all !important;
  background-color: #fe01da;
}
#header #btn-tickets {
  top: .2em;
  right: .2em;
}
#btn-tickets:hover {
  background-color: #fff;
}
@media (min-width: 1024px) {
  #btn-tickets {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }
}
@media (max-width: 1023px) {
  #btn-tickets {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    font-size: 3.25em;
  }
  #btn-tickets:hover {
    color: #fff;
    background-color: #000;
  }
}
@media (max-width: 479px) {
  #btn-tickets {
    font-size: 10.875vw;
  }
}

#nav {
  background-color: #000;
  -webkit-backdrop-filter: blur(10 px) !important;
  -moz-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  pointer-events:all;
}

#nav a.active { 
  background: transparent;
  pointer-events:none;
}
#nav a:hover,
#nav a:active {
  background-color: #fff;
}

/* menu button */
#nav-open,
#nav-close {
  position: relative;
  display: block;
  height: 1.625rem;
  width: 1.625rem;
  cursor: pointer;
  z-index: 20;
  background: transparent;
  opacity: 1;
  transition: all .3s;
  border: none;
  z-index: 11;
  margin: .5rem .75rem;
}

#nav-open *,
#nav-close * {
  pointer-events: none;
}

.hamburger {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0; left: 0;
}
.bun:before,
.bun:after,
.patty {
  content: '';
  width: 100%;
  height: .2em;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  background-color: #fff;
  transition: all .3s;
  pointer-events: none;
  border: none;
}
#nav-close .bun:before,
#nav-close .bun:after,
#nav-close .patty {
  border-color: #fff;
}
.bun:before {
  top: calc(50% - .625rem);
}
.bun:after {
  top: calc(50% + .625rem);
}
.patty {
  top: 50%;
}
#nav-open:hover .bun:before,
#nav-open:hover .bun:after,
#nav-open:hover .patty,
#nav-close:hover .bun:before,
#nav-close:hover .bun:after,
#nav-close:hover .patty {
  border-color: #fff;
}

#nav-close .hamburger .patty {
  opacity: 0;
}
#nav-close .hamburger .bun:before,
#nav-close .hamburger .bun:after {
  transform: translate(-50%,-50%) rotate(45deg);
  transform-origin: center;
  top: 50%; left: 50%;
}
#nav-close .hamburger .bun:after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

/*
 SOCIAL ICONS
----------------------- */
.social .icon {
  display: inline-block;
}
.social .icon a {
  display: inline-block;
  height: 1.875em;
}
.social .icon.tiktok a {
  padding: .075em .25em;
  margin: 0 .125em;
}
.social a svg {
  display: block;
  width: auto;
  height: 100%;
}
.social a svg > * {
  fill: #de0000;
  transition: fill .4s;
}
.social a:hover svg > * {
  fill: #fff;
}

/*
 FOOTER SECTION
 ----------------------------------------------------------------------------*/
#footer {
  background:none;
  padding: 0 1.5em;
  position: relative;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  z-index:1;
  flex: 0 0;
  color: #fff;
  font-size: 1rem;
} @media (max-width:1024px) {
  body.home #footer {
    padding: 0 1.5em 9em;
  }
} #footer a:not(.btn) {
  color: #fff;
} #footer a svg path {
  transition: all .3s;
  fill: #de0000;
} #footer .address a svg path {
  transition: all .3s;
  fill: #fff;
} #footer a:not(.btn):hover {
  color:#de0000;
} #footer a:hover svg path {
  fill: #fff;
} #footer .address a:hover {
  color: #fff;
} #footer .address a:hover svg path {
  fill: #fff;
}

#footer .social {
  font-size: .875em;
  margin: 0 auto;
}

#copyright, .address {
  font-size: .8125em;
  line-height: 1.25;
  margin: 1em auto 1.75em;
}

#copyright {
  font-size: .5625em;
  margin-bottom: 2em;
}

.address .theater-name {
  font-size: 1.875em;
  line-height: 1;
  margin-bottom: .125em;
}

/*
OPT-IN FORM SECTION
----------------------------------------------------------------------------*/
input {
  text-align: center;
}

.box .optin form  {
  display: flex;
  flex-direction: column;
  gap: .5em;
} .box .optin input {
  color: #fff;
  background-color: #555;
  height: auto;
} .box input, .box .optin button {
  width: 100%;
} .box .optin .form-field {
  width: auto;
  flex-direction: column;
} .box .optin .form-field:not(.error) input::-webkit-input-placeholder {
  color: #fff;
} .box .optin .form-field:not(.error) input:-moz-placeholder { /* Firefox 18- */
  color: #fff; }
.box .optin .form-field:not(.error) input::-moz-placeholder {  /* Firefox 19+ */
  color: #fff;
} .box .optin .form-field:not(.error) input:-ms-input-placeholder {
  color: #fff;
}

/*
  COOKIE CONSENT
-------------------------------- */
html body .cc-revoke,
html body .cc-window {
  font-family: inherit;
}

body .cc-window.cc-floating {
  max-width: none;
  width: 17em;
  font-size: .875em;
  top: 50%;
  height: 20em;
  transform: translateY(14%);
}

html body .cc-window {
  gap: 30px;
  row-gap: 0;
  text-align: left;
  color: #000;
}

input, button, .btn, .cc-compliance .cc-btn, a.close {
  font-size: 16px;
  line-height: .825;
  border-radius: 0;
}
button *, .btn *, a * {
  pointer-events:none!important;
}
button svg {
  max-width: 2em;
}

.btn, html body .cc-compliance .cc-btn, a.close, a.close:hover svg * {
  font-style: normal;
  font-stretch: expanded;
  display: inline-block;
  background-color: #db0000;
  color: #fff;
  font-family: "DINSlab";
  font-style: normal;
  font-stretch: normal;
  font-weight: 700;
  line-height: .9375;
  text-transform: uppercase;
  padding: .3125em 0.625em .375em;
  font-size: 1.1875em;
  line-height: .9375;
  position: relative;
  transition: all .3s;
}
a.close:hover svg * {
  transition: all .2s;
}
button:hover, .btn:hover, html body .cc-compliance .cc-btn:hover, a.close:hover, a.close:hover svg * {
  color: #000;
  background-color: #fff;
  text-decoration: none;
}

html body .cc-compliance .cc-btn:last-child {
  font-size: .875rem;
  line-height: 1.2;
  min-width: 5rem;
  display:inline-block;
  text-align: center;
  white-space: normal;
}

@media (min-width: 768px) {
  html body .cc-compliance .cc-btn:last-child {
    max-width: 9rem;
  }
}

/* video */
#video-play {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  background-color: #000;
  border: .25em solid #fff;
  border-radius: .125em;
}
.page-loaded #video-play:after {
  /* custom video thumb */
  content: '';
  background-image: url('data:image/svg+xml,<svg id="TriangleRight" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 252 288"><defs><style>.b{fill:%23fff;}</style></defs><polygon class="b" points="0 0 0 288 252 144 0 0"/></svg>');
  background-position: 56.25% 50%;
  background-repeat: no-repeat;
  background-size: 0.875em;
  position: absolute;
  top: 50%; left: 50%;
  width: 2em;
  font-size: 3.25em;
  height: 2em;
  padding-left: 0.2em;
  transform: translate(-50%,-50%);
  pointer-events: none;
  opacity: 0;
  transition: all .2s;
  z-index: 1;
  border: .1875em solid #fff;
  border-radius: 50%;
  background-color: #16243799;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-loaded #video-play.custom-thumb:after {
  opacity: 1;
}
.page-loaded #video-play.custom-thumb:hover:after {
  transform: scale(.90) translate(-55%,-55%);
  transition: all .4s;
}
#video-play.custom-thumb * {
  pointer-events:none;
}
#video-play iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#video-play img {
  height:  100%;
  width: auto!important;
  position:  absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  filter: opacity(0.65) saturate(0.875);
}
#video-play:hover img {
  filter: opacity(.8) saturate(1);
}
#video h2 {
  font-size: 1.5em;
  margin-bottom: .625em;
}

/* cookie consent */
body .cc-banner .cc-message {
  text-align:left;
  font-size: .875em;
  line-height: 1.5625;
  z-index: 999999999999;
  margin-bottom: 0 !important;
}
body .cc-window.cc-banner {
  flex-direction: column;
  gap: .75em;
}
body .cc-window.cc-floating {
  max-width: none;
  padding: 1.5em;
  top: 50%;
  transform: translateY(11%);
  transform-origin-x: translateY(11%);
  width: 16em;
  height: 19em;
  z-index: 8;
}
body .cc-banner.cc-bottom {
  right: auto;
  bottom: 8.5rem;
  top: auto;
  font-size: 0.875rem;
  max-width: 14rem;
  transform: translate(-120%,0);
  transition: transform .5s ease-in-out;
  padding: 1.5em;
} @media (min-width:1024px) {
  body .cc-banner.cc-bottom {
    bottom: 4.5em;
  }
}
.cc-banner.cc-bottom:not(.cc-invisible) {
  transform: translate(0,0);
}
body .cc-compliance {
  align-self: self-start;
}
@media (max-width:532px) {
  body .cc-window.cc-banner {
    flex-direction: column;
    gap: 1em;
  }
  body .cc-btn {
    display: block;
  }
}
  body .cc-compliance {
    width: 100%!important;
  }