@charset "utf-8";

/*	
	Written by Kolen Mackey for Datadial Ltd on September 5, 2019
*/


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800&display=swap');


/*Note: 
	Icons for this website are sourced from: https://www.flaticon.com/ 
	Enable their ability to change fill colour by opening the svg in a text editor and referencing the ID
	Example: <svg class="icon"><use xlink:href="/images/svg/i_user.svg#i_user"></use></svg>
*/

/*Css Variables*/
:root {
	
	--yellow: 		#FBAF3F; 
	--grey: 		#444853; 
	--cream: 		#F6F5F4; 
	--black: 		#1a1e22;
	--grey_alpha: 	rgba(68,72,83,0.8);
	--grey2:  		#A0A7AF;
}

/* Reset*/ 
*,
*:before,
*:after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin:0;
  padding:0;
 }


body {
	background-color:#fff;
	color:#444853;
	font-family:'Poppins',"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
	font-style:normal;
	font-weight:400;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
	
}

/*------------------- Custom Scrollbars */
html,
.scrollbox{
	scrollbar-width: thin;
	scrollbar-color: #A0A7AF rgba(255,255,255,0.13);
}
html{
	scrollbar-color: #A0A7AF #e6e5e6;
}
html::-webkit-scrollbar,
.scrollbox::-webkit-scrollbar {
	background: rgba(255,255,255,0.13);
	width: 5px;
	height: 5px;
}
.scrollbox::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb{
	background: #A0A7AF;
}

/*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;
}
/* -----------------------------------------------------------------Typeography*/

body, div, dl, dt, dd, ul, ol, li, pre, form, p, blockquote, th, td {font-size: 14px;}

h1,h2,h3,h4, h5 {
	font-weight:400;
	margin:0 0 20px;
}


h2,h3, h4, h5, h6{
	margin:0 0 20px;

}


h1, .h1 {
	font-size: 42px;
	line-height: 52px;
	font-weight: 700;
}

.rte h1,
.h2,
h2 {
	font-size: 36px;
	line-height: 46px;
	font-weight: 700;
  }

h3 {
	font-size: 26px;
	line-height: 36px;
	font-weight: 600;
  }


h4 {
	font-size: 24px;
	line-height: 34px;
	font-weight: 500;
  }
blockquote cite,
h5 {
	font-size: 18px;
	line-height: 28px;
	font-weight: 500;
  }

h6 {
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
}


p {
    font-size: 14px;
    line-height: 24px;
	margin:15px 0;
	font-weight:400;
}
p strong{
	font-weight:600;
}

h1 strong{
	color:#FBAF3F;
	font-weight: 800;
}
blockquote p{
	font-weight:600;
}
blockquote h5{
	font-style: italic;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
/* ----------------------------------------------------------------- General*/
video,
img,
object,
embed {
  max-width: 100%;
  height: auto; 
}
img { 
	display: inline-block;
  	vertical-align: middle;
}

svg.icon {
	width: 40px;
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	margin:0;
	fill:currentColor;
	z-index: 1;
}
a{
	color: CurrentColor;
	text-decoration:none; 
	outline: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rte a, 
.rte a:hover, 
.rte a:focus, 
.rte a:active {
	color:#FBAF3F; 
	font-weight: 600;
}

.featimg {
    background-color:#efefef;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	
}
.featimg img{
	width:100%;
}

/*body .rte div {
	border:1px solid #fc0;
	padding: 4px !important;
}*/

/*Featimg*/
.featimg.centered{
	background-position: center;
}
.featimg.L0{
	background-position: 0 center;
}
.featimg.L20{
	background-position: 20% center;
}
.featimg.L40{
	background-position: 40% center;
}
.featimg.L60{
	background-position: 60% center;
}
.featimg.L80{
	background-position: 80% center;
}
.featimg.L100{
	background-position: right center;
}

.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: 30px;
}
.rte > p:first-of-type{
	margin-top: 0;
}
.rte ol,
.rte ul{
    /*display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;*/
	display: block;
    margin:15px 0;
	padding:0 20px; 
}
.rte ol li,
.rte ul li{
    padding:0 0 0 15px;
    margin: 5px 0;
    width:100%;
} 

.flexgrid.threeblocks ol li,
.flexgrid.threeblocks ul li{
    width:100%;
} 

.text-right {
	text-align:right;
}
.text-center {
	text-align:center;
}

iframe[name="google_conversion_frame"] {
	height:0;
	top:-20px;
}


/* ----------------------------------------------------------------- Body and Main UI */

#offcanvas {
	display:block;
	position:relative;
	overflow:hidden;
	min-height:100%;
	height:100%;
	width:100%;
	/*background-color:rgba(0,0,0,0.13);*/
	-ms-overflow-style:scrollbar;
}
#offcanvas.active{
	overflow: hidden;
}
#headerimg{
    position: fixed;
    display: block;
    background-color:#1A2128;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: -1;
    min-height: 100vh;
}

#headerimg:before{
    content: "";
    position: absolute;
    display: block;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 1;
	/*background-color: rgba(9,12,14,0.3);*/
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+25,0.4+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.13) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.25) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.13) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0.25) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.13) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
}
#headerimg .nextframe{
	z-index: 10;
}
/*#ddVideo {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	background-color: #131313;
	max-width: 100%;
	z-index: -1;
	user-select: none;
-moz-user-focus: normal;
}*/

.innerframe {
	margin:0 auto;
    width:100%;
	max-width:1620px;
	display:block;
	padding:0;
	position:relative;
	
}

/* --------------------------------------------------------------------------------------------------------------------- Masthead */
#masthead{
	display:flex;
	flex-wrap: wrap;
	flex-flow: column;
	align-items: center;
	justify-content:flex-start;
	top:0;
	height: 1px;
	left:0;
	width:80px;
	position: fixed;
	background: rgba(0,0,0,0);
	/*border-right:1px solid rgba(255,255,255,0.13);*/
	z-index: 1000;
	padding: 40px 10px;
	overflow: visible;
			transition:all 0.8s cubic-bezier(.65,0,0.2,1);
	-webkit-transition:all 0.8s cubic-bezier(.65,0,0.2,1);
	
}
#masthead:hover{
	/*background: rgba(0,0,0,0.2);*/
}

#logo{
	position: fixed;
	top:15px;
	right:20px;
	margin: auto;
	display: block;
	width:100px;
	height: 100px;
	color: #fff;
	background: url('../img/TaylorHerring-logo.svg') center / contain no-repeat;
			transition:transform 0.8s cubic-bezier(.65,0,0.2,1);
	-webkit-transition:transform 0.8s cubic-bezier(.65,0,0.2,1);
	transform: none;
	transform-origin: top right;
	pointer-events: all;
	opacity:1;
}

#offcanvas.docked:not(.active) #logo {
	transform: scale(0.65);
	/*background: url('../img/TaylorHerring-logo-white.svg') center / contain no-repeat;*/
}
#offcanvas #masthead #logo:focus,
#offcanvas #masthead #logo:hover{
	background: url('../img/TaylorHerring-logo.svg') center / contain no-repeat;
}
#offcanvas.active #masthead{
	background:transparent;
	/*border-color:rgba(0,0,0,0.13);*/
	pointer-events: none;
	height: 100%;
}

/* Menu Icon Animation */
#menu_icon{
			transition:all 0.8s cubic-bezier(.65,0,0.2,1);
	-webkit-transition:all 0.8s cubic-bezier(.65,0,0.2,1);
	position: absolute;
	top:25px;
	left:0;
	right:0;
	margin: auto;
	width:40px;
	opacity:1;
}
#menu_icon .line{
	width: 40px;
	height: 3px;
	background-color:rgba(255,255,255,0.6);
	background-color:#e6e5e6;
	display: block;
	margin: 8px auto;
	cursor: pointer;
	border-radius: 2px;
	-webkit-transition: all 0.8s cubic-bezier(.65,0,0.2,1);
			transition: all 0.8s cubic-bezier(.65,0,0.2,1);
	
}

#menu_icon:hover .line{
	background-color:#A0A7AF;
}
/*#menu_icon .line:nth-child(1){
  width: 30px;
}
#menu_icon .line:nth-child(3){
  width: 30px;
}*/
#offcanvas.active #menu_icon{
  -webkit-transform: rotate(90deg);
  		  transform: rotate(90deg);
	pointer-events: all;
}
/*----XXX Start New Menu stuff*/
body.join-us #offcanvas.docked:not(.active) #menu_icon:not(:hover) .line,
body.single-case_studies #offcanvas.docked:not(.active) #menu_icon:not(:hover) .line,
body.work #menu_icon .line,
body.home #menu_icon .line,
body.home #offcanvas.docked:not(.active) #menu_icon:not(:hover) .line{
	background-color:#444853;
}

/*Active States*/
#offcanvas.active #menu_icon .line:nth-child(1){
  width: 30px;
}

#offcanvas.active #menu_icon .line:nth-child(2){
  width: 20px;
}
#offcanvas.active #menu_icon .line:nth-child(3){
  width: 40px
}
#offcanvas.active #menu_icon .line{
	background: #FBAF3F;
}

#offcanvas.active #masthead p.tagline{
	color: #444853;
}


#masthead .tagline{
	display: block;
	transform: rotate(-90deg);
	transform-origin: center center;
	font-size: 10px;
	line-height: 18px;
	text-transform: uppercase;
	font-weight: 600;
	white-space: nowrap;
	color: rgba(255,255,255,0.7);
	color:#e6e5e6;
	letter-spacing: 1px;
	word-spacing: 2px;
	bottom: 100px;
	position: relative;
	width: 350px;
	top: 200px;
	text-align: right;
	opacity: 1;
			transition:opacity 0.8s cubic-bezier(.65,0,0.2,1);
	-webkit-transition:opacity 0.8s cubic-bezier(.65,0,0.2,1);
	pointer-events: none;
}

/*
body.join-us
body.single-case_studies 
body.work 
body.home
*/
body.single-case_studies #offcanvas.docked:not(.active) #masthead .tagline,
body.work #offcanvas.docked:not(.active) #masthead .tagline,
body.join-us #offcanvas.docked:not(.active) #masthead .tagline,
body.home #offcanvas.docked:not(.active) #masthead .tagline {
	opacity: 0;
}

#main {
	display: block;
	min-height: 100vh;
	z-index: 0;
}
/* ----------------------------------------------------------------- Footer */
#footer{
	display: block;
	background:#fff;
	color:#A0A7AF;
	padding: 25px 2% 20px;
	text-align: right;
	position: relative;
	border-top:1px solid #e6e5e6;
	z-index: 800;
	margin-left: 50%;
}

