/* @override 
	http://localhost/signature2021/wp-content/themes/signature/style.css?*
	https://2021.signaturecreative.com/wp-content/themes/signature/style.css?*
	https://signaturecreative.com/wp-content/themes/signature/style.css?* */

/*!
Theme Name: signature
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: signature
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

*/

@import "lib/css/normalize.css";
@import "lib/css/fonts.css";


/* @group GENERAL */

/************************************************************************************************************************************* 
		
		GENERAL 
		
*************************************************************************************************************************************/
:root {
	--rem-base: 62.5%;
}

body {
	--text-color: #242e35;
	--text-light: 30%;
	--text-muted: #171717;
	--text-highlight: #f17561;
	--bg-color: #F1F1F1;
	--bg-footer: #fff;
	--bg-input: rgba(255, 255, 255, 0.7);
	--font-family-header: "Beatrice",sans-serif;
	--font-family-body: "Armin Grotesk",sans-serif;
	--font-size-body: 1.8rem;
	--font-size-small: 1.2rem;
	--font-size-medium: 2.8rem;
	--font-size-large: 4rem;
	--font-size-xlarge: 4.6rem;
	--line-height-small: 1.14;
	--line-height-body: 1.6;
	--line-height-large: 1.3;
	--font-size-h1: 14rem;
	--font-size-h2: 7rem;
	--ease-in: cubic-bezier(0.49,0.025,0.65,0.65);
	--ease-out: cubic-bezier(0.28,0.44,0.49,1);
	--ease-in-out: cubic-bezier(0.49,0.025,0.49,1);
	--ease-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
	--ease-out-quart2: cubic-bezier(0.19, 1, 0.22, 1);
	--container-width: 1270px;
	--section-margin: 16rem;
	--section-cs-margin: 10rem;
	--max-col-width: 60rem;
	--grid-width: 100vw;
	--grid-columns: 12;
	--grid-padding: 6rem;
	--grid-gutter: 4rem;
	
	--plyr-color-main: var(--text-highlight);
	--loading-bg: var(--text-color);
	--loading-text: var(--bg-color);
	
/*	--plyr-video-control-color-hover	: var(--text-highlight);*/

}

@media only screen and (max-width:1024px) {
	body {
		--grid-padding: 4rem;
		--grid-gutter: 4rem;
	}
}




@media only screen and (min-width:1280px) {
	body {
		--font-size-h1: 14vw;
		--grid-padding: 8rem;
		--section-margin: 12rem;
		--grid-gutter: 6rem;
	}
}
@media only screen and (max-width:536px) {
	body {
		--font-size-h1: 6.3rem;
		--font-size-h2: 4.2rem;
		--grid-padding: 2rem;
		--grid-gutter: 1.6rem;
		--section-margin: 5rem;
		--section-cs-margin: 5rem;
		--font-size-small: 1.2rem;
		--font-size-medium: 2rem;
		--font-size-large: 3.2rem;
		--font-size-xlarge: 3.4rem;
	}
}

body.casestudy-template {
	--bg-color: #F1F1F1;
	--text-color: #242e35;
	--text-highlight: #f17561;
	--text-footer: #242e35;
	--bg-footer: #ffffff;
	--bg-input: #f0f0f0;
}





*, :after, :before {
	box-sizing: inherit;
	-webkit-backface-visibility: inherit;
	backface-visibility: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	font-size: var(--rem-base);
	font-variant-ligatures: normal;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

body {
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	font-family: var(--font-family-body);
	font-weight: normal;
	color: var(--text-color);
	background-color: var(--bg-color);
	margin: 0 !important;
	padding: 0 !important;
	/*	will-change: background-color,color;
		transition: background-color 600ms var(--ease-out-quart2), color 600ms var(--ease-out-quart2);*/
}

body.active {
	overflow: hidden;
}
#wrapper {
	margin-top: 140px;
}

::selection {
	-webkit-text-fill-color: #ffffff;
	background-color: currentColor;
}

*, a:focus, button:focus {
	outline: 0;
}

#main-content {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.page-wrapper {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 0;
/*	transform: translate(0, 100px);*/
	
}

/* @end */



/* @group UTILITIES */

/************************************************************************************************************************************* 
		
		UTILITIES 
		
*************************************************************************************************************************************/

.container {
	/*max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;*/
	width: 100%;
	box-sizing: border-box;
	padding-left: var(--grid-padding);
	padding-right: var(--grid-padding);
}
.container-md {
	max-width: 1270px;
	margin: 0 auto;
}
.section {
	margin-top: var(--section-margin);
	margin-bottom: var(--section-margin);
}

.list-clean {
	list-style: none;
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	line-height: 1.4;
}

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

.text-left {
	text-align: left;
}

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

.text-highlight {
	color: var(--text-highlight);
}

a:link, a:visited, a:hover {
	color: var(--text-color);
	text-decoration: no;
}

.text-lg {
	font-size: var(--font-size-large);
	line-height: var(--line-height-large);
}

.text-md {
	font-size: var(--font-size-medium);
}

.text-sm {
	font-size: var(--font-size-small);
}

.h1, h1 {
	font-family: var(--font-family-header);
	font-size: var(--font-size-h1);
	line-height: 1;
}

.h2, h2 {
	font-family: var(--font-family-header);
	font-size: var(--font-size-h2);
	line-height: 1;
	font-weight: 500;
	letter-spacing: -2px;
}

.svg-arrow svg path {
	fill: var(--text-color);
}

.meta-div {
	margin: var(--section-margin) 0;
}

.meta-div-work {
	margin: 0 0;
	margin-top: var(--section-margin);
}

.meta-div .row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	padding-bottom: 14px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: var(--font-size-small);
}

.meta-div .line {
	height: 1px;
	width: 100%;
	background-color: currentColor;
	display: block;
}

.meta-div .col-link {
	justify-self: flex-end;
}

.meta-div .row a {
	text-decoration: none;
}

.btn-back2 span.svg-arrow {
	display: inline-block;
	margin-left: 0.8em;
}

.btn-back2 span.svg-arrow.arrow-left {
	margin-left: 0;
	margin-right: 0.8em;
}

.meta-div .col-link a  svg, .btn-back2 .svg-arrow svg  {
	width: 18px;
}

@media only screen and (max-width:536px) {
	.meta-div .row {
		display: flex !important;
		align-items: flex-start;
	}
	
	.meta-div .row .col {
		width: inherit !important;
	}
	
	.meta-div .row .col:last-child {
		text-align: right;
	}
	
	.meta-div .row .col:nth-child(2) {
		text-align: center;
		padding: 0;
	}
}
/*.row {
	display: flex;
	justify-content: space-between;

}
.row > .col {
        flex:0 0 calc((var(--grid-width) + var(--grid-gutter) - var(--grid-padding)*2)/ var(--grid-columns)*6 - var(--grid-gutter));
/*		padding: 0 var(--grid-gutter);*!/
}*/

.row {
	display: flex;
	/*	-moz-column-gap: var(--grid-gutter);
		column-gap: var(--grid-gutter);*/
	margin: 0 auto;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	width: 100%;
	justify-content: space-between;
}

.col {
	padding: 0 var(--grid-gutter);
	box-sizing: border-box;
}

.col:first-child {
	padding-left: 0;
}

.col:last-child {
	padding-right: 0;
}

.col-1 {
	grid-column: auto/span 1;
	flex: 1 1 calc(1/var(--grid-columns)*100%);
}

.col-2 {
	grid-column: auto/span 2;
	flex: 1 1 calc(2/var(--grid-columns)*100%);
}

.col-3 {
	grid-column: auto/span 3;
	width: calc(3/var(--grid-columns)*100%);
	flex: 1 1 calc(3/var(--grid-columns)*100%);
}

.col-4 {
	grid-column: auto/span 4;
	flex: 1 1 calc(4/var(--grid-columns)*100%);
}

.col-5 {
	grid-column: auto/span 5;
	flex: 1 1 calc(5/var(--grid-columns)*100%);
}

.col-6 {
	grid-column: auto/span 6;
	flex: 1 1 calc(6/var(--grid-columns)*100%);
}

.col-7 {
	grid-column: auto/span 7;
	flex: 1 1 calc(7/var(--grid-columns)*100%);
}

.col-8 {
	grid-column: auto/span 8;
	flex: 1 1 calc(8/var(--grid-columns)*100%);
}

.col-9 {
	grid-column: auto/span 9;
	flex: 1 1 calc(9/var(--grid-columns)*100%);
}

.col-10 {
	grid-column: auto/span 10;
	flex: 1 1 calc(10/var(--grid-columns)*100%);
}

.section-hero {
	display: flex;
	flex-direction: column;
	margin-top: 0;
	margin-bottom: 0;
	margin-top: 26rem;
	margin-bottom: var(--section-margin);
}

.section-hero h1 {
	font-size: var(--font-size-h1);
	line-height: 1.1;
	font-family: var(--font-family-header);
	letter-spacing: -10px;
	margin: 0;
	font-weight: 300;
	/*	max-width: 80%;*/
}
.section-hero h1 p {
	margin: 0;
}
#section-about-hero h1 {
	font-size: 12vw;
	line-height: 1.12;
}

.section-hero h1 span {
	text-decoration: none !important;
	display: block;
}

