@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body{
  --color-KidderminsterBlue: #537d9a;
  --color-KidderminsterBlueLight: #9db0c2;
  --color-KidderminsterYellow: #d9ae5d;
  --color-KidderminsterYellowLight: #e4cea8;
  --color-KidderminsterBlack: #000000;
  --color-KidderminsterBlackLight: #929598;
  --color-KidderminsterBlackMLight: #babec0;
  --color-KidderminsterBlackVLight: #e4e7e8;
  --color-KidderminsterWhite: #FFFFFF;
  --color-KidderminsterRed: #66271d;
  
  --color-BG: var(--color-FKidderminsterWhite);
  --color-Font: var(--color-KidderminsterBlack);  
  
  --fontsize-Title: 3rem;
  --fontsize-SubTitle: 1.1rem;
  --fontsize-FilmTitle: 1.3rem;
    
  --color-ButtonStandardBorder: solid 2px var(--color-KidderminsterBlue);
  --color-ButtonStandardBg: var(--color-KidderminsterWhite);
  --color-ButtonStandardFont: var(--color-KidderminsterBlack);
  
  --color-ButtonActionBorder: var(--color-KidderminsterBlue);
  --color-ButtonActionBg: var(--color-KidderminsterBlue);
  --color-ButtonActionFont: var(--color-KidderminsterWhite);
  
  width: auto !important; 
   
  /*font-family: 'Roboto', sans-serif;*/
  /*font-family: 'Open Sans', sans-serif;*/
  /*font-family: 'Source Sans Pro', sans-serif;*/


  font-family: var(--font-Regular);
  --font-Regular: "Lato", sans-serif;
  --font-Title: "Aleo", serif;
}


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

.hidden{
  display: none !important;
}

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

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

#ContentWrapper.container {
  padding-left: 0;
  padding-right: 0;  
}

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

#Content > h2 {
  text-align: center;
  margin: 5rem 0;
}

#Content .container > .subtitle {
  text-align: center;
  margin: 0.5rem 0;
}

#Content .container > form {
  margin: 0.5rem 0;
  background: var(--color-LightGrey);
  padding: 50px;
  padding-top: 0px;
}

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

article .title {
  margin: 2em;
}

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

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

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


@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-BG);*/
  background: var(--color-KidderminsterBlue);
  font-size: 0.8em;
  line-height: 1.2em;
  font-weight: bold;
  height: auto;
}

#TopMenu .container{
  /*background: var(--color-BG);*/
  background: var(--color-KidderminsterBlue);
}


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

.button .icon {
  height: 2em;
  width: 2em;
  font-size: 2em;
}


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


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

#TopMenu #BasketForMobile{
  display: none;
}

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

@media(max-width: 768px){
  #TopMenu .SideBar2Menu, #TopMenu .SideBar99Menu {
    display: block;
  }
  #TopMenu .SideBar2Menu, #TopMenu .SideBar2Item, #TopMenu .SideBar99Menu, #TopMenu .SideBar99Item {
    display: inline-block;
  }
  #TopMenu #UserDefinedMenu, .bd-tw-button.button {display: none !important}
}
/*---------------------------------------------
  MAIN MENU
---------------------------------------------*/
#MainMenu{
  background: var(--color-BG);
  color: var(--color-BrandFont);
  text-transform: uppercase;
  font-weight: bold;
}

#MainMenu .container{
  background: var(--color-BG);
  flex-direction: column;
  padding: 0;
}

#MainMenu .container .navbar-start{
  display: none;
}


#MainMenu .container .navbar-end{
  justify-content: center;
  margin: auto;
  width: 100%;
}

#nav-item-1, #nav-item-2, #nav-item-5 {
  display: none;
}

#MainMenu #navbarMain {
  background: var(--color-KidderminsterBlue);
  font-family: var(--font-Title);
  margin: 0;
}

#MainMenu .navbar-brand {
  justify-content: center;  
  margin-top: 1rem;
  margin-bottom: 1rem;
}