#footer .innerframe{
	max-width: 100%;
	padding-left: 15%;
}
#footer ul {
	margin: 0 0 5px;
	padding: 0;
}
#footer ul li{
	display:inline;
	padding: 0 0 0 20px;
}
#footer p{
	font-size: 11px;
	line-height: 16px;
	margin: 0;
}
#gotop{
	display: block;
	width:25px;
	height: 25px;
	position: absolute;
	top:15px;
	left:0;
	z-index: 10;
	padding:0;
	color: #A0A7AF;
}
#gotop svg{
	transform: rotate(-90deg);
	width:22px;
	height: 22px;
	display: block;
	margin: 0 auto;
	
}
#footer a:hover{
	color: #FBAF3F;
}
/* ----------------------------------------------------------------- Main Navigation */


#navframe{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	z-index:900;
	height: 1px;
}

.navframe_content{
	position:relative;
	display:block;
	width:100%;
	height:100vh;
	padding:0 0 0 80px;
	background-color:#fff;
	-webkit-transform:translate3d(100vw,0,0);
			transform:translate3d(100vw,0,0);

			transition:transform 0.8s cubic-bezier(.65,0,0.2,1);
	-webkit-transition:transform 0.8s cubic-bezier(.65,0,0.2,1);

}
	
#offcanvas.active .navframe_content{
   -webkit-transform:translate3d(0,0,0);
		   transform:translate3d(0,0,0);
}

.menuFrame{
	display: flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	width:100%;
	margin:0;
	list-style: none;
	height: 100%;
/*	overflow: auto;*/
}
.menu-main-menu-container {
	display: block;
	width: 30%;
	height: 100%;
	border-left:1px solid rgba(0,0,0,0.13);
}
.menuFrame a {
	color: #fff;
}	
	
/*Navigation*/
ul.nav-menu {
	padding: 0 0 0 10%;
	height: 100%;
	width: 100%;
	border-right: 1px solid rgba(0,0,0,0.13);
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
}
ul.nav-menu li{
	list-style: none;
	display: block;
	min-width:100%;
}
/*Level 1*/
ul.nav-menu > li{
	margin-right:-1px;
}
ul.nav-menu li a{
	color: #444853;
}
ul.nav-menu > li > a{
	display: block;
	font-size: 40px;
	line-height: 50px;
	/*color: rgba(0,0,0,0.2);*/
	font-weight: 700;
	margin: 0 0 10px;
}
ul.nav-menu > li.external:hover > a{
	background: url(../img/PRExamples.svg) 95% center / contain no-repeat;
}


/*Level 2*/
ul.nav-menu li ul{
	display: none;
}
ul.nav-menu li.hasdrop.active ul{
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	top:0;
	left:100%;
	width:calc(35vw - 60px);
	height: 100%;
	/*border-right:1px solid rgba(0,0,0,0.13);*/
	padding: 20px 50px;
	margin-left:1px;
	background: #fff;
}
ul.nav-menu > li ul li{
	display: block;
	margin: 0 0 10px;
}
ul.nav-menu > li ul li a{
	display: block;
	font-size: 28px;
	line-height: 32px;
	font-weight: 600;
	margin: 0 0 10px;
}

ul.nav-menu li.active > a{
	color: #FBAF3F;
	border-right: 2px solid #FBAF3F;
}
ul.nav-menu li a:hover{
	color: #FBAF3F;
}
.midframe{
	width:33%;
	height: 100%;
	/*background:#F6F5F4;*/
	padding: 20px 4%;
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	visibility: visible;
}
.midframe p{
	margin: 0 0 15px;
}
/*Column 3*/
.menuFrame .imageframe{
	width:67%;
	background-image:url("../img/00_admin.jpg");
	padding: 20px;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	flex-wrap: wrap;
	color: #fff;
	position: absolute;
	top:0;
	left:65%;
	height: 100%;
			transition:width 1.3s cubic-bezier(.65,0,0.2,1);
	-webkit-transition:width 1.3s cubic-bezier(.65,0,0.2,1);
}
#offcanvas.active .imageframe{
	width:35%;
}
.imageframe p.copyright{
	display: block;
	margin: 0;
	text-transform: uppercase;
	font-size:10px;
	font-weight: 600;
	text-align:center;
}

.menuFrame .social{
	position: absolute;
	bottom:20px;
	left:0;
	padding:40px 20px 20px;
	text-align: center;
	color:#444853;
	display: inline-block;
	z-index: 5000;

}

.social a{
	display: block;
	padding: 10px;
	margin: 10px 0 0;
	width:30px;
	height: 30px;
	color:#444853;
}
.social svg{
	width:20px;
	height: 20px;
}
.social a:hover{
	color:#FBAF3F;
}

.grecaptcha-badge {
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* -----------------------------------------------------------------  Form Elements */	
input:not([type="file"]), select{
	padding:4px 6px;
	display:block;
	width:100%;
	border:1px solid #e6e5e6;
	margin:0 0 8px 0;
	font-family:inherit;
	font-size:14px;
	line-height: 30px;
	outline: none;
	-webkit-appearance: none;
    border-radius: 0;
}

select option {
	padding:2px 4px;
}
select{
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background:#fff url('../img/chevron-down.svg') 98% center / 22px auto no-repeat;
}
textarea{
	font-size:13px;
	padding:8px;
	color:#999;
	display:block;
	width:100%;
	border:1px solid #e6e5e6;
	margin:0 0 8px 0;
	font-family:inherit;
	height:150px;
	outline: none;
	-webkit-appearance: none;
    border-radius: 0;

}
label {display:block; margin-bottom:4px;}
input[type="submit"] {
	background:#FBAF3F;
	color:#fff;
	border:none;
	cursor:pointer;
	padding:9px;
}

input{
	padding:14px 8px;
}

input:focus, textarea:focus {
	background-color:#fff;
	color:#1A2128;
	outline:none;
}
select:focus {
	outline:none;
}

input[type="button"], input[type="submit"] {
	-webkit-appearance: none;
}
::-moz-placeholder {
  opacity: 1;
}

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

}
:-moz-placeholder {
  color: #A5ADB6;
}
/*.apply div.wpcf7 input[type="file"]{
	padding: 4px 10px;
	
}*/

/* ----------------------------------------------------------------- General Styles */
/*.rte p:last-of-type a:only-child,*/
.button {
	background:#FBAF3F;
	color:#fff;
	cursor:pointer;
	padding:12px 30px;
	display:inline-block;
	text-align:center;
	font-weight: 500;
	font-size:12px;
	letter-spacing: 1px;
	position:relative;
	min-width:200px;
	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;
}
.button:hover {
	background:#5a626e;
	color:#fff;
}

.button.line {
	border:1px solid #fff;
	background:transparent;
	z-index: 10;
}
.button.line:focus,
.button.line:hover {
	background:transparent;
	color:#444853;
}
.button.line.black {
	border:1px solid #1A2128;
	color:#1A2128;
	background:transparent;
}
.button.line.black:focus,
.button.line.black:hover{
	/*border:1px solid #222 ;
	background:#222 ;*/
	color:#fff;
}
ul.nav-menu li.hasdrop li a,
a.borderline{
	display: inline-block;
	position: relative;
	padding-bottom: 4px;
}
ul.nav-menu li.hasdrop li a:after,
a.borderline:after{
	content: "";
	display: block;
	position: absolute;
	bottom:0;
	left:0;
	width:0;
	height: 2px;
	background: currentColor;
	transition:width ease-out 0.4s;
}
ul.nav-menu li.hasdrop a:hover:after,
a.borderline:hover:after{
	width:100%;
}
/* ----------------------------------------------------------------- BlockQuotes  */

blockquote {
	width:100%;
	margin:0;
	border:none;
	padding:10px 0;
	
	border-radius: 6px;
	text-align:center;    
	
}
.rte blockquote{
	position:relative;
}
blockquote cite{
	font-family:"Palatino Linotype", Palatino, "Times New Roman", "serif";
    font-weight: 400;
    font-style: italic;
	color: #5C6875;
	position:relative;
	display:block;
	padding:15px 0;
	margin:0 auto;
	text-align:center;	
    width:80%;
}
blockquote cite:before {
	content:"";
	position:relative;
	width:1px;
	height:50px;
	background:#A5ADB6;
	display:block;
	margin:0 auto 10px auto;
	color:#666;
}

blockquote cite:after {
	content:"\e61e";
	font-family:"icomoon";
	height:100%;
	color:#FBAF3F;
	font-size:32px;
	line-height:26px;
	font-style:normal;
	position:relative;
	display:block;
	vertical-align:middle;
	margin:10px 0 0;
	
}
.rte blockquote > h5{
	margin: 30px 0 0;
}
.rte blockquote h5 + p{
	margin-bottom: 30px;
}
/* ----------------------------------------------------------------- Full Screen pages */
body.error404 #footer,
body.join-us #footer,
body.showreel #footer,
body.culture #footer,
body.home #footer,
body.work #footer,
body.single-case_studies #footer {
	margin: 0;
	padding: 25px 4% 20px;
}

/* ----------------------------------------------------------------- News */

#splitScreen,
#blogframe{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	padding-left: 50%;
}
#splitScreen #txtside,
#blogframe #newsmain{
	display: block;
	width:100%;
}
#splitScreen #txtside .innerframe,
#blogframe #newsmain .innerframe{
	/*padding: 25vh 8% 50px;*/
	padding: 50vh 8% 50px;
}
#splitScreen #imgside,
#blogframe #newsside{
	width:50%;
	height: 100vh;
	position: fixed;
	top:0;
	left:0;
	
}
#imgside:before{
    content: "";
    position: absolute;
    display: block;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 1;
	background-color: rgba(9,12,14,0.3);
}
#imgside > div{
	z-index: 10;
}


#imgside .pagehead,
#newsside .pagehead{
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
	width:100%;
	height: 100%;
	padding: 40px 4%;
	color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(0, 0, 0, 0.1)), color-stop(150%, rgba(0, 0, 0, 0.4)));
	background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.4) 150%);
}
#newsside .pagehead h6{
	margin: 0;
}