.split-parent {
	overflow-y: hidden;
	overflow-x: visible !important;
}

.section-hero h1 .split-parent {
	margin-top: -3rem;
}

.split-child {
	display: inline-block;
	/*  padding-bottom: 20px;*/
}
.split-parent strong, .split-child strong {
	display: inline-block;
}
/*.section-hero h1 > p {
	margin: 0;
}*/

.section-header h2, .section-header h1 {
	font-size: var(--font-size-h2);
	line-height: 1;
	max-width: 500px;
	letter-spacing: -3px;
	font-weight: 500;
}

.section-header h2, #single-career h1 {
	line-height: 1.1;
}

.section-header h2 .split-parent, #single-career .section-header h1 .split-parent {
	margin-top: -0.8rem;
}

.section-header h2 > p {
	margin: 0;
}

.section-intro {
	font-size: var(--font-size-large);
	line-height: 1.3;
	margin-bottom: 5.4rem;
}

.section .col-text p, .section .col-text .section-intro, .section .col-text h2 {
	max-width: var(--max-col-width);
}
/*.row .col{
        flex:0 0 calc((var(--grid-width) + var(--grid-gutter) - var(--grid-padding)*2)/var(--grid-columns)*6 - var(--grid-gutter))
    }*/
#section-home-hero h1 {
	font-size: 7vw;
	letter-spacing: -4px;
}
#section-home-hero {
	margin-bottom: 18rem;
}
#section-home-hero.section-hero h1 .split-parent {
	margin-top: 0;
}

#section-home-hero.section-hero h1 .split-parent:nth-child(1) .split-child div:nth-child(1) div {
	font-weight: 400;
}
#section-home-hero.section-hero h1 .split-parent:nth-child(1) .split-child div:nth-child(2) div {
	font-weight: 400;
}
#section-home-hero.section-hero h1 .split-parent:nth-child(1) .split-child div:nth-child(4) div {
	font-weight: 400;
}

#section-home-hero.section-hero h1 .split-parent:nth-child(2) .split-child div:nth-child(3) div {
	font-weight: 400;
}

/*@media only screen and (max-height:900px) and (min-width:536px) {
	#section-home-hero h1 {
		font-size: 11vw;
	}
}*/

@media only screen and (max-width:536px) {
	.row {
		display: block !important;
	}
	
	.row .col {
		width: 100% !important;
		padding-left: 0;
		padding-right: 0;
	}
	#section-home-hero {
		margin-bottom: var(--section-margin);
	}
	.section-hero {
		min-height: inherit;
		margin-top: 12rem;
	}
	
	.section-hero h1 {
		letter-spacing: -2px;
		max-width: 100%;
	}
	#section-home-hero.section-hero h1 {
		font-size: 4.3rem;
		letter-spacing: -1px;
		line-height: 1.2;
	}
	#section-home-hero.section-hero .split-parent {
		margin-top: -0.4rem !important;
	}
	
	#section-about-hero h1 {
		font-size: var(--font-size-h1);
		line-height: 1.1;
		letter-spacing: -2px;
	}
	
	.section-header h2 .split-parent {
		margin-top: 0;
	}
	
	
	
	.section-hero h1 .split-parent {
		margin-top: -1rem;
	}
	
	.section-header h2, .section-header h1 {
		margin-bottom: 3.2rem;
	}
	
	.section-intro {
		margin-bottom: 2rem;
		line-height: 1.2;
	}
}

/* @end */

/* @group LOADING & TRANSITIONS */

/************************************************************************************************************************************* 
		
		LOADING & TRANSITIONS 
		
*************************************************************************************************************************************/


#main-loading {
	position: fixed;
	top: 0;
	left: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000000000000000000000000;
	background-color: var(--text-color);
	transform: translate3d(0,0,0);
	overflow: hidden;
/*	transition: all .3s var(--ease-out-quart);*/
}

#loading-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100%;
	text-transform: uppercase;
	font-family: var(--font-family-body);
	font-weight: 700;
	letter-spacing: 2.4px;
	font-size: 1.8rem;
	margin-bottom: 1.6rem;
	color: var(--bg-color);
}
#loading-logo-wrapper {
	width: 60%;
	max-width: 800px;
	position: relative;
}
svg#loading-logo-outlined {
	width: 100%;
	opacity: 0;
}
svg#loading-logo-outlined g {
	color: var(--bg-color) !important;
	stroke: var(--bg-color) !important;
}

svg#loading-logo-outlined path {
	width: 100%;
/*	fill: #fff;*/
}
.path-fill-out {
	z-index: 1000000000000;
	position: relative;
}
#loading-logo-full {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000000000;
	opacity: 0;
}

#loading-logo-full path, #loading-logo-full rect, #loading-logo-full polygon  {
	fill: var(--bg-color) !important;
}
#loading-text {
	display: block;
	margin-top: -10px;
	opacity: 0;
	transform: translateY(20px);
}
#loading-text #dots {
	position: absolute;
}
/* @end */

/* @group ANIMATIONS */


canvas {
	width: 100%;
	max-width: 100%;
	height: auto !important;
}
@media only screen and (max-width:536px) {
	#loading-logo-wrapper {
		width: 80%;
		max-width: 800px;
		position: relative;
	}
	#loading-text {
		font-size: 1.2rem;
	}
}

/* @end */

/* @group NAVIGATION */

/************************************************************************************************************************************* 
		
		NAVIGATION 
		
*************************************************************************************************************************************/

#main-header {
	padding-top: 6.4rem;
	padding-bottom: 3rem;
	width: 100%;
	will-change: transform;
	left: 0;
	top: 0;
	z-index: 1000;
	overflow: hidden;
	position: fixed;
	-webkit-transition: transform .6s var(--ease-out-quart2);
	transition: transform .6s var(--ease-out-quart2);
	transform: translate3d(0,0,0);
	background-color: var(--bg-color);
	z-index: 10000;
}


/* 
 * Navigation Animations 
 */

#main-header.nav-up {
	transform: translate3d(0,-100%,0);
	top: 0;
}

#main-header.nav-down {
	transform: translate3d(0,0,0);
	top: 0;
}

.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before, .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
	background-color: var(--text-color) !important;
}

.hamburger.is-active:hover, .hamburger:hover {
	opacity: 1;
}

#main-header #main-logo {
	margin-right: 20px;
	transform: translate(0,100px);
	opacity: 0;
}

#main-header #main-logo svg {
	height: 36px;
}

#main-header #main-logo svg path {
	fill: var(--text-color);
}

#main-header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.main-navigation {
	min-width: 55%;
}

#menu-main {
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
}

#menu-main li {
	display: inline-block;
	padding: 0 3rem;
}

#menu-main a {
	font-size: 1.7rem;
	font-family: var(--font-family-header);
	font-weight: 500;
	text-decoration: none;
	color: var(--text-color);
	position: relative;
	overflow: hidden;
	display: inline-block;
	padding-bottom: 2px;
	
	transform: translate(0,100px);
	opacity: 0;
}

#menu-main a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: var(--text-highlight);
	transform: translateX(calc(-100% - .1rem));
	-webkit-animation: .25s var(--ease-out) 0s stroke-out forwards;
	animation: .25s var(--ease-out) 0s stroke-out forwards
}

#menu-main a:hover::before, #menu-main a.current::before {
	opacity: 1;
	-webkit-animation: .25s var(--ease-out) 0s stroke-in forwards;
	animation: .25s var(--ease-out) 0s stroke-in forwards
}
@keyframes stroke-in {
0% {
	transform: translate3d(-101%,0,0)
}

to {
	transform: translateZ(0)
}
}
@keyframes stroke-out {
0% {
	transform: translateZ(0)
}

to {
	transform: translate3d(102%,0,0)
}
}

.navigation-open {
	overflow: hidden;
}

#mobile-menu-icon {
	display: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
	
	
}

#mobile-navigation {
	display: none;
}

@media only screen and (max-width:536px) {
	#mobile-menu-icon {
		display: inherit;
		position: relative;
		top: -4px;
		transform: scale(.9) translate(0,'100px');
		
		opacity: 0;
	}
	
	#main-header {
		padding-top: 2.4rem;
		padding-bottom: 1rem;
	}
	
	#main-header #main-logo svg {
		height: 3rem;
	}
	
	.main-navigation {
		display: none;
	}
	
	#mobile-navigation {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		height: 100%;
		width: 100vw;
		padding: 2rem;
		box-sizing: border-box;
/*		-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
		transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);*/
		transform: scale(1) translate3d(0,10%,0);
		background-color: var(--bg-color);
		opacity: 0;
		visibility: hidden;
		display: flex;
		flex-direction: column;
	}
	
	#mobile-navigation.active {
		transform: scale(1) translate3d(0,0,0);
		opacity: 1;
		visibility: visible;
	}
	
	#mobile-navigation .main-menu {
		padding: 0;
		margin: 0;
		list-style: none;
		margin-top: 4rem;
	}
	
	#mobile-navigation .main-menu a {
