/* =========================================================================
  Accessibility
========================================================================== */

#access.active {
  opacity: .6; }

.access_controls_container {
  font-family: "Bauer Bodoni Pro_1 W01 Bold";
  max-width: 300px;
  position: absolute;
  right: 1.75rem;
  top: 0;
  background: white;
  border: 1px solid #ECECEC;
  box-shadow: 0px 1px 2px #ECECEC;
  z-index: 99999;
  transition: all ease 300ms;
  pointer-events: none;
  opacity: 0; }
  .access_controls_container.active {
    top: 2.8rem;
    opacity: 1;
    pointer-events: visible; }

.access_controls_container ul li {
  float: left;
  text-align: center;
  width: 50%; }
  .access_controls_container ul li:last-child {
    width: 100%; }

.access_controls_header {
  color: #223a3d;
  padding: .5rem .8rem;
  border-bottom: 1px solid #ECECEC;
  text-align: left; }
  .access_controls_header h2 {
    font-size: 1.4rem !important;
    margin: 0; }

.close_controls {
  border: 0;
  background: none;
  float: right;
  position: absolute;
  top: .3rem;
  right: .5rem;
  font-size: 1.5rem !important; }

.access_controls_body {
  font-size: .85rem;
  padding: .7rem; }

.access_controls_body > p {
  color: #223a3d;
  margin: .5rem 0 0;
  width: 100%;
  display: inline-block;
  text-align: center; }

