@charset "UTF-8";

:root {
	--white: #ffffff;
	--black: #000000;
	--black-400: #3a3a3a;
	--heading-color: var(--black-400);
	--fb-line-clamp: 7;
}

html {height: 101%; margin: 0; padding: 0; min-height: 101%;}

body * {box-sizing: border-box;}
body {font-family: 'Oxygen', sans-serif; font-weight: 300; font-size: 100%; font-style: normal; margin: 0; padding: 0; height: 100%; position: relative; overflow-x: hidden; background: #101010; min-height: 101%;}

hr {width: 100%; height: 1px;	background: #ccc;	border: none;	margin: 10px auto; clear: both;}

img {display: block; margin: 0;	outline: none; padding: 0; vertical-align: bottom; max-width: 100%; width: auto;}
img.seecmsimagedefault, img.seecmsimagedefaultundefined {display: inline-block; margin: 0 0 20px 0!important;}
img.seecmsimageleft, img.seecmsimageleftundefined {float: left; margin: 0 20px 20px 0!important;}
img.seecmsimageright, img.seecmsimagerightundefined {float: right; margin: 0 0 20px 20px!important;}
img.seecmsimagecentre, img.seecmsimagecentreundefined {display: block; margin: 0 auto;}

p, h1, h2, h3, h4, li {margin: 0; padding: 0; line-height: 140%; color: #3a3a3a; font-style: normal; font-weight: 300;}
p {padding: 0 0 10px 0;}
ul, ol {margin: 0 0 10px 20px; padding: 0;}
li p {padding: 0;}
li li, li p {font-size: 100%;}
strong {font-weight: bold;}
a {text-decoration: none; color: #3a3a3a;}
a:hover {color: #3a3a3a; text-decoration: underline;}
a img {border: none; outline: none;}
* {-webkit-print-color-adjust: exact;}
label {color: #3a3a3a;	font-size: 100%;}
sup {font-size: 70%; line-height: 110%; padding: 0 0 10px 0; margin: 0;	font-weight: 300; color: #3a3a3a;}

p.seeformerrors {color: red;}

.col1, .col2, .col3, .col4, .left, .right {display: block; float: left;	min-height: 5px;}

div:after, form:after, ul:after, input:after, section:after, article:after, header:after, footer:after, nav:after, aside:after, hgroup:after {clear:both;	content:"";	display:block; height:0; visibility:hidden;}
section, article, header, footer, nav, aside, hgroup {display: block;}

table {width: 100%;	margin: 0 0 10px 0;	border: 0!important; border-collapse: separate!important; border-spacing: 2px!important;}
table th {text-transform: uppercase; padding: 6px; font-size: 100%; color: #24408f; background: none!important;	font-weight: 300; border-collapse: separate!important; text-align: left; border-top: 5px solid #4f646d!important;	border-spacing: 4px!important;}
table td {padding: 6px; font-size: 100%; color: #000; background: none!important; font-weight: 300; border-collapse: separate!important; text-align: left; border-top: 2px solid #4f646d!important; border-spacing: 4px!important;}
table th p, table td p {font-size: 100%; padding: 0;}
table th a {color: #fff!important;}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"],  textarea, select, button {width: 100%;	padding: 0 10px; box-sizing: border-box; height: 40px; background: #fff; border: 1px solid #ccc; margin: 5px 0 15px 0; outline: none;	resize: none;	font-family: 'Oxygen', sans-serif;	font-weight: 300; font-size: 100%;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color: #3a3a3a;}
textarea {height: 130px; padding: 10px;}
input[type="checkbox"]{width: 15px;	height: 15px;	float: left; margin: 0 10px 0 0;}
input[type="text"], input[type="submit"], textarea, button, input[type="password"], input[type="button"], select {-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0;}
input[type="submit"], button, input[type="button"] {cursor: pointer;	width: auto; outline: none;	border: none;	text-transform: none;	background: #000;	padding: 0 20px; height: 40px; color: #fff; font-size: 100%; font-family: 'Oxygen', sans-serif; font-weight: 300; border-radius: 0;}

.slick-slide {outline: none!important;}
.cmsform p {padding: 0;}
.cmsform p.fieldname {padding: 0 0 5px 0;}
.cmsform p.fieldoption {padding: 0 0 20px 0;}
.cmsform p.fieldoption .notes {font-style: italic;}
.cmsform input, .cmsform select, .cmsform textarea {margin: 0 0 5px 0;}
.cmsform input[type="checkbox"] {margin: 0 10px 0 0;}
.cmsform input[type="submit"]{margin: 15px 0;}
.cmsform .errors p {color: red!important;	padding: 0 0 20px 0;}
.cmsform span.error {color: red!important; float: right;}

.searchresult h3 img {width: auto; float: left; display: inline-block; margin: 0 10px 0 0;}

.clear {clear: both;}

.sitemap ul ul {margin: 0 0 0 20px;}

.form .row.thirds, .form .row.halves {width: 102%; margin-left: -2%;}
.form .row.thirds .input {float: left; width: 31.3%; margin: 0 0 0 2%;}
.form .row.halves .input {float: left; width: 48%; margin: 0 0 0 2%;}

h1, h2, h3, h4 {line-height: 130%; padding: 0 0 10px 0; margin: 0; font-weight: 700; font-family: 'Poppins', sans-serif; }
h4 {font-weight: 700; font-size: 120%;}
p, li {font-size: 110%; line-height: 140%}
a { color: #f18525; }

/* Orange - #f18525 */
/* Yellow - #f9d410 */

.popupbanner {max-width: 800px; width: 90%; padding: 40px!important; margin: 0 auto!important;}
.popupbanner * {font-family: 'Poppins', sans-serif;}

.cookiesnotice-wrap {position: fixed; bottom: 0; left: 0; z-index: 29; background: #4f646d; border-top: 1px solid #333; box-sizing: border-box; max-width: 100%; right: 0; margin: 0 auto; width: 100%; -webkit-box-shadow: 0px 7px 5px -4px rgba(0,0,0,0.4); -moz-box-shadow: 0px 7px 5px -4px rgba(0,0,0,0.4); box-shadow: 0px 7px 5px -4px rgba(0,0,0,0.4); padding: 0 20px;}
.cookiesnotice {max-width: 1180px; width: 100%; margin: 0 auto; padding: 17px 0; position: relative;}
.cookiesnotice p {padding: 0 0 10px 0; color: #fff; font-size: 100%; text-align: center;}
.cookiesnotice p a.cookieslink {color: #fff; text-decoration: underline; display: inline-block; position: relative; }
.cookiesnotice p.buttons {padding: 0; text-align: center; font-size: 110%;}
.cookiesnotice p.buttons a {display: inline-block; color: #fff; text-decoration: underline; box-sizing: border-box; text-align: center;}
.cookiesnotice p.arrowbutton a { color: #fff!important; }
.cookiesnotice p.buttons span {display: inline-block; margin: 0 10px;}

.cookiesettings { position: relative; padding: 20px 140px 0 0; margin: 0 0 20px 0;}
.cookiesettings .onoffswitch {position: absolute; top: 30px; right: 20px; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}
.cookiesettings .onoffswitch-checkbox {display: none;}
.cookiesettings .onoffswitch-label {display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px;}
.cookiesettings .onoffswitch-inner {display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s;}
.cookiesettings .onoffswitch-inner:before, .onoffswitch-inner:after {display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 90%; font-weight: 700; color: white; box-sizing: border-box;}
.cookiesettings .onoffswitch-inner:before {content: "ON"; padding-left: 10px;  background-color: #007cc5; color: var(--white);}
.cookiesettings .onoffswitch-inner:after {content: "OFF"; padding-right: 10px; background-color: #EEEEEE; color: #999999; text-align: right;}
.cookiesettings .onoffswitch-switch {display: block; width: 18px; margin: 6px; background: var(--white); position: absolute; top: 0; bottom: 0; right: 56px; border: 2px solid #999999; border-radius: 20px; transition: all 0.3s ease-in 0s;}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {margin-left: 0;}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {right: 0px;}

.nopadding {padding: 0!important;}
.nopaddingtop {padding-top: 0!important;}
.nopaddingbottom {padding-bottom: 0!important;}

.arrowbutton a {font-weight: 600; position: relative; padding: 0 15px 0 0; display: inline-block; color: var(--white); text-decoration: none}
.arrowbutton a::after {font-size: 80%; position: absolute; top: -2px; right: 0; font-family: "Font Awesome 5 Free"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f054";}
.arrowbutton.colour a {color: #00a5b5;}

.blockbutton a {display: inline-block; padding: 15px 15px 10px 15px; color: var(--white)!important; background: #00a5b5; border-radius: 5px; text-decoration: none; text-align: center; box-sizing: border-box; line-height: 100%; font-weight: 600;}

.allclickable {cursor: pointer;}

.sticky-wrapper {z-index: 999!important;}
.sticky-wrapper.is-sticky .header-wrap.overlayed {background: var(--white); -webkit-box-shadow: 0px 0px 32px -4px rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 32px -4px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 32px -4px rgba(0,0,0,0.4);} 

.schools-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 221; background: var(--black); opacity: 0.7;}
.schoolsidebar {position: fixed; top: 0; right: -400px; height: 100%; z-index: 99999;}
.schoolsidebar .sliderbutton {display: block; width: 42px; height: 164px; background: #235787 url(../images/sidebar-button.png) no-repeat 0 0; background-size: 100%; text-indent: -9999px; position: absolute; top: 33%; left: -42px;}
.schoolsidebar .inner {width: 400px; box-sizing: border-box; background: #235787; padding: 40px; height: 100%;}
.schoolsidebar p {color: var(--white);}
.schoolsidebar h4 {display: none;}
.schoolsidebar li {color: var(--white);}
.schoolsidebar li a {color: var(--white)!important; font-weight: 700;}
.schoolsidebar p.logo img {max-width: 200px; margin: 0 auto;}

.header-container {background: var(--white) url(../images/synergy-header-background.png) no-repeat center top; background-size: 100%; z-index: 999999; }
.header-wrap {padding: 0 50px; /*background: none; position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; z-index: 10*/}
.header {max-width: 1280px; width: 100%; margin: 0 auto; padding: 20px 0 0 0; position: relative;}
.header .left {width: 280px; float: left; position: relative;}
.homeheader .header a.logo {display: block; width: 100%; height: 96px; background: url(../images/synergy-logo-white.png) no-repeat center center; background-size: 100%; float: left; margin-right: 20px; }
.header a.logo {display: block; width: 100%; height: 96px; background: url(../images/synergy-logo.png) no-repeat center center; background-size: 100%; float: left; margin-right: 20px; }
.header a.logo:hover { text-decoration: none; }
.header span { color: #000; font-size: 200%; float: left; position: absolute; top: 10px;}
.homeheader .header span { color: #fff; }

.header .right { float: right; width: 350px; }
.header .right .socials { position: relative; top: 20px; text-align: right;}
.header .right .socials p { padding: 0 0 10px 0; }
.header .right .socials p a { text-decoration: none; font-weight: 700;}
.homeheader .header .right .socials p a { color: #fff; }

.header-container.homeheader { position: absolute; top: 0; left: 0; width: 100%; z-index: 20; background: none; }
.header-container.homeheader .nav-wrap, .innerbanners .nav-wrap { background: none; }

.header-container.homeheader.homestick { position: fixed; width: 100%; background: #fff; opacity: 0; transition: all .2s ease-in-out; }
.header-container.homeheader.homestick.fadein { opacity: 1; }
.header-container.homeheader.homestick .header span { color: #000; }
.header-container.homeheader.homestick .header a.logo { background: url(../images/synergy-logo.png) no-repeat center center;  background-size: 100%; }
.header-container.homeheader.homestick .header .right .socials p a { color: #f18525; }

.header-container.homeheader.homestick .nav-wrap { padding: 0; width: 100%; background: #235787; }
.header-container.homeheader.homestick .nav { max-width: 1280px; width: 100%; }

/*.header-container.sticky { position: fixed; width: 100%; z-index: 99999; }*/
.top-mobile-header-wrap { display: none;  }
.mobile-header-wrap{ display: none; }

.nav-wrap {background: #235787; position: relative;}
.homeheader .nav-wrap { padding: 0 20px; }
.nav {background: #235787; max-width: 1280px; width: 100%; margin: 20px auto 0 auto;}
.nav ul {margin: 0; padding: 0; width: 100%; display: table;}
.nav li {list-style: none; padding: 0; margin: 0; display: table-cell; text-align: center; vertical-align: middle; font-weight: 600; font-size: 110%;}
.nav li a {text-align: center; text-decoration: none; color: var(--white); display: block; padding: 15px 20px 17px 20px;}
.nav li.selected a {color: var(--white); background: #f18525}
.nav li:hover a {color: #bcdfff;}
.nav li:hover .dropdown-wrap {display: block;}
.nav li:before {display: none;}

.search-wrap {position: absolute; top: 100%; left: 0; right: 0; padding: 0; z-index: 20; width: 100%; display: none;}
.search {max-width: 1180px; width: 100%; margin: 0 auto; padding: 10px 0;}
.search .input {float: right; max-width: 400px; position: relative; box-sizing: border-box; border: 1px solid #235787;}
.search input {text-align: left; margin: 0; padding: 5px 60px 0 10px; border: none; height: 45px; font-size: 80%; color: var(--black); background: var(--white); line-height: 45px;}
.search input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px var(--white) inset; -webkit-text-fill-color: var(--black);}
.search input[type="submit"] {position: absolute; top: 0; right: 0; height: 100%; width: 40px; padding: 0; background: #235787 url(../images/search-icon-white.png) no-repeat center center; background-size: 16px; text-indent: -999999px;}
.search input::-webkit-input-placeholder {color: var(--black);}
.search input::-moz-placeholder {color: var(--black);}
.search input:-ms-input-placeholder {color: var(--black);}
.search input:-moz-placeholder {color: var(--black);}

.dropdown-wrap {position: absolute; top: 100%; left: 0; width: 100%; padding: 40px; box-sizing: border-box; z-index: 99; background: rgba(241,133,37,0.9); display: none; z-index: 22;}
.dropdown img {width: 100%;}
.dropdown h3 {text-align: left; color: var(--white); font-weight: 500; font-size: 160%; padding: 0 0 15px 0;}
.dropdown ul {display: block; border-right: 0; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; text-align: left; -webkit-column-break-inside: avoid;page-break-inside: avoid; break-inside: avoid;}
.dropdown li {display: block; text-align: left; font-size: 90%; margin: 0; padding: 4px 0; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; background: none!important;}
.dropdown li a {color: var(--white)!important; text-align: left; padding: 0; border-left: 0; display: inline-block; position: relative; padding: 0 0 0 20px; background: none!important;}
.dropdown li a:after {display: none!important;}
.dropdown li:hover a, .nav li:hover li a {opacity: 1;}
.dropdown li a i {position: absolute; top: 4px; left: 0;}
.dropdown .left {float: left; width: 18%!important;}
.dropdown .right {float: left; width: 50%!important; margin: 0 0 0 4%; box-sizing: border-box; padding: 0!important;}
.nav li:hover .dropdown li a {color: var(--white);}

.snav ul {margin: 0 0 20px 0; padding: 0;}
.snav li {list-style: none; padding: 0; margin: 0; font-size: 100%;}
.snav li a {display: block; padding: 15px 20px 12px 35px; position: relative; color: var(--black)!important; background: #E8EDEE; font-size: 90%; margin: 0 0 2px 0; text-decoration: none; font-weight: 700;}
.snav li a:before {font-family: "Font Awesome 5 Free"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f054"; position: absolute; top: 16px; left: 15px;}
.snav li.selected a, .snav li:hover a {background: #f18525; color: var(--white)!important;}
.snav ul ul {margin: 0; padding: 10px 20px 10px 35px;}
.snav li.selected li a {padding: 0; background: none!important; color: var(--black)!important; font-weight: normal;}
.snav li.selected li a:before {display: none;}
.snav li.selected li.selected a, .snav li.selected li:hover a {color: #00a5b5;}
.snav li:before {display: none;}

.snavmobile {display: none;}

.banners {position: relative;}
.banners .overlay {position: absolute; bottom: 0; width: 100%; height: 100%; background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 );
	}
.banners .banner .image img {width: 100%; transition: all 4s cubic-bezier(0.7, 0, 0.3, 1); transform: scale(1); }
.banners .slick-active .banner .image img { transform: scale(1.05); }
.banners .banner .image img.tablet { display: none; }
.banners .banner .image img.mobile { display: none; }
.banners .banner .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.banners .banner .overlay .inner { position: absolute; top: 70%; left: 50%; transform: translate(-50%,-70%); width: 100%; max-width: 1180px; text-align: center; padding: 0 20px; box-sizing: border-box; }
.banners .banner .overlay .inner h2 { color: #fff; font-size: 340%; }
.banners .banner .overlay .inner p { color: #fff; font-size: 120%; max-width: 750px; margin: 0 auto; }
.banners .banner .overlay .inner p a { color: #fff; }
.banners .banner .overlay .downarrow { display: block; background: url("../images/down-arrow-white.png") no-repeat center center; background-size: 100%; width: 100px; height: 100px; position: absolute; bottom: 120px; right: 50px; }

.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

/* Scroll down indicator (bouncing) */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px); } }
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0); }
  40% {
    -moz-transform: translateY(-30px); }
  60% {
    -moz-transform: translateY(-15px); } }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px); } }

.bannerstrapline {padding: 0 20px; background: #235787;}
.bannerstrapline .inner { width: 100%; max-width: 1280px; margin: 0 auto; text-align: center; padding: 30px 0; }
.bannerstrapline .inner h2 { font-size: 350%; color: #fff;}
.bannerstrapline .inner p { font-size: 175%; color: #fff; }

.quicklinks-container { width: 100%; }
.quicklinks { width: 100%; }
.quicklinks .quicklink {background: #d4242f; width: 100%; margin: 0;}
.quicklinks a {background: rgba(0,0,0,0.5); display: block; box-sizing: border-box; padding: 20px; text-decoration: none; color: var(--white); font-weight: 600; font-size: 120%; line-height: 100%; letter-spacing: -0.5px; box-sizing: border-box; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease;}
.quicklinks a span {font-size: 150%; display: inline-block; margin: 0 15px 0 0;}
.quicklinks .quicklink.q2 a {background: rgba(0,0,0,0.4);}
.quicklinks .quicklink.q3 a {background: rgba(0,0,0,0.2);}
.quicklinks .quicklink.q4 a {background: rgba(0,0,0,0);}
.quicklinks a:hover {background: rgba(0,0,0,0.8);}
.quicklinks .quicklink.q2 a:hover {background: rgba(0,0,0,0.7);}
.quicklinks .quicklink.q3 a:hover {background: rgba(0,0,0,0.6);}
.quicklinks .quicklink.q4 a:hover {background: rgba(0,0,0,0.5);}

.breadcrumb-wrap { position: absolute; top: 10px; left: 0; }
.breadcrumb-wrap .breadcrumb { padding: 10px 0; }
.breadcrumb-wrap .breadcrumb p { font-size: 80%; padding: 0; }

.content-wrap {padding: 0 50px; background: var(--white)}
.content-wrap.grey {background: #e6e6e6}
.content {max-width: 1280px; width: 100%; margin: 0 auto; padding: 60px 0; position: relative;}
.content .left { float: left; width: 280px; }
.content .right { float: right; width: 960px; }
.content .right .col1 {float: left; width: 550px;}
.content .right .col2 {float: right; width: 280px;}
.content .columns {width: 102%; margin-left: -2%;}
.content .columns .col {float: left; width: 31.333%; margin: 0 0 0 2%;}
.content .columns.twocolumns .col {width: 48%;}

.home h1, .home h2 {font-size: 260%; padding: 0 0 30px 0; font-weight: 300}
.home .content {padding: 70px 0 40px 0;}
.home .content .left {float: left; width: 65%; margin-bottom: 40px;}
.home .content .right {float: right; width: 30%;}
.home .content .right iframe { width: 100%; margin-bottom: 40px; }
.home .content .introbox {box-sizing: border-box; padding: 0 50px 0 230px; position: relative;}
.home .content .introbox .caption {position: absolute; top: 0; left: 0; width: 200px;}
.home .content .introbox .caption p {font-size: 75%; padding: 0 0 10px 0;}
.home .content .introbox .caption img {width: 100%; border-radius: 50%; margin: 0!important; box-sizing: border-box; background: var(--white);}

.schools-wrap { text-align: center; margin: 20px 0 0 0; width: 102%; margin-left: -2%; }
.schools-wrap h2 { padding: 40px 0 10px 0; }
.schools .school {position: relative; background: #235787; margin: 20px 0 0 2%; width: 31.3333%; display: inline-block; vertical-align: top; }
.schools .school.brompton {background: #003986} 
.schools .school.crakehall {background: #00a79d} 
.schools .school .image {position: absolute; top: 0; left: 0; width: 160px; height: 100%; background: #f2f2f2}
.schools .school .image img {max-height: 80%; height: auto; width: auto; max-width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%);}
.schools .school .text {padding: 20px 30px 20px 180px;}
.schools .school .text h3 {font-size: 110%; font-weight: 700; padding: 0 0 4px 0; color: var(--white)}
.schools .school .text p {padding: 0; font-size: 90%; color: var(--white)}
.schools .school .text p a {color: var(--white)}

.schools .slick-list { margin: 0 -10px; }
.schools  .slick-slide { margin: 0 10px; }
.schools .slick-prev { position: absolute; top: -35px; left: 0; z-index: 5; content: ''; text-indent: -99999999px; background: url(../images/arrow-left-solid-darkgrey.png) no-repeat center center; background-size: 100%; }
.schools .slick-next { position: absolute; top: -35px; left: auto; right: 0; z-index: 5; content: ''; text-indent: -99999999px; background: url(../images/arrow-right-solid-darkgrey.png) no-repeat center center; background-size: 100%; }

.latestnewssection h2 {font-size: 230%; padding: 0 0 30px 0; text-align: center}
.latestnewssection .content {padding: 80px 0}
.newsfeeds {width: 102%; margin-left: -2%;}
.newsfeeds .newsfeed h3 {text-align: center; padding: 0 0 20px 0; font-size: 130%;}
.newsfeeds .newsfeed .newsstory {background: #235787; float: left; width: 31.3333%; margin: 0 0 0 2%;}
.newsfeeds .newsfeed .newsstory.brompton {background: #003986}
.newsfeeds .newsfeed .newsstory.crakehall{background: #00a79d}
.newsfeeds .newsfeed .newsstory .image img {width: 100%}
.newsfeeds .newsfeed .newsstory .text {padding: 20px 30px;}
.newsfeeds .newsfeed .newsstory .text h4 {font-size: 120%; padding: 0 0 5px 0; color: var(--white)}
.newsfeeds .newsfeed .newsstory .text p {font-size: 100%; padding: 0 0 5px 0; color: var(--white)}
.newsfeeds .newsfeed .newsstory .text p a { color: #fff; }
.newsfeeds .newsfeed .newsstory .text p.date {font-size: 90%;}

.newsfeedmain { width: 102%; margin-left: -2%; }
.newsfeedmain .newsstory { float: left; width: 48%; margin: 0 0 2% 2%; background: #e8e8e8; position: relative; }
.newsfeedmain .newsstory .image { width: 50%; position: absolute; top: 0; left: 0; height: 100%; background: var(--white); }
.newsfeedmain .newsstory .text { padding: 20px; width: 50%; float: right; box-sizing: border-box; }
.newsfeedmain .newsstory .text p {padding: 0 0 5px 0; font-size: 95%; color: var(--white);}
.newsfeedmain .newsstory .text h4 {color: var(--white); padding: 0 0 7px 0; font-size: 100%; letter-spacing: -0.3px; line-height: 120%; font-weight: 600;}
.newsfeedmain .newsstory .text p.date {font-size: 85%;}
.newsfeedmain .newsstory .text p.cat {font-weight: 600; letter-spacing: -0.3px; padding: 0;}
.newsfeedmain .newsstory .text p a { color: #fff; }

.facebooksection { background: #4267B2; }
.facebooksection .content { padding: 50px 0; }
.facebooksection .content .image { float: left; padding: 0 60px 0 0; }
.facebooksection .content .image i { font-size: 600%; color: var(--white);  }
.facebooksection .content .text { float: left; }
.facebooksection .content .text h2 { font-size: 300%; padding: 0 0 5px 0; }
.facebooksection .content .text h4 { font-size: 175%; }
.facebooksection .content .text h2 a, .facebooksection .content .text h4 a { color: #fff; text-decoration: none; }

/* Facebook Feed */
.facebook .content-wrap { background: #0866ff; }
.facebook h2, .facebook h2 a {font-size: 1.5rem; color: var(--white);}

.facebook .tweets { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; margin: 0 auto; column-gap: 20px;}
.facebook .tweets > * {min-width: 0;}
.facebook .tweet { display: grid; grid-template-columns: 200px auto; gap: 20px; background: var(--white); box-sizing: border-box; width: 100%; border-radius: 10px; padding: 15px; }
.facebook .tweet:after, .facebook .tweet > *::after {display: none;}
.facebook .tweet .post-content {display: flex; flex-direction: column;}
.facebook .tweet .post-content:first-child {grid-column: 1/-1;}
.facebook .tweet div.post-content:after {clear: unset; content: unset; display: unset; height: unset; visibility: unset;}
.facebook .tweet .post-image {width: unset; height: unset;}
.facebook .tweet .post-image img {width: 100%; height: auto; max-height: 250px; object-fit: contain; margin: 0 auto;}
.facebook .tweet .date { font-size: .8rem; font-weight: 700;}
.facebook .tweet p.body {display: -webkit-box;	-webkit-line-clamp: var(--fb-line-clamp);	line-clamp: var(--fb-line-clamp);	-webkit-box-orient: vertical;	overflow: hidden;	text-overflow: ellipsis;	font-size: 0.9rem;	line-height: 1.2;	max-height: calc(0.9rem * 1.2 * var(--fb-line-clamp));}
.tweet .arrowbutton {text-align: right; margin: auto 0 0; padding: 0;}
.tweet .arrowbutton a {font-size: .9rem;}
.tweet .arrowbutton a::after { top:0; }

/* Twitter Feed */
.twitter {width: 102%; margin-left: -2%;}
.twitter h2 {font-size: 230%; padding: 0 0 30px 0; text-align: center}
.twitter p {padding: 0; font-size: 100%; color: #fff;}
.twitter p a {text-decoration: none; color: #fff}
.twitter a:hover { text-decoration: none;  }
.twitter p.date {color: #cfcfcf}
.twitter .tweets {padding: 0 70px; position: relative; margin-left: -20px;}
.twitter .tweet {float: left; width: 48%; margin: 0%; border-left: 20px solid #e6e6e6; box-sizing: border-box; background: #235787; position: relative;}
.twitter .tweet .text {padding: 20px; box-sizing: border-box; width: 55%; float: right;}
.twitter .tweet .image {float: left; width: 45%; position: absolute; top: 0; left: 0; height: 100%; background: var(--white);}
.twitter .tweet .image a.block {width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; outline: none;}
.twitter .slick-next, .twitter .slick-prev {text-indent: -9999px; padding: 0; width: 30px; height: 55px; margin: 0; border: none; outline: none; background: url(../images/next.png) no-repeat 0 0; background-size: 100%; cursor: pointer; z-index: 20; position: absolute; top: 50%; right: 0; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%);}
.twitter .slick-prev {right: auto; left: 20px; background: url(../images/prev.png) no-repeat 0 0; background-size: 100%;}

.title-wrap { background: #68aecd; position: relative; padding: 0 50px 0 50px; border-top: 2px solid var(--white); }
.title-wrap .title { max-width: 1280px; width: 100%; margin: 0 auto; padding: 25px 0; }
.title-wrap .title h2 { padding: 0; color: var(--white); font-size: 320%; }

.gridboxes {width: 102%; margin-left: -2%;}
.gridboxes .box {float: left; width: 31.333%; margin: 0 0 0 2%;}
.gridboxes .box .image {width: 100%; margin: 0 0 20px 0;}
.gridboxes .box .image img {width: 100%;}
.gridboxes .box .text h3 {padding: 0 0 5px 0; font-size: 150%; font-weight: 500;}
.gridboxes .box .text p {padding: 0 0 20px 0;}
.gridboxes .box .text ul {margin: 0; padding: 0;}
.gridboxes .box .text li {list-style: none; color: var(--black); padding: 0;}
.gridboxes .box .text li a {display: inline-block; padding: 0 0 0 20px; position: relative; color: var(--black); text-decoration: none; font-weight: initial;}
.gridboxes .box .text li a i {position: absolute; top: 3px; left: 0; font-size: 70%;}

.inpagenav { width: 102%; margin-left: -2%; }
.inpagenav .box { width: 31.3333%; float: left; margin: 0 0 2% 2%; }
.inpagenav .box a {color: var(--white)!important; text-decoration: none; font-weight: 700; position: relative; display: block; background: var(--black);}
.inpagenav .box a span {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); max-width: 85%; width: 100%; text-align: center;}
.inpagenav .box a img {opacity: 0.6; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease;}
.inpagenav .box a:hover img {opacity: 0.4;}

.usefullinks {width: 102%; margin-left: -2%;}
.usefullinks .box {float: left; width: 31.333%; margin: 0 0 20px 2%;}
.usefullinks .box .image {background: var(--white); width: 100%; box-sizing: border-box; border: 1px solid #cccccc; height: 150px; position: relative; margin: 0 0 15px 0;}
.usefullinks .box .image img {position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%); max-height: 130px; max-width: 80%; width: auto;}
.usefullinks.schoolreports .box, .usefullinks.videos .box {width: 48%;}
.usefullinks.schoolreports .box .image {height: auto;}
.usefullinks.schoolreports .box .image img {position: static; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; max-width: 100%; width: 100%; max-height: none;}
.usefullinks.videos iframe {width: 100%!important; height: 250px!important;}
.usefullinks.videos .box .image {border: none; height: auto;}
.usefullinks.videos .box h3 {padding: 0 0 5px 0;}

.boxlogos { width: 102%; margin-left: -2%; }
.boxlogos .boxlogo { width: 31.3333%; float: left; margin: 0 0 2% 2%; }
.boxlogos .boxlogo .image { background: var(--white); width: 100%; box-sizing: border-box; border: 1px solid #cccccc; height: 150px; position: relative; margin: 0 0 15px 0; }
.boxlogos .boxlogo .image img { position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%); max-height: 130px; max-width: 80%; width: auto; }

.faqs .faq {margin: 0 0 20px 0;}
.faqs .faq .heading { padding: 10px 20px; background: #4f646d; cursor: pointer; } 
.faqs .faq .heading p { padding: 0; font-weight: 700; color: var(--white)!important; font-size: 120%;} 
.faqs .faq .heading p i { float: right; } 
.faqs .faq .text { padding: 20px; display: none; background: #e2e2e2;} 

.staffmembers { width: 102%; margin-left: -2%; }
.staffmembers .staff {float: left; width: 23%; margin: 0 0 2% 2%;}
.staffmembers .staff .image {margin: 0 0 15px 0;}
.staffmembers .staff .image img {width: 100%;}
.staffmembers .staff p {padding: 0;}
.staffmembers .staff h3 {padding: 0 0 5px 0; font-size: 130%; }
.staffmembers .staff h4 {padding: 0 0 5px 0; font-size: 100%; }

.accreditations-wrap {background: var(--white); padding: 0 50px;}
.accreditations {max-width: 1180px; width: 100%; margin: 0 auto; padding: 15px 0;}
.accreditations .logos { width: 100%;}
.accreditations .logo { padding: 0 10px; height: 100px; position: relative;}
.accreditations .logo img {position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%);max-height: 80px; width: auto; max-width: 70%;}

.footer-wrap { background: #2f2f2f; position: relative; padding: 0 50px;}
.footer {max-width: 1280px; width: 100%; margin: 0 auto; padding: 60px 0 20px 0;}
.footer p {color: var(--white); font-weight: 300; font-size: 90%; line-height: 140%; padding: 0 0 10px 0;}
.footer p.logo {padding: 0; position: absolute; top: 0; left: 0;}
.footer p.logo a img {max-width: 145px;}
.footer p a {color: var(--white); text-decoration: none;}
.footer p a i {width: 24px; color: #5aa5ea;}
.footer h4 {text-transform: none; color: var(--white); letter-spacing: -0px; padding: 0 0 5px 0; font-size: 110%; font-weight: 600;}
.footer ul {margin: 0; padding: 0;}
.footer li {list-style: none; color: var(--white); font-size: 90%; padding: 0 0 3px 0;}
.footer li:before {display: none; padding: 0;}
.footer li a {display: inline-block; padding: 0 0 0 20px; position: relative; color: var(--white); text-decoration: none}
.footer li a i {position: absolute; top: 5px; left: 0; font-size: 70%;}
.footer .left {float: left; width: 65%; box-sizing: border-box; padding: 0 0 0 200px; position: relative;}
.footer .left .col1, .footer .left .col2 {float: left; width: 48%;}
.footer .left .col1 {width: 40%;}
.footer .left .col2 {float: right;}
.footer .left .col2 img {max-height: 45px; margin: 0 0 15px 0;}
.footer .right {float: right; width: 28%;}
.footer.bottomfooter { padding: 20px 0; }
.footer .bottom {padding: 0;}
.footer .bottom p {padding: 0; font-size: 75%; color: #969696}
.footer .bottom p a {color: #969696}
.footer .bottom p a:hover {color: var(--white)}

.bottom-footer-wrap {padding: 0 50px; background: var(--white);}
.bottom-footer {max-width: 1280px; width: 100%; margin: 0 auto; padding: 15px 0;}
.bottom-footer p {padding: 0; color: var(--black); font-size: 80%; font-weight: 300;}
.bottom-footer p a {color: var(--black); text-decoration: none}
.bottom-footer .left {float: left; width: 55%;}
.bottom-footer .right {float: right; width: 45%; text-align: right;}

@media print {
	* {-webkit-print-color-adjust: exact;}
	body {font-size: 12pt; font-family: arial, serif;	line-height: 140%;}
	.see-cms-toolbar {display: none!important;}
}

@media screen and (max-width: 1580px){
	.banners .banner .image img.desktop { display: none; }
	.banners .banner .image img.tablet { display: block; }
	.banners .banner .image img.mobile { display: none; }
}

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

	.nav li { font-size: 100%; }
	.nav li a { padding: 15px 10px 17px 10px; }
	.dropdown .right { width: 70%; }
	.dropdown li a { padding: 0 0 0 20px; }
	.dropdown  ul { column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; }

	.content .left {width: 23%;}
	.content .right {width: 73%;}
	.content .right .col1 {width: 64%;}
	.content .right .col2 {width: 32%;}

	.twitter { padding: 0; width: 100%; margin-left: 0; }
	.twitter .image { position: relative; float: left; top: auto; left: auto; width: 20%;  }
	.twitter .text { padding: 0; float: right; width: 80%; }

	.schools .school { width: 48%; }

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

	.header span { font-size: 150%; }

	.banners .banner .overlay .inner { top: auto; bottom: 160px; transform: translateX(-50%); }
	.banners .banner .overlay .downarrow { display: none; }

	.facebooksection .content .image { padding: 0 30px 0 0; }
	.facebooksection .content .image i { font-size: 400%; }
	.facebooksection .content .text h2 { font-size: 200%;  }

	.footer .left {padding: 0 0 0 100px; width: 72%;}
	.footer .right {width: 22%;}
	.footer p.logo {width: 80px;}
	.footer p.logo a img {max-width: 100%;}
	.footer .left .col1 {width: 46%;}
}
@media screen and (max-width: 890px){
	.home .content .left {padding: 0; width: 100%;}
	.home .content .right {width: 100%; padding: 20px 0 0 0;}

	.schools-wrap { width: 100%; margin-left: 0; }
	.schools { width: 100%; margin: 0; }
	.schools .school { width: 100%; float: none; margin: 0 0 40px 0; }

	.footer p.logo {position: static; padding: 0 0 20px 0;}
	.footer .left, .footer .right, .footer .left .col1, .footer .left .col2 {width: 100%; padding: 0 0 20px 0;}
	.footer .left .col2 {padding: 0;}
}

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

	.header-container, .nav-wrap  {display: none;}
	.header-container.home {position: static}

	.sticky-wrapper { display: none; }

	.top-mobile-header-wrap { display: block; }
	.top-mobile-header p { float: left; width: 50%; text-align: center; padding: 0; font-size: 90%; background: #235787; }
	.top-mobile-header p:last-child { background: #19354f;  }
	.top-mobile-header p a { padding: 10px 0; display: block; color: #fff; }

	.mobile-header-wrap {display: block;}
	.mobile-header { background: var(--white);  padding: 25px 20px 10px 20px;}
	.mobile-header .left { position: relative; width: 280px; }
	.mobile-header a.logo {display: block; box-sizing: border-box; width: 100%; text-decoration: none; float: left; margin: 0 20px 0 0; height: 96px; background: url(../images/synergy-logo.png) no-repeat center center; background-size: 100%; }
	.mobile-header a.logo img {max-height: 60px;}
	.mobile-header span { color: #000; font-size: 200%; float: left; position: absolute; top: 10px;}

	.mobile-nav {background: #235787;}
  	.mobile-nav .top {padding: 15px 20px; cursor: pointer; background: #235787;}
	.mobile-nav .top p {float: left; color: var(--white); font-size: 90%; padding: 4px 0 0 0; font-weight: 600;}
	.mobile-nav .nav-icon {width: 27px; height: 20px; transform: rotate(0deg); transition: .5s ease-in-out;cursor: pointer; float: right;}
	.mobile-nav .nav-icon span {display: block; position: absolute; height: 3px; width: 100%; background: var(--white); border-radius: 0px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out;}
	.mobile-nav .nav-icon span:nth-child(1) {top: 0px;}
	.mobile-nav .nav-icon span:nth-child(2),.mobile-nav .nav-icon span:nth-child(3) {top: 7px;}
	.mobile-nav .nav-icon span:nth-child(4) {top: 14px;  }
	.mobile-nav .open .nav-icon span:nth-child(1) {top: 21px;width: 0%; left: 50%;}
	.mobile-nav .open .nav-icon span:nth-child(2) { transform: rotate(45deg); }
	.mobile-nav .open .nav-icon span:nth-child(3) { transform: rotate(-45deg); }
	.mobile-nav .open .nav-icon span:nth-child(4) {top: 18px; width: 0%; left: 50%; }
	.mobile-nav ul {padding: 0; margin: 0; display: none; border-top: 2px solid var(--white);}
	.mobile-nav ul ul {padding: 0; margin: 0; display: none; border-bottom: 0; border-top: 0;}
	.mobile-nav li {list-style: none; position: relative; font-size: 100%; font-weight: 700; padding: 0; margin: 0;}
 	.mobile-nav li:before {display: none;}
	.mobile-nav li a {display: block; padding: 15px 65px 15px 20px; color: var(--white); font-size: 90%; text-decoration: none; font-weight: 700; background: #235787;}
	.mobile-nav li li a {padding: 10px 65px 10px 40px; font-size: 80%;}
	.mobile-nav li.selected a {background: #f18525; color: var(--white);}
	.mobile-nav li span {position: absolute; top: 0; cursor: pointer; right: 0; width: 52px; height: 52px; text-align: center; line-height: 52px; background: rgba(0,0,0,0.2); color: #fff; z-index: 2; font-size: 140%; box-sizing: border-box;}
	.mobile-nav li.selected li a, .mobile-nav li li a {background: var(--white); color: var(--black);}
	.mobile-nav li.selected li.selected a {color: #f18525;}

	.banners .banner .image img.desktop { display: none; }
	.banners .banner .image img.tablet { display: none; }
	.banners .banner .image img.mobile { display: block; }

	.banners .banner .overlay .inner h2 { font-size: 225%;  }

	.content-wrap { padding: 0 20px; }
	.content .columns { width: 100%; margin-left: 0; }
	.content .left, .content .right, .content .right .col1, .content .right .col2, .content .columns .col, .content .columns.twocolumns .col {width: 100%; float: none; margin: 0;}

	.home h1, .home h2 { font-size: 200%; }

	.snav { display: none; }
	.snavmobile, .snavmobile .snav { display: block; }

	.title-wrap .title h2 { font-size: 225% }

	.bannerstrapline .inner h2 { font-size: 225%; }

	.gridboxes .box { width: 48%; }

	.gridboxessection .gridboxes { width: 100%; margin-left: 0; }
	.gridboxessection .gridboxes .box { width: 100%; margin: 0 0 40px 0; float: none;  }

	/* .facebook .content {padding: 30px 20px;} */
	.facebook .tweet { grid-template-columns: 1fr;}
	.facebook .tweet .post-image, .facebook .tweet .post-image img {width: 100%;}
}

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

	.schoolsidebar {display: none;}

	.top-mobile-header p { width: 100%; float: none; }

	.home .content { padding: 40px 0; }
	.home .content .right { margin-bottom: 40px; }
	.home .content .introbox { padding: 0; }
	.home .content .introbox .caption { position: relative; top: auto; left: auto; margin: 0 auto 20px auto; }

	.banners .banner .overlay .inner { top: auto; bottom: 160px; transform: translateX(-50%);  }

	.newsfeeds { width: 100%; margin-left: 0; } 
	.newsfeeds .newsfeed .newsstory { width: 100%; float: none; margin: 0 0 40px 0; } 
	.newsfeeds .newsfeed .newsstory:last-child { margin: 0; }
	
	.facebooksection .content .text h2 {font-size: 150%; }
	.facebooksection .content .text h4 { font-size: 100%; }

	.twitter .tweets { padding: 0 60px; }
	.twitter .tweet .image { float: none; width: 100%; position: relative; top: auto; left: auto; height: auto;   }
	.twitter .tweet .image a.block { width: 100%; height: 200px; display: block;  position: relative; top: auto; left: auto; outline: none }
	.twitter .tweet .text { width: 100%; float: none; }

}


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

	.banners .banner .overlay .inner { bottom: 40px; }

	.quicklinks-container { position: relative; bottom: auto; left: auto; padding: 0; }
	.quicklinks { width: 100%; margin-left: 0; }
	.quicklinks .quicklink { width: 100%; margin: 0; float: none;}

	.home .right .quicklinks .quicklink { margin: 0 0 2% 0;}

	.bannerstrapline .inner h2 { font-size: 175%; }
	.bannerstrapline .inner p { font-size: 120%; }

	.gridboxes { width: 100%; margin-left: 0; }
	.gridboxes .box { width: 100%; margin: 0 0 40px 0; float: none;  }

	.facebooksection .content .image { margin: 0 auto; float: none; text-align: center; padding: 0; }
	.facebooksection .content .text { float: none; text-align: center; }
	.facebook .tweets {grid-template-columns: 1fr; row-gap: 20px; column-gap: unset;}
	.facebook .tweet {grid-template-columns: 1fr; row-gap: 10px;}
	.facebook .tweet .post-image, .facebook .tweet .post-image img {width: 100%;}
	.facebook .tweet p.body {-webkit-line-clamp: unset;	line-clamp: unset; max-height: unset;}
}