@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined');

body{
  --color-BG: #222222;
  --color-Font: #FFFFFF;
  --color-DarkBg: #333333;
  --color-DarkBgFont: #FFF;
  --color-DarkBgFontHover: #8D8D92;
/*  --color-LightBg: #99def8; */
  --color-LightBg: #33bdf1;
  --color-Brand: #00adee;
  --color-BrandLight: s#797A9E;
  --color-Brand2: #b38d5c;
  --color-BrandFont: #FFF;
  --color-DarkGrey: #555;
  --color-VDarkGrey: #333333;
  --color-LightGrey: #efefef;
  --color-BrandBlue: #1b2452;
  --color-White: #FFFFFF;  
  --color-Black: #000000;
  
  --fontsize-Title: 4rem;
  --fontsize-SubTitle: 1.1rem;
  --fontsize-FilmTitle: 2rem;
    
  --color-ButtonStandardBorder: solid 2px var(--color-DarkBgFont);
  --color-ButtonStandardBg: none;
  --color-ButtonStandardFont: var(--color-Brand);
  
  --color-ButtonActionBorder: var(--color-Brand);
  --color-ButtonActionBg: var(--color-Brand);
  --color-ButtonActionFont: #FFF;
  
  width: auto !important; 


  font-family: var(--font-Regular);
  --font-Regular: "Instrument Sans", sans-serif;
  --font-Title: "Instrument Sans", sans-serif;
  
  --border-radius: 20px;
  --box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.47);
  
  --lg-highlight: rgba(255, 255, 255, 0.15);
  --lg-bg-color: rgba(255, 255, 255, 0.05);
  --glass-blur: 35px;
  --glass-saturation: 100%;
  --glass-opacity: 0.08;
  --text-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
}


/*---------------------------------------------
  GENERAL
---------------------------------------------*/
body{
  background: var(--color-BG);
  color: var(--color-Font);
}

.hidden{
  display: none !important;
}

#ContentWrapper{
  margin: 0;
  padding: 0;
}

.container{
  max-width: 3400px;
  padding: 10px 20px;
}

#Content > .tabs {
  margin-top: 100px;
}

#Content{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  clear: both;
}

#Content.Page{
  padding: 100px 15%;
  
}

#Content p > span {
  color: var(--color-Font) !important;
}

h1, h2, h3, h4, .title, .DetailHeading{
  font-family: var(--font-Title);
  font-weight: bold;
  font-size: var(--fontsize-Title);
  text-transform: uppercase;
  text-shadow: var(--text-shadow);
  color: var(--color-Font);
}

.content h4 {
  color: var(--color-Font);
}

p{
  display: inline-block;
  width: 100%;
  clear: both;
}

.clearfix{width: 100%; clear: both; display: block;}

.subtitle{
  font-style: normal;
  font-family: var(--font-Regular);
}


@media(max-width: 768px){
  .container{
    overflow: hidden;
  }

  h1, h1.title, h2, h2.title, h3, h3.title{
    font-size: 1.5rem;
  }

  h2.subtitle, h3.subtitleh4, h4.subtitle, .subtitle{
    font-size: 1rem;
  }

  .container{
    padding-left: 10px;
    padding-right: 10px;
  }

}


/*---------------------------------------------
  TOP MENU
---------------------------------------------*/
#TopMenu{
  background: var(--color-Brand);
  font-size: 0.8em;
  line-height: 1.2em;
  font-weight: bold;
  height: auto;
  min-height: revert;
}

#TopMenu .container{
  max-width: revert;
  min-height: revert;
  padding: 0 20px;
}


#TopMenu .buttons .button{
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: calc(.5em - 1px);
  padding-bottom: calc(.5em - 1px);
  line-height: 1.5em;
  height: 1.5em;
  background: var(--color-LightGrey);
}


#TopMenu .navbar-item, #TopMenu .navbar-link {
  color: var(--color-BrandFont);
  transition: all 0.3s ease-in-out;
}


#TopMenu .navbar-item:hover, .navbar-link:hover {
  color: var(--color-DarkBgFontHover);
  background: none;
}

#TopMenu #BasketForMobile{
  display: none;
}

@media(max-width: 1023px){
  #TopMenu .navbar-menu {
    display: block;
    background: var(--color-DarkBg);
  padding: 0;
  }

  
  #TopMenu .navbar-end{
    display: none;
  }

  
  #TopMenu .navbar-start .buttons{
    display: block;
    text-align: center;
  }

  #TopMenu #BasketForMobile{
    display: inline-block;
    margin-top: -10px;
  }

  #TopMenu #BasketForMobile #SideBar2, #TopMenu #BasketForMobile #SideBar99{
    display: inline-block;
  }

  #TopMenu #BasketForMobile #SideBar2 .SideBar2Menu, #TopMenu #BasketForMobile #SideBar99 .SideBar99Menu{
    /*display: none;*/
  }

  #TopMenu #BasketForMobile #SideBar2 .SideBar2Menu #AccountPasswordReset, #TopMenu #BasketForMobile #SideBar99 .SideBar99Menu #AccountPasswordReset{
    display: none;
  }

  #TopMenu #BasketForMobile #SideBar2 .SideBar2Menu #AccountCreateAnAccount, #TopMenu #BasketForMobile #SideBar99 .SideBar99Menu #AccountCreateAnAccount{
    display: none;
  }

  #TopMenu #BasketForMobile #SideBar2 #MyOrderMenu.SideBar2Menu, #TopMenu #BasketForMobile #SideBar99 #MyOrderMenu.SideBar99Menu{
    display: inline;
  }

  #TopMenu #BasketForMobile #SideBar2 #MyOrderMenu.SideBar2Menu .SideBar2Item, #TopMenu #BasketForMobile #SideBar99 #MyOrderMenu.SideBar99Menu .SideBar99Item{
    display: inline-block;
  }
}


/*---------------------------------------------
  TOP MENU - SIDEBAR
---------------------------------------------*/
#TopMenu .SideBar2Menu, #TopMenu .SideBar2Item, #TopMenu .SideBar99Menu, #TopMenu .SideBar99Item{
  display: flex;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  position: relative;
  text-decoration: none;
  padding: 0.2rem 0.75rem;
  line-height: 1.5em;
}

#TopMenu .SideBar2Menu, #TopMenu .SideBar99Menu{
  padding-left: 0;
  padding-right: 0;
}

#TopMenu .SideBar2Menu, #TopMenu .SideBar99Menu{
  display: inline-flex;
  flex-grow: 4;
}

#TopMenu .SideBar2Item a, #TopMenu .SideBar99Item a{
  color: var(--color-BrandFont);
  transition: all 0.3s ease-in-out;
}

#TopMenu .SideBar2Item a:hover, #TopMenu .SideBar99Item a:hover{
  color: var(--color-DarkBgFontHover);
}

#TopMenu #SideBar2ToggleMenu, #TopMenu #SideBar2Header, #TopMenu .SideBar2FirstHeading, #TopMenu .SideBar2Heading, #UserDefinedMenu.SideBar2Menu,
#TopMenu #SideBar99ToggleMenu, #TopMenu #SideBar99Header, #TopMenu .SideBar99FirstHeading, #TopMenu .SideBar99Heading, #UserDefinedMenu.SideBar99Menu,
#SideBar5ToggleMenu, #SideBar5{
  display: none;
}

div.SideBar2Menu:nth-child(4) > div:nth-child(2), div.SideBar99Menu:nth-child(4) > div:nth-child(2){display: none !important;}

@media(max-width: 768px){
  #TopMenu .SideBar2Menu, #TopMenu .SideBar99Menu {
    display: block;
  }
  #TopMenu .SideBar2Menu, #TopMenu .SideBar2Item, #TopMenu .SideBar99Menu, #TopMenu .SideBar99Item {
    display: inline-block;
  }
  #TopMenu #UserDefinedMenu, .bd-tw-button.button {display: none !important}
}
/*---------------------------------------------
  MAIN MENU
---------------------------------------------*/
#MainMenu{
  color: var(--color-BrandFont);
  text-transform: uppercase;
  font-weight: bold;
  padding: 0 20px;
  background: var(--color-Brand) url('/PlazaCinemaLiverpool/img/plaza-stripes.svg') repeat-x center;
}

div.navbar-item:last-child {
  display: none;
}

#MainMenu .container{
  max-width: revert;
}


#MainMenu .navbar-brand {
  padding: 0 20px;
  background: var(--color-Brand);
}
#MainMenu .navbar-brand img{
  max-height: 3rem;
  width: auto;
}

@media(max-width: 768px){
 #MainMenu .navbar-brand img{
   max-height: 2rem;
 }
}

#MainMenu .navbar-brand a{
  padding: 0;
}

#MainMenu .navbar-brand a.navbar-burger{
  color: var(--color-BrandFont);
  
}


#MainMenu .navbar-item, #MainMenu .navbar-link{
  color: var(--color-BrandFont);
  transition: all 0.5s;
  padding: 0 20px;
  background: var(--color-Brand);
}

#MainMenu .navbar-item:hover, #MainMenu .navbar-link:hover{
  background: var(--color-LightBg);
}

#MainMenu .navbar-end > .navbar-item::after, #MainMenu .navbar-end > .navbar-link::after{
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  width: 0;
  bottom: 10px;
  background: var(--color-BrandFont);
  height: 1px;
  transition-property: width;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}


#MainMenu .buttons a{
   background: var(--color-DarkGrey) !important;
}

#MainMenu .navbar-end > .navbar-item:hover::after, #MainMenu .navbar-end > .navbar-link:hover::after,
#MainMenu .navbar-end > .navbar-item:focus::after, #MainMenu .navbar-end > .navbar-link:focus::after,
#MainMenu .navbar-end > .navbar-item:active::after, #MainMenu .navbar-end > .navbar-link:active::after {
  left: 0;
  right: auto;
  width: 100%;
}

