/*
St. Marks Studios - updated 24/01/24

*/

@charset "utf-8";
 
/*---------------------------------------------------------------------------Fonts*/

/* Reset*/ 
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin:0;
  padding:0;
 }
/*Css Variables*/
:root {
	
	--brand-color: #FF6113; /*Brand Colour*/
    
    --site-black : #303439; /*#262A2E or #1a1e22*/
    --site-grey: #48586A;
    --site-mid-grey:#7A8391;
    --site-light-grey:#C0C8D2; 
    --site-border:#E3EFF5;

    --site-highlight: #C3DFE0;
    --site-green: #65AA5E;
    --site-red: #A7252C;
    
    --transition: all ease-in-out 0.4s;
}


/*WP Logged in Admin Bar */
body.logged-in.admin-bar{
	padding-top:0;
	margin-top: -32px;
}
body.logged-in.admin-bar #wpadminbar{
	background: rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(255,255,255,0.13);
}
body.logged-in.admin-bar #wpadminbar:hover{
	background: #131313;
}


/*---------------------------------------------------------------------------Structure*/
html {
  scroll-behavior: smooth;
}
body{
	color:var(--site-black);
	font-family: "industry-inc-stencil", sans-serif;
	font-weight: 400;
    font-size: calc((1.22 - 1) * 1.2vw + 0.82rem);
    line-height: 1.6rem;
}  

/* -----------------------------------------------------------------------Responsive Typeography */
.h1,.h2,.h3,.h4,
h1,h2,h3,h4{
    font-family: "industry-inc-stencil";
    font-weight: 400;
    font-style: normal;
    margin: 0 0 1.4rem;
    text-transform:uppercase;
    line-height: 1.4rem;
}
.h4,.h5,.h6,
h4,h5,h6{
	font-weight: 400;
    line-height: 1.04rem;
}

h1, .h1{
    font-size: calc((4.4 - 1) * 1.2vw + 1rem);
    line-height: calc(1.0 * (1 + (1 - 5.0)/25));
    letter-spacing: -0.12rem;
}
h2, .h2 {
	font-size: calc((2.4 - 1) * 1.2vw + 1rem);
    line-height: calc(1.2 * (1 + (1 - 2.4)/25));
}

h3, .h3{
    font-size: calc((2.0 - 1) * 1.2vw + 1rem);
    line-height: calc(1.2 * (1 + (1 - 2.0)/25));
}

.widget-title,
h4, .h4{
	font-size: calc((1.16 - 1) * 1.2vw + 1rem);
    line-height: calc(1.2 * (1 + (1 - 1.16)/25));
}

h5,.h5 {
	font-size: 1.4rem;
    line-height: calc(1.2 * (1 + (1 - 1.4)/25));
    margin:0 0 1.4rem;
}
h6,.h6 {
	font-size: 1.2rem;
    line-height: calc(1.2 * (1 + (1 - 1.2)/25));
    margin:0 0 1.4rem;
    font-weight: 500;
}
p {
	font-size: 1.2rem;
    font-size: calc((1.22 - 1) * 1.2vw + 0.82rem);
    line-height: 1.46rem;
	margin:0 0 1.4rem;
}
#footer p,
#footer{
	
}

h1 strong,
h2 strong,
h3 strong{
    font-weight: 400;
}

/*---------------------------general items*/

a{
	color: inherit;
	text-decoration:none;
}
a:hover,
a:focus, button:focus {
	outline: none;
}
a:hover{
	color:var(--brand-color);
}
.articlePage p a,
.boxscreen .rte a,
.guidepage p a{
	color:var(--brand-color);
}

svg.icon {
	width: 40px;
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	margin:0;
	fill:currentColor;
}
svg.hidden{
	display: none;
}
img{
	display: inline-block;
	max-width:100%;
	border-radius: 0;
	font-size: 12px;
	color:var(--site-border);
}

#wrapper {
	width:100%;
	display:block; 
	margin: 0 auto; 
	position:relative;
	overflow: hidden;
}

