/*
Do a find and replace to change all colours / fonts

Colour:
main dark grey #575757
Lighter grey #8f8f8f

Font:
'Quicksand' is the google font
***/

html,
body {
    height: 100%;
	font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
	color: #8f8f8f;
	font-size: 16px;
}
/* Wrapper for page content to push down footer */
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
		/* ----- Margin for Single Column Sticky Footer -----*/
        margin: 0 auto -231px;
      }

      /* Set the fixed height of the footer here */
      #push/*, #footer*/ {
		  /* ----- Height for Single Column Sticky Footer -----*/
        height: 231px;
      }
h1 {
	color: #528fb1;
	padding: 0px 0px 10px;
	margin: 0px 0px 10px 0px;
}
h2, h3 {
	color: #528fb1;
}

/* ----- IF One Column Header -----*/
header {
	background-color: #fff;
}
.navbar-header {
    text-align: center;
}
.navbar-brand {
    color: #528fb1;
	height: 100%;
	font-size: 22px;
	float: none;
	display: block;
	line-height: normal;
	text-transform: uppercase;
}
.navbar-brand:focus, .navbar-brand:hover {
    color: #528fb1;
}
.navbar-brand > img {
	margin: 0 auto 15px;
}
@media (min-width: 576px) {
	.navbar-brand {
	text-align: center;
	}
	.navbar-brand > img {
	display: inline-block;
	padding-right: 20px;
	margin: 0;
	}
}
@media (min-width: 768px) {
	header {
	display: none;
	}	
}
/* ----- One Column Header END -----*/
section#welcome {
	position: relative;
	z-index: -1;
}

#mainUpperCircle {
	z-index: 99;
	position: relative;
    display: none;
}
#mainUpperCircle path {
    fill: #fff;
    /*stroke: #fff;*/
}
section#main-text {
	background-color: #fff;
	position: relative;
	z-index: 99;
	padding-top: 40px;
	padding-bottom: 20px;
}
section#main-text.Íøºì±¬ÁÏ-text {
	border-top: 1px solid #6db56b;
	text-align: center;
	margin-bottom: -4px;
}
section#main-text.Íøºì±¬ÁÏ-text h1 {
	text-transform: uppercase;
	font-size: 46px;
	color: #6db56b;
	margin-bottom: 0;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: -2px;
}
section#main-text.Íøºì±¬ÁÏ-text h2.blue-text {
	text-transform: uppercase;
	font-size: 26px;
	color: #5390b1;
	margin-top: 0;
	margin-bottom: 20px;
}
section#main-text a {
    color: #528fb2;
}

.tagline {
	text-align: center;
	padding: 30px 0 10px;
	font-size: 22px;
	color: #528fb1;
	background-color: #fff;
}
.button-container{
	display: flex;
	justify-content: center;
}
.green-screen{
	display: block;
	padding: 10px 20px;
	margin: 10px;
	font-size: 18px;
	text-align: center;
	background: #6db56a;
	transition: 0.3s;
	color: #fff !important;
	border-radius: 8px;
}
.green-screen:hover{
	background: #528fb1;
	text-decoration: none;
}

#mainLowerCircle {
	background-color: rgba(255, 255, 255, 0);
	margin-bottom: -100px;
	z-index: 12;
	position: relative;
	display: none;
}
#mainLowerCircle.Íøºì±¬ÁÏ-circle {
	display: none;
	margin-bottom: -140px;
}
/*** Half Circle Section Separator Styles ***/

/* Common style for pseudo-elements */
section::before,
section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}

/* Half Circle */
.ss-style-halfcircle::before/*, .ss-style-halfcircle::after*/ {
    left: 50%;
    z-index: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: inherit;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.ss-style-halfcircle::before {
    top: -60px;
}

/*** END ***/

#mainLowerCircle path {
    fill: #fff;
    stroke: #6db56a;
}


/* ----- Quick Links Styles -----*/

section#quick-links {
	color: #6db56b;
}
.quick-links-column {
	padding: 0;
	background-color: #fff;
	z-index: 10;
	overflow: hidden;
}
.quick-links-column.development, .quick-links-column.outreach {
	margin-bottom: 30px;
}
.quick-links-column.gallery {
	margin-bottom: 50px;
}
.quicklinks-halfcircle::before {
	font-family: FontAwesome;
    position: absolute;
    pointer-events: none;
    left: 50%;
    z-index: 13;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
	color: #acacac;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	font-size: 52px;
	padding-top: 12px;
	bottom: 22px;
	display: none;
}
.quicklinks-halfcircle::after {
	position: absolute;
    pointer-events: none;
    left: 50%;
    z-index: 12;
    width: 104%;
    height: 150px;
    border-radius: 50%;
    background: inherit;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	font-size: 18px;
	padding-top: 32px;
	bottom: -96px;
}