a.navbar-item:hover{
  background: var(--color-Brand);
}

#MainMenu .input{
  background: none;
}


@media(max-width: 1023px){
  .navbar-burger {

  }

  .navbar-menu {
    background: none;  
  }

  #MainMenu .buttons{
    display: none; /* TODO */
  }

  #MainMenu .navbar-dropdown{
    display: none;
  }

  #MainMenu .navbar-item.is-active .navbar-dropdown{
    display: block;
  }

}

#MainMenu .date-picker-x::before{
  right: 10px;
  left: auto;
}

#MainMenu .date-picker-x{
  right: 0px;
}

#MainMenu .navbar-link:not(.is-arrowless)::after {
  border-color: var(--color-BrandFont);
  right: 0.4em;
}



#MainMenu .navbar-dropdown {
  background: var(--color-Brand);
  border-radius: 0;
  border: none;
}
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}


.sticky + .container {
  padding-top: 84px;
}


/*---------------------------------------------
  ASIDE MENU
---------------------------------------------*/
#Aside {
  
  display: none !important;
}

#MainMenuSideBar{

}

/*---------------------------------------------
  HERO
---------------------------------------------*/
.hero {
  width: 100%;
}
.hero-body {
  padding: 0;
  margin: 0;
  width: 100%; 
  position: relative;
  max-height: 580px;
  overflow: hidden;
  position: relative;
}

.hero-body .container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.hero-body h1.title {
  color: var(--color-White);
}

@media(min-width: 769px) {
  .hero-body .container {
    justify-content: end;
    align-items: end;
    width: 50%;
    right: 0;
    left: revert;
  }
  .hero-body .container .title {
    text-align: right;
  }
}

.breadcrumb {display: none;}

/*---------------------------------------------
  TILES
---------------------------------------------*/
.tile{
  
}

.tile.is-child{
  
}

.tile.dark-background{
  background: var(--color-DarkBg);
  color: var(--fontcolor-DarkBg);
  padding: 20px;
}

.tile.dark-background .content{
  
}

/*---------------------------------------------
  TITLES
---------------------------------------------*/
h1, h2, h3, h4, h5, h6{
  margin: 0;
  padding: 0;
}

h3.film-title{
  font-weight: bold;
  margin-bottom: 10px;
  font-size: var(--fontsize-FilmTitle);
  z-index: 2;
  position: relative;
  line-height: 1em;
}

h3.subtitle{
 font-weight: bold;
 color: #FFF;
}

.label {
 color: #FFF;
}

@media(max-width: 767px){
  h3.film-title{
    margin-left: 0px;
    margin-right: 0px;
  font-size: 14px;
  } 
}

.subtitle{
  font-size: var(--fontsize-SubTitle);
  margin-bottom: 10px;
}

/*---------------------------------------------
  BUTTONS
---------------------------------------------*/
input.Button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.button, button, .Button, input.Button{
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--fontsize-Button);
  border: none;
  border-radius: 0;
  background: var(--color-ButtonStandardBg);
  color: var(--color-ButtonStandardFont) !important;
  transition: all .2s ease-in-out;
  font-family: var(--font-Title);
  line-height: 2.5em;
  padding: 0.5em 1em;
  cursor: pointer;
}

.button.booking{
  background: var(--color-Brand);
  color: var(--color-BrandFont) !important;
}

input.Button{
  float: left;
}

.button:hover, .Button:hover, input.Button:hover{
  transform: scale(1.1);
  color: var(--color-ButtonStandardFont);
}

.button.action{
  background: var(--color-ButtonAction);
  color: var(--color-ButtonActionFont);
}

ul.buttons{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.buttons li{
  display: inline-block;
  margin-right: 10px;
}

@media(max-width: 768px){
  .button{
    font-size: var(--fontsize-Button-small);
  }
  
}

form#Form_5222{min-width: 500px; }

/*---------------------------------------------
  CUSTOM BUTTONS
---------------------------------------------*/
.button, button, .Button, input.Button{
  font-family: var(--font-Menu);
  font-weight: bold;
  font-size: var(--fontsize-Button);
  text-transform: uppercase;  
  box-shadow: inset 1px 1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight);
  overflow: hidden;
  position: relative;
  color: var(--color-text) !important;
  border-radius: var(--border-radius);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 1px rgba(0,0,0,0.3);
  background-color: var(--lg-bg-color) !important;
  border: none !important;
  cursor: pointer;
  line-height: 2.2;
  margin: 0;
  text-decoration: none;
  padding: 0.1em 1em;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  overflow: hidden;
  padding: 5px 20px !important;
}

.button::after, .Button::after, input.Button::after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.2;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 0;
}

.button:hover::after, .Button:hover::after, input.Button:hover::after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

input.Button{
  margin-top: 1em;
  width: auto;
}

.button.activeoption, button.activeoption, .Button.activeoption, input.Button.activeoption {
  background-color: #feb500 !important; /* warm orange */
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 8px rgba(255, 120, 0, 0.7),
    0 0 6px rgba(255, 120, 0, 0.9); 
  color: #fff !important;
}

.PrevNext{float: left; width: 100%; clear: both; background: var(--color-BG); margin-top: 50px;}
.button.action, input.Button, .Button.ContinueButton{

}
input.Button, .Button.ContinueButton{
  height: auto;
}

ul.buttons{
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.buttons li{
  display: inline-block;
  margin-right: 10px;
}

#btnVoucherPayment.Button, .Button.BackButton, #btnOrangeWednesdays.Button, #btnClose.Button{
  border: none;
  font-size: var(--fontsize-SubTitle);
  padding: 1rem 0;
}
@media(max-width: 768px){
  .button{
    font-size: var(--fontsize-Button-small);
  }  
}
span.tag:not(body) {
  margin-right: 0.2rem;
  margin-left: 1.3rem;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 0;
  height: 1.8rem;
  width: 1.8rem;
  background: red;
  color: #FFF;
}

.button.booking span.tag:not(body) {
  margin-right: -1.3rem;
}

/* Sold Out Tag */

ul.key span.soldout .tag:not(body), .button.booking span.tag.soldout:not(body) {
  background: var(--color-SoldOut);
  color: var(--color-Black);
  font-size: 0;
}

span.soldout .tag::after, .tag.soldout::after{
  font-family: 'Material Symbols Outlined'; !important;
  content: "\e5cd";
  margin-bottom: 2px;
  font-size: 1.6rem;
}

/* Relaxed Tag */

ul.key span.relaxed .tag:not(body), .button.booking span.tag.relaxed:not(body) {
  background: var(--color-Relaxed);
  color: var(--color-Black);
  font-size: 0;
}

span.relaxed .tag::after, .tag.relaxed::after{
  font-family: 'Material Symbols Outlined'; !important;
  content: "\e02c";
  margin-bottom: 2px;
  font-size: 1.6rem;
}

/* Parent + Baby Tag */

ul.key span.baby .tag:not(body), .button.booking span.tag.baby:not(body) {
  background: var(--color-Carers);
  color: var(--color-Black);
  font-size: 0;
}

span.baby .tag::after, .tag.baby::after{
  font-family: 'Material Symbols Outlined'; !important;
  content: "\e8af";
  margin-bottom: 2px;
  font-size: 1.6rem;
}

/* Family Tag */

ul.key span.family .tag:not(body), .button.booking span.tag.family:not(body) {
  background: var(--color-Family);
  color: var(--color-Black);
  font-size: 0;
}

span.family .tag::after, .tag.family::after{
  font-family: 'Material Symbols Outlined'; !important;
  content: "\f1a2";
  margin-bottom: 2px;
  font-size: 1.6rem;
}

/* Pink Palace Tag */

ul.key span.pink .tag:not(body), .button.booking span.tag.pink:not(body) {
  background: var(--color-Pink);
  color: var(--color-Black);
  font-size: 0;
}

span.pink .tag::after, .tag.pink::after{
  font-family: 'Material Symbols Outlined'; !important;
  content: "\e838";
  margin-bottom: 2px;
  font-size: 1.6rem;
}

/* RiponCinema Forever Tag */

ul.key span.forever .tag:not(body), .button.booking span.tag.forever:not(body) {
  background: var(--color-Forever);
  color: var(--color-Black);
  font-size: 0;
}

span.forever .tag::after, .tag.forever::after{
  font-family: 'Material Symbols Outlined'; !important;
  content: "\e87d";
  margin-bottom: 2px;
  font-size: 1.6rem;
}

/* Classic Matinee Tag */

ul.key span.matinee .tag:not(body), .button.booking span.tag.matinee:not(body) {
  background: var(--color-Matinee);
  color: var(--color-Black);
  font-size: 0;
}

span.matinee .tag::after, .tag.matinee::after{
  font-family: 'Material Symbols Outlined'; !important;
  content: "\efef";
  margin-bottom: 2px;
  font-size: 1.6rem;
}

/* Hard of Hearing Tag */

ul.key span.hearing .tag:not(body), .button.booking span.tag.hearing:not(body) {
  background: var(--color-Hearing);
  color: var(--color-Black);
  font-size: 0;
}

span.hearing .tag::after, .tag.hearing::after{
  font-family: 'Material Symbols Outlined'; !important;
  content: "\f356";
  margin-bottom: 2px;
  font-size: 1.6rem;
}

/* Special Tag */

ul.key span.s_p .tag:not(body), .button.booking span.tag.s_p:not(body) {  
  background: var(--color-Special);
  color: var(--color-Black);
  font-size: 0;
}

span.s_p .tag::after, .tag.s_p::after{
  font-family: 'Material Symbols Outlined'; !important;
  content: "\e8d0";
  margin-bottom: 2px;
  font-size: 1.6rem;
}

/* Q + A Tag */

