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

html {
  background-color: #6e8584;
  color: #ffedf2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  line-height: 1;
  font-synthesis: none;
  font-smooth: antialiased;
  -webkit-font-smoothing: antialiased;
}
@media (max-width:499px) {
  #content {
    font-size: 3.3vw;
  }
}
@media (min-width:600px) {
  html {
    font-size: 18px;
  }
}

body, .bg-texture  {
  background-color:#f67681;
  background-repeat: no-repeat;
  color: #ffedf2;
}
/*@media (max-width: 1200px){*/
  body, .bg-texture  {
    background-size: 100% auto;
    background-repeat: repeat;
  }
/*}*/

h1, h2, h3, h4, h5, h6, blockquote {
  font-family: 'Bueno Bold', Impact, sans-serif;
  margin: 0 auto;
  line-height: 1;
  letter-spacing: .0125em;
  font-style: normal;
  font-weight: 400;
}

h1, h2, h3 {
  font-family: 'Bueno Black', Impact, sans-serif;
  font-size: 1.5em;
  line-height: 1;
  font-weight: bold;
  color: #f4e30b;
}

h1 { font-size: 3em; margin: 2em auto 1.4375em; }
h2 { font-size: 2.5em; }
h3 { font-size: 1.375em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1em; }
h6 { font-size: .875em; }

h2 .alt {
  margin-bottom: .175em;
  font-weight: 900;
  font-style: italic;
}

main p, main ul {
  text-transform: none;
  margin: 1.375em auto;
}

strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

a { color:#f4e30b; transition: color .2s ease-out; }
a * { pointer-events: none; }
a:hover { color: #ffedf2; }
p a:hover { color:#ffedf2; }

.yellow {
  color:#f4e30b;
}
.black {
  color:#1a302f;
}
.pink {
  color:#f67681;
}
.white {
  color:#ffedf2;
}


.svg-background {
  background-color: transparent!important;
}
.svg-background svg {
  height: auto;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  z-index: -1;
  transform: translate(-50%,-50%);
}
.svg-background svg * {
  transition: fill .2s ease-out;
  fill: #f4dc03;
}
.svg-background#mc_embed_shell svg {
  height: 100%;
  width: auto;
}
.svg-background#btn-signup:hover svg * {
  fill: #1a302f;
}
@media (max-width:440px) {
  /*.svg-background svg,
  .svg-background svg * {
    display: none;
  }
  .svg-background {
    background-color: #f4dc03!important;
  }
  .svg-background#btn-signup:hover {
    background-color: #1a302f!important;
  }*/
}

.abs-center {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%,-50%)
}

.rel-center {
  position: relative;
  top: 0; left: 50%;
  width: 100%;
  height: auto;
  transform: translateX(-50%)
}

.container {
  max-width: 52em;
}
.container .container {
  padding-left: 0;
  padding-right: 0;
}

.container.media {
  width: 900px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.boxes {
  justify-content: center;
  align-items: center;
  gap: 4em;
  row-gap: 2rem;
} .box {
  text-align: center;
  padding: 1.5em;
  padding-top: 1.5em;
  border-radius: 0;
  color: #1a302f;
  font-smooth: auto;
  -webkit-font-smoothing: auto;
} .box h3, .box h1 {
  font-size: 3em;
  line-height: 1;
  margin: 0 auto .5em;
} .box h3.form-thanks {
  margin: 0 auto 0.125em;
} .box p {
  font-size: 1.375em;
  line-height: 1.1;
  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;
  }
}

.bg-texture2 {
  background-color: #f4dc03;
  color: #f67681;
}

#outerwrapper {
  margin: 0 auto;
  z-index:1;
  position: relative;
}
@media (max-width: 600px) {
  #outerwrapper {
    font-size: 3vw;
  }
}

body:not(.home) #outerwrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* rotator */
#outerwrapper .rotator { position: relative; }
#outerwrapper .rotator:not(.quotes) > *:not(:first-child),
#outerwrapper .rotator.quotes > *:not(.longest) { 
  position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
  display: flex;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  flex-direction: column; }