/*		transform: translate(0,0);*/
		text-decoration: none;
		font-size: 3rem;
	}
	
	#mobile-navigation .copyright.row {
		width: 100%;
		justify-content: space-between;
		font-size: 0.9rem;
		padding-top: 4rem;
		padding-bottom: var(--grid-padding);
		text-transform: uppercase;
		letter-spacing: 1px;
		opacity: .4;
		margin-top: auto;
	}
	
	#mobile-navigation .col-menu h4 {
		text-transform: uppercase;
		font-size: 1.5rem;
		font-family: var(--font-family-header);
		font-weight: 600;
		letter-spacing: 1px;
		margin-bottom: 16px;
	}
}

/* @end */

/* @group HOME */

/************************************************************************************************************************************* 
		
		HOME 
		
*************************************************************************************************************************************/

/* SECTION HOME VIDEO */

#section-home-video video {
	width: 100%;
	/*	padding-top: 60px;
		padding-bottom: 60px;*/
}

#section-home-hero .intro-text {
	max-width: 50rem;
}

#section-home-video {
	margin-top: 0;
	margin-bottom: 0;
}
/* SECTION WELCOME */

#section-home-welcome {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 30vh;
	padding-top: 60px;
	padding-bottom: 60px;
	margin-top: 0;
	margin-bottom: 0;
}

#section-home-welcome .container {
	max-width: 1020px;
	text-align: center;
}

#section-home-welcome h4 {
	text-transform: uppercase;
	font-size: 1.6rem;
	letter-spacing: 2px;
	margin-top: 0;
	font-weight: normal;
	opacity: .6;
	margin-top: 4rem;
}

#section-home-welcome .text-welcome {
	font-size: var(--font-size-xlarge);
	line-height: 1.4;
}

#section-home-welcome .text-welcome > p {
	margin: 0;
}

#section-home-welcome .text-highlight {
	font-weight: 600;
	position: relative;
}

#section-home-welcome .text-highlight::before {
	content: "";
	position: absolute;
	height: 3px;
	width: 100%;
	background-color: var(--text-color);
	left: 0;
	bottom: -4px;
}

@media only screen and (max-width:536px) {
	#section-home-welcome {
		padding: 30px 0;
		min-height: inherit;
	}
	#section-home-welcome h4 {
		font-size: 1.2rem;
		margin-bottom: 2rem;
		
	}
	#section-home-welcome .text-welcome {
	font-size: 3rem;
	line-height: 1.4;
}
}

/* Section Work */

#section-featured-projects .featured-project {
	padding: 8rem 0;
	margin-right: auto;
	margin-left: auto;
	/*		max-width: 1200px;*/
}

#section-featured-projects .featured-project a {
	text-decoration: none;
	position: relative;
	display: flex;
	text-decoration: none;
	justify-content: space-between;
	align-items: center;
}

#section-featured-projects .featured-project:nth-child(even) a {
	flex-direction: row-reverse;
}

#section-featured-projects .featured-project:nth-child(even) a .col.project-info {
	padding-right: var(--grid-gutter);
	padding-left: 0;
}

#section-featured-projects .featured-project h2 {
	font-size: var(--font-size-large);
	line-height: 1.2;
	font-weight: 400;
	font-family: var(--font-family-body);
	margin-top: 0;
	margin-bottom: 0;
	letter-spacing: -1px;
}

.featured-project h2 b {
	font-weight: 600 !important;
	color: var(--text-color);
}

.featured-project .svg-arrow {
	width: 3rem;
	margin-top: 2rem;
}

.featured-project .svg-arrow svg {
	width: 3rem;
}

#section-featured-projects .featured-project .svg-arrow svg g {
	color: var(--text-color) !important;
	stroke: var(--text-color) !important;
}

.featured-project .col {
	/*	flex: 1;*/
}

.project-info-inner {
	padding: 6rem;
	margin-right: auto;
	margin-left: auto;
}

.featured-project .project-img {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 3;
	
}

.featured-project .project-img  img {
	width: 100%;
	position: relative;
	transition: transform .3s;
	transform: translate3d(0,0,0);
}
/*.featured-project .project-img img:hover {
	transform: translate3d(-10px,-10px,0);
}*/
.featured-project .project-img::before {
	content: " ";
	position: absolute;
	top: 2rem;
	right: 2rem;
	width: 100%;
	height: 100%;
	display: block;
	background-color: var(--text-color);
	opacity: .1;
}

#section-featured-projects .featured-project:nth-child(even) .project-img::before {
	right: inherit;
	left: 2rem;
}

.project-info.col {
	width: 48%;
}

.project-img.col {
	width: 52%;
}

@media only screen and (max-width:536px) {
	#section-featured-projects .featured-project {
		padding: 0;
		margin: 4rem 0;
	}
	
	#section-featured-projects .featured-project a {
		display: block;
	}
	
	.project-info.col {
		width: 100%;
		margin-top: 4rem;
		padding: 0;
	}
	
	.project-img.col {
		width: 100%;
	}
	
	.project-info-inner {
		padding: 0;
		max-width: inherit;
		margin-right: auto;
		margin-left: auto;
	}
}

/* Section Home Contact */


.address-wrapper {
	display: flex;
	margin-bottom: 4rem;
}

.address-wrapper .col:first-child {
	padding-right: 20px;
	width: 50%;
}

.contact-form-wrapper {
	margin-bottom: 3rem;
}

.contact-form-wrapper .form-row {
	margin-bottom: 2rem;
}

.contact-form-wrapper .input-text, .contact-form-wrapper .input-textarea {
	background-color: var(--bg-input);
	border: none;
	outline: none;
	padding: 36px 18px 12px 18px;
	width: 100%;
	box-sizing: border-box;
}

.contact-form-wrapper .input-text::placeholder, .contact-form-wrapper .input-textarea::placeholder {
	color: currentColor;
	opacity: .5;
	transition: opacity .3s;
}

.contact-form-wrapper .input-text:focus::placeholder, .contact-form-wrapper .input-textarea:focus::placeholder {
	opacity: .1;
}

.contact-form-wrapper .input-text, .contact-form-wrapper .input-textarea {
	color: currentColor;
}
.input-textarea {
	vertical-align: top
}

.icon-required {
	font-size: 1.4rem;
	margin-left: 2px;
	position: relative;
	top: -4px;
	color: currentColor;
	opacity: .5;
}

.textfield {
  position: relative;
}



.input:focus {  
  outline: none;  
}
.input-text-wrapper, .input-textarea-wrapper {
	position: relative;
}
.input-text-wrapper .label, .input-textarea-wrapper .label {  
  transform-origin: 0px 0px;  
  pointer-events: none;
  position: absolute;
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;  
  left: 18px;
  right: auto;
  top: 3rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  will-change: transform;
  color: var(--text-color) !important;
}

.input-textarea-wrapper .label {  
  top: 2.6rem;
}


.form-line {  
	background-color: currentColor;
	opacity: 0;
	height: 1px;
	width: 100%;
	position: absolute;
	transform: scaleX(0); 
	left: 0; 
	bottom: 0;
	z-index: 1000;
}


label.error {
	font-size: 1.2rem;
	line-height: 1;
	color: #ff0000;
}

.btn {
	background-color: var(--bg-input);
	border: 1px solid var(--bg-input);
	color: var(--text-color) !important;
	display: inline-block;
	padding: 16px 24px;
	min-width: 200px;
	cursor: pointer;
	transition: border .3s var(--ease-out);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1.4rem;
	box-sizing: border-box;
	
}
.btn:hover {
	border: 1px solid var(--text-highlight);
}

@media only screen and (max-width:536px) {
	.address-wrapper .col:first-child {
		width: 100%;
	}
	
	.address-wrapper {
		display: block;
	}
	.btn {
		width: 100%;
	}
}

/* @end */

/* @group VIDEO PLAYER */

.plyr--video .plyr__controls {
	background: none !important;
	position: relative;
	margin: 0 auto;
	width: 70%;
	min-width: inherit;
	padding-bottom: 40px;
	text-align: center;
	transform: none !important;
}
.plyr__controls-inner {
	
}
.plyr__controls-wrapper {
	background: linear-gradient(transparent,rgba(0,0,0,.6));
	background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.6)));
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	bottom: 0;
	color: #fff;
	left: 0;
	padding: 5px;
	padding: calc(var(--plyr-control-spacing,10px)/2);
	padding-top: 20px;
	padding-top: calc(var(--plyr-control-spacing,10px)*2);
	position: absolute;
	right: 0;
	transition: opacity .4s ease-in-out,transform .4s ease-in-out;
	z-index: 3
}
.plyr__progress, .plyr__progress input, .plyr__progress__buffer, .plyr__progress-input {
	border-radius: 0px !important;
}
.plyr__controls-inner {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.videoplayer-center {
	flex: 1;
	padding-right: 6rem;
	padding-left: 6rem;
}
/* @end */

/* @group PAGE ABOUT */

/************************************************************************************************************************************* 
		
		PAGE ABOUT 
		
*************************************************************************************************************************************/

/* @group Section Hero */

.section-hero .intro-text {
	max-width: 52rem;
	font-size: var(--font-size-medium);
	margin-right: 3%;
	margin-left: auto;
	margin-top: 12rem;
}

@media only screen and (max-width:536px) {
	.section-hero .intro-text {
		margin-top: 4rem;
	}
}

/* @end */

/* @group Section Philosophy */

#section-about-philosophy .row {
	align-items: center;
	margin-bottom: 10rem;
	margin-right: auto;
	max-width: 1670px;
	margin-left: auto;
}