ul.key span.q_a .tag:not(body), .button.booking span.tag.q_a:not(body) {
  background: var(--color-QA);
  color: var(--color-Black);
  font-size: 0;
}

span.q_a .tag::after, .tag.q_a::after{
  font-family: 'Material Symbols Outlined'; !important;
  content: "\e0bf";
  margin-bottom: 2px;
  font-size: 1.6rem;
}

/* Relaxed Tag */

ul.key span.relaxed .tag:not(body), .button.booking span.tag.relaxed:not(body) {
  background: var(--color-Relaxed);
  color: var(--color-Black);
}

ul.key span.ad-free .tag:not(body), .button.booking span.tag.ad-free:not(body) {
  background: var(--color-Ad-Free);
  color: var(--color-Black);
}

/* Ad Free Tag */

ul.key span.ad-free .tag:not(body), .button.booking span.tag.ad-free:not(body) {
  background: var(--color-Ad-Free);
  color: var(--color-Black);
  font-size: 0;
}

span.ad-free .tag::after, .tag.ad-free::after{
  font-family: 'Material Symbols Outlined'; !important;
  content: "\f7b2";
  margin-bottom: 2px;
  font-size: 1.6rem;
}


/*---------------------------------------------
  SLIDER
---------------------------------------------*/
#Banner{
  padding: 0;  
  max-width: revert;
  margin-bottom: -65px;
}
#BannerWrapperCinemaTemplateV4Container6{
  width: 100%;
}
.slider{
  height: 100%;
  min-height: 540px;
  background: #000;
}
.slider-pagination .slider-page{
  border-radius: 0 !important;
  width: 30px !important;
}
.slider-pagination .slider-page.is-active{
  transform: scale(1.3) !important;
}

.carousel{
  overflow: hidden;
  border-radius: 0;
}
.slider-container{
  overflow: inherit;
}
#HomeBanner_CinemaTemplateV4Banner1 .slider-item, #HomeBanner_CinemaTemplateV4Banner1 .slider-item > div.item{
  height: 100%;
  min-height: 340px;
}
.slider-item div.item{
  position: relative;
  overflow: inherit;
}
#HomeBanner_CinemaTemplateV4Banner1 .slider-item > div.item img.carousel-film-image{
  height : 100%;
  width: auto;
}

@media(max-width: 920px){
 #HomeBanner_CinemaTemplateV4Banner1 .slider-item > div.item img.carousel-film-image{
   height : auto;
   width: 100%;
 }
}

#HomeBanner_CinemaTemplateV4Banner1 .slider-item .film-rating{
  height: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--color-DarkBgFont);
}
.slider-navigation-next{
  right: 20px;
}

.slider-navigation-previous{
  left: 20px;
}
.slider-navigation-next, .slider-navigation-previous{
  opacity: 0;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.slider:hover .slider-navigation-next, .slider:hover .slider-navigation-previous{
  opacity: 1;
  z-index: 2;  
}
#HomeBanner_CinemaTemplateV4Banner1 .carousel-slide-overlay{
    position: absolute;
    top: top: calc(100% - 120px);
    right: 0;
    bottom: 0;
    padding: 20px;
    width: 100%;
    height: 120px;
    color: var(--color-DarkBgFont);    
}
.carousel-slide-overlay h3.film-title{
  color: var(--color-DarkBgFont);
  font-size: var(--fontsize-Title);
}
.carousel-slide-overlay h4{
  color: var(--fontcolor-DarkBgSubTitle);
}

.carousel-slide-overlay .buttons{
  position: absolute;
  bottom: 40px;
}
.carousel-slide-overlay .buttons .button{
  border: solid 2px #FFF;
  color: #FFF !important;
}
.slider-navigation-next, .slider-navigation-previous{
  background: none !important;
  color: var(--color-DarkBgFont);
}
.slider-navigation-next{
  right: 20px !important;
}
.slider-navigation-previous {
  left: 20px !important;  
}
@media(max-width: 1024px){
  #HomeBanner_CinemaTemplateV4Banner1 .synopsis {
    font-size: var(--fontsize-SubTitle);
  }
}


@media(max-width: 768px){
  #HomeBanner_CinemaTemplateV4Banner1 .slider{
    min-height: 180px;
  }  
  #HomeBanner_CinemaTemplateV4Banner1 .slider-item > div.item img.carousel-film-image{
    width: 100%;  
  }
  #HomeBanner_CinemaTemplateV4Banner1  .slider-item, .slider-item > div.item{
    min-height: 180px;  
  }
  #HomeBanner_CinemaTemplateV4Banner1 .carousel-slide-overlay{
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    padding: 20px;
    width: 100%;
    height: 60%;
  }
  #HomeBanner_CinemaTemplateV4Banner1 .slider-item .film-rating{
  right: 40px;  
  }
  #HomeBanner_CinemaTemplateV4Banner1 .hide-for-small{
  display: none;
  }
}

/*---------------------------------------------
  SIDEBAR SLIDER
---------------------------------------------*/
#Banner{
  padding: 0px;  
}

#BannerWrapperCinemaTemplateV4Container6{
  width: 100%;
}

#HomeBanner_bnrSideBar .slider{
  height: 100%;
  min-height: 380px;
  background: #000;
  margin-top: 20px;
}

#HomeBanner_bnrSideBar .slider-item, #HomeBanner_bnrSideBar .slider-item > div.item{
  height: 100%;
  min-height: 380px;
}

.slider-item div.item{
  position: relative;
  overflow: inherit;
}

#HomeBanner_bnrSideBar .slider-item > div.item img.carousel-film-image{
  width : 100%;
  height: auto;
}

#HomeBanner_bnrSideBar .slider-item .film-rating{
  height: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--color-DarkBgFont);
}

#HomeBanner_bnrSideBar .slider-navigation-next, #HomeBanner_bnrSideBar .slider-navigation-previous{
  display: none !important;
}

#HomeBanner_bnrSideBar .carousel-slide-overlay{
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  padding: 20px;
  width: 100%;
  background: var(--color-DarkBg);
  color: var(--color-LightGrey);
}

#HomeBanner_bnrSideBar .carousel-slide-overlay h3{
  color: var(--color-DarkBgFont);
}

#HomeBanner_bnrSideBar .carousel-slide-overlay h4{
  color: var(--fontcolor-DarkBgSubTitle);
}


#HomeBanner_bnrSideBar .carousel-slide-overlay .buttons{
  position: relative;
  bottom: 0;
}

#HomeBanner_bnrSideBar h3.film-title{
    font-size: 1.2rem;
  }

#HomeBanner_bnrSideBar .hide-for-small{
  display: none;
}

@media(max-width: 768px){
  #HomeBanner_bnrSideBar .slider{
    min-height: 380px;
  }
  
  #HomeBanner_bnrSideBar .slider-item > div.item img.carousel-film-image{
    width: 100%;  
  }

  #HomeBanner_bnrSideBar .slider-item, .slider-item > div.item{
    min-height: 380px;  
  }

  #HomeBanner_bnrSideBar .carousel-slide-overlay{
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    padding: 20px;
  width: 100%;
  height: 60%;
  }

  #HomeBanner_bnrSideBar .slider-item .film-rating{
  right: 40px;  
  }

}


/*---------------------------------------------
  QUICK BOOK
---------------------------------------------*/
#quick-book{
  background: rgba(255,255,255,var(--glass-opacity));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: 1px solid var(--border-color);
  margin: 20px;
  margin-top: 0;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

#quick-book .notification{
  background: none;
  padding: 0.5em;
  margin-bottom: -0.5em !important;
}

#quick-book .select, #quick-book .select select, #quick-book .controlis-child, #quick-book .button{
  width: 100%;
  border-radius: 0;
}

#quick-book .select select{
  font-size: 0.8em;
}

.select:not(.is-multiple):not(.is-loading)::after {
  margin-top: -.6375em;
}
@media(max-width: 768px) {
  #quick-book {
    margin: 50px 0 0 0;
  }
}

/*---------------------------------------------
  Content
---------------------------------------------*/

#Content{
  margin-top: 0;
  padding: 0;
}

#Content > section {
  padding: calc(20px + 0.75rem);
  width: 100%;
}


/*---------------------------------------------
  TABS
---------------------------------------------*/
.tabs .input{
  background: var(--color-BG);
  height: 1rem;
}
.tabs ul{
  border-color: var(--color-LightGrey);
  max-width: 1024px;
  flex-wrap: wrap;
  font-size: var(--fontsize-SubTitle);
  display: flex;
  justify-content: center;
  width: 100%;
}
.tabs ul li.is-active{
  border-bottom: solid 1px var(--color-Brand);
}
.tabs a.whats-on-filter, .tabs a.programme-info-tab {
  transition: all 0.5s;
  position: relative;
  color: var(--color-Font);
}
.tabs a.whats-on-filter:hover, .tabs a.programme-info-tab :hover{
  color: var(--color-Brand);
}
.tabs a.whats-on-filter::after, .tabs a.programme-info-tab::after{
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  width: 0;
  bottom: 0;
  background: var(--color-Brand);
  height: 1px;
  transition-property: width;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  transition: all 0.5s;
}
.tabs a.whats-on-filter:hover::after, .tabs a.programme-info-tab:hover::after{
  left: 0;
  right: auto;
  width: 100%;
  border: none;
}
.tabs a.whats-on-filter, .tabs a.programme-info-tab{
  border: none !important;
}
.tabs li.is-active a.whats-on-filter, .tabs li.is-active a.programme-info-tab{
  color: var(--color-Brand);
}
@media(max-width: 640px){
  .tabs{
    display: inline-block;
  }
  .tabs li:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)){
      /*display: none;*/
  }
  
}
/*---------------------------------------------
  Event Key
---------------------------------------------*/
.box {
  background: revert;
  box-shadow: revert;
}
ul.key {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
    font-size: 0.6rem;
    display: none;
}
ul.key li{
  display: inline-block;
}
h4.key-subtitle{display: none;}
ul.key li span.button{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--color-Font) !important;
}
ul.key li span.button:hover{
  transform: scale(1);
  cursor: default;
}