#outerwrapper .rotator:not(.quotes) > *:first-child,
#outerwrapper .rotator.quotes > *.longest { position: relative; }
#outerwrapper .rotator > * { width: 100%; opacity: 0;
  transition: opacity .3125s ease-in-out;
  margin: 0 auto; }
#outerwrapper .rotator.slide > * { transition-duration: .3125s, 0s; }
#outerwrapper .rotator.slide > *.active { opacity: 1; transition-delay: 0s, .3125s; }
#outerwrapper .rotator > *.active { opacity: 1; transition-delay: .3125s; }
#outerwrapper .rotator.slide > *.next,
#outerwrapper .rotator.slide > *.prev { /*transition-delay: opacity .5s;*/ }
#outerwrapper .rotator.slide > *.next { transform: translate(-43.4%,-50%); opacity: 0; }
#outerwrapper .rotator.slide > *.prev { transform: translate(-56.6%,-50%); opacity: 0; }
#outerwrapper .rotator.slide > *.current { transform: translate(-50%,-50%); opacity: 1; }
#outerwrapper .rotator.slide > *:first-child.next { transform: translate(6.6%,0); }
#outerwrapper .rotator.slide > *:first-child.current { transform: translate(0,0); }
#outerwrapper .rotator.slide > *:first-child.prev { transform: translate(-6.6%,0); }

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

html.menu-open {
  overflow: hidden;
}

body:not(.home) #content {
  width: 100%;
  margin: 0 auto;
	position: relative;
}

body:not(.home):not(.tickets) #content {
  padding: 7em 0 4em;
}
@media (max-width: 1023px) {
  body:not(.home):not(.tickets) #content {
    padding-top: 2.5em;
  }
}

body.tickets #outerwrapper {
  padding: 0;
}

#content {
  position: relative;
  background-color: #f67681;
}
/*
body.tickets #content:after {
  content: '';
  position: absolute;
  top: 0; left:0; width: 100%; height:100%;
  background-color: #f67681;
  z-index: -1;
}*/

body:not(.tickets) #content {
  z-index: 1;
 }
 body:not(.tickets) #footer {
  z-index: 1;
 }

 #content > section { 
   width: 100%;
 }

 section > .container {
  padding: 3em 2em 4em;
 }

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

  -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%);
}

/* fade on */
.fade-on, #team .member {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}
.fade-on.on-screen, #team .member.on-screen {
  opacity: 1;
}

#keyart {
  z-index: -1;
  background: #000;
}

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

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

#nav-secondary {
  margin: 0 auto 4em;
}


/*
  HEADER
----------------------------------------------------------------------------*/
#header {
  position: fixed;
  text-align: center;
  z-index:11;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  top: 0;
  height: 3.5em;
  transition: background-color 200ms linear;
  color: #1a302f;
}
@media (max-width:1350px){
  body.home #outerwrapper {
    padding-top: 3.5em;
  }
}
/*@media (min-width:1024px) {
  body.tickets #header {
    margin-top: 3.5em;
  }
  body.tickets #outerwrapper {
    margin-top: -3.5em;
  }
}*/
#header.scrolled {
  color: #f4e30b !important;
  background-color: #f67681 !important;
}
@media (max-width: 1023px) {
  #header {
    height: 3.5em;
    pointer-events: none;
    top: 0;
    background-color:#f67681;
    color:#f4dc03;
  }
  #outerwrapper {
    padding-top: 3.5em;
  }
  #header * {
    pointer-events: all;
  }

    .home #header:after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: .5em;
      width: 100%;
      background-image: url(../_img/divider.png);
      background-size: cover;
      z-index: 3;
    }
    .home.webp #header:after {
      background-image: url(../_img/divider.webp);
    }
}
@media (max-width: 767px) {
  #header.scrolled {
    color: #1a302f !important;
    background-color: #f67681 !important;
  }
}

