@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
                                                                           

html{font-size: 16px;}

body{                                              
  --width-Max: 1300px;
  
  --color-BG: #000;
  --color-BG2: #333;
  --color-BG-Light: #FFF;

   --color-White: #FFF;
  --section-boxshadow: (0, 0, 0, 0.2) 0px 0px 10px 0px inset;
  --tabs-boxshadow: 0px -24px 32px -13px rgba(26.999999999999975, 7.923913043478253, 18.623109640831743, 0.26);
  --card-boxshadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);

  --color-Font: #FFF;
  --color-Font-Dark: #333;

  --color-DarkBg: #333333;
  --color-DarkBgFont: #FFF;
  --color-DarkBgFontHover: #8D8D92;
  --color-Brand: #e20713;
  --color-BrandLight: #f93943;
  --color-BrandDark: #333;
  --color-Brand2: #000;
  --color-BrandFont: #FFF;

  --color-DarkGrey: #272727;
  --color-VDarkGrey: #333333;
  --color-LightGrey: #f3f3f3;
  --color-BrandBlue: #1b2452;

  --menu-fontsize: 16px;
  --menu-fontweight: 600;
  --menu-lineheight: 40px;

  --calendar-colorBG: #FFF;
  --calendar-colorFont: #1A1A1A;
  --calendar-colorFontInactive: #CCC;
  
  --fontsize-Title: 29px;
  --fontsize-TitleMobile: 32px;
  --fontsize-SubTitle: 16px;
  --fontsize-FilmTitle: 16px;
  --fontsize-Button-small: 10px;
  
  --fontsize-BoxTitle: 16px;
  --fontsize-BoxText: 16px;
    
  --color-ButtonStandardBorder: #000;
  --color-ButtonStandardBg: #fcfcff;
  --color-ButtonStandardFont: var(--color-Brand);
  
  --color-ButtonActionBorder: #000;
  --color-ButtonActionBg: var(--color-Brand);
  --color-ButtonActionFont: #FFF;
  
  width: auto !important;

  --font-Regular: 'Montserrat', sans-serif;
  --font-Title: 'Open Sans', sans-serif;
  font-family: var(--font-Regular);
  
  --carousel-height-max: 500px;
  --carousel-height-1200: 400px;
  --carousel-height-980: 500px;
  --carousel-height-768: 500px;
  --carousel-height-480: 520px;
}


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

.hidden{
  display: none !important;
}

#ContentWrapper{
  background: var(--color-BrandFont);
}

.container{
  max-width: var(--width-Max);
  padding: 10px 20px;
  z-index: 1;
}


.container > .container{
  padding-bottom: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.container > .container > form{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 680px;
  background: var(--color-BG2);
  padding: 20px;
  width: 100%;
}
.container > .container > form > .field{
  width: 100%;
}

.label {
  color: var(--color-Font);
}

#Content{
  display: inline-block;
  clear: both;
}

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

.subtitle{
  color: var(--color-LightGrey);
}

h1.is-underlined, h2.is-underlined{
  font-weight: bold;
  font-size: 2rem;
}

@media(max-width: 768px){
  h1, h2, h3, h4, .title, .DetailHeading{
  font-size: var(--fontsize-TitleMobile);  
  }
}

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

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

.subtitle{
  text-decoration: none !important;
  padding: 0 8px;
  font-family: var(--font-Regular);
  display: inline-block;
}

.is-underlined{

}

.is-underlined > span{
 /*background: linear-gradient( 180deg ,rgba(234, 109, 169, 0) 50%, rgba(234, 109, 169, 100%) 1%);*/
 padding: 0 10px;
}

@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: 1rem;
}

#TopMenu .container{
  background: #333;
}


#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-BG2);
}


#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 #SideBar{
    display: inline-block;
  }

  #TopMenu #BasketForMobile #SideBar .SideBarMenu{
    display: none;
  }

  #TopMenu #BasketForMobile #SideBar #MyOrderMenu.SideBarMenu{
    display: inline;
  }

  #TopMenu #BasketForMobile #SideBar #MyOrderMenu.SideBarMenu .SideBarItem{
    display: none;
  }
  #TopMenu #BasketForMobile #SideBar #MyOrderMenu.SideBarMenu #MyOrderSimpleMenu.SideBarItem{
    display: inline-block;
  }
}


/*---------------------------------------------
  TOP - SIDEBAR
---------------------------------------------*/
#SideBarToggleMenu{display: none !important;}

#SideBar{
  display: flex;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 9999;
  text-align: right;
}

@media(min-width: 769px){
  #SideBar{  
   position: fixed;
  }
}

@media(max-width: 768px){
  .container.is-pulled-up #SideBar{
    display: none;
  }
}

.SideBarItem{
  display: inline-block;
  font-family: var(--font-Regular);
  font-size: 12px;  
  margin: 0 10px;
}

.SideBarItem a{
  color: var(--color-Brand);
  font-weight: 600;
}

#SideBarHeader, .SideBarFirstHeading, .SideBarHeading, #AccountPasswordReset, #AccountCreateAnAccount, #MyOrderMenu > .SideBarItem {display: none !important}
#MyOrderMenu > #MyOrderSimpleMenu.SideBarItem   {display: inline-block !important}
@media(max-width: 1024px){
  body > #SideBar{
    position: relative;
    display: inline-block;
    top: 0;
    right: 0;
    width: 100%;
    padding: 5px 10px;
    background: var(--color-BrandDark);
  }
  
  .SideBarMenu{
    display: inline;
  }
}

@media(max-width: 1024px){
  body > #SideBar{
    position: fixed;
  }
  .SideBarItem a{
    color: var(--color-White);    
  }
  body > #SideBar > #MyAccountMenu > #AccountMySettings, body > #SideBar > #MyAccountMenu > #AccountChangePassword {
    display: none; /* hiding these on very narrow screens in the top menu */
  }
}

/*---------------------------------------------
  TOP MENU - SIDEBAR
---------------------------------------------*/
#TopMenu .SideBarMenu, #TopMenu .SideBarItem{
  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 .SideBarMenu{
  padding-left: 0;
  padding-right: 0;
}

#TopMenu .SideBarMenu{
  display: inline-flex;
  flex-grow: 4;
}

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

#TopMenu .SideBarItem a:hover{
  color: var(--color-DarkBgFontHover);
}

#TopMenu #SideBarToggleMenu, #TopMenu #SideBarHeader, #TopMenu .SideBarFirstHeading, #TopMenu .SideBarHeading, #UserDefinedMenu.SideBarMenu{
  display: none;
}

/*---------------------------------------------
  MAIN MENU
---------------------------------------------*/
#MainMenu{  
  text-transform: uppercase;
  font-weight: bold;
  font-family: var(--font-Regular);
  font-size: 14px;
}
@media(max-width: 768px){
.navbar-brand img{
  width: 100px;
}
}

.navbar-brand a:hover{background: none !important;}

@media(min-width: 1024px){
  #MainMenu{
  height: 130px;
  }
  #MainMenu.sticky{
  height: 100px;  
  }
  #navbarMain{
  height: 24px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  }
  .navbar-brand{
  position: absolute;
  top: 0;
  width: 320px;
    height: 120px;
    left: 40px;    
  }
  .navbar-brand a{
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .navbar-brand a img{
    max-height: 130px;
  margin-top: 5px;
  }
  
}

#MainMenu .container{
  max-width: 100%;
  background: var(--color-BG);
}


#MainMenu .navbar-brand img{
  width: auto;
}

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

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


#MainMenu .navbar-item, #MainMenu .navbar-link{
  color: var(--color-Font);
  transition: all 0.5s;
}

#MainMenu .navbar-item:hover, #MainMenu .navbar-link:hover, #MainMenu .navbar-link:hover::after{
  color: var(--color-Brand);
  border: none;
  background-color: transparent;
}