#headerimg { 
	display:flex;
    align-items: center;
    justify-content: center;
	position:fixed;
	width:100%;
	height:88%;
	top:0;
	left:0;
	background:var(--site-black) url() center / cover no-repeat;
	z-index:-1;
    color: #fff;
}
.error404 #headerimg,
.home #headerimg{
    height: 100%;
}
/*#headerimg:before{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
    z-index: 1;
}*/
#headerimg::before{
    content:"";
    background:var(--site-black);
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    z-index: 100;
    opacity: 0.5;
    mix-blend-mode: multiply;
}
#headerimg .featimg{
    padding: 0;
}
#headerimg img{
    display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
     z-index:0;
    object-fit: cover;
}
#headerimg .txtbox{
    display: block;
    position: relative;
    z-index: 10;
}

.vimeo-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
   pointer-events: none;
   overflow: hidden;
    background: url() center / cover no-repeat;
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}



#content{
    display:block;
    padding:40px 0 100px;
    background:#fff;
    margin: calc(88vh - 130px) auto 0;
    min-height: 50vh;
}
.error404 #content, 
.home #content {
	margin:0;
	background: none;
	min-height: unset;
	padding: 0;    
}
.error404 #wrapper,
.home #wrapper{
    height:100vh;
    overflow: hidden;
    position: fixed;
    z-index: 10;
    top:0;
    left:0;
    width:100%;
}
.innerframe {
    width:calc(100vw - 80px);
	max-width:1620px;
	padding:0;
	display:block; 
	margin: 0 auto; 
	position:relative;
}
.innerframe.h1box {
	margin: -340px auto 60px;
	height: 300px;
	color: #fff;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	left: -5px;
    padding-bottom: 40px;
}
.error404  .innerframe.h1box,
.home .innerframe.h1box {
	text-align: center;
	justify-content: center;
	height: calc(100vh - 130px);
	position: absolute;
	top: 130px;
	left: 0;
    right:0;
	margin: 0 auto;
	align-items: center;
}
.h1box h1{
    display: block;
    width:100%;
    max-width:1100px;
    margin: 0;
    animation-name: fadeUpSlow;
    animation-duration: 1.2s;
}

.h1box h1 span {
	font-size: 1.8rem;
	line-height: 1.8rem;
	display: block;
	margin: 10px 0 0;
	font-family: 'Poppins';
	font-weight: 600;
	letter-spacing: 0.12rem;
	padding-left: 5px;
}

.home .h1box h1{
	font-size: calc((5.0 - 1) * 1.2vw + 1rem);
	line-height: calc(1.0 * (1 + (1 - 4.8)/25));
}
.home .h1box h1 span {
	font-size: 2.8rem;
	line-height: 1.8rem;
	display: block;
	margin: 0 0 20px 0;
    font-family: "industry-inc-stencil";
    font-weight: 400;
}
.home .h1box span:last-child{
    margin:10px 0 0;
}

#footer{
	display:block;
	padding:20vh 0 40px;
	min-height:60px;
	background:#fff;
	position: relative;
    color: var(--site-mid-grey);
    text-align: center;
}
.error404 #footer,
.home #footer {
	display: none;
}
	
#footer #dd_tag {
	display:block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 8px;
	line-height: 30px;
	text-transform: uppercase;
	text-align: center;
    margin: 20px 0  0;
}

#footer p {
	font-size:0.85rem;
}


#footer .footer-menu{
    display: block;
    text-align: center;
}
#footer .footer-menu li{
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
    border-right:1px solid #ccc;
}
#footer .footer-menu li:last-child{
    border:none;
}
#footer .footer-menu li a{
    display: block;
    font-size: 0.85rem;
    line-height: 1.0rem;
}
.social-icons{
    display: flex;
    margin: 0 0 20px;
}
#footer .social-icons{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 20px;
}
.rte .social-icons a,
.social-icons a{
    color: inherit;
    text-decoration: none;
    display:inline-block;
    padding: 0 20px 0 0;
    margin: 0;
}
#footer .social-icons a{
    padding: 0 10px;
}
.social-icons a:hover{
    color:var(--brand-color);
}
/*Tcs&Cs footer pages*/
#pg-298,
#pg-294,
#pg-296 {
	display: block;
	margin: 0 auto;
	max-width: 800px;
}
/*---------------------------Masthead*/
#masthead {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
    align-content: flex-end;
	position: relative;
	min-height: 60px;
	padding: 10px 0 0;
    color: #fff;
    height: 130px;

}
#masthead .innerframe {
	display: flex;
    justify-content:space-between;
    align-items: center;
}
/*#masthead.docked {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
}*/
#logo {
	width: 100px;
	height: 120px;
    top:10px;
}
#logo svg,
#logo img{
    display: block;
    width:100%;
    height: 100%;
    object-fit: contain;
}
/*---------------------------------------------------------------------------Navigation*/