#header h2 {
  height:1.5em;
  line-height: .875;
  font-size: 2.55em;
  font-size: 4vw;
  font-family: 'Bueno Bold';
  display:flex;
  align-items:center;
  justify-content:center;
  top: calc(50% - .0625em );
  font-weight: bold;
  font-synthesis: none;
  text-transform: uppercase;
}
@media (min-width:1024px) and (max-width: 1700px) {
  #header h2 {
    padding-right: 19%;
  }
}
#header h2 span {
  display: inline-block;
  vertical-align: -webkit-baseline-middle;
}
#header h2 span.logo {
  height: .5em;
  margin: .125em;
}
#header h2 span.logo.playbill {
  height: .3125em;
}
#header h2 span.logo.theatermania {
  height: .375em;
}
#header h2 span.logo svg {
  height: 100%; width: auto;
  transform: translateY(-50%);
}
#outerwrapper #header h2 {
  position: absolute;
  line-height: .875;
  width: 100%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  width: calc(100% - 2em);
}
#outerwrapper #header:not(.scrolled) h2 {
  color: #fff;
}
#outerwrapper #header h2 svg > * {
  fill: #1a302f;
}
#outerwrapper #header.scrolled h2 svg > * {
  fill: #f4e30b;
}
#outerwrapper #header:not(.scrolled) h2 svg > * {
  fill: #fff;
}
@media (max-width: 1023px){
  #outerwrapper #header:not(.scrolled) h2 svg > * {
    fill: #f4e30b;
  }
}
@media (max-width: 767px){
  #outerwrapper #header h2 {
    left: calc(50% + .5em);
  }
}
.logo-break {
  display: none;
}
@media (max-width: 479px) {
  .logo-break {
    display: block;
  }
}

#nav-logo {
  top: -0.4375em;
  transition: filter .3s;
  display: inline-block;
  position: relative;
}
.home #nav-logo,
.tickets #nav-logo,
.tickets #nav-secondary {
  display: none;
  pointer-events: none;
  transition: opacity .5s;
}
.menu-open #nav-logo {
  opacity: 0;
  pointer-events: none;
}

#nav {
}

#nav a {  }
#nav a:hover {  }
#nav a.active { pointer-events: none; }

/* menu button */
#nav-open,
#nav-close {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  height: 1.875em;
  width: 1.875em;
  cursor: pointer;
  z-index: 20;
  background: transparent;
  opacity: 1;
  transition: none .3s ease-in-out;
  border: none;
  z-index: 11;
  margin: .625em;
  top: -.05em;
  transform: scale(1.125);
  transform-origin: bottom;
  font-size: 1.125em;
}
#nav-open:hover,
#nav-close:hover {
  transform: scale(1.1875);
}

#nav-close {
  height: calc(1em + 1vh); width: calc(1em + 1vh);
  position: absolute;
  left: 1em; top: .75em;
  margin: 0;
}

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

.hamburger {
  position: absolute;
  transform: scale(.875);
  height: 100%;
  width: 100%;
  top: 0; left: 0;
}
.bun:before,
.bun:after,
.patty {
  content: '';
  width: 2.25em;
  height: 6px;
  transform: translate(-50%,-50%);
  position: absolute;
  left: 50%;
  background-color: #1a302f;
  transition: all .3s ease-out;
  pointer-events: none;
}
#nav-close .bun:before,
#nav-close .bun:after,
#nav-close .patty {
  background-color: #1a302f;
}
.bun:before {
  top: calc(50% - 13px);
}
.bun:after {
  top: calc(50% + 13px);
}
.patty {
  top: 50%;
}
#nav-open:hover .bun:before,
#nav-open:hover .bun:after,
#nav-open:hover .patty {
  background-color: #ffedf2;
}

#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:not(.facebook) {
  margin: .25em 0;
}
.social .icon a {
  display: inline-block;
  height: 1.875em;
}
.social .icon.tiktok a {
  padding: .075em .25em;
}
.social a svg {
  display: block;
  width: auto;
  height: 100%;
}

