/* -----------------------------------------------------------------------------
	
	
	#	IPPOLITO FLEITZ GROUP
	
	Author: Roman Klein
	Website: https://github.com/twiro
	
	Version: 2.0.0
	Date: 24.07.2019
	
	
	## GLOBAL LAYOUT SIZES
	
	L			1024	…			L
	M			641		1024		M
	S			481		640			S
	XS			…		480			XS
	
	
	## FONTS
	
	Biotif
	Melior
	
	
----------------------------------------------------------------------------- */



:root {
	
	/* Colors */
	
	--colorDark: #2A2A2A;
	--colorGreyDark: #2A2A2A;
		
	--colorGreyLight: #EFEFEF;
	--colorGreyBorder: #DDD;
	--colorGreyDarkBorder: #5A5A5A;
	--colorGreyLink: #909090;
	
	/* FONT SIZES */
	
	--sizeXL: 2rem; /* 32 */
	--sizeL: 1.5rem; /* 24 */
	--sizeM: 1.25rem; /* 20 */
	--sizeS: 0.9375rem; /* 15 */
	--sizeXS: 0.8125rem; /* 13 */
	
}



@media only screen and (max-width: 640px) {
	:root {
		--sizeXL: 1.875rem; /* 30 */
	}
}

@media only screen and (max-width: 480px) {
	:root {
		--sizeXL: 1.75rem; /* 28 */
	}
}

@media only screen and (max-width: 420px) {
	:root {
		--sizeXL: 1.625rem; /* 26 */
	}
}

@media only screen and (max-width: 340px) {
	:root {
		--sizeXL: 1.5rem; /* 24 */
	}
}





/* GLOBAL
-------------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: none;
	font-size: 100%;
}

body {
	position: relative;
	color: var(--colorDark);
	font-family: "Biotif", "Helvetiva", sans-serif;
	font-weight: 300;
	font-size: 0.9375rem; /* 15 */
	line-height: 1.6666;
}


	#top,
	#stage,
	footer,
	.overlay,
	#message,
	#footer-logo {
		display: block;
		position: relative;
		width: 100%;
	}
	
	#stage {
		padding-top: 6.25rem; /* 100 */
	}
	
		.container {
			display: block;
			position: relative;
			margin-left: auto;
			margin-right: auto;
			max-width: 1240px;
			padding-top: 3.125rem; /* 50 */
		}
		
		#stage .container {
			margin-bottom: 1.875rem; /* 30 */
		}
		
		footer .container,
		#footer-logo .container {
			padding-bottom: 3.125rem; /* 50 */
		}
		
		.overlay .container {
			padding-top: 2.5rem; /* 40 */
			padding-bottom: 1.875rem; /* 30 */
		}
		
		#overlay-title .container {
			padding-bottom: 5rem; /* 80 */
		}
		
		#message .container {
			padding-top: 1.875rem; /* 30 */
			padding-bottom: 0.625rem; /* 10 */
		}
		

		.size1,
		.size2,
		.size3,
		.size4 {
			display: block;
			position: relative;
			float: left;
			margin-left: 1.61290323%; /* 20 */
			margin-right: 1.61290323%; /* 20 */
			margin-bottom: 1.61290323%; /* 20 */
		}
		
		#top .size4 {
			margin-bottom: 1.25rem;
		}
	
		.size1 {width: 21.7741935%;}
		.size2 {width: 46.7741935%;}
		.size3 {width: 71.7741935%;}
		.size4 {width: 96.7741935%;}
		
			.size4 .size1 {
				width: 25%;
				margin: 0;
			}
		
		.grid3 .size1 {width: 30.1075269%;}
		.grid3 .size2 {width: 63.4408602%;}
		.grid3 .size3 {width: 96.7741935%;}


		.offset1, .offset-left1 {margin-left: 26.6129032%;}
		.offset2, .offset-left2  {margin-left: 51.6129032%;}
		.offset3, .offset-left3  {margin-left: 76.6129032%;}
		
		.offset-top {margin-top: 16.1290323%;}
		.offset-bottom {margin-top: 16.1290323%;}
	
		.left {float: left;}
		.right {float: right;}
		
			.right.offset1 {margin-right: 26.6129032%;}
			.right.offset2 {margin-right: 51.6129032%;}
			.right.offset3 {margin-right: 76.6129032%;}
			



		
.hidden {display: none;}
.desktop-only {visibility: visible;}
.mobile-only, .mobile-only-block {display: none !important;}



/* GRID : DIVIDE PAGE IN 2 VERTICAL COLUMNS
-------------------------------------------------------------------------- */

.half {
	display: block;
	position: relative;
	float: left;
	width: 50%;
}

	.half .size1,
	.half .size2 {
		margin-left: 3.125%; /* 20 */
		margin-right: 3.125%; /* 20 */
		margin-bottom: 3.125%; /* 20 */
	}
	
	.half .size1 {width: 42.1875%;}
	.half .size2 {width: 90.625%;}




/* GRID : COLUMNS
-------------------------------------------------------------------------- */

.size2.columns {
	-webkit-column-count: 3;
	-webkit-column-gap: 1.875rem;
	-moz-column-count: 3;
	-moz-column-gap: 1.875rem;
	column-count: 3;
	column-gap: 1.875rem;
}


	.columns .item {
		display: block;
		position: relative;
		margin-bottom: 30px;
		margin-bottom: 1.875rem;
	}
	
		.columns img {
			display: block;
			position: relative;
			width: 100% !important;
			height: auto !important;
		}
	
	a.cover {
		box-shadow: 0.25rem 0.25rem 0.05rem rgba(0,0,0,0.5);
	}
	
	a.cover:hover {
		box-shadow: 0 0 0.75rem rgba(0,0,0,0.4);
	}
	





/* SECTIONS & CONTAINER
-------------------------------------------------------------------------- */

section#related-projects {
	padding-top: 3.22581%; /* 40 */
}

	.bordertop {
		border-top-width: 1px;
		border-style: solid;
		border-color: var(--colorGreyBorder);
		padding-top: 1.875rem;
	}
	
	.hr {
		height: 1px;
		background: #CCC; 
	}

		.block {
			padding-bottom: 30px;
			padding-bottom: 1.875rem;
		}	

#slides {
	margin-bottom: 30px;
	margin-bottom: 1.875rem; 
}

#pagetitle {
	margin-bottom: 50px;
	margin-bottom: 3.125rem;
}

#first-slide {
	margin-top: -3.22581%;
}

.sectiontitle {
	padding-top: 3.125rem;
	margin-bottom: 1.875rem; 
}

#body-text {
	display: none;
}

#footer-logo {
	background: rgba(220, 220, 20, 0.95);
}


.slide img,
#home-slides,
.bx-viewport,
.bx-loading {
	background: #EEE url("img/bg-noise-white.gif");
}









/* MESSAGES
-------------------------------------------------------------------------- */

#message {
	position: fixed;
	top: 0;
	left: 0;
	color: #FFF;
	z-index: 500000;
	cursor: pointer;
}
	
#message,
#close-message {
	-webkit-transition: all 0.15s linear;
	-moz-transition: all 0.15s linear;
	transition: all 0.15s linear;
}