#navframe {
	display:block;
	min-height:40px;
	/*background:rgba(255,255,255,0.4);*/
	/*position:absolute;
	top:0;
	right:0;
	left:0;
	z-index:9000;*/
}

/*Menu Icon*/
#menu_icon {
	position:absolute;
	top:30px;
	right:20px;
	z-index:5000;
	display:none;
	height:26px;
	width:40px;
	padding:0;	
}


.menu-icon span {
	position: absolute;
	height:2px;
	width: 100%;
    background: #fff;
	transition: all 250ms ease-in-out;
	transform: rotate(0deg);
}

.menu-icon span:nth-child(1) {
    top: 4px;
}

.menu-icon span:nth-child(2), 
.menu-icon span:nth-child(3) {
    top: 50%;
}
.menu-icon span:nth-child(4){
    width:60%;
    left:40%;
    bottom:2px;
}

#navframe ul.nav-menu{

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	list-style: none;
}
.nav-menu li{
	position: relative;
	display: block;
	padding: 0 20px;
}
.nav-menu > li{
	padding: 0 0 2px;
	margin: 0 15px;
}

.nav-menu > li:last-child{
	margin-right: 0;
}
.nav-menu li a {
	display: block;
	padding: 5px 0 5px;
	font-weight: 500;
    color: currentColor;
}
.nav-menu > li > a {
	font-size: 14px;
	font-weight: 500;
	border-bottom: 2px solid transparent;
	padding: 10px 0 10px;
}

.nav-menu > li > ul{
	display: none;
	position: absolute;
	top:100%;
	left:0;
	width:280px;
	padding: 40px 0 20px;
	background: #fff;
	border:1px solid #e6e5e6;
	margin-left: calc(50% - 140px);
}

.nav-menu > li > ul ul {
	display: none;
	padding-left: 20px;
	position: absolute;
	top: -21px;
	left: 100%;
	background: #fff;
	width: 280px;
	padding: 20px 0;
	border: 1px solid #e6e5e6;
	border-left-width:3px;
	margin-left:-2px;
}
/*.nav-menu .hasdrop > a{
	position: relative;
	padding-right: 25px;
}*/

.nav-menu li ul li{
	display:block;
	width:100%;
	padding: 0 20px;
	margin: 0 0 10px;
}

.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-page-ancestor > a,
.nav-menu li.current_page_item > a,
.nav-menu li.current_page_parent > a{
	border-color: #fff;
	
}

.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-page-ancestor > a{
	border-color:#fff;
}


/*------------------------------------------------------------  Form Elements */
textarea,
input[type="search"],
input[type="email"], 
input[type="tel"],
input[type="text"], 
input[type="password"],
input[type="button"], 
input[type="submit"],
select{

	padding:8px;
	color:#262A2E;
	display:block;
	width:100%;
	border:1px solid #e6e5e6;
	background:none;
	margin:0 0 8px 0;
	font-family:inherit;
    font-size: inherit;
	-webkit-appearance: none;
    border-radius: 0;
	height:45px;
    
}
input{
	padding:14px 8px;
}

input:focus, textarea:focus {
	background-color:#fff;
	color:#262A2E;
	outline:none;
}
select:focus {
	outline:none;
}
textarea{
	min-height: 200px;
}
input[type="button"], input[type="submit"] {
	-webkit-appearance: none;
	background: #A4AEB6;
	border:none;
	color: #fff;
	cursor: pointer;
}
::-moz-placeholder {
  opacity: 1;
}
button:hover,
input[type="button"]:hover, 
input[type="submit"]:hover{
	background-color: #566575;
}

/* Placeholder color for FORM */
::-webkit-input-placeholder {
color: #A5ADB6;
}
::-moz-placeholder {
  color: #A5ADB6;
}
:-ms-input-placeholder {
  color:#A5ADB6;

}
:-moz-placeholder {
  color: #A5ADB6;
}
label.hidden{
	display:none;
}
/*buttons*/
.rte .wp-block-button .wp-block-button__link, button, .button, .rte .button {
	background:var(--site-black);
    color: #fff;
	cursor: pointer;
	padding: 6px 25px;
	display: inline-block;
	text-align: center;
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.12rem;;
	position: relative;
	text-transform: uppercase;
	-webkit-transition: background ease-in-out 0.4s, color ease-in-out 0.3s;
	transition: background ease-in-out 0.4s, color ease-in-out 0.3s;
	border: none;
	border-radius:0;
	line-height: 1.8rem;
    min-width: 160px;
    text-decoration: none;
}
.rte .wp-block-button .wp-block-button__link:hover,
.button:hover {
	background:#566575;
	color:#fff;
    order:none;
}

