body, html{
	background:#ffffff;
	font-family:Lato, sans-serif;
    margin:0;
    color:#000000;
    font-size:14px;
}
video{border:0; background:#dddddd;}

img{max-width:100%;}

p{
	color:#000000;
	font-size:14px;
}

a{
	text-decoration: none;
		color:#000000;
}

h1{
	font-size:36px;
	color:#666666;

}

h2{ color:#ec4696;
font-size:21px;}

h2.blue{
    color:#27bfcd !important;
}

.intro{color: #000;
    font-size: 18px;
    text-align: center;
    padding: 10px 10%;
    margin-bottom: 40px;
    float: left;
    display: block;}

.headline{
    text-shadow:0 0 7px #000;
 width: 500px;
    display: block;
    right: 5%;
    color: #ffffff;
    font-size: 48px;
    text-align: center;
    padding: 20px 0;
    top: 177px;
    font-weight: bold;
    letter-spacing: 0;
    position: absolute;}

a:hover{cursor:pointer;}

.pink{background-color:#ee2273 !important;}

.orange{background-color:#f79420 !important;}

.green{background-color:#afd136 !important;}

.blue{background-color:#6fc7ab !important;}

.purple{background-color:#47499e !important;}

.pinktext{color:#ee2273 !important;}

.orangetext{color:#f79420 !important;}

.greentext{color:#afd136 !important;}

.bluetext{color:#6fc7ab !important;}

.purpletext{color:#47499e !important;}

.header{
     width: 20%;
    background: #ffffff;
    margin: 0;
    display: inline-block;
    float: left;
    height: 120px;
    position: relative;
    min-width: 200px;
}

.header .inner{width:98%;
margin:0 auto;
display:block;
max-width:1200px;}

#logo{
    width: 220px;
    float: left;
    display: inline-block;
    margin: 20px;
}

.links{
       float: none;
    font-size: 12px;
    color: #ed145c;
    font-family: Lato, sans-serif;
    padding-right: 10px;
    position: relative;
    display: inline-block;
    font-weight: bold;
    margin-top: 20px;

}

.links ul li{
	display:inline;
	padding:0 10px;
    font-size:14px;
	color:#000000;
	font-family:Lato, sans-serif;
}


.links li a{
color: #000;
    text-decoration: none;
    padding: 0 5px;
    transition: all ease 0.1s;
    font-size: 14px;
}

.links li a:active{color:#ee2273;}

.links li a:hover{
		transition:all ease 0.1s;
    color:#ee2273;
}

.cta ul li {font-size:14px; text-align:left;}

.banner{
	display:block;
	width:100%;
	margin-top:-15px;
    background-image:url('img/hero4.jpg');
background-size:cover;
background-color:#828484;
background-position:left;
background-repeat:no-repeat;
height:600px;}

.mathsbanner{
    display:block;
    width:100%;
    margin-top:-15px;
    background-image:url('img/maths-tutor.jpg');
background-size:cover;
background-color:#ccc;
background-position:left;
background-repeat:no-repeat;
height:600px;}

.englishbanner{
    display:block;
    width:100%;
    margin-top:-15px;
    background-image:url('img/english-tutor.jpg');
background-size:cover;
background-position:left;
background-repeat:no-repeat;
height:600px;}

.mathspage{    width: 80%;  margin-left: 10%; padding:30px; box-sizing:border-box;}

.mathspage td {text-align:left; box-sizing:border-box; font-size:21px;  color:#6fc7ab; font-weight:bold; }

.mathspage td span{padding:0 5%; display:block;}



.bluesection{display:block; float:left; width:100%; margin-top: -70px; padding: 50px 0; position:relative;}

.strip{display: block;  width: 70%; margin: -20px 15% 0 15%; float: left; position:relative; z-index:3;}

.nav{        float: right;
    display: inline-block;
    margin-bottom: 20px;
    width: auto;
    padding: 5px 0;
    color: #000;
    text-align: right;
    font-size: 18px;
    font-weight: normal;}

    .logosub{font-size: 16px;  color: #666; padding-left: 5px; margin-top: -5px; display: block;}

.contacttop{display:inline-block; float:right; width:auto; margin-top:20px;}

.contacttop img{display:inline-block; float:left; height:80px;}

.phone {
    display: inline-block;
    float: left;
    width: auto;
    margin: 0 10px;
    font-weight: bold;
    font-size: 22px;
    line-height: 30px;
    padding-top: 7px;
}

.phoneimg {
    height: 64px !important;
    padding-top: 8px;
}
.content{
    display: inline-block;
    width: 100%;
    margin-top: -5px;
    height: auto;
    position: relative;
    float: left;
    background: #ffffff;
}

.content .inner{
    width: 80%;
    margin: 30px 10%;
    display: block;
    clear: both;
    float: left;
}

.grey{background-color:#eeeeee;}

.content .left{width:45%; float:left; display:inline-block; text-align:left; margin:30px 0 60px 30px; line-height:1.6;}
.content .right{width:45%; float:right; display:inline-block; text-align:left; color:#000000; margin:20px 0 60px 0; line-height:1.6;}
.content .inner .full{ width:100%; float:left; display:block; color:#225b9a; font-size: 18px; font-weight:bold; }
.back{display:block; width:100%; clear:both; margin:10px 0; color:#000000;}
.name{color:#ee2273; font-style:italic; font-weight:bold;}
.bio{padding:50px; box-sizing:border-box; color:#ffffff; width:55% !important;}
.bio h1{color:#fff; margin-top:0;}

.reviews{width:35% !important; margin-right: 5% !important;  padding-left: 30px; box-sizing: border-box;}


.review{margin-bottom:30px;}

.contactinfo{float:left; width:45%; padding-left:30px;}

.contactinfo img{height:42px; margin-right:10px;}

.contactinfo a{display:block; margin-bottom:30px; text-align:left;  font-size:21px; font-weight:bold; line-height:42px;}

.contactinfo a span{font-size:21px; font-weight:bold; line-height:42px; vertical-align:top;}


ul.services{columns:4; list-style: none; padding-inline-start:0; margin-top:-10px; margin-bottom:80px;}

ul.reviews{columns:2; list-style: none; padding-inline-start:0; margin-top:30px; margin-bottom:80px; font-weight:normal;}

ul.reviews li:nth-child(even){color:#000; font-size:16px; margin-bottom:40px; font-weight:bold; }


ul li{margin-bottom:10px;}

.tag{display:block; float:left; width:100%; text-align:center; color:#fff; padding:8px 0; font-size:21px; position:relative; z-index:3; margin-top:-20px;}


.ctas{
	width:80%;
	display:block;
	float:left;
    margin-top:20px;
    margin-left:10%;
}

.cta{
    width: 30%;
    margin: -40px 1% 40px 1%;
    float: left;
    display: inline-block;
    position: relative;
    z-index: 1;
    opacity: 1;
    text-align: center;
    padding: 30px 0;
    font-weight: bold;
    color: #ffffff;
    font-size: 1.5vw;
}

.ctafull{width:100%;}

.fb{ display:block; float:none; height:50px; vertical-align:middle;}

.fb .text {
    display: inline-block;
    vertical-align: text-bottom;
    color: #000000;
    font-weight: bold;
    line-height:55px;
}

.fb:hover{opacity: 0.6;}



    .cta img{margin-bottom:10px;}

    .forminfo{
        display:inline-block;
        width:100%;
        background:#ed145c;
        text-align:center;
        padding:25px 15px;
        border-radius:15px;
        color:#ffffff;
    }


.cta .heading{ padding:30px 0; }


    select#product, select#delivery, textarea {    width: 100% !important;
    padding: 20px 10px !important;
    border: 1px solid #ccc !important;
    color: #666 !important;
    text-transform: uppercase !important;
} 

.box{float:none;
    margin:auto;
    display:block;
    width:45%;
    padding:2%;
    text-align:center;
}

.break{display:block; float:left; width:100%; margin:30px 0;}

.productimage{width:50%; float:left;}

.producttext{ width: 50%;
    float: right;
    text-align: left;
    padding: 0 10%;
    box-sizing: border-box; 
line-height:24px;}

.outline{display:block; margin:auto; border:2px solid pink; border-radius:10px; width:70%; padding:30px;}

.leftbox{float:left; display:inline-block; height:500px;}
.rightbox{float:right; display:inline-block; height:500px;}

.main{
    display: block;
    width: 100%;
    float: left;
    margin: 50px 0;
}

.main .left{width:45%; padding:0 5% 0 0; float:left; color:#000000;}

.main .right{width:45%; padding:0 0 0 5%; float:left; text-align:right; color:#000000;}

.small{font-size:12px;}

.big{font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}

.title{font-size:24px; font-weight:bold; display:block; margin:20px 0 0;}


.biggest{font-size:48px; font-weight:bold; text-transform:uppercase; display:block; margin-bottom:10px;}

.center{text-align:center;}

.footerfull{     float: none;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    margin: 0 auto 40px auto;
    display: block;
    line-height: 30px; }
.footerleft{float:left; display:inline-block; color:#fff;  font-size:12px; padding-left:10px;}
.footerright{float:right; display:inline-block; color:#fff; font-size:12px; padding-right:10px;}
.footerright a{color:#fff;}
.footer{
    margin-top:55px;
width:100%;
float:left;
display:inline-block;
padding:30px 0;
height:auto;
background: #cccccc;
color:#000000;
font-size:16px;
text-align:center;
}

.footer p{color:#000000; line-height: 50px; display:inline-block; }

.footer img{height:50px;}


.contact{
	float:left;
	display:inline-block;
	padding-left:30px;
	font-size:18px;
	line-height:2em;
}

.social{
	float:right;
	display:inline-block;
	padding-right:30px;
}

.social img{
	max-height:40px;
}

.social img:hover{
	opacity:0.4;
}

.english{padding:30px; border:2px solid #f79420; box-sizing:border-box; background-color:#fff;  margin-top:40px; width:40%; margin-left:5%; margin-right:5%;}
.maths{padding:30px; border:2px solid #ee2273; box-sizing:border-box; background-color:#fff; margin-top:40px; width:40%; margin-left:5%; margin-right:5%;}

.whiteborder{border:2px solid #fff;}


<!-- CONTACT FORM CODE -->

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

.container {
	max-width:500px;
	width:100%;
	margin:3em auto;
	position:relative;
}

.button{padding:10px 25px; background-color:#ed145c; border-radius:10px; color:#ffffff; font-size:18px; text-align:center; display: inline-block;
    margin-top: 50px;}

    .button:hover{background-color:#000000; transition:ease all 0.3s;}

    button{    border: 0;  padding: 15px 25px; color: #fff; font-weight: bold;  font-size: 18px; }
    button:hover{ cursor:pointer; cursor: pointer;  border-radius: 15px;  transition: ease all 0.1s;}


#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
	padding:25px;
	margin:50px 0;
}

input[type="submit"] {
    padding: 20px 35px;
    background: #000000;
    color: #fff;
    text-transform: uppercase;
    transition:all 0.5s ease;

}

input[type="submit"]:hover {
    background: #ccc;
    color: #000;
    text-transform: uppercase;
    transition:all 0.5s ease;
    cursor:pointer;
}


fieldset {
	border: medium none !important;
	margin: 20px 0 ;
	min-width: 100%;
	padding: 0;
	width: 100%;
}

input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
	width:100%;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:20px 10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}

#contact textarea {
	height:100px;
	max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
    cursor: pointer;
    width: 100%;
    border: none;
    background: #a12f21;
    color: #FFF;
    margin: 0 0 5px;
    padding: 30px 10px;
    font-size: 15px;
}

#contact button[type="submit"]:hover {
	background:#000;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}

.product {display:inline-block; width:48%; margin:1%; float:left;}

.product img{width:100%;}

.product .title{ color:#000000; text-transform:uppercase; text-align:center; display:block; margin:10px auto 20px auto;}

.gas{display:inline-block;}
.gasmob{display:none;}

.reviews li {    padding: 20px 20px 0 20px;
    box-sizing: border-box !important;}

    .center{display: block;
    width: 100%;
    text-align: center;
    margin: 0 0 60px 0;
    float: left;}


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

    ul.services{columns:3; margin-top:20px;}


   .phone{ display: inline-block;
    float: left;
    width: auto;
    margin: 0 10px;
    font-weight: bold;
    font-size: 19px;
    line-height: 25px;
    padding-top: 4px;}

    .header{height:100px;}

    .content .inner .left{width:100%; margin-bottom:10px;}
.content .inner .right{width:100%;margin-bottom:60px }

    form{width:80%; margin-left:10%;}

.links ul{
    color: #ec4696;
    text-align: center;
    list-style-type: none;
    padding-inline-start:0;
}
.links ul li {
    display: inline-block;
    text-align: center;
    margin: auto;
    padding:7px 3px;
}


    .col61, .col62, .col63{
        width:80%;
        float:left;
        margin:5%;
    }

    .col6{

    width: 90%;
    margin: 5%;
}

#logo {
    max-width: 120px;
    float: left;
    display: inline-block;
    padding-left: 0;
    margin: 20px 0 20px 20px;
}

.phoneimg{display:none !important;}

.gas{display:none !important;}
.gasmob{display:block; width:100%; margin:20px auto 0 auto; text-align:center;}
.gasmob img{height:100px !important; width:auto;}

.links{
    float: none;
    font-size: 12px;
    color: #000000;
    font-family: Lato, sans-serif;
    padding-right: 0;
    position: relative;
    display: block;
    right: 0;
    top: 0;
    margin-bottom:10px;
    text-align:center;
}

.cta {
    width: 80%;
    margin: 0 10% 20px 10%;
font-size:18px;}


.contact {
    padding-left: 0;
    width: 100%;
    text-align: center;
}

.social {
    float: none;
    display: block;
    padding-right: 0;
    margin: auto;
    text-align: center;
}

.main .left{
width:100%;
margin:auto;
text-align:center;
padding-left:0;
padding-right:0;

}

.main .right{width:100%;
margin:auto;
text-align:center;
padding-left:0;
padding-right:0;
margin-top:20px;}

.footer .inner .left{width:100%; text-align:center; margin-bottom:40px;}

.footer .inner .right{width:100%; text-align:center;}

.footer .inner .left img{display: block;
    text-align: center;
    margin: auto;
    float: none;
    margin-bottom: 10px;}




}

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

    .nav{        float: left;
        width:100% !important;
    display: block;
    margin-bottom: 20px;
    width: auto;
    padding: 5px 0;
    color: #000;
    text-align: right;
    font-size: 18px;
    font-weight: normal;}

        ul.reviews{columns:1; margin-top:20px;}


        ul.services{columns:2;}


        .cta1, .cta2, .cta3{width:80%; float:left; margin-left:10%; margin-bottom:20px;}

        .links ul li a{font-size:12px;}

        h1{font-size:21px;}

        .content .inner .full li{font-size:16px;}

        .box{width:70%;}

        .mathspage {
    width: 100%;
    margin-left: 0;
    padding: 10px;}

    .mathspage td{font-size:14px;}


.headline {
    text-shadow: 0 0 7px #000;
    width: 70%;
    display: block;
    right: 15%;
    font-size: 28px;
    }

    .banner{background-position:20%;}
    
    .englishbanner{background-position:center;}

.content .inner {
    width: 100%;
    margin: 30px 0;}

    .strip {
    display: block;
    width: 100%;
    margin: -20px 0 0 0;}

    .bio {
    padding: 20px;
    box-sizing: border-box;
    color: #ffffff;
    width: 80% !important;
    margin-left: 10% !important;
}

.contactinfo {
    float: left;
    width: 90%;
    padding-left: 0;
    margin-left: 5%;
}

.contactinfo a span {
    font-size: 14px;
    display:block;
    width:100%;
text-align:center;}

    .contactinfo img{margin:auto; display:block; text-align:center;}

    .reviews {
    width: 90% !important;
    margin-right: 5% !important;
    padding-left: 0;
    box-sizing: border-box;
}

.footerleft{float:none;}

.footerright{float:none; margin-top:20px;}

.header{width:100%; height:auto;}

#logo{float:none; width:50%; margin:40px 25% 20px 25%; max-width:50%;}



}