#message.error {
	background: rgba(200,0,90,0.9);
}

#message.error:hover {
	background: rgba(200,0,90,0.8);
}
	
	
	#close-message {
		color: rgba(255,255,255,0);
	}
	
	#message:hover #close-message {
		color: rgba(255,255,255,1);
	}
	
	






/* -----------------------------------------------------------------------------
	
	##	INVERTED 2.0 (2019)
	
----------------------------------------------------------------------------- */

.inverted,
.open {
	color: #FFF;
}

.inverted {
	background-color: var(--colorDark);
}







/* -----------------------------------------------------------------------------
	
	##	LINKS 2.0 (2019)
	
----------------------------------------------------------------------------- */

a {
	color: var(--colorGreyLink);
	text-decoration: none;
	transition-property: color, opacity, border-color;
	transition-duration: 250ms;
	transition-timing-function: ease;
}

.richtext a {
	color: currentColor;
	border-bottom: 1px solid var(--colorGreyBorder);
}

.richtext nav a {
	color: var(--colorGreyLink);
	border: none !important;
}



a.active,
.active a,
a:hover,
.richtext nav a:hover {
	color: currentColor;
	border-color: currentColor;
}


/* LINK : MODIFIERS */

.link--padding {
	display: inline-block;
	padding-left: 0.25em;
	padding-right: 0.25em;
}


/* LINK : MODIFIER (COLORS) */

.link--dark {
	color: var(--colorDark);
}

.link--dark:hover {
	color: var(--colorGreyLink);
}

.link--underline {
	border-bottom: 1px solid var(--colorGreyBorder);
}



/* BUTTONS */
	
button.button,
a.button {
	padding: 0 .25rem;
	background: var(--colorDark);
	color: #FFF;
	transition-property: all;
	transition-duration: 250ms;
	transition-timing-function: ease;
}
	
button.button:hover,
a.button:hover {
	background: var(--colorGreyLink);
}









/* SVG ICONS (2015)
-------------------------------------------------------------------------- */


svg.icn {
	display: block;
	position: relative;
	height: 2rem; /* 32 */
	width: 2rem; /* 32 */
	fill: currentColor;
	transition: fill 0.25s ease;
}

.icn.size-s {
	height: 1.5rem; /* 24 */
	width: 1.5rem; /* 24 */
}

.icn.size-l {
	height: 2.5rem; /* 40 */
	width: 2.5rem; /* 40 */
}

.icn.icn-arrow-up,
.icn.icn-arrow-right,
.icn.icn-arrow-down,
.icn.icn-arrow-left {
	height: 2.75rem;
	width: 2.75rem;
	padding: .5rem;
}

#nav-project-prev svg.icn,
#nav-project-next svg.icn {
	float: left;
	padding: 4.25rem .5rem 4.25rem .5rem;
}

.button svg.icn,
.bx-prev svg.icn,
.bx-next svg.icn {
	fill: #FFF;
}






/* -----------------------------------------------------------------------------
	
	##	CHECK
	
----------------------------------------------------------------------------- */

section p,
section ul,
section ol {
	margin-bottom: 1.6666em;
}



#pagetitle h1,
#pagetitle h2 {
	margin-right: 20%;
}










/* -----------------------------------------------------------------------------
	
	##	DEPRECATED STUFF !!!
	
	
	DELETED CLASSES:
	
	.dash
	.headline
	.office
	.meta
	
----------------------------------------------------------------------------- */


/*
	
.delimiter {
	font-weight: 300;
	color: #AAA;
	background: tomato !important;
	border: 5px solid gold !important;
}



.title-toggle {
	display: block;
	position: relative;
	margin-left: 1.4rem;
	border-bottom: none;
	background: tomato !important;
	border: 5px solid gold !important;
}

.title-toggle:hover {
	color: #464646;
}

	.title-toggle .toggle-prefix {
		display: block;
		position: absolute;
		left: -1.4rem;
		color: #AAA;
		-webkit-transition: all 0.1s linear;
		-moz-transition: all 0.1s linear;
		transition: all 0.1s linear;
	}
	
	.title-toggle:hover .toggle-prefix {color: #464646;}
	


h4.title p,
h4.title strong {
	display: block;
	padding-bottom: 0;
}

strong {font-weight: 700 !important;}

em {font-style: italic;}

.dash {
	display: block;
	font-weight: 300;
	font-size: 1.5rem;
	font-family: "Droid Serif";
	background: tomato !important;
}

.subtitle em {
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.15rem;
	background: tomato !important;
}

nav .string {
	text-transform: none;
	letter-spacing: normal;
	padding: 0 0.3125rem;
	background: tomato !important;
}

.title--l p,
.title--xl p {
	background: yellow !important;
}

.title--l em,
.title--xl em {
	background: pink !important;
}


*/




/* -----------------------------------------------------------------------------
	
	##	RICHTEXT 2.0 (2019)
	
----------------------------------------------------------------------------- */



.richtext {
	font-family: "Melior", Georgia, serif;
	font-weight: 400;
	font-size: 1.25rem;
	font-size: 	var(--sizeM);
	line-height: 1.6666;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}



/* RICHTEXT : BASIC MARGINS */

.richtext p,
.richtext ul,
.richtext ol,
.richtext img {
	padding-bottom: 0;
	margin-bottom: 1.6666em;
}


.richtext strong + br + strong {
	display: inline-block;
	margin-top: 0.8333em;
}


/* RICHTEXT : TITLES */

.richtext h2,
.richtext h3 {
	font-family: "Biotif", "Helvetiva", sans-serif;
	font-size: 1.5rem; /* 24 */
	font-size: var(--sizeL);
	font-weight: 700;
	padding-top: 1.6666em;
	margin-bottom: 0.8333em;
}

.richtext h4 {
	font-family: "Biotif", "Helvetiva", sans-serif;
	font-size: 1.25rem; /* 20 */
	font-size: var(--sizeM);
	font-weight: 700;
	margin-bottom: 0.8333em;
}



/* RICHTEXT : IMAGES */

.richtext img {
	display: block;
	width: 100%;
}



/* RICHTEXT : LISTS */
	
.richtext ul {
	list-style: none;
	margin-left: 0;
	padding-left: 1.5rem;
}

	.richtext ul li:before {
	 	content: "―";
	 	position: absolute;
	 	left: 0;
	}

.richtext ol {
	list-style-position: outside;
	list-style-type: decimal;
	margin-left: 1rem;
}



/* RICHTEXT : BLOCKQUOTES */

.richtext blockquote {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding-top: 1.6666em;
	padding-bottom: 1.6666em;
	margin-top: 2.5em;
	margin-bottom: 2.5em;
	border-top: 1px solid var(--colorGreyBorder);
	border-bottom: 1px solid var(--colorGreyBorder);
}

	.richtext blockquote p {
		width: 90%;
		font-family: "Biotif", "Helvetiva", sans-serif;
		font-size: 2rem; /* 32 */
		font-size: var(--sizeXL);
		font-style: normal;
		font-weight: 700;
		line-height: 1.3333;
		margin-bottom: 0;
	}





/* -----------------------------------------------------------------------------
	
	##	TYPO 2.0 (2019)
	
----------------------------------------------------------------------------- */


