/*
Theme Name:		Gardner Productions 2026
Theme URI:		
Author:			Jumaqu.io
Author URI:		n/a
Version:		1.0
*/

:root{
	--Charcoal-Black-100:#1B1C1D;
	--Slate-Grey-100:#575D65;
	--Burnt-Orange-100:#D9663B;
	--Soft-Clay-100:#E3B5A4;
	--Off-White-100:#F3F4F2;
}


/*-----------------------------------------------------------------------------------*/
/* Body, Typography and some main Elements
/*-----------------------------------------------------------------------------------*/

html * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; font-smoothing: antialiased; }
html {padding: 0; margin: 0;}
body {
	padding: 0; margin: 0; font-size:18px; color: var(--Slate-Grey-100); font-family:basic-sans, sans-serif; overflow-x:hidden; letter-spacing:0; font-weight:400; 
	background: var(--Off-White-100);
}
input, textarea { border-radius:0; }
input, textarea, select, label { font-family:basic-sans, sans-serif; outline:0; appearance:none; -webkit-appearance:none; }
input:focus, input:hover { outline:0; }
::-webkit-input-placeholder { color:#000; opacity:1; }
:-moz-placeholder { color:#000; opacity:1; }
::-moz-placeholder { color:#000; opacity:1; }
:-ms-input-placeholder { color:#000; opacity:1; }

h1, h2, h3, h4, h5, h6 { padding:0; margin:0; line-height:1.1; color: var(--Charcoal-Black-100);}
h1 { font-family: Stratos, sans-serif; font-weight:700; letter-spacing:0; font-size:70px; line-height:70px; color: var(--Off-White-100); text-transform: uppercase; text-align: center;}
h2 { font-family: Stratos, sans-serif; font-weight:700; letter-spacing:0; font-size:46px; text-transform: uppercase;}
h3 { font-family: Stratos, sans-serif; font-weight:700; letter-spacing:0; font-size:28px; text-transform: uppercase;}
h4, h5, h6 { font-size:28px; }

img { display:block; max-width:100%; height:auto; }
ul,ol { margin:0; padding:0; list-style:none; }
a, a:visited, a:active, input[type=submit] { text-decoration:none; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; -ms-transition:all .3s ease-out; transition:all .3s ease-out; }
a:focus, a:hover { text-decoration:none; outline:0; }
:focus, :hover { text-decoration:none; outline:0; }
p { margin:0 0 25px 0; line-height:1.5; }
.animate { transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; }
.no-animate { transition:none; -webkit-transition:none; -moz-transition:none; -ms-transition:none; }
strong { font-weight:700; }

.button-holder {width: 100%; display: flex; justify-content: center;}
.button, .button:visited, .button:active { 
	display:inline-block; padding: 0 28px; border-radius: 55px; height: 42px; line-height: 42px;
	background: var(--Off-White-100); font-weight:700; color:var(--Slate-Grey-100); font-size: 18px;
}
.button.orange {background: var(--Burnt-Orange-100); color: var(--Off-White-100);}
	.button:hover, .button.orange:hover {background: var(--Charcoal-Black-100); color: var(--Off-White-100);}
	.button.alt:hover {background:var(--Burnt-Orange-100); color: var(--Off-White-100);}

.edit-link {display: block;}

/* responsive video */
.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0; max-height: 100vh;
}
@media only screen and (min-width: 1600px) { .video-container {padding-bottom: 52%;} }
@media only screen and (min-width: 1900px) { .video-container {padding-bottom: 49%;} }

.video-container iframe {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 100vh; overflow: hidden
}


/* fade only */
.fade-in {opacity: 0; transition: opacity 1s ease-out;}
.fade-in.is-visible {opacity: 1;}

/* fade + slide up */
.fade-slide-up {opacity: 0; transform: translateY(30px); transition: opacity 1s ease-out, transform 1s ease-out;}
.fade-slide-up.is-visible { opacity: 1; transform: translateY(0);}

/* fade + slide down */
.fade-slide-down {opacity: 0; transform: translateY(-30px); transition: opacity 1s ease-out, transform 1s ease-out;}
.fade-slide-down.is-visible {opacity: 1; transform: translateY(0);}

/* fade + slide left */
.fade-slide-left {opacity: 0; transform: translateX(-40px); transition: opacity 1s ease-out, transform 1s ease-out;}
.fade-slide-left.is-visible {opacity: 1; transform: translateX(0);}

/* fade + slide right */
.fade-slide-right {opacity: 0;transform: translateX(40px); transition: opacity 1s ease-out, transform 1s ease-out;}
.fade-slide-right.is-visible {opacity: 1; transform: translateX(0);}


/*-----------------------------------------------------------------------------------*/
/* Structure
/*-----------------------------------------------------------------------------------*/

.container { margin:0 auto; width: 100%; max-width:1360px; padding-left: 0; padding-right: 0; }
	.container .left-column {width: 50%;}
	.container .right-column {width: 50%;}

.container-wide { padding: 0; width: 100%; max-width: 1800px; }
	.container-wide .left-column {width: 50%;}
	.container-wide .right-column {width: 50%;}

.view-mobile { display:none; }

.gradient {
	position: absolute; z-index: 101; width: 100%; background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); opacity: 0.8;
	height: 160px;
}


/*-----------------------------------------------------------------------------------*/
/* Header styling
/*-----------------------------------------------------------------------------------*/

#header {background-color: var(--Burnt-Orange-100); position:absolute; left:0; width:100%; top:0; z-index:100;}
	body.home #header,
	body.page-template-work #header {background-color: transparent !important;}
	#header .container {display: flex; justify-content: space-between; align-items: center; padding-top: 24px; padding-bottom: 24px; }
		#header .logo {z-index: 1000; position: relative;}
		#header .logo:hover {opacity: 0.66;}
	
		/* menu button */
		#header #menu-open {
			color: var(--Off-White-100); font-family: Stratos; font-size: 33.333px; font-weight: 700; text-transform: uppercase; 
			transition:all 0.3s ease 0s; z-index: 1000; position: relative;
		}
			#header #menu-open:hover {opacity: 0.66;}
	
/* menu */
#menu { display: none; position: fixed; top: 0; left: 0; z-index:1000; width:100%; height:100vh; background: var(--Charcoal-Black-100); }
	/* close button */
	#menu #menu-top {display: flex; justify-content: space-between; align-items: center; padding-top: 24px; z-index: 1001; position: relative;}	
		#menu #menu-close {
			color: var(--Off-White-100); font-family: Stratos; font-size: 33.333px; font-weight: 700; text-transform: uppercase;
			transition:all 0.3s ease 0s;
		}
			#menu #menu-close:hover {color: var(--Burnt-Orange-100);}
			#menu #menu-close svg {transition:all 0.3s ease 0s;}
				#menu #menu-close:hover svg path {fill: var(--Burnt-Orange-100);}
	/* nav */
	#menu #menu-middle {height: 100vh; position: absolute; top: 0; z-index: 1000; left: 50%; transform: translateX(-50%);}	
		#menu #menu-middle ul {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}	
			#menu #menu-middle ul li {text-align: center;}
				#menu #menu-middle ul li a {
					color: var(--Off-White-100); font-family: Stratos; font-size: 70.09px; font-weight: 700; line-height: 70.09px; text-transform: uppercase;
				}	
				#menu #menu-middle ul li a:hover {color: var(--Burnt-Orange-100);}

