@import url('https://fonts.googleapis.com/css?family=Lato');

/*
 * 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: #3d3d3d;
  color:#fff;
  font-family: futura-pt-condensed, sans-serif;
  line-height: 1;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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: 21px;
  }
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  padding: 0 0 .5em;
  font-weight:700;
}

h1 { font-size: 280%; }
h2 { font-size: 220%; }
h3 { font-size: 170%; font-weight:400; }
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;
}

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: #fcd207; text-decoration: none; transition: all 0.4s ease; }
a:hover {
  color:#fff;
}

.yellow {
  color:#fcd207;
}

.ib {
  display:inline-block;
}

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

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

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

.ib { display: inline-block; }

.text-center { text-align: center !important; }

/*
 GLOBAL SECTION
 ----------------------------------------------------------------------------*/
#outerwrapper {
  min-height: 100%;
}

#content {
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  transition: opacity .5s;
}

.page-loaded #content {
  opacity: 1;
}

section {
  padding-top: 50px;
}

@media (max-width:767px) {
  section {
    padding-top:50px;
  }
}

/*
 HEADER SECTION
 ----------------------------------------------------------------------------*/
#header {
  line-height: .9;
  padding: 0 .2125em;
  font-size: 140%;
  position: fixed;
  width: 100%;
  text-align: center;
  height:50px;
  background:#2a2a2a;
  z-index:999;
  color:#fff;
  box-shadow:0 0 3px #000;
}

#btn-menu {
  display: block;
  position: absolute;
  left: 0; top: 0;
  line-height: .9;
  padding: .5em;
  position: absolute;
  z-index: 20;
}

#btn-menu:hover {
  color: #fff;
}

#btn-tickets {
  display: block;
  float:right;
  margin: 0;
  padding: .25em .75em;
  font-size: 140%;
  line-height: .9;
  background-color: #fcd207;
  color: #2a2a2a;
  font-weight:700;
}

#btn-tickets span,
.flip span {
  transition: all 0.4s ease;
  transform: scaleY(1);
  display:inline-block;
}

#btn-tickets:hover {
  background-color: #fff;
  color: #2a2a2a;
}

#btn-tickets:hover span,
.flip:hover span {
  transition: all 0.4s ease;
  transform: scaleY(-1);
  display:inline-block;
}

#header-social {
  font-size: 90%;
  line-height: .9;
  position:absolute;
  top:7px;
  right:10px;
}

.hed-logo {
  position:absolute;
  top:5px;
  left:10px;
  width:100px;
}

#btn-tickets {
  display: inline-block;
  position:absolute;
  right:0;
  top:0;
  font-size:36px;
}

@media (min-width:769px) {
  #header-social {
    display: block;
    position:absolute;
    top:7px;
    right:225px;
  }
}


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

.social-icons {
}



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

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

@media (max-width:767px) {
  .social-icons .visible-xs {
    display:inline-block!important;
  }
}

/*
 NAV SECTION
 ----------------------------------------------------------------------------*/
#nav {
  position:absolute;
  left:130px;
  top:0;
}

#nav a {
  display: inline-block;
  padding: .5em .4em;
  text-align: left;
  text-transform:uppercase;
  font-weight:700;
  color:#fff;
  transition: all 0.4s ease;
}

#nav a:hover,
#nav a.active {
  color:#fcd207;
}

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

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

@media (max-width:767px) {
  #nav {
    position:fixed;
    width:100%;
    bottom:0;
    left:0;
    top:auto;
    background:#fff;
    height:59px;
    z-index:100;
  }

  .social-bar {
    position:fixed;
    bottom:59px;
    background:#fcd207;
    height:50px;
    width:100%;
    left:0;
    z-index:100;
    box-shadow: 0 0 3px #666;
  }

  .social-bar .social-icons {
    text-align:right;
    margin-left:10px;
  }

  .social-bar a {
    color:#000;
    padding-top:13px;
  }

  .social-bar a:hover {
    color:#000;
  }

  .hashtag {
    color:#000;
    position:absolute;
    top:15px;
    left:10px;
    font-weight:700;
    font-size:115%;
  }

  #nav a {
    float:left;
    display:block;
    text-align:center;
    color:#000;
    width:25%;
    font-size:22px;
    padding:1em 0 1.1em;
    transition: all 0.4s ease;
    transform: scaleY(1);
    position:relative;
    z-index:8;
    border-left: 2px solid #fcd207;
  }

  #nav a.two-line {
    padding-top:.6em;
  }

  #nav a.active {
    color:#000;
    background:#fcd207;
  }

  #nav a:hover {
    color:#000;
    transition: all 0.4s ease;
    transform: scaleY(1);
    background:#fcd207;
  }

  #nav a#nav-team {
    border-left:0px;
  }

  #nav a#nav-tixbtn {
    width:40%;
    background:#fcd207;
    font-size:35px;
    height:75px;
    margin-top:-14px;
    box-shadow:0 0 4px #000;
    transition: all 0.4s ease;
    transform: scaleY(1);
    position:relative;
    z-index:10;
    padding:.35em 0;
  }

  #nav a#nav-tixbtn:hover {
    transition: all 0.4s ease;
    transform: scaleY(1);
    background:#fff;
  }

  #nav a#nav-tixbtn span, #nav a span {
    transition: all 0.4s ease;
    transform: scaleY(1);
    display:inline-block;
  }

  #nav a#nav-tixbtn:hover span, #nav a:hover span {
    transition: all 0.4s ease;
    transform: scaleY(-1);
  }
}

@media (max-width:400px) {
  #nav a#nav-tixbtn {
    font-size:28px;
  }

  #nav a#nav-tixbtn span {
    padding-top:6px;
  }

  #nav a {
    font-size:18px;
  }

  #nav a span {
    padding-top:4px;
  }

}

@media (min-width:768px) and (max-width:900px) {
  #nav a {
    padding: .75em 0.25em;
    font-size: 90%;
  }
}


/* SPOTIFY PLAYER */

#spotify iframe {
    position: absolute;
    top: 0;
    left: 0;
}

#spotify {
  position: fixed;
  top: 50px;
  left: -300px;
  width: 300px;
  height: 100%;
  border-right: 2px solid #fcd207;
  margin: 0;
  -webkit-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
  z-index:1000;
  background:#3d3d3d;
  z-index:150;
}

#spotify.open {
  left:0;
}

#spotify a.listen-button {
  display:block;
  top:10%;
  left:300px;
  position:absolute;
  width:60px;
  height:170px;
  background:#fcd207;
  font-size:44px;
  color:#000;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing: .05em;
  opacity:1;
  box-shadow: 0 0 3px #666;
}

#spotify a.listen-button:hover {
  background:#fff;
}

#spotify a.listen-button span {
  position: absolute;
  top: 16px;
  left: 48px;
  display:block;
  transform-origin: 0 0;
  transform: rotate(90deg);
}

#spotify a.listen-button span i {
  position: absolute;
  top: 6px;
  font-size: 23px;
  left: 115px;
}

a.btm-listen-button {
  display:block;
  bottom:0;
  left:0px;
  width:180px;
  height:50px;
  background:#fcd207;
  font-size:40px;
  color:#000;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing: .05em;
  opacity:1;
  z-index:200;
  position:absolute;
}

a.btm-listen-button:hover {

}

a.btm-listen-button span {
  position: absolute;
  top: 8px;
  left: 22px;
  display:block;
}

a.btm-listen-button span i {
  font-size: 20px;
  position: absolute;
  top:8px;
  left:110px;
}

#music-links {
  position:absolute;
  top:350px;
  width:100%;
}

#music-links h3 {
  background:#657690;
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
  font-size:26px;
  text-align:center;
  width:100%;
  padding:1em 0;
}