#MainMenu .buttons a strong{
  visibility: hidden;
}

#MainMenu.sticky .buttons a{
  width: 120px;
  height: 50px;
}


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

#MainMenu .input{
  background: none;
}

#MainMenu .navbar-dropdown{
  background: var(--color-BG);
  font-family: var(--font-Regular) !important;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
}

@media(min-width: 1024px){
  #MainMenu .navbar-dropdown.page-groups{ 
    border: solid 2px var(--color-Font);
    left: -350px;
  }
  .navbar-item.is-active .navbar-dropdown{display: none;}
  .navbar-item.is-hoverable:hover .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown.page-groups, .navbar-item.is-hoverable:focus-within .navbar-dropdown {
    display: block;
  }
  .navbar-item.is-hoverable:hover .navbar-dropdown.page-groups { /*.navbar-item.is-hoverable:focus .navbar-dropdown.page-groups, .navbar-item.is-hoverable:focus-within .navbar-dropdown.page-groups, .navbar-item.is-active .navbar-dropdown.page-groups, */
    display: flex;
  }
  .navbar-dropdown.page-groups > .columns{
    min-width: 880px;
  }
  .navbar-dropdown.page-groups > .columns > .column{
    border-right: solid 1px var(--color-Brand);
    padding: 15px;
    min-width: 220px;
  }
  .navbar-dropdown.page-groups > .columns > .column.is-12{
    border-bottom: solid 1px var(--color-Brand);
    margin: 1rem;
    border-right: none;
    width: calc(100% - 2rem);
  }
  .navbar-dropdown.page-groups > .columns > .column.is-12 > a{
    font-weight: bold;
    font-size: 16px;
    color: var(--color-Brand);
  }
  .navbar-dropdown.page-groups > .column:nth-child(4){
    border: none;
  }
}
#MainMenu .navbar-dropdown h4{
  background: var(--color-BG);
  font-family: var(--font-Regular) !important;
  font-size: 16px;
  white-space: nowrap;
  color: var(--color-Font);
  line-height: 27pt;
  font-weight: bold;
}

#MainMenu .navbar-dropdown a{
  padding: 0;
  margin: 0;
  font-weight: normal;
  text-transform: none;
  height: 24px;
}

@media(max-width: 1023px){
  .navbar-burger {
    color: var(--color-Brand);
  }

  .navbar-burger:hover {
    color: var(--color-BrandLight);
  }

  .navbar-burger span{
    height: 2px;
  }

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

#MainMenu .navbar-dropdown {
  border-radius: 0;
  border: none;
}
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
#MainMenu.sticky .navbar-item{padding: 0 0.75rem;}
#MainMenu.sticky .navbar-brand {left: 20px; height: 100px;}
#MainMenu.sticky .navbar-brand img{max-height: 80px;}

@media (max-width: 1174px){
  #MainMenu .navbar-brand img{max-height: 50px;}
  #MainMenu.sticky .navbar-brand img{max-height: 50px;}
}

@media (max-width: 1024px) {
  #MainMenu {top: 35px;}
  #MainMenu.sticky {position: absolute;}
  #MainMenu.sticky .navbar-brand {left: 20px; height: 60px;}
  #MainMenu.sticky .navbar-brand img{max-height: 40px;}
  #MainMenu.sticky {
    top: 35px;    
  }
}

.sticky + .container {
  padding-top: 84px;
}
div.navbar-item:nth-child(7) > div:nth-child(2) > a:nth-child(1){display: none;}


/*---------------------------------------------
  ASIDE MENU
---------------------------------------------*/
#MainMenuSideBar{

}

/*---------------------------------------------
  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; 
}

h1.title > span.is-underlined{
  position: relative;
}
h1.title > span.is-underlined::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 10px;
  width: 100%;
  border: solid 3px var(--color-Brand);
  border-color: var(--color-Brand) transparent transparent transparent;
  border-radius: 50%;
  clip-path: inset(0 0 50% 0);
}

h1.title > a {color: var(--color-Font);}

h3.film-title{
  font-weight: bold;
  margin-bottom: 10px;
  font-size: var(--fontsize-BoxTitle);
  font-family: var(--font-Regular);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media(max-width: 768px){
  h3.film-title{
    font-size: 18px;
  }
}

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

/*---------------------------------------------
  BUTTONS
---------------------------------------------*/
input.Button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: auto;
}
.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;
  box-shadow: 2px 2px 0px 0px var(--color-Brand);
  transition: all .2s ease-in-out;
  font-family: var(--font-Regular);
  line-height: 2.5em;
  padding: 0.5em 1em;
  cursor: pointer;
  border: solid 2px var(--color-ButtonStandardBorder) !important;
  align-items: center;
  -webkit-appearance: none;
}

.buttonblue {
  box-shadow: 2px 2px 0px 0px #1425C8;
}

a.button.buttonblue:hover {
  color: var(--color-BrandFont) !important;
  background: #1425C8;
}

.buttonorange {
  box-shadow: 2px 2px 0px 0px #E76938;
}

a.button.buttonorange:hover {
  color: var(--color-BrandFont) !important;
  background: #E76938;
}

@media(min-width: 1024px){
  .button, .Button{
      display: inline-flex;
  }
}

.button.booking{

}

input.Button{
  float: left;
}

.button:hover, .Button:hover, input.Button:hover{

}

.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);
  }
  button.Button{line-height: 3rem;}
}


/*---------------------------------------------
  CUSTOM BUTTONS
---------------------------------------------*/
.button, button, .Button, input.Button{
  font-weight: bold;
  font-size: var(--fontsize-Button);
  text-transform: uppercase;
  border: var(--color-ButtonStandardBorder);
  border-radius: 0;
  background: var(--color-ButtonStandardBg);
  color: var(--color-ButtonStandardFont) !important;
  transition: all .2s ease-in-out;
  box-shadow: 2px 2px 0px 0px var(--color-Brand);
  padding: 0.5em 1em;
  cursor: pointer;
  height: 3.8rem;
}
input.Button{
  float: left;
  margin-top: 1em;
  width: auto;
}
.button:hover, .Button:hover, input.Button:hover, .button.active{
  color: var(--color-BrandFont) !important;
  background: var(--color-Brand);
}
.PrevNext{float: left; width: 100%; clear: both;}
.button.action, input.Button, .Button.ContinueButton{
  background: var(--color-Brand);
  color: var(--color-BrandFont) !important;
  height: 3.8rem;
  border: solid 2px var(--color-BrandLight);
}
input.Button, .Button.ContinueButton{
  height: auto;
}

/* action buttons */
.Button.ContinueButton, .Button#confirm, .Button#AddTicketsToOrder, .Button[type="submit"] {
  background: var(--color-ButtonActionBg);
  color: var(--color-ButtonActionFont) !important;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

#btnVoucherPayment.Button, .Button.BackButton, #btnOrangeWednesdays.Button, #btnClose.Button, #btnDiscountCode{
  border: none !important;
  font-size: var(--fontsize-SubTitle);
  padding: 1rem 0;
  box-shadow: none;
  background: none;
  color: var(--color-ButtonStandardFont) !important;
}
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);
  }  
}
span.tag:not(body) {
  margin-right: 0.2rem;
  margin-left: 0.5rem;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 0;
  height: 1.8rem;
  width: 1.8rem;
  background: var(--color-Brand);
  color: #FFF;
}

.button.booking span.tag:not(body) {
  margin-right: -0.5rem;
}
span.soldout .tag,.tag.soldout{
  background: #ff6666;
}