body.menu-open {
	overflow: hidden;
	height: 100vh;
	position: fixed;
	width: 100%;
}


/*-----------------------------------------------------------------------------------*/
/* Footer styling
/*-----------------------------------------------------------------------------------*/

#footer { padding: 41px 0 30px 0; }
	#footer-top {display: flex; flex-wrap: wrap;}
		.footer-row {margin-right: 77px;}
		#footer-row-1 {width: 404px;}
			#footer-row-1 #footer-addresses {margin-top: 34px; font-size: 16px; line-height: 20px; display: flex; justify-content: space-between;}
		#footer-row-2 {width: 378px;}
			#footer-row-2 h2 {
				color: var(--Slate-Grey-100); font-family: Stratos, sans-serif; font-size: 32.645px; font-style: normal; font-weight: 700; line-height: 48px; 
			}
		#footer-row-3 {width: 200px;}
			#footer-row-3 ul li {margin: 5px 0;}
				#footer-row-3 ul li a {color: var(--Slate-Grey-100); font-family: Stratos; font-size: 18px; font-weight: 700; line-height: 24px; text-transform: uppercase;}
					#footer-row-3 ul li a:hover {color: var(--Burnt-Orange-100);}
		#footer-row-4 {width: 110px; margin-right: 0;}
			#footer-row-4 h3 {
				color: var(--Slate-Grey-100); font-family: "Basic Sans", sans-serif; font-size: 16px; font-weight: 700; 
				line-height: 24px; text-align: center; padding: 0; margin: 0;
			}
			#footer-row-4 ul {display: flex; justify-content: center;}
				#footer-row-4 ul li {margin: 10px 4px;}
				#footer-row-4 ul li:hover {opacity: 0.66;}
	#footer-bottom {display: flex; justify-content: space-between; padding-top: 77px;}
		#footer-bottom p {color: var(--Slate-Grey-100); font-size: 12px;}
		#footer-bottom ul {display: flex;}
			#footer-bottom ul li {margin-left: 14px;}
				#footer-bottom ul li a {color: var(--Slate-Grey-100); font-size: 12px; text-decoration: underline;}
				#footer-bottom ul li a:hover {color: var(--Burnt-Orange-100);}