#sidepanel{
	display: block;
	position: fixed;
	top:0;
	left:80px;
	width:calc(50vw - 80px);
	height: 100vh;
	color: #fff;
	z-index: 5000;
	border-right:1px solid transparent;
	-webkit-transition: all ease-in-out 0.4s, color ease-in-out 0.3s;
			transition: all ease-in-out 0.4s, color ease-in-out 0.3s;
	padding: 65px 0 0;
}
#sidepanel #widgets{
	display: block;
	width:100%;
	height: 100%;
	padding:20px 5% 1px;
	margin:80px 0;
	color: #444853;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all ease-in-out 0.4s, color ease-in-out 0.3s;
			transition: all ease-in-out 0.4s, color ease-in-out 0.3s;

}
#sidepanel.active{
	background:#fff;
	color: #444853;
	border-right:1px solid #e6e5e6;
}
#sidepanel.active #widgets{
	margin-top:0;
	opacity: 1;
	visibility: visible;
}
#sidepanel .close {
	display: block;
	text-align: left;
	height: 45px;
	position: absolute;
	top: 20px;
	left: 5%;
	right: 5%;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255,255,255,0.2);
}
#sidepanel.active .close{
	border-color: #e6e5e6;
}
#sidepanel .close svg{
	width:22px;
	height: 22px;
	margin-left: 10px;
	transform: rotate(-45deg);
	float: right;
}
#sidepanel.active .close svg{
	transform: rotate(0);
}
/* ----------------------------------------------------------------- News Sidebar*/
aside.widget {
	padding:0;
}
aside .widget-title {
	margin: 0 0 15px;
	font-weight:400;
	font-size: 22px;
}

aside > ul, aside > ol {
	padding:0 0 20px;
	margin:0 0 20px;
	list-style:none;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

aside ul li, aside ol li {
	margin:0 15px 5px 0;
	padding: 0;
	display: inline-block;

}
aside ul li:last-of-type, aside ol li:last-of-type {
	border:none;
}

aside ul li a {
	text-decoration:none;
	display:block;
	padding:0;
	color:#444853;
/*	font-size: 16px;
	line-height: 22px;*/
	text-transform: capitalize;
}

aside a:hover,
aside .current-cat a,
aside ul li.current_page_item a {
	color:#FBAF3F;
}

aside form{
	display:block;
}
aside label{
	display: none;
}
aside #searchform input{
    display: inline-block;
    vertical-align: top;
    width:calc(100% - 100px);
    margin: 0 -2px;
}
aside.widget_categories{
	padding:20px 0 0;
}
aside.widget_categories .widget-title{
	/*display: none;*/
}

aside #search input[type="text"], aside #archives select {
	background-color:rgba(0,0,0,0);
	border:1px solid #3A424A;
	color:#f5f5f5;
}
aside #search input[type="submit"] {
	width:100px;
	float:right;
}

aside #searchform > div {
	display: flex;
	justify-content: space-between;
	width:100%;
	padding: 0 2px;
}
aside #searchform #s{
	width:70%;
}

aside #searchform #searchsubmit{
	width:30%;
}
aside:last-of-type{
	margin-bottom: 50px;
}

body.search h3 strong{
	text-transform: capitalize;
	color: #FBAF3F;
}
p.results{
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: #FBAF3F;
}

/* -----------------------------------------------------------------Category and Archive Display*/

.postwrap {
	width:100%;
	display:block;
    background-color: #fff;
	margin:0 auto 40px auto;
	padding:0;
	color:#3A424A;
	position:relative;
	
}
/*--start New aspect-ratio css*/
.postwrap .featimg {
  position:relative;
  padding-top: 56%;
  overflow: hidden;
	border:1px solid #e6e5e6;
}

.postwrap .featimg img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit: cover;
			transition:all 1.3s cubic-bezier(.15,0,0.2,1);
	-webkit-transition:all 1.3s cubic-bezier(.15,0,0.2,1);
}
/*--end New aspect-ratio css*/
.postwrap:hover .featimg img{
	transform: scale(1.2);
}
.postwrap .txtbox{
	width:100%;
	padding:20px 4%;
	margin:0 0 10px 0;
	position: relative;
	z-index: 0;
}
.postwrap .txtbox:beforeX{
	content:"";
	display: block;
	position: absolute;
	z-index: -1;
	top:0;
	left:0;
	width:100%;
	height: 0;
	
	background: #F6F5F4;
	opacity: 0.5;
			transition:all 1.3s cubic-bezier(.15,0,0.2,1);
	-webkit-transition:all 1.3s cubic-bezier(.15,0,0.2,1);
}
.postwrap:hover .txtbox:before{
	height: 100%;
}
.postwrap .txtbox h3{
    padding:0;
	width:80%;
	font-weight: 700;
    
}

.postwrap .txtbox .more{
	text-transform: uppercase;
	font-size: 12px;
	text-align: right;
	font-weight: 600;
	border-bottom: 1px solid #e6e5e6;
}
.postwrap a:hover .more{
	color:#FBAF3F;
	border-color:#FBAF3F;
}
.postwrap .txtbox .date{
	text-transform: uppercase;
	font-size: 12px;
	text-align: right;
	font-weight: 600;
}

.postwrap .button {
	background:#949d68;
	background:#a8afb9;
	display:inline-block;
	position:absolute;
	right:0;
	bottom:0;
	color:#fff;
	margin:0;
}
/* ----------------------------------------------------------------- Post Page*/
#blogframe.postpage .post{
	display: block;
	padding: 0 0 50px;
	/*border-bottom: 1px solid #e6e5e6;*/
}
#blogframe.postpage .post > h1{
	margin-bottom: 50px;
	border-bottom: 1px solid #e6e5e6;
	padding-bottom: 10px;
}
#blogframe.postpage .post img{
	width:100%;
}

#blogframe.postpage .addthis_sharing_toolbox{
	display: block;
	padding:0;
	text-align: center;
}
#blogframe.postpage .at-share-btn-elements{
	display: flex;
	justify-content:space-between;
}
#blogframe.postpage .at-share-btn-elements a{
	width:24.8%;
	margin: 0;
}
#blogframe.postpage .at-share-tbx-element .at-share-btn {
	background: #A0A7AF !important;
}
#blogframe.postpage .postmeta{
	display: block;
	padding: 10px 0;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 600;
	width:100%;
}
#blogframe.postpage .postmeta a{
	display: inline-block;
	margin-right: 5px;
}
#blogframe.postpage .postmeta a:hover{
	color: #FBAF3F;
}

/* ----------------------------------------------------------------- Post Nav*/

.postnav{
	display: flex;
	position: relative;
	flex-direction: row;
	width:100%;
	min-height: 80px;
	border-top:1px solid #e6e5e6;
	margin: 0;
	padding: 0;
	z-index: 800;
}
.postnav > div{
	display: block;
	width:50%;
	padding: 15px 4% 20px;
}

.postnav .prev{
	border-right:1px solid #e6e5e6;
	margin-right: -1px;
}
.postnav .next{
	text-align: right;
	border-left:1px solid #e6e5e6;
}
.postnav a{
	display: block;
}
.postnav a h4,
.postnav a h3{
	margin-bottom: 10px;
}
.postnav a h4::first-letter,
.postnav a h3::first-letter{
	text-transform: capitalize;
}
.postnav a span{
	font-weight: 500;
}
.postnav a:hover h4,
.postnav a:hover h3{
	color: #FBAF3F;
}



/*Page Header*/
.pagemarker {
	display: inline-block;
	text-align: left;
	transform: rotate(-90deg);
	transform-origin: left 0;
	text-transform: uppercase;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
	letter-spacing: 4px;
	word-spacing: 2px;
	position: absolute;
	z-index: 800;
	opacity: 1;
	padding-left: 145px;
	font-size: 14px;
	line-height: 20px;
	bottom: 25px;
	right: -350px;
	/*border-right: 1px solid #A0A7AF;*/
	width: 400px;
}
.pagemarker p,
.pagemarker h1{
	font-size: 14px;
	line-height: 20px;
	margin: 0;
	font-weight: 600;
	display: inline;
}
.pagemarker:before{
	content:"";
	width:8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	margin: auto;
}
.pagemarker:after{
	content:"";
	width:130px;
	height: 2px;
	background:#fff;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	margin: auto;
}

.whitebox{
	background-color: #fff;
}
.greybox{
	background-color:#fff;	
	color: #fff;
}
.nextframe .pagemarker,
#home .whitebox .pagemarker{
	color: #A0A7AF;
	border-color: #A0A7AF;	
}
.nextframe .pagemarker:before,
.nextframe .pagemarker:after,
#home .whitebox .pagemarker:before,
#home .whitebox .pagemarker:after{
	background-color: #A0A7AF;
	
}

/* ----------------------------------------------------------------- Home  */

#home{
	display: block;
}
.section{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width:100%;
	height: 100vh;
	vertical-align: top;
	position: relative;
	transition: background ease-in-out 0.2s;
	overflow: hidden;
	scroll-snap-align: start;
	border-top: 1px solid #fff;
}

.section:hover{
	/*background: rgba(0,0,0,0.4);*/
}

.section.featimg{
	color: #fff;
}
.section.featimg:before{
	content:"";
	display: block;
	position: absolute;
	z-index: 0;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	/*background: rgba(0,0,0,0.2);*/
	pointer-events: none;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+25,0.4+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.25) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0.25) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
}
.section.featimg .innerframe{
	position: relative;
	z-index: 10;
}

.section.active{
	/*background-color: #131313;*/
}
.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);
}
#home .section.feature .featimg:before{
	content: "";
	display: block;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	z-index: -1;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+25,0.4+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.25) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0.25) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */

}
#home .section.feature .featimg img{
	/*background:  rgba(0,0,0,0.2);*/
}

.hoverwipe{
	width:90%;
	max-width:800px;
	display:inline-block;
	position: absolute;
	left:60px;
	bottom:44px;
	color:#fff;
	text-decoration: none;
	/*background: rgba(0,0,0,0.2);
	background: rgba(68,72,83,0.8);*/
	z-index: 10;
			transition:all 1.3s cubic-bezier(.15,0,0.2,1);
	-webkit-transition:all 1.3s cubic-bezier(.15,0,0.2,1);
}
/*.section.active .hoverwipe{
	right:50px;
}*/
.hoverwipe:focus,
.hoverwipe:active,
.hoverwipe:hover{
	color: #444853;
}
.hoverwipe .wrap{
	display: block;
	width:100%;
	height: 100%;
	overflow: hidden;
	padding: 10px 80px 15px 15px;
}
/*Wipe style for line buttons and case studies*/
.button.line:before,
.hoverwipe .wrap:before{
	content: "";
	display: block;
	position: absolute;
	top:0;
	left:0;
	width:0%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	z-index: -1;

			-webkit-transition:width 0.8s cubic-bezier(.65,0,0.2,1);
					transition:width 0.8s cubic-bezier(.65,0,0.2,1);
}

.button.line:before{
	background: #fff;
	opacity: 1;
}

