/*
 * core.css - all custom CSS code belongs in this file; including Bootstrap
 * Framework overrides.
 *
 */

/* =============================================================================
 CUSTOM CSS
 ========================================================================== */
/*
 BOOTSTRAP OVERRIDES
 ----------------------------------------------------------------------------*/
/* Sets Box model */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: middle;
}

html, body {
  background-color: #000;
  color:#fff;
  font-family: futura-pt-condensed, sans-serif;
  line-height: 1;
  font-family: sans-serif;
  font-smooth: antialiased;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
  overflow-y:overlay;
}

body.no-scroll {
  position:fixed;
}

/* dynamic font sizing */
/* sets max size of 22px (desktop), min size of 14px (mobile) and scales in between */
/* setting font sizes in px will override, so set all font sizes with % */
html {
  font-size: 14px;
}
@media screen and (min-width: 480px) {
  html {
    font-size: calc(14px + 8 * ((100vw - 480px) / 1320));
  }
}
@media screen and (min-width: 1800px) {
  html {
    font-size: 22px;
  }
}

/* override dynamic font sizing */
/* html { font-size: 16px; } */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  padding: 0 0 .5em;
  text-align: center;
  font-family:'Grotesque MT W01 Condensed';
  font-weight:bold;
  letter-spacing:.05em;
}

h1 { font-size: 280%; }
h2 { font-size: 220%; }
h3 { font-size: 170%; }
h4 { font-size: 130%; }
h5 { font-size: 100%; }
h6 { font-size: 80%; }

p {
  text-align: left;
  line-height: 1.5;
  padding: 0 0 1.5em;
  text-transform: none;
  letter-spacing: normal;
  font-family: futura-pt-condensed, sans-serif;
}

img { outline: none; border: 0; }

.img-responsive { display: inline; }

.nowrap { white-space: nowrap; }

em, i { font-style:italic; }

strong, b { font-weight:700 }

a { color: #ffc600; text-decoration: none; }
a:hover { color:#fff; }

blockquote {
  text-align: center;
  font-size: 200%;
  font-weight:bold;
  padding: 1em 0;
}

blockquote p {
  text-align: center;
  line-height: 1;
  padding: 0;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}

blockquote footer {
  font-size: 50%;
  padding-top: 1em;
  line-height: 1;
}

blockquote cite {
  font-style: italic;
}

input {
  border-radius: 0!important;
  -webkit-appearance: none!important;
}

sup {
  vertical-align: super;
  font-size:60%;
}

/*
 UTILITY CLASSES SECTION
 ----------------------------------------------------------------------------*/
iframe#mediaplxpxl {
  opacity: 0;
}

.w100 {
  width: 100%;
  height: auto;
}

.ib { display: inline-block; font-size:inherit; }

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


/*
 GLOBAL SECTION
 ----------------------------------------------------------------------------*/
#black {
  border:10px solid #000;
  background:#ffc600;
  padding:.5em;
  max-width: 100vw;
  margin-top:60px;
}

#outerwrapper {
  min-height: 100%;
  overflow: visible;
  background: #000;
  padding: 20px;
  margin: 0px 0px;
  max-width: 100%;
}

#content {
  margin: 0px auto 0;
  max-width: 1200px;
  z-index: 1;
  overflow: visible;
}

.page-title{

}

.preload {
  position:absolute;
  top:55px;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:100%;
  z-index:100000000;
  background:#ffc600;
}

.pre {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  height:150px;
  width:150px;
  z-index:100000000;
}

@media (max-width:767px) {
  #content {
    width:95%;
    padding-top:0px;
    margin-top:0;
  }

  #black {
    margin-top:62px;
    padding:10px;
  }

  #outerwrapper {
    border:5px solid #ffc600;
    margin-bottom:55px;
    padding:5px;
    width:100%;
  }

}



/*
 HEADER SECTION
 ----------------------------------------------------------------------------*/
#header {
  line-height: .9;
  font-size: 140%;
  position: fixed;
  width: 100%;
  text-align: center;
  background:#fff;
  height:55px;
  z-index:1000;
  top:0;
}

#header h2 {
  color:#000;
  text-align:center;
  font-size:26px;
  padding:16px 0;
  letter-spacing: .075em;
}

#btn-tickets {
  display: block;
  margin: 0;
  padding: 15px 20px;
  font-size: 34px;
  line-height: .9;
  background-color: #000;
  color: #ffc600;
  position:absolute;
  top:0;
  left:0;
  height:55px;
  font-family:'Grotesque MT W01 Condensed';
  font-weight:bold;
  letter-spacing:.075em;
}

#btn-tickets:hover {
  color: #000;
  background-color: #fff;
  text-decoration:none;
}

#header-social {
  font-size: 24px;
  line-height: .9;
  position:absolute;
  right:20px;
  top:8px;
}