/*-----------------------------------------------------------------------------------*/
/* Shared Page Styling
/*-----------------------------------------------------------------------------------*/

#titlebar {margin-top: 126px; background: var(--Burnt-Orange-100) url(images/titlebar-bg.png) repeat-x center bottom / auto 34px;}
	#titlebar h1 {width: 100%; text-align: center; padding: 15px 0 58px 0; color: var(--Off-White-100); }

.intro {background: var(--Burnt-Orange-100) url(images/intro-bg.png) no-repeat center center / cover;}
	.intro .container {display: flex; flex-wrap: wrap; align-items: center; height: 342px; justify-content: center;}
		.intro h2 {color: var(--Off-White-100); text-align: center; max-width: 999px; margin: 0 auto; padding: 0;}
		.intro .button { }
	
#main {padding: 60px 0; background: var(--Charcoal-Black-100); color: var(--Off-White-100);}
	#main .container {display: flex; flex-wrap: wrap;}
	#main h2 { color: var(--Off-White-100); }

.image-panel {
	width: 100%; height: 100vh; min-height: 480px; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed;
}

/* Mobile/iOS fallback (fixed is often disabled) */
@media (max-width: 1024px), (hover: none) {
  .image-panel{background-attachment: scroll;}
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .image-panel{background-attachment: scroll;}
}

#bottom-cta {
	height: 600px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	background: var(--Burnt-Orange-100) url(images/cta-line-bg.png) no-repeat center center / cover; 
}
	#bottom-cta h2 {font-size: 58px; color: var(--Off-White-100); text-align: center; margin: auto; max-width: 948px; margin-bottom: 39px;}
	#bottom-cta .button {display: inline-block; margin: auto;}


/*-----------------------------------------------------------------------------------*/
/* Home Page styling
/*-----------------------------------------------------------------------------------*/

#top-hero { 
	position: relative;
	height: calc(100vh); min-height: 600px; width: 100%; background: #000 url(images/top-hero.jpg) no-repeat center center / cover; padding: 0; overflow: hidden;
}
	#top-hero .container {height: calc(100vh); min-height: 600px; position: relative;} 
		#top-hero h1 { 
			z-index: 2; color:var(--Off-White-100); margin:0; position: absolute; bottom: 58px; left: 0; padding-right: 40px;
			max-width: 546px; text-align: left;
			text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
		}
	#bg-video {z-index: 1; position: absolute; inset: 0; overflow: hidden; pointer-events: none;}
		#bg-video video {
			position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 600px; width: auto; height: auto; object-fit: cover;
		}