.button.line:focus:before,
.button.line:active:before,
.button.line:hover:before,
.hoverwipe:focus .wrap:before,
.hoverwipe:active .wrap:before,
.hoverwipe:hover .wrap:before{
	width:100%;
	background: #fff;
	/*opacity: 0.9;*/
	color: #444853;

}
.button.line.black:before,
.button.line.black:hover:before{
	background: #1A2128;
}
.hoverwipe .number {
	position: absolute;
	top: 22px;
	/* left: -30px; */
	right: 18px;
	font-size: 13px;
	line-height: 13px;
	letter-spacing: 0.5px;
	font-weight: 600;
	color: #FBAF3F;
	text-align: right;
	border-left: 1px solid rgba(255,255,255,0.4);
	bottom: 18px;
	padding-left: 8px;
}
.hoverwipe .title {
	margin: 0;
	padding-bottom: 10px;
	max-width: 80%;
}
.hoverwipe .strapline{
	margin:0;
	width:60%;
}
.hoverwipe svg {
	position: absolute;
	right:10px;
	bottom:10px;
	width:50px;
	height:50px;
	transform: rotate(45deg);
	
	
}
.hoverwipe:hover .number{
	border-color:#ccc;
}
/*.section .nextframe{
	position: absolute;
	left:15px;
	bottom:40px;
	width:50px;
	height: 50px;
	padding: 5px;
}

.section .nextframe svg {
	transform: rotate(90deg);
	fill:#d8d8d8;
}*/
.section .nextframe {
	position: absolute;
	/*left: 72px;*/
	right:0;
	bottom: 0;
	width: 10px;
	padding: 5px;
}
.pagehead .nextframe.arrow {
	left: 24px;
	color: #A0A7AF;
	bottom: 35px;
	padding: 5px;
	z-index: 500;
	position: absolute;
	display:none;
}
.nextframe.arrow svg{
	width:25px;
	height: 25px;
	transform:rotate(90deg);
}

.section .nextframe:hover svg{
	fill:#FBAF3F;		
}
.nextframe.arrow:hover svg{
	fill:#fff;
}
#featvideo{
	color:#fff;
	border:none;
}
/*#featvideo video {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}*/
#featvideo:before{
	content:"";
	color: #fff;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+25,0.4+100 */
	background:url("../img/brand-tagline.svg"), -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.25) 100%); /* FF3.6-15 */
	background:url("../img/brand-tagline.svg"), -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0.25) 100%); /* Chrome10-25,Safari5.1-6 */
	background:url("../img/brand-tagline.svg"), linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
	background-position: center 70%, center;
	background-repeat: no-repeat, no-repeat;
	background-size: 25% auto, cover;
	/*background: rgba(0,0,0,0.13) url("../img/brand-tagline.svg") center 70% / 25% auto no-repeat;*/
	position: absolute;
	top:0;
	left:0;
	right:0;
	max-width:100vw;
	height: 100%;
	z-index: 500;
	pointer-events: none;
	margin: auto;
}
body.showreel #featvideo:before{
	display: none;
}
body.showreel video{
	cursor: pointer;
}
#featvideo .button{
	position: absolute;
	/*top:44px;
	bottom:44px;*/
	bottom:10vh;
	right:20px;
	left:20px;
	margin: auto;
	width:220px;
	height: 45px;
	z-index: 500;
}

.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%);
}


#awards{
	color: #fff;
	flex-direction: column;
	justify-content: flex-end;
	padding: 3vh 50px 10vh;
}


#about .txt,
#awards h2,
#awards .button{
	z-index: 50;
}
#about h2,
#brands h2,
#awards h2{
	font-size: 80px;
	line-height: 90px;
	text-align: center;
	display: block;
	max-width:1020px;
	margin: 0 auto 30px;
}

#brands{
	text-align: center;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px 10% 10vh;
}
#brands h2{
	margin-top: 50px;
}
#brands .nextframe{
	color: #e6e5e6;
}
#brands .videobox{
	pointer-events: none;
	max-width: 980px;
	margin-bottom: 50px;
}

#news{
	padding: 0;
	justify-content: flex-start;
	height: auto;
}
/***Start New News*/
.newsGrid {
	width:100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1px;
	align-items: start;
	justify-items: center;
	padding:0;
	margin:0;
	height:auto;
}
.article {
	position: relative;
	overflow: hidden;
}
.newsGrid .article {
	width:100%;
	max-width: 100%;
	background: rgba(255,255,255,0.13);
	height: 100%;
}

.newsGrid .article .featimg img{
	margin-top: 5%;
}

/*General Article styles - also used in nes section*/
.article a{
	display: block;
	height: 100%;
}
.article a:hover{

}
.article .featimg{
	position: relative;
	z-index: 0;
	height: 100%;
}
.article .featimg img{
	visibility: hidden;
}

.article .wrap{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items:center;
	top:100%;
	left:0;
	bottom:0;
	width:100%;
	height: 100%;
	padding: 20px;
	margin:0;
	z-index: 10;
	color: #fff;
	opacity: 0.6;

	/* transition: <property> || <duration> || <timing-function> || <delay>;*/
					transition:all 0.8s cubic-bezier(.85,1.2,0.2,1) 0.25s;
			-webkit-transition:all 0.8s cubic-bezier(.85,1.2,0.2,1) 0.25s;
}
.newsGrid .article:nth-child(1) .wrap{
	/*padding-top: 50%;*/
	
}
.article:hover .wrap{
	opacity: 1;
	color: #444853;
	top:0;

}

.article .wrap .txtwrap{
	border-bottom: 1px solid #fff;
	display: block;
	margin: 0 auto;
	width:70%;
}

.article .wrap .date{
	text-transform: uppercase;
	margin: 0;
	font-weight: 600;
}
.article .wrap .read{
	text-transform: uppercase;
	margin: 0 0 5px;
	display: block;
	text-align: right;
	font-weight: 600;
}
.article:hover .wrap .read,
.article:hover .wrap .date{
	color: #FBAF3F;
}
.article:hover .wrap .txtwrap{
	border-color:#ccc;
}
.article .featimg:before{
	content:"";
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 0;
	background: rgba(255,255,255,0.95);
	/*background: rgba(68,72,83,0.8);*/
	/* transition: <property> || <duration> || <timing-function> || <delay>;*/
					transition:height 0.8s cubic-bezier(.65,1.3,0.2,1) 0.25s;
			-webkit-transition:height 0.8s cubic-bezier(.65,1.3,0.2,1) 0.25s;
}
.article:hover .featimg:before{
	height:100%;
	z-index: -1;
}

#home .pagemarker{
	display: none;
}


/*Video Iframes*/
.videobox {
    display:block;
    margin:0 auto;
    padding:0;
    max-width:1640px;
	background:url() center / cover no-repeat;
	
}

.v_iframe {
  position:relative;
  padding-top: 56%;
}
p.v_iframe{
	display: block;
}
.v_iframe video,
.v_iframe iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.v_iframe video{
	object-fit: cover;
}
.videobox .txtbox{
	padding: 30px 0 0;
}

#featvideo .videobox.fullscreen{
	/*z-index: -1;*/
}
.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;
}
.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;
}
/*.videoplay span{
	display: inline-block;
	padding: 10px 40px;
	background:#FBAF3F;
}*/

/*This line is to guage the center of the screen*/

/*#main:before,
.videobox.fullscreen:before{
	content:"";
	width:1px;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	right:0;
	margin: auto;
	background: #fc0;
	z-index: 1000;
	pointer-events: none;
}
#main:before{
	background: #f60;
	z-index: 9000;
}*/

/*Object Fill for IE*/

.fullscreen.container{
	width:100%;
	height: 100%;
}

.fullscreen.container .media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
}







/*--End*/


#about {
	color: #fff;
	flex-direction: column;
	justify-content: flex-end;
	padding: 3vh 50px;
	text-align: center;
}
#about .txt {
	display: block;
	max-width: 850px;
	margin: 0 auto 30px;
}
#about .carousel{
	display: block;
	/*width:65%;*/
	width: 70.3%;
	height: 100%;
	padding:0;
}
#about .carousel li,
#about .carousel .bx-viewport{
	min-height: 100vh;
}
#about .carousel li{
	margin-right: 1px;
}
#about .carousel .bx-wrapper a{
 	color:#A0A7AF;
}
#about .carousel .bx-wrapper a:hover{
 	color:#fff;
}
#about .carousel .bx-wrapper .bx-prev{
	display: none;
}
#about .carousel .bx-wrapper .bx-next{
	bottom:44px;
	right:20px;
}
#about .carousel .bx-pager {
	position: absolute;
	right: 20px;
	bottom: 85px;
	left: auto;
	padding: 10px 0;
	width: 40px;
	display: flex;
	flex-flow: column;
	align-items: center;
}
#about .carousel .bx-pager-item {
	margin: 10px 0;
	width:22px;
	height: 22px;
	padding-top: 5px;
	border:1px solid transparent;
	border-radius: 50%;
}
#about .carousel .bx-pager-item a{
	background:#A0A7AF;
}
#about .carousel .bx-pager-item a.active{
	background: #FBAF3F;
}
#about .txtbox {	
	display: flex;
	flex-flow: column;
	justify-content: center;
	/*width: 35%;*/
	width: 29.6%;
	padding: 3% 120px 3% 3%;
	max-height: 100%;
	overflow-y: auto;
}

#feed{
	padding: 0;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items:flex-start;
	/*border-bottom: 1px solid #fff;*/
	height: auto;
}
#feed #social{
	/*width: calc(100% - 120px);*/
	width:100%;
	display: block;
}
#social aside{
	display: block;
	margin: 0;
}
#social aside .meks-instagram-widget > div{
	border-right:1px solid #e6e5e6;
	position: relative;
}
#social aside .meks-instagram-widget a{
	color: CurrentColor;
}
#social aside .meks-instagram-widget .imgbox{
	position: relative;
	margin-right:-1px;
	overflow: hidden;
}
#social aside .meks-instagram-widget .imgbox img{
		transition:transform 0.6s cubic-bezier(.65,1.3,0.2,1);
-webkit-transition:transform 0.6s cubic-bezier(.65,1.3,0.2,1);
	min-height: 25vw;
	object-fit: cover;
}
#social aside .meks-instagram-widget > div:hover img{
	transform: scale(1.13);
}
#social aside .meks-instagram-widget .txtbox{
	padding: 20px 8% 30px;

}
#social aside .meks-instagram-widget > div:hover strong{
	color: #FBAF3F;
}
#social aside .meks-instagram-widget .imgbox:before{
	content: "";
	position: absolute;
	bottom:10px;
	right:10px;
	width:18px;
	height: 18px;
	background: url("../img/instagram.svg") center / 100% auto no-repeat;
	pointer-events: none;
	z-index: 10;
}
/* ----------------------------------------------------------------- Case Studies  */
#casestudy{
	background: #fff;
}
#casestudy > block{
	display: block;
	background: #fff;
	padding:60px 80px 1px;
}
block.section{
	height: auto;
}
#casestudy > block.footer{
	padding:40px 80px;
}
#casestudy .section.feature{
	/*animatin name - duration - ease- delay - direction*/
	/*animation:pagehead 1.8s cubic-bezier(.65,0,0.2,1) 0.6s forwards;*/
}
#cshead{
	border:none;
}
#cshead .innerframe{
	height: 100%;
}
#cshead .pagehead{
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
	padding:0;
	color: #fff;
	width:90%;
	max-width:750px;
	position: absolute;
	bottom:40px;
	left:0;
}


