@charset "utf-8";

/*	
	Written by Kolen Mackey for Datadial Ltd 03/06/2026
*/

@font-face {
  font-family: 'DrukCondensed';
  src: url('../fonts/DrukCondensed-Super-Embed.woff2') format('woff2'),
       url('../fonts/DrukCondensed-Super-Embed.woff') format('woff'),
       url('../fonts/DrukCondensed-Super-Embed.ttf') format('truetype');
}
@font-face {
  font-family: 'DrukWide';
  src: url('../fonts/DrukWide-Bold-Embed.woff2') format('woff2'),
       url('../fonts/DrukWide-Bold-Embed.woff') format('woff'),
       url('../fonts/DrukWide-Bold-Embed.ttf') format('truetype');
}

/*Css Variables*/
:root {
	/*2026 branding*/
	--yellow: 		#EFD541; 
    --pink:         #FF4E67;
    --navy:         #071D2C;
    --stone:        #EFE9DF;    
    --black:        #071D2C;
    --grey:         #F2F2F2;
    
    /*ui*/
    --cream: 		#F6F5F4; 
	--mid-grey:     #444853;
	--dark-grey: 	#2f3239;
	--grey_alpha: 	rgba(68,72,83,0.8);
	--light-grey:  	#A0A7AF;
    --border:       #DFE4E9;
}

/* 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:var(--navy);
    font-family: "Inter","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
    font-optical-sizing: auto;
    /*font-size: 1.0rem;*/
    font-size: 0.875rem;
    line-height: 1.2rem;
    font-weight:400;
    font-style: normal;

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

h1,.h1 {
    font-family: 'DrukCondensed', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-weight:400;
	font-size: 7.8rem;
  line-height: 6.4rem;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
    margin: 0 0 2.85rem;
}

.rte h1,
.h2,
h2 {
    font-family: 'DrukWide', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    text-transform: uppercase;
	font-size: 1.80rem;
    line-height: 2.2rem;
	letter-spacing: 0.066rem;
	font-weight: 400;
    margin: 0 0 1.85rem;
  }


.h3, h3 {
	font-weight: 800;
	font-size: 2.6rem;
	line-height: 2.8rem;
	margin: 0 0 1.85rem;
}
blockquote p,
.h4, h4 {
	font-size: 1.4rem;
	line-height: 1.8rem;
    margin: 0 0 1.25rem;
    font-weight: 800;
}

.h5, h5 {
	font-size: 1.2rem;
	line-height: 1.6rem;
	font-weight: 700;
	margin: 0 0 1.25rem;
}
blockquote cite,
.h6, 
h6 {
	font-size: 1.0rem;
	line-height: 1.4rem;
	text-transform: uppercase;
	font-weight: 800;
	margin: 0 0 1.25rem;
}

p {
    font-size: 0.875rem;
    /*font-size: 1.0rem;*/
    line-height: 1.2rem;
    font-weight:400;
    margin: 0 0 1.25rem;
}
p strong{
	font-weight:800;
}

.rte h1 strong{
	/*color:var(--yellow);*/
	font-weight:inherit;
}

/* ----------------------------------------------------------------- General*/
video,
img,
object,
embed {
  max-width: 100%;
  height: auto; 
}
img { 
	display: inline-block;
  	vertical-align: middle;
    object-fit: cover;
}

svg.icon {
	width: 20px;
	height: 20px;
	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 {
	text-decoration: underline;
	font-weight: 800;
}

.rte a:hover, 
.rte a:focus, 
.rte a:active {
	color:var(--light-grey); 
    text-decoration-color:var(--light-grey);
}

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


/*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 ol + h5,
.rte ol + h6,
.rte ul + h2,
.rte ul + h3,
.rte ul + h4,
.rte ul + h5,
.rte ul + h6,
.rte p + h2,
.rte p + h3,
.rte p + h4,
.rte p + h5,
.rte p + h6{
     margin-top: 2.85rem;
}
.rte blockquote p + h6{
    margin-top:0.85rem;
    margin-bottom:0;
    font-family: 'DrukWide', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
}

/*.rte h3 + h5{
    color: var(--yellow);
}
.rte h3 + h6{
     color: var(--pink);
}*/
.rte > p:last-of-type{
	margin-bottom: 0;
}
.rte ol,
.rte ul{
	display: block;
    margin: 0 0 1.25rem;
	padding:0 0 0 0.85rem; 
}
.rte ol li, .rte ul li {
	padding: 0 0 0 0.45rem;
	margin: 0 0 0.85rem;
	width: 100%;
}
/*.rte ol li::marker,
.rte ul li::marker{
    color:var(--yellow);
}*/

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

/*.rte strong,
.rte bold{
    font-weight:inherit;
}*/
.rte h6 strong,
.rte h2 strong{
    /*color: var(--pink);*/
}
/* ----------------------------------------------------------------- Body and Main UI */

#offcanvas {
	display:block;
	position:relative;
	overflow:hidden;
	min-height:100%;
	width:100%;
	-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: -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+ */

}
#headerimg .nextframe{
	z-index: 10;
}

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


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

#offcanvas.docked:not(.active) #logo {
	transform: scale(0.5);
    mask: url('../img/spark.svg') center / contain no-repeat;
}


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

