/* styles.css */
section{
  width:100%; max-width:100%;
  padding:88px 0 0 0; margin-top:0;
}



#promoBanner{
  position: fixed;
  width:100%; height: 600px;
  z-index: 3;
  overflow: hidden;
  background: #4c9bd6 url(header_bg1.jpg) center;
  background-size:cover;
}

#promoVideo{
  min-width: 100%;min-height: 100%;
}
#promoCover{
  position: absolute;
  top: 0; left: 0;
  width:100%; height: 100%;
  background-color: rgba(76, 155, 214, 0.70);
}
#promoText{
  text-align: center;
  font-size:3.5em;
  color:#fff;
  margin-top:19%;
  font-weight: 300;
}
.wb{
  border:solid 1px #fff;
  background-color: transparent;
  margin-top:25px;
  cursor: pointer;
  color: #fff !important;
  padding:16px 58px 16px 58px;
  text-decoration: none;
  font-size:36px;
  transition:background-color 0.2s ease-out,color 0.2s ease-out;
}
.wb:hover{
  background-color: #fff;
  color: #4c9bd6 !important;
}


#contentHolder{
  position: absolute;
  width: 100%; min-height: 1200px;
  background-color: #fff;
  top:717px;
  box-shadow: 0px -1px 1px rgba(120,120,120,0.3);
  z-index: 25;
}
#contentHolder>h1,#contentHolder>.h1{
  width:auto;
  padding:50px 10px;
  text-align: center;
  font-size:3.5em;
  color:#fff;
  font-weight: 300;
  background-color: #4c9bd6;
}
#contentHolder>.h1{
  background-color: #222;
}

#contentHolder article{
  position: relative;
  width:100%;
}
#contentHolder article .padContent{
  width:auto;
  max-width: 1000px;
  margin: auto;
  padding:10px 20px 30px 20px;
}
#contentHolder article p, #contentHolder article ul li, #contentHolder article a{
  font-size:1.2em;
  text-align: justify;
}
#contentHolder article a{
  font-size:1em;
}
.anchor{
  height:130px;
  position: absolute;
  left:-40000px;
  margin-top:-130px;
}




/* programmes */
.pitem{
  position: relative;
  margin-bottom:20px;
  min-height: 154px;
  padding:20px;
  border-bottom:solid 1px #CCC;
}
.pitem img{
  display: block;
  position: absolute;
  top:20px; left: 20px;
  border: solid 2px #fff;
  transition:border-color 0.2s ease-out;
  width: 150px; height: 150px;
  margin:0;padding:0;
}

.pinfo{
  padding:8px 120px 0 170px;
}
  .pinfo h2{
    font-size:23px;
    color:#4c9bd6;
  }
  .pinfo h3{
    font-size:18px;
    color:#7fc354;
  }
  .pinfo p{
    font-size:14px !important;
  }
  .ppdf{
    position: absolute;
    left:25px; top:142px;
    width:143px;
    border: solid 1px #4c9bd6;
    color:#fff;
    font-size: 14px; font-weight: bold;
    background-color: #4c9bd6;
    transition:background-color 0.2s ease-out, color 0.2s ease-out;
    cursor: pointer;
    padding:3px 15px;
    box-shadow: 0 0 2px rgba(0,0,0,0.9);
  }
  .ppdf:hover{
    background-color: #fff;
    color: #4c9bd6;
  }

  .porder,.pemail{
    position: absolute;
    width:95px; height: 95px;
    border-radius: 80px;
    top:50px; right: 20px;

    border: solid 1px #7fc354;
    color:#ffffff;
    font-size: 14px; font-weight: bold;
    background-color: #7fc354;
    transition:background-color 0.2s ease-out, color 0.2s ease-out;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0 2px rgba(0,0,0,0.9);
  }
  .porder:hover, .pemail:hover{
    background-color: #fff;
    color: #7fc354;
  }
.enquiries{
  font-weight: bold;
  color:#7fc354 !important;
  text-decoration: none !important;
}
.enquiries:hover,.enquiries:active{
  color: #4c9bd6 !important;
}

/* bio */
#bioContent{
  background-color: #222;
}
#bioContent p{
  color: #fff;
}
#bioMoreButton{
  display: block;
  border:solid 1px #fff;
  color:#fff;
  background-color: transparent;
  padding:10px 35px;
  cursor: pointer;
  margin:auto;
  font-weight: bold;
  transition: background-color 0.2s ease-out;
}
#bioMoreButton:hover{
  background-color: #fff;
  color: #222;
}
.bioMore{
  display: none;
}

/* booking */
#bookingsContent{
  background-color: #4c9bd6;
  padding-bottom:38px;
}
#bookingsContent p, #bookingsContent h2, #bookingsContent label span{
  color: #fff;
}
#bookingsContent h2{
  padding:30px 0 20px;
  text-align: center;
}
#cform{
  display: block;
  max-width: 600px; margin: auto;
}
#submit{
  border:solid 1px #fff;
  color:#fff;
  background-color: transparent;
  padding:10px 35px;
  font-size:17px;
  cursor: pointer;
  display: block;
  font-weight: bold;
  transition: background-color 0.2s ease-out;
}
#submit:hover{
  background-color:#7fc354;
}

.small{
  color: #888 !important;
}

#date{
  width:135px !important;
}
#time_h,#time_m{
  width:68px !important;
}
#verify{
  display: none;
}

#timeHolder{
  float: left;
  width:200px;
  margin-top:4px;
}
#timeHolder span{
  display:block;
  color: #FFF;
  font-size: 1em;
}
#timeHolder select{
  width: 100%;
  height: 38px;
  border-radius: 20px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  vertical-align: middle;
  background: none repeat scroll 0% 0% #FBFBFB;
  border: 1px solid #DDD;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07) inset;
  font-size: 1.1em;
  padding: 5px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  font-weight: 300;
  box-sizing: border-box;
  margin:6px 0 0 0;
  display: inline-block;
}

@media only screen and (max-width : 800px) {
  #promoText, h2{
    font-size:2.8em;
  }
}

@media only screen and (max-width : 500px) {
  video{
    display: none;
  }
  #promoText, h2{
    font-size:2.1em;
  }

  .pitem{
    padding:10px;
    min-height: 203px;
  }
  .pitem img{
    top:10px; left: 10px;
    width: 110px; height: 110px;
  }
  .pinfo{
    padding:8px 10px 0 120px;
  }
  .pinfo h2{
    font-size:18px;
  }
  .pinfo h3{
    font-size:16px;
  }
  .ppdf{
    width:96px;
    top: 135px; left:19px;
  }
  .porder, .pemail{
    position: absolute;
    width:96px; height: 28px;
    border-radius: 0;
    top:174px; left: 19px;
  }
}