/**
 * Bach to Baby's Specific Style
 *

 */


/*** BASIC LAYOUT ***/

body {
	max-width:960px;
	margin:0 auto;
}



/*** BASIC LAYOUT: HEADER ***/


/*** BASIC LAYOUT: FOOTER ***/


/*** BASIC LAYOUT: EXTRA SMALL DEVICES ***/


/*** TYPOGRAPHY ***/

html { font-size: 14px; }

body {
    font-family: 'Georgia', serif;
    font-size: 1rem;
    line-height: 1.5;
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
    letter-spacing:-0.2px;
    font-kerning: normal;
    color: #4f4f4f;
}

p, td, th, li, dd {
    text-align: left;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/*
p, hr, table, .table-responsive, ol, ul, dl, pre, blockquote, fieldset {
    margin-bottom: 1em;
}
*/

a {
    color: #33ccff;
    font-style: italic;
    text-decoration: none;
    -webkit-transition: color .2s ease-in;
            transition: color .2s ease-in;
}
a:hover { color: #ff6666;text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.6em;
    font-weight: normal;
    color: #4f4f4f;
}
h1 { font-size: 1.8rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem; font-weight: normal; font-style: italic; }

img { max-width: 100%; }

hr {
    border: 0.15em solid #f5f5f5;
    border-radius: 0.3em;
    background: #f5f5f5;
}

abbr { text-decoration: underline dotted; }

/*** TABLES ***/



/* JSC custom for tables */

table.locationaddress {
position:absolute;left:25%;top:5%;
font-size:100%; width:0;width:70%;
        background-color:rgba(255,255,255,0.8);
  cursor: pointer;
}  





/*** LISTS ***/



/*** BLOCKQUOTE ***/



/*** FORMS ***/



/* Firefox input size fix */


/* jsc buttons */
.smallBookTickets {  text-align:center;  color:white;  font: bold 20px Georgia, serif; padding:15px 70px;  text-decoration: none;  background: #ff6666; border-top-right-radius:20px;cursor: pointer; border:none;  margin:0;}

.smallBookButton {  text-align:center;  color:white;  font: bold 20px Georgia, serif; padding:15px 70px;  text-decoration: none;  background: #ff6666; border-top-right-radius:20px;cursor: pointer; border:none;  margin:0;}  
  
  
.smallBookTicketsDoNotDisappear {  text-align:center;  color:white;  font: bold 20px Georgia, serif; padding:15px 70px; background: #ff6666; text-decoration: none;  border-top-right-radius:20px;cursor: pointer; border:none;  margin:0;}

  
a.floating-buy-tickets {  text-align:center;  color:white;  font: bold 20px Georgia, serif; padding:15px 10px;  text-decoration: none; position: fixed; z-index: 20;  left: 0px; right:5px; bottom: 0px; background: #ff6666; border-top-right-radius:20px;cursor: pointer;}

div.Christmas-box {margin:15px 0 30px 0;border: 3px solid #ff6666; display:true;}
  
  div.highlight-box {margin:15px 0 30px 0;border: 3px solid lightgrey;}


/* centering for Bootstrap responsive design */
 .col-centered{
    display:block;
    margin: 0 auto;
    text-align:center;
   
}



  table.B2Bcalendar{table-layout:fixed; width:290px;  display:block;
    margin: 10px auto;}
  tr.B2Bcalendar {border-bottom:solid 2px lightgrey;height:100px;}
.no-border {border-bottom: none;}
  td.B2Bcalendar, th.B2Bcalendar {border-left: solid 2px lightgrey;
    height:100px;width:300px}
  .no-border {border-right: none;}
  table.B2Bcalendar td.B2Bcalendar > div {
    overflow: hidden;
    height: 100px;}
	p.day {
position:relative;left:10px;top:20px;
font-size:100%;line-height:0%;}
  	p.date {
position:relative;left:20px;top:30px;
font-size:250%;font-weight: bold;line-height:0%;}
  	p.time {
position:relative;left:10px;top:45px;
font-size:100%;line-height:0%;}
    p.location {
position:relative;left:90px;top:-20px;line-height:0%;
  font-size:120%;}
  	p.text-title {
position:relative;left:90px;top:-10px;
font-size:100%;font-style:italic;font-weight:bold;line-height:0%;}
    	p.text-line1 {
position:relative;left:90px;top:-5px;
font-size:100%;font-style:italic;line-height:0%;}
      	p.text-line2 {
position:relative;left:90px;top:0px;
font-size:100%;font-style:italic;line-height:0%;}
html { font-size: 14px; }


.body-max-width {max-width:960px}



// CSS for highlights feature  
  .highlightsImage{max-width:40px;}
  .highlightsLocation{font-size:150%;font-weight:bold;padding:10px 0 0px 0;margin:0;}
  .highlightsDate{font-size:120%;padding:0;margin:0;}
  .highlightsProgramme{font-size:100%;padding:5px 0 5px 0;margin:0;}
  .highlightsBuyNow{display: true;  text-align:center;  color:white;  font: bold 20px Georgia, serif; width:80%; padding:10px 5px;  text-decoration: none;  background: #ff6666; border-top-right-radius:20px;cursor: pointer;border:0; }
* {
    box-sizing: border-box;
}
.rowX::after {
    content: "";
    clear: both;
    display: block;
 <!-- border: 2px solid blue; -->
}
[class*="colX"] {
    float: left;
    padding: 10px 10px 25px 10px;

    <!-- border: 1px solid red; -->
}
.colX-1 {width: 33.33%;}
.colX-2 {width: 66.66%;}
.colX-3 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="colX-"] {
        width: 100%;
    }
}
  
    .highlight { opacity: 1.0;}  
    .normallight { opacity: 0.8;}
    .lowlight  { opacity: 0.4; } 
  
  
  
  #highlight1, #highlight2, #highlight3 {    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }



// CSS for home page video on hero
  video::-webkit-media-controls-enclosure {
	padding: 30px;
	height: 30px;
    margin: 30px;
}
#container{
    background:none;
    width: 100%;   
  padding: 0px;
  margin: 0px;

}
#main_image{
  position: relative;
  margin: 0 auto;
    width: 100%;
  max-width:700px;
    height: 100%;
}

#start_image {
   display:none;
    position: absolute;
    top: 0px;
  bottom: 0px;
    right: 0px;
  left: 0px; 
  height:100%;
  width:100%;
  }
  
#final_image {
   display:none;
    position: absolute;
    top: 0px;
  bottom: 0px;
    right: 0px;
  left: 0px; 
  height:100%;
  width:100%;
  
  }
#overlay_image{
  display:true;
    position: absolute;
    top: 0px;
  bottom: 0px;
    right: 0px;
  left: 0px; 
  height:100%;
  width:100%;
  transition: .5s ease;
   pointer-events: none;
  opacity: 1.0;
}
  #overlay_image_top{
  pointer-events: none;
  display:none;
    position: absolute;
    top: 0px;
  bottom: 0px;
    right: 0px;
  left: 0px; 
  height:100%;
  width:100%;
  transition: .5s ease;
 opacity: 1.0;
}
  #main_image:hover #overlay_image {
  display:true;
}