#MainMenu .navbar-brand img{
  max-height: 10rem;
  width: auto;
}

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

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

#MainMenu .navbar-brand a.navbar-burger{
  position: absolute;
  color: var(--color-Brand);
  right: 0;
  width: 80px;
  height: 40px;

}

.navbar-burger.burger {
  width: 100%;
}

#MainMenu .navbar-item, #MainMenu .navbar-link{
  color: var(--color-KidderminsterWhite);
  transition: all 0.5s;
  line-height: 3em;
  text-transform: capitalize;
}

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

div.navbar-item:nth-child(6){
  display: none;
}

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


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

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

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

#MainMenu .input{
  background: none;
}


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

  }

  .navbar-menu {
    background: none;  
  }

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

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

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

}

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

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

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

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


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

/* Mark W doesn't want these pages to appear in the menu */
div.navbar-item:nth-child(4) > div:nth-child(2) > a:nth-child(1), div.navbar-item:nth-child(5) > div:nth-child(2) > a:nth-child(1), div.navbar-item:nth-child(6) > div:nth-child(2) > a:nth-child(1), div.navbar-item:nth-child(2) > div:nth-child(2) > a:nth-child(1),div.navbar-item:nth-child(7) > div:nth-child(2) > a:nth-child(1),div.navbar-item:nth-child(8) > div:nth-child(2) > a:nth-child(1), div.navbar-item:nth-child(3){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;
}

h3.film-title{
  font-weight: bold;
  margin-bottom: 10px;
  font-size: var(--fontsize-FilmTitle);
  text-transform: uppercase;
}

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

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

/*---------------------------------------------
  BUTTONS
---------------------------------------------*/
input.Button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.button, button, .Button, input.Button, #SkipThisStep a, a.SectionName{
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--fontsize-Button);
  border: none;
  border-radius: 0;
  background: var(--color-ButtonActionBg);
  color: var(--color-ButtonActionFont) !important;
  transition: all .2s ease-in-out;
  font-family: var(--font-Regular);
  padding: 0.5em 1em;
  cursor: pointer;
}



.button.booking{
  background: var(--color-KidderminsterBlue);
  color: var(--color-KidderminsterWhite) !important;
}

input.Button{
  float: left;
}

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

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

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

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

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


/*---------------------------------------------
  CUSTOM BUTTONS
---------------------------------------------*/
.button, button, .Button, input.Button{
  font-weight: bold;
  font-size: var(--fontsize-Button);
  text-transform: uppercase;
  border-radius: 0;
  background: var(--color-ButtonStandardBg);
  color: var(--color-ButtonStandardFont) !important;
  transition: all .2s ease-in-out;
  font-family: var(--font-Regular);
  padding: 0.5em 1em;
  cursor: pointer;  
}
input.Button{
  float: left;
  margin-top: 1em;
}
.button:hover, .Button:hover, input.Button:hover{
  transform: scale(1.1);
  color: var(--color-ButtonStandardFont);
}
.PrevNext{float: left; width: 100%; clear: both;}
.button.action, input.Button, .Button.ContinueButton{
  background: var(--color-ButtonActionBg) !important;
  color: var(--color-ButtonActionFont) !important;
}
input.Button, .Button.ContinueButton{
  height: auto;
}
#btnVoucherPayment.Button, .Button.BackButton, #btnOrangeWednesdays.Button, #btnClose.Button{
  border: none;
  font-size: var(--fontsize-SubTitle);
}
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: red;
  color: #FFF;
}

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

span.kids .tag, .tag.kids{
  background: #FF7F11;
}
span.soldout .tag,.tag.soldout{
  background: #FF1B1C;
}
span.silver .tag,.tag.silver{
  background: #32CD32;
}
span.baby .tag, .tag.baby{
  background: purple;
}
span.onfilm .tag, .tag.onfilm{
  background: #000;
}
span.audio .tag,.tag.audio{
  background: purple;
}
span.social .tag,.tag.social{
  background: brown;
}
span.dementia .tag,.tag.dementia{
  background: green;
}

