body {
	font-family: "Telefon Web", sans-serif;
	/*background: #faf6e9;*/
	background: #fdfbf5;
	margin: 0;
	padding: 0;
	font-size: 1.7vw;
	color: #201a07;
	font-variant-ligatures: common-ligatures;
	text-rendering: optimizeLegibility;
	-webkit-font-variant-ligatures: common-ligatures;
	-webkit-text-size-adjust: 100%;
}

p, label {
	-webkit-transform: translateZ(0);
}

h1,h2,p {
	margin: 0;
	padding: 0;
}

.mobile-only {
	display: none;
}

header {
	margin: 5vw;
	text-align: left;
	position: relative;
	top: 0;
	left: 0;
	height: 75vh;
	opacity: 0;
	transition-duration: 500ms;
}

.show {
	opacity: 1 !important;
}

#logo,
.desc {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 3.9vw;
	transition-duration: 500ms;
}

#logo h1,
.desc h1 {
	font-size: 3.2vw;
	/*color: #676651;*/
	border-top: 0.5vw solid #201a07;
	width: auto;
	text-align: left;
	line-height: 130%;
	padding-top: 0.4vw;
	margin-right: 1vw;
	font-weight: bold;
	float: left;
	cursor: pointer;
}

#impressum .desc h1 {
	cursor: initial;
}

#logo h2,
.desc h2 {
	margin-left: auto;
	font-size: 3.2vw;
	line-height: 130%;
	font-weight: normal;
	padding-top: 0.9vw;
	float: left;
	width: 50vw;
	text-align: left;
}

menu {
	position: absolute;
	top: 0;
	right: 0;
	text-align: right;
	line-height: 110%;
}

menu a {
	width: 3.2vw;
	height: 3.2vw;
	display: block;
	line-height: 100%;
}

menu a:hover {
	line-height: 100%;
}

menu a:hover .cross {
	transform: rotate(-90deg);
}

menu.open {
	position: fixed;
	top: 5vw;
	right: 5vw;
	z-index: 12000;
}

menu.open a .cross {
	transform: rotate(-45deg);
	cursor: pointer;
	z-index: 12000;
}

#text {
	margin-left: 7vw;
	opacity: 0;
	transition-duration: 1000ms;
}

#menu, #impressum {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(212,201,168,0.9);
	background-color: ;
	color: #201a07;
	z-index: 5000;
	text-align: center;
	display: block;
	overflow: hidden;
	opacity: 0;
	pointer-events:none;
	transition-duration: 500ms;
}

#menu.open,
#impressum.open {
	display: block;
	opacity: 1;
	pointer-events: all;
}

#menu .desc,
#impressum .desc {
	margin: 5vw;
}

#menu .links {
	margin: 25.5vw;
	margin-top: 8vw;
	width: 50vw;
}

#menu h3 {
	color: #201a07;
	font-size: 3.2vw;
	font-weight: normal;
	line-height: 110%;
	padding: 0;
	margin: 0;
	text-align: left;
}

#menu h3 a {
	display: inline;
	color: #201a07;
	width: 50vw;
	text-decoration: none;
	position: relative;
}

#menu h3 a:before {
	content:"— ";
	display: none;
	position: absolute;
	left: -3.35vw;
}

#menu h3 a:hover:before {
	display: inline;
}

#menu .small {
	padding-top: 3.4vw;
	text-align: left;
}

#menu .small a {
	display: inline;
	text-align: left;
	font-size: 1.3vw;
	height: 100%;
	line-height: 160%;
	color: #201a07;
	text-decoration: none;
	width: auto;
}

header #text p {
	margin: 0;
	padding-top: 30vh;
	font-size: 3.2vw;
	line-height: 160%;
	color: #201a07;
}

.project {
	width: 100%;
	height: 100%;
	position: relative;
	padding: 0;
	margin: 0;
	line-height: 0%;
	text-decoration: none;
	display: block;
	overflow: hidden;
	border: none;
	opacity: 0;
	transition: opacity 1000ms;
}

.project a.title {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: 0%;
	background: none;
	/*color: #faf6e9;*/
	color: #fdfbf5;
	text-align: left;
	text-decoration: none;
	transition-duration: 300ms;
	cursor: pointer;
}

.project a.title img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

.cross {
	width: 3.2vw;
	height: 3.2vw;
	margin-left: -1.6vw;
	margin-top: -1.6vw;
	position: absolute;
	left: 50%;
	display: block;
	transition-duration: 300ms;
	pointer-events: none;
	z-index: 1000;
	text-align: center;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	overflow: hidden;
}

.cross img {
	width: 100%;
	height: 100%;
}

.cross.dark {
	position: relative;
	z-index: 1000;
}

.project .cross {
	top: 9.1vw;
	left: auto;
	right: 9.1vw;
	display: block;
	opacity: 0;
}


.project a:hover .cross,
.project.open a .cross,
.project a:hover .details,
.project.open a .details {
	opacity: 1;
}