/*
 FOOTER SECTION
 ----------------------------------------------------------------------------*/
#footer {
  font-family: 'Bueno Bold', Impact, sans-serif;
  background:none;
  padding: 0 0 1em;
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index:3;
  color: #f4e30b;
  font-size: 1em;
  background-color: #f67681;
}
body.tickets #outerwrapper {
  background-color: #f67681;
}
@media (max-width: 1023px) {
  body:not(.backpage) #footer {
    padding-bottom: 8em;
  }
}

#footer .social {
  margin: 1em auto;
}

#copyright {
  font-size: 1em;
  line-height: 1.375;
  letter-spacing: .0125em;
}

.address {
  line-height: 1;
}

.address .theater-name {
  font-size: 1.625em;
}

#footer a:not(.btn) {
  color: #f4e30b;
}
#footer a svg path {
  fill: #f4e30b;
  transition: fill .3s ease-out;
}
#footer a:not(.btn):hover {
  color:#ffedf2;
}
#footer a:hover svg path {
  fill: #ffedf2;
}

.theater-link {
  display: inline-block;
}
.box a svg > * {
  fill: #1a302f;
  transition: fill .2s ease-out;
}
.box a:hover svg > *,
#btn-tickets svg > * {
  fill: #f67681;
}
#btn-tickets:hover svg > * {
  fill: #ffedf2;
}