.development::before {
    content: "\f004";
}
.development::after {
    content: 'CURRICULUM';
}
.outreach::before {
	content: "\f073";
}
.outreach::after {
    content: 'TERM DATES';
}
.gallery::before {
    content: "\f0ac";
}
.gallery::after {
    content: 'NEWSLETTERS';
}
.development:hover:after, .outreach:hover:after, .gallery:hover:after {
    color: #C0C0C0;
}
/* ----- Quick Links END -----*/

/* ----- Mission Styles -----*/

section#mission {
	line-height: 26px;
	padding-top: 10px;
}
#mission h1 {
	margin: 0px 0px 10px 0px;
}
#mission p {
	color: #000;
}
#mission a{
	color: #6db56a;
}
#missionHalfCircle {
	background-color: rgba(255, 255, 255, 0);
	margin-bottom: -100px;
	z-index: 12;
	position: relative;
	display: none;
}
#missionHalfCircle path {
    fill: #fff;
    stroke: #fff;
}

section#social-media {
	position:relative;
}
.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  flex-grow: 1;
}
.sm-column {
    padding: 0;
	background-color: #6db56a;
	margin: 0 -1px;
}
#social-media a:hover, #social-media a:focus {
	text-decoration: none;
}
.sm-container {
  	padding: 70px 20px 50px;
  	text-align: center;
}
.sm-container:hover .avatar-flip {
  	transform: rotateY(180deg);
 	 -webkit-transform: rotateY(180deg);
}
.sm-container:hover .avatar-flip img:first-child {
  	opacity: 0;
}
.sm-container:hover .avatar-flip img:last-child {
  	opacity: 1;
}
.ofsted-column {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
.avatar-flip {
  	border-radius: 14px;
  	overflow: hidden;
  	height: 100px;
  	width: 100px;
 	position: relative;
  	margin: auto;
  	transition: all 0.3s ease-in-out;
  	-webkit-transition: all 0.3s ease-in-out;
  	-moz-transition: all 0.3s ease-in-out;
  	background-color: #98906b;
}
.avatar-flip img {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 100px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
}
.avatar-flip img:first-child {
  z-index: 1;
}
.avatar-flip img:last-child {
  z-index: 0;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  opacity: 0;
}
section#social-media .fa-book, section#social-media .fa-newspaper-o, section#social-media .fa-user {
	color: #fff;
	font-size: 56px;
	margin-top: 20px
}
#social-media h1 {
  font-size: 28px;
  margin-top: 20px;
  margin-bottom: 13px;
  padding: 0;
  color: #fff;
  font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
}
#social-media h2 {
  font-size: 16px;
  /*margin-bottom: 15px;*/
  color: #fff;
  letter-spacing: 1px;
  font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
}

/* ----- Bottom Logos Styles -----*/

#logosUpperCircle {
    display: none;
}
#logosUpperCircle path {
    fill: #fff;
    stroke: #fff;
}
section#bottom-logos {
	padding-top: 40px;
	background: #fff;
}
#bottom-logos .col-md-5ths {
	text-align: center;
	padding: 10px 0;
}
#bottom-logos img {
	margin-bottom: 10px
}
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

section#map {
	background-color: #8f8f8f;
	margin-bottom: -5px;
}

section#contact-large {
	background-color: #978f6a;
	color: #fff;
	padding: 30px 0;
}
.contact-upper {
	font-size: 16px;
}
.contact-lower {
	font-size: 14px;
	margin-top: 10px;
}
.contact-lower a {
	color: #fff;
}
.contact-lower span {
	display: table;
	margin-bottom: 8px;
}

/*** SUBPAGE-COL ***/

.page_list_box a{
	display:block;
	color:#528fb2;
	border: 1px solid #eee;
	background: #f9f9f9;
	padding: 5px 10px;
	margin-bottom: 10px;
	text-decoration:none;
	font-size: 14px;
}
.page_list_box a:hover{
	border: 1px solid #eee;
	background: #528fb2;
	color:#fff !important;
}
.selected{
	background: #528fb2 !important;
	color:#fff !important;
}

/* ----- Mobile Black Bar Styles -----*/
#mobile_black_bar a {
	display:block;
	color:#FFF;
	padding:10px;
	text-align:center;
	font-size:20px;
}
#mobile_black_bar .staff_login, #mobile_black_bar .blogs {
	background: #000;
}
#mobile_black_bar .parent_login {
	background: #666;
}

/* ----- Footer Styles -----*/

footer {
	padding: 20px;
	background-color: #000;
	color: #fff;
	text-align: center;
}
footer a {
	color: #fff;
	text-decoration: none;
}
footer a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ----- Common Styles -----*/

.top-buffer {
	padding-top: 40px;
}
.bottom-buffer {
	padding-bottom: 20px
}

/* ----- Subpage Col -----*/


/* ----- Responsive Styles -----*/