.project.open a .cross,
.project.open a:hover .cross {
	transform: rotate(45deg);
}

.project a hr {
	position: absolute;
	top: 8vw;
	left: 12vw;
	border: none;
	border-top: 0.6vw solid #fdfbf5;
	width: 6vw;
	transition-duration: 300ms;
}

.project a h1 {
	position: absolute;
	top: 12vw;
	left: 12vw;
	font-size: 3.2vw;
	font-family: "Telefon Web Black", sans-serif;
	font-weight: normal;
	-webkit-transform: translateZ(0);
}

.project a h2 {
	position: absolute;
	top: 14vw;
	left: 12vw;
	font-size: 1.7vw;
	font-weight: normal;
	width: 18vw;
	line-height: 120%;
	-webkit-transform: translateZ(0);
}

.project a .details .none,
.project .info .details .none {
	display: none;
}

.project a .details {
	position: absolute;
	top: 24vw;
	left: 12vw;
	width: 76vw;
	height: 20vw;
	opacity: 0;
	transition-duration: 300ms;
}

.project a .details p {
	line-height: 120%;
	width: 100%;
	font-size: 1.2vw;
	margin-bottom: 0.5vw;
}

.project a .details p .title {
	text-transform: uppercase;
	letter-spacing: 0.15vw;
	font-size: 1.0vw;
	font-weight: bold;
	padding-right: 0.5vw;
}

.project a .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	display: block;
	opacity: 0;
	background: #000;
	transition-duration: 300ms;
}

.project a:hover .overlay,
.project.open a .overlay {
	opacity: 0.5;
}

.project a:hover hr {
	width: 8vw;
}

.project.open a:hover hr {
	width: 10vw;
}

.project.open a hr {
	width: 12vw;
}

.project .triangle {
	position: absolute;
	height: 100vh;
	width: 200vw;
	display: block;
	/*background: #faf6e9;*/
	background: #fdfbf5;
	transform-origin: top left;
	transition-duration: 500ms;
}

.project.open .triangle {
	transform: rotate(-5deg);
}

.project .info {
	width: auto;
	position: relative;
	display: none;
	overflow: hidden;
	height: auto;
}

.wrapper {
	margin-top: 10vw;
	margin-bottom: 12vw;
	margin-left: 12vw;
	margin-right: 12vw;
	position: relative;
	line-height: 160%;
	text-align: center;
}

.project .info p {
	width: 50vw;
	line-height: 160%;
	margin-bottom: 1.7vw;
	text-align: left;
	padding-left: 8vw;
}

.project .info .more {
	display: none;
}

.project .info .more>*:first-child {
	margin-top: 8vw;
}

.project .info img {
	width: 100%;
	margin-top: 4vw;
}

.project .info img.small {
	width: 70%;
}

.project .info img.half {
	width: 36vw;
	float: left;
	margin-bottom: 8vw;
}

.project .info img.half+img.half {
	margin-left: 4vw;
	margin-top: 6.3vw;
}

.project .info img+img.half+img.half,
.project .info div+img.half+img.half {
	margin-top: 4vw;
}

br.clear {
	clear: both;
}

.project .info p+img,
.project .info p+iframe,
.project .info p+video {
	margin-top: 6.3vw;
}

.project .info a+img {
	margin-top: 8vw;
}

.project .info img+p,
.project .info iframe+p,
.project .info video+p,
.project .info div+p {
	margin-top: 8vw;
}

.project .info .more>*:first-child img {
	margin-top: 0;
}

.project .info iframe,
.project .info video {
	width: 100%;
	margin-top: 8vw;
	height: 43vw;
}

.project a.action {
	color: #201a07;
	border: 0.22vw solid #201a07;
	padding: 1.1vw 4vw 1vw 4vw;
	text-decoration: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8vw;
	margin-bottom: 1vw;
	display: inline-block;
	transition-duration: 250ms;
	cursor: pointer;
}

.project a.action.toggle {
	width: 9vw;
}

.project a.action.inner {
	margin-top: 5.3vw !important;
}

.project img+a.action.inner {
	margin-top: 8vw !important;
	margin-bottom: 8vw;
}

.project a.action:hover {
	background: #201a07;
	color: #fdfbf5;
}

.project a.action .close {
	display: none;
}

.project a.action.open .open {
	display: none;
}

.project a.action.open .close {
	display: inline;
}

.project .info p a,
.publications a,
.quote a,
.half a,
#menu .small a {
	color: #201a07;
	text-decoration: none;
	font-weight: bold;
	padding: 0.3vw;
	margin: -0.3vw;
	transition-duration: 250ms;
}

.project .info p a:hover,
.publications a:hover,
.quote a:hover,
.half a:hover,
#menu .small a:hover {
	background: rgba(255,255,0,0.5);
}

.image-description {
	position: relative;
	width: 100%;
}