table.B2Bround
{
width:100%;
background:#ffffff;
border-radius:12px;
margin:0px;
}
td.B2B
  {padding:2px;
   border-top:1px solid #C0C0C0;
    border-left:1px solid #C0C0C0;
    background:#ffffff;
    width:100%;
}
td.B2Btop{padding:5px;
   border-top:1px solid #C0C0C0;
   background:#ffffff;
   width:100%;
   }
td.B2Bleft{padding:5px;
    border-left:1px solid #C0C0C0;
    background:#ffffff;
    width:100%;
    }
td.B2Bnone{border:none;padding:5px;}
  
th.B2Bmiddle
  {padding:5px;text-align:center;
 /*background:#F3E7D9; */
  background:#C0C0C0;}
  
   th.B2Bleft{border-radius:12px 0px 0px 0px;background:#C0C0C0;padding-left:5px;}
   th.B2Bright{border-radius:0px 12px 0px 0px;background:#C0C0C0;text-align:center}
   th.B2Bsingle{border-radius:12px 12px 0px 0px;background:#C0C0C0;text-align:center;padding:5px;}  
  img.B2B
  {padding:0px 10px 10px 0px;}
  
div.B2Bround
{
border:2px solid #C0C0C0;
padding:0px 0px; 
background:#C0C0C0;
border-radius:13px;
margin-bottom:20px;
}   
  
div.FG{margin:auto;}  

p.B2B{
    margin:auto;
    padding:auto; /*Add a padding reset just to be safe*/
	text-align: center;
}
  
  p.B2Blinks{text-align: center;font-style:italic;font-weight:normal;font-size:100%;
      margin:auto;
    padding:auto; }   
  a.B2Bbig{text-align: center;font-size: 125%;
      margin:auto;
    padding:auto;} 
p.B2Bbig{text-align: center;font-size: 150%;font-style:italic;
      margin:auto;
    padding:auto;} 



button.buytickets {
  	color: #eef7fd;
	background: #008cdd;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	border-color: #008cdd; 
	font: bold 16px/24px Helvetica, Arial, Sans-Serif;
	height:56px;

  width:100%;max-width:380px;height:40px;
}
button.buytickets:hover {
	color: #fff;
	background-position: 0;
}
button.buytickets:active {
	background: #008cdd;
}

/*style for countdown timer */

p.timer {text-align:center;color:red;font-weight:bold;padding:10px;font-size:120%;}