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

 */


/*** BASIC LAYOUT ***/

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

/*** 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;
    font-size: 1.0rem;
}

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

a {
    color:var(--blue);
    text-decoration: none;
    -webkit-transition: color .2s ease-in;
            transition: color .2s ease-in;
}
a:hover { color:var(--pink);text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.6em;
    font-weight: bold;
    color: #4f4f4f;
}
h1 { font-size: 2.0rem; }
h2 { font-size: 1.7rem; }
h2.bachtobabyfont { font-size: 2.0rem;font-family:bachtobabybody;letter-spacing:2px;line-height:1.1;font-weight:normal;text-align:center;margin-bottom:10px; }
h1.bachtobabyheading { font-size: 3.5rem;font-family:bachtobabyheading;letter-spacing:0px;line-height:0.9;font-weight:normal;text-align:center;margin-bottom:10px; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem; font-weight: normal; font-style: italic; }



/* color variables */

:root {
  --blue: #33ccff;
  --pink: #ff6666;
  --menu-color:var(--pink);
}

/* footer link text */

div.footer a {
  color: #4f4f4f;
}

div.footer a:hover {
    font-weight:bold ;
}


img { max-width: 100%; }

/*logo style and animation*/
#mainLogo {
  width:143px;
  padding-right:20%;
  animation-name: logo;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-delay: 0.5s;
}

.menu-animation {
  animation-name: menu;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-delay: 1.0s;
}


@keyframes logo {

from {margin-left:-200px;margin-right:200px;opacity:0%;}
5% {margin-left:-198px;margin-right:198px;opacity:5%;}
10% {margin-left:-191px;margin-right:191px;opacity:10%;}
15% {margin-left:-179px;margin-right:179px;opacity:15%;}
20% {margin-left:-163px;margin-right:163px;opacity:20%;}
25% {margin-left:-142px;margin-right:142px;opacity:25%;}
30% {margin-left:-116px;margin-right:116px;opacity:30%;}
35% {margin-left:-85px;margin-right:85px;opacity:35%;}
40% {margin-left:-50px;margin-right:50px;opacity:40%;}
43% {margin-left:-26px;margin-right:26px;opacity:43%;}
46% {margin-left:-1px;margin-right:1px;opacity:46%;}
51% {margin-left:-14px;margin-right:14px;opacity:51%;}
56% {margin-left:-25px;margin-right:25px;opacity:56%;}
61% {margin-left:-31px;margin-right:31px;opacity:61%;}
66% {margin-left:-33px;margin-right:33px;opacity:66%;}
71% {margin-left:-30px;margin-right:30px;opacity:71%;}
76% {margin-left:-22px;margin-right:22px;opacity:76%;}
84% {margin-left:-0px;margin-right:0px;opacity:84%;}
90% {margin-left:-5px;margin-right:5px;opacity:90%;}
95% {margin-left:-5px;margin-right:5px;opacity:95%;}
to {margin-left:-0px;margin-right:0px;opacity:100%;}
}

@keyframes menu {
   from {opacity:0;}
   to {opacity:1;}
}


#heroHeight {height:500px;}

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

abbr { text-decoration: underline dotted; }

/*** TABLES ***/

div.container {max-width:960px!important;}

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




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

#heroSticker {
  width:350px; position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);
}

table.b  {
    table-layout:fixed; width:290px;  display:block;
    margin: 10px auto;
}
tr.b {height:100px;}
.no-border {border-bottom: none;}
td.b, th.b {height:100px;width:300px}
.no-border {border-right: none;}
table.b td.b > 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; }




/*custom for date blocks transitions*/
.date-block {
  cursor:pointer;
  border:none;
  background-color:#ffffff;
  border-radius: 10px;
}
.date-block:hover{
  transform: scale(1.05);
  /*box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);*/
  transition-duration:0.25s;
}


//.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:0px;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%;}

div.hphd {
  /* The image used   */
 background-image: url("https://d3j8dey5660y7w.cloudfront.net/images/website/Bach to Baby 2015_Alejandro Tamagno_Croydon_2015-10-26-5 - 1500x541.jpg");  
/*   background-image: url("https://d3j8dey5660y7w.cloudfront.net/images/website/BachtoBaby2018_taracarlin_christmas_hero_1.jpg"); */

	

/*https://d3j8dey5660y7w.cloudfront.net/images/website/Bach to Baby 2017_Alejandro Tamagno_Highgate_2018-01-29 019-harp.jpg
https://d3j8dey5660y7w.cloudfront.net/images/website/Pimlico_Bach To Baby_Alejandro Tamagno-52--freecropsm.jpg
*/

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  /*background-color: #eeeeee; */
  
}

div.campaignDiv {
  /* The image used   */
  //background-image: url("https://d3j8dey5660y7w.cloudfront.net/images/website/Friday_Rush_banner_red_animated.gif"); 

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  /*background-color: #eeeeee; */
  
}




div.footer {
  /* The image used  https://www.bachtobaby.com/images/Bach to Baby 2018_Alejandro Tamagno_Docklands_2018-03-16 044 translucent.png */
  background-image: url("https://www.bachtobaby.com/images/Bach to Baby 2018_Alejandro Tamagno_Docklands_2018-03-16 044 translucent.png"); 

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-color: #eeeeee; 
  
}



@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="colX-"] {
        width: 100%;
    }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.6rem; }
    h2.bachtobabyfont { font-size: 2.0rem; }
    h1.bachtobabyheading { font-size: 3.0rem; }
    div.footer {background-attachment: scroll;}
    #mainLogo {width:100px;}

    #navDiv {height:80px!important;}

    #heroHeight {height:250px;}
    
    /* Change mobile hero image below */
    div.hphd { background-image: url("https://d3j8dey5660y7w.cloudfront.net/images/website/Bach to Baby, Alejandro Tamagno, mb hero 1.jpg"); } 
/*    div.hphd { background-image: url("https://d3j8dey5660y7w.cloudfront.net/images/website/bachtobaby-christmas-mobile-hero-v1.jpg"); } */

    #heroSticker {
      top: 80%;  left: 20%;  transform: translate(-50%, -50%); width:250px;
    }
	
}
  
    .highlight { opacity: 1.0; margin:10px;}  
    .normallight { opacity: 0.8; margin:10px;}
    .lowlight  { opacity: 0.4; margin:10px;} 
  
  
  
  #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%;}

/*adding the bach to baby fonts */

@font-face {
  font-family: bachtobabybody;
  src: url(https://www.bachtobaby.com/fonts/bachtobaby-body-regular.otf);
  font-display: swap; // this is important
}

@font-face {
  font-family: bachtobabyheading;
  src: url(https://www.bachtobaby.com/fonts/bachtobaby-headline-regular.otf);
  font-display: swap; // this is important
}