@media (max-width:767px) {
  #header {
    height:62px;
  }

  #btn-tickets {
    position:fixed;
    width:100%;
    display: block;
    margin: 0;
    font-size: 45px;
    height:55px;
    text-align:center;
    z-index:100;
    padding:8px 0;
    background:#fff;
    color:#000;
    bottom:0;
    top:auto;
  }


  #btn-tickets.hidden-xs {
    display:none;
  }


  #btn-tickets:hover {
    text-decoration: none;
    background:#000;
    color:#ffc600;
  }

  #header h2 {
    font-size:22px;
    padding:10px 0;
  }

  #header-social {
    display:none;
  }

}


@media (min-width:768px) and (max-width:900px) {

  #header h2 {
    font-size:20px;
    padding:17px 0;
    text-align: center;
    margin: 0;
    width: 100%;
  }

  #content {
    padding-top:0px;
  }

  #header-social {
    display:none;
  }

}

@media (min-width:901px) and (max-width:1100px) {
  #header-social {
    font-size:21px;
    top:11px;
  }

  #header h2 {
    font-size: 2.5vw;
    padding: 14px 0;
  }
}


/*
 SOCIAL ICONS
 ----------------------------------------------------------------------------*/

.social-icons {
}

.social-icons a {
  display: inline-block;
  width: auto;
  padding: .25em;
  line-height: .9;
  color:#000;
}

.social-icons a:hover {
  color: #ffc600;
}

/* NAV -------- */
#nav {
  position: fixed;
  top:0; left: 0;
  height: 100%; width: auto;
  min-width: 320px;
  z-index: 18;
  background: #bbb;
  transform: translateX(-100%);
  transition: transform .3s ease;
  padding-top:3em;
}

#nav.open {
  transform: translateX(0);
  transition: transform .3s ease;
}

#nav a {
  clear: both;
  display: block;
  padding: .5em 1em;
  text-align: left;
}

#nav.open a {
  color: #469;
}

#nav.open a:active {
  color: #fff;
}

#nav.open a:hover {
  color: #fff;
}

.fa-times-thin:before {
	content: '\00d7';
}

@media (min-width:768px) {
  #nav.horizontal a {
    display: inline-block;
  }
}

/*
 FOOTER SECTION
 ----------------------------------------------------------------------------*/
#footer {
  background:none;
  padding: 3em 2em 1em;
  font-size: 100%;
  text-align: center;
  z-index: 2;
  text-transform: uppercase;
  font-family: futura-pt-condensed, sans-serif;
  position:relative;
  margin-top:-5%;
}

#footer-copyright {
  font-size: 80%;
  line-height: 1.2;
}

#footer-optin,
#footer-social,
#footer-address {
}

#footer-address {
  font-size:16px;
  margin-bottom:10px;
}

#footer-copyright {
  line-height:1;
  font-size:14px;
}

#footer-optin h3 {
  text-transform:uppercase;
  color:#000;
  font-family: futura-pt-condensed, sans-serif;
  letter-spacing:.025em;
}

#footer-social {
  display: block;
  font-size: 150%;
  padding-bottom: .625em;
}

#footer a {
  color:#fff;
}

.theater-logo {
  width:150px;
  display:block;
  margin:0 auto;
}

#amex {
  position:absolute;
  bottom:20px;
  right:40px;
  width:185px;
}

#footer-social a {
  color:#ffc600;
  font-size:30px
}

@media (max-width:767px) {
  #footer {
    margin-bottom:-1px;
    padding:4em 1em 0px;
    background:#000;
    color:#fff;
    width:101%;
    margin-top:-15%;
  }

  .btm-line {
    height:3px;
    width:130%;
    background:#ffc600;
    margin-top:10px;
    margin-bottom:7px;
    margin-left:-15%;
  }

  #footer-copyright {
    font-size:100%;
  }

  #footer-address, #footer-copyright {
    position:relative;
    bottom:auto;
    left:auto;
    right:auto;
  }

  #footer-address {
    margin-bottom:10px;
  }

  .theater-logo.hidden-xs {
    display:none;
  }

  .theater-logo.visible-xs {
    display:block!important;
  }

  #footer a {
    color:#fff;
  }



  .theater-logo {
    margin:0 auto;
  }


    #amex {
      position:relative;
      bottom:auto;
      right:auto;
      width:150px;
      margin:15px auto;
    }
}

@media (max-width:767px) {
  #footer-social {
    margin-top:0px;
  }
}

@media (min-width:901px) {
  #footer-social {
    display:none;
  }
}

@media (min-width:2000px) {
  #footer {
    margin-top:-2%;
  }
}

/*
 SPLASH SECTION
 ----------------------------------------------------------------------------*/


#blurb {
  width:80%;
  max-width:1000px;
  margin:25px auto 25px;
}

#blurb p {
  text-align: justify;
  text-align-last: center;
  font-size: 24px;
  line-height: 1.375;
  margin-bottom: 1.375em;
  padding-bottom: 0;
}

#blurb p strong.tag {
  color:#ffc600;
  text-transform:uppercase;
  display:block;
  font-size:28px;
  margin:20px auto 0.875em;
}

.guide {
  width:80%;
  max-width:1000px;
  margin:0px auto 0px;
  /*margin:30px auto 60px*/
}

