::selection {color:white;background: black;}
::-moz-selection {color:white;background:black;}

html, body {
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

ul, ol {
	padding: 0;
	margin: 0;
	list-style-type: none;
}


@font-face {
    font-family: 'die_groteskregular';
    src: url('../type/die_grotesk-webfont.eot');
    src: url('../type/die_grotesk-webfont.eot?#iefix') format('embedded-opentype'),
         url('../type/die_grotesk-webfont.woff') format('woff'),
         url('../type/die_grotesk-webfont.ttf') format('truetype'),
         url('../type/die_grotesk-webfont.svg#die_groteskregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

a:link, a:visited {
	text-decoration: none;
	color: #000;
}
a:hover, a:focus, a:active {
	color: #555;
	color: rgb(85,85,85);
}



html {
	height: 100%;
}
body {
	text-rendering: geometricPrecision;
	font-family: 'die_groteskregular';
	line-height: 1em;
	font-size: 1em;
}


#header {
	position: fixed;
	width: 100%;
	padding: auto 2em auto 2em;
	z-index: 10;
}
	.logo, .date {
		height: 5em;
		margin-top: 0.5em;
	}

	.logo {
		margin-left: 2em;
	}
	#header ul {
		position: absolute;
		top: 1em;
		right: 2em;
		margin: auto 2em auto auto;
	}
		#header li {
			float: left;
			margin: 0.5em;
			height: 2em;
			line-height: 2em;
		}
		.border {
			border-right: solid 1px rgb(0,0,0);
			padding-right: 1em;
		}





/*====================
	FOOTER
====================*/
#bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 1em auto auto auto;
	background: rgba(255,255,255,0.5);
}

#bottom li {
	float: left;
	width: 20%;
	height: 4em;
	margin-left: 5%;
}

.kit {
	height:8em;margin-top:-4em
}
#imprint {
	margin: 0;
	padding: 2em 6em 2em 6em;
}

#imprint p {
	font-size: 1em;
	line-height: 1.2em !important;
	color: rgb(255,255,255);
}

#partner {
	width: 100%;
	height: 250px;
	background: url('../img/partner_sponsoren.jpg') rgb(255,255,255) center no-repeat;
	background-size: 80%;
}



/*====================
	TEXT
====================*/
#content {
	padding: 8em 2em 6em 2em;
}
	#content > ul {
		height: 100%;
	}

#content li {
	display: block;
	color: #fff;
	text-shadow:  1px  1px 1px black,
	                  1px -1px 1px rgb(0,0,0),
	                 -1px  1px 1px rgb(0,0,0),
	                 -1px -1px 1px rgb(0,0,0);
	font-size: 600%;
	line-height: 120%;
	margin-top: 1em;
	margin-bottom: 3em;
}


/*====================
	ARTISTS
====================*/
html.artists {
	height: 100%;
	background: url('../img/DIE_AUSSTELLUNG_Poster_Background_Preview.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: 100%;
}
	html.artists body {
		height: 100%;
	}

#artists {
	height: 100%;
	height: calc(100% - 80px);
	padding-top: 40px;
	overflow: hidden;
	position: relative;
}
	#artists > ul {
		height: 100%;
	}
		#artists .container {
			height: 100%;
		}
			#artists .container > img {
				height: 80%;
				margin: 0 auto;
				display: block;
			}
			#artists .container > h1 {
				display: none;
			}
		#headline {
			position: fixed;
			text-align: left;
			left: 25%;
			bottom: 10%;
			color: rgb(0,0,0);
			font-size: 400%;
			font-weight: normal;
			line-height: 90%;
			z-index: 10;
		}



/*====================
	ABOUT
====================*/
.about {
	background-color: rgb(0,0,0);
}

.about li, .about a {
	color: rgb(255,255,255);
}
.about {
	background: rgb(0,0,0);
}

#about {
	height: auto;
	padding: 10em 6em 6em 6em;
}

#about p {
	color: rgb(255,255,255);
	font-weight: normal;
	font-size: 200%;
	line-height: 120%;
}






/*##### Mobil ####*/
#mobilehead {
	position: fixed;
	width: 100%;
	display: none;
}

#mobilehead img {
	float: left;
	margin: 1em auto auto 2em;
	width: 100%;
}

#mobilehead ul {
	float: left;
	width: 100%;
	margin: auto auto 1em 1em;
}

#mobilehead li {
	float: left;
	margin: 1em auto auto 1em;
}



@media screen and (max-width: 760px) {
	
	#header {
		display: none;
	}
	
	#mobilehead, #mobilenav {
		display: block;
		z-index: 1000;
	}
	
	#bottom {
		position: relative;
		float: left;
	}
	
	#bottom li {
		width: 100%;
		margin: 2em auto auto 2em;
	}
	
	#content {
		position: relative;
		min-height: 100%;
		padding: 8em 2em 2em 2em;
	}
	
	#about {
		padding: 8em 2em 2em 2em;
	}
	
	#imprint {
		padding: 2em;
	}
	
	#about p {
		font-size: 120%;
	}
	
	#imprint p {
		font-size: 80%;
	}
	
	.kit {
		height:6em;
		margin-top: -2em
	}
	
	#content li {
		font-size: 200%;
	}
	
	.container img {
		width: 60%;
		height: auto;
		margin: 10% auto 10% auto;
	}
	
	h1#headline {
		position: fixed;
		text-align: left;
		left: 10%;
		bottom: 15%;
		color: rgb(0,0,0);
		font-size: 300%;
		line-height: 90%;
	}
}