#offcanvas.active #menu_icon{
  -webkit-transform: rotate(90deg);
  		  transform: rotate(90deg);
	pointer-events: all;
}
/*----XXX Start New Menu stuff*/
body.privacy-policy #offcanvas.docked:not(.active) #menu_icon:not(:hover) .line,
body.careers #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 #offcanvas.docked:not(.active) #menu_icon:not(:hover) .line{
	background-color:var(--mid-grey);
}
body.home #menu_icon:hover .line{
    background-color:var(--pink);
}
body.home #offcanvas:not(.docked) #menu_icon:not(:hover) .line{
    background-color: #fff;
}
/*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: #fff;
}

#offcanvas.active #masthead p.tagline{
	color: var(--mid-grey);
}


#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;
    margin: 0;
}


body.single-case_studies #offcanvas.docked:not(.active) #masthead .tagline,
body.work #offcanvas.docked:not(.active) #masthead .tagline,
body.careers #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: var(--yellow);*/
}
/* ----------------------------------------------------------------- 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:var(--pink);
	-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: 33%;
	height: 100%;
	border-left:1px solid rgba(0,0,0,0.13);
}
.menuFrame a {
	color: #fff;
}	
	
/*Navigation*/
ul.nav-menu {
	padding:0 1.85rem;
	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;
    gap:0.85rem;
}
ul.nav-menu li{
	list-style: none;
	display: block;
	min-width:100%;
}
/*Level 1*/
ul.nav-menu > li{
	
}
ul.nav-menu li a{
	color: var(--navy);
}
ul.nav-menu > li > a {

	font-size: 5rem;
	line-height: 4.5rem;
    text-transform: uppercase;
	display: block;
	max-width: 1020px;
	margin: 0;
	font-family: 'DrukCondensed', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-weight: 400;
    letter-spacing: 0.066rem;
}

/*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: var(--grey);
	border-right: 2px solid var(--grey);
}
.single-careers ul.nav-menu li.nav_careers > a,
.single-post ul.nav-menu li.nav_newsroom > a,
.author ul.nav-menu li.nav_newsroom > a,
.category ul.nav-menu li.nav_newsroom > a,
.tag ul.nav-menu li.nav_newsroom > a,
.single-case_studies ul.nav-menu li.nav_casestudies > a,
ul.nav-menu li.current_page_item > a,
ul.nav-menu li a:hover{
	color: #fff;
}

ul.nav-menu > li.nav_bio{
    display: none;
}
ul.nav-menu > li.nav_bio a{
    font-family: "Inter","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
}
.midframe{
	width:30%;
	height: 100%;
	padding: 1.85rem 2.85rem;
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	visibility: visible;
}
.midframe p {
	font-size: 0.875rem;
	line-height: 1.08rem;
    width:90%;
    max-width: 400px;
}
/*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);
}
.imageframe::before {
	content: "";
	background: #08102438;
	mask: linear-gradient(180deg,#000 30%,#0000 85%);
	backdrop-filter: blur(0.13rem);
	position: absolute;
	inset: 0 0 auto;
	height: 40vh;
	width: 100%;
}

#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: var(--navy);
    display: flex;
    z-index: 5000;
    flex-direction: column;
    gap: 0.85rem;

}

.social a {
    display: block;
    padding:5px;
    margin: 0;
    width: 30px;
    height: 30px;
    color: var(--navy);
}
.social svg{
	width:20px;
	height: 20px;
}
.social a:hover{
	color:#fff;
}

.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:var(--yellow);
	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;
}


/* ----------------------------------------------------------------- General Styles */

button,
.button {
	background:var(--yellow);
	color:#fff;
	cursor:pointer;
	padding:12px 30px;
	display:inline-block;
	text-align:center;
	font-weight: 400;
	font-size:0.875rem;
	font-family: 'DrukWide', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	position:relative;
	min-width:200px;
	text-transform:uppercase;
    border:none;
	-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,
.button:hover {
	background:#5a626e;
	color:#fff;
}
button{
    font:inherit;
}
.button.line {
	border:2px solid #fff;
	background:transparent;
	z-index: 10;
}
.button.line:focus,
.button.line:hover {
	background:transparent;
	color:var(--navy);
}
.button.line.black {
	border-color:var(--navy);
	color:var(--navy);
	background:transparent;
}
.button.line.black:focus,
.button.line.black:hover{
	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: 3rem auto;
	border: none;
	padding: 3rem 0;
	max-width: 650px;
	border-top: 1px solid var(--navy);
	border-bottom: 1px solid var(--navy);
}

.rte blockquote{
	position:relative;
}
blockquote p {

	margin: 0 0 0.85rem;
}
blockquote cite{
    font-family: 'DrukWide', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    font-weight:400;
    text-transform: uppercase;
    font-style: normal;
	position:relative;
	display:block;
	padding:15px 0;
	margin:0 auto;
	text-align:center;	2745
    
    width:80%;
}
blockquote cite .c_co{
    /*color: var(--yellow);*/
    margin-left:0.45rem;
}
blockquote cite:before {
	content:"";
	position:relative;
	width:1px;
	height:50px;
	background:var(--border);
	display:block;
	margin:0 auto 10px auto;
}

blockquote cite:after {
	content:"";
	width:20px;
    height:auto;
    aspect-ratio:1/1;
	display:block;
	margin:10px auto 0;
    background: var(--border);
	mask:url("../img/envelope.svg") center / contain no-repeat;
}
.rte blockquote > h5{
	margin: 30px 0 0;
}
.rte blockquote h5 + p{
	margin-bottom: 30px;
}
/* ----------------------------------------------------------------- Full Screen pages */
body.privacy-policy #footer,
body.error404 #footer,
body.careers #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: 50vh 4rem 6rem;
}
#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%);
    position: relative;
}
#newsside .pagehead h6{
	margin: 0;
}
.pagehead .postmeta {
	width: 90%;
    display: block;
    font-size: 0.875rem;
    text-transform: capitalize;
}
#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: var(--navy);
	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: var(--navy);
	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:var(--navy);
	text-transform: capitalize;
}

aside a:hover,
aside .current-cat a,
aside ul li.current_page_item a {
	/*color:var(--yellow);*/
}

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: var(--yellow);*/
}
p.results{
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	/*color: var(--yellow);*/
}