span.subtitled .tag,.tag.subtitled{
  background: blue;
}

span.toddler .tag,.tag.toddler{
  background: #FF82A9;
}

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

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

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

#HomeBanner_CinemaTemplateV4Banner1 .slider-item .film-rating{
  height: 30px;
  position: absolute;
  top: 40px;
  right: 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;
}

.slider:hover .slider-navigation-next, .slider:hover .slider-navigation-previous{
  opacity: 1;
  z-index: 2;  
}
#HomeBanner_CinemaTemplateV4Banner1 .carousel-slide-overlay{
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 40px 100px 40px 40px;
  width: 40%;
  height: 100%;
  color: var(--color-KidderminsterWhite);
  background: var(--color-KidderminsterBlack); 
}
.carousel-slide-overlay h3.film-title{
  color: var(--color-KidderminsterYellow);
  font-size: var(--fontsize-Title);
  margin: 0;
}
.carousel-slide-overlay h4{
  color: var(--color-KidderminsterYellowLight);
}

.carousel-slide-overlay .synopsis{
  display: none !important;
}

.carousel-slide-overlay .buttons{
  
}
.slider-navigation-next, .slider-navigation-previous{
  background: none !important;
  color: var(--color-DarkBgFont);
}
.slider-navigation-next{
  right: 20px !important;
}
.slider-navigation-previous {
  left: 20px !important;  
}
@media(max-width: 1024px){
  #HomeBanner_CinemaTemplateV4Banner1 .synopsis {
    font-size: var(--fontsize-SubTitle);
  }
}
@media(max-width: 768px){
  #HomeBanner_CinemaTemplateV4Banner1 .slider{
    min-height: 380px;
  }  
  #HomeBanner_CinemaTemplateV4Banner1 .slider-item > div.item img.carousel-film-image{
    width: 100%;  
  }
  #HomeBanner_CinemaTemplateV4Banner1  .slider-item, .slider-item > div.item{
    min-height: 380px;  
  }
  #HomeBanner_CinemaTemplateV4Banner1 .carousel-slide-overlay{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    width: 100%;
    height: 40%;
  }
  #HomeBanner_CinemaTemplateV4Banner1 .slider-item .film-rating{
  right: 40px;  
  }
  #HomeBanner_CinemaTemplateV4Banner1 .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-LightGrey);
}

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

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


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

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

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

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

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

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

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

}


/*---------------------------------------------
  QUICK BOOK
---------------------------------------------*/
#quick-book{
  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;
  height: 100%;
}

.select:not(.is-multiple):not(.is-loading)::after {
  margin-top: -.6375em;
}


/*---------------------------------------------
  Content
---------------------------------------------*/
section {
    margin-top: 2em;
}

#Content{
  margin-top: 0;
  padding-top: 0;
}
.hero {
  position: relative;
  margin-bottom: 2em;
}
.hero .hero-body.film {
  padding: 0;
  position: relative;
  margin-bottom: 5rem;
}

.hero .hero-body {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
}

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


.hero .hero-body.film .breadcrumb{
   position: absolute;
   top: 10px;
   left: 20px;
   z-index: 2;
   color: var(--color-DarkBgFont);
}

.hero .hero-body.film h1.title{
  text-transform: uppercase;
  text-align: center;
  margin-top: 5rem;
}
/*---------------------------------------------
  TABS
.---------------------------------------------*/
.performance-key {
  display: none;
}

.tabs li.control.calendar-icon {
  display: none;
}