@keyframes pagehead {
	0%{
		height:100vh;
	}
	5%{
		height:105vh;
	}
	100% {
		height:80vh;

	}
}
#cshead .pagehead h1.title{
	margin: 0 0 5px;
}
#cshead .pagehead .strapline{
	margin: 0;
	width:60%;
}
#casestudy .intro{
	padding-top: 40px;
}
#casestudy .intro .txtbox{
	display: block;
	width: 90%;
	max-width: 800px;
	
}

#casestudy .videobox {
	margin:0 auto 15px;
	max-width: 1600px;
	width: 100%;
}
#casestudy .v_iframe {
  background-color: #efefef;
}
#casestudy .section.wideband{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100px 80px;
	height: auto;
	
}
#casestudy .section.wideband{
	margin: 40px 0 10px;
}
#casestudy .section.greybox{
	height: auto;
}
#casestudy .section.whitebox{
	color: #444853;
}
#casestudy .section.featimg{
	min-height: 70vh;
}

#casestudy .section.featimg:before{
	content:"";
	z-index:0;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
}
#casestudy .featimg.fixed{
	background-attachment: fixed;
}
#casestudy .wideband .innerframe{
	z-index: 10;
	position: relative;
	height: auto;
}
.section.wideband .txtbox{
	display: block;
	max-width: 800px;
	margin: 0 auto;
}

#casestudy .boxFrame{
	display: flex;
	justify-content:center;
	flex-wrap: wrap;
	flex-direction: row;
	/*align-items: center;*/
}

#casestudy .boxFrame.Right{
	flex-direction: row-reverse;
}
#casestudy .boxFrame .txtbox{
	display: block;
	width:35%;
	padding: 0 4% 0 0;
}
#casestudy .boxFrame .imgbox,
#casestudy .boxFrame .videobox{
	width:65%;
}
#casestudy .boxFrame.Right .txtbox{
	padding: 0 0 0 4%;
}
/* Work  */
body.home #masthead .tagline,
body.work #masthead .tagline{
	color: #444853;
}
#work{
	
}
#work .pagemarker{
	position: fixed;
	z-index: 400;
}
#work .pageheader{
	padding: 100px 0 0;
}
#work .pageheader .txtbox{
	display: block;
	max-width:800px;
	margin: 0 auto;
}
#work .worklist {
	display: block;
	padding: 100px 0 1px;
}
#work .worklist .casestudy{
	display: block;
	margin:0 0 100px;
	
}
#work .worklist .casestudy *{
		
}
.worklist .casestudy a{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.worklist .casestudy .imgbox,
.worklist .casestudy .txtbox{
	width:50%;
}
.worklist .casestudy .txtbox{
	padding: 20px 3%;
	/*display: flex;
	flex-direction: column;
	justify-content: center;*/
}
.worklist .casestudy:nth-of-type(even) a{
	flex-direction: row-reverse;
}
.worklist .casestudy:nth-of-type(even) .txtbox{

}
.worklist .casestudy .featimg{
    position:relative;
  	/*padding-top: 56%;*/
	padding-top: 65%;
	overflow: hidden;
	background-color: #efefef;
}
.worklist .casestudy .featimg img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
			transition:all 0.6s cubic-bezier(.65,1.3,0.2,1);
	-webkit-transition:all 0.6s cubic-bezier(.65,1.3,0.2,1);
	object-fit: cover;
}
.worklist .casestudy .strapline{
	width:70%;
}
.worklist .casestudy:hover .featimg img{
	transform: scale(1.1);
}
.worklist .casestudy .number{
	font-weight: 600;
	color: #FBAF3F;
}
.worklist .casestudy:hover .title{
	color: #FBAF3F;
}
/* ----------------------------------------------------------------- Culture  */

#splitScreen.culture{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	padding-left:0;
}
#splitScreen.culture #txtside{
	display: block;
	width:100%;
	height: auto;
	z-index: 20;
	
}
#splitScreen.culture .pagehead{
	text-align: center;
	z-index: 50;
	position: relative;
}
/*#splitScreen.culture .pagehead .nextframe {
	display: block;
	right: 24px;
}*/

#splitScreen.culture .pagehead h1{
	display: block;
	margin: 0 auto;
	max-width:800px;
}
/*Changed 04/10/19*/
/*#splitScreen.culture #txtside .innerframe {
	display: block;
	width:50%;
	background: #fff;
	padding: 50px 4% 100px;
	margin: -20vh 0 0;
}*/
#splitScreen.culture #txtside .innerframe {
	display: block;
	width:100%;
	max-width: 800px;
	background: #fff;
	padding: 50px 0 100px;
	margin:0 auto;
}
#splitScreen.culture #imgside{
	height: 100vh;
	position: relative;
	width:100%;
	z-index: 0;
	
}

.section.slidetxt{
	/*border-top:1px solid #e6e5e6;*/
}
.section.slidetxt .featimg{
	width:100%;
	height: 100%;
}
.section.slidetxt .txtbox{
	position: absolute;
	top:0;
	right:-50%;
	height: 100%;
	width:50%;
	background: #fff;
			transition:all 0.8s cubic-bezier(.65,1.3,0.2,1) 0.25s;
	-webkit-transition:all 0.8s cubic-bezier(.65,1.3,0.2,1) 0.25s;
}
.section.slidetxt:nth-of-type(even) .txtbox{
	right:-50%;
}
.section.slidetxt:nth-of-type(even) .txtbox.active{
	right:0;
}
.section.slidetxt:nth-of-type(odd) .txtbox{
	left:-50%;
}
.section.slidetxt:nth-of-type(odd) .txtbox.active{
	left:0;
}

.section.slidetxt .txtbox > div{
	padding: 50px 8%;
	display: flex;
	justify-content: center;
	flex-flow: column;
	height: 100%;
	overflow: auto;
}

.section.slidetxt .txtbox .close{
	position: absolute;
	top:10px;
	bottom:10px;
	right:100%;
	background: #fff;
	width:50px;
	height: 50px;
	margin:auto 10px;
	padding: 13px;
	border-radius: 4px;
}
.section.slidetxt:nth-of-type(odd) .txtbox .close{
	left:100%;
}
.section.slidetxt .txtbox .close svg{
	width:22px;
	height: 22px;
	transform: rotate(-45deg);
			transition:all 0.8s cubic-bezier(.65,1.3,0.2,1) 0.25s;
	-webkit-transition:all 0.8s cubic-bezier(.65,1.3,0.2,1) 0.25s;
	
}
.section.slidetxt .txtbox.active .close svg{
	transform: rotate(0);
	color: #FBAF3F;
}

#jobs{
	height: auto;
	border:none;
}

#jobs .txtbox{
	display: block;
	max-width:800px;
	margin: 0 auto;
	padding: 100px 0 50px;
}

#jobs .hiring{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
#jobs .hiring .title{
	margin: 0 20px 0 0;
}


/* ----------------------------------------------------------------- Join Us  */

#jobslist{
	display: block;
	margin: 0 auto 100px;
	padding: 20px 0 0;
	max-width:800px;
}

#jobslist .job{
	position: relative;
	display: block;
	margin: 0 0 30px;
}
/*#jobslist .job:before{
	content:"";
	position: absolute;
	top:-10px;
	left:-10px;
	right:-10px;
	bottom:110%;
	background:#f9f9f9;
					transition:bottom 0.8s cubic-bezier(.65,1.3,0.2,1) 0.25s;
			-webkit-transition:bottom 0.8s cubic-bezier(.65,1.3,0.2,1) 0.25s;
}
#jobslist .job:hover:before{
	bottom:-10px;
	z-index: -1;
}*/
#jobpost .date,
#jobslist .job .more,
#jobslist .job .date{
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}
#jobslist .job a{
	display: block;
}
#jobpost .date span,
#jobslist .job .date span{
	color: #FBAF3F;
}
#jobslist .job .more{
	border-bottom:1px solid #e6e5e6;
	text-align: right;
	padding-bottom: 10px;
	margin-bottom: 0;
}
/*#jobslist .job:hover .more,*/
#jobslist .job:hover h3{
	color: #FBAF3F;
	/*border-color: #FBAF3F;*/
}


/* ----------------------------------------------------------------- JobPost  */
#jobpost .jobinfo{
	border-bottom: 3px solid #FBAF3F;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

#jobpost h1{
	padding-bottom: 10px;
	margin-bottom: 30px;
	border-bottom:1px solid #e6e5e6;
}

#jobpost .apply{
	display: block;
}

/* ----------------------------------------------------------------- Contact  */
#splitScreen.contact h1{
	margin-bottom: 50px;
}
.flexgrid.contact{
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
	margin: 0 0 30px;
}
.flexgrid.contact  > .title{
	width:40%;
	display: block;
	padding: 0 40px 0 0;
}
.flexgrid.contact  > .txtbox{
	width:60%;
	border-left:1px solid #e6e5e6;
	display: block;
	padding: 10px 0 10px 40px;
}
#splitScreen.contact .map{
	display: block;
	margin: 0;
	border-top:1px solid #e6e5e6;
	overflow: hidden;
}
#splitScreen.contact .map iframe{
	display: block;
	margin: 0 0 -5px;
}
/* ----------------------------------------------------------------- Awards  */
#splitScreen.awards .panel .txtbox{
	padding: 50px 8%;
}
/* ----------------------------------------------------------------- 404  */

.notfound{
	color: #fff;
	text-align:center;
}
.notfound h1{
	font-size: 6vw;
	line-height: 6.8vw;
}
/* ----------------------------------------------------------------- Cookie override 29/02/24  */
#ot-sdk-btn-floating.ot-floating-button {
	right: 10px !important;
	left: auto !important;
}
/* ----------------------------------------------------------------- XXX  */

/* ----------------------------------------------------------------- XXX  */

/* ----------------------------------------------------------------- XXX  */