.tags .tag.programme-type-298{background: #ff8533;}



.tags .tag.programme-type-921{background: green;}
.programme-type-921 .image{border-bottom: solid 3px green;}

ul.key span.soldout .tag:not(body), .button.booking span.tag.soldout:not(body) {
  background: green;
}
ul.key span.few .tag:not(body), .button.booking span.tag.few:not(body) {
  background: purple;
}
ul.key span.selling .tag:not(body), .button.booking span.tag.selling:not(body) {
  background: orange;
}
ul.key span.audiodescribed .tag:not(body), .button.booking span.tag.audiodescribed:not(body) {
  background: #1F5673;
}
ul.key span.autism .tag:not(body), .button.booking span.tag.autism:not(body) {
  background: #754F44;
}
ul.key span.subtitled .tag:not(body), .button.booking span.tag.subtitled:not(body) {
  background: black;
}

img[usemap="#auditorium"]{max-width: 200px;} /* because of course */
#AddTicketsToOrder.AddToOrder1 {}

span.audio .tag,.tag.audio{
  background: #0071bc;
}
span.unlikely .tag,.tag.unlikely{
  background: #66F2CD;
}
span.friendly .tag,.tag.friendly{
  background: #0071bc;
}
span.deaf .tag,.tag.deaf{
  background: #0071bc;
}
span.sociallydistanced .tag,.tag.sociallydistanced{
  background: indigo;
}
span.qa .tag,.tag.qa{
  background: #009f79;
}
span.bhs .tag,.tag.bhs{
  background: #8B70DA;
}
span.five-films .tag,.tag.five-films{
  background: black;
}
span.screen1 .tag,.tag.screen1, span.screen .tag, .tag.screen{
  background: var(--color-Brand);
}
span.screen2 .tag,.tag.screen2{
  background: var(--color-Brand);
}


.tags{
  position: absolute;
  right: 20px;
  top: 20px;
}
.tags.is-relative{
  margin: 0 20px;
  padding: 10px 10px 5px;
  background: var(--color-BG2);
  display: block;
  width: 100%;
}
.tags .tag{
  width: auto;
  font-size: 0.9rem;
  padding: 0.6rem 0.9rem;
         
  height: 1.3rem;
}
.tags .tag.programme-type-611{background: var(--color-Brand);}
.programme-type-611 .image{border-bottom: solid 3px var(--color-Brand);}

.tags .tag.programme-type-293{background: #E76938;}
.programme-type-293 .image{border-bottom: solid 3px #E76938;}

.tags .tag.programme-type-925{background: #4000d4;}
.programme-type-925 .image{border-bottom: solid 3px #4000d4;}

.tags .tag.programme-type-926{background: #4000d4;}
.programme-type-926 .image{border-bottom: solid 3px #4000d4;}

.tags .tag.programme-type-635{background: #4000d4;}
.programme-type-635 .image{border-bottom: solid 3px #4000d4;}

.tags .tag.programme-type-4000d4{background: #F4B54C;}
.programme-type-4000d4 .image{border-bottom: solid 3px #F4B54C;}
/*---------------------------------------------
  SLIDERS
---------------------------------------------*/
.slider{
  height: 100%;
  min-height: 300px;
}
.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;
  position: relative;  
}
.slider-container{
  overflow: inherit;
}
.carousel .slider-item, .carousel .slider-item > div.item{
  height: 100%;
  min-height: 265px;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media(max-width: 480px){
  #YouMightLike .carousel .slider-item > div.item{
    height: 295px;
  }
}
.slider-item div.item{
  position: relative;
  overflow: inherit;
}
.carousel .slider-item > div.item img.carousel-film-image{
  height: fit-content;
  width: fit-content;
  align-items: flex-start;
  display: flex;
  max-width: 60%;
}

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

.carousel .slider-item .film-rating{
  height: 30px;
  position: absolute;
  top: 40px;
  right: calc(35% + 40px);
  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;
  border-radius: 0 !important;
  background: #333 !important;
  border: none !important;
  margin-top: -50px !important;
  color: var(--color-DarkBgFont);
  opacity: 1;
  z-index: 2;  
}
.slider-navigation-next{
  right: 20px !important;
}
.slider-navigation-previous {
  left: 20px !important;  
}

/* Banner_InformationScroller */

#Banner_InformationScroller .carousel-slide-overlay{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 40px;
  width: 100%;
  color: var(--color-DarkBgFont);
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
}
#Banner_InformationScroller .carousel-slide-overlay h3.film-title{
  color: var(--color-DarkBgFont);
  font-size: var(--fontsize-Title);
}
#Banner_InformationScroller .carousel-slide-overlay h4{
  color: var(--fontcolor-DarkBgSubTitle);
}

#Banner_InformationScroller .carousel-slide-overlay .buttons{
  display: inline;
}
#Banner_InformationScroller .carousel-slide-overlay .buttons .button{
  border: solid 2px #FFF;
  color: #FFF !important;
}
@media(max-width: 1024px){
  #Banner_InformationScroller .synopsis {
    font-size: var(--fontsize-SubTitle);
  }
}
@media(max-width: 768px){
  #Banner_InformationScroller .slider{
    min-height: 380px;
  }  
  #Banner_InformationScroller .slider-item > div.item img.carousel-film-image{
    width: 100%;  
  }
  #Banner_InformationScroller  .slider-item, .slider-item > div.item{
    min-height: 380px;  
  }
  #Banner_InformationScroller .carousel-slide-overlay{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 20px;
    width: 100%;
    height: 100%;
  }
  #Banner_InformationScroller .slider-item .film-rating{
  right: 40px;  
  }
  #Banner_InformationScroller .hide-for-small{
  display: none;
  }
}

/* Seasons Scroller */
#Banner_SeasonsScroller{
  margin-top: 2rem !important;
}
#Banner_SeasonsScroller .slider-item{
  padding: 10px;
}

#Banner_SeasonsScroller .slider-item > div.item{
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 6px 1px;
}

#Banner_SeasonsScroller .carousel-slide-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  width: 100%;
  color: var(--color-Font);
  background: var(--color-BG);
  text-align: left;  
  height: 100%;
  opacity: 0; /* just make it a link with no text */
}
#YouMightLike #Banner_SeasonsScroller .carousel-slide-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  color: var(--color-Font);
  background: var(--color-BG);
  text-align: left;  
  height: 100px;
  opacity: 1;
}
#Banner_SeasonsScroller .carousel-slide-overlay h3.film-title{
  color: var(--color-Font);
  font-size: var(--fontsize-BoxTitle);
  font-family: var(--font-Regular);
}
#Banner_SeasonsScroller .carousel-slide-overlay h4{
  color: var(--color-Font);
  font-size: var(--fontsize-BoxText);
  height: 2.8rem;
  overflow: hidden;
  padding: 0;
}
#Banner_SeasonsScroller .synopsis{
  display: none;
}

#Banner_SeasonsScroller .carousel-slide-overlay h4 > p > span{
  font-size: 0.8rem !important;
  font-weight: normal !important;
}

#Banner_SeasonsScroller .carousel-slide-overlay .buttons{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#Banner_SeasonsScroller .carousel-slide-overlay .buttons .button{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}
#Banner_SeasonsScroller .image {
  max-width: 100%;
}
@media(max-width: 1024px){
  #Banner_InformationScroller .synopsis {
    font-size: var(--fontsize-SubTitle);
  }
}
@media(max-width: 768px){
  #Banner_InformationScroller .slider{
    min-height: 380px;
  }  
  #Banner_InformationScroller .slider-item > div.item img.carousel-film-image{
    width: 100%;  
  }
  #Banner_InformationScroller  .slider-item, .slider-item > div.item{
    min-height: 380px;  
  }
  #Banner_InformationScroller .carousel-slide-overlay{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 20px;
    width: 100%;
    height: 100%;
  }
  #Banner_InformationScroller .slider-item .film-rating{
  right: 40px;  
  }
  #Banner_InformationScroller .hide-for-small{
  display: none;
  }
}

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

#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-BG2);
}

#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{
  margin-top: 0;
  background: var(--color-DarkGrey);
}

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


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