/*
OPT-IN FORM SECTION
----------------------------------------------------------------------------*/
input {
}
.error input {
  border: solid 2px #1a302f;
}
.error-message {
  display:none;
}
.error .error-message {
  display:block;
}
.optin {
  position: relative;
  margin: 0 auto !important;
}
.optin form {
  position: relative;
}
.optin .form-field {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.optin label {
  display: none;
}
.optin input, .optin button {
  display: inline;
  border: 0;
  padding: 0.375em 0.5625em;
  height: 2.125em;
  vertical-align: middle;
  position: relative;
  width: auto;
}
.optin input {
  font-weight: 400;
  background:none;
  color: #2a1ea0;
  background-color: #ffedf2;
  flex: 1 1 auto;
}
.optin .error input {
  color: #1a302f;
}
.optin button {
  font-weight: 700;
  color: #1a302f;
  background-color: #ffedf2;
  border: 1px solid #ffedf2;
  flex: 0 0 auto;
  transition: all .3s ease-out;
  padding: 0 0.5625em;
}
@media (min-width:428px) {
  .optin button {
    margin-left: -.5em;
  }
}
.optin button:hover {
  color: #ffedf2;
  background-color: #1a302f;
  border: 1px solid #1a302f;
  cursor: pointer;
}
.subscribe {
  display: block;
}
.subscribe .error input {
  color: #f00 !important;
}
.subscribe .error input::-webkit-input-placeholder {
  font-weight: bold; color: #1a302f;
}
.subscribe .error input:-moz-placeholder { /* Firefox 18- */
  font-weight: bold; color: #1a302f;
}
.subscribe .error input::-moz-placeholder {  /* Firefox 19+ */
  font-weight: bold; color: #1a302f;
}
.subscribe .error input:-ms-input-placeholder {
  font-weight: bold; color: #1a302f;
}
.subscribe input::-webkit-input-placeholder {
  color: #ffedf2;
}
.subscribe input:-moz-placeholder { /* Firefox 18- */
  color: #ffedf2;
}
.subscribe input::-moz-placeholder {  /* Firefox 19+ */
  color: #ffedf2;
}
.subscribe input:-ms-input-placeholder {
  color: #ffedf2;
}
.form-thanks {
  font-weight: 700;
  font-size: 1.25em;
}
.form-thanks span {
  font-weight: 400;
  font-size: .75em;
}
.optin .error-message {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 100%;
  transform: translate(-50%);
  font-size: .625em;
  text-transform: uppercase;
  color: #1a302f;
}
@media (max-width: 767px) {
  .optin label {
    font-size: 1em;
  }
  .optin input, .optin button {
    font-size: 1em;
  }
}

footer .optin h3:not(.form-thanks) {
  display: none;
}
footer .optin .form-field {
  display: inline-block;
  margin: 0.25em 0.25em 0 0;
}
footer .optin input {
  min-width: 18em;
}

.box .optin form  {
  display: flex;
  flex-direction: column;
  gap: .5em;
} .box .optin input {
  color: #000;
  background-color: #ffedf2;
  text-align: center;
  height: 2.25em;
} .box input, .box .optin button {
  width: 100%;
  border-radius: 0;
} .box .optin .form-field {
  width: auto;
  flex-direction: column;
} .box .optin .form-field:not(.error) input::-webkit-input-placeholder {
  color: #999;
} .box .optin .form-field:not(.error) input:-moz-placeholder { /* Firefox 18- */
  color: #999; }
.box .optin .form-field:not(.error) input::-moz-placeholder {  /* Firefox 19+ */
  color: #999;
} .box .optin .form-field:not(.error) input:-ms-input-placeholder {
  color: #999;
}

.btn {
  font-family: 'Bueno Bold', Impact, sans-serif;
  font-style: normal;
  font-weight: 400;
  display: inline-block;
  color: #f67681;
  background-color: #f4e30b;
  border-color: #f4e30b;
  border: none;
  text-transform: uppercase;
  padding: .25em .375em .125em;
  font-size: 2.1875em;
  line-height: .875;
  letter-spacing: .02em;
  position: relative;
  text-align: center;
  transition: background-color .3s ease-out, color .3s ease-out;
  margin: .25em;
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
}
#nav-secondary .btn {
  color: #1a302f;
}
.btn:active,
.btn.active {
  color: #f67681;
  background-color: #f4e30b;
  border-color: #f4e30b;
  background-image: none;
  text-decoration: none;
}
#nav .btn:active,
#nav .btn.active {
  background-color: #f67681;
  color: #f4e30b;
  border-color: #f67681;
  background-image: none;
  text-decoration: none;
}
.btn.active {
  pointer-events:none;
}
.btn:hover,
#nav-secondary .btn:hover {
  color: #ffedf2;
  background-color: #1a302f;
  border-color: #1a302f;
  background-image: none;
  text-decoration: none;
}
#nav .btn:hover {
  color: #ffedf2;
  background-color: #1a302f;
  border-color: #1a302f;
  background-image: none;
  text-decoration: none;
}
.btn.black.svg-background,
.btn.black.svg-background svg * {
  color: #ffedf2;
  fill: #1a302f!important;
}
.btn.black.svg-background:hover,
.btn.black.svg-background:hover svg * {
  fill: #f4e30b!important;
  color: #f67681;
}
.btn.reverse {
  color: #ffedf2;
  background-color: #1a302f;
  border-color: #1a302f;
}
.btn.reverse:hover {
  color: #f4e30b;
  background-color: #f67681;
  border-color: #f67681;
}

