@font-face {
	font-family:Futura;
	src: url("./FuturaLT-Book.woff");
	font-weight:400;
}
@font-face {
	font-family:Futura;
	src: url("./FuturaLT-Bold.woff");
	font-weight:700;
}
html, body {
	margin: 0;
	padding: 0;
}
body {
	font-family: Futura, Helvetica, Arial, sans-serif;
}
@media only screen and (min-width: 400px) and (max-width: 1024px) {
	html, body {
		font-size: 4vw;
	}
}
@media only screen and (max-width: 1024px) {
	body {
		background-image: linear-gradient(to right, #dfdfdf 0%, #efefef 20%, #cfcfcf 70%, #bfbfbf 100%);
	}
	p#portrait {
		margin-top: 5vw;
		margin-bottom: 0;
	}
	p#portrait img {
		max-width: 85%;
		height: auto;
	}
	p#logo {
		margin-top: -120px;
		margin-top: -31vw;
		margin-bottom: 0;
	}
	p#logo img {
		width: 42vw;
		min-width: 158px;
		display: block;
		position: relative; /* gegen die linie vom content-kasten */
		z-index: 1; /* gegen die linie vom content-kasten */
	}
	div#content {
		width: 50vw;
		min-width: 200px;
		position: relative; /* fuer z-index ... damit's überm Bild steht */
		margin-top: -4vw;
		border-style: solid;
		border-color: white;
		border-width: 4vw 4vw 0 0;
		padding: 10vw;
	}
	div#content h1 {
		margin-top: 0;
	}
	div#project {
		display: none;
	}
}
p#logo img {
	height: auto;
}
div#content {
	background-color: black;
	color: white;
}
div#content h1 {
	font-size: 100%;
}
div#content a {
	color: white;
	text-decoration: none;
}

div#content p:last-of-type {
	margin-bottom: 0;
}

.uppercase {
	text-transform: uppercase;
}

@media only screen and (min-width: 1025px) {
	body {
		font-size: 87.5%;
	}
	@media only screen and (min-width: 1400px) {
		body {
			font-size: 100%;
		}
	}
	@media only screen and (min-width: 1800px) {
		body {
			font-size: 112.5%;
		}
	}
	p#logo {
		margin-top: 0;
		position: absolute;
		top: 20px;
		left: 20px;
	}
	p#logo img {
		width: 15vw;
	}
	p#portrait {
		width: 24vw;
		background-image: linear-gradient(to right, #dfdfdf 0%, #efefef 20%, #cfcfcf 70%, #bfbfbf 100%);
		float: left;
		height: 50vh;
		margin-top: 25vh;
		margin-right: 1vw;
		position: relative;
	}
	p#portrait span.aspect-ratio {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 10%;
		height: 95%;
		display: block;
		background-image: url("paul_e_ekema_architect.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: bottom left;
	}
	p#portrait span.aspect-ratio img {
		display: none;
	}
	div#content {
		float: left;
		width: 19vw;
		padding-left: 3vw;
		padding-right: 3vw;
		margin-top: 25vh;
		margin-right: 1vw;
		height: 50vh;
	}
	div#content h1 {
		margin-top: 3vw;
	}
	div#project {
		margin-top: 25vh;
		float: right;
		width: 49vw;
		height: 50vh;
		background-image: url("project.jpg");
		background-size: cover;
		background-position: 50% 50%;
	}
}