*{
  margin: 0;
  padding: 0;
}

body{
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #003E6B;
}
body.bg{
  background-color: #003E6B;
}
#white{ background-color:#FFFFFF; }

img{
  border: 0;
  max-width:100%;
}

a{
  text-decoration: none;
  cursor:pointer;
  color: #41B5E6;
}
a:focus{
  outline: none;
}

h2{
  font-family: Hermes;
  font-weight: bold;
  color: #41B5E6;
  font-size: 45px;
  line-height: 45px;
  padding-bottom: 10px;
  border-bottom: 5px solid #41B5E6;
  margin-bottom: 30px;
}
h2.red{
  border-color: #F04B5D;
  color: #F04B5D;
}
h2.noline{
  border-bottom:none;
  padding-bottom:0;
}

.about h2{
  color: #003E6B;
  border-color: #003E6B;
}
.centre-based-education h2{
  color: #67C8C7;
  border-color: #67C8C7;
}
.home-based-education h2{
  color: #F9DF0F;
  border-color: #F9DF0F;
}
.become-an-educator h2{
  border-color: #F04B5D;
  color: #F04B5D;
}


h3{
  font-family: Hermes;
  font-weight: normal;
  color: #003E6B;
  font-size: 25px;
  line-height: 25px;
  margin-top: 30px;
  margin-bottom: 15px;
}



p{
  margin-bottom: 15px;
}

ul, ol{
  margin: 0 0 15px 30px;
}

.blue{
  color: #41B5E6;
}
.darkblue{
  color: #003E6B;
}
.red{
  color: #F04B5D;
}
.green{
  color: #67C8C7;
}


.container{
  width: 98%;
  max-width: 1250px;
  margin: 0 auto;
  position:relative;
}

#header{
  height: 120px;
  overflow:hidden;
}
#header ul{
  float: right;
}
#header ul li{
  display: block;
  width: 115px;
  height: 120px;
  float:left;
}
#header ul li a{
  display: block;
  height: 120px;
  background-color: #CCCCCC;
  border-left: 5px solid #FFFFFF;
  position:relative;
  color: #FFFFFF;
  line-height: 16px;
  transition: .7s height, .7s margin-top;
}
#header ul li a .link{
  display: block;
  position:absolute;
  left:5%;
  bottom:15px;
  width: 90%;
  text-align: center;
}

#header a.blue, #mobilenavcolour.blue #navbutton{ background-color: #003E6B; }
#header a.green, #mobilenavcolour.green #navbutton{ background-color: #65C8C8; }
#header a.yellow, #mobilenavcolour.yellow #navbutton{ background-color: #F9DF0F; color: #003E6B; }
#header a.red, #mobilenavcolour.red #navbutton{ background-color: #EF4B5E; }
#header a.lightblue, #mobilenavcolour.lightblue #navbutton{ background-color: #41B5E6; }

#header ul li a.current{
  height: 100px;
  margin-top: 20px;
  transition: .3s height, .3s margin-top;
}

#header ul li a:hover{
  height: 80px;
  margin-top: 40px;
  transition: .3s height, .3s margin-top;
}

#navbutton{ display: none; }

#submenu{
  height: 40px;
  margin-bottom: 40px;
}
#submenu ul{
  float: right;
  min-width: 685px;
  list-style-type:none;
  margin:0;
}
#submenu ul li{
  display: inline;
}
#submenu ul li a{
  color: #FFFFFF;
  margin-right: 20px;
  line-height: 40px;
  font-size: 15px;
}
#submenu ul li a.current, #submenu ul li a:hover{
  text-decoration:underline;
}

.about #submenu{ background-color: #003E6B; }
.centre-based-education #submenu{ background-color: #67C8C7; }
.home-based-education #submenu{ background-color: #F9DF0F; }
.home-based-education #submenu ul li a{ color: #003E6B; }
.become-an-educator #submenu{ background-color: #F04B5D; }


table{
  border-collapse: collapse;
  border:0;
}
table td, table th{
  padding: 5px 15px 5px 5px;
  border-bottom: 1px solid #CCCCCC;
  text-align: center;
}
table th{
  background-color: #f1f1f1;
  border-bottom: 1px solid #CCCCCC;
}