.guide p {
  text-align:center;
  margin:0;
  padding:0;
  font-size:18px;
  font-family: 'Grotesque MT W01 Condensed';
  font-weight: bold;
  line-height:1;
  margin-bottom:8px;
}

.guide-btn {
  display:block;
  width:100%;
  color: #000;
  background: #ffc600;
  font-family: clarendon-urw-extra-wide, serif;
  font-weight: 700;
  font-size:16px;
  margin:0px auto 0px;
  /*margin-bottom:40px;*/
  text-align:center;
  padding:10px;
}

.guide-btn:hover {
  background:#fff;
  color:#000;
}

#keyart h2 {
font-family: clarendon-urw-extra-wide, serif;
font-weight: 700;
font-style: normal;
font-size:2vw;
line-height:1.2;
margin-top:20px;
margin-bottom:0px;
padding-bottom:0;
letter-spacing:normal;
color:#ffc600;
opacity:1;
}

#keyart h2 span {
  color:#fff;
}

.extra-leg {
  display:none;
}

#insta {
  width:80%;
  margin:50px auto 60px;
  max-width:1000px;
}

#insta h3 {
  text-align:center;
  text-transform:uppercase;
  margin:0 0 5px;
  padding:0;
  font-family: 'Grotesque MT W01 Condensed';
    font-weight: bold;
  font-size:200%;
}

#insta h3 a {
  margin-top:5px;
  display:block;
  font-family: 'Grotesque MT W01 Condensed';
    font-weight: bold;
}

#vid-block {
  width: 50%;
  max-width: 800px;
  margin: 20px auto 40px;
  border:1px solid rgba(255, 198, 0, 0.5);
}

#video {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding-bottom: 56.25%;
  height: 0;
 }

#video iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }


@media (min-width:768px) and (max-width:900px) {
  #keyart h2 {
    font-size:2.4vw;
  }

  #blurb p strong.tag {
    font-size:24px;
  }

  #blurb p {
    font-size:20px;
  }
}

@media (max-width:767px) {
  #main {
    width:100%;
    margin:0px auto 0;
  }

  #content {
    width:95%;
  }

  #blurb {
    width:95%;
  }

  #blurb p {
    color:#fff;
    font-size:16px;
  }

  .guide {
    width:95%;
  }

  .guide p {
    margin-bottom:8px;
    font-size:19px;
  }

  .guide-btn {
    font-size:21px;
  }

  #keyart h2 {
    font-size:4vw;
    margin-bottom:10px;
    margin-top:0;
  }

  #blurb h3 {
    display:none!important;
  }

  #blurb {
    margin-top:50px;
  }

  #blurb p strong.tag {
    font-size:18px;
    text-align:center;
  }

  #sm-wrap {
    background:#000;
    width:110%;
    margin-left:-5%;
    padding:7px 0 0;
  }

  .border-wrap {
    border-top:3px solid #ffc600;
    padding:0 5%;
    margin-bottom:-1px;
  }

  #blurb .hidden-xs {
    display:none;
  }

  #vid-block {
    width: 80%;
  }

}

@media (min-width:901px) and (max-width:1100px) {
  #keyart h2 {
    font-size:20px;
  }

  .short {
    display:none;
  }

  .extra-leg {
    display:block;
  }
}

@media (min-width:1200px) {
  #keyart h2 {
    font-size:24px;
  }
}

/*
 PARALLAX TEST
 ----------------------------------------------------------------------------*/
#keyart-parallax {
  min-height:100vh;
  width:80%;
  max-width:1200px;
  margin:0 auto;
  position:relative;
}

#intro {
  width:100%;
  height: 100vh;
  position: fixed;
  top: 80px;
  z-index:15;
}

#cutout {
  height: 100vh;
  position: fixed;
  width: 100%;
  top: 55px;
  left: 0;
  right:0;
  z-index:10;
  /*display: grid;
  place-items: center;*/
}

#art-base {
  height: 100vh;
  position: fixed;
  width: 100%;
  top: 55px;
  left: 0;
  right:0;
  z-index:9;
  transition: all .75s ease-out;
  margin:auto;
  background:#000;
  /*display: grid;
  place-items: center;*/
}

.black-fill {
  width:100%;
  height:100vh;
  background:#000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

#art-base.artZoom {
  opacity:0;
}

#art-trigger {
  position:absolute;
  right:0;
  top:11%;
}

#art-shift {
  position:absolute;
  right:0;
  top:40%;
}

#billing-show {
  position:absolute;
  right:0;
  top:55%;
}

#tagline-show {
  position:absolute;
  right:0;
  top:115%;
}

#unpin-div {
  position:absolute;
  right:0;
  top:6%;
}

#keyart {
  width:100%;
  max-width:1000px;
  margin:0px auto 55px;
  position:relative;
}

#main, #tickets {
  opacity:1;
  transition: all .25s ease-out;
}

#main.active, #tickets.active {
  opacity:1;
}

#keyart .wendell, #keyart .sharon {
  position:absolute;
  bottom:0;
  transition: all 1s ease-out;
}

/*.wendell {
  opacity:0;
  left:-200px;
}

.sharon {
  opacity:0;
  right:-200px;
}*/

