body {
	background: #fcfcfa;
	font-family: Raleway, sans-serif;
	font-size: 0.9em;
	color: #333;
	overflow-x: hidden;
}

/* Selection */
::selection {
	background: #333;
	color: #f4f4f1;
}
::-moz-selection {
	background: #333;
	color: #f4f4f1;
}

/* Headlines and links */
h1, h2, h3, h4, h5, h6 {
	font-family: Museo, serif;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 1.8em;
}
h2 {
	font-size: 1em;
}
h3 {
	text-align: center;
	text-transform: uppercase;
}
h4 {
	display: inline;
	font-weight: bold;
}
a, a:active, a:visited {
	color: inherit;
	text-decoration: none;
}
a:hover {
	color: #999;
}
ul li {
	padding-left: 0.75em;
	text-align: left;
}

/* Input elements */
input, textarea {
	font-family: Museo, serif;
	font-style: italic;
	color: #8d8b84;
	border: 0;
	background: #efeee8;
	padding: 0.4em 0.75em;
	margin-bottom: 0.75em;
	width: 90%;
	outline: none;
	border: 2px solid transparent;
}
input:focus, textarea:focus {
	border: 2px solid #333;
}
input[type="submit"] {
	font-style: normal;
	background: #f4f4f1;
	border: 2px solid #333;
	font-weight: bold;
	color: #333;
	width: auto;
}
input[type="submit"]:hover {
	background: #333;
	color: #f4f4f1;
}
textarea {
	resize: vertical;
}

/* General styles */
.bold {
	font-weight: bold;
}
.center {
	text-align: center;
}
.success {
	color: #0c0;
}
.error {
	color: #c00;
}
.penrose {
	background: #e9e8e3 url("../img/bg.jpg") no-repeat top center;
	background-size: 200%;
}
section {
	padding: 2em 1.5em;
	text-align: justify;
	background: #f4f4f1;
}
section > div, .slide, #tiles_details {
	-webkit-transition: width 0.5s;
	   -moz-transition: width 0.5s;
	     -o-transition: width 0.5s;
		    transition: width 0.5s;
}
nav {
	text-transform: uppercase;
}
#nav .third a, header nav a {
	display: inline-block;
	margin: 0 0.25em;
}

/* Header and navigation */
header {
	padding-top: 4em;
}
header nav {
	display: none;
}
#nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fcfcfa;
	padding: 1.25em 0;
	z-index: 1000;
}
#nav table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}
#nav .first, #nav .second {
	display: none;
}
#nav .third {
	text-align: center;
	width: 100%;
}

/* Content */
#title {
	text-align: center;
}
#title img {
	width: 4em;
}
#padding1 {
	height: 2em;
}
#tiles {
	padding: 2em 0;
	text-align: center;
}
.tilegroup {
	display: inline-block;
	vertical-align: top;
	margin: 0;
}
.tile {
	text-align: center;
	display: inline-block;
	color: #f4f4f1 !important;
	font-family: Museo, serif;
	font-size: 90%;
	width: 9em;
	height: 9em;
	padding: 0.75em;
	margin: 2em 1.1em 0;
	cursor: pointer;
}
.yellow {
	background: #89775b;
	background: rgba(73, 44, 1, 0.6);
}
.blue {
	background: #5e8587;
	background: rgba(1, 66, 72, 0.6);
}
.green {
	background: #7a7f5b;
	background: rgba(47, 56, 1, 0.6);
}
.red {
	background: #a6665a;
	background: rgba(122, 18, 1, 0.6);
}
.tile img {
	width: 100%;
	display: inline-block;
	margin-top: -1.4em;
	margin-bottom: -1em;
}
.tile.green img, .tile.red img {
	width: 90%;
	margin-top: -0.75em;
	margin-bottom: 0;
}
.smallTile {
	width: 4em;
	height: 4em;
}
#tiles_details, #tiles_details div {
	display: none;
}
#section-ueber h5 {
	text-align: center;
	font-size: 1.1em;
}
#quotes {
	font-style: italic;
}
#quotes .masonry:before {
	content: "\201C\00a0";
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.2em;
	font-weight: bold;
	color: #333;
	display: block;
	position: absolute;
	margin-left: -0.87em;
	margin-top: -0.05em;
}
footer {
	text-align: center;
	font-size: 75%;
	margin: 7em 0 -3.5em;
	color: #333;
}

/* Overlay */
#overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	background: #f4f4f1;
	background: rgba(255, 255, 255, 0.75);
	display: none;
	font-size: 70%;
}
.overlay-inner {
	width: 85%;
	margin: 0 auto;
	position: relative;
	padding: 0.9em;
	display: none;
}
.overlay-content {
	background: #fcfcfa;
	padding: 1.5em;
	text-align: justify;
}
.overlay-inner, .overlay-content {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}
.overlay-inner .overlay-close {
	font-size: 90%;
	float: right;
	cursor: pointer;
}
#overlay h2 {
	text-align: center;
}
#browsehappy {
	display: none;
}

