/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
	--willow: #C9D7C4;
	--primary: #33432d;
	--secondary: #9CB693;
	--pale: #f0fceb;
	--complimentary: #D2C4D7;
	--complimentary2: #D7C4D2;
	--button-radius: 15px;
	
	--font1: "Open Sans", serif;;
	--font2: "Montserrat", serif;
}

html, body {
	width:100%;
	height: 100%;
	overflow-x: hidden;
	margin: 0;
}




body{background-color: var(--pale); font-family: var(--font1); line-height: 1.4; font-optical-sizing: auto; font-weight: 500; font-style: normal; font-size:18px}
body.bigger{font-size:20px}
body.biggest{font-size:30px}

h1, h2, h3, h4, h5, h6{color:#333; font-family: var(--font2)}


h2{margin-bottom: 0px; font-size: 2rem; color:var(--primary)}
h3{margin-bottom: 0px; font-size: 1.2rem; color:var(--primary)}



a{color: var(--primary); text-decoration: none}

ul {list-style-type: square}
ul li::marker {color: var(--primary)}

footer{background-color: #333; border-top:5px solid var(--secondary); margin: 0 auto; min-height: 300px; color: #fff; padding: 60px 0; font-size:16px; display: block; clear: both}
footer strong{color: #FFFFFF}
footer a{color: #fff}
footer hr{border:0px; border-bottom:1px solid #666; opacity:0.6; margin: 30px 0}

div{box-sizing: border-box}

blockquote{border: 1px solid #dedede; margin: 0 0 20px; background-image: url(../../../images/quote.png); background-repeat: no-repeat; background-position: 15px 15px; padding: 10px 20px 10px 100px}

footer .flex{align-items: stretch; column-gap: 15px; justify-content: space-between}
footer .flex > div{width:100%; min-width:33%; max-width:33%}
footer .flex ul{list-style:none; margin: 0px; padding: 0px}
footer .flex ul i{font-size:16px; color: var(--complimentary); display: inline-block; margin-right: 10px}
footer .flex > div:first-of-type{min-width:400px; max-width:400px}
footer .flex > div:last-of-type{padding-left:20px;  min-width:250px; max-width:250px}

strong{font-weight: 700}

label{font-weight:600; padding: 10px 0 5px; color:var(--primary)}
input[type="checkbox"]{width:16px !important; height:16px !important}
input[type=text], input[type=email]{padding:10px; box-sizing: border-box; width:100%}
textarea{font-family: var(--font); font-optical-sizing: auto; font-weight: 500; font-style: normal; padding:10px; box-sizing: border-box; width:100%}

article{border-radius:5px; background-color: #fff; padding: 30px}
article h3{margin-top: 30px}

#cookie-notice{background-color: var(--primary) !important}

#modal{background: rgb(255,255,255,0.8); position: fixed; width:100vw; height: 100vh; display: none; justify-content: center; align-items: center; z-index: 1000}
#modal > div{width:100%; max-width: 90%; height: 100%; max-height: 90vh; text-align: center; position: relative; overflow: hidden}
#modal > div img{object-fit: contain; object-position: center; width:100%; height: 100%}
#modal .fas{position: absolute; top:10px; right:10px; font-size:2rem; color: var(--primary); text-shadow:1px 1px 3px rgb(0,0,0,0.5); cursor:pointer; transition:all 300ms eas-in-out}
#modal .fas:hover{transform:scale(1.1)}

.clear{clear: both}

.button{background-color: var(--secondary); color: #fff; padding: 12px 40px; display: inline-block; cursor: pointer; transition:all 300ms ease-in-out}

.ctaButton{background-color: var(--secondary); padding: 12px 40px; display: inline-block; cursor: pointer; transition:all 300ms ease-in-out; box-shadow:1px 1px 5px rgb(0,0,0,0.4); margin: 30px 0; border-radius:3px; font-size:1.4rem}

.ctaButton:hover{background-color: var(--primary); transform: scale(1.1)}

.btn-primary{background: var(--primary); color: #fff; font-size:1rem !important; border:0; padding: 12px 40px !important}
.btn-primary:hover{background: var(--secondary)}

#videomodal{display: none; justify-content: center; align-items: center; position: fixed; top:0; left:0; width:100vw; height: 100vh; z-index: 200; background: rgb(0,0,0,0.8)}
#videomodal > div{aspect-ratio:16/9; width:100%; max-width: 96%}
#videoloader{width:100%; height: 100%; display: block}
#videomodal iframe{width:100%; height: 100%}
#videomodal .fa-times{position: absolute; top:20px; right:20px; color: #fff; z-index: 300; font-size: 2rem; cursor: pointer; transition:all 100ms ease-in-out}
#videomodal .fa-times:hover{transform: scale(0.90)}



#page-container{transition: all 300ms linear}

.masthead-video {position: relative; aspect-ratio:16/6; overflow: hidden; margin: 0 auto 0; width: 100%; max-width: 100vw;}

.masthead-video video {position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: -1; min-width: 100%; min-height: 100%;}

.masthead-content {
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: center;
    width:100%;
    height: 100%;
    background: rgb(201,215,196,0.4); 
    display: flex;
    justify-content: center; 
    align-items: center;
	padding: 30px
}

.masthead-content h1 {
    font-size: 4rem;
	line-height: 1.1;
	padding:0 !important;
    margin: 0 0 10px !important;
    text-shadow:1px 1px 3px rgb(0,0,0,0.8);
    border:0px !important;
    color: #fff !important
}

.masthead-content p {
    font-size: 1.6rem;
    text-shadow:1px 1px 3px rgb(0,0,0,0.8);
	padding: 0 !important; 
	margin: 0 !important;
}

.footersocials{padding: 0px; margin: 10px 0 0; color: #333}
.footersocials i{display: inline; padding: 0px; margin: 0 10px 0 0; color:var(--secondary); transition:all 300ms ease}
.footersocials a{color:var(--secondary) !important; font-size:30px; display:inline !important; display: inline-block; width:60px; text-align: center}
.footersocials i:hover{color:var(--complimentary)}

.footer-qcq-logo-wrap{text-align: center}
.footer-qcq-logo-wrap img{border-radius:15px}

.subfootflex{max-width: 1600px; margin: 0 auto}
.subfootflex > div{width:50%; font-size:12px; color:#777}
.subfootflex > div:first-of-type{padding-left:30px}
.subfootflex > div:last-of-type{text-align:right; padding-right: 30px}
.subfootflex a{color:#777}
.job-title{color: var(--primary); font-size:24px; margin: 0px; padding: 10px 0 10px}

.job-description td{padding: 15px 0 10px}
.job-description strong{color: var(--primary)}

.sjb-page .list-data .v1{border:0}

.cqcBadge{width:100%; max-width: 300px; text-align: center; float: right; margin: 20px 0 20px 30px}
.cqcBadge img{object-fit: contain; object-position: center; width:100%; height: 100%; border-radius:15px}

.blue{color: var(--primary) !important}
.red{color:#dc224c !important}

.search-submit{background: #0689ce; color:#fff; border:0px; border-radius:3px; padding:5px 14px}
.post-edit-link{color: #666; font-size:1rem}
.helpMenu{display: none}

#strapline{z-index:100; margin: 0 auto; max-width: 1200px; position: relative; display: none}
#strapline h1{color: #fff; text-shadow:1px 1px 5px #000; font-size:50px; position: absolute; top:180px; left:20px; border:0px; padding: 0px; margin: 0px}
#strapline h2{color: #fff; text-shadow:1px 1px 5px #000; font-size:30px; position: absolute; top:220px; left:20px}

.staffFlex{flex-wrap:wrap; justify-content:flex-start !important; align-items: stretch !important; margin: 60px auto}
.staffFlex > div{padding:30px; min-width:33%; max-width:33%}
.staffFlex > div:nth-of-type(odd){background-color:var(--pale); border-radius:10px; background-image: url(../../../images/dove-white.png); background-size: 90%; background-position: bottom; background-repeat: no-repeat}
.staffFlex h2{padding:30px 0 0; margin:0px; font-size:1.4rem}
.staffFlex h3{padding:0px; margin:0px; color: var(--primary); font-size:1.2rem}

.teamThumb{padding-bottom:100%; background-size: cover; background-position:center; position: relative}
.teamThumb img{object-fit:cover; object-position: center; width:100%; height: 100%; border-radius:5px; position: absolute; top:0; left:0}

.team-profile{display: flex; justify-content: space-between; align-items:flex-start; background: #fff; column-gap: 30px; min-height: 500px}
.team-profile > div{width:100%}
.team-profile > div:last-of-type{max-width: 300px}
.team-profile > div:last-of-type img{object-fit: contain; width:100%; height: 100%; margin: 0; display: block; border-radius:5px}
.team-profile h1{padding: 0; margin: 0 0 30px}
.team-profile h2{color: #666 !important}

.staffFlex .view-article{text-align:right; display:block; padding-top:20px}
.staffPhoto{max-width:40%; float:right; margin:0 0px 30px 30px}
.staffPhoto img{max-width:100%; width:100%; height:auto; border-radius:4px; }

.faqs{position: relative}
.faqs h2{border-top:1px solid #ccc; padding-top:15px; padding-left: 50px; position: relative; font-size:1.4rem}
.faqs h2:first-of-type{border:0px}
.faqs h2 i{color:var(--primary); position: absolute; left:0; top:18px}
.faqs p{padding-left: 50px}

#cookie_hdr_showagain{display:none}
.cookie-notice-container a{color:#fff !important; text-decoration: underline}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrapper {
	max-width:1200px;
	width:95%;
	margin:0 auto;
	position:relative;
	padding: 0 10px 40px;
	transition:all 600ms ease-in-out
}

.sidebar-title {
    background: #0689ce;
    padding: 10px 15px;
    font-size: 16px;
    color: #fff;
    position: relative;
    margin-bottom: 22px;
    margin-top: 15px;
	border-radius:4px
}

.sidebar-title .fas {
    position: absolute;
    bottom: -24px;
    left: 30px;
    color: #0689ce;
    font-size: 42px;
    line-height: 42px;
}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {float:right;margin:5px 0 20px 20px;max-width:50%}
.alignright{border:5px solid #efefef}
.alignleft { float:left; margin:5px 20px 20px 0}
a img.alignright {float:right; margin:5px 0 20px 20px}
a img.alignnone {margin:5px 20px 20px 0;}
a img.alignleft {float:left;	margin:5px 20px 20px 0}
a img.aligncenter {	display:block;	margin-left:auto; margin-right:auto}
.wp-caption {background:#FFF; border:1px solid #F0F0F0; max-width:96%; padding:5px 3px 10px; text-align:center}
.wp-caption.alignnone {margin:5px 20px 20px 0}
.wp-caption.alignleft {margin:5px 20px 20px 0}
.wp-caption.alignright {margin:5px 0 20px 20px}
.wp-caption img {border:0 none; height:auto; margin:0; max-width:98.5%; padding:0; width:auto}
.wp-caption .wp-caption-text, .gallery-caption { font-size:11px;	line-height:17px; margin:0; padding:0 4px 5px;}


/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a, a:visited {text-decoration:underline}
	a[href]:after {content:" (" attr(href) ")";}
	abbr[title]:after {content:" (" attr(title) ")";}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {content:""}
	pre,blockquote {border:1px solid #999; page-break-inside:avoid}
	thead {display:table-header-group}
	tr,img {page-break-inside:avoid}
	img {max-width:100% !important}
	@page {
		margin:0.5cm;
	}
	p,	h2,	h3 {orphans:3; widows:3}
	h2,	h3 {page-break-after:avoid;}
}



.pad10{padding: 10px}
.pad20{padding: 20px}
.center{text-align: center}
.boxed{border: 1px solid #dedede; padding: 20px; margin: 0 0 20px; min-height: 300px}
.boxed h2{padding: 0px; margin: 0px}
.boxed .alignleft, .boxed .alignright{border-radius:200px; background-color:#8bc6fe}

.greypanel{background: var(--willow); border-radius:10px; padding:30px; margin: 40px 0; border:4px solid #fff; clear: both; overflow: hidden}
.greypanel h2{padding-top: 0px; margin-top: 0px}
.greypanel h3{padding-top: 0px; margin-top: 0px}
.greypanel img{max-width: 25%; height: auto; border-radius:10px}

.googlemap{width:100%; height: 250px; border:10px solid #fff}
.greybox{background: var(--pale); margin: 0 0 20px; padding:30px}
.greybox h2{padding: 0px; margin: 0px}
.errorfield{border:1px solid red !important; background-color: lightpink !important}

.fixwidth{max-width: 1200px; width: 98%; margin: 0 auto; position: relative; padding: 0 10px}
.fixwidth p{line-height: 1.6}

#logo{position: absolute; top:-33px; left:10px; width:100vw; max-width:100px; transition:all 300ms ease}

.post-edit-link{max-width:1200px; padding: 10px; margin: 0 auto; display: block}
.sfsi_Sicons{color: #27588d; font-size:12px; border-top:1px dashed #999; padding-top: 10px; margin-top: 10px}

.blogroll > article{clear: left; margin: 0 0 15px; background: #fff !important; padding: 10px !important; display: flex; justify-content: space-between; align-items: stretch; column-gap: 20px}
.blogroll > article > div{width:100%}
.blogroll > article > div:first-of-type{max-width: 120px}
.blogroll > article > div > a:first-of-type img{object-fit:contain; width:100%; height: 100%; object-position: center; border-radius:15px}
.blogroll > article h2{margin: 0; padding: 0; font-size:1.2rem}
.blogroll .date{font-size: 0.8rem; padding: 0; margin: 0}
.blogroll .blog-excerpt{font-size: 1rem}
.blogroll .read-more{font-size:0.9rem; padding: 5px 0 0}

.author, .comments{display: none}
.date{color:#B1B1B1}
.videoWrapper {position: relative; padding-bottom: 51%; padding-top: 25px; height: 0;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%}

#carouselOuter{padding-bottom:40%; overflow: hidden; background-color: #fff; position: relative;}
#carousel{width:100%; height: 100%; position: absolute; left: 0px; top:0px}
#carousel > div{position: absolute; left:0px; top:0px; width:100%; height: 100%; background-position: center; background-size: cover; display:none}
#carousel > div:first-of-type{display:block}

.flex{display:-webkit-flex; display:flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center}
.flex > div{-webkit-flex-grow:1; flex-grow:1}

/* Nav */
.nav{z-index: 200; margin: 0 0 0 auto; font-size:0.9rem; font-weight: 600; font-family: var(--font2)}
.nav ul{list-style:none; padding:0px; margin:0px; text-align: right}
.nav > ul > li{display:inline-block; position: relative; padding: 0 0 0 20px}
.nav > ul > li > a{display:block; padding:10px 0px 6px; color: var(--primary) !important; text-transform: uppercase}
.nav > ul > li > a{transition: all 300ms; border-bottom:4px solid transparent}
.nav > ul > li > a:hover{border-bottom:4px solid var(--primary)}

.nav > ul > li:last-of-type a{background: var(--secondary); color: #fff !important; padding-left: 15px; padding-right: 15px; text-shadow:1px 1px 2px rgb(0,0,0,0.3)}
.nav > ul > li:last-of-type a:hover{background: var(--primary); color: #fff !important}

/* Sub nav */
.nav .sub-menu{position: absolute; top:31px; left:20px; list-style:none; padding:53px 0 0 !important; margin:0px; width:100%; min-width: 220px; display:none; z-index: 200; box-sizing: border-box; text-transform: uppercase}
.nav .sub-menu > li{display: block; padding:0px; margin: 0px; width:100%}
.nav .sub-menu > li a{display: block; padding: 10px; background-color: #fff; color:var(--primary); box-sizing: border-box; border-bottom:1px solid rgb(0,0,0,0.2); width:100%; text-align: left}
.nav .sub-menu > li a:hover{background-color:var(--primary); color: #fff !important}

.nav > ul > li > a.active{border-bottom:3px solid var(--primary)}
.nav > ul > li:last-of-type a.active{background-color: var(--secondary); color: #fff; border-color:var(--secondary)}

.nav > ul > li > a.active{border-bottom:3px solid var(--primary)}

#mobnav .sub-menu{display: none; margin-bottom: 15px}
#mobnav .sub-menu li{padding-left: 30px}
#mobnav .sub-menu a{padding: 0 0 0 30px !important}
#mobnav .sub-menu a:hover{background-color: transparent !important; color: #fff}
#mobnav .sub-menu a::before{top:18px}

#mobNavButton{width:36px; height: 30px; position: absolute; right:20px; top:30px; font-size:30px; line-height: 20px; color: var(--primary); padding: 3px 4px 4px; display: none; text-align: center; border-radius:2px; cursor:pointer; transition: all 300ms ease}
#mobNavButton > div{border:1px solid var(--primary); margin: 5px 0}
#mobNavButton > div:last-of-type{max-width:90%}

#mobNavButton.shifted{top:4px}

#mobnav{position:fixed; background-color:var(--willow); color: #fff; width:100%; height: 100vh; top:0px; right: calc(-60px - 100vw); z-index: 102; transition:all 300ms linear; opacity: 0}
#mobnav a{color: var(--primary); display: block; transition: all 300ms; box-sizing: border-box}
#mobnav a:hover{color:#fff; display: block; background-color: var(--secondary)}
#mobnav ul{list-style: none; padding: 0px; margin: 0px}
#mobnav > ul > li{padding:0px; margin: 0px; width:100%; display: block}
#mobnav > ul > li > a{border-bottom:1px solid rgb(255,255,255,0.3); width:100%; padding: 12px 10px 12px 20px; box-sizing: border-box}

#mobnav > ul > li > ul > li > a{ background-color: var(--willow); color:var(--primary); padding: 3px 5px 12px 40px}
#mobnav > ul > li > ul > li > a:hover{background-color: var(--secondary)}

#mobnav > ul > li > ul > li a:before {
  content: "";
  border-color: transparent var(--primary);
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.45em;
  display: block;
  height: 0;
  width: 0;
  left: -1em;
  top: 0.8em;
  color: var(--primary);
  position: relative;
}

#mobnav a.active{color: var(--primary); font-weight:700}
#mobnav .fa-home{cursor: pointer; transition:all 300ms ease-in-out; color: var(--primary); font-size:1.6rem}
#mobnav .fa-home:hover{color:var(--secondary)}
#mobnav .fa-times{position: absolute; top:10px; right: 16px; cursor: pointer; transition:all 300ms ease-in-out; color: var(--primary); font-size:2rem}
#mobnav .fa-times:hover{color:var(--secondary)}

#mobnav.active{right:0; opacity: 1}

.page > p:first-of-type{font-size:1.2em}

#topbutton{position: fixed; right:-50px; bottom:30px; width:40px; height: 40px; z-index: 100; cursor:pointer; border-radius:3px; display: block; color: var(--primary); transition:all 1000ms ease-in-out}
#topbutton:hover{opacity: 0.6}
#topbutton .fas{font-size: 30px; margin: 4px 0 0 10px; color: var(--secondary)}
#topbutton.active{right:10px}


.blackbar{ background-color: var(--primary); color:#fff; text-align: center; transition: all 300ms; display: flex; justify-content: center; align-items: center; padding: 8px}
.blackbar i{color: var(--primary)}

.blackFlex{width:100%; max-width:1600px; margin: 0 30px; font-size:0.8rem; line-height: 1; display:flex; align-items: center; justify-content: flex-end}
.blackFlex > div{width:100%; text-align: right}
.blackFlex a{color: #fff}
.blackFlex > div:first-of-type{text-align: right}
.blackFlex span{cursor:pointer}




.bluebar{height: 120px; position: relative; z-index: 100; transition: all 500ms ease; background-color: var(--willow)}
.bluebar a{text-decoration: none}
.bluebar a:hover{color:var(--willow); color: red}

.blueFlex{max-width:1600px; margin: 0 auto; width:100%; padding: 10px 30px 0; display:flex; justify-content:space-between; align-items: flex-start}
.blueFlex > div{position: relative}
.blueFlex > div:first-of-type{max-width:20px; padding: 0px 10px}

.blueFlex > div:last-of-type{text-align: right; padding-top: 26px}

.socials{margin-top: 2px}
.socials a{width:35px; height:25px; border-radius:50px; display: inline-block; text-align: center}
.socials a:hover{color:var(--willow)}
.socials i{color: #fff}
.socials i:hover{color: var(--willow)}
.socials .fab{display: block; text-align: center; padding-top:7px; transition: all 300ms;}



.sjb-filters{display:none}
.sjb-page{background-color: transparent}
.sjb-page h1{padding: 40px 0 20px; font-size: 46px; color: var(--primary); font-family: 'Kanit', sans-serif; font-weight:bold}
.sjb-page .job-date{display:none}
.sjb-archive-page{padding-top: 0px}
.sjb-archive-page h3{display:none}
.sjb-page .sjb-detail{margin-top: 0px}
.sjb-page .list-data{background-color: #fff; border-radius:5px}
.sjb-listing{padding-bottom: 100px}

.hero{background: #f8f8f8; aspect-ratio:16/6; position: relative; transition: all 600ms ease-in-out; width:100%}
.hero img{object-fit: cover; object-position: center; width:100%; height: 100%}




.contentFlex{display:-webkit-flex; display:flex; -webkit-align-items: flex-start; -webkit-align-items: center;  align-items: flex-start}
.contentFlex > div{padding: 15px}
.contentFlex > div:first-of-type{padding-top: 5px}
.contentFlex > div:last-of-type{padding-top: 20px; margin-top: 30px; background-color: #f5f5f5; border:1px solid #dedede; width:100%; min-width:370px; max-width:370px}


.footer{min-height: 400px; background-color: #27588d; margin: 0px; border:1px solid #27588d}

.servFlex{display:-webkit-flex; display:flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items: flex-start; align-items: flex-start; margin: 10px 0}
.servFlex > div{}
.servFlex > div:first-of-type{min-width:110px; max-width:110px; background-color: var(--primary); border-radius:4px; padding:15px}
.servFlex > div:last-of-type{padding: 0px 10px; font-size:16px; line-height: 18px}
.servFlex > div:last-of-type a{display:block; padding: 5px 0 0}

.clickable{background-image: url(../../../images/clicker.png); background-repeat: no-repeat; background-position: center right 15px; background-size: 30px; cursor:pointer; transition: all 0.2s ease}
.clickable:hover{transform: scale(0.98); opacity: 0.9}

.chkFlex{-webkit-align-items: flex-start; align-items: flex-start}
.chkFlex > div{text-align: left; margin: 10px 0}
.chkFlex > div:first-of-type{min-width:25px; max-width:25px}

.sidebar-menu{list-style: none; padding: 0px; margin: 0px}
.sidebar-menu li{padding: 3px 5px 3px 5px}
.sidebar-menu li .fas{margin-right: 10px}

.footerFlex{max-width: 1600px; margin: 0 auto}

.footerFlex > div:first-of-type{max-width: 300px; padding-left: 30px}
.footerFlex > div:last-of-type{max-width: 200px; padding-right: 30px}
.footerFlex ul{list-style:none; padding: 0px; margin: 0px}
.footerFlex a{color: #fff; padding: 5px 0;transition: all 300ms;}
.footerFlex a:hover{color:var(--secondary)}
.footerFlex h3{border-bottom:2px solid var(--secondary); font-size:16px; color: #fff; margin: 0 0 15px; padding: 0 0 15px; display: block}

.footer .socials{margin: 15px 0 0 50px}
.footer .socials a{display:inline-block}
.footer .socials a .fab{font-size:16px !important; padding-top: 2px !important}
.footer .socials a:hover{ background-color: #0689ce; color: #fff}

#footerSupport{
    text-align: center;
    background-color: rgba(0, 0, 0, 0.14);
    padding: 15px 25px;
    border: 1px solid rgba(255, 255, 255, 0.14);
	color:#fff; 
	font-size:12px;
	font-weight:700;
	max-width:1200px; 
	margin: 20px auto
}
#footerSupport a{color: #fff; text-decoration: underline}

#subfooter{background-color:#000; color:#fff; padding: 10px; margin:0px; display: block}
#subfooter .flex{max-width: 1200px; margin: 0 auto}
#subfooter .flex div{width:33%; font-size: 14px}
#subfooter .flex div:nth-of-type(2){text-align: center}
#subfooter .flex div:nth-of-type(3){text-align: right}

#logoTicker{height:140px; width:100%; overflow: hidden; position: relative}
#logoTicker > div{height:140px; position: absolute; top:0px; left:0px}
#logoTicker > div > div{min-width:200px; height:140px; margin:0 3px; background-size: contain; background-position: center; background-repeat: no-repeat}

.blogTeaser{background-color: var(--primary); width: 100%; padding: 35px 0; margin:60px 0 0; display: block; border-radius:15px; background-image: url("../img/panel-bg-green.jpg"); background-position: center; background-size: cover}
.blogTeaser h2{max-width:1200px; margin:0 auto 30px; color:#fff; text-align:center; font-size:3rem}
.blogTeaser .callToAction{border-color:#fff !important; color:#fff !important}
.blogTeaser .callToAction:hover{ background-color: #fff; color: var(--primary) !important}
.blogTeaser h3{font-size:1.2rem; border-bottom:3px solid var(--willow)}

.blogFlex{display:flex; flex-direction:row; justify-content: center; align-items: stretch; max-width:1200px; margin:0 auto; column-gap: 15px}
.blogFlex > div{width:100%; max-width: 300px; border-radius:3px; background-color:#fff; padding:15px}
.blogFlex > div > div:first-of-type{width:100%; aspect-ratio:1/1}
.blogFlex strong{color:#333; margin:20px 0 0px; padding:0px; font-size:22px; display:block}
.blogFlex .readmore{ text-align:right; display:block}

.blog-flex-thumb{aspect-ratio:4/3; display: block}
.blog-flex-thumb img{object-fit: cover; object-position: center; width:100%; height: 100%; display: block}

#story{position: absolute; width:100%; max-width: 100%; color:#b80303 !important; text-align: center; z-index: 101; font-size: 32px; font-weight: 700; padding: 100px 10px 0; text-shadow: 2px 2px 4px #fff; display:none}
#story span{display:block; margin: 20px auto; border:2px solid #fff; background-color: #27598c; padding: 10px; border-radius:5px; max-width: 150px; color: #fff; font-size: 16px; text-shadow: 1px 1px 3px #000}
#story a{color:#b80303}

.sidebar-title{cursor:pointer}
#enquiryform{max-width: 100%; display: none}
#enquiryform input, #enquiryform select, #enquiryform textarea{max-width: 100%}


#pagetitle{position:absolute; top:20px; left:120px; font-size:40px; line-height:normal; display:flex; transition:all 300ms ease; z-index: 210; color:var(--primary); font-familt:var(--font2)}
#pagetitle > div{padding-right:5px}
#pagetitle a{color:var(--primary)}

.callToAction{border:4px solid var(--primary); border-top-right-radius: var(--button-radius); border-bottom-right-radius: var(--button-radius); border-top-left-radius: var(--button-radius); padding: 10px 20px 8px; text-transform: uppercase; color: #333; transition:all 400ms ease; margin: 20px auto; display: inline-block; font-weight:700}
.callToAction:hover{color:#fff; background-color: var(--primary)}


.enqFlex{align-items:stretch}
.enqFlex > div{width:50%; box-sizing: border-box}
.enqFlex > div:last-of-type{border-radius: 5px}
.enqFlex iframe{max-width:100% !important}


#mapframe{max-width:96%; margin-top:20px}

textarea[name=your-message]{max-height:100px}

.smalltext{font-size:0.8em}

.blogroll article{background-color:#fff; border-radius:10px; padding:15px}
.blogroll article:nth-of-type(even){background-color: var(--pale)}
.blogroll .post-edit-link{opacity:0.5}

.testimonialFlex{flex-wrap:wrap; align-items:stretch}
.testimonialFlex > div{max-width:33%; width:100%; padding:20px; border-radius:10px; display: flex; justify-content: center; align-items: center}
.testimonialFlex > div:nth-of-type(even){background-color:var(--primary); color:#fff}
.testimonialFlex > div:nth-of-type(odd){background-color:#efefef}

.activityFlex{flex-wrap: wrap}
.activityFlex > div{width:100%; max-width: 48%; aspect-ratio: 4/3; text-align:center; padding:0 0 40px; font-weight:bold; font-size:2rem}
.activityFlex img{object-fit: cover; object-position: center; width:100%; height:100%; border-radius:10px}

.wpcf7-submit{background-color: var(--primary); color:#fff; border:0px; display: inline-block; padding: 15px 40px}

.jobs-list{display:flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; column-gap: 15px; grid-row-gap: 15px}
.jobs-list > div{border:2px solid var(--secondary); padding: 15px; margin: 0 0 15px; width:100%; max-width: 300px}
.jobs-list .button{padding: 5px 30px}
.jobs-list h2{font-size:1.4rem; padding: 0; margin: 0}

.job-list-params{padding: 15px 0}
.job-list-params p{padding: 0; margin: 0}

.job-params{background: var(--pale); padding: 15px 30px; border-radius: 15px}
.job-params h2{margin: 0 !important; padding: 3px 0 !important; font-size:1.4rem}
.job-params h2 span{color: #000; display: inline-block; min-width:100px}


.type-post .date{padding:10px 0}



@media only screen and (max-width:1200px) {
	.nav > ul{display:none}
	#mobNavButton{display:block}
}

@media only screen and (min-width:1200px) {
	#carouselOuter{padding-bottom:0px; height: 500px}
	
}
@media only screen and (min-width:999px) {

}
@media only screen and (max-width:999px) {
	.carouselLinksFlex{-webkit-flex-direction: column; flex-direction: column}
	.carouselLinksFlex > div{min-width:90%; max-width:90%; box-shadow:0px 0px 10px #000; margin-bottom: 10px}
	.carouselLinksFlex > div > a{padding: 10px; background-size: 34px; background-position: center left 10px}
	#strapline h1{font-size:50px}
	#strapline h2{font-size:20px; padding-top:10px}
	.masthead-video{aspect-ratio:16/7}
	.enqFlex{flex-direction:column}
	.enqFlex > div{width:100%; max-width:100% !important}
	.enqFlex > div iframe{min-width:100% !important}
}
@media only screen and (max-width:899px) {
	.footerFlex{flex-direction: column; max-width: 100%; margin: 30px}
	.footerFlex > div{width:100%; max-width: 100% !important; min-width:100% !important; padding: 15px 0 !important; text-align: left !important}
	.footer-qcq-logo-wrap{text-align: left}
	.footerFlex h3{padding-bottom: 10px; margin-bottom: 10px}
	.footerFlex ul a{padding: 2px 0}
}
@media only screen and (max-width:799px) {
	.contentFlex{flex-direction: column}
	.contentFlex > div{width:100% !important; max-width:100% !important; min-width: 100% !important; padding: 20px !important; margin: 0px !important}
	
	.vidPanel .flex{flex-direction: column}
	.vidPanel .flex > div{width:100% !important; min-width:100% !important; max-width:100% !important}
	.vidPanel .flex > div:first-of-type{text-align: center}
	.vidPanel iframe{margin: 0 auto}
	.vidPanel{background-image: none}
	.blogFlex{flex-direction:column}
	.blogFlex > div{max-width:100%; margin:0 0 30px;padding:20px}
	.blogTeaser{text-align:center; padding:10px 0}
	.blogTeaser h2{margin:0px 0px 13px}
	
	.wrapper{padding:0px !important; margin:0px; width:100%; max-width:100%}
	.staffFlex > div{min-width:50%; max-width:50%; margin: 15px auto}
	.masthead-video{aspect-ratio:16/9}
	.masthead-content h1 {font-size: 2.5rem;}
	
	.photo-text-block, .block-order-left{flex-direction: column !important}
	.photo-text-block > div{max-width: 100% !important}
	.text-side{border-radius:0; }
	.photo-side{border-radius:10px}
	.photo-text-block .text-side > div{padding-left: 0 !important; padding-right: 0 !important}
	.blogroll h1{padding: 30px !important}
	.type-post h1{padding: 0 0 30px!important}
}

@media only screen and (min-width:599px) {
	.fixedNav{position: fixed !important; top:0px; left:0px; width:100%; z-index: 200; height: 66px; background-color: #fff; box-shadow:0px 1px 10px rgb(0,0,0,0.2)}
	.fixedNav .blueFlex > div:last-of-type{padding-top: 0px !important}
	.fixedNav #logo{max-width:65px; top:-12px}
	.fixedNav #pagetitle{top:2px; left:84px; font-size:30px}
}

@media only screen and (max-width:599px){
	.masthead-video {aspect-ratio: 4/3 !important}
	h1{font-size:1.6rem; margin: 0; padding: 30px}

	section > h1{padding: 30px}
	h2{font-size: 1.4rem}
	.hero{aspect-ratio:5/3}
	.bluebar{max-height:70px}
	.blueFlex{padding: 0}
	#pagetitle{top:16px; left:84px; font-size:1.5rem}
	#logo{top:-5px; width:60px}
	#mobNavButton{ top:18px}
	#mobnav{width:100%; max-width:100%; height: 100%}
	.staffFlex > div{min-width:300px; max-width:300px}
	.staffPhoto{max-width:100%; float:none; margin:0px}
	.testimonialFlex > div{max-width:100%; width:100%; margin:10px 0}
	#strapline h1{font-size:40px}
	#strapline h2{font-size:20px; padding-top:10px}
	.alignright{float:none; max-width:100%; min-width:100%; margin: 20px 0}
	.wp-post-image{float:none; display: block; clear: both}
	.blogroll > article{box-sizing: border-box}
	.blogroll > article > a:first-of-type{float:none; clear: both; width:92%; height: auto}
	.cqcBadge{max-width: 45%}
	.activityFlex > div{max-width:100% !important; background-position: center}

	.faqs h2{padding-left: 30px}
	.blackbar{display: none}
	.masthead-content h1 {font-size: 2rem}
	.masthead-content p{font-size: 1.1rem; line-height: 1.4}

	.fixwidth{padding: 0}
	.greypanel{padding: 20px 15px}

	.footer-qcq-logo-wrap{text-align: center}
	.faqs p{padding-left: 30px}
	.team-profile{flex-direction: column; max-width: 320px; margin: 0 auto}

	.subfootflex{flex-direction: column}
	.subfootflex > div{text-align: center !important; padding: 10px 0 !important; max-width:96% !important; margin: 0 auto}
	
	.list-data{box-sizing: border-box; min-width:100%; max-width: 100%; text-align: center; background: pink !important}
	.list-data > div{margin:15px auto !important; box-sizing: border-box; max-width: 320px !important}
	
	.job-vacancy h1{padding: 0 0 15px; margin-bottom: 15px}
	
	.type-post .date{padding:10px 0; text-align: center}
	
	.job-params{padding: 15px, 5px}
	.job-params h2{font-size:1.2rem}
}

@media only screen and (max-width:450px){
	#strapline h1{font-size:26px; left:10px}
	#strapline h2{font-size:18px; left:10px}
	.activityFlex > div{width:100%}
	.blogroll article img{min-width:100%; max-width:100%; height:auto; float:none}
}