@media(max-width:380px) {
	.col-md-5ths {
     width: 100%;
     float: left;
    }
}
@media (min-width: 420px) {
	.header_logo {
    font-size: 25px;
	}
	#bigHalfCircle {
	display: block;
	}
	.sm-container.sm-twitter {
  	padding: 120px 20px 50px;
	}
}
@media (min-width: 470px) {
	.tagline {
    padding: 40px 0 10px;
	}
	.quicklinks-halfcircle::before {
	display: block;
	}
	.quick-links-column.development, .quick-links-column.outreach {
    margin-bottom: 40px;
	}
	.quicklinks-halfcircle::after {
    font-size: 24px;
    padding-top: 24px;
	}
	.contact-lower {
    margin-top: 0;
	}
	.contact-lower span {
    display: inline-block;
    margin-bottom: 0;
	}
	.contact-lower span.contact-break::after {
    content: '|';
    color: #fff;
    padding: 0 6px;
	}
}
@media(min-width: 576px) {
	#logo {
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: left;
	}
	#logo img {
    margin: 0;
    display: inline;
	padding-right: 20px;
	}
	.tagline {
	font-size: 24px;
	}
	.mission-col {
    padding: 0 20px;
	}
	.contact-lower {
    font-size: 18px;
	}
	/* ----- Wrap and Push for Single Column Sticky Footer -----*/
	#wrap {
    margin: 0 auto -208px;
    }
    #push {
    height: 208px;
    }
}
@media(min-width: 768px) {
	.navbar-nav {
    float: none;
    margin:0 auto;
    display: block;
	}
	.navbar-nav > li {
    display: inline-block;
    float:none;
	}
	#mainUpperCircle.Íøºì±¬ÁÏ-upper-circle {
    display: block;
	margin-top: -59px;
	}
	.Íøºì±¬ÁÏ-text.main-upper-logo::before {
    left: 50%;
    width: 120px;
    height: 150px;
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
    background: inherit;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	top: -75px;
	z-index: 0;
	background-image: url(/themes/vernon/img/small-main-logo.png);
	background-repeat: no-repeat;
	background-position: center 12px;
	}
	section#main-text {
    padding-top: 70px;
	margin-top:-3px;
	padding-bottom: 40px;
	}
	section#main-text.Íøºì±¬ÁÏ-text {
	border-top: none;
    padding-bottom: 10px;
	margin-top: -3px;
	}
	.tagline {
    font-size: 34px;
	}
	#mainLowerCircle.Íøºì±¬ÁÏ-circle {
	display: block;
	margin-bottom: -140px;
	}
	section#quick-links {
	padding-top: 48px;
	}
	.mission-col {
    padding: 0 50px;
	}
	.col-md-5ths {
    width: 20%;
    float: left;
    }
	section#contact-large {
    padding: 50px 0;
	}
	.contact-lower {
	font-size: 23px;
	}
	/* ----- Wrap and Push for Single Column Sticky Footer -----*/
	#wrap {
    margin: 0 auto -208px;
    }
    #push {
    height: 208px;
    }
}

@media(min-width:992px) {
	section#main-text.Íøºì±¬ÁÏ-text h1 {
    font-size: 56px;
	}
	section#main-text.Íøºì±¬ÁÏ-text h2.blue-text {
	font-size: 36px;
	}
	.mission-col {
    margin: 0 auto;
	width: 750px;
	display: block;
	float: none;
	}
	#missionHalfCircle {
	display: block;
	}
	.quicklinks-halfcircle::before {
	display: none;
	}
	.sm-container {
    padding: 120px 20px 50px;
	}
	section#mission {
	padding-top: 40px;
	}
	.ofsted-column {
	border-right: 3px solid #fff;
	border-left: 1px solid #fff;
	border-top: none;
	border-bottom: none;
	}
	.prospectus-column {
	border-right: 3px solid #fff;
	border-bottom: none;
	}
	#logosUpperCircle {
    display: block;
    margin-top: -65px;
	}
	section#bottom-logos {
	padding-top: 20px;
	}
	.contact-upper {
    font-size: 18px;
	}
	.contact-lower {
	font-size: 26px;
	}
	section#bottom_login {
		display: none;
	}
	section#mobile_black_bar {
		display: none;
	}
	/* ----- IF Two Column Footer -----*/
	.footer-right {
    margin-top: 0;
	}
	/* ----- Wrap and Push for Single Column Sticky Footer -----*/
	#wrap {
    margin: 0 auto -10px;
    }
    #push {
    height: 10px;
    }
}
@media(min-width:1200px) {
	.tagline {
    font-size: 42px;
	}
	.quicklinks-halfcircle::before {
	display: block;
	}
	.contact-upper {
    font-size: 22px;
	}
	.contact-lower {
	font-size: 32px;
	}
}
@media(min-width:1400px) {
	section#main-text.Íøºì±¬ÁÏ-text {
	padding-bottom: 60px;
	}
	.Íøºì±¬ÁÏ-text.main-upper-logo::before {
    left: 50%;
    width: 150px;
    height: 170px;
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
    background: inherit;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	top: -105px;
	z-index: 0;
	background-image: url(/themes/vernon/img/main-logo.png);
	background-repeat: no-repeat;
	background-position: center 15px;
	}
}