#Content{
  margin-top: 20px;
}
.notification {
  background: var(--color-BG2);
}
.hero.has-background {
  position: relative;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px 0px;
  background: var(--color-BG2);
  background-image: url(https://images.savoysystems.co.uk/DDD/4240.jpg);
  background-size: cover;
}
.hero-background {
  position: absolute;
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
}
.hero-background.is-transparent {
  /*opacity: 0.8;*/
}
.hero.has-background .hero-body{
  padding: 8rem 1.5rem;
  text-align: center;
  /*background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3007003484987745) 14%, rgba(255,255,255,0) 100%);*/
  /*background: linear-gradient(0deg, #804d70 0%, #f4a6a626 31%);*/
  z-index: 1;
}
.hero.has-background .hero-body.film{
  padding: 12rem 1.5rem;
  text-align: center;
  z-index: 1;
}
@media(max-width: 768px){
  .hero.has-background .hero-body{
    padding: 4rem 1.5rem 6rem;
  }
  .hero.has-background .hero-body.film{
    padding: 6rem 1.5rem;
  }
}
.hero .hero-body .title{
  color: var(--color-Brand);
  text-transform: uppercase;
  text-shadow: 2px 2px var(--color-BG);
  font-size: 43px;
  font-family: var(--font-Regular);
  font-weight: bold;
  letter-spacing: 4px;
}
section{
  padding: 4rem;
}
section.is-pulled-up{
  margin-top: 0;
  padding: 80px 15% 0% 15%;
  text-align: center;
  z-index: 1;
}

section.is-pulled-up > .container {
  width: 100%;
}

#SeasonsScrollSection{
  display: none;
}

@media(max-width: 1024px){
  .hero .hero-body .title{
    font-size: 26px;
  }
  section{
    padding: 4rem 5px;
  }
  
  section.is-pulled-up{
    padding: 120px 10px 0 10px;
  }  
}

section.is-shadow{
  background: var(--color-BG2);
  box-shadow: var(--section-boxshadow);
}

/*---------------------------------------------
  TABS
---------------------------------------------*/
.tabs #SideBar{
  width: 100%;
  justify-content: center;
  text-align: center;
  position: relative;
  height: 100px;
}

.tabs #SideBar .SideBarItem a{
  border: none;
  font-family: var(--font-Regular);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--color-Font);
}
.tabs #SideBar .SideBarItem a:hover{
  color: var(--color-Brand);
  border-bottom: solid 1px var(--color-Brand);
}


#tab-switch{
  display: inline;
}

@media(max-width: 768px) {
  #tab-switch{
    display: inline-flex;
    margin: 20px 0;
    width: 100%;
  }
}

@media(min-width: 768px){
  #tab-switch{
    margin: 20px 10rem;
    display: flex;
  }
}
#tab-switch .switch{
  line-height: 1.6rem;
  margin: 0 5px;
}
.tabs{
  width: 100%;
  border: none;
}
.tabs.filter{margin-top: 20px;}
.tabs.sub-menu{
  position: absolute;
  top: 0;
  left: 0;  
  right: 0;
  box-shadow: var(--tabs-boxshadow);
  border: none;
  font-family: var(--font-Regular);
  font-size: var(--fontsize-SubTitle);
  line-height: 22.4px;
  font-weight: bold;
}
@media(max-width: 768px) {
  .tabs.sub-menu {
   overflow-x: scroll;
   flex-wrap: nowrap;
   display: flex;
  }
}
.tabs .input{
  background: var(--color-BG);
  height: 1rem;
}
.tabs ul{
  flex-wrap: wrap;
  text-transform: uppercase;
  border: none;
  margin-top: 5px;
  justify-content: center;
}
@media(max-width: 768px){
  .tabs ul, .tabs #SideBar .SideBarItem a {font-size: 0.8rem;}
  .tabs.filter ul {flex-wrap: nowrap;}
  .tabs.filter ul li {display: none;}
  .tabs.filter ul li:nth-of-type(2),.tabs.filter ul li:nth-of-type(1){display: inline;}
}
@media(max-width: 1020px){
  #tab-switch .switch{
    line-height: 3rem;
  }
}

.tabs ul li.is-active{

}
.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 li a{
  border-bottom: solid 2px var(--color-BG);
  padding: 13px 14px;
}
.tabs li.is-active a, .tabs li a:hover, .tabs li.is-active a.programme-info-tab{
  color: var(--color-Brand);
  border-bottom: solid 2px var(--color-Brand);
}
@media(min-width: 1024px){
  .tabs ul{
    overflow: hidden;
    height: 50px;
  }
}
@media(max-width: 640px){
  .tabs{
    display: inline-block;
  }
  .tabs.filter{
    margin: 0;
  }
  .tabs li:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)){
      /*display: none;*/
  }
  .tabs
  
}

/* hide the unwanted Perf UDFs */
.tabs > ul > li > a.whats-on-filter[data-sort-value="FF"],
.tabs > ul > li > a.whats-on-filter[data-sort-value="BF"],
.tabs > ul > li > a.whats-on-filter[data-sort-value="AD"],
.tabs > ul > li > a.whats-on-filter[data-sort-value="HOH"],
.tabs > ul > li > a.whats-on-filter[data-sort-value="TP"],
.tabs > ul > li > a.whats-on-filter[data-sort-value="UL"],
.tabs > ul > li > a.whats-on-filter[data-sort-value="BHS"],
.tabs > ul > li > a.whats-on-filter[data-sort-value="SD"],
.tabs > ul > li > a.whats-on-filter[data-sort-value="QA"],
.tabs > ul > li > a.whats-on-filter[data-sort-value="RS"]

 {
  display: none !important;
}



/*---------------------------------------------
  Event Key
---------------------------------------------*/
#PerformanceKey{
  padding: 0;
  margin: 0 0 20px;
        
}
#PerformanceKey > .box{
  background: var(--color-BG2);
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 0;
}
@media(min-width: 1020px){
#TabCalendar ul.key{
/*  display: flex;*/
  text-align: center;
  justify-content: center;
}
}
ul.key li{
  display: inline-block;
}
#TabCalendar ul.key li{
}
@media(min-width: 1048px){
  .programme-performances ul.key li{
     width: 40%;
  }
}
h4.key-subtitle{display: none;}
ul.key li span.button{
  border: none;
  text-transform: none;
  font-weight: normal;
  font-size: 0.6rem;
  box-shadow: none;
  background: none;
  border: none !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
---------------------------------------------*/
#WhatsOnMultiple{
  margin-top: -100px;
}
@media(max-width: 768px){
  #WhatsOnMultiple{
    margin-top: -120px;
  }

}
#Empty{
  text-align: center;
  width: 100%;
  padding: 30px;
  background: var(--color-LightGrey);
  display: none; /* asked to be removed */
}
#whats-on-list{
  padding: 0 15%;
}
#WhatsOnMultiple #whats-on-list{
  padding: 0;
}

