html{ max-width: 100%; overflow-x: hidden;}
body, html{width:100%; height:100%; margin: 0px; font-family: 'Open Sans', sans-serif; font-size:1rem}
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: "Poppins", sans-serif; font-weight:normal; line-height: 1.2}
h1{font-size: 3rem; color: var(--purple)}
h2{font-size: 2rem; color:var(--blue)}
h3{font-size: 1.8rem; color:var(--blue); font-weight:normal}
h4{font-size: 1.4rem; color:var(--pink)}

hr{border:0; border-bottom:3px solid var(--gold); margin: 40px 0 30px}

.pagination{ padding: 0 30px 30px}

.center{text-align: center}
.bold{font-weight:700}
.button{padding: 15px 25px; text-align: center; display: inline-block; transition:all 300ms ease; cursor:pointer; background-image: url("../img/button-arrow.webp") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: right center !important; background-color: var(--pink); color: #fff !important}
.button:hover{background-color: var(--gold)}

.smallbutton{padding: 6px 20px; border-radius:15px; font-size:0.9rem; line-height: 1}
.smallbutton::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0da";
  margin-left: 0.3em;
  display: inline-block;
}

.breadcrumb-wrap{position: relative; max-width: 1260px; margin: 0 auto; z-index: 5; padding: 0 30px 15px}
.breadcrumbs{list-style: none; padding: 0; font-size:0.9rem}
.breadcrumbs li{display: inline-block; padding: 0; margin: 0}
.breadcrumbs a{color: var(--blue)}
.breadcrumbs li:not(:last-of-type) a::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Solid weight */
    content: "\f101"; /* Unicode for fa-angle-double-right */
    margin: 0 6px 0 12px;
	color: var(--pink)
}

.first-para{font-size:1.2rem; font-weight:500}
.review-more-button-wrap{padding:15px 10px 0; text-align: center}
.more-button{color: #fff !important; transition:all 300ms ease}
.more-button:hover{color:var(--grey) !important}



.nav{margin: 0 15px 0 0; font-family: "Poppins", sans-serif; font-weight:normal}
.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; color: #fff}
.nav a:hover{color: var(--gold) !important}

#logo-strip .sub-menu{z-index: 101;  position: absolute; top:0; left:0px; display: none;  list-style: none; margin: 57px 0 0; padding: 0px; background-color: var(--blue) !important; border:1px solid #fff}
#logo-strip .sub-menu > li{margin: 0px; padding: 0; min-width:220px;}
#logo-strip .sub-menu a{display: block; padding: 9px 12px; text-align: left; color: #fff; font-size:16px !important}
#logo-strip .sub-menu a:hover{color: #fff !important; background-color: var(--pink)}


#mobnav{position: fixed; height:100vh; overflow: auto; top:0px; right:-500px; width:100%; max-width:400px; z-index: 10; background-color: var(--pink); transition:all 600ms ease; font-size:18px; color: #fff}
#mobnav ul{list-style: none; padding: 0px; margin: 30px}
#mobnav li{padding: 0px; margin: 0px}
#mobnav a{display:block; color: #fff !important; 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/submenu-bullet.webp"); background-repeat: no-repeat}
#mobnav a:hover{color:var(--grey) !important}
#mobnav i{position: absolute; top:14px; right:14px; color:#fff; font-size:30px; cursor:pointer}
#mobnav i:hover{color:var(--grey)}
#mobnav.active{right:0px}

#mobnav .sub-menu{display: none}
#mobnav .sub-menu a{border:0; padding: 0 0 15px 10px; background-image: none}
#mobnav .sub-menu.active{display: block; padding: 0}

#mobnavbutton{width:80px; min-width:80px; height: 80px; padding: 15px; background-color: var(--pink); cursor: pointer; display: none; justify-content: center; align-items: center}
#mobnavbutton > div{width:74%}
#mobnavbutton > div > div{height:6px; width:100%; background: #fff; margin:5px 0; transition:all 300ms ease}
#mobnavbutton:hover > div > div{background-color: var(--grey)}

.pagesection{margin: 0 auto}
#content > p:first-of-type{font-size:1.5em}

.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}

.mask{z-index: 3}
.mask > div{ 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/hero-mask.webp"); background-position: bottom center; background-size: 100%}

.revslide {max-height: 380px; overflow: auto; font-size:16px; margin: 0}		
.review-logo{position: absolute; bottom:25px; left:30px; max-width: 150px; aspect-ratio:16/6}
.review-logo img{object-fit: contain; width:100%; height: 100%; object-position: left}

.cookieadmin_re_consent{background: var(--pink)}

.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:var(--grad-blue); background-image:url("../img/footer-bg.webp"); background-size: cover; background-position: center; color:#fff; 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}
.footerinner a{color: #fff}
.footerinner a:hover{color: var(--gold)}

.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}
.subfooter a{color: #fff}
.subfooter a:hover{color: var(--gold)}

.move{transform: translate(0px, 50px); opacity:0}
.socials img{transition:all 200ms ease}
.socials img:hover{transform:scale(0.9)}
.newsthumb{max-width: 40%; float:right; margin: 10px 0 30px 30px; border-radius:20px}


.comments{display: none}
.page-numbers{border:1px solid #ccc; padding: 0 5px; border-radius:3px; 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)}



@media only screen and (max-width: 1570px) {
	#mobnavbutton{display: flex}
    .nav{display:none}
}
@media only screen and (max-width: 1100px) {
    .paginator{display:none}
    .strapline{padding: 10px 40px}
}
@media only screen and (max-width: 800px) {
    
    .footerinner{flex-direction: column; max-width: 100%; display: block}
	.footerinner > div:first-of-type{display: none}
    .footerinner > div{width:100%; max-width:100% !important; text-align: left !important; padding: 0}
    .footerinner > div:last-of-type{text-align: center !important}

    footer{background-size: cover}
    .subfooter{flex-direction: column-reverse}
    .subfooter > div{max-width:100%; text-align:center !important}
    .subfooter > div:first-of-type li{display: block !important; padding: 0 0 10px !important}
    .subfooter > div:last-of-type{padding: 0 0 40px}
	#logo-strip img{height: inherit; max-width:100%}
    .alignright, .alignleft{max-width: 100%; height: auto; float: none; clear: both; margin: 0px 0px 30px; display: block}
}
@media only screen and (max-width: 600px) {
    .newsthumb{max-width: 100%; float:none; margin: 30px auto; border-radius:20px}
    .formButtonWrap{text-align: center; padding-top: 20px}
	
	footer {padding-bottom: 60px}
}
@media only screen and (max-width: 500px) {
    #logo{width:240px; background-size: contain}
}