#section-about-philosophy .row:nth-child(even) {
	flex-direction: row-reverse;
}
/*#section-about-philosophy .row:nth-child(even) .col-text {
	order:-1;
}*/

#section-about-philosophy .row h2 {
	margin-bottom: 2rem;
	font-size: 5rem;
}
#section-about-philosophy .text {
	max-width: 400px;
}
#section-about-philosophy.section-grid .col {
	flex: 1;
	padding: 2rem;
}

#section-about-philosophy .col-img {
	text-align: center;
}

#section-about-philosophy object, #section-about-philosophy svg {
	width: 90%;
	max-width: 600px;
	max-height: 600px;
	height: inherit;
	/*	width: 100%;*/
}
/*#section-about-philosophy .row:nth-child(even) .text {
	text-align: right !important;
	margin-left: auto;
	margin-right: 0;
}*/
#section-about-philosophy .row:nth-child(even) .col-text .col-text-inner {
/*	text-align: right !important;*/
	padding-left: 15%;
}
#section-about-philosophy .col-text-inner {
	max-width: 500px;
	font-size: var(--font-size-medium);
	margin-right: auto;
	margin-left: auto;
}

@media only screen and (max-width:536px) {
	#section-about-hero .intro-text {
		max-width: 100%;
		margin: 4rem 0;
	}
	
	#section-about-philosophy .row h2 {
		font-size: var(--font-size-h2);
	}
	#section-about-philosophy .text {
		max-width: inherit;
	}
	#section-about-philosophy .row {
		margin-bottom: 4rem;
		max-width: 100%;
	}
	
	#section-about-philosophy.section-grid .col {
		padding: 0;
	}
	#section-about-philosophy .row:nth-child(even) .col-text .col-text-inner {
		padding-left: 0;
	}
	#section-about-philosophy .col-img {
		margin-bottom: 4rem;
	}
	
	#section-about-philosophy object, #section-about-philosophy svg {
		width: 80%;
	}
}

/* @end */

/* @group Section People */

/************************************************************************************************************************************* 
		
		SECTION PEOPLE 
		
*************************************************************************************************************************************/

.people-row {
	margin-top: 6rem;
}

.people-row.row .col {
	flex: 1 1 calc(100%/3);
}

#section-people .text-lg {
	/*	max-width: 300px;*/
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	grid-template-rows: repeat(16, 5vw);
	grid-gap: 1rem;
	margin-top: 10rem;
}


.gallery-item {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}
.gallery-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-item:nth-child(1) {
	grid-column-start: 1;
    grid-column-end: 10;
    grid-row-start: 1;
    grid-row-end: 7;
}

.gallery-item:nth-child(2) {
	grid-column-start: 10;
    grid-column-end: 17;
    grid-row-start: 6;
    grid-row-end: 12;
}

.gallery-item:nth-child(3) {
	grid-column-start: 2;
    grid-column-end: 10;
    grid-row-start: 7;
    grid-row-end: 16;
}

.gallery-item:nth-child(4) {
	grid-column-start: 10;
    grid-column-end: 15;
    grid-row-start: 12;
    grid-row-end: 18;

}

.gallery-item:nth-child(5) {
	grid-column-start: 10;
    grid-column-end: 14;
    grid-row-start: 6;
    grid-row-end: 2;
}

.gallery-item .image-caption {
	font-size: 1.2rem;
	line-height: 1;
	max-width: 50%;
	font-family: var(--font-family-body);
	padding-top: 4px;
}

@media only screen and (max-width:536px) {
	.gallery-item .image-caption {
		width: 100%;
		max-width: 80%;
		padding-top: 0;
		font-size: 1.1rem;
		/*		display: none;*/
	}
}

/* @end */

/* @group Section Gallery */

/************************************************************************************************************************************* 
		
		SECTION GALLERY 
		
*************************************************************************************************************************************/

.gallery-info {
	column-count: 2;
	column-gap: 2rem;
}

.gallery-info p {
	margin: 0;
}

@media only screen and (max-width:536px) {
	.gallery-info {
		column-count: inherit;
		column-gap: 2rem;
	}
}

/* @end */

/* @group Section Careers */

#section-careers svg {
	height: 0.6em;
}

.careers-list-wrapper {
	margin-top: var(--section-margin);
}

ul.careers-list {
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: 2.2rem;
	/*	font-size: 1.8rem;*/
}

ul.careers-list li {
	border-top: 1px solid #B8BABC;
	padding: 2rem 0;
	display: grid;
	/*	grid-template-columns: repeat(3, 1fr);*/
	grid-template-columns: 20% 30% 50%;
}

.careers-list .col-index, .careers-list .col-department {
	font-weight: 600;
}

.careers-list .col-department {
	/*	word-break: break-all;*/
}

.careers-list .job {
	margin-top: 1.6rem;
}

.careers-list .job:first-child {
	margin-top: 0;
}

.careers-list li a {
	width: 100%;
	display: flex;
	text-decoration: none;
	padding-right: 5%;
}

.careers-list li a .col-position {
	padding-right: 0;
}

.careers-list li a .col-icon {
	margin-left: auto;
}

@media only screen and (max-width:536px) {
	ul.careers-list {
		font-size: 1.8rem;
		/*	font-size: 1.8rem;*/
	}
	
	ul.careers-list li {
		grid-template-columns: 3rem 45% 1fr;
	}
	
	.careers-list li a {
		padding-right: 0;
		line-height: 1.2;
	}
}

/* @end */

/* @group Section QUIZ */

/************************************************************************************************************************************* 
		
		SECTION QUIZ 
		
*************************************************************************************************************************************/

.section-quiz-inner {
	max-width: var(--container-width);
	margin: 0 auto;
	text-align: center;
}

.section-quiz-inner h2 {
	margin-bottom: 4rem;
}

#btn-start_quiz {
	min-width: 300px;
}

#quiz-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	z-index: 10000000;
	display: none;
}

.quiz-slides {
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	background-color: var(--text-color);
}

.quiz-slide {
/*	display: none;*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	height: 100vh;
	width: 100vw;
	background-size: cover !important;
	background-position: center center;
	transition: all .6s var(--ease-out-quart2);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
}
.quiz-slide.active {
/*	opacity: 1;
	visibility: visible;*/
	pointer-events: inherit;
}
.quiz-inner {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

.quiz-image {
	height: 100vh;
	width: 100vw;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.36);
	z-index: 1;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	visibility: hidden;
}
.quiz-overlay {
	height: 100vh;
	width: 100vw;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.36);
	z-index: 2;
	top: 0;
	left: 0;
}

.quiz-content {
	max-width: 1170px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	position: relative;
	z-index: 3;
}
.quiz-slide:first-child .btn-quiz-back {
	visibility: hidden;
}
.meta-div.quiz-header {
	margin-top: 0 !important;
/*	border-bottom: 1px solid #fff;*/
	font-size: 2rem;
	margin-bottom: 6rem;
}
.quiz-header-line {
	width: 0;
	height: 1px;
	background-color: #fff;
}
.meta-div.quiz-header a {
	color: #fff;
	text-decoration: none;
}

.meta-div.quiz-header svg path {
	fill: #fff;
}

.quiz-question {
	max-width: 900px;
	margin: 0 auto;
}
.quiz-question h2 {
	line-height: 1.6;
}
.quiz-question h2 .split-parent {
	margin-top: -3rem;
}

.quiz-answers {
	margin: 3em 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.quiz-answer {
	margin: 0 1rem;
}
.btn-full {
	background-color: #EEEEEE;
	color: #171717;
	padding: 16px 32px 14px;
	border-radius: 200px;
	text-decoration: none;
	display: inline-block;
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.2;
	transition: all .6s var(--ease-out-quart2);
	opacity: 1;
}
.btn-full:hover {
	opacity: .8;
}
.btn-full.active {
	background-color: #171717;
	color: #EEEEEE;
	opacity: 1 !important;
}

#quiz-message {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--bg-color);
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: all .6s var(--ease-out-quart2);
}
#quiz-message.active {
	pointer-events: inherit;
	opacity: 1;
	visibility: visible;
}
#quiz-message-content {
	max-width: 800px;
	position: relative;
}
#quiz-message-copy {
	font-size: 3rem;
	
}
#quiz-btn-close {
	position: absolute;
	top: 4rem;
	right: 4rem;
	z-index: 10000;
}
#quiz-btn-close svg {
	width: 3rem;
}
#quiz-btn-close svg path {
	stroke: #ffffff;
}
@media only screen and (max-width:536px) {
	.section-quiz-inner h2 {
		font-size: 3.2rem;
		line-height: 1.2;
	}
	.quiz-content {
		max-width: 100%;
		padding: 2rem;
		box-sizing: border-box;
	}
	.quiz-answers {
	margin: 3em 0;
	display: block;
}
.quiz-answer {
	margin: .5rem 0;
	width: 100%;
}
}

/* @end */

/* @end */

/* @group PAGE: WORK */

.section-work {
	margin-bottom: 0;
}

.section-work .meta-div {
	margin: var(--section-margin) 0;
}

.section-work .section-header h2 {
	font-size: 7rem;
	/*	word-break: break-all;*/
	/*	word-spacing: 300px;*/
}

