/* GENERAL */

body {
	margin:					0px;
	padding:				0px;
	font-family:			"avenir next", "Lato", 'Nunito', Futura, Helvetica, Arial, sans-serif;
	font-size:				14px;
    padding-top:			env(safe-area-inset-top);
    padding-bottom:			env(safe-area-inset-bottom);
    padding-left:			env(safe-area-inset-left);
    padding-right:			env(safe-area-inset-right);
}

a {
	text-decoration:		none;
	color:					inherit;
}

a:hover {
	text-decoration:		none;
}


/* HEADER */

#header {
	margin:					26px;
	display:				grid;
	grid-template-columns:	1fr 2fr;
}

#header #logo {
	justify-self:			left;
	align-self:				center;
	height:					36px;
	background-image:		url(../img/logo.png);
	background-size:		contain;
	background-repeat:		no-repeat;
	color:					#fff0;
	padding:				0px;
}

#header #nav {
	justify-self:			right;
	align-self:				center;
}

#header #nav a {
	padding:				0px 25px 0px 0px;
}

.headline {
	font-size:				2.4vw;
	padding-right:			26px;
}

.headline b {
	font-family:			'AvenirNext-DemiBold',"avenir next", "Lato", 'Nunito', Futura, Helvetica, Arial, sans-serif;
	font-weight:			bold;
}

/* GRID FORMAT */

.layout {
	margin:					26px;
	display:				grid;
	grid-template-columns:	1fr 1fr 1fr;
	grid-gap:				13px;
}


.layout div {
	position:				relative;
	overflow:				hidden;
}

.layout .colspan2	{ grid-column:				span 2; }

.layout .colspan3	{ grid-column:				span 3; }
.layout .split .col2 { grid-column: 2; }

.layout .rowspan2	{ grid-row:					span 2; }	
.layout .rowspan2unbreakable { grid-row:		span 2; }

@media ( max-width: 1000px ) {
	.headline			{ font-size:				15px !important; }
	.layout				{ grid-template-columns:	1fr 1fr; }	
	.layout .colspan2	{ grid-column:				span 1; }
	.layout .colspan3	{ grid-column:				span 2 !important; }
	.layout .rowspan2	{ grid-row:					span 1; }	
	.layout .split .col2 { grid-column: 1 !important; }
	.rollover			{ font-size:				15px !important; }
	.rollover .subtitle { font-size:				13px !important; }
	.footer				{ grid-template-columns:	1fr !important; }
	.footer .col3 		{ grid-column:				1 !important; }
	.work h1			{ font-size:				15px !important; }
	.project h1			{ font-size:				15px !important; }
	.project h2			{ font-size:				15px !important; }	
	.clientheroes		{ grid-template-columns:	1fr 1fr 1fr !important; }	
	.clients h2			{ font-size:				15px !important; }	
	.clientheadline h1  { font-size:				15px !important; }
}


/* FOOTER */

.footer {
	margin:					26px;
	padding-top:			26px;
	display:				grid;
	grid-template-columns:	1fr 1fr 1fr;
	grid-gap:				13px;
}

.footer .col3 {
	grid-column:			3;
}

.split {
	display:				grid;
	grid-template-columns:	50% 50%;
	grid-gap:				13px;
}

.copyright {
	padding-top:			25px;
	opacity:				0.5;
	font-size:				9px;
}

#cookiebanner {
	position:				fixed;
	bottom:					13px;
	left:					13px;
	right:					13px;
	border:					1px solid #0002;
	background-color:		#fff;
	padding:				13px;
	font-size:				75%;
 }

/* IMAGES */

.pic {
	background-position:	50% 50%;
	background-size:    	cover;
}

.clientlogo {
	height:					120px; 
	opacity:				0.25;
	transition:				opacity 0.25s linear;
	background-position:	right 25px top;
	background-size:    	120px auto;
	background-repeat:		no-repeat;
}

.overlayVideo {
	position:				absolute !important;
	left:					0px;
	top:					0px;
	padding:				0px;
	width:					calc(100%);
	height:					calc(100%);
}

.overlay {
	position:				absolute !important;
	left:					0px;
	top:					0px;
	padding:				13px;
	width:					calc(100% - 26px);
	height:					calc(100% - 26px);
}

.rollover {
	background-color:		#ff2a57 !important;
	color:					#fff;
	opacity:				0;
	transition:				opacity 0.1s linear;
	font-size:				21px;
	font-weight:			bold;
}

.rollover .subtitle {
	font-size:				14px;
	font-weight:			normal;
}

.rollover:hover {
	opacity:				1;
}

/* WORK PAGE */

.work h1 {
	font-family:			'AvenirNext-DemiBold',"avenir next", "Lato", 'Nunito', Futura, Helvetica, Arial, sans-serif;
	font-size:				2.4vw;
	margin:					25px 0px 0px 0px;
}


/* PROJECT PAGES */

.project h1 {
	font-family:			'AvenirNext-DemiBold',"avenir next", "Lato", 'Nunito', Futura, Helvetica, Arial, sans-serif;
	font-size:				2.4vw;
	margin:					0px;	
}

.project h2 {
	font-family:			"avenir next", "Lato", 'Nunito', Futura, Helvetica, Arial, sans-serif;
	font-weight:			normal;
	font-size:				2.4vw;
	margin:					0px;	
}

.layout p {
	margin-top:				0px;
}

.quote {
	padding:				1em;
	font-size:				150%;
	background-color:		#ff2a57;
	color:					#fff;
}

/* CLIENT PAGE */

.clientheadline {
	margin:					26px;
	width:					66%;
}

.clientheadline h1 {
	font-size:				2.4vw;
	font-weight:			normal;
}

.clientheroes {
	margin:					26px;
	display:				grid;
	grid-template-columns:	1fr 1fr 1fr 1fr;
	grid-gap:				13px;
}

.clients h2 {
	font-family:			'AvenirNext-DemiBold',"avenir next", "Lato", 'Nunito', Futura, Helvetica, Arial, sans-serif;
	font-size:				2.4vw;
}