/* STRONG */

strong {
	font-family: "Biotif", "Helvetiva", sans-serif;
	font-weight: 700;
}



/* TYPE MODIFIERS */

.type--nav,
.type--function {
	font-family: "Biotif", "Helvetiva", sans-serif;
	font-size: 0.9375rem; /* 15 */
	font-size: var(--sizeS);
	font-weight: 400;
	line-height: 1.6666;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.type--xs,
.type--caption {
	font-size: 0.8125rem; /* 13 */
	font-size: var(--sizeXS);
	line-height: 1.5;
}



/* DIVIDER */

.divider {
	display: inline-block;
	margin-left: 0.25em;
	margin-right: 0.25em;
}

.divider--s		{ margin-left: 0.25em; margin-right: 0.25em; }
.divider--m		{ margin-left: 0.5em; margin-right: 0.5em; }
.divider--l		{ margin-left: 0.75em; margin-right: 0.75em; }
.divider--xl	{ margin-left: 0.75em; margin-right: 0.75em; }







/* -----------------------------------------------------------------------------
	
	##	TITLES 2.0 (2019)
	
----------------------------------------------------------------------------- */

.title,
.title--xl,
.title--l,
.title--m,
.title--s,
.title--xs {
	font-family: "Biotif", "Helvetiva", sans-serif;
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
}


/* TITLE SIZES */

.title--xl {
	font-size: 2rem; /* 32 */
	font-size: var(--sizeXL);
	font-weight: 700;
	line-height: 1.3333;
}

.title--l {
	font-size: 1.5rem; /* 24 */
	font-size: var(--sizeL);
	font-weight: 700;
	line-height: 1.3333;
}

.title--m {
	font-size: 1.25rem; /* 20 */
	font-size: var(--sizeM);
	font-weight: 700;
	line-height: 1.5;
}

.title--s {
	font-size: 0.9375rem; /* 15 */
	font-size: var(--sizeS);
	font-weight: 700;
	line-height: 1.5;
}

.title--xs {
	font-size: 0.9375rem; /* 15 */
	font-size: var(--sizeS);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .0125em;
	word-spacing: .0125em;
}



/* TITLE MODIFIERS */

.title--uppercase {
	font-family: "Biotif", "Helvetiva", sans-serif;
	font-size: 0.9375rem; /* 15 */
	font-size: var(--sizeS);
	font-weight: 400;
	line-height: 1.5;
	line-height: 1.6666;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.title--date,
.title--subtitle  {
	font-size: 1.125rem; /* 18 */
	font-family: "Melior", serif !important;
	font-weight: 400;
}


.title--teaser,
.title--teaser strong {
	font-size: 1rem;
	font-weight: 700;
}

.title--category {}
.title--name {}
.title--role {}
.title--job {}
.title--jobcategory {}
.title--footer {}



/* TITLE EXTENSIONS */

.title--dash:before {
	content: "—";
	margin-right: .25em;
}



/* TITLE SEPERATOR (INVISIBLE IN 2.0 REDESIGN) */

.title__separator {
	visibility: hidden;
}



/* -----------------------------------------------------------------------------
	
	##	HEADER 2.0 (2019)
	
----------------------------------------------------------------------------- */


.header {}

.header--page {}
.header--project {}
.header--article {}





/* -----------------------------------------------------------------------------
	
	##	MARGINS 2.0 (2019)
	
----------------------------------------------------------------------------- */


.margin--xxl { margin-bottom: 3rem }
.margin--xl { margin-bottom: 2rem }
.margin--l { margin-bottom: 1.5rem }
.margin--m { margin-bottom: 1rem }
.margin--s { margin-bottom: .75rem }
.margin--xs { margin-bottom: .5rem }
.margin--xxs { margin-bottom: .25rem }
.margin--none { margin-bottom: 0 }





/* TYPO : MARKDOWN "PRIVACY" (2018)
----------------------------------------------------------- */

.privacy {
	counter-reset: section;
}

.md-section {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--colorGreyBorder);
}

.md-section--preface {
	padding-bottom: 2rem;
}

.md-section--chapter {
	padding-top: 1.5rem;
	margin-bottom: 0;
	counter-reset: chapter;
}


/* MD : Privacy : Section Headlines */

.md-section__header {
	overflow: visible !important;
	counter-increment: section;
}

.md-section__header-title {
	display: block;
	position: relative;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.5;
	margin-bottom: 0.5rem;
}

.md-section__header-title:before {
	content: counter(section) '. ';
	padding-right: .15rem;
	position: absolute;
	left: -2.25rem;
}

@media (max-width: 1024px) {
	
	.md-section__header-title:before {
		position: relative;
		left: auto;
	}
}


.richtext.privacy p,
.richtext.privacy ul,
.richtext.privacy ol {
	padding-bottom: 1rem;
}

.richtext.privacy h2 {
	padding-top: 0.5rem;
	padding-bottom: .75rem;
}

.richtext.privacy h3 {
	display: block;
	position: relative;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	padding-top: 0.5rem;
	padding-bottom: 0.25rem;
	counter-increment: chapter;
}

.richtext.privacy h3:before {
	content: counter(section) '.' counter(chapter) ') ';
	padding-right: .15rem;
}



.richtext.privacy h4 {
	font-size: 1rem;
	line-height: 1.5;
	padding-top: 0.5rem;
	margin-bottom: 0.25rem;
}

.richtext.privacy hr {
	margin-top: 1.25rem;
	margin-bottom: 2rem;
	height: 0;
	width: 100%;
	background: transparent;
	outline: none;
	color: transparent;
	border-bottom: 1px solid var(--colorGreyBorder);
}









/* NAVIGATION
-------------------------------------------------------------------------- */

#top {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	font-family: "Biotif", "Helvetiva", sans-serif;
	z-index: 5000;
}

	#top .container {
		padding-top: 40px;
		padding-top: 2.5rem;
	}


	nav {
		font-size: 14px;
		font-size: 0.875rem;
		font-family: "Biotif", "Helvetiva", sans-serif;
	}
	
	#top nav {
		margin-top: 10px;
		margin-top: 0.625rem;
	}
	
	nav#main {
		float: left;
	}
	
	#top nav.lang {
		float: right;
		position: relative;
		margin-right: 7.5%;
	}
	
	#top #nav-lang-dropdown {
		display: none;
	}


	nav a,
	nav span,
	nav li {
		display: inline-block;
		border-bottom: none;
	}
	
	nav.block a,
	nav.block span,
	nav.block li {
		display: block;
	}
	
		nav#main li {
		margin-right: 30px;
		margin-right: 1.875rem;
	}



/*

		
		
		
		nav.footer a {
			margin-right: 8px;
			margin-right: 0.5rem;
			background: red;
		}
		
*/
		




/* -----------------------------------------------------------------------------
	
	##	NAVIGATION : FUNCTIONS, SOCIAL
	
----------------------------------------------------------------------------- */


.nav--lang,
.nav--social,
.nav--functions {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	margin-bottom: 1.875rem; /* 30 */
}
	
	.nav--lang h5,
	.nav--social h5,
	.nav--functions h5 {
		margin-right: 1em;
	}
	
	.nav__item {
		margin-left: .15rem;
		margin-right: .15rem;
	}
	
	.nav__item:first-of-type { margin-left: 0 }
	.nav__item:last-of-type { margin-right: 0 }