@media(max-width:767px){
  ul.key li span.button{
    font-size: 0.6rem;
    padding: 0.2rem;
  }

  ul.key span.tag{
    font-size: 0.6rem;
  }
}
/*---------------------------------------------
  Whats On
---------------------------------------------*/
#whats-on-list {
  padding: 20px;
}

@media (max-width: 768px) {
  #whats-on-list {
    padding: 0;
  }
}

#whats-on-list figure.image{
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;  
}
#whats-on-list .media-content{
  overflow: inherit;
}
#whats-on-list .boxx{
  padding: 1.2rem;
}
#whats-on-list .box{
  position: relative;
  min-height: 20rem;  
  background: rgba(255,255,255,var(--glass-opacity));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: 1px solid var(--border-color);
  margin: 0 calc(10px + 0.35rem) 20px;  
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  color: var(--color-Font);
  transition: transform 0.5s;
}
#whats-on-list .box:hover {
  transform: scale(1.01);
}

#whats-on-list .box .column.is-8{
  
}
ul.info{
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  font-size: 1rem;
}
#whats-on-list .rating-image{
  position: absolute;
  height: 1em;
  top: 10px;
  right: 10px;
}
img.film-rating{
  height: 1.5em;
  width: auto;
}
ul.info img.film-rating{
  margin-bottom: -7px;
}
.title img.film-rating{
  margin-bottom: -10px;
}
#whats-on-list ul.buttons{
  display: none;
}
#whats-on-list ul.buttons li{
    margin-top: 0;
}
#whats-on-list ul.buttons li {
   margin-right: 0;
   margin-left: 10px;
}
#whats-on-list ul.buttons li a.button{
   border: none;
}
ul.performances{
  margin: 20px 0;
  list-style: none;
  padding: 20px;
  text-align: right;
  margin-bottom: 4em;
}

@media (max-width: 768px) {
  ul.performances {
    padding: 0;
  }
}

ul.performances li.performance{
  line-height: 2rem;
  font-size: 1rem;
  position: relative;
  min-height: 3rem;
}
ul.performances li.performance span.is-3{ width: auto; min-width: 160px;}
ul.performances li.performance .date{
  left: 0;
  display: inline-block;
  width: 30%;
  font-weight: bold;
}
ul.performances li.performance .button{
  right: 0;
  min-width: 100px;
  text-transform: none;
  padding-left: 40px !important;
  height: 2rem;
  margin-left: 20px;
  margin-bottom: 0.2em;
}
ul.performances li.performance .button .fa-ticket-alt{
  position: absolute;
  left: 10px;
}
#TheVideo{
  position: relative;
}

#TheVideo .play {
    display: block;
    top: 0px;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("/PlazaCinemaLiverpool/img/icon-play.png") no-repeat center center;
    z-index: 1;
    cursor: pointer;
}
@media(max-width: 1200px){
    #whats-on-list .synopsis{
    display: none;
  }
}

@media(max-width: 1024px){
  #whats-on-list .box{
    padding-bottom: 60px;
    margin: 1rem;
  }
  #whats-on-list .box .content > .column{
  width: 100%;
  }
  #whats-on-list .box .content, #whats-on-list .box .column.is-8, #whats-on-list .column{
    padding-left: 0;
    padding-right: 0;
  }
  #whats-on-list .box .column.is-8{
  border: none;  
  }
  #whats-on-list h4.subtitle{display: none;}
  #whats-on-list .box .media{
    display: block;    
  }
  #whats-on-list figure.image {
    width: 100%;
  }
  #whats-on-list .box .media-content, #whats-on-list .subtitle.has-text-right {
    text-align: center !important;
  }
  ul.info{
    text-align: center;
    font-size: var(--fontsize-SubTitle);
  }
  #whats-on-list ul.buttons {
   position: relative; 
   bottom: 0;
   display: inline-block;
   text-align: center;
   width: 100%;
  }
  .carousel-slide-overlay h3.film-title{
    font-size: 1rem;
  }
  ul.performances li.performance .date {
   min-width: 60px; 
  }
  ul.performances li.performance {
    text-align: center; 
    padding-bottom: 2rem;
  }
  ul.performances li.performance .button{
    margin-left: 10px;
    margin-right: 10px;
  }
}

/*---------------------------------------------
  PROGRAMME DETAILS 
---------------------------------------------*/
.programme-details {
  z-index: 9;
    border-radius: var(--border-radius);
    padding: 20px;
    background: rgba(255,255,255,var(--glass-opacity));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 30px var(--shadow-color), 0 0 40px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.1);
    position: relative;  
}

@media(min-width: 769px) {
  .programme-details {
    margin-top: -200px;  
  }
}

.programme-details > .subtitle {
  /* display: none; */
}

/*---------------------------------------------
  Right Menu
---------------------------------------------*/
#right-menu .card{
  margin-bottom: 20px;
}

.SideBarToggle{
  display: none;
}

#Aside #SideBar .SideBarHeading, #Aside #SideBar .SideBarFirstHeading{
  font-family: var(--font-Title);
  font-weight: bold;
  border-bottom: solid 1px #000;
  padding: 1em 0;
  margin-top: 1em;
  margin-bottom: 1em;
}

#Aside #SideBar{
  display: none;
}

/*---------------------------------------------
  Footer
---------------------------------------------*/
footer.footer{
  margin-top: 40px;
  padding: 0;
  background: var(--color-Brand);
  color: var(--color-DarkBgFont);
}

footer .container{
  padding: 40px 40px;
}

footer .container.top{
  background: var(--color-Black);
}

footer .container.middle{
  background: var(--color-Black);
}

footer .container.bottom{
  background: #000;
  color: var(--color-BrandFont);
}

footer .title, footer .subtitle{
  color: var(--color-DarkBgFont);
}

footer .content ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

footer a{
  color: #FFF;
}

footer .bd-footer-link{
  display: block;
  float: none;
}

.bd-footer-link a:hover {
  color: white;
}

footer .subtitle{
  color: var(--color-BrandFont);
  text-decoration: underline;
}

@media(max-width: 768px){
  footer{
  text-align: center;
  }
  footer .container{
    padding: 10px;
  }
  footer .buttons{
    padding: 20px;
    text-align: center;
    display: inline-block;
  }
}

.goog-te-gadget img{
  width: auto;
}

.tweet-container{
  max-height: 140px;
  overflow-x: hidden;
  height: 140px;
  overflow-y: scroll;
}
/*---------------------------------------------
  CARDS
---------------------------------------------*/
.card{
  margin: 15px;
  background: var(--color-DarkBg);
  padding: 30px;
}

.card .button{
  background: var(--color-Brand) !important;
  color: var(--color-BrandFont) !important;
}
/*---------------------------------------------
  SEARCH
---------------------------------------------*/
.search-icon .icon.is-small.is-right{
  color: var(--color-DarkBg);
  height: 2em;
}


input#search{
  width: 0;
  border: none;
  cursor: pointer;
  height: 2.5em;
  transition: width 0.5s;
  margin-right: 10px;
  padding: 10px;
  border: none;
  border-radius: 0;
}


input#search:focus{
  width: 250px;
  color: var(--color-BrandFont);
}

/*---------------------------------------------
  NEWSLETTER
---------------------------------------------*/
#newsletter{
  background: var(--color-DarkGrey);
  padding: 4rem;
  margin-top: 4rem;
  
}

#newsletter .subtitle{
  color: var(--color-DarkBgFont) !important;
}


/*---------------------------------------------
  DATE PICKER
---------------------------------------------*/
.calendar-icon .icon.is-small.is-right{
  color: var(--color-DarkBg);
  height: 1.7em;
}


.calendar-icon .input.date-picker-x-input{
  width: 0;
  border: none;
  cursor: pointer;
}

#Content .tabs{
  overflow: inherit;
  display: flex;
  justify-content: center;
}

#Content .tabs .calendar-icon .icon.is-small.is-right{
    height: 2.55em;
}

#Content .tabs li.is-active input {
    border-bottom: solid 1px #3273dc;
  border-radius: 0;
}


.date-picker-x-container {
  position: relative;
}

.date-picker-x {
  background: var(--color-DarkGrey);
  box-sizing: content-box;
  color: var(--color-BrandFont);
  display: none;
  font: 12px/1 Arial;
  padding: 10px;
  position: absolute;
  top: 100%;
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 308px;
  z-index: 1;
}

.date-picker-x::before {
  border-color: var(--color-DarkGrey) transparent;
  border-style: solid;
  border-width: 0 10px 10px;
  bottom: 100%;
  content: "";
  left: 20px;
  position: absolute;
}

.date-picker-x.to-top {
  bottom: 100%;
  top: auto;
  -webkit-transform: translateY(-15px);
  transform: translateY(-15px);
}

.date-picker-x.to-top::before {
  border-width: 10px 10px 0;
  bottom: auto;
  top: 100%;
}

.date-picker-x.active {
  display: block;
  z-index: 99;
}

.date-picker-x * {
  box-sizing: border-box;
}

.date-picker-x .dpx-title-box {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 45px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-bottom: 10px;
}

.date-picker-x .dpx-prev,
.date-picker-x .dpx-next {
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: block;
  font-size: 22px;
  line-height: 50px;
  text-align: center;
  transition: .2s;
  width: 50px;
}

.date-picker-x .dpx-prev:hover,
.date-picker-x .dpx-next:hover {
  color: #fff;
}

.date-picker-x .dpx-title {
  display: block;
  font-size: 18px;
  line-height: 40px;
  padding: 0 10px;
}