#carousels{
  margin-bottom: 30px;
}
#carousels #owl{
  float: left;
  width: 40%;  
}
#carousels #owl2{
  float: left;
  width: 60%;
}
#owl{
  text-align:Center;
}












#header h1{
  padding-top: 25px;
  float:left;
}

.bold{ font-weight: 700; }






.middle{
  padding: 0 10%;
}

.half{
  float:left;
  width: 48%;
}
.half + .half{
  margin-left: 4%;
}
.clear{ clear:both; }

.quote{
  color: #41B5E6;
  font-size: 25px;
  line-height: 35px;
  margin: 20px 0 20px 50px;
}
.quote .credit{
  display: block;
  font-size: 14px;
}

.button{
  display: inline-block;
  width: 150px;
  height: 47px;
  color: #FFFFFF !important;
  text-align:center;
  line-height: 47px;
  font-family: Hermes;
  font-weight: normal;
  font-size: 18px;
  background:none;
  border:0;
  background-image: url(images/button.png);
  background-size: 100% 100%;
  text-transform: uppercase;
  transition: .7s text-shadow;
  margin-right: 30px;
  margin-bottom: 15px;
  cursor:pointer;
}
.button:hover{
  text-shadow: 0 0 5px #000000;
  transition: .3s text-shadow;
}
.button.smallbutton{
  width: 120px;
  height:38px;
  line-height:38px;
  font-size: 15px;
  margin-bottom: 10px;
}

.thirdbuttons{
  margin-top: 30px;
}
.thirdbuttons a{
  display: block;
  float:left;
  width: 33.3333333333333333333333333333%;
  height: 370px;
  background-size: cover;
  background-size: center center;
  position:Relative;
}
.thirdbuttons a span{
  display: block;
}
.thirdbuttons a .fader{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height: 100%;
  background-color: #003E6B;
  opacity: 0;
  transition: .3s opacity;
}
.thirdbuttons a .inner{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 90%;
  padding: 0 5%;
  color:#FFFFFF;
  text-align:Center;
}
.thirdbuttons a .inner .title{
  font-family: Hermes;
  font-weight: normal;
  font-size: 40px;
  line-height:40px;
}
.thirdbuttons a .inner .description{
  padding-top: 20px;
  height: 0;
  opacity: 0;
  transition: .7s all;
}

.thirdbuttons a:hover .inner .description{
  height: auto;
  opacity: 1;
  transition: .3s all;
}
.thirdbuttons a:hover .fader{
  opacity: .7;
  transition: .3s opacity;
}


.twothirds{
  float: left;
  width: 66.666666666666%;
}
.third{
  float: left;
  width: 33.3333333333%;
}
.quarter{
  float:left;
  width:20%;
  padding-right: 5%;
}


.todo{
  border: 1px solid red;
  background-color: #FF9999;
  color: red;
  padding: 5px;
  border-radius: 5px;
  margin: 15px;
  text-align:center;
}


#footer{
  background-color: #003E6B;
  color:#B7C2D4;
  margin-top: 30px;
  padding: 30px 0;
}
#footer a{
  color:#B7C2D4;
}

.rightpad{
  padding-right: 25%;
}

.fullwidthquote{
  background-color: #003E6B;
  color: #67C8C7;
  font-family: Hermes;
  font-size: 30px;
  line-height: 35px;
  padding: 20px 0;
  text-align: center;
  margin-top: 30px;
}
.home-based-education .fullwidthquote{
  background-color: #F9DF0F;
}
.home-based-education .fullwidthquote a{
  display:block;
  color: #003E6B;
}

.main{
  width: 55%;
  padding-right: 5%;
  float:left;
}
.side{
  width: 40%;
  float: right;
}


.contactright{
  float: right;
  width: 605px;
  background-color: #41B5E6;
  padding: 80px 40px;
}
.contactright h2{
  color:#FFFFFF;
}
.contactleft{
  margin-right: 750px;
  padding-top: 80px;
}

.formhalf{
  float: left;
  width: 50%;
  margin-bottom: 15px;
}
.formlabel{
  color: #003E6B;
  font-size: 11px;
  text-transform:uppercase;
}
.forminput .input, .forminput .textarea{
  width: 90%;
  padding: 5px 2%;
  border: 0;
  border-bottom: 1px solid #003E6B;
  background-color: #41B5E6;
  transition: .7s background-color;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color:#FFFFFF;
}
.forminput .input:focus, .forminput .textarea:focus{
  background-color:#FFFFFF;
  transition: .3s background-color;
  color: #003E6B;
}