/*News Is Dead Form: 28/04/25*/
#publicis-form-wrapper{
    display: block;
    margin:60px auto 0;
    max-width: 440px;
}
.sub{
   text-align:center;
}
.caviat{
    font-size: 0.75rem;
    color: #566575;
}
/* -----------------------------------------------------------------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: 90%;
	margin: 1.85rem 0 2.85rem;
}

.postwrap .txtbox .more{
	text-transform: uppercase;
	font-size: 12px;
	text-align: right;
	font-family: 'DrukWide', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	border-bottom: 1px solid #e6e5e6;
}
.postwrap a:hover .more {
	/* color: var(--yellow); */
	border-color: var(--light-grey);
}
.postwrap .txtbox .date {
	text-transform: uppercase;
	font-size: 12px;
	font-family: 'DrukWide', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	margin-bottom: 0.85rem;
	display: block;
}

.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: var(--yellow);*/
}

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

}
.postnav .separator{
    display: block;
    width:1px;
    border-right:1px solid #e6e5e6;
}
.postnav.work .next,
.postnav.cs-nav .prev,
.postnav.articles .next{
    text-align: right;
}
.postnav a{
    display: block;
}

.postnav a .h4 {
	margin-bottom: 0.45rem;
	width: 100%;
}

.postnav a span {
	font-weight: 500;
	display: block;
	margin: 0 0 0.45rem;
	text-transform: capitalize;
	color: var(--light-grey);
	font-size: 0.875rem;
}
.postnav a:hover .h4{
    color: var(--light-grey);
}



/*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;
    font-size:0.875rem;
	letter-spacing: 2px;
	position: absolute;
	z-index: 800;
	opacity: 1;
	padding-left: 155px;
	line-height: 20px;
	bottom: 25px;
	right: -350px;
	width: 400px;
}
.pagemarker p,
.pagemarker h1{
	font-size:inherit;
	line-height:inherit;
	margin: 0;
	font-weight:inherit;
	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: 140px;
	height: 40px;
	background: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	mask: url('../img/line_spark.svg') center / contain no-repeat;
}

.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: 100svh;
	vertical-align: top;
	position: relative;
	transition: background ease-in-out 0.2s;
	overflow: hidden;
	scroll-snap-align: start;
}

.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;
    min-height: 120px;
	display:inline-block;
	position: absolute;
	left:60px;
	bottom:44px;
	color:#fff;
	text-decoration: none;
	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);
}

.hoverwipe:focus,
.hoverwipe:active,
.hoverwipe:hover{
	color: var(--navy);
}
.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: var(--navy);

}
.button.line.black:before,
.button.line.black:hover:before{
	background:var(--navy);
}
.hoverwipe .number {
	position: absolute;
	top: 6px;
	right: 10px;
	text-align: right;
	border-left: 1px solid rgba(255,255,255,0.4);
	padding-left: 10px;
	margin: auto;
	bottom: 6px;
	display: flex;
	align-items: center;
}
.hoverwipe .title {
	margin: 0;
	padding-bottom: 10px;
	max-width: 95%;
}
.hoverwipe .strapline{
	margin:0;
	width:80%;
    font-size:1.0rem;
    line-height: 1.0rem;
    text-transform: capitalize;
}
.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: 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:var(--yellow);		
}
.nextframe.arrow:hover svg{
	fill:#fff;
}
#featvideo {
	color: #fff;
	border: none;
	background: transparent;
}
#featvideo .container::before {
	content: "";
	background:#071D2C4D;	
	position: absolute;
	inset: 0;
	z-index:0;
	pointer-events: none;
	margin: 0;
    display: block;
}
.video-tagline{
    
}
.headerimg-fade::after,
.video-tagline::after {
	content: "";
	background: #08102438;
	mask: linear-gradient(180deg,#000 4%,#0000 65%);
	backdrop-filter: blur(0.13rem);
	position: absolute;
	inset: 0 0 auto;
	height: 40vh;
	width: 100%;
}
.video-tagline::before{
	content:"";
    background: #fff;
	mask: url("../img/TH_tagline.svg") center / contain no-repeat;
	width: 70%;
	max-width: 1000px;
	position: absolute;
	inset:0 0 auto;
	height: 100%;
	z-index: 500;
	pointer-events: none;
	margin: auto;
    /*mix-blend-mode: overlay;*/
    animation: fadeUpSlow 1.4s;
}
.video-tagline::before {
	
}
body.showreel .video-tagline:before{
	display: none;
}
body.showreel video{
	cursor: pointer;
}
#featvideo .button {
	position: absolute;
	bottom: 10vh;
	right: 20px;
	left: 20px;
	margin: auto;
	min-width: 220px;
	height: 45px;
	z-index: 500;
	width: fit-content;
}

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

.home .section{
     background: var(--yellow);
}
.home .section:nth-child(even){

    background: var(--pink);
}
.home .section:nth-child(odd){
    flex-direction: row-reverse;

}


.splitframe{
    min-height: 100vh;
   
    flex-direction: row;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
}

.splitframe > div{
    width:50%;
}
.splitframe .imgframe{
    position: relative;
    height: 100vh;
}

.splitframe .txtframe{
    padding: 3rem;
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    
}
#awards .featimg{
    background-size: contain;
}
#awards .txtframe{
    
}
#about .txt,
#awards h2,
#awards .button{
	z-index: 50;
}
#about h2, #our_work h2, #brand_gallery h2 {
	font-size: 6rem;
	line-height: 5rem;
	text-align: left;
	display: block;
	max-width: 1020px;
	margin: 0 auto 30px;
	font-family: 'DrukCondensed', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-weight: 400;
}
#awards h2 {
	padding-bottom: 1.85rem;
	border-bottom: 2px solid var(--navy);
	text-transform: none;
	font-size: 3.8rem;
	line-height: 3.8rem;
	font-family: "Inter","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
	letter-spacing: initial;
    font-weight: 500;
}
#awards h2::before{
    content:"";
    display: block;
    width:100px;
    aspect-ratio:1/1;
    margin: 0 0 0.85rem;
    background: url('../img/quote.png') center / contain no-repeat;
}
#awards h2 strong{
    font-weight: 900;
}
#awards .cite_logo {
	display: block;
	width: 250px;
	height: auto;
	margin: 0;
	align-self: flex-start;
}