.date-picker-x:not([data-dpx-type="year"]) .dpx-title {
  cursor: pointer;
}

.date-picker-x .dpx-content-box {
  box-sizing: content-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 288px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-top: 10px;
}

.date-picker-x .dpx-btns {
  border-top: 1px solid #ccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 10px;
}

.date-picker-x .dpx-btns .dpx-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  height: 30px !important;
}

.date-picker-x .dpx-item {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 25%;
  flex: 1 0 25%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.date-picker-x .dpx-item:not(.dpx-weekday) {
  cursor: pointer;
}

.date-picker-x .dpx-item:not(.dpx-weekday):hover {
  box-shadow: inset 0 0 0 2px var(--color-Brand), inset 0 0 0 4px var(--color-Brand);
}

.date-picker-x .dpx-weekday {
  font-size: 15px;
  height: 24px !important;
}

.date-picker-x[data-dpx-type="day"] .dpx-item {
  -ms-flex-preferred-size: 44px;
  flex-basis: 44px;
  height: 44px;
}

.date-picker-x .dpx-weekend {
 background: rgba(0, 0, 0, 0.3);
}

.date-picker-x .dpx-current{
  background: rgba(0, 0, 0, 0.4);
}

.date-picker-x .dpx-selected {
  background: var(--color-Brand);
  color: var(--color-BrandFont);
}

.date-picker-x .dpx-out {
  color: #bbb;
}

.date-picker-x .dpx-disabled {
  color: #666 !important;
  cursor: default !important;
  box-shadow: none !important;
}

.date-picker-x .dpx-disabled.dpx-current {
  box-shadow: inset 0 0 0 2px #66a3ff !important;
}


/*-------------------------------------
OSCAR
-------------------------------------*/
@font-face {
  font-family: 'icomoon';
  src:  url('/PlazaCinemaLiverpool/fonts/icomoon.eot?pa46kn');
  src:  url('/PlazaCinemaLiverpool/fonts/icomoon.eot?pa46kn#iefix') format('embedded-opentype'),
    url('/PlazaCinemaLiverpool/fonts/icomoon.ttf?pa46kn') format('truetype'),
    url('/PlazaCinemaLiverpool/fonts/icomoon.woff?pa46kn') format('woff'),
    url('/PlazaCinemaLiverpool/fonts/icomoon.svg?pa46kn#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: "\e900";
}
.icon-pencil:before {
  content: "\e905";
}
.icon-image:before {
  content: "\e90d";
}
.icon-images:before {
  content: "\e90e";
}
.icon-camera:before {
  content: "\e90f";
}
.icon-music:before {
  content: "\e911";
}
.icon-play:before {
  content: "\e912";
}
.icon-film:before {
  content: "\e913";
}
.icon-profile:before {
  content: "\e923";
}
.icon-file-empty:before {
  content: "\e924";
}
.icon-folder-download:before {
  content: "\e933";
}
.icon-price-tags:before {
  content: "\e936";
}
.icon-qrcode:before {
  content: "\e938";
}
.icon-ticket:before {
  content: "\e939";
}
.icon-credit-card:before {
  content: "\e93f";
}
.icon-phone:before {
  content: "\e942";
}
.icon-address-book:before {
  content: "\e944";
}
.icon-location:before {
  content: "\e947";
}
.icon-compass:before {
  content: "\e949";
}
.icon-clock:before {
  content: "\e94e";
}
.icon-clock2:before {
  content: "\e94f";
}
.icon-alarm:before {
  content: "\e950";
}
.icon-calendar:before {
  content: "\e953";
}
.icon-printer:before {
  content: "\e954";
}
.icon-mobile:before {
  content: "\e958";
}
.icon-undo:before {
  content: "\e965";
}
.icon-redo:before {
  content: "\e966";
}
.icon-bubble:before {
  content: "\e96b";
}
.icon-user:before {
  content: "\e971";
}
.icon-spinner6:before {
  content: "\e97f";
}
.icon-spinner11:before {
  content: "\e984";
}
.icon-lock:before {
  content: "\e98f";
}
.icon-stats-dots:before {
  content: "\e99b";
}
.icon-stats-bars:before {
  content: "\e99c";
}
.icon-bin:before {
  content: "\e9ac";
}
.icon-bin2:before {
  content: "\e9ad";
}
.icon-menu:before {
  content: "\e9bd";
}
.icon-link:before {
  content: "\e9cb";
}
.icon-attachment:before {
  content: "\e9cd";
}
.icon-star-empty:before {
  content: "\e9d7";
}
.icon-heart:before {
  content: "\e9da";
}
.icon-notification:before {
  content: "\ea08";
}
.icon-plus:before {
  content: "\ea0a";
}
.icon-minus:before {
  content: "\ea0b";
}
.icon-info:before {
  content: "\ea0c";
}
.icon-cross:before {
  content: "\ea0f";
}
.icon-checkmark:before {
  content: "\ea10";
}
.icon-play3:before {
  content: "\ea1c";
}
.icon-pause2:before {
  content: "\ea1d";
}
.icon-stop2:before {
  content: "\ea1e";
}
.icon-backward2:before {
  content: "\ea1f";
}
.icon-forward3:before {
  content: "\ea20";
}
.icon-first:before {
  content: "\ea21";
}
.icon-last:before {
  content: "\ea22";
}
.icon-previous2:before {
  content: "\ea23";
}
.icon-next2:before {
  content: "\ea24";
}
.icon-loop2:before {
  content: "\ea2e";
}
.icon-shuffle:before {
  content: "\ea30";
}
.icon-arrow-up:before {
  content: "\ea32";
}
.icon-circle-up:before {
  content: "\ea41";
}
.icon-circle-right:before {
  content: "\ea42";
}
.icon-circle-down:before {
  content: "\ea43";
}
.icon-circle-left:before {
  content: "\ea44";
}
.icon-shift:before {
  content: "\ea4f";
}
.icon-mail:before {
  content: "\ea83";
}
.icon-mail2:before {
  content: "\ea84";
}
.icon-mail3:before {
  content: "\ea85";
}
.icon-envelop:before {
  content: "\ea86";
}
.icon-google:before {
  content: "\ea88";
}
.icon-google-plus2:before {
  content: "\ea8c";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-facebook2:before {
  content: "\ea91";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-whatsapp:before {
  content: "\ea93";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-youtube2:before {
  content: "\ea9e";
}
.icon-twitch:before {
  content: "\ea9f";
}
.icon-vimeo:before {
  content: "\eaa0";
}
.icon-vimeo2:before {
  content: "\eaa1";
}
.icon-lanyrd:before {
  content: "\eaa2";
}
.icon-dribbble:before {
  content: "\eaa7";
}
.icon-behance:before {
  content: "\eaa8";
}
.icon-dropbox:before {
  content: "\eaae";
}
.icon-tumblr:before {
  content: "\eab9";
}
.icon-tumblr2:before {
  content: "\eaba";
}
.icon-appleinc:before {
  content: "\eabe";
}
.icon-soundcloud:before {
  content: "\eac3";
}
.icon-soundcloud2:before {
  content: "\eac4";
}
.icon-skype:before {
  content: "\eac5";
}
.icon-reddit:before {
  content: "\eac6";
}
.icon-linkedin:before {
  content: "\eac9";
}
.icon-linkedin2:before {
  content: "\eaca";
}
.icon-pinterest:before {
  content: "\ead1";
}
.icon-pinterest2:before {
  content: "\ead2";
}
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, #Detail, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}

.onecol {
width: 4.85%;
}

.twocol {
width: 13.45%;
}

.threecol{
width: 22.05%;
}

.fourcol {
width: 30.75%;
}

.fivecol {
width: 39.45%;
}

.sixcol {
width: 48%;
}

.sevencol {
width: 56.75%;
}

.eightcol {
width: 65.4%;
}

.ninecol{
width: 74.05%;
}

.tencol {
width: 82.7%;
}

.elevencol {
width: 91.35%;
}

.twelvecol {
width: 100%;
float: left;
}

.last, #Detail {
margin-right: 0px;
}

img, object, embed {
max-width: 100%;
}

img {
height: auto;
}


/* Smaller screens */

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

body {
font-size: 0.8em;
line-height: 1.5em;
}

.row, body, .container, #WizardSteps, #Content  {
width: 100%;
min-width: 0;
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
padding-right: 10px;
}

}


/* Mobile */

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

body {
font-size: 16px;
-webkit-text-size-adjust: none;
}

.row, body, .container, #WizardSteps, #Content  {
width: 100%;
min-width: 0;
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
padding-right: 10px;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, #Detail, .tencol, .elevencol, .twelvecol {
width: auto;
float: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}

.hide-for-small{
  display: none;
}
}

#WizardSteps{
display: none;
}

#Detail{
 min-height: 40em;
 width:100%;
}

#Content .columns{
  margin-top: 0;
}

.WebTab{
  display: none;
}

.WebTab a{
  display: none;
}

.SelectedWebTab a{
  display: none;
}

.LoyaltySchemeHeading {
  font-weight: bold; margin-top: 20px;
}
.RegisteredCardHeading {
  font-weight: bold; margin-top: 20px;
  display: none;
}
.RegisteredCardNumber {
  font-style: italic;
  display: none;
}

.RegisteredCardNumber + div {
  display: none;
}

#btnRegisterMembershipCard {
  display: none;
}


.DiscountHeading {
  font-weight: bold; margin-bottom: 2px;
}
.DiscountSection button {
  margin-top: 10px; margin-bottom: 5px;
border: none;
font-size: var(--fontsize-SubTitle);
padding: 1rem 0;
}
.DiscountSection {
margin-top: 20px;
display: inline-block;
padding: 20px;
background: #EFEFEF;
width: 100%;
}
.DiscountSubHeading {
  font-weight: bold; margin: 10px 0;
}