.wendell {
  opacity:1;
  left:0;
}

.sharon {
  opacity:1;
  right:0;
}

#keyart h2 {
  opacity:0;
}

#keyart h2.active {
  opacity:1;
  transition: all 0.5s ease-out;
}

.xl {
  display:none;
}

.mid {
  display:none;
}

.tab {
  display:none;
}

@media (min-width:768px) and (max-width:1100px) {
  .norm {
    display:none;
  }

  .mid {
    display:block;
  }

}


@media (min-width:2000px) {

  .norm {
    display:none;
  }

  .xl {
    display:block;
  }

  #unpin-div {
    top:12%;
  }
}

@media (min-width:1600px) and (max-width:1999px) {
  .xl {
    display:block;
  }

  .norm {
    display:none;
  }
}

@media (min-width:2000px) and (min-height:1000px) {

  .norm {
    display:block;
  }

  .xl {
    display:none;
  }

  #unpin-div {
    top:10%;
  }
}



@media (max-width:767px) {
  .norm {
    display:none;
  }

  #keyart {
    width:100%;
    margin:10px auto 10px;
  }

  #intro, #cutout, #art-base {
    top:40px;
  }

  #unpin-div {
    position:absolute;
    right:0;
    top:12%;
  }

  #art-shift {
    top:35%;
  }
}

@media (min-width:1101px) and (max-width:1320px) and (min-height:800px) {
  .norm {
    display:none;
  }

  .mid {
    display:block;
  }
}

@media (min-width:768px) and (max-width:900px) and (min-height:750px) {
  .norm {
    display:none;
  }

  .mid {
    display:none;
  }

  .tab {
    display:block;
  }

  #unpin-div {
    top:7%;
  }
}

/*
 TICKETS SECTION
 ----------------------------------------------------------------------------*/

#tickets {
  max-width:1000px;
  margin:30px auto 50px;
  width:80%;
}

#tickets h4 {
  font-family: futura-pt-condensed, sans-serif;
  font-weight:bold;
  font-size:20px;
  width:80%;
  margin:0 auto 20px;
}

.cal {
  width:55%;
  float:right;
}

.info {
  width:40%;
  margin-right:5%;
  float:left;
  margin-top:5%;
}

.info h3 {
  color: #ffc600;
  margin:0;
  padding:0;
  font-size:140%;
  text-align:left;
}

.info p {
  line-height:1.1;
  font-size:20px;
}

.info p a {
  text-transform: uppercase;
  font-weight:700;
}

.info p a.white {
  color:#fff;
  text-transform: none;
  font-weight:400;
}

.google-maps {
    position: relative;
    padding-bottom: 35%;
    height: 0;
    overflow: hidden;
}

.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border:2px solid #000;
}

.map {
  width: 100%;
  margin: 2em auto 0;
}

#monthStart, #curMon {
  display:none;
}

@media (max-width:767px) {

  #tickets {
    margin-bottom:20px;
    width:95%;
  }

  #tickets h4 {
    width:90%;
  }

  .cal, .info {
    width:90%;
    float:none;
    margin-right:0;
    margin:0 auto;
  }

  .info {
    margin-top:2em;
  }

  .info h3, .info p {
    text-align:center;
  }

  #selected-show, .select-directions {
    background:#ffc600;
    color:#000;
    text-align:center;
        font-family: 'Grotesque MT W01 Condensed';
    padding-bottom:20px;
  }

  .select-directions {
    padding:20px 0;
    font-weight:normal;
    text-transform: uppercase;
    font-size:24px;
  }

  .perf-select-line {
    display:block;
    padding:20px 0 5px 0;
    text-transform:uppercase;
    font-size:18px;
  }

  .perf a {
    font-family: 'Grotesque MT W01 Condensed';
    font-weight:bold;
    font-size: 28px;
    color:#000;
    text-transform:uppercase;
  }

  .tix-button a {
    width: 100%;
    margin: 5px auto;
    padding: 15px;
    text-align: center;
    background:#ffc600;
    display: block;
    font-family: 'Grotesque MT W01 Condensed';
    font-weight:bold;
    font-size: 28px;
    color:#000;
  }

  .tix-button a:hover {
    background:#fff;
    color:#000;
    text-decoration:none;
  }

  .mbsc-sel-gr-whl {
    border-right:2px solid #ffc600;
    background:#fff;
}

  .mbsc-mobiscroll .mbsc-sc-whl-gr {
    padding:0em;
  max-width:700px!important;
  }


  .mbsc-mobiscroll .mbsc-sc-whl-w {
    margin:0;
    border-left:2px solid #ffc600;
    border-right:0px;
  }

  .mbsc-mobiscroll .mbsc-sc-whl-l {
    border:0px solid transparent;
    box-shadow:0px 11px 8px -10px rgba(0, 0, 0, .2),
         0px -11px 8px -10px rgba(0, 0, 0, .2);
  }

  .mbsc-mobiscroll .mbsc-sc-itm {
    color:#000;
    font-weight:500;
    font-size:25px;
  }

  .mbsc-mobiscroll.mbsc-no-touch .mbsc-sc-itm.mbsc-btn-e:hover, .mbsc-mobiscroll .mbsc-sc-itm:focus,
  .mbsc-mobiscroll.mbsc-no-touch .mbsc-sc-itm.mbsc-btn-e:hover, .mbsc-mobiscroll .mbsc-sc-itm:focus {
    background:transparent;
  }

  .mbsc-sc-whl-w.mbsc-comp:nth-of-type(2) {
    border-right:2px solid #ffc600;
  }

  .mbsc-sel-gr-whl {
    border-right:0;
  }

  .mbsc-sc-itm {
    font-family: 'Grotesque MT W01 Condensed';
  }

}