#brand_gallery {
	height: auto;
	overflow: auto;
	padding: 6rem 3.0rem;
	/*background: var(--grey);*/
	color: var(--navy);
	gap: 3.85rem;
}
#brand_gallery .brandCol {
	display: grid;
	grid-template-columns: repeat(6,minmax(14%,16.6%));
	/* grid-template-columns: repeat(8,minmax(11%,12.5%)); */
	gap: 0.85rem 1.85rem;
	margin: 0.85rem auto;
	width: 80%;
}
#brand_gallery .brandCol .imgbox{
    
}
#brand_gallery .brandCol img {
	width: 100%;
	height: auto;
}

.section.fourCol {
	display: grid;
	grid-template-columns: repeat(4,minmax(24%,25%));
	justify-content: initial;
	align-items: initial;
    background:var(--navy);
    height: auto;
}
.section.fourCol .sectionCol{
    padding: 2.85rem;    
    height:auto;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap:3.85rem;
}
.sectionCol p:last-child{
    margin-bottom: 0;
}
.section.fourCol .sectionCol:nth-child(1){
    background: var(--navy);
    color:#fff;
}
.section.fourCol .sectionCol:nth-child(2){
    background: var(--pink);
}
.section.fourCol .sectionCol:nth-child(3){
    background: var(--yellow);
}
.section.fourCol .sectionCol:nth-child(4){
    background: var(--stone);
}
.section.fourCol .imgbox img{
    display: block;
    width:100%;
    height: auto;
    aspect-ratio:1/1;
}
.section.gridbox h2, .section.fourCol h2 {
	font-family: 'DrukCondensed', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-size: 3.8rem;
	line-height: 3.2rem;
	font-weight: 400;
    text-transform: uppercase;
}
.section.gridbox h3,
.section.fourCol h3{
    font-family: 'DrukCondensed', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    font-size: 3.0rem;
    line-height: 2.8rem;
    font-weight: 400;
    text-transform: uppercase;
}

.section.gridbox {
	display: grid;
	grid-template-columns: repeat(4,minmax(24%,25%));
	min-height: 100vh;
	gap: 0;
	align-items: end;
}
.section.gridbox > div{
    height: 50vh;
    margin: 0;
}
.section.gridbox .imgbox{
    position: relative;
}
.section.gridbox .imgbox img{
    position: absolute;
    inset:0;
    width:100%;
    height: 100%;
}
.section.gridbox .txtbox{
    padding: 1.85rem;
}
.section.gridbox .block_1{
    grid-column: span 2;
}
.section.gridbox .block_2{
    background: var(--yellow);
}
.section.gridbox .block_3{
    background: var(--pink);
}
.section.gridbox .block_4{
    background: var(--dark-grey);
    color:#fff;
}
.section.gridbox .block_5{
    background: var(--stone);
}
.section.gridbox .block_6{
    
}
.section.gridbox .block_7{
    background: var(--dark-grey);
    color: #fff;
}


#news{
	padding: 0;
	justify-content: flex-start;
	height: auto;
    background: #fff;
}
/***Start New News*/
.newsGrid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0.85rem;
	align-items: start;
	justify-items: center;
	padding: 0.85rem;
	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%;
}


/*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 {
    display: block;
	aspect-ratio: 4/3;
    height: auto;
    z-index: 0;
}

.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: var(--navy);
	top:0;

}

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

.article .wrap .date{
    display: block;
	text-transform: uppercase;
	margin: 0 0 0.85rem;
	font-weight: 400;
    font-family: 'DrukWide', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    color: currentColor;
}
.article .wrap .read{
	text-transform: uppercase;
	margin: 0 0 5px;
	display: block;
	text-align: right;
	font-weight: 400;
    font-family: 'DrukWide', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    color: currentColor;
}
/*.article:hover .wrap .read,
.article:hover .wrap .date{
	color: var(--light-grey);
}*/
.article:hover .wrap .txtwrap{
	border-color:var(--border);
}
.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%;
	
}
.article .txtwrap .h3{
    margin: 1.85rem 0 2.85rem;
}
#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 {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
	object-fit: cover;
}
/*.v_iframe iframe{
    width:100%;
}*/
p.v_iframe:has(iframe){
    padding: 0;
    margin: 1.85rem 0;
}
.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:var(--navy);
	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;
}

.section.feature .featimg.hide,
.videoplay.hide{
	height: 0;
	pointer-events: none;	
	animation-delay: 2s;
}


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

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







/*--End*/


#about {
	
}


#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: var(--yellow);
}*/
#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:1px 80px;
    margin: 80px 0;
}
block.section{
	height: auto;
}
#casestudy > block.footer{
	padding:40px 80px;
    margin-top:3.85rem;
}

#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 0.85rem;
}
#cshead .pagehead .strapline {
	margin: 0;
	width: 60%;
	font-size: 1.0rem;
	line-height: 1.1rem;
    text-transform: capitalize;
}
#casestudy .intro{
	padding-top: 40px;
}
#casestudy .intro .txtbox{
	display: block;
	width: 90%;
	max-width: 800px;
	
}

#casestudy .videobox {
	margin:0 auto;
	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;
    margin: 0;	
}

#casestudy .section.greybox{
	height: auto;
}
#casestudy .section.whitebox{
	color: var(--navy);
}
#casestudy .section.featimg{
	min-height: 70vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#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%;
}
.boxFrame .imgbox img{
    aspect-ratio:4/2.44;
    height: 100%;
}