.MembershipSaleHeading {
  margin-left: 20px; 
}
.TicketMembershipPatron {
  display: block; margin: 0 10px;
}
.TicketForMember {
  font-weight: bold; margin-top: 10px; margin-left: 20px; margin-bottom: 5px;
}
.TicketMembershipPatrons {
  display: flex; margin: 0; padding-left: 20px;
}
.OrGuest {
  font-size: 8pt;
}

.programme{
  padding-bottom: 10px;
  border-bottom: 1px solid #E9E9E9;
  margin: 0 0 20px 0;
}

.programme > h1.title{
  display: block;
  border-bottom: 1px solid #E9E9E9;
  padding-bottom: 10px;
  color: #060606;
  font-style: normal;
  line-height: 1.17em;
  margin: 0px 0px 10px;
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight: 400;
}

.programme h2.title{
  text-decoration: none;
  margin-top: 20px;
}

form.UnallocatedSeating{
  background: var(--color-BG);
  padding: 20px;
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.programme > .showtimes > h2.subtitle{
  display: block;
  border-bottom: 1px solid #E9E9E9;
  padding-bottom: 10px;
  color: #060606;
  font-style: normal;
  line-height: 1.17em;
  margin: 5px 0px 10px;
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight: 400;
}

.programme .PerformanceListDate{
  width: 100%;
}

#listings.content.programme-info-content ul.performances{
  text-align: left;
}

.programme .StartTimeAndStatus a, .programme .StartTimeAndStatus b a{
  padding: 2px 5px;
  text-decoration: none;
  font-weight: 300;
  margin: 3px;
  line-height: 2em;
}
.tile.share {display: none;}
ul.share{
  text-align: center;
  margin-top: 0.75rem;
}

ul.share li{
  display: inline-block;
  margin: 1em 0.5em;
}

#PopupException, .PopupDialogBox {
    position: fixed;
  top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  width: 95%;
    max-width: 500px;
    margin: auto;
    z-index: 10000;
  background: #F0F0F0;
  padding: 20px 20px 80px 20px;
  line-height: 1.5em;
  min-height: 180px;
  -webkit-box-shadow: 1px 1px 50px 1px #000000;
box-shadow: 1px 1px 50px 1px #000000;
}
#ReservationsHaveExpired, #ReservationsWillExpireIn{
padding: 5px 10px;
font-size: 0.8rem;
font-family: var(--font-Regular);
font-weight: normal;
display: inline;
width: ;
width: 100%;
float: left;
}
#ReservationsHaveExpired{
background: var(--color-LightGrey);
}
#ReservationsHaveExpired{
background: red;
color: white;
}

#Detail.PerformanceList{overflow-x: scroll; overflow-y: hidden;}

#PopupException .Button.Close, .PopupDialogBox .Button.Close {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.PopupDialogHeading {
  font-weight: bold; margin-bottom: 2px;
}

@media (max-width: 767px) {
  #PopupException, .PopupDialogBox {
    
  }
}

#PopupException .EmailAddress{
  font-weight: 600;
  color: #333;
  font-size: 1.2em;
}
#PopupException .Login, #PopupException .PasswordReset{
  margin: 10px 0;
}
#PopupException .ExceptionMessage{
  margin: 10px 0;
  max-height: 10em;
  overflow: hidden; /* or scroll? */
  color: #990000;
}

#Detail.LoginPrompt form{
padding: 20px;
margin: 20px 0;
}

#SkipThisStep span {
  display: none;
}

#SkipThisStep a{
font-size: 0;
  box-shadow: inset 1px 1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight);
  overflow: hidden;
  position: relative;
  color: var(--color-text) !important;
  border-radius: var(--border-radius);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 1px rgba(0,0,0,0.3);
  background-color: var(--lg-bg-color) !important;
  border: none !important;
  cursor: pointer;
  line-height: 2.2;
  margin: 0;
  text-decoration: none;
  padding: 0.1em 1em;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  overflow: hidden;
}

#SkipThisStep a::after {
  content: 'Continue as guest';
  font-weight: bold;
  color: white;
  background: var(--color-ButtonStandardBg);
  line-height: 3rem;
  font-size: 1rem !important;
  text-transform: uppercase;
  font-family: var(--font-Menu);
  font-weight: bold;
  font-size: var(--fontsize-Button);
  text-transform: uppercase;    
  padding-left: 20px; 
  padding-right: 20px; 
}

#Overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background: #333;
  display: none;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  /* IE 5-7 */
  filter: alpha(opacity=90);
  /* Netscape */
  -moz-opacity: 0.9;
  /* Safari 1.x */
  -khtml-opacity: 0.9;
  /* Good browsers */
  opacity: 0.9;
}


input[type=text], input[type=password], input[type=email]{
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0;
  width: 100%;
  vertical-align: top;
  background: #FFF;
  border: solid 1px var(--color-DarkBg);
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 1rem;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus{
  border: solid 1px var(--color-Brand);
  background: #FFF;
}
select{
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0;
  vertical-align: top;
  padding: 0.5em;
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #FFF;
}
input[type=radio], input[type=checkbox]{
  margin: 1em;
}

::-webkit-input-placeholder, input:-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
  color:#CCC;
  font-style: italic;
}
label.SelectLabel, label.TextLabel {
  display: block;
  padding: 0;
  margin-top: 2em;
  width: 100%;
  color: #696969;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.PersonType select{
  width: 100%;
  max-width: 100px;
}
.DetailSubHeading, .EditPatronHeading{
  clear: both;
  display: block;
  float: left;
  width: 100%;
  padding-bottom: 10px;
  margin: 5px 0px 10px;
}
.EditPatronHeading{
display: none;
}
.InlineValidationMessage{
  font-size: 0.8em;
  color: #FFF;
  background: #990000;
  width: 100%;
  position: relative;
  top: -5px;
  padding: 3px;
}
@media (max-width: 767px) {
  label.SelectLabel, label.TextLabel {
    text-align: right;
    font-size: 1.2em;
    line-height: 2.5em;
    margin-right: 10px;
  }
#CardMMYY .sixcol{
  float: left; width: 45%;
}
#CardMMYY .sixcol.last{
  float: right; width: 45%;
}
}
.DateInputLabel {
  display: inline;
}
.AllocatedSeating .Button.AddToOrder1{
  display: none;
}
.PaymentHeading, .PaymentPageSeparator {
 display: none;
}
iframe{
  width: 100%;
}
@media(max-width: 480px){
  iframe{
    max-width: 480px;
  }
}

.PaymentMethod{
  background: rgba(0,0,0, 0.2);
  padding: 20px;
  display: inline-block;
  width: 100%;
  margin-bottom: 1em;
}
@media(max-width: 767px){
  .PaymentMethod{
    padding-left: 0;
    padding-right: 0;
  }
}

#Detail.PaymentPrompt .sixcol{
  width: 100%; /* make the fields all full width */
}
@media (min-width: 767px) {
  .ToolTip {
    visibility:hidden;
    opacity:0; /* http://www.greywyvern.com/?post=337 */
    -webkit-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    -moz-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    -ms-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    -o-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    opacity:0;
    visibility:hidden;
    position: absolute;
    background: #333;
    color: #FFF;
    font-size: 10px;
    border-radius: 5px;
    padding: 5px;
    width: 160px;
    margin: 10px 0 0 3px;
    z-index: 9;
    line-height: 2em;
  }
  .ToolTip:before {
     border:5px solid transparent;
     border-right-color:#333;
     content:"";
     display:block;
     width:0;
     height:0;
     position:absolute;
     top:3px;
     left:-10px;
     z-index:2;
  }
  .ClickPayOnce{
    visibility:hidden;
    opacity:0; /* http://www.greywyvern.com/?post=337 */
    -webkit-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    -moz-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    -ms-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    -o-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    opacity:0;
    visibility:hidden;
    position: absolute;
    background: #333;
    color: #FFF;
    font-size: 10px;
    border-radius: 5px;
    padding: 5px;
    width: 200px;
    margin: 10px 0 0 3px;
    z-index: 9;
    line-height: 2em;
  }
  .ClickPayOnce:before {
     border:5px solid transparent;
     border-right-color:#333;
     content:"";
     display:block;
     width:0;
     height:0;
     position:absolute;
     top:3px;
     left:-10px;
     z-index:2;
  }
  .ConfirmAndPay{
    margin-bottom: 20px;
  }
  input#confirm:hover + .ClickPayOnce, input#confirm:active + .ClickPayOnce, input#confirm:focus + .ClickPayOnce, input:focus + .ToolTip {
    visibility:visible;
    opacity:1;
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -ms-transition-delay:0s;
    -o-transition-delay:0s;
    transition-delay:0s;
  }
}
@media (max-width: 766px) {
  .ToolTip {
    position: relative;
    background: #333;
    color: #FFF;
    font-size: 10px;
    border-radius: 0 0 5px 5px;
    padding: 5px;
    width: 100%;
    margin: -5px 0 10px 0;
    z-index: 9;
    line-height: 2em;
  }

  input:focus + .ToolTip {
    display: block;
  }

  .ClickPayOnce{
    display: block;
    position: relative;
    background: #333;
    color: #FFF;
    font-size: 10px;
    border-radius: 5px 5px;
    padding: 5px;
    width: 100%;
    margin: -5px 0 10px 0;
    z-index: 9;
    line-height: 2em;
  }
}
.MaestroSolo{
  background: #F0F0F0;
  padding: 10px;
}
.MaestroSolo input{

}
@media (max-width: 767px) {
  label.SelectLabel, label.TextLabel {
    display: none;
  }
  .ToolTip {
    display: none;
  }
}
.PersonType select{
  max-width: 100px;
}
.PersonType .PersonTypeDescription{
  font-size: 1em;
  display: inline-block;
  line-height: 1.2em;
  margin-left: 20px;
  line-height: 3em;
  min-width: 180px;
  text-align: left;
}