/* Gallery */
#section-galerie {
	height: 530px;
	padding-top: 5em;
	padding-bottom: 4em;
}
#section-galerie > div {
	margin-left: -1em;
}
.slide {
	height: 500px;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover;
	position: absolute;
	left: 50%;
	background: #666;
	display: none;
}
.slide:first-child {
	display: block;
}
.slide_button {
	font-size: 1.6em;
	cursor: pointer;
	position: absolute;
	z-index: 5;
	opacity: 0;
	display: none;
}
#slide_left {
	margin-left: 70px;
}
#slide_right {
	left: 100%;
	margin-left: -100px;
}
#slides_overview {
	position: absolute;
	margin-top: 500px;
	padding-top: 20px;
	width: 100%;
	text-align: center;
	display: none;
}
#slides_overview span {
	display: inline-block;
	color: #999;
	font-size: 0.75em;
	margin: 0 0.25em;
	cursor: pointer;
}
#slides_overview span:hover, #slides_overview span.current {
	color: #333;
}

@media screen and (max-width: 699px) {
	.tile {
		font-size: 60%;
	}
	#contact .masonry {
		margin-left: 10%;
		width: 80%;
	}
	#contact .masonry:first-child {
		margin-bottom: 3em;
	}
	#quotes .masonry {
		width: 80%;
		margin-left: 10%;
	}
	#quotes .masonry:first-child {
		margin-bottom: 1em;
	}
	footer table, footer table tr, footer table td {
		display: inline-block;
		width: 100%;
		padding-bottom: 1.25em;
	}
	footer table {
		margin-bottom: 2em;
	}
	#section-galerie {
		height: 250px;
		padding: 4em 0;
	}
	.slide {
		width: 100%;
		height: 250px;
		left: 0;
		background-size: cover !important;
	}
}

@media screen and (min-width: 700px) {
	body {
		font-size: 1.25em;
	}
	
	/* Headlines and links */
	h1 {
		font-size: 2.75em;
		margin-top: 0.1em;
	}
	h2 {
		font-size: 1.5em;
		margin-top: 0.5em;
	}
	h3 {
		font-size: 1.5em;
	}
	a, a:active, a:visited {
		-webkit-transition: color 0.25s;
		   -moz-transition: color 0.25s;
			 -o-transition: color 0.25s;
				transition: color 0.25s;
	}
	
	/* General styles */
	.penrose {
		background-size: cover;
	}
	#page {
		margin: 1em;
	}
	section {
		padding: 3em 0;
	}
	section > div, #tiles_details {
		margin: 0 auto;
	}
	section > div, .slide, #tiles_details {
		width: 75%;
	}
	
	/* Header and navigation */
	header {
		padding-top: 0;
	}
	header nav {
		display: block;
		text-align: right;
		padding: 1.25em 1.25em 0 0;
		font-size: 90%;
	}
	#nav {
		display: none;
		padding: 0.75em 0 0.5em;
	}
	#nav .third a, header nav a {
		margin: 0;
		margin-left: 1em;
		font-size: 80%;
	}
	#nav .first {
		width: 45%;
		padding-left: 2em;
		display: table-cell !important;
	}
	#nav .second {
		width: 10%;
		text-align: center;
	}
	#nav .third {
		width: 45%;
		text-align: right;
		padding-right: 2em;
	}
	#nav img {
		width: 3em;
		height: 2.68em;
		padding-top: 0.25em;
	}
	
	/* Content */
	#title img {
		width: 5em;
	}
	#padding1 {
		height: 4em;
	}
	#tiles {
		padding: 6em 0 4em;
		text-align: center;
	}
	#section-ueber h5 {
		font-size: 1.25em;
	}
	#contact {
		text-align: center;
	}
	.masonry {
		display: inline-block;
		vertical-align: top;
		width: 49%;
	}
	.masonry.left {
		text-align: left;
	}
	.masonry.right {
		text-align: right;
	}
	#contact .masonry.left {
		margin-top: 0.5em;
	}
	#quotes .masonry {
		text-align: left;
		padding-left: 1.9em;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	#quotes .masonry.left {
		padding-right: 1em;
	}
	#quotes .masonry.right {
		padding-left: 2.9em;
		padding-right: 0;
	}
	footer {
		margin-top: 10em;
	}
	footer table {
		width: 100%;
	}
	footer td {
		width: 33%;
	}
	footer td.first {
		text-align: left;
		padding-left: 1em;
	}
	footer td.third {
		text-align: right;
		padding-right: 1em;
	}
	
	/* Gallery */
	#slides_overview, .slide_button {
		display: block;
	}
	.slide {
		left: 12.5%;
	}
}

@media screen and (min-width: 900px) {
	#nav .third a, header nav a {
		font-size: 100%;
	}
	#nav .second {
		display: table-cell !important;
	}
	#overlay {
		font-size: 95%;
	}
}

@media screen and (min-width: 1400px) {
	h1 {
		font-size: 3em;
	}
	section > div, .slide, #tiles_details {
		width: 50%;
	}
	header nav {
		font-size: 100%;
	}
	#tiles {
		padding: 8em 0 4.5em;
	}
	.slide {
		left: 25%;
	}
	.overlay-inner {
		width: 65%;
	}
}

@media screen and (max-height: 800px) {
	#overlay {
		font-size: 80% !important;
	}
}