#home-intro {background: var(--Burnt-Orange-100) url(images/home-intro-bg.png) no-repeat center center / cover; padding: 80px 0;}
	#home-intro .container {display: flex; flex-wrap: wrap;}
		#home-intro .container .left-column {padding-right: 33px;}
			#home-intro .slider {position: relative;}
				#home-intro .slider ul.slides li {height: 797px; background-size: cover; background-position: center center; display:none; }
				#home-intro .slider .flex-control-nav {position: absolute; bottom: -35px; left: 40px;}
					#home-intro .slider .flex-control-nav li { display:inline-block; margin:0 7px 0 0; }
					#home-intro .slider .flex-control-nav li a { background:var(--Off-White-100); width:15px; height:15px; border-radius:50%; text-indent:-9999px; display:block; }
					#home-intro .slider .flex-control-nav li .flex-active { background:var(--Soft-Clay-100);; }
				#home-intro .slider .flex-direction-nav { display:none; }

		#home-intro .container .right-column {padding-left: 33px;}
			#home-intro .icon-white {margin: 80px 0;}
			#home-intro h2 { color: var(--Off-White-100); max-width: 560px; margin: 0 0 20px 0;}
			#home-intro p { color: var(--Off-White-100); max-width: 640px; font-size: 24px; letter-spacing: 0;}

#stats {padding: 70px 0 30px 0; background: var(--Burnt-Orange-100) url(images/titlebar-bg-reverse.png?v=2) repeat-x center top / auto 34px;}
	#stats ul {display: flex; flex-wrap: wrap; width: calc(100% - 20px); margin: 0 -20px;}
		#stats ul li {width: calc(33.33% - 40px); margin: 0 20px;}
			#stats h2 {color:var(--Soft-Clay-100); font-size: 103px; font-weight: 700; margin: 0 0 10px 0;}
			#stats p { color: var(--Off-White-100); font-size: 28px; font-weight: 700;}

#home-work {padding: 40px 0; background: var(--Burnt-Orange-100);}
	
#home-mid-intro {background: var(--Burnt-Orange-100);}
	#home-mid-intro .container {height: auto; padding-bottom: 70px;}

#clients { text-align:center; background: var(--Charcoal-Black-100); padding:100px 0 80px 0; }
	#clients h2 { color: var(--Off-White-100); line-height: 1; padding: 0; margin: 12px 0 35px 0;}
	#clients ul {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;}
		#clients li { 
			display: inline-flex; align-items: center; justify-content: center;
			width: calc(25% - 40px); height: 190px; margin: 20px 20px 0 20px; vertical-align: middle;
		}
			#clients li img { max-width: 230px; max-height: 162px; width: auto; height: auto; object-fit: contain; display: block; }

#home-story {background: var(--Charcoal-Black-100); padding: 0 0 120px 0;}
	#home-story .container {display: flex; flex-wrap: wrap; align-items: center;}
		#home-story .container .left-column {padding-right: 33px;}
		#home-story .container .right-column {padding-left: 33px;}
			#home-story h2 {color: var(--Off-White-100); max-width: 640px; margin: 0 0 20px 0;}
			#home-story p {color: var(--Off-White-100); font-size: 24px; max-width: 640px;}


/*-----------------------------------------------------------------------------------*/
/* Your Story
/*-----------------------------------------------------------------------------------*/

#story-intro {padding: 50px 0; background-image: url(images/story-intro.png); background-color: var(--Burnt-Orange-100);}
	#story-intro .container {display: flex; flex-wrap: wrap; align-items: center; height: auto; max-width: 100%;}
		#story-intro .container .left-column {margin-right: 33px; width: calc(50% - 33px); height: 775px; background: center center / cover;}
		#story-intro .container .right-column {padding: 0 33px;}
			#story-intro h2 { color: var(--Off-White-100); max-width: 560px; margin: 0 0 20px 0; text-align: left;}
			#story-intro p { color: var(--Off-White-100); max-width: 640px; font-size: 24px; letter-spacing: 0;}
			#story-intro .button {margin-right: 10px;}

#mid {
	height: 100vh; min-height: 600px; width: 100%;
	background-size: cover;  background-position: center; background-repeat: no-repeat; background-attachment: fixed;
}
	#mid .container {position: relative; height: 100vh; min-height: 600px;}
		#mid h2 {color: var(--Off-White-100); position: absolute; left: 0; bottom: 310px; max-width: 800px;}
		#mid p {color: var(--Off-White-100); font-size: 24px; position: absolute; right: 0; bottom: 110px; width: 635px;}