#music-links h4 {
  margin-top:1em;
  text-transform:uppercase;
}

#music-links a {
  display:inline-block;
  margin:0 10px;
}

.build-the-beat #spotify {
  display:none;
}

@media (min-width:768px) and (max-width:900px) {
  #spotify a.listen-button {
    display:block;
    top:14%;
    left:300px;
    width:40px;
    height:115px;
    font-size:30px;
    color:#000;
  }

  #spotify a.listen-button:hover {

  }

  #spotify a.listen-button span {
    position: absolute;
    top: 10px;
    left: 33px;
    display:block;
    transform-origin: 0 0;
    transform: rotate(90deg);
  }

  #spotify a.listen-button span i {
    position:absolute;
    top: 6px;
    font-size: 15px;
    left: 79px;
  }
}

@media (max-width:767px) {
  #spotify {
    position: fixed;
    top:120%;
    left: 0px;
    width: 100%;
    height: 100%;
    border-right: 0px solid #fcd207;
    margin: 0;
    -webkit-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
    z-index:1000;
    background:#3d3d3d;
    opacity:1;
    z-index:90;
  }

  #spotify.open {
    top:50px;
  }

  #spotify iframe {
    height:250px;
    width:100%;
  }

  #music-links {
    top:250px;
  }

  #spotify a.listen-button {
    display:block;
    top:39%;
    left:300px;
    width:40px;
    height:115px;
    font-size:30px;
    color:#000;
  }

  #spotify a.listen-button:hover {

  }

  #spotify a.listen-button span {
    position: absolute;
    top: 10px;
    left: 33px;
    display:block;
    transform-origin: 0 0;
    transform: rotate(90deg);
  }

  #spotify a.listen-button span i {
    position:absolute;
    top: 6px;
    font-size: 15px;
    left: 79px;
  }

  #music-links a {
    font-size:30px;
    margin:0 15px;
  }
}

@media (max-height:715px) {
  #spotify iframe {
    height:200px;
  }

  #music-links {
    top:200px;
  }
}

@media (max-height:580px) {
  #spotify iframe {
    height:80px;
  }

  #music-links {
    top:80px;
  }
}

/*
 FOOTER SECTION
 ----------------------------------------------------------------------------*/
#footer {
  background:#000;
  padding: 3em 2em 1em;
  font-size: 100%;
  text-align: center;
  color:#fff;
  text-transform:uppercase;
  line-height:1em;
}

#footer-copyright {
  line-height: 1.1em;
}

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

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

#footer a {
  color:#fff;
}

#footer a:hover {
  text-decoration:underline;
}

.icon-sub  {
  display:none!important;
}

.juj-logo {
  display:inline-block;
  width:15px;
  margin-right:5px;
  margin-top:-2px;
}

#footer .juj-logo {
  margin-right:2px;
}

@media (max-width:767px) {
  #footer {
    padding-bottom:130px;
    font-size:110%;
  }

  .icon-sub {
    display:inline-block!important;
  }
}

/*
 KEYART SECTION
 ----------------------------------------------------------------------------*/
#keyart {
  position:relative;
}

body.home, body.home-new {
  background:#657690;
}

video {
  height: 100%;
  width: 100%;
  position:relative;
  z-index:1;
}

.sound-btn {
  width:50px;
  height:50px;
  color:#fff;
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  display:block;
  font-size:190%;
}

.replay-btn {
  position:absolute;
  top:55px;
  right:60px;
  color:#fff;
  z-index:2;
  display:block;
  font-size:150%;
}

.sound-btn i {
  position:absolute;
  top:0;
  left:0;
}

.replay-btn i {
  position:absolute;
  top:5px;
  left:0;
}

.sound-btn:hover, .replay-btn:hover {
  cursor:pointer;
  color:#fcd207;
}

.logo {
  position:absolute;
  bottom:7%;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  z-index:3;
}

.ensemble {
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}

.tagline {
  position:absolute;
  top:4%;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  z-index:3;
  max-width:1200px;
}

.tagline h2 {
  text-align:center;
  font-size:270%;
  font-weight:800;
  color:#fff;
  text-shadow:0 0 4px #000000;
}

.tagline h2.only {
  font-size:150%;
  color:#fcd207;
}

.bg-gif {
  display:none;
}

.extra-sm-br {
  display:none;
}

@media (min-width:768px) and (max-width:900px) {
  .sound-btn {
    width:40px;
    height:40px;
    color:#fff;
  }

  .replay-btn {
    position:absolute;
    top:50px;
    right:50px;
    color:#fff;
    z-index:2;
    display:block;
    font-size:150%;
  }
}

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

  .sound-btn, .replay-btn {
    display:none;
  }

  .bg-gif {
    display:block;
  }

  .logo {
    bottom:auto;
    top:2.5%;
    max-width:90%;
  }

  .tagline {
    top:1%;
  }

  .hero-sm {
    margin-top:-70px;
  }
}

@media (max-width:767px) {
  .tagline h2 {
    font-size:140%;
    font-family: futura-pt, sans-serif;
    font-weight: 800;
    font-style: normal;
  }

  .tagline h2.only {
    font-size:160%;
    font-family: futura-pt-condensed, sans-serif;
    font-weight:700;
  }
}

@media (max-width:500px) {
  .tagline h2 {
    font-size:145%;
  }

  .tagline h2.only {
    font-size:135%;
  }

  .logo {
    top:4.5%;
  }

  .extra-sm-br {
    display:block;
  }
}

@media (max-width:350px) {
  .tagline h2.only {
    font-size:105%;
  }
}

@media (min-width:1200px) {
  .tagline h2 {
    font-size:60px;
  }

  .tagline h2.only {
    font-size:34px;
  }
}

@media (min-width:767px) and (max-width:991px) {
  .tagline {
    top:2%;
  }
}

/*
 ABOUT SECTION
 ----------------------------------------------------------------------------*/
.bway-info {
  text-align:center;
  padding:4em 0 2.5em;
}

.boston-info {
  padding:0em 0 2em;
}

.bway-info h2, .boston-info h2 {
  font-size:175%;
}

.bway-info h3, .boston-info h3 {
  font-size:140%;
  color:#fcd207;
  font-weight:400;
}

.boston-info.groups-info h3 {
  color:#ffffff;
}

.bway-info h2, .bway-info h3, .boston-info h2, .boston-info h3 {
  text-align:center;
  padding:0;
  margin:0;
}

.bway-info h2, .boston-info h2 {
  line-height:.8em;
}

.bway-info h3, .boston-info h3 {
  line-height:.9em;
  margin-top:5px;
}

.boston-info h3 {
  margin-bottom:5px;
}

.boston {
  max-width:50%;
  margin:0 auto;
}

.groups-info {
  padding-bottom:2em;
}

@media (min-width:768px) {
  #groups-phone {
    color: #ffffff;
  }
}

.body-btns {
  display:block;
  width:60%;
  background:#fcd207;
  color:#2a2a2a;
  margin:10px auto 0;
  font-weight:700;
  font-size:130%;
  padding:.25em;
}

.body-btns:hover {
  background:#fff;
  color:#2a2a2a;
}

.body-btns span {
  transition: all 0.4s ease;
  transform: scaleY(1);
  display:inline-block;
}

.body-btns:hover span {
  transition: all 0.4s ease;
  transform: scaleY(-1);
  display:inline-block;
}

#blurb {
  padding:1em 0 1em;
}

.bway-return #blurb {
  padding-top:2em;
}

#blurb p {
  color:#fff;
  font-size:125%;
  line-height:1.3em;
  padding:0 0 1.2em;
  text-align:center;
}

#blurb strong.headline {
  font-size:120%;
}

.theater-logo {
  max-width:140px;
  height:auto;
  display:block;
  margin:0 auto;
}

