@charset "utf-8";
/* CSS Document */

/*------------------constants-------------------*/


* {
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	line-height: 28px;
	border: none;
	list-style: none;
	text-decoration: none;
	font-weight: normal;	
}

a {
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: bold;
	color: rgb(57,73,84);
}

a:hover {
	color:rgb(109,138,154);	
}


/*------------------block layout-------------------*/


html {
	background: rgb(57,73,84);	
}


body {
	max-width: 920px;
	width: auto;
	height: auto;
	margin: 0 auto 0 auto;
	background-color: rgb(255,255,255);
}

header {
	max-width: 100%;
	width: auto;
}

nav {
	max-width: 100%;
}

section {
	max-width: 100%;
	width: auto;
	padding-left: 94px;
	padding-right: 64px;
}

footer {
	max-width: 100%;
	width: auto;
	height: 76px;
	display: block;
	background-color: rgb(255,255,255);
}

/*----------------------home---------------------------*/


div#home {
	max-width: 100%;
	width: auto;
	max-height: 100%;
	min-height: 640px;
	background: rgb(42,53,53);
	margin: 0 auto 0 auto;
	background-image: url(../_img/ilkaHaederle.jpg);
	background-repeat: no-repeat;
	background-color: rgb(42,53,59);
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	-ms-background-size: 100% auto;
	background-size: 100% auto;
}

div#home header h1 {
	font-size: 48px;
	padding: 32px 0 0 55px;
	line-height: 48px;
}

div#home header h2 {
	font-size: 24px;
	color: rgb(251,177,18);
	padding-left: 55px;	
	padding-top: 18px;
	line-height: 24px;
}

div#home nav ul{
	padding-top: 72px;
}

div#home nav ul a li figure{
	height: auto;
	padding: 0 0 0 55px;
	float: left;
}

div#home nav ul a li h2{
	color: rgb(251,177,18);
	padding: 0 0 0 100px;
	font-size: 18px;
	line-height: 30px;
}

div#home nav ul a:hover li h2{
	color:rgb(109,138,154);
}



/*------------------text styling-------------------*/
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

h1 {
	font-size: 30px;
	padding: 28px 0 0 0;
	color: rgb(251,177,18);
}
	
h2 {
	font-size: 18px;
	padding-top: 24px;
	color: rgb(38,47,53);
}

h3 {
	font-size: 14px;
	padding-top: 14px;
}


p {
	padding-bottom: 0px;
}

section.paragraphList p{
	padding-bottom: 0em;
}

section.paragraphList ul a li h2{
	font-size: 14px;
	padding: 0;
	margin: 0;
}


section.impressum p, section.impressum h3, section.impressum p a{
	padding-bottom: 0;
	font-size: 10px;
	line-height: 18px;
}

/*-----------------Navigation------------------------*/


ul a li {
	padding: 0 0 24px 0;
	height: auto;
}

ul a li h2{
	color: rgb(38,47,53);
	-webkit-transition: color 0.15s ease;
	-moz-transition: color 0.15s ease;
	-o-transition: color 0.15s ease;
	-ms-transition: color 0.15s ease;
	transition: color 0.15s ease;
}

ul a:hover li h2{
	color: rgb(109,138,154);
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	transition: color 0.3s ease;
}

/*------------------images for navigation-------------------*/


ul a li figure{
	float: left;
	padding: 24px 12px 0 0;
}

section.contact{
	margin: 0 0 0 240px;
}

section.paragraphList ul a li figure{
	padding: 2px 12px 0 0;
	margin: 0;
}

section.paragraphList ul a li figure img{
	width: 24px;
	height: 24px;
}

ul a li figure img.up{
	position: absolute;
	opacity: 1;
	-webkit-transition: opacity 0.15s ease;
	-moz-transition: opacity 0.15s ease;
	-o-transition: opacity 0.15s ease;
	-ms-transition: opacity 0.15s ease;
	transition: opacity 0.15s ease;
}

ul a:hover li figure img.up{
	opacity: 0;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}



/*------------------images-------------------*/

header figure.banner {
	max-width: 100%;
	width: auto;
	max-height: auto;
	height: auto;
}