label {
	-webkit-transform: translateZ(0);
}

label .plus {
	position: absolute;
	top:50%;
	left: 50%;
	background: #fdfbf5;
	border: 1px solid #403a27;
	width: 1.7vw;
	height: 1.7vw;
	display: block;
	border-radius: 50%;
	padding: 0.3vw;
	cursor: pointer;
	transition-duration: 300ms;
	-webkit-transform: translateZ(0);
}

label:hover .plus {
	background: #faf6e9;
	border: 1px solid #201a07;
	transform: rotate(45deg);
}

label:hover .plus img {
	opacity: 1;
}

label .plus img {
	width: 60% !important;
	margin: 20% !important;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.75;
}

label .text {
	position: absolute;
	left: 50%;
	top: 50%;
	opacity: 0;
	text-align: left;
	cursor: pointer;
	pointer-events: none;
}

label:hover .text {
	opacity: 1;
}

hr {
	border: none;
	height: 0;
	margin: 0;
	padding: 0;
	border-bottom: 0.5vw solid #201a07;
}

div.quote,
div.half {
	width: 34vw;
	float: left;
	color: #201a07;
	padding: 8vw;
	line-height: 160%;
	font-size: 1.7vw;
	position: relative;
	transition-duration: 300ms;
	overflow: hidden;
	height: 100%;
}

div.quote,
div.half.dark {
	background: #d4c9a8;
}

div.quote:nth-of-type(odd) {
	background: #dbd1b5;
}

div.quote:hover,
div.half.dark:hover {
	background: #e2d9c2;
}

div.quote svg {
	stroke: #dbd1b5;
	z-index: 1;
}

div.quote:nth-of-type(odd) svg {
	stroke: #d4c9a8;
}

.quote span.long {
	opacity: 0;
}

.quote .source {
	text-align: right;
	font-size: 1.3vw;
	margin-top: 1.7vw;
}

.quote p.source:before {
	content: "—";
}

.quote p.text {
	z-index: 10;
	position: relative;
}

.quote svg {
	width: 4.5vw;
	height: 4.5vw;
	position: absolute;
	top: 6vw;
	left: 6vw;
}

.quote svg.c99 {
	transform: rotate(180deg);
	top: auto;
	left: auto;
	bottom: 12.5vw;
	right: 10vw;
}

.publications {
	clear: both;
	text-align: left;
	font-size: 1.7vw;
	padding-top: 8vw;
}

.publications h1 {
	font-size: 3.2vw;
}

.publications table {
	margin: 8vw;
	width: 60vw;
}

.publications table tr td {
	vertical-align: top;
	margin: 0;
	padding: 0;
	padding-bottom: 1.7vw;
}

.publications table tr td:first-child {
	width: 9vw;
}

.publications em {
	font-style: normal;
	font-size: 1.5vw;

}

.publications hr,
.half hr {
	width: 8vw;
	margin-bottom: 2vw;
}

.publications h1,
.half h1 {
	font-size: 3.2vw;
}

.publications .links {
	font-size: 1.3vw;
	text-transform: uppercase;
	letter-spacing: 0.05vw;
}

a.download:before {
	width: 1.2em;
	height: 1em;
	display: inline-block;
	position: relative;
	top: 1px;
	content: " ";
	background-size: 1em;
	background-repeat: no-repeat; 
}

a.download.pdf:before {
	background-image: url("../images/document.svg");
}

a.download.video:before {
	background-image: url("../images/camera.svg");
}

a.download.poster:before {
	background-image: url("../images/poster.svg");
}

div.half {
	height: 30vw;
}

div.half img.background {
	height: 46vw;
	margin-left: -8vw;
	margin-top: -8vw;
	transition-duration: 500ms;
	-webkit-transform: translateZ(0);
}

div.half img.background.normal {
	position: absolute;
	margin: 0;
	top: 0;
	left: 0;
}

div.half img.background.normal:hover {
	opacity: 0;
}

div.halves {
	position: relative;
	height: 30vw;
}

.half h1 {
	margin-bottom: 1.7vw;
}

.half p {
	font-size: 1.7vw;
	line-height: 160%;
	margin-bottom: 1.7vw;
}

.half p.small {
	position: absolute;
	bottom: 8vw;
	left: 8vw;
	right: 8vw;
	font-size: 1.3vw;
	line-height: 140%;
	margin: 0;
	padding: 0;
}

#impressum>p {
	margin-left: 25.5vw;
	text-align: left;
	margin-bottom: 1vw;
	line-height: 160%;
}

#impressum em {
	font-style: normal;
	font-size: 1.3vw;
}

#impressum a {
	color: #201a07;
	text-decoration: none;
}

body.touch .project .info p a,
body.touch .publications a,
body.touch .quote a,
body.touch .half a,
body.touch #menu .small a {
	background: rgba(32,26,7,0.1);
}

body.touch a.action {
	background: #201a07;
	color: #fdfbf5;
}