.button.line {
	border:1px solid #fff;
	background:none;
}

.button.line:hover {
	background:#fff;
	color:#484d54;
}
.wpcf7-form input[type="submit"],
.rte .wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color), 
.rte .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
.button.line.black {
	color: var(--site-black);
    border:1px solid var(--site-black);
	background:none;
    padding:5px 25px;
}
.wpcf7-form input[type="submit"]:hover,
.rte .wp-block-button.is-style-outline .wp-block-button__link:hover,
.button.line.black:hover{
	border-color:#566575;
	background:#566575;
	color:#fff;
}
.wpcf7-form .gdpr-message{
    color:#48586A;
}
/* ------------------------------------------------ Responsive Picture Images and Video */

img { 
	display: inline-block;
  	vertical-align: middle;
}
.featimg,
picture,
.v_iframe {
    display: block;
	width:100%;
	max-width: 100%;
  position:relative;
  padding-top: 56%;
}

.featimg img,
picture img,
.v_iframe video,
.v_iframe iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.featimg img,
picture img,
.v_iframe video{
	object-fit: cover;
	object-position:center;
}

#headerimg .v_iframe {
	display: flex;
	min-width: 100%;
    height: 100%;
	/*height: 120%;
      top: 50%;
      transform: translateY(-50%);
    border:1px solid #fc0;*/
}
/*Video Iframes*/
.videobox {
    display:block;
    margin:0 auto;
    padding:0;
    max-width:1640px;
	background:url() center / cover no-repeat;
	
}

p.v_iframe{
	display: block;
}

.videobox .txtbox{
	padding: 30px 0 0;
}

.section.feature.videoplay,
.videoplay{
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	z-index: 500;
	color: #fff;
	background-color:#444853;
	opacity: 1;
	visibility: visible;
	transition: all 0.6s ease-out;
	overflow: hidden;
    background-size: cover;
}
.videoplay span{
	z-index: 10;
}
.videoplay span:before{
	content:"";
	display: block;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	background: rgba(0,0,0,0.13);
	z-index: -1;
}
/*.videoplay:hover{
	color: #FBAF3F;
}*/
.section.feature .featimg.hide,
.videoplay.hide{
	height: 0;
	/*opacity: 0;
	visibility: hidden;*/
	pointer-events: none;	
	animation-delay: 2s;
}
.map iframe{
    width:100%;
}
/*------------------404*/
.error404 #content {
    /*background:#0006 url('../img/headerimg.jpg') center  / cover no-repeat; 
	display: flex;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	color: #fff;*/
	
}


/*-------------------------------------RTE*/
.rte > .widewidth{
    max-width: 1080px;
}
.rte > .alignfull,
.rte > .fullwidth{
    max-width: 100%;
}

.rte .wp-block-heading.has-text-align-center{
    display: block;
    margin-left:auto;
    margin-right:auto;
    max-width:650px;
}
.rte p a{
	/*color: var(--brand-color);*/
	text-decoration: underline;
}

.rte ol,
.rte ul{
	
}
.rte ol li,
.rte ul li{
	margin-left:15px;
	padding-left:10px;
	margin-bottom: 10px;
    line-height: 1.4rem;
    text-align: left;
}

.rte ol + h2,
.rte ol + h3,
.rte ol + h4,
.rte ul + h2,
.rte ul + h3,
.rte ul + h4,
.rte p + h2,
.rte p + h3,
.rte p + h4{
     margin-top: 40px;
}

.rte p + h5,
.rte p + h6{
    margin-top: 30px;
}

.rte .wp-block-button{
    margin-bottom:25px;
}
.rte .wp-block-buttons + *{
    margin-top:3rem;
}


.rte .wp-block-media-text__media img,
.rte .wp-block-image img {
    max-width: 100%;
    height: auto !important;
}
.rte .wp-block-cover__inner-container {
	display: block;
	max-width: 850px;
}