.section-work-intro {
	font-size: var(--font-size-medium);
	line-height: 1;
	max-width: 560px;
	margin-top: 2rem;
	/*	display: flex;
		align-items: center;
		height: 100%;*/
}

.work-carousel-wrapper {
	margin: 6rem 0 4rem 0;
}

.work-carousel {
	/*	position: relative;
    width: 100vw;
    white-space: nowrap;*/
	padding-top: 3rem;
	padding-bottom: 3rem;
	margin-top: 0;
}


.work-card {
	width: 430px;
	padding: 0 1rem;
	display: inline-block;
	cursor: pointer;
	white-space: normal;
	box-sizing: border-box;
}

.work-card:first-child {
	padding-left: 0;
	margin-left: var(--section-margin);
}

.work-card:last-child {
	padding-right: 0;
}

.work-card-img {
	min-height: 24rem;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	border: 0px solid var(--text-highlight);
	transition: border .3s var(--ease-out-quart2);
	position: relative;
}
.work-card-img:hover {
	border: 20px solid var(--text-highlight);
}
/*.work-card-img::before {
	content: "";
	width: 100%;
	height: 100%;
	border: 0px solid var(--text-highlight);
	transition: border .3s var(--ease-out-quart2);
	position: absolute;
}
.work-card-img:hover::before {
	border: 20px solid var(--text-highlight);
}*/
.work-card-text {
	min-height: 20rem;
	padding: 3.2rem;
	background-color: rgba(255, 255, 255, 0.20);
	display: flex;
	flex-direction: column;
}

.work-card-text .svg-arrow svg {
	width: 1.4em;
}

.work-link {
	text-transform: uppercase;
	font-size: var(--font-size-small);
	text-decoration: none;
	font-weight: 600;
	margin-top: auto;
	align-self: flex-end;
}

@media only screen and (max-width:536px) {
	.work-card-text {
		padding: 2rem;
	}
}

/* @end */

/* @group PAGE: WORK 2 */

#categories-navigation-wrapper {
	margin-bottom: 4rem;
}
#categories-navigation {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: flex-start;
	padding-top: 3rem;
	padding-bottom: 1rem;
	margin-bottom: 6rem;
	
	overflow-x: auto;
}
#categories-navigation li {
	padding: 0 2rem;
}
#categories-navigation li:first-child {
	padding-left: 0;
}
#categories-navigation li:last-child {
	padding-right: 0;
}
#categories-navigation li a{
	text-transform: uppercase;
	font-family: var(--font-family-body);
	font-weight: 600;
	letter-spacing: 2px;
	font-size: 1.4rem;
	margin-bottom: 1.6rem;
	text-decoration: none;
	
	position: relative;
	overflow: hidden;
	display: inline-block;
	padding-bottom: 2px;
}
.current {
	
}
#categories-navigation li a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: var(--text-highlight);
	transform: translateX(calc(-100% - .1rem));
	-webkit-animation: .25s var(--ease-out) 0s stroke-out forwards;
	animation: .25s var(--ease-out) 0s stroke-out forwards
}

#categories-navigation li a:hover::before, #categories-navigation li a.current::before {
	opacity: 1;
	-webkit-animation: .25s var(--ease-out) 0s stroke-in forwards;
	animation: .25s var(--ease-out) 0s stroke-in forwards
}

#work-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 2rem;
}
#work-grid .work-card {
	padding: 0;
	margin: 0;
	width: 100%;
}
#work-grid .work-card a {
	text-decoration: none;
}
#work-grid .work-card-img {
	min-height: 24vw;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
#work-grid .work-card-text {
	background-color: transparent;
	color: var(--text-color);
	padding-left: 2rem;
}
#work-grid .work-card-text h3 {
	font-size: 2.8rem;
	line-height: 1.1;
	font-weight: 600;
	margin-bottom: 1rem;
}
#work-grid .work-card-text .text {
	opacity: .75;
	max-width: 360px;
}
#work-grid .work-card-text .text p {
	margin: 0;
}
#work-grid .work-link {
	display: none;
}
#work-grid .work-card.active {
/*	background-color: #ff0000 !important;*/
}

/*.work-card.active {
	transform: scale(0);
	opacity: 0;
}*/

@media only screen and (max-width:536px) {
	#work-grid {
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 0;
}
#work-grid .work-card {
	margin-bottom: 2rem;
}
#work-grid .work-card-img {
	height: 50vw;
}
#work-grid .work-card-text {
	padding-left: 1rem;
	padding-right: 1rem;
	min-height: inherit;
	max-width: inherit;
}
#work-grid .work-card-text h3 {
	font-size: 2.4rem;
	line-height: 1.1;
}
}
/* @end */

/* @group CAREERS */

#single-career .meta-div {
	margin-bottom: 4rem;
	margin-top: 20rem;
}

#section-header-career {
	padding-top: 0rem;
	margin-top: 0;
}

.section-career-text h2 {
	font-size: 2rem;
	font-family: var(--font-family-body);
	font-weight: 600;
	letter-spacing: 2px;
	margin: 4rem 0 2rem 0;
	padding-top: 2rem;
	border-top: 1px solid #333;
	text-transform: uppercase;
}

@media only screen and (max-width:536px) {
	.section-work-intro {
		max-width: 100%;
	}
	
	.work-carousel-wrapper {
		margin: 4rem 0 2rem;
	}
	
	.work-card {
		width: 80vw;
		margin-left: 1rem;
		margin-right: 1rem;
		padding: 0;
	}
	
	.work-card:first-child {
		margin-left: 2rem;
	}
	
	#single-career .meta-div {
		margin-bottom: 2rem;
		margin-top: 8rem;
	}
	
	#section-header-career {
		padding-top: 0rem;
	}
	
	.section-work .section-header h2 {
		font-size: var(--font-size-h2);
	}
	
	
}

/* @end */

/* @group Section Collaborate */


.quote {
	font-size: var(--font-size-medium);
	line-height: 1.4;
}

.quote-author {
	opacity: .3;
	text-transform: uppercase;
	font-size: var(--font-size-body);
	margin-top: 1.6rem;
}

#collaborate-wrapper {
	margin: 10rem 0;
	/*	width: 100vw;
		overflow: hidden !important;*/
}

.drag-helper {
	text-align: center;
	color: var(--text-color);
	text-transform: uppercase;
	font-family: var(--font-family-body);
	font-weight: 600;
	letter-spacing: 2.4px;
	font-size: 1.4rem;
	opacity: .2;
	margin-bottom: 2rem;
}
.drag-helper svg {
	width: 2rem;
}
.drag-helper svg path {
	fill: var(--text-color);
}
.card {
/*	background-color: #0E0E0E;*/
	background-color: #1e212b;
	padding: 4rem;
	width: 370px;
	height: 650px;
	display: inline-block;
	margin: 2rem 1.6rem;
	position: relative;
	cursor: pointer;
	white-space: normal;
}

.card:hover {
	transform: scale(1.05);
}

.card:hover .icon-plus {
	/*	transform: rotate(90deg);*/
	color: var(--text-highlight);
	/*transform-origin: center;*/
}

/*.card:first-child {
	margin-left: 8rem;
}*/

.page-template-template-work .flickity-slider, .page-template-template-expertise .flickity-slider {
	margin: 0 var(--grid-padding) !important;
}

.card-front {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.card-icon {
	text-align: center;
	margin: 2rem auto 4rem auto;
	width: 170px;
	height: 170px;
	display: flex;
	align-items: center;
	text-align: center;
}

.card-icon object, .card-icon img {
	/*	filter: invert(50%) sepia(8%) saturate(3083%) hue-rotate(320deg) brightness(108%) contrast(106%);*/
	width: 170px;
	height: 170px;
	margin: 0 auto;
}

.card-icon svg {
	width: 170px;
	height: 170px;
	margin: 0 auto;
}

.card-icon svg path, .card-icon svg circle, .card-icon line, .card-icon polyline, .card-icon polygon {
	stroke: var(--text-highlight);
	stroke-width: 1;
}

.card-text-wrapper::before {
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--text-color);
	opacity: .2;
	display: block;
	margin-bottom: 4rem;
}
/*.card-text-wrapper {
	border-top: 1px solid #979797;
	padding-top: 4rem;
}*/

.card h4 {
	font-size: 3rem;
	line-height: 1.2;
	font-weight: normal;
	margin-bottom: .6em;
	/*	word-spacing: 300px;*/
	position: relative;
}

.card h4 .icon-plus {
	content: "+";
	position: absolute;
	right: 0;
	bottom: 0;
	font-weight: 100;
	font-size: 3rem;
	line-height: 1rem;
}

.card-open {
	text-decoration: none;
}

.card-text {
	font-size: 2.4rem;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(50px);
	transition-delay: 2s;
}

.card-number {
	position: absolute;
	left: 4rem;
	bottom: 4rem;
	display: inline-block;
	font-size: 8rem;
	line-height: 1;
	font-weight: 500;
	font-family: var(--font-family-header);
	align-self: self-end;
	margin-top: auto;
}

.slick-track:first-child {
	margin-left: var(--grid-padding);
}

/* Card Active */