.tabs .input{
  background: var(--color-BG);
  height: 1rem;
}
.tabs {
  margin-top: 5rem;
  margin-bottom: 5rem !important;
}

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

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

  ul.key span.tag{
    font-size: 0.6rem;
  }
}
/*---------------------------------------------
  Whats On
---------------------------------------------*/
#whats-on-list figure.image{
  width: 100%;
}
#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: 20px 20px 100px 20px;
  -webkit-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.49);
  -moz-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.49);
  box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.49);
  border-bottom: solid 2px var(--color-DarkGrey);
  margin-bottom: 5rem;
}
#whats-on-list .box .column.is-8{
  border-left: solid 2px var(--color-DarkGrey);
}
ul.info{
list-style: none;
  padding: 0;
  margin: 10px 0 0;
    margin-bottom: 0px;
  font-size: 0.8rem;
  padding: 20px;
  margin-bottom: 3rem;
  background: var(--color-KidderminsterBlackVLight);
}
@media(max-width: 640px){
  ul.info{
    margin-bottom: 0px;
    padding-bottom: 0px;
  }
}

#whats-on-list .rating-image{
  position: absolute;
  height: 1em;
  top: 10px;
  right: 10px;
}
img.film-rating{
  height: 1.5em;
  width: auto;
}
ul.info img.film-rating{
  margin-bottom: -7px;
}
.title img.film-rating{
  margin-bottom: -10px;
}
#whats-on-list ul.buttons{
  position: absolute;
  bottom: 20px;
  right: 20px;
}
#whats-on-list ul.buttons li{
    margin-top: 0;
}
#whats-on-list ul.buttons li {
   margin-right: 0;
   margin-left: 10px;
}
#whats-on-list ul.buttons li a.button{
   border: none;
}
ul.performances{
  margin: 20px 0;
  list-style: none;
  text-align: right;
  background: var(--color-LightGrey);
  margin-bottom: 4em;
}
ul.performances li.performance{
  line-height: 2rem;
  font-size: 1rem;
  position: relative;
  min-height: 3rem;
  margin: 0;
  margin-bottom: 2em;
  background: var(--color-KidderminsterBlackVLight);
}
ul.performances li.performance span.is-3{ width: auto; min-width: 160px;}
ul.performances li.performance .date{
  left: 0;
  display: inline-block;
  width: 30%;
  font-weight: bold;
}
ul.performances li.performance .button{
  right: 0;
  min-width: 100px;
  text-transform: none;
  padding-left: 40px;
  height: 2rem;
  margin-left: 20px;
  margin-bottom: 0.2em;
}
ul.performances li.performance .button .fa-ticket-alt{
  position: absolute;
  left: 10px;
}
#TheVideo{
  position: relative;
}

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

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

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

.SideBarToggle{
  display: none;
}

#Aside {
  display: none;
}

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

#Aside #SideBar{
  display: none;
}

/*---------------------------------------------
  Footer
---------------------------------------------*/
footer.footer{
  margin-top: 5rem;
  padding: 0;
  background: var(--color-KidderminsterBlackVLight);
  color: var(--color-KidderminsterWhite);
}

footer .container{
  padding: 5rem 0px;
}

footer .container.top{
  
}

footer .container.middle{
  background: var(--color-KidderminsterBlue);
  color: var(--color-KidderminsterWhite);
  width: 100%;
  max-width: 100%;
}

.container.middle .bd-footer-links{
  max-width: 1400px;
  margin: 0 auto;
}

footer .container.bottom{
  background: var(--color-KidderminsterYellow);
  color: var(--color-KidderminsterWhite);
  width: 100%;
  max-width: 100%;
}

footer .container.bottom .copyright{
  max-width: 1400px;
  margin: 0 auto;
}

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

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

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

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

.bd-footer-link a:hover {
  color: var(--color-Brand);
}

footer .subtitle{
  color: var(--color-KidderminsterYellow);
font-family: var(--font-Title);  
}

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

.footer .card .button {
  background: var(--color-KidderminsterYellow) !important;
}

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

.tweet-container{
  max-height: 140px;
  overflow-x: hidden;
  height: 140px;
  overflow-y: scroll;
}

.newsletterPopup #ENewsSignup label {
  margin-top: 5px;
}