#btn-tickets {
  font-size: 2.875rem;
  position: absolute;
  top: 0;
  right: 0;
  margin: .1875em;
  z-index: 2;
  white-space: nowrap;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  filter: drop-shadow(.12em -.25em 16px #0f847e44);
  color: #f67681;
  background-color: #ffedf2;
}
#btn-tickets:hover {
  color: #ffedf2;
  background-color: #1a302f;
  border-color: #1a302f;
}
.scrolled #btn-tickets {
  filter: none;
}
@media (max-width:768px){
  #btn-tickets {
    filter: none;
    filter: drop-shadow(.12em -.25em 16px #83302b44) !important;
  }
}
#btn-tickets .perf {
  font-family: 'CoreDeco', Gill Sans, Trebuchet MS, sans-serif;
  display: block;
  padding: .5em 0;
  font-size: .75em;
  position: absolute;
  top: 100%;
  color: #ffedf2;
  left: 50%; transform: translateX(-50%);
  width: 100%;
  line-height: 1.1;
  font-weight: bold;
  z-index: 2
}
@media (min-width: 1024px) {
  #btn-tickets .perf {
    text-shadow: 1px 1px 4px #101861;
  }
}
@media (max-width: 1023px) {
  #btn-tickets,
  #btn-tickets:active {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    top: auto;
    bottom: 0;
    margin: 0;
    font-size: 5.6em;
    font-size: 3.875rem;
    z-index: 10;
  }
  @media (max-width: 400px) {
    #btn-tickets {
      font-size: 5.25em;
    }
  }
  #btn-tickets:before {
    content: '';
    background-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 107"><defs><style> .cls-1 { fill: %23231f20; } </style></defs><path class="cls-1" d="M216,87.52V19.4c-10.43,0-18.93-8.2-19.45-18.5L20.6,0c-.36,10.46-8.92,18.83-19.47,18.83-.38,0-.75-.04-1.13-.06v68.17c10.63.16,19.2,8.82,19.2,19.48,0,.19-.02.38-.03.56h177.89c0-10.58,8.43-19.17,18.94-19.47Z"/></svg>');
    background-position: center;
    background-size: contain;
    height: 100%;
    width: 1em;
  }
}

/* Spotify player */
#spotify iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#spotify .container {
  height: 100%;
  width: 100%;
}
#spotify {
  position: fixed;
  top: calc(50% + 2em);
  right: 0;
  width: 18em;
  height: 30em;
  max-height: calc(80vh);
  background: #f67681;
  border-radius: 0.875em;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0;
  -webkit-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
  z-index: 2;
  opacity: 0;
  transform: translate(100%,-50%);
  box-shadow: 0.5em 0.25em 0.875em rgba(0,0,0,.5);
}
.page-loaded #spotify {
  opacity: 1;
}
#spotify.open {
  transform: translate(0,-50%);
}
#btn-listen {
  display: block;
  top: 50%;
  transform: translate(-100%,-50%);
  left: 2px;
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  color: #f67681;
  background-color:#f4dc03;
  font-size: 1.625em;
  line-height: .9;
  text-transform: uppercase;
  transition: all .3s ease-out;
  padding: 0.3125em 0.25em;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  border-radius: .25em;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  opacity: 0;
}
#btn-listen.active {
  opacity: 1;
}
#btn-listen * {
  pointer-events:none;
}
#btn-listen svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
#btn-listen:hover {
  color: #fff;
  background-color:#1a302f;
  cursor:pointer;
}
@media (max-width: 767px) {
  #spotify {
    width: calc(100% - 3.75em);
  }
}
#spotify .close {
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.125em;
}
#spotify.open .close {
  display: block;
}
#spotify svg > * {
  fill: #ffedf2;
}

      /*
        VIDEO
      -------------------------------- */
      .custom-thumb {
        display: block;
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-bottom: 55.75%;
        height: 0;
        background-color: #000;
        border: .25em solid #f4e30b;
        cursor: pointer;
        border-radius: 1.375em;
        transition: border-color .2s ease-out;
      }
      .page-loaded .custom-thumb:after {
        /* custom video thumb */
        content: '\25B6';
        content: '';
        color: #f4e30b;
        background-image: url("data:image/svg+xml,%3Csvg data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cstyle%3E.bbbbb%7Bfill:%23f4e30b%3B%7D%3C/style%3E%3Cpath class='bbbbb' d='M0 0v150l130-75'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 0.875em;
        position: absolute;
        top: 50%; left: 50%;
        width: 2em;
        font-size: 5em;
        height: 2em;
        padding-left: 0.2em;
        transform: translate(-50%,-50%);
        pointer-events: none;
        opacity: 0;
        transition: all .2s ease-out;
        z-index: 1;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .page-loaded .custom-thumb.init:after {
        opacity: 1;
      }
      .page-loaded .video-wrapper:not(.init) .news-hed {
        opacity: 0;
      }
      .page-loaded .custom-thumb.init:hover:after {
        transform: scale(.90) translate(-55%,-55%);
        transition: all .4s ease-out;
        opacity: 1;
        background-image: url("data:image/svg+xml,%3Csvg data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150'%3E%3Cstyle%3E.bbbbb%7Bfill:%23ffffff%3B%7D%3C/style%3E%3Cpath class='bbbbb' d='M0 0v150l130-75'/%3E%3C/svg%3E");
      }
      .page-loaded .custom-thumb.playing:after {
        opacity: 0;
      }
      .custom-thumb:hover  {
        border: .25em solid #fff;
      }
      .custom-thumb:hover:after  {
        color: #fff;
      }
      .custom-thumb * {
        pointer-events:none;
      }
      .custom-thumb iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: all!important;
      }
      .custom-thumb img {
        height:  100%;
        width: auto!important;
        position:  absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }

/* video */
#video-play {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  padding-bottom: 175%;
  height: 0;
  background-color: #f4dc03;
  border: 2px solid #f4dc03;
}
.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:%23f67681;}</style></defs><polygon class="b" points="0 0 0 288 252 144 0 0"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.875em;
  position: absolute;
  top: 50%; left: 50%;
  width: 2em;
  font-size: 5.5em;
  height: 2em;
  padding-left: 0.2em;
  transform: translate(-50%,-50%);
  pointer-events: none;
  opacity: 0;
  transition: all .2s ease-out;
  z-index: 1;
  border-radius: 50%;
  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 ease-out;
}
#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%);
}
.video h2 {
  margin-bottom: .625em;
}