#whats-on-list figure.image{
  width: 100%;
  align-items: flex-start; /* new */
  height: auto;
}
#whats-on-list .media-content{
  overflow: inherit;
}
#whats-on-list .boxx{
  padding: 1.2rem;
}
#whats-on-list .box{
  position: relative;
  border-radius: 0;
  min-height: 20rem;
  padding: 40px 0 70px;
  box-shadow: none;
  border-bottom: solid 2px var(--color-DarkGrey);
}
#whats-on-list.columns.is-multiline > .column{
  display: flex;
}
#whats-on-list .box .column.is-8{
  border-left: solid 2px var(--color-DarkGrey);
}
#whats-on-list .card .media:not(:last-child) {margin: 0;}
ul.info{
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  font-size: 12px;
}
#whats-on-list .rating-image{
  position: absolute;
  height: 1em;
  bottom: 15%;
  right: 5%;
  z-index: 2;
}
#whats-on-list-calendar .rating-image {
  position: absolute;
  height: 1em;
  top: 0px;
  right: 0px;
  z-index: 2;
}
#whats-on-list-calendar .rating-image {
 right: -10px;
}
#whats-on-list-calendar .card .media:not(:last-child) {
  margin-bottom: 0;
}
#whats-on-list-calendar .card-content{
  padding: 0;
}
#whats-on-list-calendar .card-content, #whats-on-list .card-content{
  font-family: var(--font-Regular);
  font-size: var(--fontsize-BoxText);
}

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{
  position: absolute;
  bottom: 20px;
  right: 0;
}
#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;
}
.programme-details h3.is-underlined, .programme-performances h3.is-underlined{
  font-weight: bold;
  font-family: var(--font-Title);
  color: var(--color-Font);
  font-size: 26px;
  text-transform: none;
}
ul.performances{
  margin: 0;
  list-style: none;
  padding: 10px 20px;
  text-align: left;
  
}
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{
  font-weight: bold;
}
ul.performances li.performance .button{
  right: 0;
  min-width: 100px;
  text-transform: none;
  padding-left: 40px;
  height: 2rem;
  margin-left: 20px;
  margin-bottom: 0.2em;
  padding-right: 0.5rem;
}
ul.performances li.performance .button.is-sold-out{
  text-decoration: line-through;
}
ul.performances li.performance .button .fa-ticket-alt{
  position: absolute;
  left: 10px;
}

@media(min-width: 768px){
  .programme-details, .programme-synopsis, .programme-performances{
    margin-top: -200px;
    z-index: 9;
    background: var(--color-BG);
    padding: 20px;
    border: solid 2px #000;
  }

  .programme-synopsis{
    border: none;
    background: none;
  }

  .programme-synopsis h1.title{
    margin: 0;
    margin-bottom: 140px;
    padding: 0;
    color: var(--color-DarkBgFont);
    font-weight: 3.4rem;
    text-transform: uppercase;
    font-size: 44px;
  font-weight: normal;
  font-family: var(--font-Title);
  text-shadow: 2px 2px 5px #000;
  }
  
  .programme-performances{
    margin-top: -140px !important;
    padding: 0;
    border: none;
  }

  .programme-performances > .tile{
    border: solid 2px #000;
    margin-bottom: 20px;
    padding: 20px;
  }

  .programme-performances > .tile.share{
    background: #000;
    text-align: center;
  }

  .programme-performances > .tile.share .title{
    color: #FFF;
    border-bottom: 4px solid #FFF;
    position: relative;
  }

  .programme-performances > .tile.share .title::before{
    border-bottom: solid 4px var(--color-Brand);
    font-size: 6px;
    content: "";
    text-align: center;
    position: absolute;
    bottom: -4px;
    width: 70px;
    margin-left: -35px;
    left: 50%;
  }
}

#TheVideo{
  position: relative;
}

#TheVideo .play {
    display: block;
    top: 0px;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("/Thomas/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: 0;
  }
  ul.performances li.performance:last-child{
    padding-bottom: 2rem;
  }
}
@media(max-width: 769px){
  ul.info li{
    display: none;
  }
  ul.info li:first-child{
    display: block;
  }
}
#VA{display: block !important}
/*---------------------------------------------
  Right Menu
---------------------------------------------*/
#right-menu .card{
  margin-bottom: 20px;
}

.SideBarToggle{
  display: none;
}

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

#Aside #SideBar{
  display: none;
}

/*---------------------------------------------
  Footer
---------------------------------------------*/

/*ADDED AT GEN'S REQUEST TO REMOVE PINK FILTER FROM FOOTER IMAGE*/
#Card-0-1 > div {
  background: none;
}

/*ADDED AT GEN'S REQUEST TO MAKE SURE BUTTON DID NOT OBSCURE IMAGE TEXT ON THE CARD ON MOBILE*/

@media(max-width: 768px) {
#Card-0-1 > div > a{
  margin-top: 70px;
}
#Card-0-1{min-height:300px;}

}

footer form.columns{
 margin: 1rem 0;
}
@media(min-width: 768px){
  div.bd-footer-links:nth-child(1) > div:nth-child(1) > div:nth-child(1){
    width: 25%;
    flex: none;
  }
}
div.bd-footer-links:nth-child(1) > div:nth-child(1) > div:nth-child(2){
  text-align: center;
}
footer .column{
  padding: 20px;
}
footer form.columns input.column, footer form.columns button.column{
 margin: 1rem 0;
}
footer.footer{
  margin-top: 0;
  padding: 3rem 0;
  background: var(--color-BG);
  color: var(--color-Font);
}

footer .container{
  max-width: none;
}

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

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

footer .container.middle .bd-footer-links, footer .container.bottom .copyright, footer .container.bottom .bd-footer-links{
  max-width: var(--width-Max);
  margin: 0 auto;
}

/*
footer .column .bd-footer-link:first-of-type, footer .column > h2.subtitle {
  color: var(--color-White);
  font-size: 14px;
  font-weight: 600;
  line-height: 22.px;
  font-family: var(--font-Title);
  text-transform: uppercase;
  margin-bottom: 20px;
  padding: 0;
}
footer .column .bd-footer-link:first-of-type a, footer .column > h2.subtitle a{
  color: var(--color-White);
  font-family: var(--font-Title);
} */
h2.bd-footer-link{
  margin-top: -20px; /*hack to fix the newsletter title */
}

footer .container.bottom{
  background: var(--color-Brand);
  color: var(--color-BrandFont);
  border-top: solid 2px #333;
  margin-top: 3rem;
}
footer .container.bottom a{
  color: var(--color-Brand);
}
footer .title, footer .subtitle{
  color: var(--color-DarkBgFont);
  background: none;
}

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

footer a{
  color: var(--color-Brand);
}

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

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

footer .buttons{margin-top: 20px;}

@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;
}
#google_translate_element{
  margin-top: 10px;
}
#google_translate_element .goog-te-combo{
  padding: 5px;
}
/*---------------------------------------------
  CARDS
---------------------------------------------*/
.card{
  background: none;
  box-shadow: none;
}
.is-pulled-up .card{
  background: none;
  box-shadow: none;
  min-height: 200px;
  padding: 0;
  border: solid 5px #FFF;
  margin: 0;
}

.is-pulled-up .card > figure {
  top: 0;
  height: auto;
}

.card h4.title {
  color: white;
}

.is-pulled-up .card > .content figure, .is-pulled-up .card > .content a.button  {

}

.is-pulled-up .card h4.title{
  padding: 10px 20px;
  border-bottom: solid 2px #000;
  min-height: 4.5rem;
  background-position: bottom center;
}

.card .content figure.figure{

}

.container.banner-container .card .content figure.figure{
  min-height: 1rem;
}

@media(max-width: 960px){
  .container.banner-container .card {min-height: 400px;}
}
@media(max-width: 768px){
  .container.banner-container .card {min-height: 0;}
  .container.banner-container .card .content figure.figure{
    min-height: 1rem;
    margin-bottom: -1rem;
  }

}

.is-pulled-up .card a.button{margin-bottom: 20px;}

.UpsellScrollSection{
  background: var(--color-DarkGrey);  
}
.UpsellScrollSection .container.banner-container{
  z-index: 0;
}
.UpsellScrollSection .card .content{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
}

.UpsellScrollSection .card {
  padding: 0;
  margin: 5px;
  max-height: 320px;
  overflow: hidden;
}

@media(max-width: 768px){
  .UpsellScrollSection .card {    
    margin: 20px;
  }
}

.UpsellScrollSection .card h4.title{
  max-width: 600px; 
  margin: 0 auto;
  color: #FFF;
  font-size: 32px;
  padding: 0 20px;
  background: none !important;
}