.boston-info .theater-logo {
  margin:-.5em auto;
}

.david-btn {
  display:inline-block;
  background:#fcd207;
  color:#2a2a2a;
  margin:40px auto 5px;
  font-weight:700;
  font-size:130%;
  padding:.25em 1.5em;
  text-transform:uppercase;
}

.david-btn:hover {
  background:#fff;
  color:#2a2a2a;
}

.david-btn span {
  transition: all 0.4s ease;
  transform: scaleY(1);
  display:inline-block;
}

.david-btn:hover span {
  transition: all 0.4s ease;
  transform: scaleY(-1);
  display:inline-block;
}

@media (max-width:767px) {
  #blurb p {
    font-size:135%;
  }

  .david-btn {
    font-size:135%;
  }
}

/*
 TICKETS SECTION
 ----------------------------------------------------------------------------*/
#tickets {
    padding-top:100px;
    position:relative;
}

/*.tickets h1 {
  opacity:.3;
  font-size:105px;
  position:absolute;
  top: 65px;
  left: 88px;
  transform-origin: top left;
  transform: rotate(450deg);
  padding:0;
  margin:0;
}*/

.tickets h1 {
  font-size: 108px;
  font-weight: bold;
  padding-bottom: .325em;
  opacity: .3;
}

#calendar-block > h3 {
  font-weight:bold;
  color:#fcd207;
}

@media (min-width:768px) {
  .tickets h1 {
    margin-top: -68px;
  }
}

h2.bar {
  font-size:160%;
  margin-bottom:1em;
}

h2.bar span {
  text-transform:uppercase;
  font-size:85%;
  color:#fcd207;
}

.info-block h3 {
  text-transform:uppercase;
  color:#fcd207;
  font-weight:700;
  text-align:left;
  font-size:140%;
  margin-bottom:0;
  padding-bottom:0;
}

.info-block p {
  font-size:120%;
  line-height:1.1em;
}

.info-btn {
  display:block;
  width:100%;
  background:#fcd207;
  color:#2a2a2a;
  margin:0px auto 35px;
  font-weight:700;
  font-size:180%;
  padding:.25em;
}

.info-btn:hover {
  background:#fff;
  color:#2a2a2a;
}

.info-btn span {
  transition: all 0.4s ease;
  transform: scaleY(1);
  display:inline-block;
}

.info-btn:hover span {
  transition: all 0.4s ease;
  transform: scaleY(-1);
  display:inline-block;
}

.info-logo {
  display:inline-block;
  width:110px;
}

.theater-link {
  color:#fff;
}

.google-maps {
    position: relative;
    padding-bottom: 40%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
    margin:1em auto;
}
.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:1px solid #fff;
}

.todaytix {
  display:block;
  margin-top:10px;
  max-width:40%;
  height:auto;
}

@media (max-width:767px) {
  .tickets h1 {
    position:relative;
    top:auto;
    left:auto;
    transform: rotate(0deg);
    text-align:center;
    font-size:70px;
    padding-top:38px;
    margin-bottom:.25em;
  }

  #tickets {
    padding-top:0;
  }

  .info-block h3 {
    font-size:160%;
  }

  .info-block p {
    font-size:140%;
  }

  .info-btn {
    margin-bottom:20px;
  }

  .todaytix {
    margin:10px auto;
    max-width:30%;
  }

}

@media (min-width:768px) and (max-width:900px) {
  .todaytix {
    max-width:50%;
  }
}


/*
 CALENDAR
 ----------------------------------------------------------------------------*/

.month {
  width: 100%;
  padding: 0;
  z-index: 17;
  margin: 0 auto 1.5em;
  display:none;
  position:relative;
}

.month.active {
  display:block;
}

.month.active .day-wrapper {
  display:block;
}

.month h3 {
  margin-bottom: 0;
  position: relative;
  margin: 0;
  font-weight: bold;
  padding: .5em;
  text-transform: uppercase;
  letter-spacing: .025em;
  z-index:30;
  background:#5d6e8c;
}

.day-wrapper {
  display: none;
  opacity: 0;
  transition: opacity .8s;
}

.month.active .month-arrow{
  transform: rotate(180deg);
}

.cal-next,
.cal-prev {
	position: absolute!important;
	top: 16px;
	cursor: pointer;
	padding: 0 .5em;
  font-size:130%!important;
  font-weight:bold;
  z-index:40;
  font-family:"Gotham SSm A","Gotham SSm B",Helvetica,Arial,sans-serif;
  display:none!important;
}

.hed-day {
	display:none;
}

.hed {
	position:relative;
}

.cal-next {
	right: 0%;
}

.cal-prev {
	left: 0%;
	display: none;
}

.February .cal-prev,, .April .cal-next,  .March .cal-prev {
  display:none!important;
}


.month.active .day-wrapper {
  opacity: 1;
}

.month > div {
    position: relative;
}

.best::before {
  color:#fff;
  content:"\2022";
  position:absolute;
  font-size:130%;
  left:-0%;
}

.david::before {
  color:#fff;
  content:"\2605";
  position:absolute;
  font-size:60%;
  left:7%;
}

.avail-line {
  font-size: 110%;
  font-weight: 600;
  margin-top:0em;
  margin-bottom:5px;
}

.avail-line.david-line {
  margin-top:0em;
}

.avail-dot {
  font-size:140%;
  display:inline-block;
  vertical-align:text-bottom;
}

.avail-star {
  font-size:60%;
  display:inline-block;
  vertical-align:middle;
}


.month > div > div {
    display: inline-block;
    width: 14.27% !important;
    min-height: 6.125em !important;
    vertical-align: top;
    border:1px solid #5d6e8c;
    border-right:0px;
    border-top:0px;
}

.month > div > div:nth-child(7n) {
    border-right:1px solid #5d6e8c;
}

.month .date, .month .day {
    font-weight: bold;
    min-height: 1.25em !important;
    background: none !important;
    text-transform: uppercase;
    color: #fff;
}

.month .date {
    text-align: right;
    padding-right: .325em;
    padding-bottom:0;
    margin-bottom: 0;
}

.month a:not(.month-arrow) {
    font-size: 125%;
    display: block;
    line-height: 1em;
    padding: .2em 0;
    margin: 0 !important;
    font-weight: 600;
    position:relative;
}

.month a:hover, .month a:active {
  text-decoration: none;
}

.month > div > div.off_set {
    background: #555555 !important;
}

.day.noshow {
  min-height:1.5em!important;
  padding-top:.25em;
}


.tix-pics {
  margin-top:2em;
}

.tix-pics {
    position: relative;
    width: 100%;
}

.tix-pics > div {
    position: absolute;
    text-align:center;
    width:100%;
}

.preload {
  width:90px;
  opacity:.5;
  margin:20px 0;
}


  #tix-info h3.lobby {
    color:#fff;
    font-weight:700;
    text-align:left;
    font-size:150%;
    margin-bottom:10px;
  }

@media (max-width:767px) {
    .cal-next,
    .cal-prev {
      font-size:150%!important;
      top:9px;
    }

  .month > div {
      font-size: 75%;
  }

  #calendar {
    padding:0;
  }

  #tickets .row {
    padding:0em;
  }

  #tix-info {
    margin-top:2em;
  }


  .month h3 {
    font-size:150%;
  }

  .info-block {
    padding:10px 0px 5px;
    text-align:center;
    margin-bottom:10px;
  }

  .info-block h3 {
    margin-bottom:3px;
    padding:0;
    text-align:center;
  }

  .info-block p {
    text-align:center;
    padding-bottom:0;
  }

  .info-block .info-btn {
    margin-top:10px;
  }

  #map-faq {
      margin-top:30px;
  }

  #faq-block {
    margin-top:30px;
  }

  .month > div > div {
    min-height:8.125em!important;
  }

  .month a:not(.month-arrow) {
    font-size:160%;
  }


    #tix-info h3.lobby {
      text-align:center;
      font-size:165%;
    }

    .best::before {
      font-size:100%;
    }

    .david::before {
      font-size:80%;
      left:3%;
    }

}