#SeatingPlanDiv{
    /*width: 100% !important;*/
    display: block;
    clear: both;
    margin-top: 20px;
  }
.SelectPersonTypeOverlay {
  background: white;
  width: 420px;
  padding: 10px;
  border: 2px solid 060606;
  -webkit-box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.75);
  box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.75);
  color: #000;
}

DIV.SelectPersonTypeOverlay a {
  -webkit-transition: color,background-color 0.2s ease-in-out;
  transition: color,background-color 0.2s ease-in-out;
}
form.UnallocatedSeating p {
  display: flex;
  justify-content: center;
}
.SelectPersonTypeOverlayPrompt {
  margin-top: 8px;
  margin-bottom: 8px;
}

.SelectPersonTypeOverlaySeatNumber {
  padding: 0.5em 0.2em;
  border-top: none;
  display: inline;
  line-height: 3em;
  background-color: var(--color-Brand);
  color: var(--color-BrandFont);
  font-weight: 600;
}

.PersonTypeOverlayPersonTypeAndPrice {
  line-height: 2em;
  height: 2em;
  margin-bottom: 5px;
}

.PersonTypeOverlayPersonTypeAndPrice a {
  text-indent: 5px;
  display: inline-block;
  padding: 0 10px;
  background: #EFEFEF;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;

}

.PersonTypeOverlayPersonTypeAndPrice a:hover {
  background: #CCC;
  color: #060606;
}

.PersonTypeOverlayConditionsOfEntry {
  color: black;
  font-size: 8pt;
  margin-left: 10px;
}

@media (max-width: 767px) {
  .PersonType select{
    max-width: 100px;
  }
  .PersonType .PersonTypeDescription{
    font-size: 1em;
    display: inline-block;
    width: 50%;
    line-height: 1.2em;
  }
}

.checkbox:focus, .radio:focus, input[type="checkbox"]:focus, input[type="radio"]:focus { outline:1px dotted #36393b; }

DIV.ProgrammeLink{ font-size: 12pt; font-weight: bold; padding-top: 10px; }
SPAN.Rating{ font-size: 12pt; font-weight: bold; }

SPAN.PerformanceNotesSmall{
  font-size: 8pt;
  white-space: nowrap;
  display: block;
}

SPAN.PerformanceStatusSmall{
  font-size: 8pt;
  white-space: nowrap;
}

SPAN.ConditionsOfEntry{
  font-size: 8pt;
  white-space: nowrap;
}

DIV.PersonType{ 
  padding: 5px;
  margin: 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
DIV.SeatType{ padding-top: 20px; font-size: 12pt; font-weight: bold; }

DIV.PerformanceDate { padding-top: 5px; font-size: 12pt; font-weight: bold; }
SPAN.PerformanceEndTime { font-size: 8pt; font-weight: normal; }
SPAN.PerformanceSection { font-size: 12pt; font-weight: bold; }
DIV.PerformanceStatus { padding-top: 15px; font-size: 12pt; font-weight: bold; }

DIV.SaleItem{ min-height: 30px; padding: 5px; }
TD.SaleItemDescription{ width: auto; }
TD.SaleItemPromptText{ padding-right: 5px; width: 30px; text-align: right; }
TD.SaleItemInput{ padding-right: 5px; }
TD.SaleItemPriceText{ }
/*---------------------*/
/*---- Month View -----*/
/*---------------------*/

.week, .days-of-week {
  display: flex;
}

.day {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.calendar-nav {
  margin: 1em;
  text-align: center;
  font-size: 2em;
}
.calendar-nav > div{
  display: inline-block;
}
#current-month{
  min-width: 8em;
}
.month {
  margin-top: 0;
  padding-top: 0;
  display: none;
}
.month.active{
  display: block;
}
.week {
  min-height: 10em;
}
.day {
  color: black;
  font-weight: bold;
  padding: 5px;
  background-color: #eee;
  border: solid 1px #000;
}
.day span.date {
  display:block;
}
.date-display{
  opacity: 0.6;
}
.day a {
  font-size: 0.8em;
  display: block;
  background: rgba(0, 0, 0, 0.4);
  margin: 2px;
  padding: 5px 8px;
  line-height: 1.2em;
}

#prev-month, #next-month {
  cursor: pointer;
  background: white;
  line-height: 1.5em;
  border-radius: 50%;
  height: 1.5em;
  width: 1.5em;
  display: inline-block;
  visibility: hidden;
}
#prev-month.active, #next-month.active {
  visibility: visible !important;
}
.day-in-past {
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0),
    rgba(0,0,0,0) 10px,
    rgba(0,0,0,0.15) 10px,
    rgba(0,0,0,0.15) 20px
  );
}

.day-in-past span{
  color: #aaa;
}

.day.non-day{
  background: rgba(255, 255, 255, 0.7);
}

.today {
  background: rgba(255, 0, 0, 0.2);
}

.day .mobile{
  display: none;
}

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

  .week {
    display: block;
    height: auto;
    min-height: 0px;
  }

  .day {
    margin: 0 auto 5px !important;
    display: block;
    font-size: 1.3em;
  }

  .day > span{
    font-size: 0.8em;
  }

  .day-in-past {
    display: none;
  }

  .month-view-nav {
    margin-bottom: 10px;
    font-size: 1.5em;
  }

  .day .mobile{
    display: inline;
  }
}
.SocialDistanceSeatInTheirBubble, .SocialDistanceSeatInMyBubble {
  border-radius: 50%;
  background-color: rgba(136, 201, 252, 0.3);
}

.SocialDistanceSeatInMyBubble {
  position: absolute;
  height: 20px;
  width: 20px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 1;
}

DIV.SelectedSeat {
  z-index: 2;
}

.SelectPersonTypeOverlay {
  background: white;
  width: 350px;
  padding: 10px;
  border: 2px solid 060606;
  -webkit-box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.75);
  box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.75);
  color: #000;
}

.SelectPersonTypeOverlayPrompt {
  margin-top: 8px;
  margin-bottom: 8px;
}

.SelectPersonTypeOverlaySeatNumber {
  padding: 0.5em 0.2em;
  border-top: none;
  display: inline;
  line-height: 3em;
  background-color: var(--color-Brand);
  color: var(--color-BrandFont);
}

.PersonTypeOverlayPersonTypeAndPrice {
  line-height: 2em;
  height: 2em;
  margin-bottom: 5px;
  display: inline-block;
}

.PersonTypeOverlayPersonTypeAndPrice a {
  text-indent: 5px;
  display: inline-block;
  padding: 0 10px;
  background: #EFEFEF;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;

}

.PersonTypeOverlayPersonTypeAndPrice a:hover {
  background: #CCC;
  color: #060606;
}

#Detail.PerformanceList{overflow-x: scroll; overflow-y: hidden;}

#UpsellForm{
  padding: 20px;
    background: rgba(0,0,0,0.2);
  margin: 20px 0;
  display: inline-block;
  width: 100%;
}


.SelectPersonTypeOverlayCancel {
  margin-top: 10px;
}

DIV.SelectPersonTypeOverlayCancel a {
  display: block;
  text-align: center;
  border: 2px solid #991624;
  height: auto;
  padding: 2px;
}

DIV.SelectPersonTypeOverlayCancel a.Button:hover {
  background-color: #991624;
  transition: color,background-color 0.2s ease-in-out;
  -webkit-transition: color,background-color 0.2s ease-in-out;
  color: white !important;
  transform: none;
}

DIV.SelectedSeat {
  background: var(--color-Brand);
  color: white;
  line-height: 1.2em;
  border-radius: 50%;
}

DIV.SelectedSeat SPAN {
  display: block;
  margin-left: 1px;
  margin-top: 1px;
  text-align: center;
}

@media (max-width: 767px) {
  DIV.SelectPersonTypeOverlay {
    position: fixed !important;
    left: 1% !important;
    top: 80px !important;
    width: 98% !important;
    font-size: 1.2em;
    line-height: 1.5em;
  }
  #SeatingPlanDiv{
    /*width: 100% !important;*/
    display: inline-block;
    clear: both;
    margin-top: 20px;
  }
  .SeatingPlanProtector{
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background: #333;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* IE 5-7 */
    filter: alpha(opacity=50);
    /* Netscape */
    -moz-opacity: 0.5;
    /* Safari 1.x */
    -khtml-opacity: 0.5;
    /* Good browsers */
    opacity: 0.5;
  }
  .PersonTypeOverlayPersonTypeAndPrice a {
    display: inline-block;
    padding: 0 10px;
  }
}

/*----------------------------------------------------------------------
  ORDER DETAILS/TABLES
----------------------------------------------------------------------*/
/* Price Table */

.PriceGroup{
  clear: both;

}

.PriceGroupSeatType{
  float: left;
  padding: 5px;
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight: 400;
}

.PriceGroupSeatType tr{
  border-bottom: 1px solid #E9E9E9;
}

.PriceGroupSeatTypeHeading{
  display: block;
  font-style: normal;
  line-height: 1.17em;
  margin: 0px 0px 10px;
  text-transform: uppercase;
}

.PriceGroupPersonTypeQuantity{
  text-align: center;
}

.PriceGroupPersonTypeDescription, .PriceGroupPersonTypePrice{
  padding-left: 5px;
  padding-right: 5px;
}



.ViewOrder table, .DiscountsPrompt table, .PaymentPrompt table {
  width: 100%!important;
  border-spacing:0; 
    border-collapse:collapse; 
  margin-top:10px;
}

.ViewOrder table td, .DiscountsPrompt table td, .PaymentPrompt table td {
  vertical-align: middle;
  padding:5px 6px;
}

