@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap');
		
		:root {
 	 		--blue: #28598d;
			--red: #e30512;
			--purple: #6d2362;
		}
		html{max-width: 100%;
    overflow-x: hidden;}
		body, html{width:100%; height:100%; margin: 0px; font-family: 'Open Sans', sans-serif; font-size:16px}
		div{box-sizing: border-box; background-repeat: no-repeat; background-position: center}
		a{text-decoration: none; color:var(--blue); transition: all 300ms ease}
		input{padding:10px; border:1px solid #ccc}
		textarea{padding: 15px; font-family: 'Open Sans', sans-serif; border:1px solid #efefef; box-sizing: border-box}
		select{padding:10px; border:1px solid #ccc}
		
		h1, h2, h3, h4, h5, h6{font-family: 'Roboto', sans-serif; font-weight:normal}
		h1{font-size:46px; color: var(--purple)}
		h2{font-size: 38px; color:var(--blue)}
        .pagesection h3{color:var(--blue); font-size:20px}
		
		.button{padding: 15px 25px; text-align: center; display: inline-block; border-radius:30px; transition:all 300ms ease; cursor:pointer}
		
		header{text-align:center}
		#masthead{max-width:1200px;  display:flex; justify-content: space-between; align-items: center; margin: 15px auto 25px; padding: 0 15px}
		#logo{height:90px; width:320px; background-image: url(../img/logo-top.png); transition:all 300ms ease}
		#logo > a{width:100%; height: 100%; display: block}
		
.pagesection{max-width:1200px; padding: 60px 15px; margin: 0 auto; min-height:600px}
#content > p:first-of-type{font-size:1.5em}

		.nav ul{list-style: none; font-size:15px}
		.nav ul > li{display:inline-block; position: relative; cursor:pointer}
		.nav a{display:block; padding: 5px 14px; font-weight:600; transition:all 300ms ease}
		.nav a:hover{color:var(--red) !important}

		.sub-menu{z-index: 101;  position: absolute; top:30px; left:0px; display: none;  list-style: none; margin: 0px; padding: 0px; background-color: var(--blue) !important}
		.sub-menu > li{margin: 0px; padding: 0pc;min-width:220px;}
		.sub-menu a{display: block; padding: 6px 12px; text-align: left; color: #fff; font-size:16px !important}
		.sub-menu a:hover{color: #fff !important; background-color: var(--red)}

		.strapline{max-width: 1000px; margin: 0 auto}
		.strapline h2{color:var(--blue); font-size:42px}
		.strapline p{font-weight:700; text-align: right; transform:translate(0px, -60px); font-size:24px; color: #666; padding-top: 50px}
		
		#hero{background: #efefef; margin: 0 auto; border-top:1px solid #fff; border-bottom:1px solid #fff; background-size: cover; background-position: center; position: relative; min-height: 600px}
		#heroinner{ display: flex; justify-content: space-between; margin: 40px auto; max-width:1200px; padding: 0 15px}
		#heroinner h1{padding:0px; margin:0px; color:#fff; font-size:46px}
		#heroinner > div{flex-grow:1; margin-bottom: 60px}
		#heroinner > div:first-of-type{max-width: 400px; background-color: rgba(0,124,255,0.5); border-radius:30px; padding: 30px; color: #fff}
		#heroinner > div:first-of-type p a{color: #fff}
		#heroinner > div:first-of-type p a:hover{color:#efefef}
		#heroinner .button{color: #fff; background: var(--red); margin: 20px 0 0; font-weight:700; padding: 15px 60px 15px 30px; position: relative}
		#heroinner .button:hover{color: var(--red) !important; background: #ffffff !important}
		#heroinner .fa-chevron-circle-right{font-size:40px; display: block; position: absolute; right:6px; top:6px}
		
        .carousel{background-color: #efefef; min-height:600px; z-index: 2; position: relative}
        .carousel > div{position: absolute; left:0px; top:0px; width:100%; height: 100%; opacity: 0; background-size: cover}
        .carousel > div:first-of-type{opacity: 1}

        #carouter{border:3p solid teal; width:100%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 3}
        #carinner{max-width: 400px; background-color: rgba(0,124,255,0.5); border-radius:30px; padding: 30px; color: #fff; position: absolute; top:45px; left:15px}

        #carinner a{color:#fff}
        #carinner h1{padding:0px; margin:0px; color:#fff; font-size:46px}
        #carinner .button{color: #fff; background: var(--red); margin: 20px 0 0; font-weight:700; padding: 15px 60px 15px 30px; position: relative}
		#carinner .button:hover{color: var(--red) !important; background: #ffffff !important}
		#carinner .fa-chevron-circle-right{font-size:40px; display: block; position: absolute; right:6px; top:6px}


		.mask{z-index: 3}
		.mask > div{max-width:1200px; margin: 0 auto; position: relative; z-index: 3}
		.mask > div > div{padding-bottom: 10%; position: absolute; left:0px; bottom:0px; width:100%; background-image: url("../img/mask.png"); background-position: bottom center; background-size: 100%}
		

		.cta3{display:flex; justify-content: space-between; align-items: stretch; max-width: 1200px; padding: 0 15px; margin: 40px auto; transition:all 1000ms ease}
		.cta3 > div{flex-grow:1; cursor:pointer; background-size:cover !important;  transition:all 500ms ease; background-position: top center; width:100%; max-width:360px; background: #efefef; color:#fff; border-radius:30px; min-height: 300px; position: relative; padding: 0px; overflow: hidden}
		.cta3 > div:hover{transform:scale(1.03); box-shadow:0px 0px 20px #666}
		.cta3 h3{position: absolute; left:0px; bottom:0px; width:100%; padding: 20px; margin:0px; box-sizing: border-box; font-size:24px}
		
		.cta3 > div:nth-of-type(1){ border:2px solid rgba(4,67,7, 0.74)}
		.cta3 > div:nth-of-type(2){ border:2px solid rgba(109,35,98,0.7)}
		.cta3 > div:nth-of-type(3){ border:2px solid rgba(9,102,189,0.7)}

		.cta3 > div:nth-of-type(1) h3{background-color: rgba(4,67,74,0.7)}
		.cta3 > div:nth-of-type(2) h3{background-color: rgba(109,35,98,0.7)}
		.cta3 > div:nth-of-type(3) h3{background-color: rgba(9,102,189,0.7)}
		.cta3 a{color: #fff}
		
		.cqc{background-color: var(--purple); transition:all 1000ms ease; background-image: url("../img/cqc-bg.gif"); background-position: center; background-size: cover; color: #fff; margin: 80px auto 30px}
		.cqc > div{display:flex; justify-content: space-between; align-items: stretch; max-width: 1200px; padding: 0px 15px; margin: 40px auto}
		.cqc > div > div{padding: 30px; flex-grow:1; max-width:50%}
		.cqc > div > div:last-of-type{text-align: right}
		
		.newsouter{text-align: center; padding: 0 0 80px}
		.newsinner{max-width:1200px; padding:0 15px; display:flex; background-size: cover; background-position: center; justify-content: space-between; align-items: stretch; margin: 0 auto 60px; transition:all 1000ms ease}
		.newsinner > div{background: #ccc; background-size: cover !important; background-position: center; flex-grow:1; max-width:360px; min-height: 400px; position: relative; padding: 0px; transition:all 500ms ease; cursor:pointer}
		.newsinner > div:hover{box-shadow:0px 0px 20px #666}
		.newsinner h3{position:absolute; font-size:22px; left:0px; bottom:0px; width:100%; background-color: rgba(0,0,0,0.8); margin: 0px; padding: 25px 15px; box-sizing: border-box; text-align: left}
		.newsinner h3 a{color: #fff; text-align: left}
		.newsinner > div:nth-of-type(1){background-image: url("../img/photo-02.jpg")}
		.newsinner > div:nth-of-type(2){background-image: url("../img/photo-03.jpg")}
		.newsinner > div:nth-of-type(3){background-image: url("../img/photo-04.jpg")}
		
		.newsbutton{padding: 16px 40px; text-transform: uppercase; color:var(--red); border:2px solid var(--red); font-weight:700; font-size:24px; cursor:pointer; transition:all 500ms ease}
		.newsbutton:hover{background: var(--red); color:#fff}
		
		.testimonials{background: linear-gradient(0deg, rgba(0,15,32,1) 0%, rgba(59,126,198,1) 100%); color: #fff; padding: 40px 0 60px; text-align: center; transition:all 1000ms ease; }
		.testimonials h2{color: #fff; margin: 20px 0 60px; padding: 0px}

.testimonialsouter{overflow: hidden; width:100%; max-width: 1080px; height: 400px; margin: 0 auto; position: relative}

.testimonialsinner{max-width:1100px; display:flex; justify-content: space-between; align-items: stretch; margin: 0 auto; position: absolute; left:0px; top:0px}

.testimonialsinner > div{flex-grow:1; min-width:340px; max-width: 340px; background-color: rgba(255,255,255,0.1); border-radius:20px; padding:40px; text-align: left; background-image:url("../img/quotes-1.png"), url("../img/quotes-2.png"); background-position: top 5px left 5px, bottom 5px right 5px; margin: 0 25px 0 0}

.testimonialsinner em{font-weight:700}
.revslide {max-height: 200px; overflow: auto; font-size:16px; margin: 25px 0 0}		

#hpVideo{max-width:1200px; margin: 0px auto 90px}
#hpVideo > div{padding-bottom: 56%; width:100%; position: relative}
#hpVideo iframe{position:absolute; top:0; left:0; width:100%; height: 100%}

/* try this - Emma */
.testimonialsinner > div{background-color:aliceblue; color:var(--blue)}


		.paginator{display: inline-flex; justify-content: space-between; align-items: center; font-size:30px}
		.paginator > div{padding: 0 10px; transition:all 300ms ease}
		.paginator > div:nth-of-type(2){padding-bottom:10px}
		.paginator > div:nth-of-type(2) > div{border:1px solid #fff; border-radius:20px; width:14px; height: 14px; display:inline-block; margin: 0 4px; cursor: pointer}
.paginator > div:nth-of-type(2) > div:hover{opacity:0.7; background-color: var(--red)}
		.paginator > div:nth-of-type(2) > div:first-of-type{background: #fff}
		.paginator > div:nth-of-type(1):hover{cursor: pointer; opacity: 0.6}
		.paginator > div:nth-of-type(3):hover{cursor: pointer; opacity: 0.6}

		.getInTouch{text-align: center; transition:all 1000ms ease; padding-bottom: 60px}
		
		.enqform{display: flex; justify-content: space-between; align-items: stretch; max-width: 900px; background-color: #efefef; border-radius:30px; margin: 0 auto; transition:all 1000ms ease}
		.enqform > div{flex-grow:1; text-align: left; width:50%; padding: 30px}
		
		.enqform label{display: block; font-size:12px; color:var(--blue); padding: 0 0 3px}
		.enqform input{margin-bottom: 15px}
		.enqform textarea{border:0px; width:100%; border-radius:5px; margin: 0 0 15px; height: 120px}
		.enqform input[type=submit]{background: var(--red); color:#fff; border:0px; border-radius:30px; font-weight:600; padding: 10px 40px; cursor:pointer; transition:all 300ms ease}
		.enqform input[type=submit]:hover{background: var(--blue); outline: none}
		.enqform input[type=text], input[type=email]{width:100%; border:0px; border-radius:4px}
		
		footer{text-align: center; background:#d9d9d9; background-image: url("../img/footer-bg.png"); background-size: contain; background-repeat: no-repeat; padding:60px 10px 30px}
		footer a:hover{color:var(--purple)}
		
		.footerinner{display: flex; justify-content: space-between; align-items:stretch; max-width: 1200px; padding: 0 15px; margin: 0 auto}
		.footerinner > div{flex-grow:1; width:50%; text-align: left}
		.footerinner > div:last-of-type{text-align: right}
		
		.subfooter{display: flex; justify-content: space-between; align-content: center; max-width: 1200px; padding:0px 15px; margin: 40px auto 0px}
		.subfooter > div{padding: 0px}
		.subfooter > div:last-of-type{text-align: right}
		.subfooter ul{list-style: none; font-size:14px; padding: 0px; margin: 0px}
		.subfooter ul > li{display: inline; padding: 0px; margin: 0px}
		
		.subfooter > div:first-of-type li{display:inline-block; padding: 0 15px 0 0}
		
		#accreditations{background: var(--blue); color:#fff; max-width: 1170px; margin: 30px auto; padding: 10px 15px; font-size:0.9em; border-radius:5px}
		#accreditations a{color: #fff; text-decoration: underline}

		.hpTextPanel{max-width: 1200px; margin: 90px auto 40px; column-count: 2; column-gap: 60px; padding: 10pz 15px; transition: all 2000ms ease; font-size:18px}
		.hpTextPanel p{padding: 0 0 15px; margin:0px}
		.hpTextPanel p:first-of-type{font-weight:600; font-size:28px; color:var(--blue)}
		
		#mobnavbutton{width:40px; position: absolute; top:44px; right:-100px; cursor:pointer; transition:all 300ms ease; z-index: 5}
		#mobnavbutton > div{height:6px; border-radius:6px; width:100%; background: var(--blue); margin:0 0 6px; transition:all 300ms ease}
		#mobnavbutton:hover > div{background-color: var(--purple)}
		
		#mobnav{position: fixed; height:100%; top:0px; right:-500px; width:100%; max-width:400px; z-index: 10; background-color: #fff; transition:all 600ms ease; font-size:18px}
		#mobnav ul{list-style: none; padding: 0px; margin: 30px}
		#mobnav li{padding: 0px; margin: 0px}
		#mobnav a{display:block; color: var(--blue); padding: 10px 10px 10px 40px; transition:all 300ms ease; border-bottom:1px dotted #ccc; background-position:2px 12px; background-size: 20px; background-image: url("../img/bullet.png"); background-repeat: no-repeat}
		#mobnav a:hover{background-color: #efefef; color:var(--purple)}
		#mobnav i{position: absolute; top:14px; right:14px; color:var(--purple); font-size:30px; cursor:pointer}
		#mobnav i:hover{color:var(--blue)}
		#mobnav.active{right:0px}
		
		.move{transform: translate(0px, 50px); opacity:0}
		
		.socials img{transition:all 200ms ease}
		.socials img:hover{transform:scale(0.9)}

.teamlist{display:flex; justify-content: flex-start; align-items: stretch; flex-wrap:wrap; margin:0 auto}
.teamlist > div{border-radius:30px; width:100%; max-width:320px; height: 320px; background-size:cover; background-position: top center; margin:0 35px 50px; cursor:pointer; transition:all 500ms ease; position: relative; overflow: hidden}
.teamlist > div:hover{transform:scale(1.03); box-shadow:0px 0px 20px #666}

.teamlist > div > div{position: absolute; bottom:0px; left:0px; width:100%; background-color: rgba(9,102,189,0.7); padding: 10px 0}
.teamlist h2{font-size:18px; color: #fff; padding: 0 15px 0 25px}

.newsthumb{max-width: 40%; float:right; margin: 10px 0 30px 30px; border-radius:20px}

.staffthumb{max-width: 30%; float:right; margin: 0 0 30px 30px; border-radius:30px}

.newslist{display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap}
.newslist > div{width:100%; max-width:270px; position: relative; padding-bottom: 60px; margin-bottom: 50px}
.newslist h2{font-size: 24px; padding: 0px; margin: 10px 0 15px}
.date{color: #ccc; font-size:12px; padding: 0px}

.newslistthumb{width:100%; height: 260px; background-color: #f8f8f8; display: block; background-size: cover; background-position: center}
.newslistthumb img{width:100%; max-width:100%}

.comments{display: none}
.page-numbers{border:1px solid #ccc; padding: 0 5px; border-radius:5px; cursor:pointer}
.page-numbers:hover{background-color: var(--blue); color: #fff; border-color:var(--blue)}

.view-article{inline-display: block; margin: 10px 0 0; font-size:14px; padding: 3px 15px; background-color: var(--blue); color:#fff;  text-align: center; border-radius:4px; position: absolute; bottom:5px; right:5px}
.view-article:hover{background-color: var(--red)}

.formButtonWrap{text-align: right}

#up{position: fixed; right:-40px; bottom:30px; z-index: 101; color: var(--red); font-size:40px; cursor:pointer; opacity: 0.4; transition:all 300ms ease}
#up:hover{opacity: 1; transform:scale(1.2)}
#up.active{right:30px}

.sjb-page{max-width: 900px; margin: 0 auto}
.sjb-page .btn-primary, .sjb-page .btn-primary:hover, .sjb-page .btn-primary:active:hover, .sjb-page .btn-primary:active:focus, .sjb-page .sjb-detail .jobpost-form .file div, .sjb-page .sjb-detail .jobpost-form .file:hover div{background-color: var(--blue)}


.alignright, .alignleft{max-width: 50%; height: auto}

.accreditations{display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto}
.accreditations > div{width:100%; max-width: 300px; height: 150px; background-size: contain; background-position: center; margin: 15px}


/* Jobs board */
.sjb-page{}

.sjb-page .sjb-filters.sjb-filters-v1{background-color: #f8f8f8; border-radius:10px}

.sjb-page .sjb-filters.sjb-filters-v1 .btn-search{background-color: var(--red); border-radius:60px}

.sjb-search-categories{display: none}

.company-logo{}

.hidden-xs{display: none}


.sjb-page .list-data .v1 .job-info h4{text-align: left; width:100%}

.sjb-page .list-data .v1 .job-info h4 a, .sjb-page .list-data .v2 .job-info h4 a{color:var(--blue) !important; font-size:23px !important; margin: 0px}

.job-info{margin: 0px !important; padding: 0px !important}
.col-md-5{padding: 0px}

.col-md-11, .col-sm-10{margin: 0 0 15px; width:100%}

.job-date{display: none}

.sjb-page .btn-primary, .sjb-page .btn-primary:hover, .sjb-page .btn-primary:active:hover, .sjb-page .btn-primary:active:focus, .sjb-page .sjb-detail .jobpost-form .file div, .sjb-page .sjb-detail .jobpost-form .file:hover div{background-color: var(--red); border-radius:60px}

.job-features{display: none}

.col-md-1, .col-sm-2{display: none}

.sjb-filters-v1{display: none}

/* end jobs board */


@media only screen and (max-width: 1200px) {
	.newslist{justify-content: space-around}
}
		@media only screen and (max-width: 1100px) {
			
			#mobnavbutton{right:30px}
			.nav{display:none}
			
			.testimonialsouter{height:inherit; inherit !important; overflow: inherit !important}
			.testimonialsinner{justify-content:space-around; flex-wrap:wrap; position: relative; top:inherit; left: inherit}
			.testimonialsinner > div{margin-bottom: 30px}
			.paginator{display:none}
			
			.newsinner{justify-content:space-around; flex-wrap:wrap}
			.newsinner > div{min-width:360px; margin-bottom: 30px}
			
			.strapline{padding: 10px 40px}
			
			.cta3{flex-wrap:wrap; justify-content: space-around}
			.cta3 > div{margin: 10px 10px 30px}
			
			.newsthumb{max-width: 50%}
			
		}
		
		@media only screen and (max-width: 800px) {
			.cqc > div{flex-direction:column}
			.cqc > div > div{max-width: 100%; text-align: center !important}
			.cqc img{margin: 0px; max-width:100%}
			.hpTextPanel{column-count: 1; padding: 0 30px}
			
			.footerinner{flex-direction: column}
			.footerinner > div{max-width:100%; text-align: left !important}
			.footerinner > div:last-of-type{padding-top: 60px}
			
			footer{background-size: cover}
			.subfooter{flex-direction: column-reverse}
			.subfooter > div{max-width:100%; text-align:left !important}
			.subfooter > div:first-of-type li{display: block !important; padding: 0 0 10px !important}
			.subfooter > div:last-of-type{padding: 0 0 40px}
		}
		@media only screen and (max-width: 800px) {
			.alignright, .alignleft{max-width: 100%; height: auto; float: none; clear: both; margin: 0px 0px 30px}
		}
		@media only screen and (max-width: 600px) {
			.enqform{flex-direction:column; padding: 30px; max-width: 90%; margin: 0 auto}
			.enqform > div{width:100%; padding: 0px}
			.enqform input, .enqform textarea{max-width:98%; box-sizing: border-box}
			.staffthumb{float: none; margin: 30px auto 15px !important; max-width:100%}
			.testimonials h2{font-size:26px}
			.newsthumb{max-width: 100%; float:none; margin: 30px auto; border-radius:20px}
			.formButtonWrap{text-align: center; padding-top: 20px}
		}
		@media only screen and (max-width: 500px) {
			#logo{width:240px; background-size: contain}
		}