@media (max-width:350px) {
  #tickets h3.first {
    font-size:22px;
  }

  #tickets h3.first span {
    width:280px;
    padding:3px 0 3px;
  }

}

/*
 CAST
 -----------------------------------*/
#team {
  padding:40px 0 60px;
  width:80%;
  max-width:1000px;
  margin:0 auto;
}

#cast .container {
  width:95%;
  max-width:auto!important;
}

.cast-nav {
  margin:0 auto 1em;
}

#cast h2 {
  font-size:30px;
  text-align:center;
  color:#ffc600;
  font-weight:normal;
}

#cast h3 {
  color:#fff;
  margin-top:2em;
  letter-spacing:.05em;
  font-size:130%;
}

#cast-bios, #creative-bios {
	text-align: center;
  margin-bottom:1.5em;
}

#cast .container {
  margin-bottom:1em;
}

#creative-block, #cast-block {
  display:block;
}

#creative-block {
display:none;
}

#cast-block, #creative-block {
  margin:0 auto;
}

#bios-block {
  display:none;
}

.prod-deets {
  font-size:75%;
  text-align:center;
  font-family: 'Grotesque MT W01 Condensed';
  margin-top:0px;
}

.producers {
  text-align:center;
  margin-top:80px;
  font-size:112%;
}

.producers strong {
  font-size:110%;
  text-transform:uppercase;
}

.creative-link.active, .cast-link.active, .creative-link:hover, .cast-link:hover {
  color:#000;
  background:#ffc600;
}

.creative-link, .cast-link {
  color:#ffc600;
  text-transform:uppercase;
  font-family: clarendon-urw-extra-wide, serif;
  font-weight: 700;
  display:inline-block;
  text-align:center;
  border:2px solid #ffc600;
  width:49%;
  padding:10px 0;
}

.creative-link:hover, .cast-link:hover {
  text-decoration:none;
  color:#000;
  background:#ffc600;
}

.divide {
  font-size:80%;
  vertical-align: top;
}

.plus {
  display:inline-block;
}

.cast-member {
	position: relative;
	display: inline-block;
	padding: .5%;
	text-align: center;
	line-height: 1.2em;
	cursor: pointer;
	width: 25%;
	margin: 10px 0 0;
	vertical-align: top;
	color: #8c7477;
}



#creative-bios .cast-member {
  width:33%;
}

#creative-bios .cast-member.actor-4 {
  margin-left:37.5%;
}


.and {
  display:block;
  text-align:center;
  margin:15px auto 5px;
  font-size: 100%;
  color: #fff;
  line-height: 1;
  text-transform: uppercase;
  font-family: 'Grotesque MT W01 Condensed';
  font-weight: bold;
}

.cast-member.actor-6, .cast-member.actor-7, .cast-member.actor-8, .cast-member.actor-9, .cast-member.actor-10, .cast-member.actor-11, .cast-member.actor-5 {
  width:20%;
}

.cast-member.actor-29 {
  margin-top:30px;
  width:50%;
}

.cast-member:hover {
	color: #000;
  text-decoration: none;
}

.cast-member strong {
	display: block;
	text-transform: uppercase;
  font-weight: 800;
}

.cast-thumb {
	width: 100%;
	height: auto;
}

.cast-member img {
	width: 100%;
	height: auto;
	padding: 0px;
}

.cast-image {
	position: relative;
}

.cast-image img {
    width:100%;
    vertical-align:top;
}
.cast-image:before {
    content:'\A';
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(255, 198, 0, 0.3);
    opacity:1;
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
}
.cast-image:before {
    opacity:0;
}
.cast-member:hover .cast-image:before {
    opacity:1;
}

.cast-name {
	margin-top: .25em;
  font-size:125%;
  color:#ffc600;
  line-height:1;
  text-transform:uppercase;
  font-family: 'Grotesque MT W01 Condensed';
  font-weight: bold;
}

.cast-member.actor-29 .cast-name {
  font-size:170%;
}

.cast-role em, .cast-role, .castinfo h3 em {
	font-style: normal;
  font-size:85%;
  line-height:1.1;
  font-family: clarendon-urw-extra-wide, serif;
  font-weight: 700;
  color:#ffc600;
}

.cast-member.actor-29 .cast-role {
  font-size:115%;
}

.cast-member:hover .cast-name, .cast-member:hover .cast-role {
  color:#fff;
}