.card .icon-close {
	width: 2.6rem;
	height: 2.6rem;
	position: absolute;
	top: 8rem;
	right: 4rem;
	opacity: 0;
}

.card .icon-close svg, .card .icon-close svg path {
	stroke: var(--text-highlight);
}

.card-icon img {
	width: 100%;
}

.card {
	transition: transform 600ms var(--ease-out-quart2), background-color 600ms var(--ease-out-quart2);
}

.card-icon, .card-number, .icon-plus, .card .icon-close, .card .card-text {
	transition: all 600ms var(--ease-out-quart2);
}

.card.active {
	transform: scale(1.05);
	background-color: #171921;
}

.card.active .card-icon {
	transform: translate3d(0,-40px,0);
	height: 0;
	opacity: 0;
}

.card.active .icon-plus {
	transform: rotate(-180deg);
	opacity: 0;
}

.card.active .card-text {
	opacity: .6;
	transform: translateY(0);
}

.card.active .card-number {
	font-size: 4rem;
}

.card.active .icon-close {
	opacity: 1;
	top: 4rem;
}

.scrollbar-container {
	max-width: 36vw;
	margin: auto;
	text-align: center;
	position: relative;
	z-index: 1000;
	height: 10px;
	margin-top: 20px;
	/*	overflow: hidden;*/
}

.scrollbar-track {
	background-color: #333;
	width: 100%;
	height: 2px;
	border-radius: 200px;
	display: flex;
	align-items: center;
}

.scrollbar-knob {
	background-color: #fff;
	border-radius: 200px;
	width: 50px;
	height: 2px;
	transition: height .2s;
}

.scrollbar-knob:hover {
	height: 6px;
}
#collaborate-carousel .flickity-page-dots {
	position: relative;
}
#collaborate-carousel .flickity-button, #collaborate-carousel .flickity-button:hover {
	background-color: transparent;
}

#collaborate-carousel .flickity-button svg , #collaborate-carousel .flickity-button svg path {
	fill: var(--text-color) !important;
}

.flickity-page-dots .dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 6px;
	background: currentcolor;
	border-radius: 50%;
	cursor: pointer
}
.flickity-page-dots .dot.is-selected {
	background-color: var(--text-highlight) !important;
}
@media only screen and (max-width:536px) {
	.drag-helper {
/*		display: none;*/
		margin-bottom: 1.6rem;
	}
	.quote-wrapper {
		max-width: 100%;
	}
	
	#collaborate-wrapper {
		margin: 4rem 0;
	}
	
	.card:first-child {
		margin-left: 0;
	}
	
	.card-icon {
		margin: 2rem auto 2rem auto;
	}
	
	.card .icon-close {
		width: 2rem;
		height: 2rem;
		right: 3rem;
	}
	
	.card {
		padding: 3rem;
		width: 80vw;
		height: 70vh;
		max-height: 650px;
		box-sizing: border-box;
		margin: 0 1rem;
	}
	
	.card h4 {
		/*		font-size: 2.6rem;
		line-height: 1.1;*/
		margin-bottom: 0.5em;
	}
	
	.card-text-wrapper::before {
		margin-bottom: 3rem;
	}
	
	.card-text {
		font-size: 2rem;
		line-height: 1.4;
	}
	
	.card-number {
		font-size: 4rem;
	}
	.card.active .card-number {
		font-size: 2rem;
	}
}

/* @end */

/* @group PAGE EXPERTISE */

/************************************************************************************************************************************* 
		
		PAGE EXPERTISE 
		
*************************************************************************************************************************************/

#section-expertise-hero .section-intro {
	/*	max-width: calc((var(--grid-width) + var(--grid-gutter) - var(--grid-padding)*2)/ var(--grid-columns)*7 - var(--grid-gutter));*/
	max-width: 900px;
	line-height: 1.4;
	margin-top: 4rem;
	
}
#section-expertise-hero {
/*	transform: translateY(200px);
	opacity: 0;*/
}

#tooltip {
	position: absolute;
	background-color: var(--text-color);
	color: var(--bg-color);
	border-radius: 50%;
	width: 120px;
	height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	font-family: var(--font-family-body);
	font-weight: 700;
	letter-spacing: 2.2px;
	font-size: 1.8rem;
	padding: 1rem;
	padding-top: 1.5rem;
	text-align: center;
	line-height: 1;
	z-index: 1000000000;
	top: 0;
	left: 0;
	pointer-events: none !important;
	cursor: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transform: scale(0.1);
	opacity: 0;
	
/*	position: relative;
	transform: scale(1);
	opacity: 1;*/
}
#tooltip-icons {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tooltip-icon {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
}
#icon-video-play {
	margin-left: 0.3rem;
}
#icon-video-play svg path,#icon-video-play svg line,#icon-video-play svg polygon, #icon-video-pause svg path,#icon-video-pause svg line,#icon-video-pause svg polygon {
/*	opacity: 0;
	visibility: hidden;*/
}
#icon-video-play svg {
	width: 30px;
	display: block;
}
#icon-video-pause svg {
	width: 20px;
	display: block;
}
.tooltip-icon svg g, .tooltip-icon svg path{
	stroke:  var(--bg-color);
	
}

/*.tooltip.active {
	transform: scale(1);
	opacity: 1;
}*/

/* REEL VIDEO */

#section-home-video {
	position: relative;
}
#video-wrapper {
	
	position: relative;
	text-align: center;
/*	padding-bottom: 6rem;*/

}
#video-reel-preview-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	transition: opacity 0.6s ease-out;
	width: 100%;
	height: 100%;
/*	pointer-events: none;*/
	
}
.video-reel-preview-wrapper.active {
/*	pointer-events: none;*/
}
#video-overlay.active {
	opacity: .8;
}
#page-expertise .section-hero h1 {
	min-height: 30vh;
}
.rotator {
	position: relative;
	vertical-align: text-bottom;
	margin-left: 0;
	
	overflow: hidden;
    height: 200px
}

.rotator span {
	position: absolute;
	top: 0;
	left: 0;
}

.ul-container {
	height: 220px;
	text-align: left;
	margin-top: -2rem;
}
ul.v-slides {
	list-style-type: none;
	padding:0;
	margin: 0;
}
.v-slide {
	line-height: 220px;
}

@media only screen and (max-width:536px) {
	/*#video-reel-preview-wrapper {
		pointer-events: none;
	}*/
	
	#page-expertise .section-hero h1 {
		min-height: inherit;
		margin-bottom: 3rem;
		font-size: 14.5vw;
	}
	
	#page-expertise .section-hero .intro-text {
		margin-top: 2rem;
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
	}
	#page-expertise .section {
		margin-top: 2rem;
	}
	.ul-container {
		height: 50px;
		margin-top: 0;
}
	.v-slide {
	line-height: 50px;
}
}

/* @group Section Numbers Stats */

.stat-numbers.grid {
	display: flex;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
}

.stat-numbers .col {
	flex: 33%;
	text-align: center;
}
.stat-numbers .col:after {
	content:  "";
	height: 100%;
	width: 1px;
	background-color: var(--text-color);
	opacity: .1;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
}
.stat-numbers .col:last-child:after {
	content: none;
}
.stat-number {
	font-family: var(--font-family-header);
	font-size: 14rem;
	letter-spacing: -10px;
	font-weight: 600;
	line-height: 1;
}

.stat-numbers .col .text {
	text-transform: uppercase;
	font-size: 1.6rem;
	line-height: 1.2;
	letter-spacing: 2px;
	font-weight: 600;
	margin: 1rem auto;
}

@media only screen and (max-width:536px) {
	.stat-numbers.grid {
		flex-direction: column;
	}
	
	.stat-numbers .col {
		margin-bottom: 3rem;
		text-align: left;
		padding: 0;
	}
	
	.stat-number {
		font-size: 6rem;
		letter-spacing: 0;
	}
	
	.stat-numbers .col .text {
		letter-spacing: 1px;
	}
}

/* @end */

/* @group Section Numbers */

/* Text Carousel */
#section-numbers .col-text {
	font-size: var(--font-size-medium);
	margin: 0;
}
#section-numbers .col-text p {
	margin: 0;
}

#text-carousel-wrapper {
	width: 100%;
	overflow: hidden;
}
.text-carousel{
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}
.text-carousel .box{
  margin: 0;
  padding: 0;
  display: inline-block;
  color:var(--text-color);
  font-size:10rem;
  font-weight:600;
  line-height:1;
  min-width: 100%;
  text-align: center;
}
.box-inner {
/*	color: #383d4a;*/
	color: #4b5161;
}
.text-carousel strong {
	font-weight:600;
	color: var(--text-highlight);
}
.marquee-dot {
	margin: 0 2rem;
}
@media only screen and (max-width:536px) {
	.text-carousel .box{
  font-size:4rem;
}
}
/* @end */

/* @group Section Capabilities */

#section-expertise-animation {
	display: flex;
	margin: 0;
}

#section-expertise-animation .col-visual {
	width: 60%;
}

#section-expertise-animation .col-visual img {
	max-width: calc((var(--grid-width) + var(--grid-gutter) - var(--grid-padding)*2)/var(--grid-columns)*6 - var(--grid-gutter));
}

#section-expertise-animation .col-text {
	display: flex;
	align-items: center;
}