#social-share-buttons {
	position: absolute;
	right: 0;
	top: -.375rem;
}

#pagetitle #social-share-buttons {
	top: auto;
	bottom: -38px;
	bottom: -2.375rem; 
}








/* LOGO (2016)
-------------------------------------------------------------------------- */	


a#icn-logo,
a#icn-logo-full-white {
	display: block;
	position: absolute;
	top: 4px;
	top: 0.25rem;
	right: -2px;
	right: -0.125rem;
	-webkit-transform: translateZ(0) scale(1.0, 1.0); /* Safari Transition Bugfix */
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
}

a#icn-logo-footer {
	display: block;
	margin: 0 auto;
}
	
a#icn-logo {
	height: 42px;
	height: 2.6rem;
	width: 42px;
	width: 2.6rem;
}

a#icn-logo-full-white,
a#icn-logo-footer {
	width: 152px;
	width: 9.5rem;
	height: 208px;
	height: 13rem;
}

#top a#icn-logo-full-white {visibility: hidden;}
#top.state-overlay a#icn-logo-full-white {visibility: visible;}

a#icn-logo {opacity: 1;}
#top.open a#icn-logo {opacity: 0;}

a#icn-logo-full-white {opacity: 0;}
#top.open a#icn-logo-full-white {opacity: 1;}
#top.open a#icn-logo-full-white:hover {opacity: .75;}


	svg.icn-logo,
	svg.icn-logo-full-white {
		width: 100%;
		height: 100%;
	}
	





/* NAVIGATION : OVERLAY
-------------------------------------------------------------------------- */
	
	
.overlay {
	z-index: 4000;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

#overlay,
#overlay-title {
	display: none;
}

#overlay-title {
	position: fixed;
	transition-duration: 500ms;
	transition-timing-function: ease;
	transition-property: transform, opacity;
}

#overlay-title.state--hidden {
	transform: translate3d(0,-100%,0);
	opacity: 0;
}


	.overlay .container {display: none;}
	.overlay .container.visible {display: block;}
	
		.overlay .title-block {
			padding-top: 110px;
			padding-top: 6.875rem;
		}
	
		
		.navlist {
			display: block;
			font-size: 1rem;
			font-family: "Biotif", "Helvetiva", sans-serif;
			line-height: 1.875;
			letter-spacing: .0125em;
			word-spacing: .0125em;
			margin-bottom: 1.875rem; /* 30 */
		}
	
			
			.navlist li a,
			.navlist li strong {
				display: inline-block;
			}


.show-overlay,
.hide-overlay {
	cursor: pointer;
}

.overlay .title-block {
	margin-right: 20%;
}

.overlay-home .title-block {
	margin-top: 6.25rem;
	padding: 1.875rem 0 1.875rem 0;
}

#navigation-categories .size1 {
	width: auto;
	margin-right: 5%;
}



	


/* PROJECT NAVIGATION
-------------------------------------------------------------------------- */


#project-navigation {}

	.nav-top,
	.nav-project {
		color: var(--colorDark);
	}
		
	.nav-project,
	.nav-top,
	.bx-controls-direction a {
		background: rgba(255,255,255,0);
	}
	
	.nav-project:hover,
	.nav-top:hover,
	.bx-controls-direction a:hover {
		background: var(--colorGreyDark) !important;
		color: #FFF !important;
	}

	.bx-controls-direction a,
	.nav-project,
	#nav-top {
		display: block;
		position: fixed;
		transition: all 0.25s linear;
		z-index: 50;
	}

	#nav-project-prev,
	#nav-project-next {
		top: 50%;
		margin-top: -105px;
		margin-top: -6.5625rem; /* vertical center */
		height: 180px;
		height: 11.25rem;
		padding: 15px 0 15px 0;
		padding: 0.9375rem 0 0.9375rem 0; /* 15 0 */
	}
	
	#nav-project-prev {
		left: 0%;
		transform: translate3d(-90%,0,0);
	}
	
	#nav-project-next {
		right: 0%;
		transform: translate3d(90%,0,0);
	}
	
	#nav-project-prev.disabled {margin-left: 0;}
	#nav-project-next.disabled {margin-right: 0;}
	
	#nav-top {
		bottom: 0;
		right: 0;
		transform: translateY(100%);
		transition-duration: 500ms;
		transition-timing-function: ease;
		transition-property: all;
		background: rgba(255,255,255,0);
		opacity: 0;
	}
	
	#nav-top.state--visible,
	#nav-top.state--highlight {
		transform: translateY(0);
		opacity: 1;
	}
	
	#nav-top.state--highlight {
		background: var(--colorDark);
		color: white;
	}
	
	#project-navigation a:hover {
		transition-duration: 500ms;
		transition-property: all;
		transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
	}
	
	#nav-project-prev:hover,
	#nav-project-next:hover {
		transform: translate3d(0,0,0);
	}

		.nav-project .figure--teaser {
			width: 16.875rem; /* 270 */
			height: 11.25rem; /* 180 */
			padding: 0 !important;
		}
		
		#nav-project-prev .figure--teaser {float: left;}
		#nav-project-next .figure--teaser {float: right;}
		
		.bx-controls-direction i,
		#project-navigation i,
		#nav-top i {
			display: block;
			float: left;
			position: relative;
			text-align: center;
			width: 60px;
			width: 3.75rem;
			height: 60px;
			height: 3.75rem;
			line-height: 60px;
			line-height: 3.75rem;
			font-size: 44px;
			font-size: 2.75rem;
		}
		
		#nav-project-prev i,
		#nav-project-next i {
			padding: 60px 0;
			padding: 3.75rem 0;
		}
		

		
		.disabled i {
			color: #EEE !important;
		}
		
		a#nav-project-prev .title-block {
			padding: 66px 0 66px 30px;
			padding: 4.125rem 0 4.125rem 1.875rem;
			text-align: left;
		}
		
		a#nav-project-next .title-block {
			padding: 66px 30px 66px 0;
			padding: 4.125rem 1.875rem 4.125rem 0;
			text-align: right;
		}
		
		#project-navigation a .title-block {
			font-size: 15px;
			font-size: 0.9375rem;
			display: block;
			float: left;
			position: relative;
			width: 270px;
			width: 15rem;
			height: 48px;
			height: 3rem;
			line-height: 24px;
			line-height: 1.5rem;
		}
		







/* MAP (???)
-------------------------------------------------------------------------- */

.map {
	height: 360px;
	height: 22.5rem;
}




/* -----------------------------------------------------------------------------

	##	LAZYLOADING (2019)
	
----------------------------------------------------------------------------- */


.lazyload,
.lazyloading,
.lazyloaded {
	opacity: 0;
	transition-property: opacity;
	transition-duration: 2400ms;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); /*easeOutQuart */
}

.lazyloaded {
	opacity: 1;
}



/* -----------------------------------------------------------------------------

	##	SLIDES 2.0 (2019)
	
----------------------------------------------------------------------------- */


