h1 { font-size: 2.0em; font-family: serif; text-align: center; color: #ffc926;}
h1.left {text-align: left; padding: 0 10em 0 0;}
h2 { font-size: 1.8em; font-family: serif; text-align: center; color: #ffc926;}
h2.left {text-align: left;}
h3 { font-size: 1.6em; font-family: serif; text-align: center; color: #ffc926;}
h3.left {text-align: left;}
p { font-size: 1.4em; font-family: serif; color: #ffc926;padding: .5em .5em .5em .5em;}
p.small_letters{font-size: 1em;}
footer p { font-size: 1.1em; font-family: serif; color: #ffc926;}


body {
    margin: 0 auto;
    max-width: 60em;
	display: -webkit-flex;
	display: flex;	
	flex-flow: row wrap;
	background: #0c0c0c;
	min-height:75em;
}

header, nav, article, footer {
	padding: 1em;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
}

header {
		max-height:12em;
		
	}

article {
		justify-content: flex-start;
		display: -webkit-flex;
		display: flex;	
		max-width: 75%;
	}
	
footer nav{
	margin: 0 auto;
}

header nav a:focus,
header nav a:hover,
header nav li[aria-current] a:focus,
header nav li[aria-current] a:hover {    

  background-color: #474747;
 
}

main {
		justify-content: center;
        margin-bottom: 5em;
		display: -webkit-flex;
		display: flex;
	}

article li {
	font-size: 1em;
	font-family: serif;
	color: #ffc926;
}

img.content {
	display: flex;
	margin: 0 auto;
}

input, textarea {
 	 margin: 0 0 1em 31%;
 	 padding: .2em .5em;
	  width: 60%;
	  background-color: #fffbf0; 
 	 border: 1px solid #e7c157;  
}
	textarea {
	min-height:10em;
}

label { 
	 text-align: right;
 	 line-height: 1.5;
 	 width: 30%;
 	 position: absolute;
 	 left: 0;
}

button {
  margin-left: 31%;
}

.scroll-left {
	min-height: 6em;	
 	overflow: hidden;
 	position: relative;
	width:100%;
}

.scroll-left p {
/* ------------------- Farbe ändern!!------------------- */
	color: orange;
/* ------------------- Ende!! ------------------- */

	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	line-height: 50px;
	text-align: center;
/* Starting position */
	-moz-transform:translateX(100%);
	-webkit-transform:translateX(100%);	
	transform:translateX(100%);
/* Apply animation to this element */	
	-moz-animation: scroll-left 15s linear infinite;
	-webkit-animation: scroll-left 15s linear infinite;
	animation: scroll-left 15s linear infinite;
	}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
	0%   { -moz-transform: translateX(100%); }
	100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
	0%   { -webkit-transform: translateX(100%); }
	100% { -webkit-transform: translateX(-100%); }
}
	@keyframes scroll-left {
		0%   { 
			-moz-transform: translateX(100%); /* Browser bug fix */
			-webkit-transform: translateX(100%); /* Browser bug fix */
			transform: translateX(100%); 		
			}
		100% { 
			-moz-transform: translateX(-100%); /* Browser bug fix */
			-webkit-transform: translateX(-100%); /* Browser bug fix */
			transform: translateX(-100%); 
			}
}


@media (min-width: 60em) {
	p.wide{padding: 0 15em 0 0;}
	span.mail {padding: 0em 0em 0em 5em;}

	body.home {
        background-size: cover;
		background-image: url("img/background/s1s1.png");
	}

	body.history {
    	background-size: cover;
		background-image: url("img/background/s2s2.png");
	}

	body.contact {
 		background-size: cover;
		background-image: url("img/background/s4s4.png");
	}

	body.impressum {
   	    background-size: cover;
		background-image: url("img/background/s3s3.png");
	}

	body.privacy {
		background-size: cover;
		background-image: url("img/background/s5s5.png");
	}
	
	header nav {
		display: -webkit-flex;
		display:flex;
		margin: 0 auto;
		padding: 2em 1em 1em 3em;
	}
	
	header nav a {
	  	padding: 0em 1em 0em 1em;
	 	text-decoration: none; 
	 	font-weight: bold;
		font-size: 2.0em;
		color: #ffc926;
	}
	
	nav ul {
		display: -webkit-flex;
		display: flex;
		list-style-type: none;
	}
	
	main.left {
		justify-content: flex-start;
	}
	
	main.right {
		justify-content: flex-end;
	}
	
	article.right {
		justify-content: flex-end;
	}

	IMG.header {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
	}
	
	form {
		width: 35em;
  	}

	footer nav a {
		padding: 0em 1em 0em 2em;
		font-size: 1.5em;
		color: #ffc926;
	}
}

@media (max-width: 60em) {
	p.wide{padding: 0 25em 0 0;}
	span.mail {
		margin: 0 auto;
		display: -webkit-flex;
		display:flex;
	}


	header nav {	
		display: -webkit-flex;
		display:flex;
		margin: 0 auto;
		width: 6em;
	}

	header nav ul li {
		padding: 0em 0em 1em 0em;
		list-style-type: none;
	}


	header nav a {
	  	padding: 0em .5em 0em .5em;
	 	text-decoration: none; 
	 	font-weight: bold;
		font-size: 1.3em;
		color: #ffc926;
	}

	IMG.header {
		position:relative;
		top: .5em; 
	  	left: .5em;
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
	}
	
	footer nav a {
		padding: 0em .5em 0em .5em;
		font-size: 1em;
		color: #ffc926;
	}
	
	footer nav ul {
		place-content: center;
		display: -webkit-flex;
		display: flex;
		list-style-type: none;
	}
}