@media (min-width:768px) and (max-width:800px) {
  .best::before {
    left:-2%;
  }

  .david::before {
    left:-2%;
  }
}

@media (min-width:801px) and (max-width:991px) {
  .best::before {
    left:-9%;
  }

  .david::before {
    left:2%;
  }
}

@media (min-width:1200px) {
  .best::before {
    left:0%;
  }

  .david::before {
    left:8%;
  }
}

@media (max-width:400px) {
  .best::before {
    font-size:100%;
  }
  .david::before {
    font-size:60%;
  }
  .month a:not(.month-arrow) {
    font-size: 135%;
  }
}

/*
 FAQs SECTION
 ----------------------------------------------------------------------------*/

.faq {
  margin-bottom:3em;
}

#faq-block h3 {
  font-size: 180%;
  text-transform:uppercase;
  font-weight:700;
  text-align:left;
  margin-top:1em;
}


#faq-block .col-sm-6 {
  padding:0;
}

#faq-block .col-sm-6.faq-right {
  padding-left:1.5em;
}

.faq-item:before {
  content: "+";
  display: block;
  position: absolute;
  top: 0;
  left:0;
  color:#fcd207;
  font-size:110%;
}

.faq-item {
  position: relative;
  padding-left:20px;
  font-size:125%;
  padding:0 0 0 20px;
  margin:.75em 0;
  line-height:1.3em;
  text-align:left;
}

.faq-item:hover {
  cursor:pointer;
}

.faq h2 {
  font-size:150%;
  font-weight:bold;
  margin:1.5em 0 0;
  padding:0;
}

.answer {
  display:none;
  margin-top:10px;
  margin-left:0px;
  border-top:1px solid #fcd207;
  padding:.25em 0;
}

.question {
  display:block;
}

.faq-item.active .answer {
  display:block;
}

.faq-item.active:before {
  content: "-";
  display: block;
  position: absolute;
  top: 0;
  left:0;
  color:#fcd207;
  font-size:180%;
}

@media (max-width:767px) {
  .faq {
    padding:0 1em;
  }

  .faq-item {
    font-size:145%;
  }

  #faq-block .col-sm-6.faq-right {
    padding-left:0em;
  }
}

/*
 CAST SECTION
 ----------------------------------------------------------------------------*/

body.cast {
  background:url('../_img/team-bg.jpg') no-repeat top center;
  background-size:cover;
}

 #cast {
   min-height:100vh;
 }

 /*.cast h1 {
   opacity:.3;
   font-size:105px;
   position:absolute;
   top: 65px;
   left: 88px;
   transform-origin: top left;
   transform: rotate(450deg);
   padding:0;
   margin:0;
   z-index: 1;
 }*/

 .cast h1 {
   font-size: 108px;
   font-weight: bold;
   padding-bottom: .325em;
   opacity: .3;
 }

 @media (min-width:768px) {
   .cast h1 {
     margin-top: -18px;
   }
 }


#cast .container {
  margin-bottom:0em;
  position:relative;
  z-index:2;
}

#creative-block {
  display:none;
}

#cast-block {
  display:block;
  margin-bottom:2em;
}

#cast h2 {
    text-transform:uppercase;
    font-size:250%;
    margin-top:.75em;
    padding-bottom:.5;
}

.creative-link.active, .cast-link.active, .creative-link:hover, .cast-link:hover {
  color:#fcd207;
  transition: all 0.4s ease;
  display:inline-block;
}

.creative-link, .cast-link {
  color:#fff;
  transition: all 0.4s ease;
  display:inline-block;
}

#cast-bios, #creative-bios {
  max-width: 900px;
  margin: 0em auto;
}

.team-member {
  display: inline-block;
  width: 23%;
  margin:1em .25em 2em;
  cursor: pointer;
  vertical-align: top;
}

#cast-bios {
  text-align: center;
}

#creative-bios {
  text-align: center;
}

.cast-photo img {
  max-width: 100%;
  height: auto;
}

.cast-name {
  font-weight: bold;
  color: #fcd207;
  text-transform:uppercase;
  font-size: 145%;
  padding-bottom: .05em;
  margin-top:10px;
  text-shadow:0 0 6px #000;
}

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

#theater-bio .cast-name {
  display:none;
}

#theater-bio .cast-photo {
  border:1px solid #fcd207;
}

#no-pic.team-member {
  width:26%;
}

.cast-role {
  color: #fff;
  line-height:1.1em;
  text-shadow:0 0 6px #000;
  font-size:120%;
}

.cast-bio {
  display: none;
}



#overlay-inner .team-member {
  width:100%;
  margin:0 auto;
}

#overlay-inner .cast-photo {
  max-width:225px!important;
  float:right;
  margin:20px;
}

#overlay-inner .cast-bio {
  display:block!important;
  font-size:110%;
}

#overlay-inner .cast-bio p {
    line-height:1.1em;
    margin:0;
    padding:0 0 .75em;
}

#overlay-inner .cast-role {
  text-align:left;
  font-size:170%;
  color:#fcd207;
  font-weight:bold;
  text-shadow: 0 0 0 #000;
  text-transform:uppercase;
  margin-bottom:10px;
}

#overlay-inner .space {
  display:none;
}

.top-name, .btm-name {
  position:absolute;
  text-transform:uppercase;
  font-weight:700;
  font-size:870%;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  opacity:.2;
}

.top-name {
  top:-80px;
}

.btm-name {
  bottom:-90px;
}

.bio-content {
  padding:5em 0 0;
  max-width:90%;
  margin:0 auto;
}

.bio-start {
  text-transform:uppercase;
}

#overlay-inner .bio-content .cast-name {
  text-shadow:0 0 0 #000;
  font-size:195%;
  text-align:left;
  font-weight:800;
}

.top-name .last, .btm-name .first {
  transform: scaleY(-1);
  display:inline-block;
  color:#fcd207;
}

html.overlay-open {
  overflow:hidden;
}

.bio-static {
  display:none;
  position:absolute;
  top:0;
  left:0;
  z-index:10;
}

#standby .bio-static, .overlay .show-pic {
  display:block;
}

#standby video, .hide-vid {
  display:none;
  opacity:0;
}


.cast-photo {
  position:relative;
}

.cast-photo video {
  position:relative;
  z-index:9;
}

.cast-photo:hover .bio-static {
  display:block;
}

.top-name.actor-21 {
  font-size:690%;
  top:-50px;
}

.top-name.actor-18 {
  font-size:480%;
  top:-30px;
}

@media (min-width:767px) and (max-width:950px) {
  .top-name.actor-1, .top-name.actor-2, .top-name.actor-3, .top-name.actor-6, .top-name.actor-7,
  .top-name.actor-8, .top-name.actor-9, .top-name.actor-11,
  .top-name.actor-23, .top-name.actor-22, .top-name.actor-21, .top-name.actor-19, .top-name.actor-17,
  .top-name.actor-16, .top-name.actor-12
   {
    font-size:605%;
    top:-40px;
  }

  .top-name.actor-18 {
    font-size: 400%;
    top: -20px;
  }
}

@media (min-width:951px) and (max-width:1195px) {
  .top-name.actor-1, .top-name.actor-2, .top-name.actor-3, .top-name.actor-6, .top-name.actor-7,
  .top-name.actor-8, .top-name.actor-9, .top-name.actor-11,
  .top-name.actor-23, .top-name.actor-22, .top-name.actor-21, .top-name.actor-19, .top-name.actor-17,
  .top-name.actor-16, .top-name.actor-12
   {
    font-size:605%;
    top:-40px;
  }

  .top-name.actor-18 {
    font-size: 400%;
    top: -20px;
  }
}