#values {background: var(--Charcoal-Black-100); padding: 65px 0 75px 0;}
	#values .container {justify-content: center; display: flex; flex-wrap: wrap;}
		#values h2 {color: var(--Off-White-100); text-align: center; margin: 0 0 40px 0; padding: 0;}
		#values ul {list-style: none; width: calc(100% + 20px); margin: 0 -10px; padding: 0; display: flex; flex-wrap: wrap;}
			#values ul li { 
				height: 270px; border: solid 1px var(--Slate-Grey-100);
				display: inline-flex; flex-wrap: wrap; width: calc(33.333% - 20px); margin: 10px; padding: 0;
				position: relative;
			}
				#values ul li .value-icon {position: absolute; top: 30px; left: 25px;}
				#values ul li .value-text {position: absolute; top: 150px; left: 25px; padding-right: 25px;}
					#values ul li h3 {width: 100%; color: var(--Off-White-100); margin: 0 0 5px 0; padding: 0;}
					#values ul li p {color: var(--Soft-Clay-100); font-size: 20px; padding: 0; margin: 0;}
		#values .button {display: inline-block; margin: 40px auto 0 auto;}

#team {background: #f1f2f0; padding: 125px 0;}
	#team .section-top {display: flex; flex-wrap: wrap; margin: 0 auto 60px auto;}
		#team .section-top h2 {width: 50%; padding-right: 0; font-size: 44px;}
		#team .section-top-right {width: 50%; padding-left: 33px;}
			#team .section-top-right p {font-size: 24px;}
			
	ul.team-grid  {list-style: none; width: calc(100% + 20px); margin: 0 -10px; padding: 0; display: flex; flex-wrap: wrap; justify-content: left;}
		ul.team-grid li { 
			display: inline-flex; flex-wrap: wrap; width: calc(25% - 20px); margin: 35px 10px;
		}
			ul.team-grid li .bio-photo-holder {overflow: hidden; height: 500px; width: 100%;}
				ul.team-grid li img {object-fit: cover; object-position: center top; width: 100%; height: 100%;}
			ul.team-grid li h3 {width: 100%; text-transform: uppercase; color: var(--Soft-Clay-100); margin: 20px 0 5px 0; padding: 0;}
			ul.team-grid li p.job-title {font-size: 20px; padding: 0; margin: 0; color: var(--Slate-Grey-100);}

/* popup */
body.show-popup { overflow:hidden; }
.popup-link:hover {cursor: pointer;}
.popup { position:fixed; z-index:10000; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75); display:none; opacity:0; }
	.popup .popup-content { 
		max-width:496px; width:100%; background:#fff; border-radius:5px; padding: 40px 30px; position:absolute; left:50%; top:50%; margin:-215px 0 0 -248px; 
	}
		.popup .popup-content .close-icon {
			position:absolute; width:16px; height:16px; background:url(images/icon-close.png?v=2) no-repeat center center / 100% 100%; right:15px; top:15px; 
		}
		.popup .popup-content h3 {width: 100%; text-transform: uppercase; color: var(--Soft-Clay-100); margin: 20px 0 5px 0; padding: 0;}
		.popup .popup-content p.job-title {font-size: 20px; padding: 0; margin: 0 0 15px 0; color: var(--Slate-Grey-100);}
		.popup .popup-content p {color: var(--Slate-Grey-100);}


/*-----------------------------------------------------------------------------------*/
/* Services
/*-----------------------------------------------------------------------------------*/

.content-block {display: flex; align-items: center; flex-wrap: wrap; padding: 40px 0; margin: auto; max-width: 1600px;}
	.content-block .photo-column {width: 50%; height: 466px; overflow: hidden; }
		.content-block .photo-column img {height: 100%; width: 100%; object-fit: cover; object-position: center;}
	.content-block .text-column {width: 50%; display: flex;}
		.content-block .text-column .text-column-inner {max-width: 635px;}
			.content-block h3 {width: 100%; color: var(--Off-White-100); font-size: 46px; padding: 0; margin: 0 0 5px 0;}
			.content-block h4 {color: var(--Soft-Clay-100); font-size: 28px; font-weight: 400; padding: 0; margin: 0 0 20px 0; }
			.content-block p {font-size: 24px; padding: 0; margin: 0 0 30px 0;}
			.content-block ul {list-style: disc; margin: -5px 0 30px 0;}
			.content-block ol {list-style: decimal; margin: -5px 0 30px 0;}
				.content-block li {font-size: 24px; padding: 0; margin: 0 0 5px 35px;}
	.content-block:nth-child(odd) .photo-column {order: 1; padding-right: 35px;}
	.content-block:nth-child(odd) .text-column {order: 2; padding-left: 35px; justify-content: flex-start;}
	.content-block:nth-child(even) .photo-column {order: 2; padding-left: 35px;}
	.content-block:nth-child(even) .text-column {order: 1; padding-right: 35px; justify-content: flex-end;}