/*---------------------------------------------
  CARDS
---------------------------------------------*/
.card{
  margin: 15px;
  background: var(--color-DarkBg);
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  height: 300px;
}

.card-header-title {
  font-family: var(--font-Title);
}

.card > figure {
  position: absolute;
}

.card-content {

}

.card > .content {
position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(0deg, rgb(47, 37, 30) 0%, rgba(47,37,30,0.4357142515209209) 100%);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.card > .content > .title {
  color: var(--color-KidderminsterWhite);

}

.card > .content > figure {
  display: none;
}

.card .button{
  background: var(--color-KidderminsterBlue) !important;
  color: var(--color-KidderminsterWhite) !important;
}

/* Heritage Lottery Fund cards */
#Card-1539-8009 > figure, #Card-1539-8010 > figure, #Card-1539-8011 > figure, #Card-1539-8513 > figure, #Card-1539-8516 > figure, #Card-1539-8519 > figure,#Card-1539-8522 > figure, #Card-1539-8524 > figure {
  position: absolute;
  top: 5px;
  left: 5px;
}

#Card-1539-8009 > figure img, #Card-1539-8010 > figure img, #Card-1539-8011 > figure img, #Card-1539-8513 > figure img, #Card-1539-8516 > figure img, #Card-1539-8519 > figure img, #Card-1539-8522 > figure img, #Card-1539-8524 > figure img {
  height: 70px;
}

#Card-1539-8009 > .content, #Card-1539-8010 > .content, #Card-1539-8011 > .content, #Card-1539-8513 > .content, #Card-1539-8516 > .content, #Card-1539-8519 > .content, #Card-1539-8522 > .content, #Card-1539-8524 > .content {
  justify-content: start;
  align-items: normal;
  background: none;
  top: 90px;
  left: 5px;
  right: 10px;
  bottom: 5px;
}

#Card-1539-8009 > .content > .title, #Card-1539-8010 > .content > .title, #Card-1539-8011 > .content > .title, #Card-1539-8513 > .content > .title, #Card-1539-8516 > .content > .title, #Card-1539-8519 > .content > .title, #Card-1539-8522 > .content > .title, #Card-1539-8524 > .content > .title {
  color: var(--color-KidderminsterBlue);
  margin: 0.5em;
}

#Card-1539-8009 > .content > figure, #Card-1539-8010 > .content > figure, #Card-1539-8011 > .content > figure, #Card-1539-8513 > .content > figure, #Card-1539-8516 > .content > figure, #Card-1539-8519 > .content > figure, #Card-1539-8522 > .content > figure, #Card-1539-8524 > .content > figure  {
  display: block;
  margin: 0.5em;
}

#Card-1539-8009 > .content .button, #Card-1539-8010 > .content .button, #Card-1539-8011 > .content .button, #Card-1539-8513 > .content .button, #Card-1539-8516 > .content .button, #Card-1539-8519 > .content .button, #Card-1539-8522 > .content .button, #Card-1539-8524 > .content .button {
  display: none;
}


/*/////////////////////////Town Hall Newsletter Small Cards ////////////////*/
#Card-1539-13158 {
  width: 25%;
  height: 470px;
  margin: 0 auto;
}

#Card-1539-13158 {

}

@media(min-width: 769px){
#Card-1539-13158 {
  padding-right:700px;
}
}



#Card-1539-13158 > figure, #Card-1539-13159 > figure, #Card-1539-13160 > figure, #Card-1539-13161 > figure, #Card-1539-13162 > figure, #Card-1539-13163 > figure {
  position: absolute;
  top: 0px;
  left: 0px;
}

#Card-1539-13159 > figure img, #Card-1539-13160 > figure img, #Card-1539-13161 > figure img, #Card-1539-13162 > figure img, #Card-1539-13163 > figure img {
  height: auto;
}

#Card-1539-13158 > .content, #Card-1539-13159 > .content, #Card-1539-13160 > .content, #Card-1539-13161 > .content, #Card-1539-13162 > .content, #Card-1539-13163 > .content {
  justify-content: start;
  align-items: normal;
  background: none;
  top: 5px;
  left: 5px;
}