.cast-member.no-bio:hover .cast-name,
.cast-member.no-bio:hover .cast-role {
  color: #ffc600!important;
}

.cast-member.no-bio {
  cursor:initial!important;
  pointer-events: none;
}

.ensemble {
  font-family: "Gotham A", "Gotham B";
  padding-bottom:3em;
  margin-top:1.5em;
}

.ensemble-hed {
  margin-top:1.25em!important;
}

.ensemble .row {
  margin-bottom:2em;
}

.ensemble .cast-name {
  font-size:110%;
}

#creative-thumbs .cast-member {
  width:32%;
}

@media (max-width:768px) {

  #team {
    width:95%;
  }

  .cast-nav {
    width:100%;
  }

  .cast-member {
    width:50%;
    margin-bottom:1em;
  }

  #creative-bios .cast-member {
    width:45%;
  }

  #creative-thumbs .cast-member {
    width:45%;
  }

  #creative-bios .cast-member.actor-4 {
    margin-left:27.5%;
  }

  .ensemble .row {
    margin-bottom:0em;
  }

  .ensemble-member {
    margin-bottom:2em;
  }

  #cast-bios br {
    display:none;
  }

  #cast h2 {
    font-size:16px;
  }

  .cast-member.actor-6, .cast-member.actor-7, .cast-member.actor-8, .cast-member.actor-9, .cast-member.actor-10, .cast-member.actor-11, .cast-member.actor-5 {
    width:50%;
  }

  #creative-bios .cast-member.actor-29 {
      margin-top: 30px;
      width: 80%;
  }

  .prod-deets {
    font-size:90%;
    margin-top:60px;
    width:80%;
    margin:0px auto 0;
  }

  .producers {
    font-size:110%;
    margin-top:60px;
  }

}

@media (min-width:768px) and (max-width:991px) {
  .cast-role em, .cast-role, .castinfo h3 em {
    font-size:100%;
  }

  .cast-name {
    font-size:130%;
  }

  .cast-member {
    line-height:1em;
  }

  #cast-block, #creative-block {
    width:95%;
  }
}

/*
& SECTION
 ----------------------------------------------------------------------------*/
.btns-wrap {
  margin:30px 0;
}

.faq-link, .guide, .merch-link {
  width:28%;
  float:left;
  margin:0 2.5%;
}

 .faq-link p, .merch-link p {
   text-align:center;
   margin:0;
   padding:0;
   font-size:18px;
   font-family: 'Grotesque MT W01 Condensed';
   font-weight: bold;
   line-height:1;
   margin-bottom:8px;
   /*margin-top:40px;*/
 }


.faq-btn {
  display: block;
  width: 100%;
  color: #000;
  background: #ffc600;
  font-family: clarendon-urw-extra-wide, serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0px auto 0px;
  text-align: center;
  padding: 10px;
}

.faq-btn:hover {
  background:#fff;
  color:#000;
}


.faq a.back {
   font-size:140%;
   text-transform: uppercase;
   font-family: 'Grotesque MT W01 Condensed';
   margin:0px 0 50px;
   display:block;
 }

#faq-block {
  width:80%;
  max-width:1000px;
  margin:60px auto 40px;
}

#faq-block h1 {
  font-family: clarendon-urw-extra-wide, serif;
  font-weight: 700;
  font-size:45px;
  text-transform: uppercase;
}

#faq-block h3 {
  color:#ffc600;
  font-size:28px;
  border-top: 1px solid rgba(255,255,255,.25);
  padding-top:10px;
}

#faq-block h3:first-of-type {
  border-top:0px solid #000;
}

#faq-block p {
  text-align:center;
  font-size:25px;
}

#faq-block p.enjoy {
  margin-top:40px;
  font-size:40px;
}

@media (max-width:767px) {
  .faq-btn {
    font-size:21px;
  }

  #faq-block {
    width:95%;
  }
  #faq-block h1 {
    font-size:25px;
  }

  #faq-block h3 {
    font-size:25px;
  }

  .faq-link p {
    font-size:19px;
  }

  .faq-link, .guide, .merch-link {
    width:80%;
    float:none;
    margin:20px auto;
  }

}

@media (min-width:1000px) {
  .faq-link p, .guide p, .merch-link p {
    font-size:22px;
  }

  .guide-btn, .faq-btn, .merch-btn {
    font-size:19px;
  }
}

/*
 OPT-IN FORM SECTION
 ----------------------------------------------------------------------------*/
.signup-tag {
  margin:30px 0 5px;
  padding:0;
  color:#ffc600;
}

.optin {
  margin: 0 auto  20px!important;
  text-align: center;
  font-family:'Trade Gothic LT W05 Cond No-_1';
  width:500px;
}

.optin label {
  display: none;
  padding-bottom: .5em;
}

.optin input, .optin button {
  display: inline;
  font-size: 18px;
  border: 0;
  line-height: 1.25;
  padding: 4px 10px;
  font-family: futura-pt-condensed, sans-serif;
  text-transform:uppercase;
  text-align:center;
  height:35px;
}

.optin input {
  width:69%;
}