@media (max-width:767px) {
  .cast h1 {
    position:relative;
    top:auto;
    left:auto;
    transform: rotate(0deg);
    text-align:center;
    font-size:100px;
    padding-top:33px;
    margin-bottom:0em;
  }

  #cast h2 {
    margin-top:.5em;
  }

  #overlay-inner .cast-photo {
    max-width:200px!important;
  }

  #cast {
    padding-top:0;
  }

  /*.top-name, .btm-name {
    font-size:570%;
  }

  .top-name.actor-1, .top-name.actor-5, .top-name.actor-6, .top-name.actor-7, .top-name.actor-8 {
    font-size:425%;
  }

  .top-name {
    top:-70px;
  }

  .top-name.actor-1, .top-name.actor-5, .top-name.actor-6, .top-name.actor-7, .top-name.actor-8 {
    top:-62px;
  }*/

  .bio-content {
    padding-top:2em;
    padding-bottom:2em;
  }

  .btm-name {
    display:none;
  }

  #overlay-inner .cast-photo {
    float:none;
    max-width:135px;
    margin:0 auto 2em;
  }

  #overlay-inner .cast-bio p {
      font-size:120%;
  }

  /*#overlay-inner .actor-7 .cast-role, #overlay-inner .actor-8 .cast-role {
    display:none;
  }*/

  .bio-static {
    position:relative;
    display:block;
  }

  .cast-photo video {
    display:none;
  }

  .team-member {
    width:33%;
  }

  #no-pic.team-member {
    width:33%;
  }

}

@media (max-height:850px) {
  .btm-name {
    display:none;
  }
}

@media (max-width:767px) {
  .top-name {
    top:-55px;
  }

  .top-name, .btm-name {
    font-size:360%!important;
    line-height:1em;
    opacity:.2;
  }

  .top-name.actor-21 {
    font-size:340%!important;
  }

  .top-name.actor-18 {
    font-size:240%!important;
    top:-48px;
  }
}

@media (max-width:480px) {
  .top-name, .btm-name {
    font-size:310%!important;
  }

  .top-name.actor-21 {
    font-size:290%!important;
  }

  .top-name.actor-18 {
    font-size:190%!important;
    top:-48px;
  }
}

/*
REVIEWS SECTION
 ----------------------------------------------------------------------------*/

 .clearfix::after {
 	display: block;
 	content: "";
 	visibility: hidden;
 	clear: both;
 	height: 0;
 }

 body.reviews, body.reviews2 {
   background:#61759d;
 }

 /*.reviews h1 {
   opacity:.3;
   font-size: 105px;
   position: fixed;
   top: 65px;
   left: 88px;
   transform-origin: top left;
   transform: rotate(450deg);
   padding:0;
   margin:0;
   z-index: 1;
 }*/

 .reviews h1, .reviews2 h1 {
   font-size: 108px;
   font-weight: bold;
   padding-bottom: .325em;
   opacity: .3;
 }

 @media (min-width:768px) {
   .reviews h1, .reviews2 h1 {
     margin-top: -53px;
   }
 }

 #review-block {
   margin-left:4%;
 }

#one, #two {
  width:50%;
  float:left;
}

#one {
  padding-top:35px;
}

.single-review {
  font-weight:700;
  font-size:130%;
  text-align:center;
  width:64%;
  margin:0 auto 40px;
  position:relative;
}

.single-review:last-of-type {
  margin-bottom:20px;
}

.spacer {
  height:200px;
}

.single-review p {
    padding:0;
    line-height:1;
    text-align:center;
}

.single-review cite {
  color:#fcd207;
  font-size:65%;
  font-style: italic;
  display:block;
  text-transform:uppercase;
  margin-top:3px;
}

cite a {
  text-decoration: underline;
}

.single-review .stars {
  font-size:150%;
  display:block;
  margin-bottom:5px;
}

#two img {
  margin-bottom:5px;
}

#one img {
  display:none;
}

.extra-pic {
  display:none;
}

.review-nyt {
  display:block!important;
  position:absolute;
  top:0;
  right:-20%;
  width:45px;
}

/**
	Columns
*/

.col-one,
.col-two {
	position: relative;
	float: left;
	box-sizing: border-box;
}

.col-one {
	width: 50%;
	padding: 0px 0% 0px 0%;
}

.col-two {
	width: 50%;
	padding: 0px 0 0px 0%;
}

@media (min-width:1200px) {
  .review-nyt {
    width:65px;
  }
}

@media only screen and (max-width : 768px) {
	.col-one { width: 45%; padding-left: 0%; padding-bottom: 0; }
	.col-two { width: 50%; }
}


@media only screen and (max-width : 480px) {
	.col-one,
	.col-two {
		float: none;
		width: 100%;
		padding: 84px 0% 0;
	}
	.sidebar-logo, .col-two  {display: none; }
}

@media (min-width:768px) and (max-width:991px) {
  .spacer {
    height:100px;
  }

  .extra-pic {
    display:block;
  }
}

 @media (max-width:767px) {
   .reviews h1 {
     position:relative;
     top:-50px;
     left:auto;
     transform: rotate(0deg);
     text-align:center;
     font-size:90px;
     padding-top:33px;
     margin-bottom:0em;
   }

   #two {
     display:none;
   }

   #one {
     width:100%;
     margin:0;
     float:none;
     padding-right:0;
     padding-top:0;
   }

   #one img {
     display:block;
     margin-bottom:40px;
   }

   #one img:last-of-type {
     margin-bottom:0px;
   }

   #review-block {
     margin-left:0;
   }

   .single-review {
     width:80%;
     font-size:150%;
   }

   .review-nyt {
     display: block!important;
      position: absolute;
      top: auto;
      right: 0%;
      width: 45px;
      bottom: -30px;
   }
 }

 /*
 #MYAMERICANUTOPIA SECTION
  ----------------------------------------------------------------------------*/
  .my-au h1  {
    opacity:.3;
    font-size: 65px;
    position: fixed;
    top: 58px;
    left: 54px;
    transform-origin: top left;
    transform: rotate(450deg);
    padding:0;
    margin:0;
    z-index: 1;
  }

  #my-au h2, #build-the-beat h2 {
    line-height:.9em;
    margin-top:1em;
    font-size:210%;
  }

  #my-au h3, #build-the-beat h3 {
    font-size:200%;
  }

  .gif-grid {
    width:85%;
    margin:0em auto 3em;
    max-width:1200px;
  }

  .grid-block {
    background:#fcd207;
    color:#fff;
    border:7px solid #3d3d3d;
    padding:0;
    position:relative;
    overflow:hidden;
  }

  .top-quo {
    color:#fff;
    position:absolute;
    top: 0px;
    left: 10px;
    font-size: 470%;
    font-weight:700;
    display:block;
  }

  .btm-quo {
    color:#fff;
    position:absolute;
    bottom: -30px;
    right: 10px;
    font-size: 470%;
    font-weight:700;
    display:block;
  }

  .username {
    font-size:120%;
    color:#7a7a7a;
    text-align:center;
    width:100%;
    position:absolute;
    bottom:5px;
    text-transform:uppercase;
    display:block;
  }

  .tweet-content {
    text-align:center;
    display:block;
    text-transform:uppercase;
    color:#3d3d3d;
    font-size:2.2vw;
    margin-top:27%;
  }

  .tweet-content strong {
    color:#7a7a7a;
    display:block;
  }

  @media (max-width:767px) {
    .my-au h1 {
      position:relative;
      top:-42px;
      left:auto;
      transform: rotate(0deg);
      text-align:center;
      font-size:50px;
      padding-top:33px;
      margin-bottom:0em;
    }

    .gif-grid {
      width:95%;
    }

    .tweet-content {
      font-size:4.3vw;
      margin-top:27%;
    }
  }

  @media (min-width:1200px) {
    .tweet-content {
      font-size:30px;
      margin-top:28%;
    }
  }

  @media (min-width:768px) and (max-width:1000px) {
    .top-quo, .btm-quo {
      font-size:340%;
    }

    .btm-quo {
      bottom: -20px;
      right: 4px;
    }

    .top-quo {
      left:5px;
    }

    .username {
      font-size:100%;
    }
  }

  @media (max-height:570px) {
    .my-au h1 {
      font-size: 45px;
      position: fixed;
      top: 58px;
      left: 37px;
    }
  }