#Card-1539-13158 > .content > .title, #Card-1539-13159 > .content > .title, #Card-1539-13160 > .content > .title, #Card-1539-13161 > .content > .title, #Card-1539-13162 > .content > .title, #Card-1539-13163 > .content > .title {
  color: var(--color-KidderminsterYellow);
  font-weight: bold;
  background: #fff;
}

#Card-1539-13158 > .content > figure, #Card-1539-13159 > .content > figure, #Card-1539-13160 > .content > figure, #Card-1539-13161 > .content > figure, #Card-1539-13162 > .content > figure, #Card-1539-13163 > .content > figure {
  display: block;
  margin: 0.5em;
}

#Card-1539-13159 > .content .button, #Card-1539-13160 > .content .button, #Card-1539-13161 > .content .button, #Card-1539-13162 > .content .button, #Card-1539-13163 > .content .button {
  /* display: none; */
}

/*---------------------------------------------
  ACCORDIONS
---------------------------------------------*/

.accordion-container .column {
  flex: 3;
}

.accordion-container .accordion-title {
  flex: 1 !important;
}

/*---------------------------------------------
  SEARCH
---------------------------------------------*/
.search-icon .icon.is-small.is-right{
  color: var(--color-DarkBg);
  height: 2em;
  display: none;
}


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;
  display: none;
}


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

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

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


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


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

#Content .tabs{
  overflow: inherit;
}

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

.onecol {
width: 4.85%;
}

.twocol {
width: 13.45%;
}

.threecol{
width: 22.05%;
}

.fourcol {
width: 30.75%;
}

.fivecol {
width: 39.45%;
}

.sixcol {
width: 48%;
}

.sevencol {
width: 56.75%;
}

.eightcol {
width: 65.4%;
}

.ninecol{
width: 74.05%;
}

.tencol {
width: 82.7%;
}

.elevencol {
width: 91.35%;
}

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

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

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

img {
height: auto;
}


/* Smaller screens */

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

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

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

}


/* Mobile */

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

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

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

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

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

#WizardSteps{
display: none;
}

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

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

.WebTab{
  display: none;
}

.WebTab a{
  display: none;
}

.SelectedWebTab a{
  display: none;
}

.LoyaltySchemeHeading {
  font-weight: bold; margin-top: 20px;
}
.RegisteredCardHeading {
  font-weight: bold; margin-top: 20px;
}
.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);
}
.DiscountSection {
margin-top: 20px;
display: inline-block;
padding: 20px;
background: var(--color-KidderminsterBlackVLight);
width: 100%;
}
.DiscountSubHeading {
  font-weight: bold; margin: 10px 0;
}

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

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

.programme > h1.title, .DetailHeading {
  display: block;
  text-align: center;
  margin: 5rem 0;
  text-transform: uppercase;
  font-weight: bold;
  font-family: var(--font-Title);
  color: var(--color-KidderminsterBlue);
  line-height: 1.2;
}

.programme > .twelvecol{text-align: center; margin: 3rem 0;}

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

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

form.UnallocatedSeating{
  background: var(--color-LightGrey);
  padding: 40px;
  display: inline-block;
  width: 100%;
  margin-bottom: 40px;
}

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

.tile.share > .title {display: none;}

.Booking > .Booking > .Booking > .PerformanceList img {
  width: auto;
  height: auto;
}

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

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

ul.share li a {
  font-size: 2em;
}

.WhatsOn article p {
  margin-left: 20px !important;
  margin-right: 10px !important;
}

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

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


@media (max-width: 767px) {
  #Detail.PerformanceList{
    overflow-x: scroll; overflow-y: hidden;
  }
}

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

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

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

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

#Detail.LoginPrompt form{
padding: 20px;
background: var(--color-KidderminsterBlackVLight);
margin: 20px 0;
}