.access_controls_body > p > a {
  color: #957d10; }

  .access_controls_body button {
    background: white;
    color: #223a3d;
    border: 1px solid #ECECEC;
    position: relative;
    min-height: 90px;
    padding: .7rem .75rem;
    font-weight: 400;
    line-height: 1.2 !important;
    font-size: 13px !important;
    width: 100%; }
  .access_controls_body button:hover,
  .access_controls_body button:focus {
    background-color: #ECECEC; }
  .access_controls_body button.max-limit-reached,
  .access_controls_body button.min-limit-reached,
  .access_controls_body button.active {
    background-color: #223a3d;
    color: white; }

body.highC .access_controls_body button.max-limit-reached,
body.highC .access_controls_body button.min-limit-reached,
body.highC .access_controls_body button.active {
  background-color: #000 !important;
  color: white !important; }

.access_controls_body button.max-limit-reached::after,
.access_controls_body button.min-limit-reached::after,
.access_controls_body button.active::after {
  content: '';
  background: url("/img/icons/controls/selected-white.svg") no-repeat center / contain;
  height: 16px;
  width: 16px;
  position: absolute;
  top: .6rem;
  right: .8rem; }

.access_controls_body button img.white { display: none; }
.access_controls_body button.active img.white { display: inline !important; }

.access_controls_body button img.default { display: inline; }
.access_controls_body button.active img.default { display: none !important; }

.access_controls_body ul li { padding: 0; }
.access_controls_body ul li:last-child button {
  border-top: 0;
  min-height: inherit;
  padding: 1rem 1rem .6rem; }

.access_controls_body button img {
  margin-bottom: .5rem; }

.min-limit-reached,
.max-limit-reached {
  background-color: black;
  opacity: .5; }

button.increase-font,
button.decrease-font {
  padding-bottom: 2rem;
  min-height: 100px; }

.increase-size-meter,
.decrease-size-meter {
  height: 6px;
  left: 0;
  right: 0;
  bottom: 1.2rem;
  position: absolute;
  display: block; }

.increase-size-meter span {
  height: 5px;
  width: 27%;
  opacity: .3;
  background: #223a3d;
  display: inline-block;
  float: none;
  margin: 0 1%; }

button.active .increase-size-meter span,
button.active .decrease-size-meter span {
  background: #fff; }

.increase-size-meter.font-14 span:nth-child(1),
.increase-size-meter.font-14 span:nth-child(2) {
  opacity: .5; }

.increase-size-meter.font-18 span:nth-child(1) { opacity: 1 !important; }
.increase-size-meter.font-16 span:nth-child(2) { opacity: 1 !important; }
.increase-size-meter.font-14 span:nth-child(3) { opacity: 1; }

.decrease-size-meter span {
  height: 5px;
  width: 27%;
  opacity: .3;
  background: #223a3d;
  display: inline-block;
  float: none;
  margin: 0 1%; }

.decrease-size-meter.font-14 span:nth-child(2),
.decrease-size-meter.font-14 span:nth-child(3) {
  opacity: .5; }

.decrease-size-meter.font-12 span:nth-child(2) { opacity: 1 !important; }
.decrease-size-meter.font-10 span:nth-child(3) { opacity: 1 !important; }

.decrease-size-meter.font-14 span:nth-child(1) { opacity: 1; }
.decrease-size-meter.font-14.font-16 span:nth-child(1) { opacity: .5; }
.decrease-size-meter.font-14.font-12 span:nth-child(1) { opacity: 1; }

.increase-size-meter.font-14.font-12 span:nth-child(3) { opacity: .5; }
.increase-size-meter.font-16 span:nth-child(2) { opacity: 1 !important; }

body.highC .increase-size-meter span,
body.highC .decrease-size-meter span {
  background-color: #000 !important; }

body.highC button.active .increase-size-meter span,
body.highC button.active .decrease-size-meter span {
  background-color: #fff !important; }

@media only screen and (max-width : 767px) {

  .access_controls_container {
    left: auto;
    right: 0rem;
    min-width: 92vw; }
  
  .access_controls_container.active {
    top: 2.5rem; }

}


/* =========================================================================
  Theme
========================================================================== */

body.default .logo_default { display: block; }
body.default .logo_dark { display: none !important; }
body.default .logo_high { display: none !important; }

body.dark .logo_default { display: none !important; }
body.dark .logo_dark { display: block; }
body.dark .logo_high { display: none !important; }

body.highC .logo_default { display: none !important; }
body.highC .logo_dark { display: none !important; }
body.highC .logo_high { display: block; }

body.dark #overlay .brand { background-image: url("/img/brand_2020.png"); }
body.highC #overlay .brand { background-image: url("/img/brand_2020.png"); }

body.highC .mailer_wrapper {
  background: #fff;
  color: black; }

body.highC .mailer_wrapper .btn-secondary {
  border-color: black !important;
  color: black !important; }

body.highC .nav.main-nav li a::after {
  background: #fff; }

body.highC .tooltip-inner { background-color: #000 !important; }
body.highC .tooltip.bs-tooltip-bottom .arrow:before { border-bottom-color: #000 !important; }
body.highC .tooltip.bs-tooltip-left .arrow:before { border-left-color: #000 !important; }

body.highC .btn:hover,
body.highC .btn:focus {
  color: #fff !important;
  background-color: #333 !important;
  border-color: #fff !important; }

body.highC .intro_wrapper {
  background: black; }

body.highC .card_2020_involved {
  border-left: 1px solid #000;
  border-bottom: 1px solid #000; }

body.highC .card_2020_involved .card_inner_2020 {
  background: black !important;
  color: white; }

body.highC .sp-layer .btn-info {
  background-color: transparent;
  color: white; }

body.highC .btn-default {
  color: #000; }

body.highC .btn-book {
  color: #000;
  background-color: #fff;
  border-color: #000; }

body.highC #page > div.rel {
  border-bottom-color: #fff !important; }

body.highC .sp-layer {
  color: #fff; } 

body.highC .well .nav a {
  color: black !important; }

body.heritage.highC .header::after {
  background-color: #000; }

body.highC .vuespek .btn-primary {
  background-color: #fff !important;
  border-color: #fff !important;
  color: black !important; }

body.highC .brick-date {
  color: white; }

body.highC .dropdownBasket .dropdown-item {
  color: black;
  background: #fff; }

body.highC .dropdownBasket .dropdown-menu::before {
  border-bottom: solid 10px #fff; }

body.highC header .dropdownBasket .btn-primary {
  background-color: #000;
  border-color: #000;
  color: white; }



/* =========================================================================
  Main
========================================================================== */

body {
  color: var(--text);
  background-color: var(--bg);
  transition: background 500ms ease-in-out, color 1000ms ease-in-out; }

#wrapper,
#page { 
  background-color: var(--site); }

#overlay { 
  background-color: var(--overlay); }

.vuespek a:not(.btn) { color: var(--link-default); }
#page article a:not(.btn) { color: var(--link-default); }
#page article a:not(.btn):active,
#page article a:not(.btn):visited { color: var(--link-default); }

.swiper-container-years .swiper-slide,
.swiper-years-timeline .swiper-slide { color: var(--text-copy); }

.breadcrumb a,
.collection_link { color: var(--link-default); }

hr { border-bottom-color: var(--brand); }

#preloader svg path,
.loader svg path{
  fill: var(--brand) !important; }


/* =========================================================================
  Navigation
========================================================================== */

i.account { background-image: var(--account); }
i.basket { background-image: var(--basket); }

button#navbar-toggle .nav-toggle span,
button#navbar-toggle .nav-toggle span::before,
button#navbar-toggle .nav-toggle span::after {
  background: var(--cta); }

body.overlay-open button#navbar-toggle .nav-toggle span,
body.overlay-open button#navbar-toggle .nav-toggle span::before,
body.overlay-open button#navbar-toggle .nav-toggle span::after {
  background: var(--cta-alt); }

.nav.main-nav li a {
  color: var(--overlay-text); }

.form-control {
  border-color: var(--text-heading); }

body.dark .vuespek-login-component .form-control,
body.highC .vuespek-login-component .form-control {
  color: #fff !important; }

body.dark .form-control::-webkit-input-placeholder { color: #fff; }
body.dark .form-control:-ms-input-placeholder { color: #fff; }
body.dark .form-control::-moz-placeholder { color: #fff; }

body.highC .form-control::-webkit-input-placeholder { color: #fff; }
body.highC .form-control:-ms-input-placeholder { color: #fff; }
body.highC .form-control::-moz-placeholder { color: #fff; }

body.highC .form-control.donate-control::-webkit-input-placeholder { color: #000; }
body.highC .form-control.donate-control:-ms-input-placeholder { color: #000; }
body.highC .form-control.donate-control::-moz-placeholder { color: #000; }

body.highC .sp-button { background: #444; }
body.highC .text-gold { color: #999; }


/* =========================================================================
  Icons
========================================================================== */

a.nav-facebook { background-image: var(--facebook) }
a.nav-twitter { background-image: var(--twitter) }
a.nav-youtube { background-image: var(--youtube) }
a.nav-instagram { background-image: var(--instagram) }
a.nav-rss { background-image: var(--rss) }
.st_sharethis_custom,
a.nav-sharethis { background-image: var(--sharethis) }


/* =========================================================================
  Button
========================================================================== */

.btn-default { 
  background-color: var(--button);
  border-color: var(--button); }

.Donateme,
.Donatenow { 
  background-color: var(--donate);
  border-color: var(--donate);
  color: var(--donate-color); }

.btn-info { color: var(--brand); border-color: var(--brand); }
.btn-white { color: var(--link-brand); }
.brick-alt { color: var(--text); }

.seat-continue-btn,
.btn-primary {
  background-color: var(--button-bg);
  border-color: var(--button-border); 
  color: var(--button-color); }

.btn-white {
  background-color: var(--button-bg-alt);
  border-color: var(--button-border-alt); 
  color: var(--button-color-alt); }

header .btn-secondary {
  border-color: var(--button-border-secondary); 
  color: var(--button-color-secondary); }

.header.sticky .btn-secondary {
  border-color: var(--cta); }

.header.sticky #dropdownBasket,
.header.sticky .btn-icon,
.header.sticky .btn-secondary {
  color: var(--cta); }

.list-group-item,
.brick.brick_donateMain,
.header::after {
  background-color: var(--bg-header); }

header p.box_office_header,
header p.box_office_header a,
header #dropdownBasket,
header .btn-icon {
  color: var(--cta); }

body.overlay-open header p.box_office_header,
body.overlay-open header p.box_office_header a {
  color: var(--cta-alt); }

#overlay .btn-icon {
  color: var(--cta-alt) !important; }

#overlay .btn-secondary {
  color: var(--cta-alt);
  border-color: var(--cta-alt); }

#overlay .btn-primary {
  background-color: var(--button-bg);
  border-color: var(--button-border); 
  color: var(--button-color); }


/* =========================================================================
  Type
========================================================================== */

.vuespek,
.collection_detail,
.js-bands,
article { color: var(--text-copy); }
.sub_title { color: var(--text-footer); }

.vuespek-perf-list-calendar-component {
  color: var(--text); }

.heading,
.project-author { color: var(--text-heading); }

.swiper-filters a,
.heading_keywords,
#dropdownDates,
.events_count { color: var(--text-copy); }

.vuespek .heading,
.hero_title_2020 { color: var(--hero-heading); }

.well p,
.well * { color: var(--well-text); }

.well,
.nav.list-group ~ span { background-color: var(--well) !important; }
.project-image ~ span { background-color: var(--strip); }

body.highC p span,
body.dark p span {
  color: inherit !important; }

body.highC h1 span,
body.highC h2 span,
body.highC h3 span,
body.highC h4 span,
body.highC h5 span,
body.highC h6 span,
body.dark h1 span,
body.dark h2 span,
body.dark h3 span,
body.dark h4 span,
body.dark h5 span,
body.dark h6 span {
  color: inherit !important; }

body.dark .text-muted {
  color: inherit !important; }

body.dark .dropdown-toggle {
  color: white;
  background: #223a3d;
  border: 1px solid #223a3d; }


/* =========================================================================
  Project
========================================================================== */

.project-card { color: var(--text-copy); }


/* =========================================================================
  Footer
========================================================================== */

footer {
  background-color: var(--bg-footer);
  border-color: var(--border-footer);
  color: var(--text-footer); }

footer .form-control {
  border: 1px solid var(--text-footer);}

.sub-footer {
  background: var(--bg-subfooter);
  border-color: var(--border-footer);
  color: var(--text-subfooter); }
  .sub-footer a {
    color: var(--link-brand); }

#bracketsDigital svg path { fill: var(--text-subfooter) !important; }


/* =========================================================================
  Themes
========================================================================== */

:root {
  --transparent-color: transparent;
  --red: #E62645;
  --green: #223a3d;
  --green-light: rgb(173, 205, 209);
  --green-dark: rgb(57, 91, 96);
  --yellow: #FFFF00;
  --black: #000000;
  --gold: #957d10;
  --gray: #252525;
  --gray-dark: #111;
  --gray-light: #999;
  --white: #ffffff;
  --brand: #223a3d;
  --dark: rgb(28, 28, 33);
  
  --white-account: url("/img/icons/spektrix/account.svg");
  --white-basket: url("/img/icons/spektrix/basket.svg");
  --yellow-account: url("/img/icons/spektrix/account-yellow.svg");
  --yellow-basket: url("/img/icons/spektrix/basket-yellow.svg");
  
  --facebook-default: url(/img/icons/social-white/facebook.png);
  --twitter-default: url(/img/icons/social-white//twitter.png);
  --youtube-default: url(/img/icons/social-white//youtube.png);
  --instagram-default: url(/img/icons/social-white/instagram.png);
  --rss-default: url(/img/icons/social-white//rss.png);
  --sharethis-default: url(/img/icons/social-white//share.png);
  
  --timeIcon-default: url(/img/icons/info/default/time.png);
  --ageIcon-default: url(/img/icons/info/default/age.png);
  --intervalIcon-default: url(/img/icons/info/default/duration.png);
  --venueIcon-default: url(/img/icons/info/default/venue.png);
  --genreIcon-default: url(/img/icons/info/default/genre.png);
  
  --facebook-dark: url(/img/icons/social/black/facebook.svg);
  --twitter-dark: url(/img/icons/social/black/twitter.svg);
  --youtube-dark: url(/img/icons/social/black/youtube.svg);
  --instagram-dark: url(/img/icons/social/black/instagram.png);
  --rss-dark: url(/img/icons/social/black/rss.svg);
  --sharethis-dark: url(/img/icons/social/black/share.svg);

  --timeIcon-dark: url(/img/icons/info/dark/time.png);
  --ageIcon-dark: url(/img/icons/info/dark/age.png);
  --intervalIcon-dark: url(/img/icons/info/dark/duration.png);
  --venueIcon-dark: url(/img/icons/info/dark/venue.png);
  --genreIcon-dark: url(/img/icons/info/dark/genre.png);
  
  --facebook-high: url(/img/icons/social/yellow/facebook.svg);
  --twitter-high: url(/img/icons/social/yellow/twitter.svg);
  --youtube-high: url(/img/icons/social/yellow/youtube.svg);
  --instagram-high: url(/img/icons/social/yellow/instagram.png);
  
}


body {
  --bg: var(--white);
  --site: var(--white);
  --overlay: var(--white);
  --bg-header: var(--brand);
  --bg-footer: var(--brand);
  --bg-brand: var(--brand);
  --bg-subfooter: var(--brand);
  --border-footer: var(--brand);
  --text: var(--brand);
  --text-copy: var(--green);
  --text-brand: var(--brand);
  --text-heading: var(--gold);
  --text-footer: var(--white);
  --text-subfooter: var(--white);
  --hero-heading: var(--gold);
  --breadcrumb: var(--green);
  --border: var(--white);
  --gallery: var(--brand);
  --cta: var(--white);
  --cta-alt: var(--brand);
  
  --button: var(--gold);
  --donate: var(--gold);
  --donate-color: var(--white);
  --button-search: var(--gold);
  --button-alt: var(--brand);
  
  --button-bg: var(--green);
  --button-border: var(--green);
  --button-color: var(--white);
  
  --button-bg-alt: var(--white);
  --button-border-alt: var(--white);
  --button-color-alt: var(--green);

  --button-border-secondary: var(--gold);
  --button-color-secondary: var(--white);
  
  --heading: var(--green);
  --heading-alt: var(--white);
  --brand: var(--green);
  --link: var(--brand);
  --link-brand: var(--white);
  --link-button: var(--brand);
  --link-subnav: var(--brand);
  --link-header: var(--white);
  --link-dropdown: var(--brand);
  --link-default: var(--brand);
  --link-active: var(--green);
  --transparent: var(--transparent-color);
  --blockquote: var(--green);

  --account: var(--white-account);
  --basket: var(--white-basket);
  --search: var(--white);
  --well: var(--gold);
  --well-text: var(--white);
  
  --strip: var(--green);
  
  --facebook: var(--facebook-default);
  --twitter: var(--twitter-default);
  --youtube: var(--youtube-default);
  --instagram: var(--instagram-default);

}

body.highC {
  --bg: var(--gray-dark);
  --site: var(--gray-dark);
  --overlay: var(--gray-dark);
  --bg-header: var(--black);
  --bg-footer: var(--black);
  --bg-brand: var(--black);
  --bg-subfooter: var(--black);
  --border-footer: var(--black);
  --text: var(--black);
  --text-copy: var(--white);
  --text-heading: var(--white);
  --link: var(--black);
  --link-dropdown: var(--white);
  --link-button: var(--black);
  --link-subnav: var(--gold);
  --text-footer: var(--white);
  --text-subfooter: var(--white);
  --border: var(--gray);
  --gallery: var(--white);
  --cta: var(--white);
  --cta-alt: var(--white);

  --overlay-text: var(--white);
  
  --donate: var(--white);
  --donate-color: var(--black);
  --button: var(--white);
  --button-search: var(--white);
  --button-alt: var(--white);
  
  --button-bg: var(--white);
  --button-border: var(--white);
  --button-color: var(--black);
  
  --button-bg-alt: var(--white);
  --button-border-alt: var(--white);
  --button-color-alt: var(--black);

  --button-border-secondary: var(--white);
  --button-color-secondary: var(--white);
  
  --hero-heading: var(--white);
  --heading: var(--white);
  --heading-alt: var(--white);
  --brand: var(--white);
  --link-brand: var(--white);
  --link-header: var(--white);
  --link-default: var(--gray-light);
  --link-active: var(--gray);
  --transparent: var(--transparent-color);
  --blockquote: var(--white);

  --search: var(--gray);
  --well: var(--white);
  --well-text: var(--black);
  
  --strip: var(--white);
  
  --facebook: var(--facebook-default);
  --twitter: var(--twitter-default);
  --youtube: var(--youtube-default);
  --instagram: var(--instagram-default);

}

body.dark {
  --bg: var(--dark);
  --site: var(--dark);
  --overlay: var(--green-dark);
  --bg-header: var(--green-dark);
  --bg-footer: var(--green-dark);
  --bg-brand: var(--green-dark);
  --bg-subfooter: var(--green-dark);
  --border-footer: var(--green-dark);
  --text: var(--green-dark);
  --text-copy: var(--white);
  --text-heading: var(--green-light);
  --link: var(--green);
  --link-dropdown: var(--green);
  --link-button: var(--green);
  --link-subnav: var(--white);
  --text-footer: var(--white);
  --text-brand: var(--green);
  --text-subfooter: var(--white);
  --breadcrumb: var(--green);
  --border: var(--white);
  --gallery: var(--white);
  --cta: var(--white);
  --cta-alt: var(--brand);
  
  --overlay-text: var(--white);
  
  --donate: var(--green);
  --donate-color: var(--white);
  --button: var(--green);
  --button-search: var(--green);
  --button-alt: var(--green);
  
  --button-bg: var(--gold);
  --button-border: var(--gold);
  --button-color: var(--white);
  
  --button-bg-alt: var(--green);
  --button-border-alt: var(--green);
  --button-color-alt: var(--white);

  --button-border-secondary: var(--white);
  --button-color-secondary: var(--white);
  
  --hero-heading: var(--gold);
  --heading: var(--white);
  --heading-alt: var(--gold);
  --brand: var(--white);
  --link-brand: var(--white);
  --link-header: var(--white);
  --link-default: var(--gold);
  --link-active: var(--black);
  --transparent: var(--transparent-color);
  --blockquote: var(--white);

  --account: var(--white-account);
  --basket: var(--white-basket);
  --search: var(--white);
  --well: var(--green);
  --well-text: var(--white);
  
  --strip: var(--green);
  
  --facebook: var(--facebook-default);
  --twitter: var(--twitter-default);
  --youtube: var(--youtube-default);
  --instagram: var(--instagram-default);

}