/*
BUILD A BEAT SECTION
 ----------------------------------------------------------------------------*/
#btb-content h2 {
  font-size: 108px;
  font-weight:bold;
  padding-bottom:.325em;
  margin-top:-32px;
  text-shadow: 2px 2px 4px rgba(0,0,0,.5);
  opacity:.6;
}

 #btb-container {
   width: 100%;
   position: relative;
   background: url('../_img/_btb/AU-BuildABeat-Background.jpg') center bottom no-repeat;
   background-size: cover;
 }

 #btb-content {
   z-index: 3;
   position: relative;
   max-width: 660px;
   margin: 0 auto;
   color: white;
   text-align: center;
   padding: 1em;
   padding-bottom: 0;
 }

 #btb-stage {
   z-index: 1;
   position: relative;
   top: 0;
   left: 0;
 }

 #audio-controls {
   z-index: 3;
   position: relative;
   padding-bottom: 3%;
   text-align: center;
   max-width:96%;
   margin: 0 auto;
 }

 .audio-control {
   float:left;
   width:6%;
   vertical-align: bottom;
   height: 0;
   padding-bottom:21%;
   position: relative;
   font-size: 0;
 }

 .audio-toggle:not(.toggle0) {
   display: block;
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   padding: .25em;
   color: white;
   text-align: center;
 }

 .audio-toggle.playall:not(.toggle0) {
   background: url('../_img/_btb/cast-fullcolor.png') center center no-repeat;
   background-size:cover;
 }

 .audio-toggle.off:not(.toggle0) {
   background: url('../_img/_btb/cast-yellow.png') center center no-repeat;
   background-size:cover;
   filter: grayscale(100%) brightness(80%);
 }

 .audio-toggle.on:not(.toggle0) {
   background: url('../_img/_btb/cast-yellow.png') center center no-repeat;
   background-size:cover;
 }

 .audio-toggle:hover:not(.toggle0) {
   filter:brightness(120%)!important;
 }

 .audio-toggle.off:hover:not(.toggle0) {
   filter:brightness(120%) grayscale(100%)!important;
 }

 .audio-toggle.preload:not(.toggle0) {
   background: url('../_img/_btb/cast-fullcolor.png') center center no-repeat;
   background-size:cover;
   filter: grayscale(100%) brightness(0) !important;
   pointer-events: none !important;
 }

 .audio-toggle.preload:hover:not(.toggle0) {
   filter: grayscale(100%) brightness(0) !important; cursor: default !important;
 }

 .audio-toggle:not(.toggle0) img {
   display: block;
 }

 .preload {
   width:auto;
   opacity:1;
   margin:0;
 }

 .btn {
   display: inline-block;
   background: #fcd207;
   color: #2a2a2a;
   margin: 0 auto;
   font-weight: 700;
   font-size: 130%;
   padding: .175em 2.5em .125em;
   text-transform: uppercase;
 }

 .btn:hover {
   background: #fff;
   color: #2a2a2a;
 }

 .btn span {
    transform: scaleY(1);
    display:inline-block;
    transition: all 0.4s ease;
 }

 .btn:hover span {
    transform: scaleY(-1);
 }

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

 .btb-text p {
   font-weight:bold;
   font-size:27px;
   text-shadow: 2px 2px 4px rgba(0,0,0,.5);
   text-align:center;
   line-height:1;
 }

 .instructions {
   text-transform: uppercase;
   font-weight:bold;
   font-size:24px;
   text-shadow: 2px 2px 4px rgba(0,0,0,.5);
 }

 .btb-arrow {
   font-weight:bold;
   font-size:21px;
   text-shadow: 2px 2px 4px rgba(0,0,0,.5);
   padding: .5em .25em 0;
 }

