* {
	margin: 0;
	padding: 0;
}
.hide-on-small-screen {
	display: none;
}
.flex-break {
	flex-basis: 100%
}

body {
	font-family: sans-serif;
}

h1 {
	font-size: 1.5em;
}

main > h2 {
	font-size: 1.4em;
	margin-left: 1em;
	margin-bottom: 1em;
	margin-top: 2em;
}
h3 {
	font-size: 1.2em;
	margin-left: 1em;
	margin-top: 2em;
	margin-bottom: 1em;
}

.zitat {
	margin-left: 2em;
	margin-top: .5em;
	margin-bottom: .5em
}

header {
	background-color: #F0ECD1;
}

#top-panel {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
#accessability {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
}
#logo {
	max-height: 12em;
	margin-top: 1em;
	margin-left: 1em;
	margin-bottom: 1em;
}
#logo img {
	height: 12em;
}

select {
	-webkit-appearance:none;
	-moz-appearance:none;
 	appearance:none;
	cursor: pointer;
	color: #AB393F;
	background-color: #F0ECD1;
	border: .15em solid #AB393F;
	font-size: 1.5em;
	padding: .3em;
	width: 8em;
	display:none;
}
select:hover {
	color: #F0ECD1;
	background-color: #AB393F;
}
.panel {
	border-bottom: 1px solid #AB393F;
}
#dropdown-wrapper {
	display: none;
}

label {
	display: none;
}

button {
	border: none;
	cursor: pointer;
	font-size: 2em;
	width: 2em;
	height: 2em;
	background-color: #F0ECD1;
	color: #AB393F;
}
button:hover {
	background-color: #AB393F;
	color: #F0ECD1;
}
.material-icons.md-resize {
	font-size: 2em;
}

.single-pic {
	display: none;
}


nav {
	background-color: #F0ECD1;
	display: flex;
	flex-direction: column;
}
.nav-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5em;
}
.current-item {
	text-decoration: underline;
}
nav a {
	padding: 5px 5px;
	color: #AB393F;
	text-align: center;
	text-decoration: none;
}
nav a:hover {
	background-color: #AB393F;
	color: #F0ECD1;
}

#gallery {
	display: none;
}

#banner {
	position: relative;
	z-index: 1;
	background-color: #F0ECD1;
	color: #AB393F;
	padding: 1em;
	border-bottom: 1px solid #AB393F;
}

/* TODO Merge Main and Footer??? */
main {
	z-index: 1;
	position: relative;
	background-color: #F0ECD1;
	color: #2C0002;
	padding-top: 1em;
}

footer {
	z-index: 1;
	position: relative;
	background-color: #F0ECD1;
	color: #2C0002;
	padding: 1em;
}

/*TODO use CSS-Hyphens instead of text-align: justify; if support is good enought */
p {
	font-size: 1.2em;
	padding-left: 1em;
	padding-right: 2em;
	padding-top: .5em;
	padding-bottom: .5em;
	text-align: justify;
}
p > a {
	font-weight: bold;
	font-size:1.2em;
	text-decoration: none;
	color: #226634;
}
p > a:hover {
	color: #AB393F;
}
ul {
	font-size: 1.2em;
	padding-left: 1em;
	padding-right: 2em;
	padding-top: .5em;
	padding-bottom: .5em;
	list-style-position: inside;
	text-align: justify;
}
li {
	margin-bottom: 1em;
}

/* ##############################  Barrierefreiheit  ################################## */

/* 	Seiteninhalt, der vom Screenreader vorgelesen wird, aber vor anderen Benutzern
	versteckt ist. */
.screen-reader-only {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* 	Skiplinks verstecken, sodass sie nur sichtbar werden, wenn sie durch die Tastatur
	in den Focus gelangen */
#skip-links a {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
#skip-links a:focus {
	position: static;
	width:auto;
	height:auto;
}

/* #################################################################################### */


/* Small devices in Landscape mode */
@media (min-width: 576px) {
	#accessability {
		flex-direction: row;
		align-items: center;
	}
	#top-panel {
		align-items: flex-start;
	}
}

/* Tablets */
@media (min-width: 768px) {
	#gallery {
		display: block;
		height: 300px;
	}

	.single-pic {
		display: block;
		height: 350px;
	}

	#banner {
		border-top: 1px solid #AB393F;
	}
}

/* Desktops */
@media (min-width: 992px) {
	#accessability {
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 45%;
	}
	#menu-button {
		display: none;
	}
	.hide-on-small-screen{
		display: flex;
	}
	nav {
		flex-direction: row;
		flex-wrap: wrap;
		align-items:: center;
		justify-content: space-around;
	}
	.nav-item {
		width:15em;
	}
	label {
		display: inline;
		color: #AB393F;
		font-size: 1.5em;
		font-weight: bold;
		margin-right: 1em;
	}
	select {
		display: block;
	}

	#banner {
		display: inline-block;
		max-width: 57%;
		border-right: 1px solid #AB393F;
		border-left: 1px solid #AB393F;
		top: -2em;
		left: 2em;
		font-size: 1.5em;
		box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.25)/*rgba(171,57,63,0.75)*/;
	}

	#contrast-button {
		display: none;
	}
}

/* Large Desktops */
@media (min-width: 1300px) {
	html {
		background-image: url('../img/bg.jpg');
		background-position: 0em -4vw;
		margin-top: 4vw;
	}

	body {
		max-width: 1300px;
		margin: auto;
		border-left: 1px solid #AB393F;
		border-right: 1px solid #AB393F;
		border-top: 1px solid #AB393F;
		box-shadow: 0px 0px 40px 10px rgba(0,0,0,0.5)/*rgba(171,57,63,0.75)*/;
	}
}