#section-expertise-animation .col-text .text {
	font-size: var(--font-size-medium);
	width: calc((var(--grid-width) + var(--grid-gutter) - var(--grid-padding)*2)/var(--grid-columns)*5 - var(--grid-gutter));
}

@media only screen and (max-width:536px) {
	#section-expertise-animation {
		display: block;
	}
	
	#section-expertise-animation .col-visual, #section-expertise-animation .col-text .text {
		width: 100%;
	}
	
	#section-expertise-animation .col-visual img {
		max-width: 100%;
	}
}

/* @end */

/* @group Section Capabilities */

#section-capabilities {
	
}

.col-capabilities .col {
	flex: 50%;
	width: 50%;
	margin-bottom: 6rem;
	box-sizing: border-box;
	padding: 0 3rem;
}

.col-capabilities .col:nth-child(n) {
	padding-left: 0;
}

.col-capabilities .row {
	flex-wrap: wrap;
}

.col-capabilities h3 {
	text-transform: uppercase;
	font-family: var(--font-family-body);
	font-weight: 700;
	letter-spacing: 2.4px;
	font-size: 1.8rem;
	margin-bottom: 1.6rem;
}

.col-capabilities ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

@media only screen and (max-width:1080px) {
	/*#section-capabilities .section-header.row {
		display: block;
	}
	#section-capabilities .col-7 {
		padding-left: 0;
		margin-top: 4rem;
	}*/

	.col-capabilities .col {
		flex: 100%;
		margin-bottom: 1rem;
		padding-bottom: 2rem;
	}
	
	.col-capabilities .col:after {
		content: "";
		width: 100%;
		display: block;
		border-bottom: 1px solid currentcolor;
		opacity: .1;
		margin-top: 3rem;
	}
	.col-capabilities .col:last-child:after {
		content: none;
	}
}

/* @end */

/* @group Section Awards */

.awards-intro {
	font-size: var(--font-size-medium);
	margin-bottom: 6rem;
}

.awards-row {
	width: 100%;
}

.award-item ul li {
	display: grid;
	grid-template-columns: 100px 1fr;
	width: 100%;
}

.award-label {
	text-align: left;
	text-transform: uppercase;
	font-size: 1.2rem;
	line-height: 2.4;
	font-weight: 600;
	opacity: .3;
	letter-spacing: 1px;
	padding-right: 2rem;
	flex: 1;
	display: inline-block;
	/*	width: 28%;*/
	/*	box-sizing: border-box;*/
}

.award-text {
	display: inline-block;
}

.award-text h3 {
	line-height: 1.4;
	margin-bottom: 1rem;
}

.award-logo {
	height: 40px;
	display: flex;
	align-items: center;
	display: none !important;
}

.award-logo svg {
	fill: currentColor;
	width: 80px;
	opacity: .5;
	display: block;
}

.award-logo {
	/*	display: none !important;*/
	text-align: left;
	margin-bottom: 1.5rem;
}

/* @end */

/* @group Section Brand Logos */

.brand-logos ul {
	margin: 0;
	margin-top: -4px;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 200px;
	align-items: center;
	justify-content: center;
}

.brand-logos ul li {
	text-align: left;
}

.brand-logos object, .brand-logos img {
	filter: invert(89%) sepia(30%) saturate(235%) hue-rotate(329deg) brightness(103%) contrast(88%);
	max-width: 120px;
	max-height: 70px;
	opacity: .5;
	transition: all .3s var(--ease-in);
}

.brand-logos object:hover, .brand-logos img:hover {
	/*	opacity: 1;*/
}

@media only screen and (max-width:536px) {
	.award-item ul li {
		grid-template-columns: 90px 3fr;
	}
	
	.brand-logos object, .brand-logos img {
		filter: invert(89%) sepia(30%) saturate(235%) hue-rotate(329deg) brightness(103%) contrast(88%);
		max-width: 20vw;
		max-height: inherit;
		margin: 0 auto;
		opacity: .6;
	}
	
	.brand-logos ul li {
		text-align: center;
	}
}

/* @end */

/* @end */

/* @group BLOG */



/* Blog Index */

#section-blog-hero.section-hero {
	display: flex;
	flex-direction: column;
	margin-top: 0;
	margin-bottom: 0;
	margin-top: 26rem;
	margin-bottom: 0rem;
}

.post-list .post:first-child .meta-div {
	margin-top: 0;
}
.post .meta-div {
	margin-bottom: 6rem;
}
/* Post Single */

h2.post-title {
	font-size: 5.9rem;
	max-width: inherit;
}
h2.post-title a {
	font-weight: normal;
	text-decoration: none !important;
}
.section-header .post-meta {
	margin-top: 2rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: var(--font-size-small);
	font-weight: 600;
}
.post-meta .meta-col:not(:last-child) {
	margin-right: 1rem;
	padding-right: 1rem;
	border-right: 1px solid #333;
}
.post-meta a {
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 1px;
}
.single-post {
	margin-top: 220px !important;
}
.post-text img {
	max-width: 100% !important;
	height: auto;
	margin: 2rem 0;
}
.post-text *:first-child {
	margin-top: 0;
}
.meta-div-blog {
	margin: 0;
	margin-top: 2rem;
}

.post-text h2{
	font-size: 4rem;
	margin-top: 6rem;
	margin-bottom: 2rem;
	line-height: 1.1;
}
.post-text h2 strong {
	font-weight: 500;
}
.post-text h3{
	font-size: 2.6rem;
	margin-top: 3rem;
	margin-bottom: 2rem;
	line-height: 1.1;
}
.post.section-hero h1 {
	font-size: 6rem;
	line-height: 1.5;
	letter-spacing: -2px;
	font-weight: 400;
}
.post-content .post-intro {
	font-size: 3.2rem;
	line-height: 1.4;
	display: block;
	margin-bottom: 1.4rem;
}
.post a:hover {
	text-decoration: none;
	color: var(--text-highlight);
}
.readmore-link-wrapper {
	margin-top: 2rem;
}
.readmore-link-wrapper a {
	text-decoration: none;
	color: var(--text-highlight);
	font-size: 1.5rem;
}
.readmore-text::after {
	content: "•";
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Blog Category */

.blog-title {
	font-size: 4rem;
	letter-spacing: 0;
	margin-bottom: 2rem;
}
#page-blog_archive .section-hero h1 {
	font-size: 16rem;
/*	max-width: 80%;*/
}

.category-breadcrumb {
	margin-bottom: 2rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: var(--font-size-small);
	font-weight: 600;
}
.category-breadcrumb a {
/*	color: var(--text-highlight);*/
	text-decoration: none;
}

#section-blog-hero .section-hero .intro-text {
	margin-top: 6rem;
}

.archive-description {
	font-size: 2.4rem;
}


@media only screen and (max-width:536px) {
	h2.post-title {
		font-size: 4rem;
	}
	h2.post-title a{
		text-decoration: none≈;
	}
	.archive-description {
		margin-top: 4rem;
	}
}
/* @end */

/* @group FOOTER */

/************************************************************************************************************************************* 
		
		FOOTER 
		
*************************************************************************************************************************************/

#main-footer {
	padding-top: 10rem;
	background-color: var(--bg-footer);
	color: var(--text-footer);
}

/*#main-footer .footer-info.row {
	display: flex;
	width: 100%;
	justify-content: space-between;
}*/

/*#main-footer .footer-info.row .col:nth-child(1) {
	flex: 4vw;
}
#main-footer .footer-info.row .col:nth-child(2) {
	flex: 1.5;
}*/

#main-footer .footer-logo {
	margin-bottom: 20px;
}

#main-footer .footer-logo svg {
	height: 36px;
}

#main-footer .footer-logo svg path {
	fill: var(--text-footer);
}

#main-footer .footer-text {
	font-size: 2.4rem;
	line-height: 3rem;
	max-width: 400px;
}

#main-footer .col-social {
	text-align: right;
}

#main-footer .col-social ul li {
	display: inline-block;
	padding-right: 12px;
	padding-left: 12px;
}

#main-footer .col-social svg {
	width: 24px;
	display: block;
	transition: all .3s var(--ease-out);
}

#main-footer .col-social a {
	transition: all .3s var(--ease-out);
	opacity: 1;
}

#main-footer .col-social a:hover {
	opacity: .7;
}

#main-footer .col-social svg path {
	fill: var(--text-footer);
}

#main-footer a {
	color: var(--text-footer) !important;
}

#main-footer .col-menu a {
	text-decoration: none;
	color: var(--text-color);
	position: relative;
	overflow: hidden;
	display: inline-block;
	padding-bottom: 0px;
	text-decoration: none;
	line-height: 1.2;
}

#main-footer .col-menu a:hover {
	text-decoration: none;
}

#main-footer .col-menu a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: translateX(calc(-100% - .1rem));
	-webkit-animation: .25s var(--ease-out) 0s stroke-in forwards;
	animation: .25s var(--ease-out) 0s stroke-in forwards;
}

#main-footer .col-menu a:hover::before {
	opacity: 1;
	-webkit-animation: .25s var(--ease-out) 0s stroke-out forwards;
	animation: .25s var(--ease-out) 0s stroke-out forwards;
}

#main-footer .col-social a {
	display: block;
}