@media (max-width:767px) {
  #btb-container {
    width: 100%;
    position: relative;
    background: url('../_img/_btb/mobile-bg.jpg') center bottom no-repeat;
    background-size: cover;
  }

  #btb-content h2 {
    position: relative;
    top: auto;
    left: auto;
    text-align: center;
    font-size: 65px;
    padding-top: 0px;
    margin-bottom: 0em;
    margin-top: -23px;
    opacity: 0.5;
  }

  .btb-text p {
    font-size:20px;
    padding-bottom:.5em;
  }

  .instructions {
    font-size:16px;
  }

  .btb-arrow img {
    width:25px;
    height:auto;
  }

  .visible-xs .audio-toggle:not(.toggle0) {
    padding:0 10px;
  }

  #audio-controls {
    padding-bottom:9%;
  }

  .audio-control {
    padding-bottom:39%;
  }

  .mobile-spacer {
    height:10em;
  }

  .mobile-spacer:after {
    content: "";
    display: table;
    clear: both;
  }

  /*Instrument 1*/
  .audio-toggle.toggle1.playall {
    background: url('../_img/_btb/mobile/cast01.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle1.off {
    background: url('../_img/_btb/mobile/cast01.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(80%);
  }

  .audio-toggle.toggle1.on {
    background: url('../_img/_btb/mobile/cast01-yellow.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle1.preload {
    background: url('../_img/_btb/mobile/cast01.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(0) !important;
  }

  /*Instrument 2*/
  .audio-toggle.toggle2.playall {
    background: url('../_img/_btb/mobile/cast02.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle2.off {
    background: url('../_img/_btb/mobile/cast02.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(80%);
  }

  .audio-toggle.toggle2.on {
    background: url('../_img/_btb/mobile/cast02-yellow.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle2.preload {
    background: url('../_img/_btb/mobile/cast02.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(0) !important;
  }

  /*Instrument 3*/
  .audio-toggle.toggle3.playall {
    background: url('../_img/_btb/mobile/cast03.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle3.off {
    background: url('../_img/_btb/mobile/cast03.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(80%);
  }

  .audio-toggle.toggle3.on {
    background: url('../_img/_btb/mobile/cast03-yellow.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle3.preload {
    background: url('../_img/_btb/mobile/cast03.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(0) !important;
  }

  /*Instrument 4*/
  .audio-toggle.toggle4.playall {
    background: url('../_img/_btb/mobile/cast04.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle4.off {
    background: url('../_img/_btb/mobile/cast04.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(80%);
  }

  .audio-toggle.toggle4.on {
    background: url('../_img/_btb/mobile/cast04-yellow.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle4.preload {
    background: url('../_img/_btb/mobile/cast04.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(0) !important;
  }

  /*Instrument 5*/
  .audio-toggle.toggle5.playall {
    background: url('../_img/_btb/mobile/cast05.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle5.off {
    background: url('../_img/_btb/mobile/cast05.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(80%);
  }

  .audio-toggle.toggle5.on {
    background: url('../_img/_btb/mobile/cast05-yellow.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle5.preload {
    background: url('../_img/_btb/mobile/cast05.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(0) !important;
  }

  /*Instrument 6*/
  .audio-toggle.toggle6.playall {
    background: url('../_img/_btb/mobile/cast06.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle6.off {
    background: url('../_img/_btb/mobile/cast06.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(80%) !important;
  }

  .audio-toggle.toggle6.on {
    background: url('../_img/_btb/mobile/cast06-yellow.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle6.preload {
    background: url('../_img/_btb/mobile/cast06.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(0) !important;
  }

  /*Instrument 7*/
  .audio-toggle.toggle7.playall {
    background: url('../_img/_btb/mobile/cast07.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle7.off {
    background: url('../_img/_btb/mobile/cast07.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(80%);
  }

  .audio-toggle.toggle7.on {
    background: url('../_img/_btb/mobile/cast07-yellow.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle7.preload {
    background: url('../_img/_btb/mobile/cast07.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(0) !important;
  }

  /*Instrument 8*/
  .audio-toggle.toggle8.playall {
    background: url('../_img/_btb/mobile/cast08.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle8.off {
    background: url('../_img/_btb/mobile/cast08.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(80%);
  }

  .audio-toggle.toggle8.on {
    background: url('../_img/_btb/mobile/cast08-yellow.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle8.preload {
    background: url('../_img/_btb/mobile/cast08.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(0) !important;
  }

  /*Instrument 9*/
  .audio-toggle.toggle9.playall {
    background: url('../_img/_btb/mobile/cast09.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle9.off {
    background: url('../_img/_btb/mobile/cast09.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(80%);
  }

  .audio-toggle.toggle9.on {
    background: url('../_img/_btb/mobile/cast09-yellow.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle9.preload {
    background: url('../_img/_btb/mobile/cast09.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(0) !important;
  }

  /*Instrument 10*/
  .audio-toggle.toggle10.playall {
    background: url('../_img/_btb/mobile/cast10.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle10.off {
    background: url('../_img/_btb/mobile/cast10.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(80%);
  }

  .audio-toggle.toggle10.on {
    background: url('../_img/_btb/mobile/cast10-yellow.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle10.preload {
    background: url('../_img/_btb/mobile/cast10.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(0) !important;
  }

  /*Instrument 11*/
  .audio-toggle.toggle11.playall {
    background: url('../_img/_btb/mobile/cast11.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle11.off {
    background: url('../_img/_btb/mobile/cast11.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(80%);
  }

  .audio-toggle.toggle11.on {
    background: url('../_img/_btb/mobile/cast11-yellow.png') center center no-repeat;
    background-size:contain;
  }

  .audio-toggle.toggle11.preload {
    background: url('../_img/_btb/mobile/cast11.png') center center no-repeat;
    background-size:contain;
    filter: grayscale(100%) brightness(0) !important;
  }

}

/*
 OPT-IN FORM SECTION
 ----------------------------------------------------------------------------*/

#footer {
  position:relative;
}

 textarea:focus, input:focus{
     outline: none;
 }

 #footer-optin .optin {
    position:relative;
    top:auto;
    right:auto;
    margin-bottom:1em;
 }

 .optin {
   position:fixed;
   top:0px;
   right:200px;
   z-index:10;
   transition: all 0.4s ease;
 }

 .optin.active {
   top:50px;
   transition: all 0.4s ease;
 }

/*.optin {
  margin: 0 auto !important;
  text-align: center;
  position:absolute;
  left:120px;
  top:7px;
}*/

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

.optin input, .optin button {
  display: inline;
  font-size:19px;
  border: 1px solid #fff;
  line-height: 1.25;
  padding: .25em .25em;
  font-family: futura-pt-condensed, sans-serif;
}

.optin input {
  color:#2a2a2a;
  background:#5b6372;
  width:200px;
}

.optin button {
  background:#fcd207;
  color:#2a2a2a;
  font-weight:700;
  border-left:0;
  margin-left:-6px;
  padding:.25em .5em;
}

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

.optin button span {
  transition: all 0.4s ease;
  display:inline-block;
}

.optin button:hover span {
  transition: all 0.4s ease;
  transform: scaleY(-1);
}


.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;
}

.subscribe input::-webkit-input-placeholder {
  color:#2a2a2a;
}

.subscribe input:-moz-placeholder { /* Firefox 18- */
  color:#2a2a2a;
}

.subscribe input::-moz-placeholder {  /* Firefox 19+ */
  color:#2a2a2a;
}

.subscribe input:-ms-input-placeholder {
  color:#2a2a2a;
}

.form-thanks {
  font-size: 100%;
  margin-top: 5px;
  margin-left: 20px;
  color:#fcd207;
  /*border-top:1px solid rgba(255,255,255,0.5);*/
}

#footer-optin .form-thanks {
  font-size:150%;
}

#hudson {
  position:absolute;
  bottom:5px;
  left:15px;
}

@media (max-width:768px) {
  .optin {
    position:fixed;
    bottom:0px;
    left:.65%;
    right:0;
    width:100%;
    z-index:1;
    transition: all 0.4s ease;
    top:auto;
  }

  .optin.active {
    transition: all 0.4s ease;
    bottom:100px;
    top:auto;
    z-index:1000;
  }

  #footer-optin .optin {
    width:80%;
    margin:0 auto 1em;
    display:none;
  }

  .optin input {
    width:74%;
  }

  .optin button {
    width:25%;
    background:#2a2a2a;
    color:#fff;
    margin-left:-5px;
  }

  .optin button:hover {
    background:#fff;
    color:#2a2a2a;
  }

  .optin input, .optin button {
    border: 1px solid rgba(255,255,255, .5);
  }

  .subscribe input::-webkit-input-placeholder {
    color:#fff;
  }

  .subscribe input:-moz-placeholder { /* Firefox 18- */
    color:#fff;
  }

  .subscribe input::-moz-placeholder {  /* Firefox 19+ */
    color:#fff;
  }

  .subscribe input:-ms-input-placeholder {
    color:#fff;
  }

  .form-thanks {
    background:#5b6372;
    font-size:135%;
    margin-left: -5px;
    padding-top:8px;
  }

  #hudson {
    position:relative;
    margin:20px auto 0;
    left:0;
    bottom:0;
  }
}

@media (min-width:708px) and (max-width:767px) {
  .optin input {
    width:74%;
  }
}

@media (max-width:500px) {
  #footer-optin .optin {
    width:100%;
  }

  #footer {
    padding:1em .5em 125px;
  }

  #footer-optin .optin button {
    width:30%;
  }

  #footer-optin .optin input {
    width:70%;
  }
}

/*
 QUOTE ROTATION
 -----------------------------------------------------------------------------*/
#quote-block {
  padding:10px 0;
  background:#657690;
  margin-top:-4px;
  margin-bottom:-1px;
}

.bway-return #quote-block {
  background:#000;
  padding-bottom:10px;
}

.as {
  font-weight:700;
  margin:0;
  padding:0;
  font-family: futura-pt, sans-serif;
  font-size:170%;
}

.as.as-btm {
  margin-bottom:10px;
}

.unchained {
  font-weight:700;
  margin:0 auto;
  padding:0;
  font-family: futura-pt, sans-serif;
  font-size:165%;
  color:#fcd207;
  width:80%;
}

.unchained strong {
  font-size:130%;
}

.unchained a {
  font-weight:400;
  font-size:60%;
  color:#fff;
  text-transform: uppercase;
  display:block;
  margin-top:5px;
  text-decoration: underline;
}

.unchained a:hover {
  color:#fcd207;
  text-decoration: none;
}

.as:first-of-type {
  margin-top:5px;
}

.limited {
  margin-top:5px;
  margin-bottom:40px;
  font-size:210%;
  font-weight:700;
  line-height: .9;
}

.bestof {
  width:70%;
  margin:-4em auto 0em;
  position:relative;
  z-index:3;
  max-width:626px;
  padding-bottom:.5em;
}

#quotes {
  -webkit-overflow-scrolling: touch;
  font-size: 150%;
  line-height: .9;
  height:150px;
  position:relative;
  z-index:3;
  margin-top:-2em;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

.bway-return #quotes {
  margin-top:0;
  padding-top:0em;
  font-family: futura-pt, sans-serif;
  font-weight: 800;
  font-style: normal;
  color:#fcd207;
  height:auto;
  padding-bottom:0px;
}

#quotes ul {
  position: relative;
}

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

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

#quotes li {
  color:#fff;
  text-transform:uppercase;
  font-size:160%;
  font-weight:700;
  display: none;
}

.bway-return #quotes li {
  color:#fcd207;
  font-size:270%;
}

.twoline .hidden-xs {
  display:inline-block!important;
}

.sm-mark {
  font-size:80%;
  display:inline-block;
  vertical-align:top;
}

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

/*#quotes blockquote:before {
  display: inline-block;
  content:"\201C";
  margin-left: -.35em;
  vertical-align: top;
}

#quotes blockquote:after {
  display: inline-block;
  content:"\201D";
  margin-right: -.35em;
  vertical-align: top;
}*/

#quotes cite {
    display: block;
    font-size: 50%;
    padding-top:.2em;
    color:#fcd207;
}

.bway-return #quotes cite {
  color:#000;
  font-family: futura-pt, sans-serif;
  font-weight: 800;
  font-style: italic;
}

.highlight {
  font-size:120%;
}

#quotes li.oneline {
  padding-top:.5em;
  font-size:180%;
}

#quotes li.oneline cite {
  font-size:40%;
}

.nyt {
  position:absolute;
  top:-5px;
  right:11%;
}

.quote-btn {
  display:block;
  background:#fcd207;
  color:#000;
  font-weight:700;
  width:200px;
  font-size:160%;
  margin:0px auto 40px;
  padding:5px 0;
}

.quote-btn span {
    transition: all 0.4s ease;
    transform: scaleY(1);
    display: inline-block;
}

.quote-btn:hover span {
    transition: all 0.4s ease;
    transform: scaleY(-1);
    display: inline-block;
    color:#000;
}

.quote-btn:hover {
  background:#fff;

}

@media (max-width:767px) {
  .twoline .hidden-xs {
    display:none!important;
  }

  .twoline .visible-xs {
    display:inline-block!important;
  }

  #quote-block {
    padding-bottom:0;
  }

  #quotes li.oneline {
    padding-top:.9em;
    font-size:160%;
  }

  #quotes li.twoline {
    padding-top:.7em;
  }

  #quotes li.long {
    font-size:130%;
  }

  .nyt {
    width: 60px;
    top: 35px;
    right: 1%;
  }

  .bestof {
    margin:-3em auto 0em;
    padding-bottom:.5em;
    width:85%;
  }

  .bway-return #quotes li {
    font-size:220%;
  }

  .unchained {
    font-size:160%;
  }

  .unchained a {
    font-size:60%;
  }

  .limited {
    font-size:170%;
  }
}

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

  #quotes li.oneline {
    font-size:50px;
    padding-top:.2em;
  }

  .nyt {
    right:8%;
    top:5px;
  }

  .quote-btn {
    font-size:28px;
  }

  .unchained {
    font-size:190%;
  }
}

@media (max-width:500px) {
  #quotes {
    height:120px;
    margin-top:0em;
  }

  #quotes li {
    font-size:110%;
  }

  #quotes li.long {
    font-size:100%;
  }

  #quotes li.oneline {
    padding-top:.4em;
  }

  .nyt {
    width:60px;
    top:0px;
    right:12%;
  }

  .bway-return #quotes li {
    font-size:180%;
  }

  .as {
    font-size:130%;
  }
}

@media (min-width:767px) and (max-width:900px) {
  .nyt {
    right:6%;
    width:60px;
    top:5px;
  }
}

@media (min-width:901px) and (max-width:1100px) {
  .nyt {
    right:7%;
  }
}

@media (min-width:600px) and (max-width:700px) {
  .nyt {
    width: 60px;
    top: 35px;
    right: 1%;
  }
}

@media (min-width:700px) and (max-width:767px) {
  .nyt {
    width: 60px;
    top: 35px;
    right: 4%;
  }
}

@media (min-width:480px) and (max-width:599px) {
  .nyt {
    width: 60px;
    top: 35px;
    right: 4%;
  }
}

@media (max-width:479px) {
  .nyt {
    width: 50px;
    top: 50px;
    right: 1%;
  }
}

@media (max-width:350px) {
  .bway-return #quotes li {
    font-size:150%;
  }

  .unchained {
    font-size:125%;
  }
}


/*
 VIDEO SECTION
 ----------------------------------------------------------------------------*/

#video {
  padding: 2em 0;
}

.video-link { overflow:hidden; }

@media (max-width:767px) {
  .video-link {
    max-width: 480px;
    margin: 0 auto;
    display: block;
  }
}

.video-thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
     border: 2px solid black;
     border-top: 1px solid black;
}

.video-thumb img {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: auto;
  transform: translate(-50%,-50%);
}

.video-caption {
  background:#fcd207;
  color:#024357;
  padding: .2em .5em;
}

.video-thumb:after{
  position: absolute;
  top:50%; left:50%;
  height: 100%; width: 100%;
  transform: translate(-50%,-50%);
  background: url(../_img/video-play2.png) center center no-repeat;
  background-size: 65%;
  content:"";
  opacity:.85;
}

#video-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: 99999999999;
}

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

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

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

.video-overlay-open #video-overlay {
  transform: translateX(0);
}

.video-link:hover .video-caption {

}

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

/*
 PRIVACY PAGES
 ----------------------------------------------------------------------------*/
 #privacy > div {
   padding:2em 3em 2em;
 }

 #privacy h1 {
   text-transform:uppercase;
 }

 #privacy h2 {
   font-size:170%;
   margin-top:35px;
   color:#fcd207;
   padding-bottom:0;
   text-align:left;
 }

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

 #privacy a {
   font-weight:600;
   color:#fff;
 }

 #privacy a:hover {
   text-decoration:underline;
 }

 #privacy ul {
   list-style-type:disc;
   margin-left:20px;
   margin-bottom:1em;
   text-align:left;
   font-size:120%;
 }

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

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

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

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

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

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

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