/*#SkipThisStep a{
font-weight: bold;
color: #FFF;
background: var(--color-BrandBlue);
padding: 0.5rem 1rem;
line-height: 3rem;
} */

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

#Detail.PasswordResetRequestPrompt, #Detail.LoginPrompt {text-align: center;}

#PatronDetails > form, .PasswordResetRequestPrompt  > form, .LoginPrompt > form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#PatronDetails > form .row, .PasswordResetRequestPrompt  > form .row, .LoginPrompt > form .row {
  display: flex;
  width: 100%;
  text-align: center;
}
#PatronDetails > form .row > .sixcol, .PasswordResetRequestPrompt  > form .row > .sixcol, .LoginPrompt > form .row .sixcol {
  width: 100%;
  margin: 0 auto;
  max-width: 680px;
display: flex;
  flex-direction: column;
}

#PatronDetails > form .row > .sixcol.last, .LoginPrompt > form .row .sixcol.last {
  display: none;

}

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-KidderminsterBlue);
  width: 100%;
  padding: 9.5px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 1rem;
  /*background: var(--color-KidderminsterBlackMLight);*/
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus{
  border: solid 1px var(--color-KidderminsterBlue);
  background: var(--color-KidderminsterBlackMLight);
}
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: background: var(--color-KidderminsterBlackVLight);
}
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: var(--color-KidderminsterBlack);
  font-family: var(--font-Title);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.PersonType select{
  width: 100%;
  max-width: 100px;
  background: #ccc;
  border: 1px solid black;
}
.DetailSubHeading, .EditPatronHeading{
  clear: both;
  display: block;
  float: left;
  width: 100%;
  padding-bottom: 10px;
  margin: 5px 0px 10px;
}
.EditPatronHeading{
display: none;
}
.InlineValidationMessage{
  font-size: 0.8em;
  color: #FFF;
  background: #990000;
  width: 100%;
  position: relative;
  top: -5px;
  padding: 3px;
}
@media (max-width: 767px) {
  label.SelectLabel, label.TextLabel {
    text-align: right;
    font-size: 1.2em;
    line-height: 2.5em;
    margin-right: 10px;
  }
#CardMMYY .sixcol{
  float: left; width: 45%;
}
#CardMMYY .sixcol.last{
  float: right; width: 45%;
}
}
.DateInputLabel {
  display: inline;
}
.AllocatedSeating .Button.AddToOrder1{
  display: none;
}
.PaymentHeading, .PaymentPageSeparator {
 display: none;
}
iframe{
  width: 100%;
}
@media(max-width: 480px){
  iframe{
    max-width: 480px;
  }
}

iframe#CardstreamHPPIFRAME {
  height: 680px !important;
}

.PaymentMethod{
  background: var(--color-KidderminsterBlackVLight);
  padding: 20px;
  display: inline-block;
  width: 100%;
  margin-bottom: 1em;
  text-align: center;
}
@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;
}

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

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

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

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

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

}

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

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

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

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

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

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

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

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

DIV.PersonType{ padding-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: auto; }
TD.SaleItemPromptText{ padding-right: 5px; width: 30px; text-align: right; }
TD.SaleItemInput{ padding-right: 5px; }
TD.SaleItemPriceText{ }
/*---------------------*/
/*---- Month View -----*/
/*---------------------*/

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

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

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

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

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

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

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

.day .mobile{
  display: none;
}

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

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

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

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

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

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

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

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

DIV.SelectedSeat {
  z-index: 2;
}

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

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

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

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

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

}

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

#Detail.PerformanceList{
  overflow-y: hidden; 
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  #Detail.PerformanceList{
    overflow-x: scroll; overflow-y: hidden;
  }
}

#Detail.PerformanceList p:nth-of-type(3), #Detail.PerformanceList p:nth-of-type(5) {
  margin:20px 0px;
}

.AllocatedSeating.PopupSeatSelection {
  text-align: center;
  display: flex;
  flex-direction: column;
}