@media(max-width: 768px){
  .UpsellScrollSection .card .content{    
    padding-top: 2rem;    
  }

  .UpsellScrollSection .card h4.title{
    font-size: 16px;
  }
}

.card.film-row{
  margin: 20px 0;
  padding: 0;
}
.card .is-shadow{
  box-shadow: var(--card-boxshadow); 
}
.card-content{
  padding: 10px;
  color: var(--color-Font);
  background: var(--color-BG2);
}
.card-content h3.film-title{
  line-height: 1.5em;
  white-space: wrap;
  color: var(--color-Font);
}
.UpsellScrollSection .column.card.is-3 .content{
  background: #fff;
  border: solid 3px #000;
}
.UpsellScrollSection .column.card.is-3 .content .title{
  color: #000;
}

/*---------------------------------------------
  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
---------------------------------------------*/
.date-picker-x-input{
  visibility: hidden;  
}

.dpx-content-box{
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.date-picker-x .dpx-title-box {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  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 {
  font-size: 22px;
  line-height: 50px;
  text-align: center;
  transition: .2s;
  width: 50px;
  cursor: pointer;
}

.dpx-item{
  flex-grow: 1;
  width: 14.2857%;
  padding: 4% 3%;
  background: var(--calendar-colorBG);
  color: var(--calendar-colorFont);
  border-radius: 50%;
  /*line-height: 60px;  */
  transition: background-color 0.5s ease;
  cursor: pointer;
  position: relative;
}
.dpx-item.day-has-performance::after{
  background-color: var(--color-Brand);
  border-radius: 50%;
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  bottom: 5%;
  left: 50%;
  margin: -4px 0 0 -4px;
  position: absolute;
  transition: all .25s ease;
}


@media(max-width: 768px){
  .dpx-item{
    font-size: 0.8rem;
    padding: 5% 3%;
  }  
  .dpx-item.day-has-performance::after{
    bottom: 10px;
  }
}
@media(max-width: 1024px){
  .dpx-item{
    padding: 4% 3%;
    font-size: 1rem;
  }
  .dpx-item.day-has-performance::after{
    bottom: 5px;
  }  
}

.dpx-item:hover, .dpx-item.dpx-current, .dpx-item.active{
  background: var(--color-Brand);
  color: var(--color-BrandFont);  
}

.dpx-out.dpx-item{
  color: var(--calendar-colorFontInactive);
}

.date-picker-x .dpx-btns {
  display: none;
}

/*-------------------------------------
OSCAR
-------------------------------------*/
@font-face {
  font-family: 'icomoon';
  src:  url('/Thomas/fonts/icomoon.eot?pa46kn');
  src:  url('/Thomas/fonts/icomoon.eot?pa46kn#iefix') format('embedded-opentype'),
    url('/Thomas/fonts/icomoon.ttf?pa46kn') format('truetype'),
    url('/Thomas/fonts/icomoon.woff?pa46kn') format('woff'),
    url('/Thomas/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, .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 {
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;
}
body{
padding-left: 0;
padding-right: 0;
}
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .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%;
 float: none;
 display: inline-block;
}

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

#Detail.SaleItemList{
  display: flex;
  flex-direction: column;
}

#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;
}
.RegisteredCardNumber {
  font-style: italic;
}

.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: var(--color-BG2);;
width: 100%;
}
.DiscountSubHeading {
  font-weight: bold; margin: 10px 0;
}

.DiscountDetail {
  color: red;
}

.MembershipSaleHeading {
  margin-left: 20px; 
}
#Membership .showtimes table{
   display: flex;
   justify-content: center;
}
.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: var(--color-Font);
  font-style: normal;
  line-height: 1.17em;
  margin: 0px 0px 10px;
  text-transform: uppercase;
  font-size: var(--fontsize-Title);
}

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

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

form.AllocatedSeating{
  text-align: center;
  display: inline-block;
}

.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;
}
ul.share{
  text-align: center;
  margin-top: 0.75rem;
}

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

#PopupException, .PopupDialogBox {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(50% - 110px);
  width: 95%;
    max-width: 500px;
    margin: auto;
    z-index: 999999999999999999999999;
  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;
z_index: 9999;
color: black;
}
#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-BG2);
}
#ReservationsHaveExpired{
background: red;
color: white;
}

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

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

.misc-item .PopupDialogBox .Button{
  margin-top: 8px !important;
}

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

#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, #Form_0{
padding: 20px;
background: var(--color-BG2);
margin: 20px 0;
}

#Detail form .sixcol{
  width: 100%;
}


#SkipThisStep{
font-size: 0;
margin-bottom: 1rem;
}

#SkipThisStep a::after{
  content: 'Continue as guest';
  font-weight: bold;
  color: #FFF;
  background: var(--color-Brand);
  border: solid 2px #000;
  padding: 0.75rem 1rem;
  line-height: 3rem;
  font-size: 1rem;
  text-transform: uppercase;
}


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

label[for="Country"], input#Country{
  display: none !important; /* just no */
}

#Donation input[type=text] {
  vertical-align: middle;
  margin-left: 5px;
  padding: 10px 15px;
}

#Donation span {
  vertical-align: middle;
}

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

input#PatronFlag1 {
  margin-top: 50px;
}

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

.AllocatedSeating > p:nth-child(2){display: none;} /* don't want the choose seats text */

.PaymentHeading, .PaymentPageSeparator {
 display: none;
}
iframe{
  width: 100%;
}
@media(max-width: 480px){
  iframe{
    max-width: 480px;
  }
}

.PaymentMethod{
  background: var(--color-BG2);
  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;
  width: 50%;
  line-height: 1.2em;
  margin-left: 10px;
  line-height: 3em;
}

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

.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;
  text-align: left;
}

.PersonTypeOverlayPersonTypeAndPrice a {
  text-indent: 5px;
  display: inline-block;
  padding: 0 10px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  border: solid 1px black;
  background: var(--color-ButtonActionBg);
  color: var(--color-White);
}

.PersonTypeOverlayPersonTypeAndPrice a:hover {  
  -webkit-transition: color,background-color 0.2s ease-in-out;
  transition: color,background-color 0.2s ease-in-out;
}

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

@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-top: 6px; }
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: 150px; }
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: 3px;
  background-color: rgba(0, 0, 0, 0.3);
}

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

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.5em;
  border-top: none;
  display: inline;
  line-height: 3em;
  background-color: var(--color-White); 
  color: black;
  border: solid 3px black;
  border-radius: 50%;
}

.PersonTypeOverlayPersonTypeAndPrice {
  line-height: 2em;
  height: auto;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
}

#UpsellForm{
  padding: 20px;
  background: var(--color-BG2);
  margin: 20px 0;
  display: inline-block;
  width: 100%;
}

.SelectPersonTypeOverlayCancel {
  margin-top: 10px;
}

DIV.SelectPersonTypeOverlayCancel a {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  font-size: 0;
  background: #fff !important;
  border: none !important;
  transition: none;
}

DIV.SelectPersonTypeOverlayCancel a::before,  DIV.SelectPersonTypeOverlayCancel a::after{
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}

DIV.SelectPersonTypeOverlayCancel a::before {
  transform: rotate(45deg);
}
DIV.SelectPersonTypeOverlayCancel a::after {
  transform: rotate(-45deg);
}

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

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

}