header figure.banner h1 {
	position: absolute;
	padding-left: 120px;
	max-width: 100%;
	width: auto;
	max-height: 100%;
	height: 18px;
}

header figure.banner img{
	max-width: 100%;
	max-height: 100%;
	height: auto;
	width: auto;
}

nav a figure img.back{
	position: absolute;
	padding: 0 0 0 60px;
	opacity: 1;
	-webkit-transition: opacity 0.15s ease;
	-moz-transition: opacity 0.15s ease;
	-o-transition: opacity 0.15s ease;
	-ms-transition: opacity 0.15s ease;
	transition: opacity 0.15s ease;
}

nav a figure img.backHover{
	position: absolute;
	padding: 0 0 0 60px;
	opacity: 0;
	-webkit-transition: opacity 0.15s ease;
	-moz-transition: opacity 0.15s ease;
	-o-transition: opacity 0.15s ease;
	-ms-transition: opacity 0.15s ease;
	transition: opacity 0.15s ease;
}

nav a:hover figure img.backHover {
	opacity: 1;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}

nav a figure{
	float: none;
	clear: both;
	display: block;
	overflow: auto;
	height: 72px;
}


/*-------------------------media queries-------------------------*/


/*-------------------------large*/
@media only screen and (min-width: 601px) {
	body	{
		min-width: 601px;
		max-width: 920px;
	}
}

/*-------------------------Medium*/	
@media only screen and (min-width: 481px) and (max-width: 600px){

	
	body {
		min-width: 481px;
		max-width: 600px;
	}
	
	header figure.banner h1 {
		font-size: 18px;
		padding: 12px 0 0 72px;
		margin: 0;
		color: rgb(251,177,18);
	}
		
	section {
		padding-left: 60px;
	}
	
	nav a figure img.back{
		padding-left: 28px;
	}
	
	nav a figure img.backHover{
		padding-left: 28px
	}
	
	section.contact{
	margin: 0 0 0 100px;
}
	
	/*----------------------home---------------------------*/


	div#home {
		height: 440px;
		min-height: 640px;
	}
	
	div#home header h1 {
		font-size: 30px;
		line-height: 32px;
		padding-left: 32px;
	}
	
	div#home header h2 {
		font-size: 18px;
		padding-left: 32px;	
		padding-top: 14px;
		line-height: 24px;
	}
	
	div#home nav ul a li figure{
		height: auto;
		padding: 0 0 0 32px;
		float: left;
	}

	
	div#home nav ul{
		padding-top: 32px;
	}
	
	div#home nav ul a li h2{
		font-size: 16px;
		padding: 0 0 0 80px;
		line-height: 30px;
	}
		
	div#home nav ul a:hover li h2{
		color: rgb(109,138,154);
	}


}

/*-------------------------Small*/
@media only screen and (max-width:480px) {
	
	body {
		max-width: 480px;
	}
	header figure.banner h1 {
		font-size: 1em;
		padding: 0.25em 0 0 60px;
		margin: 0;
		color: rgb(251,177,18);
	}	
	section {
		padding-left: 52px;
	}
	nav a figure img.back{
		padding-left: 18px;
	}
	
	nav a figure img.backHover{
		padding-left: 18px
	}
	
	section.contact{
	margin: 0 0 0 0;
}
	
		/*----------------------home---------------------------*/


	div#home {
		height: 340px;
		min-height: 480px;
	}
	
	div#home header h1 {
		font-size: 30px;
		line-height: 32px;
		padding-left: 28px;
	}
	
	div#home header h2 {
		font-size: 18px;
		padding-left: 28px;	
		padding-top: 14px;
		line-height: 24px;
	}
	
	div#home nav ul{
		padding-top: 24px;
	}
	
	div#home nav ul a li figure{
		height: auto;
		padding: 0 0 0 28px;
		float: left;
	}
	
	div#home nav ul a li h2{
		font-size: 16px;
		padding: 0 0 0 80px;
		line-height: 28px;
	}
	
	div#home nav ul a:hover li h2{
		color: rgb(109,138,154);
	}


}