.slide {
	display: block;
	position: relative;
	cursor: s-resize;
}

/* Pull up the first slide of a project */
#slides--title {
	margin-top: -3.22580645%;
}

.device--touch .slide {
	cursor: default;
}

/* 640 (S) */

@media screen and (max-width: 40em) {
	.slide {
		cursor: default;
	}
}


/* Slide Lightbox */


.slide__lightbox {
	z-index: 10;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	border: none !important;
	cursor: pointer;
	font-size: .5em;
}


.device--touch .slide__lightbox {
	width: 100%;
	height: 100%;
}

	.slide__lightbox-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 2.75rem;
		height: 2.75rem;
		padding: .5rem;
		opacity: 0;
	}

	html:not(.device--touch) .slide:hover .slide__lightbox-icon,
	.device--touch #slides--title .slide__lightbox-icon {
		opacity: 1;
	}
	
	.device--touch #slides--title .slide__lightbox-icon svg.icn {
		fill: white;
	}






/* -----------------------------------------------------------------------------

	##	ANCHORS 2.0 (2019)
	
----------------------------------------------------------------------------- */

.anchor {
	padding-top: 3.22580645%;
}

hr.anchor--slide {
	display: block;
	position: relative;
	float: left;
	width: 100%;
	height: 0 !important;
	margin: 0 !important;
	border: none !important;
	outline: none !important;
}

hr.anchor--slide:after {
	content: "";
	display: table;
	clear: both;
}



/* -----------------------------------------------------------------------------

	##	FIGURES 2.0 (2019)
	
----------------------------------------------------------------------------- */


/* Figures & Formats */

.figure {
	display: block;
	position: relative;
	width: 100%;
}

.figure--image,
.figure--video,
.figure--iframe,
.figure--text,
.figure--teaser,
.figure--slidteaser {
	background: #EEE url("img/bg-noise-white.gif");
	height: 0;
}

.format--teaser 		{ padding-top: 66.6666666% }
.format--slideteaser	{ padding-top: 58.33333% }

.format--panorama		{ padding-top: 33.3333333% }
.format--landscape		{ padding-top: 50% }
.format--full			{ padding-top: 66.6666666% }
.format--portrait		{ padding-top: 137.931034% }
.format--square			{ padding-top: 100% }
.format--quarter		{ padding-top: 65.517241% }

.format--custom			{ padding-top: 0 }


/* Border-Bottom 20px for all slide figures */

.slide.size4 .figure	{ margin-bottom: 1.66666667%;}
.slide.size3 .figure	{ margin-bottom: 2.248%;}
.slide.size2 .figure	{ margin-bottom: 3.44827586%;}
.slide.size1 .figure	{ margin-bottom: 7.40740741%;}

.teaser .figure			{ margin-bottom: 0.9375rem } /* 15 */
.article .figure		{ margin-bottom: 1.875rem } /* 30 */


	/* Figure Content */
	
	.figure__background,
	.figure__image,
	.figure__iframe,
	.figure__video,
	.figure__copy {
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.figure__image,
	.figure__iframe,
	.figure__video {
		object-fit: cover;
		color: #EEE;
	}

	.figure__copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: gold;
		text-align: center;
		background-color: var(--colorGreyLight);
		padding: 0 5rem;
	}
	
		.figure__copy blockquote {}
		
			.figure__copy blockquote p {
				margin-bottom: 0;
			}
			
			.figure__copy blockquote + p {
				padding-top: 1.875rem;
				margin-bottom: 0;
				font-family: "Biotif", "Helvetiva", sans-serif;
				font-size: var(--sizeM);
				font-size: 0.9375rem; /* 15 */
				font-weight: 400;
			}
	
	/* Figure Caption */

	.slide .figure__caption {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 0;
		width: 100%;
		transform: translateY(125%);
	}
	
		.slide .figure__caption p {
			margin: 0;
			padding: 0;
		}




/* 1024 */

@media screen and (max-width: 64em) {
	
	.figure__copy {
		padding: 0 5vw;
	}
	
}


/* 640 */

@media screen and (max-width: 40em) {
	
	.figure--text {
		height: auto;
		padding-top: 0;
	}
	
	.figure__copy {
		position: relative;
		height: auto;
		padding: 7.5vmin 5vw;
	}
	
	.slide:not(.slideteaser) .figure {
		margin-bottom: 3.44827586% !important;
	}
	
}




/* -----------------------------------------------------------------------------

	##	TEASER / INDEX IMAGES (2019)
	
----------------------------------------------------------------------------- */


@supports (mix-blend-mode: multiply) {
	
	.figure__background {
		background-color: rgba(0,0,0,0);
		transition: background-color 0.25s ease;
	}
	
	.figure__background .figure__image {
		mix-blend-mode: multiply;
	}
	
	.teaser a:hover .figure__background,
	.slideteaser .figure__background {
		background-color: rgba(0,0,0,.125);
	}
	
	.slideteaser:hover .figure__background {
		background-color: rgba(0,0,0,0);
	}
	
}



/*------------------------------------------------------------------------------
	
	#	SLIDETEASER
	
	14.01.2021
	
----------------------------------------------------------------------------- */


a.slideteaser {
	cursor: pointer !important;
}

.slideteaser .title-block {
	z-index: 20;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	padding: 1.875rem 17.5% 1.875rem 3.5rem;
	width: 100%;
	min-height: 50%;
	max-height: 100%;
	position: absolute;
	color: #FFF;
	bottom: 0;
	left: 0;
	background: linear-gradient(
		to top,
		hsla(0, 0%, 0%, 0.5) 0%,
		hsla(0, 0%, 0%, 0.494) 7.8%,
		hsla(0, 0%, 0%, 0.476) 14.9%,
		hsla(0, 0%, 0%, 0.448) 21.4%,
		hsla(0, 0%, 0%, 0.412) 27.5%,
		hsla(0, 0%, 0%, 0.37) 33.3%,
		hsla(0, 0%, 0%, 0.324) 38.8%,
		hsla(0, 0%, 0%, 0.275) 44.3%,
		hsla(0, 0%, 0%, 0.225) 49.8%,
		hsla(0, 0%, 0%, 0.176) 55.4%,
		hsla(0, 0%, 0%, 0.13) 61.4%,
		hsla(0, 0%, 0%, 0.088) 67.8%,
		hsla(0, 0%, 0%, 0.052) 74.7%,
		hsla(0, 0%, 0%, 0.024) 82.3%,
		hsla(0, 0%, 0%, 0.006) 90.7%,
		hsla(0, 0%, 0%, 0) 100%
	);
	transition-property: padding-top;
	transition-duration: 500ms;
	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}


.slideteaser:hover .title-block {
	padding-top: 25%;
}
	
	
@media only screen and (max-width: 640px) {
	
	.slideteaser .title-block {
		padding: 1.875rem;
	}
	
	.slideteaser .headline {
		display: none;
	}
}




/* SLIDESHOW (2015)
-------------------------------------------------------------------------- */	


#media-header {}

	#media-header .figure--video {
		margin-bottom: 50px;
		margin-bottom: 3.125rem;
	}


.slideshow {}

	.slideshow .slideshow-slide,
	.slideshow .slideshow-slide img {
		display: block;
		position: relative;
		width: 100%;
	}
	
	