.rte .wp-block-latest-posts,
.rte p{
	margin: 0 auto 20px;
    width:100%;
}
.rte figure{
	margin:0;
}
.rte figure img{
	height:auto;
}
.rte p + figure{
	margin: 30px auto;
}
/*--------------------------------------------------------------------------- Content Client */
.introbox{
    display: block;
    width:80%;
    max-width: 650px;
    margin: 0 0 100px;
}
.clientgrid{
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap:80px;
}
.clientbox{
    display: block;
}
.clientbox .details{
    display: block;
    margin:20px 0;
    text-align: center;
    padding:0 20px;
}
/*--------------------------------------------------------------------------- Flexible Content */
.boxFrame{
	display: flex;
	justify-content:center;
	flex-wrap: wrap;
	flex-direction: row;
	/*align-items: center;*/
}

.boxFrame.Right{
	flex-direction: row-reverse;
}
.boxFrame .txtbox {
	display: flex;
    flex-direction: column;
	justify-content: center;
	width: 34%;
	padding: 0 4% 0 0;
}
.boxFrame.twoColtext{
    justify-content: space-between;
}
.boxFrame.twoColtext .txtbox{
    display: block;
    width:calc(50% - 30px);
    padding: 0;
}
.boxFrame .txtbox:only-child{
	width:80%;
    max-width:800px;
}



.boxFrame .imgbox,
.boxFrame .videobox{
	width:66%;
}

.boxFrame .videobox:only-child{
	width:80%;
}
.boxFrame.Right .txtbox{
	padding: 0 0 0 4%;
}

.section{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width:100%;
	margin:120px 0;
	vertical-align: top;
	position: relative;
	transition: background ease-in-out 0.2s;
	/*overflow: hidden;*/
	scroll-snap-align: start;

}
.section:first-child{
    margin-top: 60px;
}
.section > div{
    width:100%;
}
.section.wideband{
	color: #fff;
    padding:80px 40px;
    background-size: cover;
    background-color: var(--site-black);
    background-position: center;
    position: relative;
    width:100vw;
    min-height: 90vh;
    left:50%;
    transform: translateX(-50%);
}
.section.imgbox.fixed{
    background-attachment: fixed;
}
.section.imgbox:before{
	content:"";
	display: block;
	position: absolute;
	z-index: 0;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	pointer-events: none;
	
}
.section.wideband .txt{
	position: relative;
	z-index: 10;
    display: block;
    max-width: 750px;
    margin: 0 auto;
}


.section.feature .featimg{
	position: absolute;
	top:0;
	left:0;
	z-index:0;
	height: 100%;
	width:100%;
	margin:0;
	background-color:#fff;
			transition:height 0.8s cubic-bezier(.65,0,0.2,1);
	-webkit-transition:height 0.8s cubic-bezier(.65,0,0.2,1);
}


.gallery-grid{
    display: grid;
    grid-template-columns:repeat(3,1fr);
    grid-gap:20px;
}
.gallery-grid .imgbox{
    display: block;
    position: relative;
}
.gallery-grid .imgbox img{
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    object-fit: cover;
    display: block;
}

.gallery-grid .imgbox:nth-child(5n + 2){
    grid-column:span 2;
    grid-row:span 2;
}
.gallery-grid .caption{
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    background: #0006;
    padding: 10px;
    color: #fff;
    font-size:0.8rem;
    line-height: 0.85rem;
    text-transform: uppercase;
    margin: 0;
}

/*--------------------------------------------------------------------------- Blog */
.postgrid{
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap:80px;
}
.post-item{
    display: block;
}
.post-item .details{
    display: block;
    margin:20px 0;
    text-align: center;
}
.post{
    display: block;
    max-width:800px;
    margin: 0 auto;
    
}
.post .entry{
    display: block;
    padding: 0 0 40px;
    border-bottom:1px solid var(--site-grey);
    margin-bottom: 10px;
}
/*--------------------------------------------------------------------------- xxx */
body #cookie-law-info-again{
    opacity: 0.4;
    right:20px !important;
    box-shadow:none !important;
    display: none !important;
}
/*--------------------------------------------------------------------------- xxx */

/*--------------------------------------------------------------------------- xxx */

/*--------------------------------------------------------------------------- xxx */

/*--------------------------------------------------------------------------- xxx */

/*--------------------------------------------------------------------------- xxx */