.forminput .textarea{
  width: 94%;
  height: 120px;
}


.centre{
  border: 1px solid #003E6B;
  margin-top: 30px;
  position: relative;
  overflow:auto; 
}
.centre .image{
  display: block;
  position: absolute; 
  width: 30%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}
.centre .details{ 
  float: left;
  margin-left: 33%;
  padding: 20px 0;
  width: 40%;
}
.centre h2{
  border:0;
  padding:0;
  font-size: 35px;
  line-height: 35px;
}
.centre h2 a{
  color: #67C8C7;
}

.centre .buttons{
  position: absolute; 
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  text-align:right;
}
.centre .buttons .button{
  display: block; 
  margin-right:0; 
}

#map.small{
  height: 500px;
}
#map.large{
  height: 500px;
}


.educator{
  float: left;
  width: 32%;
  height: 470px;
  margin-right: 2%;
  border: 1px solid #003E6B;
  margin-top: 30px;
  position: relative;
  overflow:auto; 
  box-sizing: border-box;
}
.educator:nth-child(3n+3){
  margin-right:0;
}


.educator .image{
  display: block;
  width: 100%;
}
.educator .details{
  padding: 20px 20px 10px 20px; 
}
.educator h2{
  border:0;
  padding:0;
  font-size: 35px;
  line-height: 35px;
  margin-bottom:10px;
}
.educator h2 a{
  color: #67C8C7;
}
.educator h3{
  margin-top: 5px;
  color:#F04B5D; 
}
.educator .buttons{
  text-align: center;
}
.educator .buttons .button{
  margin: 10px;
}


#labels{
  border-bottom: 2px solid #F04B5D;
  padding-bottom: 20px;
  margin-bottom: 25px;
}
#labels a{
  color: #003E6B;
}

#headteacher{
  float: right;
}
.label{
  display: block;
  float: left;
  width: 95px;
  color: #F04B5D;
  font-weight: 700; 
}
.item{
  display: block;
  margin-left: 95px;
  margin-bottom: 5px; 
}

.bubble{
  text-align: center;
}
.bubble .button{
  margin:0;
}

#educatorarea{
  position:Absolute;
  right:0;
  top:0;
}
#educatorarea select{
  border: 1px solid #CCCCCC;
  padding: 5px;
  border-radius: 3px;
}

#darkblue{
  background-color: #003E6B;
  color:#FFFFFF;
  padding: 30px 0;
}
#darkblue h2{
  color:#FFFFFF;
  border-color:#FFFFFF;
}
#darkblue h3{
  color:#FFFFFF;
}
#enrol{
  width: 100%;
  max-width: 700px;
}
#enrol .formlabel{
  color:#FFFFFF;
}
#enrol .forminput .input, #enrol .forminput .textarea{
  background-color: #003E6B;
  border-color:#FFFFFF;
}
#enrol .forminput .input.small{
  width: 40%;
}

#enrol .forminput .input:focus, #enrol .forminput .textarea:focus{
  background-color:#FFFFFF;
  transition: .3s background-color;
}
#enrol .textarea{
  border:1px solid #FFFFFF;
}

#enrol .hours td{
  padding: 0 15px 5px 0;
  border:0;
  text-align:left;
}

#enrol .hours .input{
  width: 90%;
  padding: 5px 2%;
  border: 1px solid #FFFFFF;
  background-color: #003E6B;
  transition: .7s background-color;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}
#enrol .hours .input:focus{
  background-color:#FFFFFF;
  transition: .3s background-color;
  color: #003E6B;
}

#thanks{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}
#thanks #transparent{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #003E6B;
  opacity: .7;
  z-index: 5;
}
#thanks img{
  display: block;
  position: relative;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  z-index: 6;
  max-height: 90vh;
  max-width: 90vw;
  border-radius: 15px;
  box-shadow: 0 0 15px #000000;
}

#thanks.gone{
  height: 0;
  overflow: hidden;
  transition: 2s height;
}
#thanks.gone #transparent{
  height: 0;
  overflow: hidden;
  transition: 2s height;
}