/* -----------------------------------------------------------------------------
	
	##	ITEMLIST / TEASERLIST
	
----------------------------------------------------------------------------- */

.itemlist {}


	.teaserlist li {}
	
	.teaserlist.fixheight li {
		height: 18rem; /* 288 */
	}
	
	.teaserlist.flexheight li {
		height: auto;
	}
	
		.itemlist li a {
			display: block;
			position: relative;
			width: 100%;
		}
		
		.flexheight li a {
			padding-bottom: 1.5rem;
		}
		



/* -----------------------------------------------------------------------------
	
	##	DATALIST
	
----------------------------------------------------------------------------- */

.datalist .date {
	display: inline-block;
	margin-right: 0.25rem;
	min-width: 4rem;
}




/* TEAMLIST
-------------------------------------------------------------------------- */

section#team {
	margin-bottom: 30px;
	margin-bottom: 1.875rem;	
}

.teamlist {
	background: #EFEFEF;
	margin-bottom: 0 !important;
	padding-bottom: 30px;
	padding-bottom: 1.875rem;
	display: flex;
	flex-wrap: wrap;
}

	/* Teamlist : Item */

	.teamlist__item {
		float: none;
	}

		.teamlist__item .inner {
			display: block;
			position: relative;
			background-size: 100%;
		    background-size: cover;
		}
		
			.teamlist__item img {
				display: block;
				width: 100%;
				margin: 0;
				opacity: 1;
	
			}
			
				.teamlist__item .inner:hover img {
					opacity: 0;
	
				}
				
	/* Teamlist : Item : Title */
		
	.teamlist .teamlist__item .teamlist__header {
		position: absolute;
		top: 85%;
		left: 0;
		margin: 0.9375rem; /* 15 */
		z-index: 10;
	}
	
	.teamlist .teamlist__item.featured .teamlist__header {
		position: relative;
		top: auto;
		left: auto;
		margin-top: -15%;
	}
	
	.teamlist__body {
		margin: 0 0.9375rem; /* 15 */
	}

	/* Teamlist Job (2018) */

	a.teamlist-job {
		position: absolute;
		top: 20%;
		left: 0;
		width: 100%;
		height: 51%;
		padding-top: 10%;
		z-index: 10;
	}
	
	a.teamlist-job:hover {
		color: #464646;
	}
	
		.teamlist-job__inner {
			display: block;
			position: relative;
			padding: 0.9375rem;
		}
		
			.teamlist-job__details {
				display: inline-block;
				padding-top: 0.9375rem;
				color: #AAA;
				transition: all 0.25s linear;
			}
			
			a.teamlist-job:hover .teamlist-job__details {
				color: #464646;
			}



/* AWARDLIST
-------------------------------------------------------------------------- */

.awardlist {
	line-height: 18px;
	line-height: 1.125rem; /* 18 */
}

	.awardlist li {
		display: block;
		margin-bottom: 18px;
		margin-bottom: 1.125rem;
	}
	
		.awardlist li img {
			display: block;
			float: left;
			padding: 0 18px 18px 0;
			padding: .25rem 1.125rem 1.125rem 0;
			height: 36px;
			height: 2.25rem;
			width: 36px;
			width: 2.25rem;
		}




/* PUBICATIONLIST
-------------------------------------------------------------------------- */

.publicationlist li a img.preview {
	display: block;
	height: 300px;
	height: 18.75rem;
}		
			
			
a img.preview {
	box-shadow: 0.25rem 0.25rem 0.25rem rgba(0,0,0,0.25);
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	transition: all 0.25s linear;
}
	
			
a:hover img.preview {
	box-shadow: 0.25rem 0.25rem 0.5rem rgba(0,0,0,0.5);
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	transition: all 0.25s linear;
}





/* NEWS & JOBS
-------------------------------------------------------------------------- */

.news-feature-teaser .bordertop {
	padding-top: 2.5rem;
	margin-bottom: 2.5rem;
}

.news .title-block {
	margin-bottom: 15px;
	margin-bottom: 0.9375rem;	 
}

.news .date,
.news nav.functions {
	padding-bottom: 0 !important;
}


.news .richtext,
#body .richtext {
	padding-right: 20px;
	padding-right: 1.25rem; 	 
}

.article .figure,
.news .figure {
	box-shadow: 0 0 0.375rem rgba(0,0,0,0.15);
}





/* -----------------------------------------------------------------------------

	##	JOBLIST
	
	21.06.2021
	
----------------------------------------------------------------------------- */


.joblist {
	border-top: 1px solid var(--colorGreyBorder);
	padding-bottom: 0;
	margin-bottom: 0;
}

.joblist + .joblist {
	margin-top: -1px;
}

.joblist:last-of-type {
	margin-bottom: 3rem;
}

.joblist__title {
	padding-top: 3rem;
}



/* JOBLIST : ITEM */

.joblist__item {}



/* JOBLIST : LINK */

.joblist__link {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 0.5rem 0;
	border-bottom: 1px solid;
	border-color: var(--colorGreyBorder);
	background: #FFF;
}

.joblist__link:hover {
	border-color: var(--colorGreyBorder);
}



/* JOBLIST : HEADER / OFFICE */

.joblist__header {
	display: flex;
	flex-direction: column;
	width: 75%;
}

.joblist__office {
	width: 25%;
	text-align: right;
}


@media only screen and (max-width: 640px) {
	
	.joblist__header {
		width: 100%;
	}
	
	.joblist__office {
		width: 100%;
		text-align: left;
	}
	
}





/* FOOTER
-------------------------------------------------------------------------- */

footer {
	background: #F8F8F8;
	box-shadow: 0 1rem 1rem rgba(0,0,0,0.05);
	z-index: 5;
}

	#footer nav.lang {
		margin-bottom: 1.875rem;
	}
	
	#footer nav.lang.state-highlight h5 {
		transition: none;
		color: #dcdc14;
	}






/* FORMS
-------------------------------------------------------------------------- */

form {
	display: block;
	position: relative;
	margin-top: -3px;
}

	form .input-box {
		display: block;
		position: relative;
		width: 100%;
	}


form input,
form select,
form textarea {
    vertical-align: baseline;
    line-height: normal;
}

form input,
form textarea,
form select,
form button {
	display: block;
	position: relative;
    box-sizing: border-box;
    background: #FFF;
    color: #464646;
    border: 1px solid #464646;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    font-size: 12px;
    font-size: 0.75rem;
    height: 30px;
    line-height: 30px;
    text-indent: 0.5rem;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    outline: 0 none;
    width: 100%;
}