/*----------------------------------------------------------------------
  ORDER DETAILS/TABLES
----------------------------------------------------------------------*/
/*responsive tables*/
.table-wrapper .table {
    margin-bottom: 0;
}
.table-wrapper:not(:last-child) {
    margin-bottom: 1.5rem;
}
@media screen and (max-width: 1023px) {
    .table-wrapper {
        overflow-x: auto;
    }
}
.b-table {
    transition: opacity 86ms ease-out;
}
@media screen and (min-width: 769px), print {
    .b-table .table-mobile-sort {
        display: none;
    }
}
.b-table .icon {
    transition: transform 150ms ease-out, opacity 86ms ease-out;
}
.b-table .icon.is-desc {
    transform: rotate(180deg);
}
.b-table .icon.is-expanded {
    transform: rotate(90deg);
}
.b-table .table {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 4px;
    border-collapse: separate;
}
.b-table .table th {
    font-weight: 600;
}
.b-table .table th .th-wrap {
    display: flex;
    align-items: center;
}
.b-table .table th .th-wrap .icon {
    margin-left: 0.5rem;
    margin-right: 0;
    font-size: 1rem;
}
.b-table .table th .th-wrap.is-numeric {
    flex-direction: row-reverse;
    text-align: right;
}
.b-table .table th .th-wrap.is-numeric .icon {
    margin-left: 0;
    margin-right: 0.5rem;
}
.b-table .table th .th-wrap.is-centered {
    justify-content: center;
    text-align: center;
}
.b-table .table th.is-current-sort {
    border-color: #7a7a7a;
    font-weight: 700;
}
.b-table .table th.is-sortable:hover {
    border-color: #7a7a7a;
}
.b-table .table th.is-sortable,
.b-table .table th.is-sortable .th-wrap {
    cursor: pointer;
}
.b-table .table th .multi-sort-cancel-icon {
    margin-left: 10px;
}
.b-table .table th.is-sticky {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 3 !important;
    background: #fff;
}
.b-table .table tr.is-selected .checkbox input:checked + .check {
    background: findColorInvert(#00d1b2)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%2300d1b2' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E")
        no-repeat center center;
}
.b-table .table tr.is-selected .checkbox input + .check {
    border-color: findColorInvert(#00d1b2);
}
.b-table .table tr.is-empty:hover {
    background-color: transparent;
}
.b-table .table .is-chevron-cell,
.b-table .table .is-checkbox-cell {
    width: 40px;
}
.b-table .table .is-chevron-cell {
    vertical-align: middle;
}
.b-table .table .is-checkbox-cell .checkbox {
    vertical-align: middle;
}
.b-table .table .is-checkbox-cell .checkbox.b-checkbox {
    margin-right: 0;
}
.b-table .table .is-checkbox-cell .checkbox .check {
    transition: none;
}
.b-table .table tr.detail {
    box-shadow: inset 0 1px 3px #dbdbdb;
    background: #fafafa;
}
.b-table .table tr.detail .detail-container {
    padding: 1rem;
}
.b-table .table:focus {
    border-color: #3273dc;
    box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}
.b-table .table.is-bordered th.is-current-sort,
.b-table .table.is-bordered th.is-sortable:hover {
    border-color: #dbdbdb;
    background: #f5f5f5;
}
.b-table .table td.is-sticky {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
}
.b-table .table td.is-image-cell .image {
    margin: 0 auto;
    width: 1.5rem;
    height: 1.5rem;
}
.b-table .table td.is-progress-cell {
    min-width: 5rem;
    vertical-align: middle;
}
.b-table .table-wrapper.has-sticky-header {
    height: 300px;
    overflow-y: auto;
}
@media screen and (max-width: 768px) {
    .b-table .table-wrapper.has-sticky-header.has-mobile-cards {
        height: initial !important;
        overflow-y: initial !important;
    }
}
.b-table .table-wrapper.has-sticky-header tr:first-child th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}
@media screen and (max-width: 768px) {
    .b-table .table-wrapper.has-mobile-cards thead {
        display: none;
    }
    .b-table .table-wrapper.has-mobile-cards tfoot th {
        border: 0;
        display: inherit;
    }
    .b-table .table-wrapper.has-mobile-cards tr {
        box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
        max-width: 100%;
        position: relative;
        display: block;
    }
    .b-table .table-wrapper.has-mobile-cards tr td {
        border: 0;
        display: inherit;
    }
    .b-table .table-wrapper.has-mobile-cards tr td:last-child {
        border-bottom: 0;
    }
    .b-table .table-wrapper.has-mobile-cards tr:not(:last-child) {
        margin-bottom: 1rem;
    }
    .b-table .table-wrapper.has-mobile-cards tr:not([class*="is-"]) {
        background: inherit;
    }
    .b-table .table-wrapper.has-mobile-cards tr:not([class*="is-"]):hover {
        background-color: inherit;
    }
    .b-table .table-wrapper.has-mobile-cards tr.detail {
        margin-top: -1rem;
    }
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td {
        display: flex;
        width: auto;
        justify-content: space-between;
        text-align: right;
        border-bottom: 1px solid #f5f5f5;
    }
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td:before {
        content: attr(data-label);
        font-weight: 600;
        padding-right: 0.5rem;
        text-align: left;
    }
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td.is-image-cell .image {
        width: 6rem;
        height: 6rem;
        margin: 0 auto 0.5rem;
    }
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td.is-progress-cell span,
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td.is-progress-cell progress {
        display: flex;
        width: 45%;
        align-items: center;
        align-self: center;
    }
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td.is-checkbox-cell,
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td.is-image-cell {
        border-bottom: 0 !important;
    }
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td.is-checkbox-cell:before,
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td.is-actions-cell:before {
        display: none;
    }
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td.is-label-hidden:before,
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td.is-image-cell:before {
        display: none;
    }
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td.is-label-hidden span {
        display: block;
        width: 100%;
    }
    .b-table .table-wrapper.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td.is-label-hidden.is-progress-col progress {
        width: 100%;
    }
}
.b-table .table-wrapper.is-card-list thead {
    display: none;
}
.b-table .table-wrapper.is-card-list tfoot th {
    border: 0;
    display: inherit;
}
.b-table .table-wrapper.is-card-list tr {
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    max-width: 100%;
    position: relative;
    display: block;
}
.b-table .table-wrapper.is-card-list tr td {
    border: 0;
    display: inherit;
}
.b-table .table-wrapper.is-card-list tr td:last-child {
    border-bottom: 0;
}
.b-table .table-wrapper.is-card-list tr:not(:last-child) {
    margin-bottom: 1rem;
}
.b-table .table-wrapper.is-card-list tr:not([class*="is-"]) {
    background: inherit;
}
.b-table .table-wrapper.is-card-list tr:not([class*="is-"]):hover {
    background-color: inherit;
}
.b-table .table-wrapper.is-card-list tr.detail {
    margin-top: -1rem;
}
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td {
    display: flex;
    width: auto;
    justify-content: space-between;
    text-align: right;
    border-bottom: 1px solid #f5f5f5;
}
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td:before {
    content: attr(data-label);
    font-weight: 600;
    padding-right: 0.5rem;
    text-align: left;
}
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td.is-image-cell .image {
    width: 6rem;
    height: 6rem;
    margin: 0 auto 0.5rem;
}
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td.is-progress-cell span,
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td.is-progress-cell progress {
    display: flex;
    width: 45%;
    align-items: center;
    align-self: center;
}
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td.is-checkbox-cell,
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td.is-image-cell {
    border-bottom: 0 !important;
}
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td.is-checkbox-cell:before,
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td.is-actions-cell:before {
    display: none;
}
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td.is-label-hidden:before,
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td.is-image-cell:before {
    display: none;
}
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td.is-label-hidden span {
    display: block;
    width: 100%;
}
.b-table .table-wrapper.is-card-list tr:not(.detail):not(.is-empty):not(.table-footer) td.is-label-hidden.is-progress-col progress {
    width: 100%;
}
.b-table.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.5;
}
.b-table.is-loading:after {
    animation: spinAround 500ms infinite linear;
    border: 2px solid #dbdbdb;
    border-radius: 290486px;
    border-right-color: transparent;
    border-top-color: transparent;
    content: "";
    display: block;
    height: 1em;
    position: relative;
    width: 1em;
    position: absolute;
    top: 4em;
    left: calc(50% - 2.5em);
    width: 5em;
    height: 5em;
    border-width: 0.25em;
}
.b-table.has-pagination .table-wrapper {
    margin-bottom: 0;
}
.b-table.has-pagination .table-wrapper + .notification {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* Price Table */

.table.price thead{
  background: black;
}

.table.price thead th{
  color: white;
}
.table.price td{
  vertical-align: middle;
}
.table.price td:first-child {
    min-width: 60%;
    white-space: nowrap;
}

.table{
 width: 100%;
 background: none;
}

.PriceGroup{
  clear: both;
  color: var(--color-Font);
  font-weight: 300;
}

.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;
  color: var(--color-Font);
  font-style: normal;
  line-height: 1.17em;
  margin: 0px 0px 10px;
  text-transform: uppercase;
}