/*-----------------------------------------------------------------------------------*/
/* Work
/*-----------------------------------------------------------------------------------*/

#page-hero {
	height: 100vh; min-height: 600px; width: 100%;
	background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed !important;
	padding: 0; position: relative; overflow: hidden;
}
	#page-hero .container {height: 100vh; min-height: 600px; position: relative;} 
		#page-hero h1 { 
			z-index: 2; color:var(--Off-White-100); margin:0; position: absolute; bottom: 58px; left: 0; padding-right: 40px; max-width: 546px; text-align: left;
			text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
		}

@media (max-width: 1024px), (hover: none) {
  #page-hero { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  #page-hero { background-attachment: scroll; }
}

.work {padding: 40px 0 75px 0; background: var(--Charcoal-Black-100); }
	.work h2 {color: var(--Off-White-100); padding: 0; margin: 0 0 40px 0;}
	.work ul {display: flex; flex-wrap: wrap; width: calc(100% - 20px); margin: 0 -10px;}
		.work ul li {
			width: calc(33.33% - 20px); margin: 10px;
			transition:all 0.5s ease 0s; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -ms-transition:all 0.5s ease 0s; 
		}
			.work ul li .image-holder {background: #fff;}
		.work ul li:hover img {opacity: 0.9;}
		.work ul li .client-name {
			color: var(--Off-White-100); font-size: 20px; font-weight: bold; /*text-transform: uppercase;*/ margin: 0; padding: 10px 30px 0 0;
			background: url(images/icon-arrow-up-right.svg) right center no-repeat;
		}

#case-studies-slider {background: #f1f2f0; padding: 75px 0 90px 0;}
	#case-studies-slider .container {/*max-width: 1600px;*/}
	
		#case-studies-slider .slider {position: relative; width: 100%;}
			#case-studies-slider .slider ul.slides { width: 100%; height: 507px;}
				#case-studies-slider .slider ul.slides li {display: none;}
					#case-studies-slider .slider ul.slides li .container {display: flex; flex-wrap: wrap; width: 100%; background: #fff; padding: 0;}

						#case-studies-slider .left-column {width: calc(100% - 460px); height: 507px; padding-right: 20px; background: #f1f2f0;}
							#case-studies-slider .image-panel {height: 507px; overflow: hidden;}
								#case-studies-slider .image-panel img {object-fit: cover; width: 100%; height: 100%;}
						#case-studies-slider .right-column {width: 440px; height: 507px; background: #fff; position: relative;}
							#case-studies-slider .right-column .case-study-text-top {position: absolute; top: 0; padding: 40px; }
								#case-studies-slider .text-holder h3 {color: var(--Soft-Clay-100); font-size: 28px; padding: 0; margin: 0 0 10px 0;}
								#case-studies-slider .right-column .subtitle {color: var(--Charcoal-Black-100); font-size: 20px;}
							#case-studies-slider .right-column .case-study-text-bottom {position: absolute; bottom: 0; padding: 40px; }
								#case-studies-slider .right-column p {font-size: 20px; padding: 0; margin: 0 0 20px 0;}		

			#case-studies-slider .slider .flex-control-nav {position: absolute; bottom: -35px; left: 0;}
				#case-studies-slider .slider .flex-control-nav li { display:inline-block; margin:0 7px 0 0; }
					#case-studies-slider .slider .flex-control-nav li a { 
						background:var(--Soft-Clay-100); width:15px; height:15px; border-radius:50%; text-indent:-9999px; display:block; 
					}
				#case-studies-slider .slider .flex-control-nav li .flex-active { background:var(--Burnt-Orange-100); }
			#case-studies-slider .slider .flex-direction-nav { display:none; }


/*-----------------------------------------------------------------------------------*/
/* Directors
/*-----------------------------------------------------------------------------------*/

#directors-grid {background: var(--Charcoal-Black-100); padding: 60px 0;}	
	#directors-grid h3 {color: var(--Off-White-100); margin: 0; padding: 0;}
	#directors-grid ul { padding: 20px 0 75px 0; display: flex; width: calc(100% + 20px); margin: 0 -10px;}
			
		