body .cc-window.cc-floating,
body .cc-banner.cc-bottom {
  text-align: left;
  background-color: #f4e30b;
  color: #1a302f;
  font-family: inherit;
  text-transform: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.375em;
  width: 15.5em;
  height: auto;
  bottom: 10em;
  font-size: 14px;
  padding: 1.5em;
} body .cc-window .cc-message {
  margin-bottom: 0;
} body .cc-link {
  padding: 0;
  color: #f67681;
} body .cc-link:hover {
  color: #1a302f;
} body .cc-btn {
  padding: 0.5em 0.8em;
} body .cc-btn {
  color: #ffedf2;
  background-color: #f67681;
  border-color: #f67681;
} body .cc-btn:hover {
  background-color: #1a302f;
  border-color: #1a302f;
  color: #ffedf2;
}


/* footer logos */
#footer .logo#almeida {
  width: 8em;
}
#footer .logo#sfp {
  width: 4em;
}
#footer .logo svg path {
  fill: #2a1ea0;
}
@media (min-width:1024px) {
  #footer .logo {
    position: absolute;
    bottom: 2em;
  }
  #footer .logo#almeida {
    left: 2em;
  }
  #footer .logo#sfp {
    right: 2em;
  }
}
@media (max-width: 1023px) {
  #footer .logo {
    position:relative;
    right:auto;
    bottom:auto;
    margin: 1em;
    display: inline-block;
  }
}


.rule-top,
.rule-bottom {
  margin: 2em auto;
  width: 100%;
}

#blurb {
  margin: 3.25em auto 4em;
}

#blurb p {
  margin: 1.25em auto !important;
}

@media (max-width: 1023px) {
  #blurb .flex div {
    flex: 0 0 100%!important;
  }
  #blurb .flex div:first-child {
    order: 3;
  }
}

#blurb p {
  font-size: 1.375em;
  max-width: 28em;
}
#blurb h2 {
  font-style: normal;
  font-weight: 400;
  margin: 0 auto .875em;
  font-size: 1.75em;
  line-height: 1.05;
}
@media (max-width:639px) {
  #blurb h2 {
    font-size: 8vw;
  }
}


#advisory p {
  margin: 1.25em auto !important;
}

@media (max-width: 1023px) {
  #advisory .flex div {
    flex: 0 0 100%!important;
  }
  #advisory .flex div:first-child {
    order: 3;
  }
}