/* Work  */
body.home #masthead .tagline{
    color: #fff;
}
body.work #masthead .tagline{
	color: var(--navy);
}
#work{
	
}
#work .pagemarker{
	position: fixed;
	z-index: 400;
}
#work .pageheader{
	padding: 8rem 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%;
}
.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%;
    font-size: 1.0rem;
    line-height: 1.0rem;
    text-transform: capitalize;
}
.worklist .casestudy:hover .featimg img{
	transform: scale(1.1);
}
.worklist .casestudy .number{	
	/*font-size: 0.68rem;
	line-height: 0.68rem;
	letter-spacing: 0.5px;
	font-weight: 400;
	font-family: 'DrukWide';*/
}
.worklist .casestudy .title {
	margin: 1.85rem 0;
}
.worklist .casestudy:hover .h3{
	color: var(--light-grey);

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

#splitScreen.privacy .pagehead h1,
#splitScreen.culture .pagehead h1{
	display: block;
	margin: 0 auto;
	max-width:800px;
}

#splitScreen.culture #txtside .innerframe {
	display: block;
	width:100%;
	max-width: 800px;
	background: #fff;
	padding: 50px 0 100px;
	margin:0 auto;
}
#splitScreen.privacy #txtside .innerframe{
    display: block;
	width:100%;
    padding-top:50px;
    margin: 0 auto;
}
#splitScreen.privacy #imgside,
#splitScreen.culture #imgside{
	height: 100vh;
	position: relative;
	width:100%;
	z-index: 0;
	
}

.section.slidetxt{
	/*border-top:1px solid #e6e5e6;*/
    display: flex;
}
.section.slidetxt .featimg{
	width:50%;
	height: 100%;
}
.section.slidetxt .featimg img{
    height: 100%;
}
.section.slidetxt .txtbox{
	position: relative;
	top:0;
	right:0;
	height: 100%;
    overflow: auto;
    overscroll-behaviour:contain;
	width:50%;
	background: var(--yellow);
			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:0;
    background: var(--navy);
    color:#fff;
}

.section.slidetxt:nth-of-type(even){
	flex-direction: row-reverse;
}


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

.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;
    /*color: var(--pink);*/
}
.section.slidetxt:nth-of-type(odd) .txtbox .close{
	left:100%;
   /* color: var(--yellow);*/
}
.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);
	
}

.slidetxt .rte a:hover, 
.slidetxt .rte a:focus, 
.slidetxt .rte a:active {
	color: #fff;
	text-decoration-color: #fff;
}

#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: 4rem auto;
	padding: 20px 0 0;
	max-width:800px;
}

#jobslist .job{
	position: relative;
	display: block;
	margin: 0 0 30px;
}

#jobpost .date,
#jobslist .job .more,
#jobslist .job .date{
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
    font-family: 'DrukWide', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
}
#jobslist .job a{
	display: block;
}
#jobpost .date span,
#jobslist .job .date span{
	/*color: var(--yellow);*/
}
#jobslist .job .more{
	border-bottom:1px solid #e6e5e6;
	text-align: right;
	padding-bottom: 10px;
	margin-bottom: 0;
}

#jobslist .job:hover h3{
	/*color: var(--yellow);*/

}


/* ----------------------------------------------------------------- JobPost  */
#jobpost .jobinfo{
	border-bottom: 3px solid var(--yellow);
	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{
    background: var(--navy);
    color: #fff;
}
body.contact #offcanvas:not(.docked) #logo{
    background: #fff;
}
body.contact .map{
    filter: saturate(0) grayscale(70%) contrast(1.1);
}
*/
#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%;
}
#splitScreen.awards .panel .featimg img{
    height: auto;
    aspect-ratio:4/2.44;
}
/* ----------------------------------------------------------------- 404  */

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

.product-grid{
    display: grid;
    grid-template-columns:repeat(4,minmax(20%,25%));
    gap:0.85rem;
}
.product-grid .product{
    
}
.product-grid .product .imgbox img{
    display: block;
    width:100%;
    height: auto;
    aspect-ratio:3/3.4;
}
.product-grid .product .name {
	display: block;
	margin: 0.45rem 0;
	font-family: 'DrukCondensed', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.8rem;
}

.product-grid .product .txt {
	font-family: 'DrukWide', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-size: 0.58rem;
	text-transform: uppercase;
}
/* ----------------------------------------------------------------- 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: var(--yellow);*/
		/*border-right:2px solid var(--yellow);*/
	}
}
@media only screen and (min-width: 1024px) {
	/*Navigation*/
    .privacy-policy #offcanvas:not(.docked) #logo,
    .error404 #offcanvas:not(.docked) #logo,
	.home #offcanvas:not(.docked) #logo,
    .careers #offcanvas:not(.docked) #logo,
    .showreel #offcanvas:not(.docked) #logo,
    .single-case_studies #offcanvas:not(.docked) #logo,
    #offcanvas.active #logo,
    #offcanvas.docked.active #logo{
        background: #fff;
    }

    /*#offcanvas #masthead #logo:focus,
    #offcanvas #masthead #logo:hover{
        background:var(--pink);
    }*/
    #offcanvas.active #masthead{
        background:transparent;
        /*border-color:rgba(0,0,0,0.13);*/
        pointer-events: none;
        height: 100%;
    }
	/*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%;
		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: 1180px) {
    /*Scrolling Behaviour*/
	#masthead::before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width:100%;
        height: 80px;
        background: #fff;
        opacity:0;
        box-shadow: 0px -1px 6px rgba(0,0,0,0.25);
        pointer-events: none;
        z-index: -1;
        /* border: 1px solid #fc0; */
    }
    #offcanvas:has(#blogframe) #masthead:before,
    #offcanvas:has(#splitScreen) #masthead::before{
        width:50%;
    }
    body.privacy-policy #offcanvas:has(#splitScreen) #masthead:before,
    body.careers #offcanvas:has(#splitScreen) #masthead:before{
        width: 100%;
    }
	#masthead:before,
	#masthead #menu_icon{
			transition:all 0.4s cubic-bezier(.65,1.3,0.2,1) 0.25s;
	-webkit-transition:all 0.4s cubic-bezier(.65,1.3,0.2,1) 0.25s;	
	}
    #masthead #logo{
			transition:all 0.4s cubic-bezier(.65,1.3,0.2,1);
	-webkit-transition:all 0.4s cubic-bezier(.65,1.3,0.2,1);	
	}
    
    #offcanvas:has(#splitScreen).docked:not(.active) #masthead:before,
	body.work #offcanvas.docked:not(.active) #masthead:before,
	body.careers #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;
        pointer-events: auto;
	}
	

}
@media only screen and (min-width: 1280px) {
	/*Home*/
	.section.feature .featimg{
		background-attachment: fixed;
	}
	
	
}
@media only screen and (min-width: 1440px) {
    
}
@media only screen and (min-width: 1680px) {
	/*Masthead*/
	/*#masthead:before{
		height: 80px;
	}*/
	
	/*Home*/
	#featvideo h1{
		font-size: 4vw;
	}
	
}

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