/*-----------------------------------------------------------------------------------*/
/* Process
/*-----------------------------------------------------------------------------------*/

#process-intro {padding: 50px 0;}
	#process-intro .container {display: flex; flex-wrap: wrap; align-items: center; padding: 50px 0; height: auto; max-width: 100%;}
		#process-intro .container .left-column {margin-right: 33px; width: calc(50% - 33px); height: 478px; background: center center / cover;}
		#process-intro .container .right-column {padding: 0 33px; }
			#process-intro h2 { max-width: 560px; margin: 0 0 20px 0; text-align: left;}
			#process-intro p { color: var(--Off-White-100); max-width: 640px; font-size: 24px; letter-spacing: 0;}

#our-process {background: var(--Charcoal-Black-100); padding: 75px 0;}
	#our-process h2 {color: var(--Off-White-100); padding: 0; margin: 0 0 50px 0; text-align: center;}

	ul#process-list {width: 100%; max-width: 795px; margin: auto; display: flex; flex-wrap: wrap;}
		ul#process-list li {width: 100%; margin: 8px auto 10px auto; padding: 40px; border: solid 1px var(--Slate-Grey-100); display: flex; align-items: center;}
			ul#process-list li .number-holder {margin-right: 40px;}
			ul#process-list li .text-holder {}
				ul#process-list li .text-holder h3 {color: var(--Off-White-100); margin: 0 0 10px 0; padding: 0;}
				ul#process-list li .text-holder p {color: var(--Soft-Clay-100); font-size: 20px; margin: 0; padding: 0;}


/*-----------------------------------------------------------------------------------*/
/* Results
/*-----------------------------------------------------------------------------------*/

#results-intro {padding: 50px 0;}
	#results-intro .container {display: flex; flex-wrap: wrap; align-items: center; padding: 50px 0; height: auto; max-width: 100%;}
		#results-intro .container .left-column {margin-right: 33px; width: calc(50% - 33px); height: 478px; background: center center / cover;}
		#results-intro .container .right-column {padding: 0 33px; }
			#results-intro h2 {max-width: 560px; margin: 0 0 20px 0; text-align: left;}
			#results-intro p {color: var(--Off-White-100); max-width: 640px; font-size: 24px; letter-spacing: 0;}

#testimonials-slider {background: var(--Charcoal-Black-100); padding: 40px 0;}
	#testimonials-slider .container {/*max-width: 1600px;*/}
		#testimonials-slider .slider {position: relative; width: 100%;}
			#testimonials-slider .slider ul.slides { width: 100%; height: 576px;}
				#testimonials-slider .slider ul.slides li {display:none;}
					#testimonials-slider .slider ul.slides li .container {display: flex; flex-wrap: wrap; align-items: center;}
						#testimonials-slider .left-column {margin-right: 50px; width: calc(42% - 50px);}
							#testimonials-slider .left-column blockquote {color: var(--Off-White-100); font-size: 32px; padding: 0; margin: 0 0 50px 0; line-height: 1.5;}
							#testimonials-slider .left-column .author {color: var(--Off-White-100); font-size: 24px; font-weight: bold; padding: 0; margin: 0 0 5px 0;}
							#testimonials-slider .left-column .company {color: var(--Soft-Clay-100); font-size: 24px; padding: 0; margin: 0;}
						#testimonials-slider .right-column {width: 58%;}
							#testimonials-slider .image-panel {height: 576px; }
			#testimonials-slider .slider .flex-control-nav {position: absolute; bottom: 0; left: 0;}
				#testimonials-slider .slider .flex-control-nav li { display:inline-block; margin:0 7px 0 0; }
				#testimonials-slider .slider .flex-control-nav li a { 
					background:var(--Off-White-100); width:15px; height:15px; border-radius:50%; text-indent:-9999px; display:block; 
				}
				#testimonials-slider .slider .flex-control-nav li .flex-active {background:var(--Soft-Clay-100);}
			#testimonials-slider .slider .flex-direction-nav {display:none;}

.page-template-results #stats {background: var(--Charcoal-Black-100);}


/*-----------------------------------------------------------------------------------*/
/* Contact
/*-----------------------------------------------------------------------------------*/