/*----------------------------------------------------------------------------------------------------------------------- Begin Responsive Queries*/
/* ----------------------------------------------------------------------- Min Withs Smallest to largest */
@media only screen and (min-width: 768px) {

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

}
@media only screen and (min-width: 1280px) {
    .nav-menu > li{
        padding: 0;
        margin: 0 0.8rem;
	}
	.nav-menu > li > a {
        text-transform: uppercase;
        font-size: 1.7rem;
        padding: 0;

    }
	.nav-menu > li.widenav{
		position: static;
	}
    .nav-menu li:hover > ul{
		display: block;
	}
	.nav-menu > li.widenav > ul {
		top: 68px;
		left: auto;
		width: 60vw;
		padding:30px 0;
		background: #fff;
		color: var(--site-black);
		border: none;
		margin: 0;
		right: -20px;
		min-height: 350px;
	}
	
	.nav-menu > li.widenav > ul:before{
		content:"";
		display: block;
		position: absolute;
		top:0;
		right:100%;
		width:40vw;
		height: 100%;
		background: #efefef url('../img/blog_featimg.jpg') center / cover no-repeat;
	}
	.nav-menu > li > ul{
		background:#fff;
		color: var(--site-black);
		border:none;
	}
	.nav-menu li ul li {
		width: 50%;
		padding: 0;
		margin: 0;
	}
	
	.nav-menu > li > ul > li {
		width: 100%;
		position: static;
		padding: 0;
	}
	.nav-menu > li > ul > li > a{
		padding: 5px 25px;
        font-size: 0.9rem;        
	}
	.nav-menu > li > ul ul {
		top: 0;
		left: auto;
		background: none;
		width: calc(100% - 40px);
		padding: 10px 0 10px 20%;
		border: none;
		border-top: 1px solid rgba(0,0,0,0.2);
		/*border-bottom: 1px solid rgba(0,0,0,0.2);*/
		right: auto;
		flex-wrap: wrap;
		height: 100%;
		flex-direction: row;
		align-content: flex-start;
		display: flex;
		position: relative;
		margin: 0 20px 10px;
	}
	.nav-menu > li > ul li:hover > ul {
		display: flex;
	}

	.nav-menu > li > ul ul li a{
		font-size: 13px;
		line-height: 18px;
		border-right:4px solid transparent;
	}

	.nav-menu li:hover > a{
        color: var(--brand-color);
    } 
    /*.nav-menu > li.hasdrop:hover > a{
        border-color:var(--brand-color);
    } */
    .nav-menu li.current_page_item > a, 
	.nav-menu > li.current-menu-item > a, 
    .nav-menu > li.current_page_parent > a, 
    .nav-menu > li.current-page-ancestor > a {
        /*color:var(--brand-color);
		border-color: var(--brand-color);*/
	}
    .tax-sector .nav-menu li.blog > a,
    .single-case-study .nav-menu li.blog > a{
        color: #fff;
        border-color:transparent;
    }
    .nav-menu > li.hasdrop > a::after {
        content: "\2022";
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        display: block;
        text-align: center;
         color:#C8CFD8; 
        z-index: 100;
    }
    .nav-menu > li.hasdrop:hover > a::after{
        color: var(--brand-color);
    }
}
@media only screen and (min-width: 1440px) {

}
@media only screen and (min-width: 1680px) {
    body,
    p {
       
        font-size: calc((1.12 - 1) * 1.2vw + 0.82rem);
       
    }
    h1, .h1 {
        font-size: calc((4.0 - 1) * 1.2vw + 1rem);
        line-height: calc(1.1 * (1 + (1 - 4.8)/25));
    }
    .boxFrame .videobox:only-child {
        width: 90%;
    }
}