#main-footer .col-social a:hover svg {
	fill: var(--text-footer);
}

#main-footer .copyright.row {
	display: flex;
	width: 100%;
	justify-content: space-between;
	justify-content: space-between;
	font-size: 0.9rem;
	padding-top: 12rem;
	padding-bottom: var(--grid-padding);
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: .4;
}
#main-footer .copyright a {
	text-decoration: none;
}
#main-footer .copyright a:hover {
	text-decoration: underline;
}
#main-footer .col-menu h4 {
	text-transform: uppercase;
	font-size: 1.5rem;
	font-family: var(--font-family-header);
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: 16px;
}
#menu-footer.footer-menu {
	column-count: 2;
}
@media only screen and (max-width:536px) {
	#main-footer {
		padding-top: 4rem;
		background-color: var(--bg-footer);
		color: var(--text-footer);
	}
	
	#main-footer .col-social ul {
		width: 100%;
		display: flex;
		margin-top: 3rem;
	}
	
	#main-footer .col-social ul li:first-child {
		padding-left: 0;
	}
	
	#main-footer .row .col-menu {
		margin-top: 3rem;
	}
	
	#main-footer .row .col-menu ul {
		display: flex;
		flex-wrap: wrap;
	}
	
	#main-footer .row .col-menu li {
		width: 50%;
	}
	
	#main-footer .copyright.row {
		padding-top: 3rem;
		padding-bottom: 4rem
	}
	
}

/* @end */


/************************************************************************************************************************************* 
		
		CASE STUDIES 
		
*************************************************************************************************************************************/

/* @group Password Protected */

.password-protect-wrapper {
	min-height: 50vh;
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* @end */

/* @group CASE STUDIES */

.section-cs {
	margin: var(--section-cs-margin) 0;
}


.hr-line {
	/*	margin: 4rem 0;*/
	border-top: 1px solid currentColor;
}

.section-text p {
	margin-top: 0;
}

.single-casestudy #wrapper {
	margin: 0 !important;
}

.single-casestudy header {
	/*	background-color: transparent !important;*/
}
.back-btn-wrapper {
}
.back-btn-wrapper svg {
	width: 18px;
}

.section-cs-hero .section-copy {
	padding-top: 10rem;
}

.section-cs-hero .section-image {
	margin: 6rem 0;
}

.section-cs-hero .section-image img {
	max-width: 100%;
	width: 100%;
}

.section-hero-full {
	height: 100vh;
	width: 100vw;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	margin-top: 0;
	margin-bottom: 0;
	background-size: cover !important;
	background-repeat: no-repeat;
	background-position: center center;
	margin-bottom: 8rem;
}

.section-cs-hero h1.section-title {
	font-size: 10rem;
	font-family: var(--font-family-header);
	line-height: 1.1;
	letter-spacing: -5px;
	margin: 0;
	font-weight: 300;
	margin-bottom: 2rem;
	max-width: 80%;
	
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}
.section-cs-hero h1 .split-parent {
	margin-top: -0.6rem;
}
.section-cs-hero .section-header {
	font-size: 1.4rem;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.section-cs-hero .section-text {
	font-size: 1.4rem;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.summary-logo {
	margin-top: 6rem;
	display: none;
}

.summary-logo img {
	max-width: 200px;
	margin-bottom: 6rem;
}

.summary-title h2 {
	font-size: 2.8em;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 10px;
	font-family: var(--font-family-header);
	font-weight: 500;
	letter-spacing: 1px;
}

.summary-tagline {
	font-size: 1.5em;
	line-height: 1.2;
	font-weight: 600;
	padding: 3rem 0;
    /* width: 70%; */
	margin-right: auto;
	margin-left: auto;
}

.summary-components {
	margin-top: 4rem;
	margin-bottom: 2rem;
}

.summary-components-title {
	display: block;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 4rem;
	padding-bottom: 1rem;
	
	align-items: center;
	justify-content: space-between;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: var(--font-size-small);
	font-weight: 500;
	
/*	border-bottom: 1px solid var(--text-color);*/
	position: relative;
}
.summary-components-title:after {
	content: "";
	opacity: .3;
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--text-color);
}
.components-list {
	-moz-column-count: 2;
    column-count:2;
}
.components-list .component {
	padding-right: 4rem;
	box-sizing: border-box;
	margin-bottom: 2rem;
	break-inside: avoid;
}
.component h4 {
	text-transform: uppercase;
	font-family: var(--font-family-body);
	font-weight: 700;
	letter-spacing: 2px;
	font-size: 1.6rem;
	margin-bottom: 1rem;
}

.section-cs-image, .section-cs-image img, .section-cs-video video {
	width: 100%;
	max-width: 100%;
}
.section-cs-image img {
	height: inherit;
	max-width: 100%;
}
.section-cs-media {
	margin-bottom: 6rem;
}

.content-case-image img {
	width: 100%;
	max-width: 100%;
}

/*.lazyload-wrapper {
	position: relative;
}
.lazyload::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ff0000;
	z-index: 100000000;
}*/
.lazyload-wrapper {
	background-color: var(--text-highlight);
}
.lazyload {
	opacity: 0;
	transition: all 1s;
	display: block;
}
.lazyload.loaded {
	opacity: 1;
}
@media only screen and (min-width: 537px) {
	.section-cs-video {
		cursor: none;
	}
	body.fullscreen .section-cs-video {
		cursor: inherit;
	}
}
@media only screen and (max-width: 536px) {
	.section-cs-video {
		cursor: inherit;
	}

	.components-list {
		-moz-column-count: inherit;
		column-count:inherit;
	}
	.components-list .component {
		padding-right: 0;
		flex: 50%;
	}
}


.section-cs .section-title h2 {
	font-size: 5.5rem;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -1px;
}
.section-cs .section-title h2 strike, .section-cs .section-title h2 strike * {
	text-decoration: line-through !important;
}
.section-cs .section-title h2 .split-parent {
	margin-top: -1.2rem;
}

/* @group Section Slider */




.slide {
	width: 100%;
}
.slide img {
	width: 100%;
	max-width: 100%;
	display: block !important;
}
.slider .flickity-button, .slider .flickity-button:hover {
	background-color: transparent;
}

.slider .flickity-button svg , .slider .flickity-button svg path {
	fill: var(--bg-color) !important;
}

.slider .flickity-page-dots .dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 6px;
	background: currentcolor;
	border-radius: 50%;
	cursor: pointer
}
/*.slider .previous {
	transform: translate(-140%, -50%);
}
.slider .next {
	transform: translate(140%, -50%);
}*/
.slider .flickity-page-dots {
	position: relative !important;
	margin-top: -1rem;
	margin-bottom: 4rem;
}
/* @end */

/* @group Section Numbers */

/*.section-cs .section-title.section-number h2{
	font-family: var(--font-family-header);
	font-size: 7rem;
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -2px;
}
.section-cs .section-title.section-number h2 .split-parent {
	margin-top: -1rem;
}*/
/*.section-cs-number .section-text {
	font-size: var(--font-size-medium);
}*/


/* @end */




@media only screen and (max-width: 536px) {
	.section-cs-hero h1.section-title {
		font-size: var(--font-size-h1);
		max-width: 100%;
	}
	
	.summary-title h2 {
		font-size: var(--font-size-h2);
		margin-bottom: 3rem;
	}
	
	.section-cs-media {
		margin-bottom: 2rem;
	}
	
	.section-cs .section-title h2 {
		hyphens: auto;
		font-size: var(--font-size-h2);
		line-height: 1.2;
		margin-bottom: 3rem;
		letter-spacing: -1px;
		
	}
	.section-cs .section-title h2 .split-parent {
		margin-top: -0.5rem;
	}
}

/* @end */

/* @group SECTION RELATED */

/************************************************************
                         CATEGORY
*************************************************************/

.related-wrapper {
	margin-bottom: 60px;
}

.pagination-wrapper {
	text-align: center;
	padding-top: 40px;
	padding-bottom: 40px;
}

.related-list {
	display: flex;
	flex-wrap: wrap;
}

.related-item {
	width: 25%;
	padding: 15px;
}

.related-item a {
	text-decoration: none;
}

.related-item .item-image {
	padding-bottom: 60%;
	background-size: cover !important;
	background-position: center center;
/*	transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);*/
}
.related-item .item-image.loaded {
/*	opacity: 1;*/
}
.related-item a:hover .item-image {
	opacity: .5;
}

.related-item .item-text {
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	font-size: 1.2em;
}

.related-item .item-text .arrow-right svg {
	height: 15px;
}

@media only screen and (max-width: 536px) {
	.header-line {
		margin-top: 10px;
		margin-left: 0;
	}
	
	.related-list {
		display: block;
	}
	
	.related-item {
		width: 100%;
		padding: 0;
		margin-bottom: 20px;
	}
}

/* @end */

/* @group PAGE: 404 */

#page-404 {
	text-align: center;
	margin: var(--section-margin) 0;
	min-height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
#page-404 img {
	max-width: 100%;
}
/* @end */

/* @group PAGE: PRIVACY */

#page-privacy {
	padding: 8rem 0;
}
#page-privacy h1 {
	margin-bottom: 6.4rem;
}
#page-privacy h2 {
	margin-bottom: 4.8rem;
}
/* @end */