html {
	height: 100%;
}

body {
	position: relative;
	display:block;
	padding: 4vw;
	font-size: 12px;
	font-family: 'Roboto Mono', monospace;
	line-height: 1.6em;
	min-height: 100%;
	text-align: right;
}

main {
	margin-bottom: 6em;
}

a {
	color: #000;
	border-bottom: 0.08em solid;
}

address a {
	border:none;
}

h1 {
	margin-bottom: none;
}

h1 a {
	border:none;
}

a.tel {
	white-space:nowrap;
}



/* projectEntries */

.projectEntries {
	margin-bottom: 2em;
}

.projectEntries figure {
	position: relative;
	display:block;
	margin-bottom: 5vw;
}

.projectEntries figure.filtered {
	display:none;
}

.projectEntries figure img {
	width: auto;
	max-height: 60vw;
	max-width: 60vw;
}

.projectEntries figcaption {
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0;
	margin: 0;
	pointer-events:none;
}

.projectEntries figure img,
.projectEntries figure figcaption {
	vertical-align: top;
	
}

.projectEntries figure.active figcaption {
	opacity: 1;
	z-index: 1;
	pointer-events:auto;
	transition: opacity 0.3s ease;
}

.projectEntries figure.active img {
	opacity: 0;
}

.werkstatt {
	margin-bottom: 8em;
}

.about {
	margin-bottom: 9em;
}



/* filterNav */

.filterNav {
	margin-top: 1.6em;
	margin-bottom: 2.2em;
}

.filterNav ul {
	margin: 0;
}

.filterNav li {
	display:inline-block;
}

.filterNav a.active {
	border: none;
}



.filterInfos p {
	display:none;
}

.filterInfos p.active {
	display:block;
	margin-top: 4em;
	margin-bottom: 4em;
}


/* footer */

.pageFooter {
	position: absolute;
	bottom: 4vw;
	width: calc(100% - 8vw);
}



/* tablet */
@media only screen and (min-width: 500px) {
	
	.projectEntries figure img {
		max-height: 280px;
		max-width: 280px;
	}
	
}



/* desktop */
@media only screen and (min-width: 1000px) {
	body {
		padding: 2vw;
		max-width: 1400px;
		margin: 0 auto;
	}
	
	.pageHeader,
	.filterInfos,
	.werkstatt,
	.about {
		width: 38%;
	}
	
	.projectEntries figure {
		margin-bottom: 1.2em;
	}
	
	.projectEntries figure img {
		left: 41%;
	}
	
	.projectEntries figure.active img {
		opacity: 1;
	}
	
	.projectEntries figure img,
	.projectEntries figure figcaption {
		display:block;
		position: relative;
	}
	
	.projectEntries figure figcaption {
		position: absolute;
		right: 62%;
		width: 35%;
	}

	.projectEntries .noEntries {
		position: relative;
		left: 50%;
		text-align: left;
	}
	
	.pageFooter {
		bottom: 2vw;
		width: calc(38% - 1.5vw);
	}
	
	
}