.page-template-contact #header {background-color: var(--Charcoal-Black-100);}

.page-template-contact #titlebar {background: var(--Charcoal-Black-100);}

.page-template-contact #main {padding-top: 25px;}

#contact-left {background: url(images/contact-bg.png?v=2) center center / cover; margin: 0 75px 0 0; padding: 40px; width: calc(50% - 75px);}
	#contact-left h2 {padding: 0; margin: 0 0 20px 0;}
	#contact-left p {color: var(--Off-White-100); font-size: 24px;}

	#contact-left .contact-item {display: flex; flex-wrap: wrap; padding: 10px 0 0 0; font-size: 20px;}
		#contact-left dl dt {width: 160px; color: var(--Soft-Clay-100); font-weight: bold; }
		#contact-left dl dd a {color: var(--Off-White-100);}

.page-template-contact .right-column {width: 50%;}

.wpcf7 {padding: 10px 0;  margin:0 auto; }
form .field { margin:0 0 20px 0; }
form .field-50 {display: flex; justify-content: space-between; margin: 0;}
	form .field-left {width: calc(50% - 10px); margin-right: 10px;}
	form .field-right {width: calc(50% - 10px); margin-left: 10px;}

	form .field label {font-weight: normal; font-size: 20px;}
	
	form .field input[type=text] ,
	form .field input[type=email] ,
	form .field input[type=tel] { 
		width:100%; height:52px; line-height:52px;
		margin: 5px 0 0 0; padding:0 15px; background:var(--Off-White-100);; border:1px solid var(--Soft-Clay-100); border-radius:5px; font-size:18px; 
	}
	form .field textarea { 
		width:100%; height:200px;
		margin: 5px 0 0 0;  padding: 15px 15px; background:var(--Off-White-100);; border:1px solid var(--Off-White-100); border-radius:5px; resize:none; font-size:18px; 
	}
	form .field input[type=submit] { 
		min-width: 172px; padding: 0 30px; border-radius:30px; border: none; cursor:pointer; display:inline-block; 
		line-height: 42px; font-size:18px; font-weight:700; background: var(--Burnt-Orange-100); color:var(--Off-White-100); 
		transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; 
	}
		form .field input[type=submit]:hover  { background:var(--Off-White-100); color:var(--Charcoal-Black-100); }


/*-----------------------------------------------------------------------------------*/
/* Thank You
/*-----------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------*/
/* Single
/*-----------------------------------------------------------------------------------*/

.back-button {color: #fff; display: inline-block; margin: 0 0 30px 0;}
	.back-button:hover {text-decoration: underline;}

#case-study-detail {padding: 60px 0; background: var(--Charcoal-Black-100); color: var(--Off-White-100);}
	#case-study-detail .container {display: flex; flex-wrap: wrap; justify-content: space-between;}
		#case-study-detail .container .right-column {width: calc(50% - 50px);}
		#case-study-detail .container .left-column {width: calc(50% - 50px);}
			#case-study-detail h3 { color: var(--Soft-Clay-100); text-transform: none; font-size: 28px; font-weight: 400; font-family:basic-sans, sans-serif;}
			#case-study-detail p {margin: 20px 0; font-size: 24px;} 

#video-content {padding: 40px 0 60px 0; background: var(--Charcoal-Black-100);}
	#video-content h2 {color: var(--Off-White-100); margin: 0 0 30px 0; font-size: 36px;}

#case-testimonials {padding: 40px 0 80px 0; background: var(--Charcoal-Black-100) url(images/testimonial-bg.png); color: var(--Off-White-100);}
	#case-testimonials .container {display: flex; flex-wrap: wrap; justify-content: space-between;}
		#case-testimonials .container .left-column {width: calc(50% - 50px);}
			#case-testimonials p { font-size: 24px;}
			#case-testimonials .name { color: var(--Off-White-100); text-transform: none; font-size: 32px; font-weight: 700; font-family:basic-sans, sans-serif;}
			#case-testimonials .position { color: var(--Soft-Clay-100); text-transform: none; font-size: 28px; font-weight: 400; font-family:basic-sans, sans-serif;}
		#case-testimonials .container .right-column {width: calc(50% - 50px);}
			#case-testimonials .container .right-column .image-holder img {object-fit: cover; width: 100%; height: 100%;}