.optin button {
  background:#ffc600;
  color:#000;
  font-family:'Grotesque MT W01 Condensed';
  margin-left:-5px;
  width:30%;
  font-size:22px;
}

.optin button:hover {
  cursor:pointer;
  background:#fff;
  color:#000000;
}

.subscribe {
  display: block;
}

.subscribe input.error::-webkit-input-placeholder {
  font-weight:bold;
}

.subscribe input.error:-moz-placeholder { /* Firefox 18- */
  font-weight:bold;
}

.subscribe input.error::-moz-placeholder {  /* Firefox 19+ */
  font-weight:bold;
}

.subscribe input.error:-ms-input-placeholder {
  font-weight:bold;
}

.form-thanks {
  font-size:130%;
}

.form-thanks span {
  display:block;
  font-size:80%;
}

@media (max-width:767px) {

  .optin {
    width:300px;
  }

  .optin input, .optin button {
    display:block;
    margin:0 auto;
  }

  .optin input {
    width:100%;
    font-size:18px;
  }

  .optin button {
    width:100%;
    margin-top:-1px;
    font-size:22px;
    background:#ffc600;
    color:#000;
  }

  .optin button:hover {
    background:#fff;
  }

  .form-thanks {
    margin-top:10px;
  }
}


/*
 QUOTE ROTATION SECTION
 -----------------------------------------------------------------------------*/
 /*.quote-block {
   opacity:0;
 }*/

 .quote-block {
   opacity: 0;
   transition: all 0.5s ease-out;
   height:90px;
   margin-bottom:25px;
 }

 .quote-block.slick-initialized {
   opacity:1;
   height:auto;
 }

 .quote-block blockquote {
   font-family: clarendon-urw-extra-wide, serif;
   font-weight: 700;
   font-style: normal;
   font-size: 36px;
   line-height: 0.9;
   margin:0;
   padding:0;
   letter-spacing: normal;
   color: #ffc600;
   opacity: 1;
   text-transform: uppercase;
 }

 .quote-block blockquote.short-quo {
   margin-top:15px;
 }

 .quote-block blockquote.single {
   font-size:50px;
   margin-top:5px;
 }


 .quote-block cite {
   font-size: 20px;
    display: block;
    color: #fff;
    text-align:center;
    text-transform:uppercase;
    font-family: 'Grotesque MT W01 Condensed';
    font-weight: bold;
    margin-top:5px;
 }

 .quote-block blockquote:before {
     content: '\201c';
     position: absolute;
     margin-left: -20px;
 }

 .quote-block blockquote.single:before {
     content: '\201c';
     position: absolute;
     margin-left: -28px;
 }


 #quotes {
   width:80%;
   max-width:800px;
   margin:10px auto;
 }

ul#quotes, ul#quotes li {
  list-style: none;
  padding: 0;
  margin: 0;
}

#quotes > * {
    -webkit-transform: translateZ(0);
}

ul#quotes li {
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  display: none;
  padding: .5em;
}

#quotes li:first-child {
  position: relative;
  display: block;
}

#quotes blockquote {
    font-size: 22px;
    font-family: 'Grotesque MT W01 Condensed';
    font-weight: bold;
    color:#ffc600;
    line-height:1.1;
    padding:0;
    text-transform: uppercase;
}

#quotes blockquote.top {
  margin-bottom:20px;
  font-family: clarendon-urw-extra-wide, serif;
  font-weight: 700;
  font-size:22px;
}

#quotes blockquote.top strong {
  color:#fff;
  display:block;
  font-size:55px;
  font-family: 'Grotesque MT W01 Condensed';
  font-weight: bold;
  line-height:.9;
}

/*#quotes blockquote span {
  font-size:130%;
  display:block;
}*/

#quotes blockquote cite {
  font-size:75%;
  display:block;
  color:#fff;
  text-transform: none;
}

@media (min-width:1200px) {
  #quotes blockquote {
    font-size:22px;
  }
}

@media (max-width:767px) {
  #quotes blockquote {
    font-size:15px;
  }

  .quote-block blockquote.short-quo {
    font-size:15px;
    margin-top:0;
  }

  .quote-block blockquote {
    font-size:15px;
  }

  .quote-block cite.small {
    font-size:14px;
  }

  .quote-block blockquote.single {
    font-size:30px;
    margin-top:0;
  }

  .quote-block cite {
    font-size:12px;
  }

  #quotes {
    width:90%;
  }

  .quote-block blockquote:before {
      content: '\201c';
      position: absolute;
      margin-left: -9px;
  }

  .quote-block blockquote.single:before {
      content: '\201c';
      position: absolute;
      margin-left: -18px;
  }

  .quote-block {
    height:60px;
  }

  #quotes blockquote.top {
    font-size:15px;
  }

  #quotes blockquote.top strong {
    font-size:40px;
    line-height:.9;
  }


}

@media (min-width:768px) and (max-width:900px) {
  .quote-block blockquote {
    font-size:30px;
  }
}

/*
 GALLERY SECTION
 ----------------------------------------------------------------------------*/