@media only screen and (max-width: 1679px) {
	/*masthead*/
	
	/*navigation*/
    ul.nav-menu > li {
        margin:0;
    }
	
	/*Home*/

	/*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: 0 2.85rem;
    }
	#casestudy .section.wideband {
		padding: 100px 2.85rem;
	}
	#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 3rem 5rem;
	}
	
	/*Work*/
	#work .worklist{
		padding: 100px 20px 1px;
	}
	#work .worklist .casestudy {
		margin: 0 0 6rem;
	}
	.worklist .casestudy .imgbox{
		width:60%;
	}
	.worklist .casestudy .txtbox{
		width:40%;
	}
	/*Home*/
	.section.feature .hoverwipe {
		left: 30px;
	}
	
}

@media only screen and (max-width: 1439px) {
    h1, .h1 {
        font-size: 6.6rem;
        line-height: 5.6rem;
    }
    .rte h1, .h2, h2 {
        font-size: 1.6rem;
        line-height: 2rem;
    }
    .section.fourCol .sectionCol {
        padding: 1.85rem;
        gap:6rem;
    }
    
    .article .wrap .txtwrap {
        width: 80%;
    }
    #brand_gallery .brandCol {
        width: 90%;
    }
    #awards h2 {
        font-size: 3.4rem;
        line-height: 3.4rem;
    }
    
}
@media only screen and (max-width: 1279px) {
	
	/*masthead*/
	#logo {
        width: 200px;
    }
	#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;
	}
		
	/*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 ul li a {
		font-size: 24px;
		line-height: 28px;
	}
	.menuFrame .imageframe{
		left: 66%;
	}
	#offcanvas.active .imageframe {
		width: 34%;
	}
	.midframe {
		padding: 20px 3%;
	}
	/*Home*/
	
	.article .wrap {
		top:0;
		opacity: 1;
		background: rgba(0,0,0,0.4);
	}
    .article .wrap:hover{
        background: transparent;
    }
    .article .wrap .txtwrap {
		width: 80%;
        z-index: 10;
	}
    .section.gridbox h2, .section.fourCol h2 {
        font-size: 3.8rem;
        line-height: 3.4rem;
        word-wrap: break-word;
    }
	/*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:0.85rem;
	}

	.postnav a h3{
		font-size: 22px;
		line-height: 32px;
	}
	#casestudy .featimg.fixed {
		background-attachment: unset;
	}
	/*Home*/
	#brand_gallery .brandCol {
        width: 100%;
    }
    .section.feature .featimg img{
        height: 100%;
    }
	.hoverwipe {
		max-width: 700px;
	}
    #about h2, #our_work h2, #brand_gallery h2 {
        font-size: 5rem;
        line-height: 4.4rem;
    }
	#awards h2 {
        font-size: 3rem;
        line-height: 3rem;
    }
	
	/*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 .casestudy {
		margin: 0 0 60px;
	}
	#work .pageheader {
		padding: 60px 0 0;
	}
	
	#work .pageheader .txtbox {
		max-width: 600px;
	}
	
	#work .casestudy .title {
        font-size: 1.8rem;
        line-height: 2.0rem;
    }
	.worklist .casestudy .strapline {
        width: 80%;
        font-size: 0.85rem;
        line-height: 1.0rem;
    }
	/*Culture*/
	#splitScreen.culture #txtside .innerframe {
		width: 70%;
	}
	/*News*/
	#sidepanel {
		width: calc(40vw - 80px);
	}
	
}
@media only screen and (max-width: 1179px) {
    h1, .h1 {
        font-size: 6.2rem;
        line-height: 5.2rem;
    }
    .rte h1, .h2, h2 {
        font-size: 1.5rem;
        line-height: 1.9rem;
    }
    .h3, h3 {
        font-size: 2.2rem;
        line-height: 2.4rem;
    }
        
    
    .home .article .featimg img {
        aspect-ratio: 3/3.4;
    }
    .video-tagline::before {
        top: 10vh;
    }
    .section.gridbox {
        grid-template-columns: repeat(2,minmax(48%,50%));
        height: auto;
        align-items: start;
    }
    .section.gridbox > div{
       height: 40vh;
       overflow: auto;
    }
    .section.gridbox > .block_1.imgbox{
        height:auto;
        aspect-ratio:4/2.4;
    }
    ul.nav-menu > li > a {
        font-size: 4.5rem;
        line-height: 4rem;
    }
    #awards h2::before{
        width:80px;
    }
    #awards .cite_logo {
        width: 200px;
    }
    
    
}
@media only screen and (max-width: 1023px) {
	
	/*WP Logged in Admin Bar */
	body.logged-in.admin-bar{
		padding-top:0;
		margin-top: -46px;
	}

	
	/*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: var(--mid-grey);
	}
    #logo{
        background: #fff;
    }
    /*#offcanvas:has(#splitScreen).active #logo,*/
    body.work #logo,
    .home #offcanvas.active #logo,
    #offcanvas.docked #logo,
    #offcanvas.active #logo{
        background: var(--navy);
    }
    
    
    body.home #offcanvas.active:not(.docked) #menu_icon .line,
    body.home #offcanvas.active #menu_icon .line,
    #offcanvas.active #menu_icon .line {
        background: var(--navy);
    }
	/*Navigation*/
	.menu-main-menu-container {
		width: 50%;
		z-index: 10;
		
	}

	.midframe {
        width: 50%;
        z-index: 9;
        color: var(--navy);
    }
    .midframe p {
        width: 100%;
    }
	.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;
        mask:none;
	}
	
	#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;
	}
    .single-careers ul.nav-menu li.nav_careers > a, 
    .single-post ul.nav-menu li.nav_newsroom > a, 
    .single-case_studies ul.nav-menu li.nav_casestudies > a, 
    ul.nav-menu li.current_page_item > a, ul.nav-menu li a:hover {
        color:var(--pink);
    }
    
    
	/*Footer*/
	#footer{
		margin: 0;
	}
	#footer .innerframe {
		padding-left: 15%;
	}
	
	/*Home*/
    .video-tagline::before{
        width:90%;
    }
	.hoverwipe {
		width:auto;
		right:50px;
		left: 50px;
		bottom:40px;
	}
	.section .nextframe{
		display: none;
	}
	.section:nth-child(1) .nextframe{
		display: block;
	}
	.section.fourCol {
        grid-template-columns: repeat(2,minmax(48%,50%));
        justify-content: initial;
        align-items: initial;
        height: auto;
    }
    .section.fourCol .sectionCol {
        height: auto;
    }
    .home .section.feature {
        height: 65vh;
    }
    #featvideo{
        height: 100vh;
        height: 100svh;
    }
    #brand_gallery {
        height: auto;
        min-height: 60vh;
        padding: 6.0rem 1.85rem;
    }
    #brand_gallery .brandCol {
	grid-template-columns: repeat(5,minmax(16%,20%));
	margin: 3rem auto;
	gap: 0.85rem;
}
    		
	#featvideo .button{
		bottom: 15vh;
	}
	#awards,#our_work,#about{
        padding: 1.85rem;
    }

    .home .section.splitframe {
        flex-direction: column;
        justify-content: flex-start;
        min-height: initial;
        height: auto;
    }
    .home .section.splitframe > div {
        width:100%;
    }
    .home .section.splitframe .imgframe{
        height: 60vh;
    }
    .home .section.splitframe .txtframe{
        height: auto;
        padding:4rem 0;
    }
	#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: var(--navy);
		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;
	}
    .newsGrid .article .featimg img {
        aspect-ratio: 4/2.4;
    }
	#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%;
	}
    .boxFrame .imgbox img {
        aspect-ratio: 4/3.1;
    }
	#casestudy .boxFrame .txtbox,
	#casestudy .boxFrame.Right .txtbox{
		padding: 0 0 15px;
		width:100%;
	}
	.section.wideband .txtbox {
		max-width: 80%;
	}
    
   #work .worklist .casestudy{
        max-width: 650px;
        margin: 0 auto 2.85rem;
            
    }
    .worklist .casestudy a {
        flex-direction: column;
    }
    .worklist .casestudy .imgbox {
        width: 100%;
    }
    .worklist .casestudy .txtbox {
        width: 100%;
        border-bottom: 1px solid var(--border);
    }
	/*SplitScreen*/
	
	#splitScreen, #blogframe {
		padding-left:0;
	}
	#splitScreen #imgside, 
	#blogframe #newsside {
		width: 100%;
		height: 100svh;
		position: relative;
	}
	#splitScreen #txtside .innerframe, 
	#blogframe #newsmain .innerframe {
		padding: 50px 8%;
	}
	.pagehead .nextframe.arrow {
		/*display: inline-block;*/
	}
    .postnav .h3, .postnav h3 {
        font-size: 1rem;
        line-height: 1.4rem;
        margin: 0 0 0.85rem;
    }
	/*Work*/
	#work .pagemarker{
		display: none;
	}
	#work .pageheader .txtbox {
		max-width:500px;
	}

	/*Culture*/
	#splitScreen.culture #txtside .innerframe {
		width: 100%;
		margin: 0;
		padding: 50px 8%;
	}
	#jobs .txtbox {
		padding: 50px 30px;
	}
    .section.slidetxt {
        height: auto;
    }
	.section.slidetxt .featimg {
	height: 60vh;
	position: relative;
	width: 100%;
}
    .section.slidetxt .txtbox > div {
        padding: 6rem 4rem;
        min-height: 40vh;
    }
	#culture .section.slidetxt .txtbox {
		position: relative;
		inset:initial;
		height:auto;
		width: 100%;
	}
    #culture .txtbox a{
        word-break: break-all;
    }
	.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%;
	}
	

	#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;
	}
    
    /*A one-time-only custom hack: 30/04/25*/
    .news-is-dead #splitScreen #imgside{
        background-color: #231f20;
        background-size: auto 80%;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    
}
@media only screen and (max-width: 767px) {
	/*Typeography*/
    h1, .h1 {
        font-size: 5.6rem;
        line-height: 4.6rem;
    }


	/*Masthead*/
	.menu-main-menu-container {
		width: 100%;
		
	}
	
	/*Navigation*/
	ul.nav-menu {
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 13vh 8% 1px 8%;
		border: none;
	}
	
	ul.nav-menu > li:last-child{
		
	}

	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: var(--yellow);*/
		border-right: none;
	}
    ul.nav-menu > li > a {
        font-size: 4rem;
        line-height: 3.5rem;
    }
    ul.nav-menu > li.nav_bio{
        display: block;
        margin-top:2.85rem;
    }
    
    ul.nav-menu > li.nav_bio > a{
        font-size: 0.85rem;
        line-height: 1.0rem;
        word-spacing: initial;
        letter-spacing: initial;
        border-top:1px solid var(--light-grey);
        padding: 0.85rem 0;
        color: var(--navy);
        
    }
    
	.midframe {
        display:flex;
        position: absolute;
        inset:0 auto 0 100%;
        width: calc(100% - 80px);
        background: #fff;
        z-index: 10;
        padding: 20vh 1.85rem 1.85rem;        
        transition: transform 0.4s cubic-bezier(.65,0,0.2,1);
  -webkit-transition: transform 0.4s cubic-bezier(.65,0,0.2,1);
    }
    .midframe.active{
        transform: translateX(-100%);
    }
    .midframe .close {
        color: #fff;
        width: 40px;
        height: 40px;
        background: var(--pink);
        position: absolute;
        top: 14px;
        left: 1.25rem;
        mask:url('../img/close.svg') center / 20px auto no-repeat;
    }
    .midframe p{
        width:100%;
        max-width: initial;
    }
	/*Home*/
	.hoverwipe {
		right:20px;
		left: 20px;
		bottom: 20px;
	}
	.hoverwipe .title {
		max-width: 100%;
	}
    #brand_gallery .brandCol{
        gap:0.85rem;
    }
    
	/*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 .h3, .postnav h3 {
        font-size: 0.8rem;
        line-height: 1rem;
    }
	/*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;
	}
    
    .product-grid{
        grid-template-columns:repeat(2,minmax(48%,50%));
    }
	
}
@media only screen and (max-width: 599px) {
    h1, .h1 {
        font-size: 6rem;
        line-height: 5rem;
    }
    .rte h1, .h2, h2 {
        font-size: 1.4rem;
        line-height: 1.8rem;
    }
    .h3, h3 {
        font-size: 2rem;
        line-height: 2.2rem;
    }
    #logo {
        width: 180px;
    }
    #featvideo .button {
        bottom: 10vh;
    }
    .section.gridbox {
        grid-template-columns: repeat(1,1fr);
    }


    .section.gridbox .block_6.imgbox,
    .section.gridbox .block_1.imgbox {
        aspect-ratio: 3/3.1;
        height: auto;
        grid-column: span 1;
    }
    .section.gridbox .txtbox {
        padding: 2.85rem 1.85rem;
        overflow: initial;
        height: auto;
        min-height:50vh;
    }
    #about h2, #our_work h2, #brand_gallery h2 {
        font-size: 4.6rem;
        line-height: 4rem;
    }
    #brand_gallery .brandCol {
        grid-template-columns: repeat(4,minmax(22%,25%));
    }
    #home .section.feature .featimg::before{
        z-index: 1;
    }
    .hoverwipe .strapline {
        width: 90%;
    }
    .article .wrap .txtwrap {
        width: 100%;
    }
    .article:hover .featimg::before {
        height:0;
    }
    #awards h2 {
        font-size: 1.7rem;
        line-height: 2.0rem;
    }
    #awards h2::before {
        width: 50px;
    }
    #awards .cite_logo {
        width: 160px;
    }
    #awards .featimg {
        background-size: cover;
        background-position: center;
        height: 42vh;
        width: 100%;
        margin: 0;
    }
    #awards .txtframe{
        padding: 2rem 0.8rem 4rem;
    }
    
}
/*iphone6 + regular android*/
@media only screen and (max-width: 479px) { 
    h1, .h1 {
        font-size: 5rem;
        line-height: 4rem;
    }
	/*Masthead*/
	#masthead {
		width: 60px;
		padding: 25px 5px;
	}
	#menu_icon{
		top:15px;
	}
	#masthead .tagline {
		top: 210px;
		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: 150px;
        top: 12px;
        right: 18px;
    }
	#offcanvas.docked:not(.active) #logo {
		transform: scale(0.65);
	}
	.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*/
	
	.menuFrame .social {
		bottom: 0;
		padding: 40px 15px 20px;
	}
	.menuFrame .social a {
		padding: 0;
	}
    
	.midframe {
        width: calc(100% - 60px);
    }
    ul.nav-menu > li > a {
        font-size: 3.5rem;
        line-height: 3rem;
    }
	/*----------------------------------Typeography*/
	
    .video-tagline::before {
        top: 15vh;
    }
    #featvideo .button {
        bottom: 8vh;
    }
	.section.feature .hoverwipe {
		left: 0;
		right: 0;
	}
    .home .section.feature {
        height: 80svh;
    }
	.hoverwipe .wrap {
		padding: 10px 75px 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;
	}
	
    
	.section.fourCol {
        grid-template-columns: repeat(1,1fr);
    }
    #about h2, #our_work h2, #brand_gallery h2 {
        font-size: 3.6rem;
        line-height: 3.2rem;
    }
    .section.gridbox h2, .section.fourCol h2 {
        font-size: 3.2rem;
        line-height: 3.0rem;
    }
    #brand_gallery .brandCol {
        grid-template-columns: repeat(3,minmax(30%,33.3%));
        margin: 0;
    }
	.article .wrap .txtwrap {
		width: 100%;
	}
    .postnav .h3, .postnav h3 {
        font-size: 0.75rem;
        line-height: 0.85rem;
    }
	#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:4rem 2rem;
	}
	#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;
	}
    #work .casestudy .title {
        font-size: 1.4rem;
        line-height: 1.6rem;
        margin-bottom: 0.85rem;
    }
	/*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*/