* {
	margin:0;
	padding:0;
	border:0;
	font-family:arial, helvetica, sans-serif;
	color:#0a0a0a;
}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
body {
	background:url(images/background.png) top left repeat #fff;
	font-size:100%;
}
/* Stylesheets sind aufeinander aufbauend spezifiziert von Smartphone zu Desktop (klein zu groß) ----------- */
/* HEADER */
#header {
	width:100%;
	position:fixed;
	z-index:55;
	top:0;
	left:0;
	box-shadow: -1px 0 8px 0 rgba(0,0,0,0.5);  
}
#mainmenu {
	min-width:100px;
	margin:0 auto;
	padding:0 2%;
	list-style-type: none;
	overflow: hidden;
}
#logo a {
	float:left;
	display:block;
	width:220px;
	height:50px;
	background:url(images/logo320.png) center left no-repeat transparent;
}
#menuicon a {
	float:right;
	display:block;
	width:30px;
	height:50px;
	background:url(images/menu.png) center left no-repeat transparent;
}
#mainmenu .item {
	display: none; /* für Hamburger-Menu initial ausgeblendet */
	text-align: center;
   	text-decoration: none;
   	transition: 0.3s;
}
#mainmenu .item:hover {text-decoration: underline;}
#logo a:hover, #menuicon a {text-decoration: none;}
/* INTRO */
#intro {
	width:100%;
	border-bottom: 1px solid #aaa;
	box-shadow: -1px 3px 8px 0 rgba(0,0,0,0.3);
}
#intro .imageSMALL {
	width:100%;
	height:500px;
}
#intro .imageMEDIUM {
	display:none;
	width:100%;
	height:500px;
}
#intro .imageBIG {
	display:none;
	width:1220px;
	height:600px;
	background:#fff;
	border-right: 20px solid #fff;
	border-left: 20px solid #fff;
	border-bottom: 20px solid #fff;

}
#intro .shadow {
	display:none;
	position:absolute;
	z-index:-5;
	top:525px;
	width:1220px;
	height:80px;
	border:20px solid #fff;
	box-shadow: 0 4px 8px -3px rgba(0,0,0,0.2);
}
.box {
	z-index:5;
	position:absolute;
	width:100%;
	height:500px;
	top:50px;
	left:0;
}
.introtext {
	position:absolute;
	bottom:30px;
	right:0;
	margin:2%;
	padding:20px; 
	background:#fff;
}
.introtext h1 {font-size:150%; margin-bottom:2%;}
.introtext p {font-size: 93.75%;line-height: 133.33%;}
/* CONTENT */
#content {
	min-width:100px;
	margin:0 auto;
	padding:0 2%;
}
/* TEXT */
h2 {font-size:150%; margin-bottom:2%;}
.text p {
	margin-bottom:2%;
	font-size: 93.75%;
	line-height: 133.33%;
}
.bold {font-weight:bold;}
.anchor {position:absolute; margin-top:-22%;}
.navtop {
	clear:both;
	display:block;
	margin:6% 0 4% 0;
	padding: 0 0 5px 0;
	font-size:81%;
	border-bottom: 1px solid #aaa;
}
.navtop a {color:#8c8c8c; text-decoration:none;}
/* PROJEKTE */
#folio .projekt {font-weight:bold;}
#folio .projekt:not(:first-child) {padding-top:2%;}
#folio .subprojekt {margin:0 0 3% 4%;}

/* FOOTER */
#footer .copyright {
	font-size:81%;
	color:#8c8c8c;
	margin-bottom:8%;
}
#footer .bold {font-weight:bold; color:#8c8c8c;}


/* Smartphones (320px) ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (min-resolution: 192dpi) and (min-width: 320px),
only screen and (min-resolution: 2dppx) and (min-width: 320px) { 
	#logo a {width:440px; height:100px; background:url(images/logo320x2.png) center left no-repeat transparent;}
	#menuicon a {width:60px; height:100px; background:url(images/menu2x.png) center left no-repeat transparent;}
}

/* Tablet portrait (768px) ----------- */
@media only screen and (min-width:768px){
	#intro .imageSMALL {display:none;}
	#intro .imageMEDIUM {display:block;}
	.introtext {position:static; float:left; width:40%; margin:150px 0 0 40px;}
	#folio h2, #about h2, #contact h2, #imprint h2 {float:left;}
	.text {float:right; width:70%;}
	.anchor {position:absolute; margin-top:-10%;}
	#folio .subprojekt {margin:0 0 2% 6%;}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (min-resolution: 192dpi) and (min-width: 700px),
only screen and (min-resolution: 2dppx) and (min-width: 700px) { 
	#logo a {width:440px; height:100px; background:url(images/logo320x2.png) center left no-repeat transparent;}
	#menuicon a {width:60px; height:100px; background:url(images/menu2x.png) center left no-repeat transparent;}
}

/* Laptops + Tablet landscape (1024px) ----------- */
@media only screen and (min-width:1024px) {
	#logo a {width:300px; height:50px; margin-right:14%; background:url(images/logo.png) center left no-repeat transparent;}
	#mainmenu .item {float:left; display:block; padding:0 2%; line-height:50px;} /* Listet alle Menueinträge nebeneinander */
	#menuicon {display: none;} /* Menuicon ausblenden */	
	#intro .imageSMALL {display:none;}
	#intro .imageMEDIUM {display:block;}
	.introtext {position:static; float:left; width:400px; margin:170px 0 0 40px;}
}
@media only screen and (min-width:1100px) {#logo a {margin-right:20%;}}
@media only screen and (min-width:1150px) {#logo a {margin-right:21%;}}
@media only screen and (min-width:1200px) {#logo a {margin-right:24%;}}

/* Desktops (>1280px) ----------- */
@media only screen and (min-width:1280px) {
	body {font-size:133%;}
	#logo a {margin-right:20%;}
	#mainmenu {max-width:59.25em; padding:10px 20px;}
	#content {max-width:59.25em; padding:0 20px;}
	#intro .imageSMALL {display:none;}
	#intro .imageMEDIUM {display:none;}
	#intro .box {display:none;}
	#intro .imageBIG {display:block;}
	#intro .shadow {display:block;}
	#intro {max-width:1280px; margin:0 auto; border:none; box-shadow:none;}
	.introtext2 {
		float:left; 
		width:420px; 
		margin:165px 0 0 40px;
		padding:30px; 
		background:#fff;
	}
	.introtext2 h1 {font-size:150%; margin-bottom:2%;}
	.introtext2 p {font-size: 93.75%;line-height: 133.33%;}
}

/* HAMBURGER-MENU */
@media 
only screen and (max-width: 1023px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1023px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1023px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1023px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1023px),
only screen and (min-resolution: 192dpi) and (max-width: 1023px),
only screen and (min-resolution: 2dppx) and (max-width: 1023px){
	#mainmenu.responsive {position: relative; padding:60px 2% 4% 2%;}
	#mainmenu.responsive #menuicon {
		position: absolute;
		right: 2%;
		top: 0;
	}
	#mainmenu.responsive li {
		float: none;
		display: inline;
	}
	#mainmenu.responsive #logo {
		position: absolute;
		left: 2%;
		top: 0;
	}
	#mainmenu.responsive .item {
		display: block;
		text-align: left;
		padding:2% 0%; 
		margin:0;
	}	
}
@media 
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1023px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1023px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1023px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1023px),
only screen and (min-resolution: 192dpi) and (max-width: 1023px),
only screen and (min-resolution: 2dppx) and (max-width: 1023px){
	#mainmenu.responsive {padding:120px 2% 4% 2%;}
}