/* RESET */
html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video,details,summary{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}button,input,select,textarea{margin:0}button{width:auto;overflow:visible}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}blockquote,q{quotes:none}input,select{vertical-align:middle}a:focus{outline:thin dotted}a:active,a:hover{outline:0}img{-ms-interpolation-mode:bicubic;vertical-align:middle}small{font-size:85%}html{filter:expression(document.execCommand("BackgroundImageCache", false, true))}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:sans-serif}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }




@font-face {
    font-family: 'iron_sansregular';
    src: url('fonts/ironsans.eot');
    src: url('fonts/ironsans.eot?#iefix') format('embedded-opentype'),
         url('fonts/ironsans.woff') format('woff'),
         url('fonts/ironsans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'indy_pimpregular';
    src: url('fonts/indiepimptbs.eot');
    src: url('fonts/indiepimptbs.eot?#iefix') format('embedded-opentype'),
         url('fonts/indiepimptbs.woff') format('woff'),
         url('fonts/indiepimptbs.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




body {
	font-family: 'indy_pimpregular';
	font-size: 20px;
	line-height: 1.4;
	position: relative;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-rendering: optimizeLegibility;
	background-color: #fcc521;
	color: #2c292d;

}


::selection		  {background:#2c292d; color: #fcc521; text-shadow: none;}
::-moz-selection  {background:#2c292d; color: #fcc521; text-shadow: none;}



a 		  { color: #000; 	}
a:visited { color: #000;	}
a:hover   { color: #fff; 	}
a:active  { color: #ff0000; }



h1 {
	font-family: 'iron_sansregular';
	font-weight: normal;
	font-size: 12em;
	line-height: 0.8;
	text-shadow: -3px -3px 0px white;
	white-space: nowrap;
}

h2 {
	font-weight: normal;
	font-family: 'iron_sansregular';
	color: white;
	font-size: 4em;
	line-height: 1;
	white-space: nowrap
}

h3 {
	font-family: 'indy_pimpregular';
	color: white;
	font-weight: normal;
	text-align: left;
	font-size: 3.8em;
	line-height: 1.8;
	white-space: nowrap
}

h4 {
	font-family: 'indy_pimpregular';
	color: white;
	font-weight: normal;
	text-align: left;
	font-size: 2em;
	line-height: 1.2;
	white-space: nowrap
}

h5 {
	font-family: 'iron_sansregular';
	color: #2c292d;
	text-shadow: -1px -1px 0px white;
	font-size: 2em;
	line-height: 1.57;
	white-space: nowrap
}


#oben {
	width: 100%;
	height: 967px;
}

.inhalt {
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	max-width: 980px;
	padding: 20px;
	z-index: 5;
	position: relative;
}


#zeichnung {
	width: 490px;
	height: 967px;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	background-image: url(img/zeichnung.png);
	background-size: 100%;
	background-repeat: no-repeat;
}


#grau {
	background-color: #2c292d;
	width: 100%;
	position: relative;
	z-index: 1;
	color: white;
	font-family: 'Open Sans', sans-serif;
}




#grau h2 {color: #fcc521;}
#grau a  {color: #fcc521; text-decoration: none;}




#gelb {
	font-size: 0.8em;
	background-color: transparent;
	width: 100%;
	z-index: 1;
	font-family: 'Open Sans', sans-serif;
}



.links {
	width: 50%;
	float: left;
	padding-right: 4%;
	padding-bottom: 5%;
	text-align: justify;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}


.rechts {
	width: 50%;
	float: left;
	padding-left: 4%;
	padding-bottom: 5%;
	margin-top: 16px;
	height: 100%;
	text-align: justify;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

img#maschine {
	position: absolute;
	bottom: 180px;
	left: 55%;
}


#kontakt {
	background-color: #947727;
	width: 100%;
	clear: both;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #e0c473;
	font-size: 12px;
	height: 180px;
}

#kontakt a {color: #e0c473;}
#kontakt a:hover {color: white;}























@media only screen and (max-width: 600px) {
	.links {width: 100%; padding-right: 0;}
	.rechts {width: 100%; padding-left: 0; padding-bottom: 220px;}
	img#maschine {left: 50%; margin-left: -120px;}
}



@media all and (max-width: 320px) {
	#zeichnung {
		width: 320px;
		height: 630px;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		background-image: url(img/zeichnung-klein.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	#oben {
		width: 100%;
		height: 628px;
	}
}