/*----------------------------------------------------------------------------------------------------------------------- Begin Responsive Queries*/
/* ----------------------------------------------------------------------- Min Withs Smallest to largest */
@media only screen and (min-width: 768px) {
	/*Navigation*/
	nav-menu li.hasdrop.active > a{
		color: #FBAF3F;
		border-right:2px solid #FBAF3F;
	}
}
@media only screen and (min-width: 1024px) {
	/*Navigation*/
	
	/*Full ScreenVideo Hack*/
	.videobox.fullscreen{
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		       transform: translate(-50%, -50%);
		min-width: 102%;
		min-height: 102%;
		-o-object-fit: cover;
		object-fit: cover;
		max-width: 102%;
/*		user-select: none;
	-moz-user-focus: normal;*/
		z-index: 0;
		margin: 0;
	}
	/*Work*/
	.section.feature .featimg{
		background-position: center 20%;
	}
	/*Home*/
	#featvideo h1{
		font-size: 4.5vw;
	}
	
}
@media only screen and (min-width: 1280px) {
	/*Home*/
	.section.feature .featimg{
		background-attachment: fixed;
	}
	/*Scrolling Behaviour*/
	#masthead:before{
		content:"";
		display: block;
		position: fixed;
		top:0;
		left:0;
		width:100%;
		height: 80px;
		background:#fff;
		opacity: 0;
		box-shadow: 0px -1px 6px rgba(0,0,0,0.25);
		pointer-events: none;
	}
	
	#masthead:before,
	#masthead #menu_icon,
	#masthead #logo{
			transition:all 0.8s cubic-bezier(.65,1.3,0.2,1) 0.25s;
	-webkit-transition:all 0.8s cubic-bezier(.65,1.3,0.2,1) 0.25s;	
	}
	
	body.work #offcanvas.docked:not(.active) #masthead:before,
	body.join-us #offcanvas.docked:not(.active) #masthead:before,
	body.single-case_studies #offcanvas.docked:not(.active) #masthead:before,
	body.home #offcanvas.docked:not(.active) #masthead:before{
		opacity: 1;
	}
	
	body.join-us #offcanvas.docked:not(.active) #masthead.scrolldown:before,
	body.join-us #offcanvas:not(.active) #masthead.scrolldown #menu_icon,
	body.join-us #offcanvas:not(.active) #masthead.scrolldown #logo,
	body.single-case_studies #offcanvas.docked:not(.active) #masthead.scrolldown:before,
	body.single-case_studies #offcanvas:not(.active) #masthead.scrolldown #menu_icon,
	body.single-case_studies #offcanvas:not(.active) #masthead.scrolldown #logo,
	body.home #offcanvas.docked:not(.active) #masthead.scrolldown:before,
	body.home #offcanvas:not(.active) #masthead.scrolldown #menu_icon,
	body.home #offcanvas:not(.active) #masthead.scrolldown #logo {
		top:-130px;
	}
	
	#splitScreen.culture .pagehead h1{
		font-size: 50px;
		line-height: 60px;
	}
}
@media only screen and (min-width: 1680px) {
	/*Masthead*/
	#masthead:before{
		height: 100px;
	}
	/*body.single-case_studies #offcanvas.docked:not(.active) #masthead:before{
		opacity: 0;
	}
	body.single-case_studies #offcanvas.docked:not(.active) #masthead .tagline,
	body.work #masthead .tagline{
		color:#444853;
		opacity: 1;
	}*/
	/*Home*/
	#featvideo h1{
		font-size: 4vw;
	}
	#splitScreen.culture .pagehead h1{
		font-size: 60px;
		line-height: 70px;
	}
}

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

@media only screen and (max-width: 1679px) {
	/*masthead*/
	#logo{
		width:90px;
		height: 90px;
	}
	/*navigation*/
	ul.nav-menu > li > a {

		font-size: 34px;
		line-height: 44px;
	}
	/*Home*/
	#awards h2 {
		font-size: 74px;
		line-height: 84px;
	}
	#about .carousel {
		width: 65%;
	}
	#about .txtbox {
		padding: 3% 80px 3% 3%;
		width: 35%;
	}
	#feed{
		height: auto;
	}
	
	#news .pagemarker,
	#feed .pagemarker{
		bottom:0;
	}
	
	/*Showreel*/
	.videobox.fullscreen .v_iframe {
		position: relative;
		padding-top: 56%;
		width: 130%;
		left: -15%;
		height: 102vh;
		margin: 0;
	}
	/*Case Study*/
	
	#cshead .pagehead{
		left:30px;
	}
	#casestudy > block {
		padding: 40px 20px 1px;
	}
	#casestudy .section.wideband {
		padding: 100px 20px;
	}
	#cshead .pagehead,
	#casestudy .intro .txtbox {
		max-width: 750px;
	}
	#casestudy .txtblock > div {
		padding: 10px 3% 0 0;
	}
	#casestudy .boxFrame.Right .txtbox {
		padding: 0 0 0 3%;
	}
	.postnav > div {
		padding: 15px 20px 20px;
	}
	/*Footer*/
	
	body.showreel #footer, body.culture #footer, body.home #footer, body.work #footer, body.single-case_studies #footer,
	#footer {
		padding: 25px 20px 20px;
	}
	
	/*Work*/
	#work .pagemarker {
		right: -362px;

	}
	#work .hoverwipe {
		left: calc(4% - 10px);
		bottom: 35px;
	}
	
	/*Culture - Join Us*/
	#splitScreen.culture #txtside .innerframe {
		width: 60%;
	}
	#splitScreen.culture .pagehead h1{
		max-width:700px;
	}
	/*News*/
	#splitScreen #txtside .innerframe, 
	#blogframe #newsmain .innerframe {
		padding: 50vh 4% 50px;
	}
	
	/*Work*/
	#work .worklist{
		padding: 100px 20px 1px;
	}
	#work .worklist .casestudy {
		margin: 0 0 60px;
	}
	.worklist .casestudy .imgbox{
		width:60%;
	}
	.worklist .casestudy .txtbox{
		width:40%;
	}
	/*Home*/
	.section.feature .hoverwipe {
		left: 30px;
	}
	
}