.PriceGroupPersonTypeQuantity{
  text-align: center !important;
  font-weight: bold;
  font-size: 0.8rem;
  vertical-align: middle;
}

.PriceGroupPersonTypeDescription, .PriceGroupPersonTypePrice, PriceGroupPersonTypeQuantity{
  padding: 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: top;
  padding:5px 6px;
}

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

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

/*----------------------------------------------------------------------
  APPLY MEMBERSHIP PAGE
----------------------------------------------------------------------*/
.MembershipSection{
 background: var(--color-BG2);
  margin-bottom: 20px;
  font-size: 0.8em;
  text-align: left;
}
.member{
  margin-bottom: 10px;
}
.MembershipSectionHeading{
  display: block;
  background: var(--color-DarkGrey);
  padding: 5px;
  font-size: 14px;
  line-height: 2rem;
  text-align: left;
}
.MembershipSection .Button{
  padding: 5px !important;
  margin: 0 !important;
  margin-right: 10px !important;
  text-align: center;
  display: inline-block;
  min-width: 60px;
  line-height: 2rem;
  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 !important;
}
.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";
}

.OrderDelete .Button:hover{
  color: var(--color-Brand) !important;
}

/*Change the Heading of the page*/
#Detail .DetailHeading{
  display: none;
}
#Overlay{
 display: none !important;
}




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

.TurnOnAutoRenewMembershipVerifyCardIframe {
  min-height: 300px;
}

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

.PriceGroupSeatType_5469901, input#Membership_AutoRenew:checked ~ .AutoRenewMembershipBlurb { display: none; }
/* 2022/03/03 Alba requested that "restricted view" not be shown */

.MembershipHistory {
  line-height: 3em;
}

.MembershipHistoryDescription {
  padding-right: 25px;
}

.MembershipHistoryValidity {
  padding-right: 10px;
}

/* hidden page (Vouchers)
.navbar-end > a:nth-child(4){display: none}*/

.programme-synopsis.blog p {padding: 0 20px !important; background: white;} .programme-synopsis.blog p:first-of-type{padding-top: 20px !important;}

.programme-synopsis.blog {
 margin-top: 0;
}
.programme-synopsis.blog > h1.title {
  color: var(--color-Font);
  margin-bottom: 1em;
}
.control.has-icons-left .icon, .control.has-icons-right .icon {
height: 3.5em;
}

/* Hide Talking Pictures drop down menu item */
.page-groups > div:nth-child(1) > div:nth-child(2) > a:nth-child(3){

}

/* Hide Earth Rise drop down menu item  */
.page-groups > div:nth-child(1) > div:nth-child(2) > a:nth-child(4)
{

}
#nav-item-0-sub-5
{
  display: none;
}
.tabs > ul:nth-child(1) > li:nth-child(6) > a{
}

img[src="https://images.savoysystems.co.uk/TLC/7689572.jpg"]{
  transform: scale(0.5);
}

.cc-theme-edgeless.cc-window {
  padding: 10px !important;
}

#Card-7287911-7307959 > div > h4{
 background: #ea6da9;
}

.mc-layout__modalContent{background: white}


#Card-7175342-7175345, #Card-7175342-7175344, #Card-7175342-7175343, #Card-7175342-7417896 {
  margin: 0px;
  padding: 5px;
}

#nav-item-2-sub-3{display: none;}
#nav-item-5-sub-8{display: none;}
#nav-item-2-sub-1{display: none;}
#nav-item-2-sub-2{display: none;}

.mc-modal {z-index: 999999999 !important;}
.mc-layout__bannerContent iframe { height: auto !important }

#Card-7175342-7752192, #Card-7175342-7175344, #Card-7175342-7175345, #Card-7175342-7417896, #Card-7175342-7175343 {
  flex: 0 0 40%;
}

#Card-7175342-7752192 > div > figure, #Card-7175342-7175344 > div > figure, #Card-7175342-7175345 > div > figure, #Card-7175342-7417896 > div > figure, #Card-7175342-7175343 > div > figure {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

/*Hiding Gift Shop Page*/

#nav-link-2{display:none;}

/* Support Us Page */

#Card-7910041-7921463 > div > h4.title {
    background: #EBECDB;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;}

#Card-7910041-7921466 > div > h4.title {
    background: #EBECDB;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center; }

#Card-7910041-7921460 > div > h4.title {
    background: #EBECDB;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
    }

#Card-7910041-7921457 > div > h4.title {
     background: #EBECDB;
     font-weight: bolder;
     display: flex;
     justify-content: center;
     align-items: center;
     }

.youtube-video{
  max-width: 560px;
  margin: 0 auto;
}

/* ---- Start Home page banner ---- */
.hero.has-background:has(#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget) {
  background: var(--color-BG);
}
.hero.has-background:has(#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget),
#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider,
#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-container,
#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item,
#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item,
#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item img.carousel-film-image{
  height: var(--carousel-height-max);
}

#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item {
  display: flex;
  flex-direction: row-reverse;
}

#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item img.carousel-film-image {  
  max-width: none;
  width: auto;
  height: auto;
}

#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .carousel-slide-overlay {
  padding: 20px;
  background: var(--color-BG-Light);
  color: var(--color-Font-Dark);
}

#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .carousel-slide-overlay .subtitle{
  color: var(--color-Font-Dark);
}


#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .carousel-slide-overlay .film-title{
  white-space: break-spaces;
  color: var(--color-Font-Dark);
  font-size: var(--fontsize-Title);
  line-height: 1.5em;
  height: 3em;
}

.hero.has-background:has(#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget) .buttons{
  border-top: solid 40px var(--color-BG-Light);
}

@media(max-width: 1200px) {
  .hero.has-background:has(#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget){
    margin-top: 60px;
  }
  .hero.has-background:has(#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget),
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-container,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item img.carousel-film-image{
    height: var(--carousel-height-1200);
  }
    
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .synopsis {
    display: none;
  }
}

@media(max-width: 980px) {
  .hero.has-background:has(#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget),
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-container,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item img.carousel-film-image{
    height: var(--carousel-height-980);
  }

  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item {    
    flex-direction: column-reverse;
    align-items: center;
  }
  
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .carousel-slide-overlay {
    justify-content: center;
    display: flex;
    width: 100vw;
    text-align: center;
    align-items: center;
    flex-direction: column;
  }
  
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item img.carousel-film-image {  
    height: 100% !important;
    width: fit-content;
  }
}

@media(max-width: 768px) {
  .hero.has-background:has(#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget),
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-container,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item img.carousel-film-image{
    height: var(--carousel-height-768);
  }
}

@media(max-width: 480px) {
  .hero.has-background:has(#HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget),
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-container,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item,
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item img.carousel-film-image{
    height: var(--carousel-height-480);
  }
  #HomePageBanner_CinemaTemplateV5WhatsOnWidget_WhatsOnWidget .slider-item .item img.carousel-film-image {  
    height: fit-content;
    width: 100%;
  }
}


/* ---- End Home page banner ---- */