/* ----------------------------------------------------------------------- MAX Withs Largest to smallest */

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

}
@media only screen and (max-width: 1439px) {
    .h1box h1 {
        max-width: 900px;
    }
}
@media only screen and (max-width: 1279px) {
    
    #masthead {
        min-height:unset; 
        height:unset;
        padding: 0;
    }
    .innerframe {
        width: calc(100% - 60px);
        padding: 0;
    }
    #masthead .innerframe{
        width:100%;
    }
    #content{
        padding-bottom: 60px;
    }
    #logo {
        position: absolute;
        top:15px;
        left:20px;
       z-index: 9999999999900;
        transition:all 0.8s cubic-bezier(.65,0,0.2,1);
	-webkit-transition:all 0.8s cubic-bezier(.65,0,0.2,1);
    }
    #wrapper.active #logo {
        position: fixed;
        /* top: 15px; */
        color: var(--site-black);
        width: 60px;
        height: 80px;
    }
    #menu_icon {
        top:20px;
    }

    
    /*main nav*/
    #wrapper.active {
        overflow: hidden;
        height: 100vh;
    }
	#menu_icon{
		display: block;
		z-index: 9200;
	}
    #wrapper.active #menu_icon{
        position: fixed;
    }
    #wrapper.active #menu_icon span{
        background: #454B53;
    }
    
    /*navigation*/
	#navframe{
		display: block;
		position: fixed;
		top:0;
		background:#fff;
		height: 100vh;
		width:100%;
		right:-101%;
			transition:right 0.8s cubic-bezier(.65,0,0.2,1);
	-webkit-transition:right 0.8s cubic-bezier(.65,0,0.2,1);
		z-index: 9100;
        overflow:hidden;
    }
    #navframe::before{
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        top:0;
        left:0;
        height:110px;
        background: inherit;
        z-index: 100;
        box-shadow: -2px 2px 6px #0003;
    }
	/*#navframe::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 70%;
        bottom: -10%;
        left: 30%;
        background: url("../img/StMarksStudios.svg") center / contain no-repeat;
        z-index: -1;
        opacity: 0.2;
         mix-blend-mode: multiply; 
    }*/
    #wrapper.active #navframe{
		right:0;
	}
       
    .menu-main-menu-container{
        display: block;
        height: 100%;
        width:100%;
        overflow: auto;
        padding: 160px 30px 100px;  
    }
    
    #navframe ul.nav-menu {
        display: block;
        height: auto;
        max-width: 450px;
        margin: 0 auto;
        padding-bottom: 50px;
    }
    
    .nav-menu  li{
		margin:0 0 1rem;
		width:100%;
		padding: 0;
	}
    .nav-menu > li{
        display: block;
        margin: 0 0 1rem;
    }
    .nav-menu > .hasdrop{
		position: relative;
	}
    
    .nav-menu > li.hasdrop .trigger {
        display: block;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 0;
        right:0;
        z-index: 100;
        background:url("../img/plus.svg") center / 16px auto no-repeat;
        cursor: pointer;
        border-left:1px solid #e6e5e6;
    }
    
    .nav-menu li a {
		font-size: 1.2rem;
		color:var(--site-black);
        text-transform: capitalize;
        /*border-left:4px solid rgba(255,255,255,0);*/
        border:none;
	}
    .nav-menu > li > a {
        font-size: 2.2rem;
        padding: 5px 0;
        line-height: 30px;
        min-height: 40px;
    }
	.nav-menu li.active  > a{
		color: var(--brand-color);
	}
		
	.nav-menu li ul {
		display: none;
		position: relative;
		top: auto;
		left: 0;
		width: 100%;
		background:none;
        border:none;
		border-top:1px solid #e6e5e6;
		border-bottom:1px solid #e6e5e6;
		margin: 0;
		padding: 20px 0;
	}
    
	.nav-menu li.active > ul{
		display: block;
	}

	.nav-menu .sub-menu .hasdrop > a::after {
		transform: initial;
		right:0;
	}
	
	.nav-menu > li > ul ul {
		display: block;
		padding: 10px 10px 10px 20px;
	}

    .nav-menu li.current_page_item > a,
    .nav-menu > li.current_page_parent > a, 
    .nav-menu li.current-menu-item > a, 
    .nav-menu > li.current-page-ancestor > a {
        color: var(--brand-color);
        border-color: var(--brand-color);
        
    }
    .tax-sector .nav-menu li.blog > a,
    .single-case-study .nav-menu li.blog > a{
        color: var(--site-black);
        border-color:transparent;
    }
    
    /*headerimg*/
    .h1box h1 {
        max-width:unset;
    }
    /*case-study-list*/
    .clientgrid {
        grid-gap: 30px;
    }
    /*case-study-list*/
    .single-case-study .introbox {
        width:100%;
        max-width:800px;
        margin: 0 auto 60px;
    }
    .section{
        margin: 80px 0;
    }
    .boxFrame.Right,
    .boxFrame.Left {
        flex-direction: column-reverse;
        align-items: center;
    }
    .boxFrame .videobox {
        width: 100%;
        max-width:800px;
        aspect-ratio: 4/2.5;
    }
    .boxFrame .imgbox {
        width: 100%;
        max-width:800px;
        aspect-ratio: 4/2.5;
    }
    .boxFrame .txtbox:only-child,
    .boxFrame .videobox:only-child{
        width:100%;
    }
    .boxFrame.Left .txtbox,
    .boxFrame.Right .txtbox{
        width:100%;
        max-width:800px;
        padding: 0;
        margin: 30px 0 0;
    }
    /*join-us*/
    .boxFrame.twoColtext {
        flex-direction: column;
    }
    .boxFrame.twoColtext .txtbox{
        width:100%;
    }
    .boxFrame.twoColtext .txtbox:last-child{
        margin-top: 40px;
    }
}
@media only screen and (max-width: 1023px) {
    body,
    p {
        font-size: calc((1.48 - 1) * 1.2vw + 0.82rem);
        line-height: 1.46rem;
        margin: 0 0 1.4rem;
    }
    h1, .h1 {
        font-size: calc((7.0 - 1) * 1.2vw + 1rem);
        line-height: calc(1.3 * (1 + (1 - 7.0)/25));
    }
    .h1box h1 span {
        font-size: 1.04rem;
        line-height: 1.04rem;
    }
    .home .h1box h1 {
        font-size: calc((8 - 1) * 1.2vw + 1rem);
        line-height: calc(1.3 * (1 + (1 - 9.0)/25));
    }
    .home .h1box h1 span {
        font-size: 2.0rem;
        line-height: 1.8rem;
        margin: 0 0 15px 0;
    }
    .home .h1box span:last-child {
        margin:0;
    }
    
    #headerimg{
        height: 100%;
    }
    #content {
        margin: calc(100vh - 110px) auto 0;
        padding-bottom: 40px;
    }
    #footer{
        padding: 10px 0 30px;
    }
    /*case-study-list*/
    
    .introbox {
        width: 60%;
        margin: 0 0 80px;
    }
    /*case-study*/
    .section{
        margin: 40px 0;
    }
    .gallery-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .gallery-grid .imgbox:nth-child(5n+2) {
        grid-column: span 1;
        grid-row: span 1;
    }
    .gallery-grid .imgbox img {
        aspect-ratio: 4/2.5;
    }
}
@media only screen and (max-width: 767px) {
    /*nav*/
    .nav-menu > li > a {
        font-size: 1.6rem;
        min-height: 30px;
        line-height: 1.6rem;
    }
    /*case-study-list*/
    .introbox {
        width: 100%;
    }
    .gallery-grid,
    .clientgrid {
        grid-template-columns: repeat(1, 1fr);
    }
    
    
}
@media only screen and (max-width: 599px) {
    /*typography*/
    .home .h1box h1 {
        font-size: calc((8.8 - 1) * 1.2vw + 1rem);
        line-height: calc(1.3 * (1 + (1 - 9.0)/25));
    }
    .home .h1box h1 span {
        margin: 0 0 5px;
        font-size: 1.8rem;
    }
    .innerframe {
        width: calc(100% - 40px);
        padding: 0;
    }
    
}
/*iphone6 + regular android*/
@media only screen and (max-width: 479px) { 
    

}
/*Iphone 4&5*/
@media only screen and (max-width: 359px) { 

}

/* Size and Orientation */
@media only screen and (max-width: 479px) and (orientation: portrait){ 

}
/* Landscape Orientation */
@media screen and (orientation: landscape) {

}

/* Portrait Orientation */
@media screen and (orientation: portrait) {

}

/*--------------------------------------------------------------------- End Responsive Queries*/

/* --------------------------------------------------------------------------------------------------------------------- Animations -------------------- */
    .wow{
        visibility: hidden;
    }
    .animated {
        opacity: 0;
    }

    .fadeUpSlow {
	  -webkit-animation-name: fadeUpSlow;
	  animation-name: fadeUpSlow;
	  -webkit-animation-duration:0.8s;
	  animation-duration:0.8s;
	  -webkit-animation-count:1;
	  animation-count:1;
	  -webkit-animation-fill-mode:forwards;
	  animation-fill-mode:forwards;
	}

    @-webkit-keyframes fadeUpSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0);
		transform: translate3d(0, 30px, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}
	
	@keyframes fadeUpSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0);
		-ms-transform: translate3d(0, 30px, 0);
		transform: translate3d(0, 30px, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	  }
	}
/*--------------------------------------------------------------------- End Animations*/