@media only screen and (max-width: 1279px) {
	
	/*masthead*/
	#logo{
		width:80px;
		height: 80px;
	}
	#offcanvas:not(.active) #masthead::before {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80px;
		background: #fff;
		opacity: 0;
		box-shadow: 0px -1px 6px rgba(0,0,0,0.25);
		transition: all 0.8s cubic-bezier(.65,0,0.2,1);
		-webkit-transition: all 0.8s cubic-bezier(.65,0,0.2,1);
	}
	#offcanvas.docked #masthead::before {
		opacity: 1;
	}
	/*#offcanvas.docked:not(.active) #masthead .tagline,*/
	
	/*#offcanvas.docked #masthead .tagline {
		display: inline-block;
		transform: rotate(0);
		transform-origin: 0 center;
		bottom: auto;
		position: absolute;
		width: auto;
		top: 36px;
		text-align: left;
		opacity: 1;
		left: 85px;
		margin: auto;
		z-index: 500;
		height: 18px;
		color: #A0A7AF;
	}*/
	
	/*Footer*/
	body.showreel #footer, body.culture #footer, body.home #footer, body.work #footer, body.single-case_studies #footer, #footer {
		padding: 25px 20px 20px;
	}
	#footer{
		margin-left: 40%;
	}
	/*Navigation*/
	ul.nav-menu li.hasdrop.active ul{
		width: 110%;
		padding: 20px 30px;
		border-left: 1px solid rgba(0,0,0,0.13);
	}
	ul.nav-menu > li > a {
		font-size: 30px;
		line-height: 40px;
	}
	
	ul.nav-menu > li ul li a {
		font-size: 24px;
		line-height: 28px;
	}
	.menuFrame .imageframe{
		left: 66%;
	}
	#offcanvas.active .imageframe {
		width: 34%;
	}
	.midframe {
		padding: 20px 3%;
	}
	/*Home*/
	#about h2, #brands h2, #awards h2 {
		font-size: 60px;
		line-height: 70px;
		text-align: center;
	}
	.article .wrap {
		top:0;
		opacity: 1;
		background: rgba(0,0,0,0.4);
		
	}
	/*Case Study*/
	#cshead .pagehead{
		left:20px;
	}
	#casestudy > block {
		padding: 20px 20px 1px;
	}
	#casestudy .section.wideband {
		padding: 100px 20px;
	}
	#cshead .pagehead,
	#casestudy .intro .txtbox {
		max-width: 700px;
	}
	#casestudy .txtblock > div {
		padding: 0 3% 0 0;
	}
	.postnav > div {
		padding: 15px 20px 20px;
	}

	.postnav a h3{
		font-size: 22px;
		line-height: 32px;
	}
	#casestudy .featimg.fixed {
		background-attachment: unset;
	}
	/*Home*/
	#awards h2 {
		font-size: 46px;
		line-height: 56px;
	}
	.hoverwipe {
		max-width: 700px;
	}

	.article .wrap .txtwrap {
		width: 80%;
	}
	
	/*Awards*/
	#splitScreen, #blogframe {
		padding-left: 40%;
	}
	#splitScreen #imgside, #blogframe #newsside {
		width: 40%;
	}
	#blogframe.postpage .postmeta {
		width: 90%;
	}
	#splitScreen.awards .panel .txtbox {
		padding: 40px 8%;
	}
	#splitScreen .panel .txtbox.rte ol li, 
	#splitScreen .panel .txtbox.rte ul li {
		width: 100%;
	}
	.pagemarker{
		right: -362px;
	}
	/*Work*/
	/*#work .worklist{
		padding: 60px 7% 1px;
	}*/
	#work .worklist .casestudy {
		margin: 0 0 60px;
	}
	#work .pageheader {
		padding: 60px 0 0;
	}
	
	#work .pageheader .txtbox {
		max-width: 600px;
	}
	
	#work .casestudy .title{
		font-size: 26px;
		line-height: 36px;
	}
	.worklist .casestudy .strapline {
		width: 100%;
		font-size: 14px;
		line-height: 22px;
	}
	/*Culture*/
	#splitScreen.culture #txtside .innerframe {
		width: 70%;
	}
	/*News*/
	#sidepanel {
		width: calc(40vw - 80px);
	}
	
}
@media only screen and (max-width: 1023px) {
	
	/*WP Logged in Admin Bar */
	body.logged-in.admin-bar{
		padding-top:0;
		margin-top: -46px;
	}

	/*----------------------------------Typeography*/
	h1, .h1 {
		font-size: 44px;
		line-height: 54px;
	}
	.rte h1,
	.h2,
	h2 {
		font-size: 34px;
		line-height: 44px;
	  }

	h3 {
		font-size: 30px;
		line-height: 40px;
	  }

	h4 {
		font-size: 24px;
		line-height: 34px;
	  }
	blockquote cite,
	h5 {
		font-size: 20px;
		line-height: 30px;
	  }

	h6 {
		font-size: 20px;
		line-height: 30px;
	}

	p {
		font-size: 14px;
		line-height: 24px;
	}
	/*Masthead*/
	#offcanvas:not(.active) #masthead:before {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80px;
		background: #fff;
		opacity: 0;
		box-shadow: 0px -1px 6px rgba(0,0,0,0.25);
				transition: all 0.8s cubic-bezier(.65,0,0.2,1);
		-webkit-transition: all 0.8s cubic-bezier(.65,0,0.2,1);
	}
	
	#offcanvas.docked #masthead:before {
		opacity: 1;
	}
	#offcanvas.docked:not(.active) #menu_icon:not(:hover) .line {
		background-color: #444853;
	}
	
	/*Navigation*/
	.menu-main-menu-container {
		width: 50%;
		z-index: 10;
		
	}
	.menu-main-menu-container{
		/*background: rgba(255,255,255,0.9);*/
	}
	.midframe {
		width: 50%;
		z-index: 9;
	}
	.menuFrame .imageframe {
		width: 30%;
		height: 100%;
		z-index: 1;
		position: absolute;
		top: 0;
		left:auto;
		right: 0;
		border-top: 1px solid rgba(0,0,0,0.13);
	}
	.menuFrame .imageframe:before{
		content:"";
		position: absolute;
		top:0;
		left:100%;
		width:100%;
		height: 100%;
		display: block;
		background: rgba(255,255,255,0.85);
				transition: all 0.8s cubic-bezier(.65,0,0.2,1) 0.75s;
		-webkit-transition: all 0.8s cubic-bezier(.65,0,0.2,1) 0.75s;
	}
	
	#offcanvas.active .imageframe{
		width:100%;
	}
	#offcanvas.active .imageframe:before{
		left:0;
	}
	#offcanvas.docked:not(.active) #masthead .tagline{
		opacity: 0;
	}
	/*Navigation*/
	ul.nav-menu{
		
	}
	ul.nav-menu li.hasdrop{
		background-image: url("../img/close.svg") center right / 50px auto no-repeat;
		padding-right: 20px;
	}
	
	ul.nav-menu li.hasdrop.active ul{
		display: block;
		flex-direction: unset;
		justify-content: unset;
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: initial;
		border-right: none;
		padding: 20px 0;
		margin-left:0;
		border:none;
		border-top:1px solid #666;
		border-bottom:1px solid #666;
		background: none;
	}
	ul.nav-menu > li ul li a {
		font-size: 24px;
		line-height: 28px;
	}	
	ul.nav-menu li.active > a {
		border-right:none;
	}
	/*Footer*/
	#footer{
		margin: 0;
	}
	#footer .innerframe {
		padding-left: 15%;
	}
	
	/*Home*/
	.hoverwipe {
		width:auto;
		right:50px;
		left: 50px;
		bottom:40px;
	}
	.section .nextframe{
		display: none;
	}
	.section:nth-child(1) .nextframe{
		display: block;
	}
	#about h2, #brands h2, #awards h2 {
		font-size: 52px;
		line-height: 62px;
	}
	#featvideo:before{
		background-position:center 70%, cetner;
		background-size:50% auto, cover;
	}
	
	#featvideo .button{
		bottom: 15vh;
	}
	#brands{
		padding:20px 50px 10vh
	}
	#about{
		/*height: auto;*/
	}
	#about .carousel {
		width: 100%;
		height: 80vh;
		
	}
	#about .carousel .bx-wrapper{
		position: relative;
		max-height: 100%;
	}
	#about .txtbox {
		padding: 50px 50px;
		width: 100%;
		position: relative;
		background: #fff;
	}
	#news{
		height: auto;
	}
	.newsGrid {
		width:100%;
		display: block;
		grid-template-columns:none;
		height: auto;
	}
	.newsGrid .article {
		height: auto;
	}
	.newsGrid .article:nth-child(n) .wrap {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		top: auto;
		left: auto;
		bottom: auto;
		width: 100%;
		height: auto;
		padding:40px 20px;
		margin: 0;
		z-index: 10;
		color: #444853;
		opacity:1;
		background: #fff;
	}
	.newsGrid .article .wrap .txtwrap {
		border-bottom: 1px solid #e6e5e6;
		max-width: 100%;
	}
	.newsGrid .article:nth-child(n) .featimg{
		position: relative;
		height: auto;
	}
	#social aside .meks-instagram-widget > div{
		flex: 0 0 50% !important;
	}
	/*FullScreenVideo - Hack*/
	.videobox.fullscreen {
		display: block;
		margin: 0;
		padding: 0;
		max-width: 1080px;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
	}
	.videobox.fullscreen .v_iframe {
		position: relative;
		padding-top: 56%;
		width: 316%;
		left: -108%;
		height: 100vh;
	}
	/*Case Study*/
	.pagemarker{
		right: -360px;
	}
	#cshead .pagehead .strapline {
		width: 75%;
	}
	#casestudy .intro .txtbox {
		max-width: 100%;
		width: 100%;
	}
	#casestudy .txtblock {
		margin-bottom: 0;
	}
	#casestudy .txtblock > div,
	#casestudy .imgblock > div {
		width: 100%;
		padding: 0;
	}
	#casestudy .imgblock .leftimg{
		margin-bottom: 15px;
	}
	#casestudy .txtblock > div{
		margin-bottom:10px;
	}
	#casestudy .boxFrame{
		flex-wrap: wrap;
	}
	#casestudy .boxFrame .imgbox,
	#casestudy .boxFrame .videobox{
		width:100%;
	}
	#casestudy .boxFrame .txtbox,
	#casestudy .boxFrame.Right .txtbox{
		padding: 0 0 15px;
		width:100%;
	}
	.section.wideband .txtbox {
		max-width: 80%;
	}
	/*SplitScreen*/
	
	#splitScreen, #blogframe {
		padding-left:0;
	}
	#splitScreen #imgside, 
	#blogframe #newsside {
		width: 100%;
		/*height: 80vh;*/
		position: relative;
	}
	#splitScreen #txtside .innerframe, 
	#blogframe #newsmain .innerframe {
		padding: 50px 8%;
	}
	.pagehead .nextframe.arrow {
		/*display: inline-block;*/
	}
	/*Work*/
	#work .pagemarker{
		display: none;
	}
	#work .pageheader .txtbox {
		max-width:500px;
	}
	/*#work .worklist {
		padding: 60px 20px 1px;
	}*/
	/*Culture*/
	#splitScreen.culture #txtside .innerframe {
		width: 100%;
		margin: 0;
		padding: 50px 8%;
	}
	#jobs .txtbox {
		padding: 50px 30px;
	}
	.section.slidetxt .featimg{
		height: auto;
	}
	#culture .section.slidetxt .txtbox {
		position: relative;
		top: auto;
		right: auto;
		left:auto;
		height:auto;
		width: 100%;
		background: #fff;
	}
	.section.slidetxt:nth-of-type(n) .txtbox .close {
		display: none;
	}
	#splitScreen.culture .pagehead h1 {
		max-width: 90%;
	}
	
	#jobs{
		padding: 0 8%;
	}
	#jobs .txtbox {
		padding: 0 0 30px 0;
	}
	/*News*/
	.postwrap .txtbox h3 {
		width: 100%;
	}
	
	/*#blogframe.postpage #newsside{
		height: 80vh;
	}*/

	#sidepanel.active,
	#sidepanel {
		display: block;
		position: absolute;
		top: auto;
		left: 0;
		width: 100%;
		height: 60px;
		color: #fff;
		z-index: 5000;
		border-right: 1px solid transparent;
		-webkit-transition: all ease-in-out 0.4s, color ease-in-out 0.3s;
		transition: all ease-in-out 0.4s, color ease-in-out 0.3s;
		bottom: 40px;
		padding: 0 100px;
	}
	#sidepanel #widgets {
		position: fixed;
		top: 0;
		right: 0;
		width: calc(100% - 80px);
		opacity: 1;
		visibility: visible;
		background: #fff;
		z-index: 9999;
		margin: 0;
		padding: 15vh 5% 0;
	}
	#sidepanel.active #widgets{
		left:0;
	}
	#sidepanel .close {
		display: block;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}
}
@media only screen and (max-width: 767px) {
	/*Typeography*/
	h1, .h1 {
		font-size: 36px;
		line-height: 46px;
	}
	.rte h1, 
	.h2, 
	h2 {
		font-size: 30px;
		line-height: 40px;
	}
	
	h3 {
		font-size: 24px;
		line-height: 34px;
	  }

	h4 {
		font-size: 22px;
		line-height: 32px;
	  }
	blockquote cite,
	h5 {
		font-size: 20px;
		line-height: 30px;
	  }

	h6 {
		font-size: 20px;
		line-height: 30px;
	}

	
	/*Masthead*/
	
	
	.menu-main-menu-container {
		width: 100%;
		
	}

	
	/*Navigation*/
	ul.nav-menu {
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		display: block;
		padding: 15vh 8% 1px 8%;
		border: none;
	}
	ul.nav-menu > li,
	ul.nav-menu > li > a {
		font-size: 28px;
		line-height: 38px;
	}
	
	ul.nav-menu > li:last-child{
		margin-bottom: 10vh;
	}

	ul.nav-menu > li.hasdrop {
		border-right:none;
		padding-right: 0;
	}
	ul.nav-menu li.hasdrop.active ul{
		background: none;
	}
	
	ul.nav-menu > li ul li a {
		display: block;
		font-size: 16px;
		line-height: 22px;
		margin: 0;
	}
	ul.nav-menu li.active > a {
		color: #FBAF3F;
		border-right: none;
	}
	.midframe{
		display: none;
	}
	/*Home*/
	.hoverwipe {
		right:20px;
		left: 20px;
		bottom: 20px;
	}
	.hoverwipe .title {
		max-width: 100%;
	}
	/*Case Studies*/
	#cshead .pagehead {
		width: 80%;
	}
	#cshead .pagehead .strapline {
		width: 90%;
	}
	#casestudy > block {
		padding: 20px 20px 1px;
	}
	#casestudy .txtblock > .leftblock{
		padding: 15px 0 0;
	}
	#casestudy .txtblock > .rightblock {
		padding: 0 0 20px;
	}
	#casestudy .section.featimg {
		min-height: auto;
	}
	.postnav a h3 {
		font-size: 20px;
		line-height: 30px;
	}
	.postnav a h4, 
	.postnav a h3 {
		margin-bottom: 0;
	}
	/*Work*/
	#work .pageheader .txtbox {
		padding: 60px 7% 1px;
	}
	.worklist .casestudy .imgbox,
	.worklist .casestudy .txtbox{
		width:100%;
	}
	
	.worklist .casestudy .txtbox{
		padding: 20px 5%;
	}
	/*Joinis Us*/
	#splitScreen.culture #txtside .innerframe {
		padding: 50px 20px 1px;
	}
	#jobs {
		padding: 0 20px;
	}
	/*Contact*/
	.flexgrid.contact > .title,
	.flexgrid.contact > .txtbox{
		width:100%;
		border:none;
	}
	.flexgrid.contact > .txtbox {
		padding:0 0 0 30px;
	}
	
	/*General*/
	#splitScreen #txtside .innerframe, 
	#blogframe #newsmain .innerframe {
		padding: 50px 20px;
	}
	.rte table td,
	.rte table tr{
		display: block;
		width:100%;
		
	}
	.rte table td{
		padding: 10px 0;
	}
	.rte table td p{
		margin: 0 0 10px;
	}
	
}
@media only screen and (max-width: 599px) {

}
/*iphone6 + regular android*/
@media only screen and (max-width: 479px) { 
	/*Masthead*/
	#masthead {
		width: 60px;
		padding: 25px 5px;
	}
	#menu_icon{
		top:20px;
	}
	#masthead .tagline {
		top: 200px;
		left: 8px;
		transition: all 0.8s cubic-bezier(.65,0,0.2,1);