#gallery-overlay {
  position: fixed;
  width: 100%; height: 100%;
  top: 0; left: 0;
  transform: translateX(-120%);
  transition: transform 0.5s ease;
  background: rgba(0,0,0,.8);
  z-index: 999999999;
}

.page-loaded .gallery-image {
    width: 100%;
    height: 0;
    display: block;
    padding-bottom: 66.66667%;
    cursor: pointer;
    background: #000;
}

#gallery-overlay {
  opacity: 0;
  transition: opacity 0.5s ease;
}

#gallery-overlay-close:after {
  position: absolute;
  top: .5em; right: .5em;
  content: "\00d7";
  font-size: 2em;
  cursor: pointer;
}

#gallery-overlay-inner {
  position: absolute;
  width: 100%; height: 0; padding-bottom: 56.25%;
  top: 42%; left: 50%;
  transform: translate(-50%,-50%);
}

.gallery-overlay-open #gallery-overlay {
  transform: translateX(0);
  opacity: 1;
}

#gallery .slick-slide {
  width: 100%;
  height: auto;
  position: relative;
  margin: 0 -20px;
  overflow: hidden;
}

.gallery-image {
  background-size:contain;
  clip-path: circle(46% at 50% 35%);
}

.gallery-image.adjust {
  clip-path: circle(36% at 50% 55%);
  margin-top:-25%;
}

#gallery-overlay .gallery-image {
  clip-path:none;
  width:80%!important;
  margin:0 auto;
}

#gallery-overlay .slick-slide {
  text-align:center;
}

#gallery-overlay .slick-slide img {
  margin:0 auto;
}

.gallery-wrapper {
  position: relative;
  width: 80%;
  max-width: 1000px;
  height: auto;
  margin:0 auto;
}

.slick-prev:before, .slick-next:before {
  color:#ffc600;
}

.slick-prev, .slick-next {
  top:33%;
}

#gallery-overlay-inner .slick-prev, #gallery-overlay-inner .slick-next {
  top:50%;
}

p.micetype {
  text-transform:uppercase;
  text-align:center;
  font-size:14px;
  position:relative;
  z-index:10;
  margin-top:0%;
  margin-bottom:20px;
}


@media (min-width: 768px) {
  #gallery-overlay-inner {
    width: 80%;
    padding-bottom: 44.25%;
  }

}

@media (min-width:1200px) {
  .gallery-wrapper {
    max-width:1200px;
  }
}

@media (min-width:600px){
  .gallery-wrapper {
  /*padding-bottom: 17%;*/
  height: auto;
  }
}

@media (max-width:767px) {
  .gallery-image {
    clip-path: circle(42% at 50% 31%);
  }

  .slick-prev, .slick-next {
    top: 28%;
  }

  p.micetype {
    margin-top:0%;
  }
}


/*
PRIVACY PAGES
 ----------------------------------------------------------------------------*/
#privacy h1 {
  padding-top:20px;
  text-transform:uppercase;
  margin-bottom:0;
  padding-bottom:0;
  font-weight:700;
  text-align:left;
}

#privacy h2 {
  font-size:160%;
  margin-top:35px;
  color:#fff;
  padding-bottom:0;
  font-weight:700;
  text-align:left;
}

#privacy h3 {
  font-size:120%;
  margin-top:35px;
  color:#fff;
  padding-bottom:0;
  font-weight:700;
  text-align:left;
}

#privacy a {
  font-weight:700;
}

#privacy a.back {
  font-size:140%;
  text-transform: uppercase;
  font-family: 'Grotesque MT W01 Condensed';
  margin:80px 0 20px;
  display:block;
}

#privacy ul {
  list-style-type:disc;
  margin-left:20px;
  margin-bottom:1em;
  text-align:left;
  font-size:120%;
  text-align:left;
  font-family: futura-pt-condensed, sans-serif;
}

#privacy li {
  padding:5px 0;
  line-height:1.4em;
}

#privacy p {
  font-size:120%;
  padding:0;
  margin:0 0 15px;
  text-align:left;
}

#privacy table td {
  border:1px solid #fff;
}

#privacy table {
  margin-bottom:2em;
}

#privacy tr td:first-of-type {
   width: 20%;
   padding: 10px;
   border: 1px solid #fff;
}

#privacy tr td:nth-of-type(2) {
   width: 30%;
   padding: 10px;
   border: 1px solid #fff;
}

#privacy table p {
 padding-bottom:0;
}

/*
 UPGRADE PAGE
 ----------------------------------------------------------------------------*/
#upgd_content {
}

#upgd_content .msgbox {
    width: 940px;
    margin: 20px auto;
    padding: 10px;
}

/* =============================================================================
 MEDIA QUERIES
 ========================================================================== */
/* Extra Small Devices */
@media (max-width: 767px) {
    #opt-in-form input {
        display: block;
        margin: 0 auto;
        margin-bottom: 5px;
    }
}

/* Small Devices */
@media (min-width: 768px) and (max-width: 991px) {
}

/* Medium Screens/Desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}

/* Large Screens/Desktops */
@media (min-width: 1200px) {
}