#UpsellForm{
  padding: 20px;
  background: #EEE;
  margin: 20px 0;
  display: inline-block;
  width: 100%;
}



.SelectPersonTypeOverlayCancel {
  margin-top: 10px;
}

DIV.SelectPersonTypeOverlayCancel a {
  display: block;
  text-align: center;
  background: var(--color-KidderminsterBlackVLight);
  height: auto;
  padding: 2px;
}

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

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

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

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

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

.PriceGroup{
  clear: both;

}

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

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

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

.PriceGroupPersonTypeQuantity{
  text-align: center;
}

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



.ViewOrder table, .DiscountsPrompt table, .PaymentPrompt table {
width: 100% !important;
  border-spacing: 0;
  border-collapse: collapse;
  margin-top: 10px;
  background: var(--color-KidderminsterBlackVLight);
  padding: 40px;
  border: solid 40px var(--color-KidderminsterBlackVLight);
  margin: 3rem 0;
}

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

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

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

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

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

.TurnOnAutoRenewMembershipVerifyCardIframe {
  min-height: 300px;
}

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

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

 #MyOrderSimpleMenu { display: none; }


/*----------BUTTONS FOR THE PSUEDO MENU THING ------------*/
#MainMenu .container .navbar-end {
  position: relative;
  margin-top: 60px;
}
div.navbar-item:nth-child(9) {
  display: flex;
  position: absolute;
  top: -60px;
  justify-content: space-between;
  width: 100%;
  padding: 0px;
}

div.navbar-item:nth-child(9) .buttons {
  display: flex;
  width: 100%;
}
div.navbar-item:nth-child(9) .buttons .button {
  width: 33.33%;
  margin: 0;
}
#navbarMain > div.navbar-end > div:nth-child(9) > div > a {
  color: #fff !important;
}

/*Live*/
#navbarMain > div.navbar-end > div:nth-child(9) > div > a:nth-child(1) {
  background-color: #A5AE9B !important;
  background-image: url('https://kidderminstertownhall.org.uk/KidderminsterTownHall/images/logos/Live/Kidderminsterlivelogo.png') !important;
}

/*Weddings*/
#navbarMain > div.navbar-end > div:nth-child(9) > div > a:nth-child(2) {
  background-color: #E1B75A !important;
}

/*Events*/
#navbarMain > div.navbar-end > div:nth-child(9) > div > a:nth-child(3) {
  /*background-color: #A5AE9B !important;*/
}



.image-row {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.image-col {
  flex: 1 1 0;
  padding: 16px;
  /*background: #eee;
  border: 1px solid #ccc;*/
  text-align: center;
  display: flex;
  align-items: center;       /* Vertical center */
  justify-content: center;   /* Horizontal center (optional) */
}

.image-col img {
  max-width: 100%;
  height: auto;
}

/* Stack columns vertically on screens <= 768px */
@media screen and (max-width: 768px) {
  .image-row, .info-row{
    flex-direction: column;
    gap: 10px;
  }
}

.info-row {
  display: flex;
  gap: 20px;
}

.info-row .col-main {
  flex: 2;     /* Twice the width */
  padding: 26px;
}

.info-row .col-main h1{
  text-transform: uppercase;
}

.info-row .col-side {
  flex: 1;     /* Half the width of col-main */
  background: var(--color-KidderminsterYellow);
  text-align: center;
  padding: 50px 25px;
  color: #fff !important;
}

.info-row-2 {
  display: flex;
  gap: 20px;
}

.info-row-2 .col-main {
  flex: 1;
  padding: 26px;
}

.info-row-2 .col-main h1{
  text-transform: uppercase;
}

.info-row-2 .col-side {
  flex: 1;
  text-align: center;
  padding: 50px 25px;
  color: #fff !important;
}


/* to be removed in January */

#PerformanceTime_16147, #PerformanceTime_17273, #PerformanceTime_16182, #PerformanceTime_17275 {
  text-transform: uppercase;
}