.OrderItem, .OrderDetails, .OrderPriceToPay, .OrderDelete {
  border-bottom: solid 1px var(--color-LightGrey);
}

.ViewOrder TD.OrderDelete, .DiscountsPrompt TD.OrderDelete, .PaymentPrompt TD.OrderDelete {
  vertical-align: top!important;
}

.ViewOrder table th, .DiscountsPrompt table th, .PaymentPrompt table th, .DiscountSubHeading {
  padding:5px 6px;
  background-color: rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
}

.ViewOrder table b, .DiscountsPrompt table b, .PaymentPrompt table b {
  text-transform: uppercase;
  font-size: 16px;
}

.ContinueButton {
  float:right;
  margin-left:5px;
  margin-top:10px;
}

.BackButton {
  float:left;
  margin-top:10px;
}

.PaymentHeading {
  border-top:1px solid #aaa;
  padding-top:20px;
  margin-top:20px;
  text-transform: uppercase;
}

/*----------------------------------------------------------------------
  NOTIFICATION
----------------------------------------------------------------------*/
.notification {
  background: var(--color-Black);
  color: var(--color-Font);
}
/*----------------------------------------------------------------------
  APPLY MEMBERSHIP PAGE
----------------------------------------------------------------------*/
.MembershipSection{
 background: var(--color-LightGrey);
  margin-bottom: 20px;
  font-size: 0.8em;
}
.member{
  margin-bottom: 10px;
}
.MembershipSectionHeading{
  display: block;
  background: var(--color-DarkGrey);
  padding: 5px;
  font-weight: bold;
}
.MembershipSection .Button{
  padding: 5px !important;
  margin: 0 !important;
  margin-right: 10px !important;
  line-height: 20px;
  text-align: center;
  display: inline-block;
  min-width: 30px;
  line-height: 1em;
  font-size: 1em;
}
.MembershipSectionHeading .minus.Button, .MembershipSectionHeading.expanded .plus.Button{
  display: none;
}
.MembershipSectionHeading.expanded .minus.Button, .MembershipSectionHeading .plus.Button, .selectable_benefit_membership_details, .selectable_benefit_membership, .selectable_benefit_membership_info{
  display: inline-block;
}
.MembershipSectionContent{
  padding: 10px;  
}
.member_name, .ticket_sale_heading, .selectable_benefit_heading{
  font-weight: bold;
  margin-bottom: 5px;
}
.membership_sale, .ticket_sale, .selectable_benefit{
  background: var(--color-BrandFont);
  padding: 5px 10px;
  margin: 0 0 10px 0;
}
.membership_type, .membership_description, .membership_joint_with, .membership_period, .membership_renew, .membership_status, .membership_info{
  display: inline-block;
  float: left;
  margin-right: 10px;
}
.membership_status{font-weight: bold;}
.membership_status_expired{color: red;}
.membership_status_cancelled{color: red;}
.membership_status_active{color: green;}
.membership_status_expring_soon{color: orange;}
.membership_status_not_yet_active{color: purple;}
.info_non_member_has_been_assigned_to_ticket {}
.info_member_has_been_assigned_to_ticket {color: green; font-weight: bold;}
.error_member_has_not_been_assigned_to_ticket {color: red; font-weight: bold;}

.MembershipSectionContent ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
@media(max-width: 768px){
  .ticket_sale_heading, .selectable_benefit_heading{
    display: none;
  }
}

/* Make the info button an icon*/
.membership_info > button:nth-child(1), .Edit.Button, .OrderDelete .Button{
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 0;
  border: none;
}
.membership_info > button:nth-child(1)::before, .Edit.Button::before, .OrderDelete .Button::before {
  font-size: 0.8rem;
  font-weight: bold;
}
.OrderDelete .Button::before {
  padding: 0.5em;
  float: right;
}
.membership_info > button:nth-child(1)::before {
  content: "\ea0c";
}
.OrderDelete .Button::before{
  content: "\e9ad";
}
.Edit.Button::before {
  content: "\e905";
}
/*Change the Heading of the page*/
#Detail.DiscountsPrompt .DetailHeading{
  visibility: hidden;
  position: relative;
}
#Detail.DiscountsPrompt .DetailHeading::before{
  content: 'Apply Discounts';
  visibility: visible;
  display: inline-block;
  width: 100%;
  position: absolute;
  left: 0;
}

#dlgTurnOnAutoRenewMembership {
  max-width: 600px;
  top: 60px;
  min-height: 400px;
}

.TurnOnAutoRenewMembershipVerifyCardIframe {
  min-height: 300px;
}

#dlgTurnOnAutoRenewMembership iframe {
  width: 100%;
  height: 300px;
}

#UpsellForm .SaleItemInput input {
  min-width: 60px;
}

 #MyOrderSimpleMenu { display: none; }

/* Mustard Flavoured Additions 2023-11-08 */
#TopMenu {position: sticky; top: 0; z-index: 999;}
@media(max-width: 768px){#TopMenu{font-size: 0.6rem;}}
#quick-book {}
@media(max-width: 768px){#quick-book{top: 50px;}}
#HomeBanner_CinemaTemplateV4Banner1 ul.buttons li:first-child:not(:only-child) {display: none;}

/* new carousel */

.carousel-slide-overlay h4 {
  display: none;
}
#HomeBanner_CinemaTemplateV4Banner1 .slider-item .film-rating {
  right: 20px;
  top: 120px;
  z-index: 2;
}
#HomeBanner_CinemaTemplateV4Banner1 .carousel-slide-overlay {
  position: absolute;
  top: calc(100% - 220px);
  right: 0;
  bottom: 0;
  padding: 60px 20px 80px 20px;
  width: 100%;
  color: var(--color-DarkBgFont);
  height: 220px;
  pointer-events: none;
}

#HomeBanner_CinemaTemplateV4Banner1 .carousel-slide-overlay::before{
  content: ""; 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  backdrop-filter: blur(5px) saturate(220%); 
  background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 30%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0.1) 85%, rgba(255, 255, 255, 0.1) 100% );
  mask-image: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.5) 55%, black 75% );
  z-index: 1;
}

.carousel-slide-overlay .buttons {
  position: absolute;
  bottom: 40px;
  right: 40px;
}
@media (max-width: 1024px) {
  .carousel-slide-overlay h3.film-title {
    max-width: 80%;
  }
}
@media(max-width: 768px){
  .carousel-slide-overlay .buttons {
   position: absolute;
   bottom: 25px;
   right: 10px;
  }
  #HomeBanner_CinemaTemplateV4Banner1 .carousel-slide-overlay {
   padding: 5px;
   top: 120px;
   bottom: 0 !important;
   height: 80px;
  }
  #HomeBanner_CinemaTemplateV4Banner1 .slider-item, .slider-item > div.item {
    min-height: 180px;
  }
  #HomeBanner_CinemaTemplateV4Banner1 .slider {
    min-height: 180px;
  }
}

#Detail.PaymentPrompt > div:nth-child(10){display: none;}

/* Lining Up Sign-Up on Advert Box */
#HomeBanner_bnrSideBar .carousel-slide-overlay .buttons {
    position: relative;
    bottom: 0;
    left: 1%;
    display: flex
;
    justify-content: center;
}

#Detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 980px;
  width: 100%;
  text-align: center;
  padding: 100px 0 100px;
}

.DetailHeading {
  font-size: var(--fontsize-SubTitle);
}

@media(min-width: 769px) {
  #PatronDetails form, #Detail.PasswordResetRequestPrompt form, #Detail.ChangePasswordPrompt form {
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #PatronDetails .row, #Detail.PasswordResetRequestPrompt .row, #Detail.ChangePasswordPrompt .row {
    width: 100%;
  }
  #PatronDetails .Button, #Detail.PasswordResetRequestPrompt .Button, #Detail.ChangePasswordPrompt .Button {
    max-width: 600px;
  }
  #PatronDetails .sixcol, #Detail.LoginPrompt .sixcol, #Detail.PasswordResetRequestPrompt .sixcol, .PaymentMethod .sixcol, #Detail.ChangePasswordPrompt .sixcol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  width: 100%;
  }
  #PatronDetails .sixcol label, #PatronDetails .sixcol input, #Detail.LoginPrompt .sixcol label, #Detail.LoginPrompt .sixcol input, #Detail.PasswordResetRequestPrompt .sixcol input, #Detail.PasswordResetRequestPrompt .sixcol label, .PaymentMethod .sixcol input, .PaymentMethod .sixcol label, #Detail.ChangePasswordPrompt .sixcol input, #Detail.ChangePasswordPrompt .sixcol label {
    width: 50%;
  }
  #PatronDetails .sixcol label, #Detail.LoginPrompt .sixcol label, #Detail.PasswordResetRequestPrompt .sixcol label, .PaymentMethod .sixcol label, #Detail.ChangePasswordPrompt .sixcol label {
    text-align: right;
    padding-right: 20px;
    margin-top: 0;
  }
  
  #ShouldRememberLogin, #ShouldRememberLogin + label {
    display: none;
  }
  
  .PaymentMethod .twelvecol {
    display: inline-flex;
    justify-content: center;
  }
  .PaymentMethod .twelvecol .Button{
    min-width: 600px;
  }  

  #Detail.AccountSummary {
    display: flex;
      flex-direction: column;
      align-items: center;
  }
  #Detail.AccountSummary .Button{
    font-size: 0.8rem;
  }
}

.card {
  transition: transform 0.5s;
}

.card:hover {
  transform: scale(1.05);
}

.LoginToJoinWaitingList.ListNotFull.PatronLoggedIn { display: none; }
.LoginToJoinWaitingList.ListNotFull.PatronNotLoggedIn { display: block; }
.LoginToJoinWaitingList.ListFull { display: none; }
.WaitingListIsFull.ListFull { display: block; }
.WaitingListIsFull.ListNotFull { display: none; }