/* Thank you for looking at this stylesheet */
/* Dominique Heiniger 2016                  */


/* ======================= ALLGEMEINE DEFINITIONEN ======================= */


html {
	background-color:#4e4e4d;
	height:100%;
	width: 100%;
}

body {
	font-family: 'Open Sans', sans-serif;
	margin:0px;
	height:100%;
	width: 100%;
}



/* ======================= PSEUDOKLASSEN/LINKS ======================= */
a:link {
	color:#fff;
	text-decoration:none;
}

a:visited {
	color:#fff;
	text-decoration:none;
}

a:hover {
	text-decoration:none;
}

a:active {
	color:#000;
}



/* ======================= DIV-LAYOUT ======================= */


#bildbanner {
	height:100%;
	float:left;
	width:100%;
}

#overlay {
	background:rgba(0,0,0,0.3);
	height:100%;
	width:100%;
	position: absolute;
	z-index:1;
}

#inhalt { 

	position:absolute;
	top:50%;
	-webkit-transform: translateY(-50%); /* Safari */
	transform:translateY(-50%);
	width:100%;
	z-index:999;
}

#inhalt .inner{ 
	margin:0 auto;
	width:100%;
	max-width: 500px;
	text-align: center;
}

#textlogo img{
	max-width:500px;
}

#boxen{
	position: relative;
	max-width: 700px;
	margin: 60px auto 100px auto;
}

#boxoben {
	position: relative;
	background-color:rgba(0,0,0,0.4);
	border:2px solid #4e4e4d;
	color:#fff;
	display:block;
	font-size:1.1em;
	margin:0px auto;	
	margin-top:20px;
	padding:15px;
	text-align: center;
	width:100%;
	box-sizing:border-box;
}

/* #boxoben:hover {
	background-image:url(../bilder/start-eisengiesserei.jpg);
	color:#fff;
	text-shadow: 0 0 1em #000, 0 0 1em #000;
	transition: 1s ease;
}

#boxoben:hover img {
	width:100%;
} */

#boxunten {
	position: relative;
	background-color:rgba(0,0,0,0.4);
	border:2px solid #4e4e4d;
	color:#fff;
	display:block;
	font-size:1.1em;
	margin:0px auto;
	margin-top:20px;
	padding:15px;
	text-align: center;
	width:100%;
	box-sizing:border-box;
}

.footnote {
	position: relative;
	display:block;
	box-sizing:border-box;
	margin:0px auto;
	margin-top:20px;
	font-size:0.7em;
	color: #fff;
	text-shadow: 0 0 0.4em #000000,0 0 0.2em #000000;
}

.side-note {
	position: absolute;
	right: 5px;
	transform-origin: bottom right;
	transform: translateY(-10.4em) rotateZ(-90deg);
	font-size:0.7em;
}

#boxenklein .side-note {
	transform: translateY(-11.4em) rotateZ(-90deg);
}

/* #boxunten:hover {
	background-image:url(../bilder/start-bauguss.jpg);
	color:#fff;
	text-shadow: 0 0 1em #000, 0 0 1em #000;
	transition: 1s ease;
}

#boxunten:hover img {
	width:100%;
} */

.stoerer {
	position: absolute;
	top: 30px;
	right: -250px;
	-webkit-transition: transform 2s; /* For Safari 3.1 to 6.0 */
	animation: PLAYstoerer 2s ease infinite;
	-webkit-animation: PLAYstoerer 2s ease infinite;
	-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
	animation-iteration-count: infinite;
	transition: top 100ms;
	transition: right 100ms;
	z-index: 1;
}
.stoerer img {
	transition: width 100ms;
}

@keyframes PLAYstoerer {   
	0% {
		transform:scale(0.6);
	}
	50% {
		transform:scale(0.7);
	}
	100% {
		transform:scale(0.6);
	}
}

@-webkit-keyframes PLAYstoerer { 
	0% {
		transform:scale(0.6);
	}
	50% {
		transform:scale(0.7);
	}
	100% {
		transform:scale(0.6);
	}
}
@media screen and (max-width: 480px) {
	@keyframes PLAYstoerer {
		0% {
			transform:scale(0.3);
		}
		50% {
			transform:scale(0.5);
		}
		100% {
		transform:scale(0.3);
		}
	}
	@-webkit-keyframes PLAYstoerer { 
		0% {
			transform:scale(0.3);
		}
		50% {
			transform:scale(0.5);
		}
		100% {
			transform:scale(0.3);
		}
	}
	.stoerer {
		margin-bottom: -40px;
	}
}

#navslideshow {
	background:#4e4e4d;
	clear:both;
	color:#fff;
	text-align: center;
	font-size:1.8em;
}

#boxenklein {
	display:none;
}

#boxendruck {
	display:none;
}


/* ======================= CLASS ======================= */
h1 {
	color:#fff;
	font-size:1.7em;
	text-align: center;
}
div.cookie-banner.hidden {
	display: none;
}
div.cookie-banner {
	position: fixed;
	display: inline-block;
	right: 0;
	bottom: 0;
	left: 0;
	border-top: 2px solid #B3353B;
	box-shadow: 0 0 10px #333333;
	background-color: #e3e3e3;
	color: #000000;
	z-index: 1200;
}
div.cookie-banner .content {
	position: relative;
	margin: 0 auto;
	padding: 15px;
	max-width: 800px;
	line-height: 1.1em;
	font-size: 0.9em;
	text-align: left;
}
#fusszeile .cookie-banner .content a,
div.cookie-banner .content a {
	text-decoration: underline;
	color: #000000;
}
div.cookie-banner .content .accept-cookies {
	float: right;
	display: inline-block;
	margin: 3px;
	margin-right: 0;
	padding: 4px;
	border: 1px solid #B3353B;
	background-color: #e3e3e3cc;
	cursor: pointer;
}
div.cookie-banner .content .accept-cookies:hover,
div.cookie-banner .content .accept-cookies:focus {
	box-shadow: 0 0 2px #333333;
	background-color: #B3353B33;
}

@media (max-width: 940px) {
	.stoerer {
		right: -170px;
	}
}
@media (max-width: 800px) {
	.stoerer {
		top: 70px;
		right: -145px;
	}
	.stoerer img {
		width: 70%;
	}
}
@media (max-width: 700px) {
	.stoerer {
		right: -90px;
	}
}
@media (max-width: 590px) {
	.stoerer {
		right: -50px;
	}
}

@media screen and (max-width: 480px) {
	#inhalt {
		top: 45%;
	}
	#boxen {
		display:none;
	}
	#boxenklein {
		display: block;
	}
	
	#boxoben {
		margin-top:50px;
		padding:5px;
	}
	
	#boxunten {
		padding:5px;
	}
	.stoerer {
		top: 170px;
	}
	
	#textlogo {
		margin-bottom: -20px;
	}
	
	#textlogo img{
		max-width:300px;
	}

	#inhalt .inner {
    	width: 80%;
	}
	
	#boxoben:hover {
		background-image:none;
	}
	
	#boxunten:hover {
		background-image:none;
	}
	
	#boxendruck {
		display:none;
	}
	div.cookie-banner .content {
		padding: 10px;
		font-size: 0.8em;
	}
}
	
@media screen and (max-width: 350px) {
	#textlogo img{
		max-width:250px;
	}
		
	#boxendruck {
		display:none;
	}
}