/*
 LETTER SECTION
 ----------------------------------------------------------------------------*/
#letter {
  padding:5em 5em 2em;
}

#letter h1 {
  padding-top:.5em;
  color:#fcd207;
  text-align:center;
}

#letter p {
  font-size:130%;
  line-height:1.2em;
}

#letter .signature p {
  text-align:center;
  font-size:190%;
  color:#fcd207;
  font-weight:700;
  line-height:1em;
}

@media (max-width:767px) {
  #letter {
    padding:8em 5em 2em;
  }
}

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

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

#upgd_content h2 {
  color:#fcd207;
  text-align:center;
}

#upgd_content p {
  font-size:160%;
  text-align:center;
}

#upgd_content a {
  font-weight:700;
  color:#fff;
}

/* Blue Light Popup */
#popup-blue {
  background:rgba(0,0,0,.5);
  height:100%;
  width:100%;
  position:fixed;
  z-index:9999999;
  top:0;
  left:0;
}

#blue-popup {
  width:80%;
  height:28%;
  position:fixed;
  top:-160px;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  max-width:700px;
}

.modal-close {
  position:absolute;
  top: 10px;
  right: 15px;
  font-size: 190%;
  color:#fff;
}

.modal-close:hover {
  color:#000;
}


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

    .hidden-xs  { display: none !important; }
}

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

    .hidden-sm  { display: none !important; }
}

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

    .hidden-md  { display: none !important; }
}

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

    .hidden-lg  { display: none !important; }
}