-webkit-transition: all 0.8s cubic-bezier(.65,0,0.2,1);
		
	}
	#offcanvas.active .tagline {
		left: 0;
	}
	#logo {
		width: 60px;
		height: 60px;
		top:12px;
		right:18px;
	}
	#offcanvas.docked:not(.active) #logo {
		transform: scale(0.8);
	}
	.navframe_content {
		padding: 0 0 0 60px;
	}
	#offcanvas:not(.active) #menu_icon{
		left:17px;
	}
	#offcanvas.docked:not(.active) #menu_icon{
		top:15px;

	}
	
	#offcanvas:not(.active) #masthead::before {
		height: 70px;
	}
	/*Navigation*/
	ul.nav-menu {
		padding: 12vh 10% 1px 10%;
	}
	.menuFrame .social {
		bottom: 0;
		padding: 40px 15px 20px;
	}
	.menuFrame .social a {
		padding: 0;
	}
	
	ul.nav-menu > li > a {
		font-size: 30px;
		line-height: 40px;
	}
	
	/*----------------------------------Typeography*/
	h1, .h1 {
		font-size: 32px;
		line-height: 42px;
		font-weight:700;
	}
	
	.rte h1,
	.h2,
	h2 {
		font-size: 26px;
		line-height: 36px;
	  }

	h3 {
		font-size: 22px;
		line-height: 32px;
	  }

	h4 {
		font-size: 20px;
		line-height: 30px;
	  }
	blockquote cite,
	h5 {
		font-size: 18px;
		line-height: 24px;
		font-weight: 600;
	  }

	h6 {
		font-size: 18px;
		line-height: 24px;
	}

	p {
		font-size: 14px;
		line-height: 24px;
	}
	/*Footer*/
	/*#footer ul li{
		display: block;
	}*/
	/*Home*/
	/*.pagemarker{
		display: none;
	}*/
	.section.feature .hoverwipe {
		left: 0;
		right: 0;
	}
	.hoverwipe .wrap {
		padding: 10px 60px 15px 15px;
	}
	.hoverwipe .strapline {
		width: 100%;
		font-size: 14px;
		line-height: 22px;
	}
	.hoverwipe svg {
		width: 50px;
		height: 50px;
	}
	#featvideo:before{
		background-size: 220px auto, cover;
	}
	#awards {
		padding: 3vh 20px;
	}
	#about h2, #brands h2, #awards h2 {
		font-size: 32px;
		line-height: 42px;
	}
	#brands {
		padding: 3vh 20px;
	}
	.section .nextframe {
		right: -20px;
	}
	#about .txtbox {
		padding: 40px 20px;
	}
	.article .wrap .txtwrap {
		width: 100%;
	}
	#social aside .meks-instagram-widget > div{
		flex: 0 0 100% !important;
		margin-bottom: 10px;
	}
	#social aside .meks-instagram-widget .imgbox{
		margin:0 20px;
	}
	#social aside .meks-instagram-widget .txtbox{
		padding: 20px;
	}
	
	/*Case Study*/
	#cshead .pagehead .strapline {
		width: 100%;
	}
	.section.wideband .txtbox {
		max-width: 90%;
	}
	
	/*SplitScreen*/
	#imgside .pagehead,
	#newsside .pagehead {
		padding: 40px 20px;
	}
	#splitScreen #txtside .innerframe, 
	#blogframe #newsmain .innerframe {
		padding: 40px 20px;
	}
	.pagemarker {
		right: -366px;
		bottom: 20px;
	}
	/*Showreel*/	
	.videoplay.h1 {
		font-size: 30px;
	}
	/*Culture*/
	#splitScreen.culture .pagehead h1{
		margin: 0;
	}
	.section.slidetxt .txtbox > div,
	#splitScreen.culture #txtside .innerframe,
	#jobs .txtbox {
		padding: 30px 20px;
	}
	#jobs .hiring {
		display: block;
		justify-content: normal;
		align-items: normal;
	}
	#jobs .hiring .button{
		width:100%;
	}
	/*Contact*/
	.flexgrid.contact > .txtbox {
		padding-left:30px;
	}
	/*Work*/
	#work .pageheader .txtbox {
		padding: 50vh 20px 1px;
	}
	#work .worklist {
		padding: 30px 20px 1px;
	}
	#work .worklist .casestudy {
		margin: 0 0 30px;
	}
	/*Join us*/
	#splitScreen.culture .pagehead h1 {
		text-align: left;
	}
	#splitScreen.culture .pagehead .nextframe {
		right: auto;
	}

}
/*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 -------------------- */

	/*----------------------------------------------------------------------------taken from animate.css */
	.animated {
	  -webkit-animation-duration: 1.3s;
	  animation-duration: 1.3s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	}

    	
	
	
	/*----------------------------------------------------------------------------written by Kolen*/
	.fadeUpSlow {
	  -webkit-animation-name: fadeUpSlow;
	  animation-name: fadeUpSlow;
	  -webkit-animation-duration:1.6s;
	  animation-duration:1.6s;
	  -webkit-animation-count:1;
	  animation-count:1;
	  -webkit-animation-fill-mode:forwards;
	  animation-fill-mode:forwards;
	}
	.fadeDownSlow {
	  -webkit-animation-name: fadeDownSlow;
	  animation-name: fadeDownSlow;
	  -webkit-animation-duration:2.0s;
	  animation-duration:2.0s;
	  -webkit-animation-count:1;
	  animation-count:1;
	  -webkit-animation-fill-mode:forwards;
	  animation-fill-mode:forwards;
	}
	.fadeLeftSlow {
	  -webkit-animation-name: fadeLeftSlow;
	  animation-name: fadeLeftSlow;
	  -webkit-animation-duration:2.0s;
	  animation-duration:2.0s;
	  -webkit-animation-count:1;
	  animation-count:1;
	  -webkit-animation-fill-mode:forwards;
	  animation-fill-mode:forwards;
	}
	.fadeRightSlow {
	  -webkit-animation-name: fadeRightSlow;
	  animation-name: fadeRightSlow;
	  -webkit-animation-duration:2.0s;
	  animation-duration:2.0s;
	  -webkit-animation-count:1;
	  animation-count:1;
	  -webkit-animation-fill-mode:forwards;
	  animation-fill-mode:forwards;
	}
	.delay1 {
		  -webkit-animation-delay: 0.8s;
				animation-delay: 0.8s;
	}
    
    .fadeIn {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
      -webkit-animation-duration: 2.0s;
      animation-duration: 2.0s;
      -webkit-animation-fill-mode:forwards;
	  animation-fill-mode:forwards;
    }
    
    @-webkit-keyframes fadeIn {
      0% {opacity: 0;}
      100% {opacity: 1;}
    }
    @keyframes fadeIn {
      0% {opacity: 0;}
      100% {opacity: 1;}
    } 
    
    .fadeInBlack {
      -webkit-animation-name: fadeInBlack;
      animation-name: fadeInBlack;
      -webkit-animation-duration: 1.3s;
      animation-duration: 1.3s;
      -webkit-animation-fill-mode:forwards;
	  animation-fill-mode:forwards;
    }
    
    @-webkit-keyframes fadeInBlack {
      0% {background-color:rgba(9,12,14,1);}
      100% {background-color:rgba(9,12,14,0.35);}
    }
    @keyframes fadeInBlack {
      0% {background-color:rgba(9,12,14,1);}
      100% {background-color:rgba(9,12,14,0.35);}
    } 
    
    
    
	@-webkit-keyframes fadeUpSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 15%, 0);
		transform: translate3d(0, 15%, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}
	
	@keyframes fadeUpSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 15%, 0);
		-ms-transform: translate3d(0, 15%, 0);
		transform: translate3d(0, 15%, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	  }
	}
	
	
	@-webkit-keyframes fadeDownSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -20%, 0);
		transform: translate3d(0, -20%, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}
	
	@keyframes fadeDownSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -20%, 0);
		-ms-transform: translate3d(0, -20%, 0);
		transform: translate3d(0, -20%, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	  }
	}
	
	/*test*/
	
	@-webkit-keyframes fadeLeftSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(-20%,0, 0);
		transform: translate3d(-20%,0, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}
	
	@keyframes fadeLeftSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(-20%,0, 0);
		-ms-transform: translate3d(-20%,0, 0);
		transform: translate3d(-20%,0, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	  }
	}
	
	/**/
	@-webkit-keyframes fadeRightSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(20%,0, 0);
		transform: translate3d(20%,0, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	  }
	}
	
	@keyframes fadeRightSlow {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(20%,0, 0);
		-ms-transform: translate3d(20%,0, 0);
		transform: translate3d(20%,0, 0);
	  }
	
	  100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	  }
	}
    
    @-webkit-keyframes slideInLeft {
      from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes slideInLeft {
      from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }

    .slideInLeft {
      -webkit-animation-name: slideInLeft;
      animation-name: slideInLeft;
    }

    @-webkit-keyframes slideInRight {
      from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes slideInRight {
      from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }

    .slideInRight {
      -webkit-animation-name: slideInRight;
      animation-name: slideInRight;
    }
    
    
    
    

/*--------------------------------------------------------------------------------END ANIMATIONS*/