::-webkit-input-placeholder {color: #464646; opacity: 1;}
:-moz-placeholder {color: #464646; opacity: 1;}
::-moz-placeholder {color: #464646; opacity: 1;}
:-ms-input-placeholder {color: #464646; opacity: 1;}


	form button {
		padding: 0 0 0 0.1rem;
		text-indent: 0;
		background: #464646;
	}
	
	form button.button:hover {
		background: #AAA;
	}
	
	
form input:hover {
	color: #464646;
}



form input:focus,
form input.focus {
	border-color: #AAA;
	color: #464646;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.025) inset, 0 0 0.5rem rgba(224,213,67,0.75);
}


form button[type="submit"] {
	cursor: pointer;
	box-shadow: none;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	width: auto;
	border: none;
	font-family: "Biotif", "Helvetiva", sans-serif;
}

	button.inner-button {
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 0 2px 2px 0;
	}












/* FOREIGN FONTS (RU/KO/ZH)
-------------------------------------------------------------------------- */


body.ko, body.ko * {
	font-family: "Noto Sans", "굴림", gulim, "돋움", dotum, "AppleGothic", sans-serif;
	font-style: normal !important;
}

body.zh, body.zh * {
	font-family: "Noto Sans", 'Arial Unicode MS', 'Microsoft YaHei New', 'Microsoft Yahei', '微软雅黑', 宋体, SimSun, STXihei, '华文细黑', sans-serif;
	font-style: normal !important;
}

body.ko h5,
body.ko h6,
body.zh h5,
body.zh h6 {
	font-weight: bold !important;
}

body.ru, body.ru * {
	font-family: "Noto Serif", Georgia, serif !important;
	font-style: normal !important;
}

body.ru h5,
body.ru h6,
body.ru nav,
body.ru nav a,
body.ru .navlist,
body.ru .function,
body.ru .meta,
body.ru .caption,
body.ru .subtitle,
body.ru .sans-serif,
body.ru form button[type="submit"] {
	font-family: "Noto Sans", sans-serif !important;
}









/* MEDIA QUERIES
-------------------------------------------------------------------------- */



@media only screen and (min-width: 640px) {

	html {
		font-size: 70%;
	}
	
	.container {
		width: 640px;
		margin-left: auto;
		margin-right: auto;
	}	
	
	.teaserlist.fixheight li {height: 14.5rem;}
	
}



/*
SIZE H : 55% (Ipad Vertical)
-------------------------
Slidebreite:	660/682
Slidehöhe:		440/484
-------------------------
VIEWPORT:
-------------------------
Mindesthöhe:	500
Mindestbreite:	720
-------------------------
*/


@media only screen and (min-width: 720px) {

	.container {width: 682px;}
	.slide.text .item {height: 440px;}
		
}




/*
SIZE G : 60% 
-------------------------
Slidebreite:	720/744
Slidehöhe:		480/528
-------------------------
VIEWPORT:
-------------------------
Mindesthöhe:	500
Mindestbreite:	820
-------------------------
*/


@media only screen and (min-width: 820px) {

	html {font-size: 70%;}
	.container {width: 744px;}
	.slide.text .item {height: 480px;}
	.teaserlist.fixheight li {height: 15rem;}
	
}




/*
SIZE F : 65% 
-------------------------
Slidebreite:	780/806
Slidehöhe:		520/572
-------------------------
VIEWPORT:
-------------------------
Mindesthöhe:	560
Mindesbreite:	880
-------------------------
*/

@media only screen and (min-width: 880px) and (min-height:560px) {

	html {font-size: 70%;}
	.container {width: 806px;}
	.slide.text .item {height: 520px;}
	.teaserlist.fixheight li {height: 16rem;}
	
}







/*
SIZE E : 72.5%
-------------------------
Slidebreite:	870/899
Slidehöhe:		580/638
-------------------------
VIEWPORT:
-------------------------
Mindesthöhe:	630
Mindesbreite:	980
-------------------------
*/

@media only screen and (min-width: 980px) and (min-height:630px) {

	html {font-size: 72.5%;}
	.container {width: 899px;}
	.slide.text .item {height: 580px;}
	
}



/*
SIZE D : 75% (Ipad Landscape)
-------------------------
Slidebreite:	900/930
Slidehöhe:		600/660
-------------------------
VIEWPORT:
-------------------------
Mindesthöhe:	650
Mindesbreite:	1020
-------------------------
*/

@media only screen and (min-width: 1000px) and (min-height:650px) {

	html {font-size: 75%;}
	.container {width: 930px;}
	.slide.text .item {height: 600px;}
	
}




/*
SIZE C : 80%
-------------------------
Slidebreite:	960/992
Slidehöhe:		640/704
-------------------------
VIEWPORT:
-------------------------
Mindesthöhe:	700
Mindesbreite:	1060
-------------------------
*/
@media only screen and (min-width: 1060px) and (min-height:700px) {

	html {font-size: 80%;}
	.container {width: 992px;}
	.slide.text .item {height: 640px;}	
	
}


@media only screen and (max-width: 1060px) {
	body#career .grid3 .size2 {width: 96.7741935%;}
}




/*
SIZE B : 90%
-------------------------
Slidebreite:	1080/1116
Slidehöhe:		720/792
-------------------------
VIEWPORT:
-------------------------
Mindesthöhe:	780
Mindesbreite:	1200
-------------------------

*/
@media only screen and (min-width: 1200px) and (min-height:780px) {

	html {font-size: 90%;}
	.container {width: 1116px;}
	.slide.text .item {height: 720px;}
		
}


/*
SIZE A : 100%
-------------------------
Slidebreite: 1200/1240
Slidehöhe: 800/880
-------------------------
VIEWPORT:
-------------------------
Mindesthöhe:	870
Mindesbreite:	1440
-------------------------
*/
@media only screen and (min-width: 1440px) and (min-height:870px) {

	html {font-size: 90%;}
	.container {width: 1240px;}
	.slide.text .item {height: 800px;}
	.teaserlist.fixheight li {height: 17rem;}
	
}









/* -----------------------------------------------------------------------------

	##	MEDIA QUERIES (UPSCALE) – 2019
	
----------------------------------------------------------------------------- */



/*
UPSCALE RESET (100%)
----------------------------------
Mindesbreite:	1600
Mindesthöhe:	960
----------------------------------
Slidebreite: 	1200 / 1240
Slidehöhe:		800 / 880
----------------------------------
*/
@media only screen and (min-width: 100em) and (min-height: 60em) {

	html {
		font-size: 100%;
	}
	
	.container {
		width: 77.5rem; /* 1240 */
		max-width: 77.5rem; /* 1240 */
	}
	
}



/*
UPSCALE A (105%)
----------------------------------
Mindesbreite:	1760
Mindesthöhe:	1024
----------------------------------
*/

@media only screen and (min-width: 110em) and (min-height: 64em) {
	html {
		font-size: 105%;
	}
}


/*
UPSCALE B (110%)
----------------------------------
Mindesbreite:	1920
Mindesthöhe:	1056
----------------------------------
*/

@media only screen and (min-width: 120em) and (min-height: 66em) {
	html {
		font-size: 110%;
	}
}


/*
UPSCALE C (115%)
----------------------------------
Mindesbreite:	2080
Mindesthöhe:	1088
----------------------------------
*/

@media only screen and (min-width: 130em) and (min-height: 68em) {
	html {
		font-size: 115%;
	}
}


/*
UPSCALE D (120%)
----------------------------------
Mindesbreite:	2240
Mindesthöhe:	1120
----------------------------------
*/

@media only screen and (min-width: 140em) and (min-height: 70em) {
	html {
		font-size: 120%;
	}
}

/*
UPSCALE E (125%)
----------------------------------
Mindesbreite:	2400
Mindesthöhe:	1152
----------------------------------
*/

@media only screen and (min-width: 150em) and (min-height: 72em) {
	html {
		font-size: 125%;
	}
}








/* ----------------------------------------------------- smaller screens */







@media only screen and (max-width: 640px) {
	
	html {
		font-size: 80%;
	}
	
	a {
		border-color: #DDD;
	}
	
	.container {
		width: auto;
		max-width: 640px;
		margin: 0 1%;
		max-width: 604px;
		margin: 0 2.8%;
	}
	
	#stage {
		padding-top: 4.5rem;
	}
	
	.overlay .title-block {
		padding-top: 5.125rem;
	}
	
	/* SHOW & HIDE */
	
	.mobile-only {display: inline-block !important;}
	.mobile-only-block {display: block !important;}
	.desktop-only {display: none !important;}
	
	#footer-logo {display: block !important;}
	
	/* GRID */
	
		.size1,
		.size2,
		.size3,
		.size4,
		.grid3 .size1,
		.grid3 .size2,
		.grid3 .size3,
		.teaser-single.size1,
		.overlay .size1 {
			width: 96% !important;
			margin-left: 2% !important;
			margin-right: 2% !important;
		}
		
		#newsletter-form-footer.size1 {
			width: 280px !important;
			margin-left: 2% !important;
			margin-right: 2% !important;
		}
		
		.overlay .size1,
		.overlay .size2,
		.overlay .size3,
		.overlay .size4 {
			margin-bottom: 0 !important;
		}
		
		.size1 {width: 46% !important;}
		.size1.size2m {width: 96% !important;}
		
		
		.half {
			width: 100%;
		}
		
		.size4 .size1 {
			width: 50% !important;
			margin: 0 !important;
		}
		
		.teamlist.flexheight.size4 .size1 {
			width: 100% !important;
		}
		

		.slide.size4 .item,
		.slide.size3 .item,
		.slide.size2 .item,
		.slide.size1 .item {
			margin-bottom: 1.66666667%;
		}
	
		.anchor {
			padding-top: 0;
		}
	
	
	h1,
	h2,
	h3.slidetitle,
	blockquote,
	h3 {
		margin-right: 0 !important;
	}
	


	
	.bx-controls-direction {
		display: none;
	}
		
	.news .richtext,
	#body .richtext {
		padding-right: 0 !important;
	}
	
	body.en .news .richtext,
	body.en #body .richtext {
		 -webkit-hyphens: auto;
		 -moz-hyphens: auto;
		 -ms-hyphens: auto;
		 hyphens: auto;
	}
	
	.slide.text .item {
		height: auto;
	}
	
		.slide.text .slide-wrapper-inner {
			padding-top: 1.875rem;
		}
		
	div.teaser-single {
		margin-bottom: 1.875rem;
	}

	
	.overlay .navlist {
		font-size: 1.5rem;
		line-height: 2.5rem;
		border-top-width: 1px;
		border-style: solid;
		border-color: var(--colorGreyDarkBorder);
		margin-bottom: 0;
	}
	
		.overlay .navlist li {
			border-bottom-width: 1px;
			border-style: solid;
			border-color: var(--colorGreyDarkBorder);
		}
		
		.overlay .navlist li:last-child {
			border-bottom: none;
		}
		
			.overlay .navlist li a,
			.overlay .navlist li strong {
				display: block;
				padding: 1rem 0;
			}
			
	.overlay .title-block {
		margin-right: 0;
		margin-bottom: 1.875rem;
	}
	
	#overlay-title {
		position: absolute;
	}
	

	/* LOGO (2016) */	
		
	a#icn-logo-full-white {
		height: 42px;
		height: 2.6rem;
		width: 42px;
		width: 2.6rem;
		overflow: hidden;
	}

		a#icn-logo-full-white svg.icn {
			position: absolute;
			top: 0;
			right: 0;
			width: 365.385% !important;
			height: 500% !important;
		}
	
	/* LOGO (2016) */	

	
	#overlay-title .container {
		padding-bottom: 2rem;
	}
	
	.overlay-home .title-block {
		margin-top: 3.125rem;
		padding: 1.875rem 0 0 0;
	}
	
	
	.right,
	.left {
		display: block;
		float: none;
	}
	
	.headline br {
		display: none;
	}
	
	#social-share-buttons {
		position: relative;
		margin-bottom: 1.875rem;
	}
	
	#pagetitle nav.subnavi > .divider {display: inline-block;}
	#pagetitle nav.subnavi > .string {display: none;}

	
	#project-navigation {
	   border-top: 1px solid #CCC;
	   padding-top: 1rem;
	   margin: 0 2% 0 2% !important;
	}
	
		#project-navigation .inverted {
			background: #FFF;
		}
		
		#project-navigation .pagination-title {
			font-size: 0.75rem;
		}
		
		
		#nav-project-prev,
		#nav-project-next {
			position: relative;
			float: left;
			padding: 0 !important;
			width: 48%;
			height: auto;
			height: 3.75rem;
			line-height: 3.75rem;
			border-radius: 0.2rem;
			transform: none !important;
		}
		
		#nav-project-prev {
			margin: 0 2% 0 0 !important;
			float: left;
		}
		
		#nav-project-next {
			margin: 0 0 0 2% !important;
			float: right;
		}
		
			#nav-project-prev .pagination-title {
				float: left;
				margin-right: 0rem;
			}
			
			#nav-project-next .pagination-title {
				float: right;
				margin-left: 0rem;
			}		
	
			#project-navigation a .figure--teaser,
			#project-navigation a .title-block {
				display: none;
			}
			
			#nav-project-prev svg.icn,
			#nav-project-next svg.icn {
		    	padding: 0.5rem;
			}
			
			#nav-project-next svg.icn {
				float: right;
			}
		
		#nav-top {
			position: absolute;
			z-index: 50;
		}

	
	#studio-awards .hr {
		display: none;
	}
	
	
	form input,
	form textarea,
	form select,
	form button {
	    height: 26px;
	    line-height: 26px;
	    font-size: 1rem;
	}
	
	/* Joblist (2019) */
	
	.joblist__item {
		flex-direction: column;
	}
	
}



@media only screen and (max-width: 640px) {

	/* Language Navigation */
	
	#top nav.lang {margin-right: 3rem;}		
	#top nav.lang a:not(.active) {display: none;}
	
	#top #nav-lang-dropdown {
		position: absolute;
		display: block;
		top: .05rem;
		left: -2rem;
		padding-right: 2rem;
	}
	

}




@media only screen and (max-width: 480px) {

	html {font-size: 75%;}
	
	.container {
		margin: 0 3.35%;
	}
	
	.teaserlist.fixheight li {height: 16rem;}

}



@media only screen and (max-width: 420px) {

	html {font-size: 66.6666%;}
	
}


@media only screen and (max-width: 340px) {

	html {font-size: 60%;}
	
	.teaserlist.fixheight li {height: 15.5rem;}

}








/* CLEARFIX
-------------------------------------------------------------- */


/* For modern browsers */
.cf:before,
.cf:after {
	content:"";
	display:table;
}

.cf:after {
	clear:both;
}