body {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin: 0px;
	padding: 0 0 3em 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 14px;
	color:black;
	background-color: rgb(243,243,243); /* Helles Grau wie im background-gif */
	background-image:url(../images/background.gif); 
	background-repeat:repeat-y;
	max-width: 68em;
}

header,
nav,
article,
aside,
footer {
	border: none;
	padding: 0;
	margin: 0;
	-webkit-flex: 1 100%;
	flex: 1 100%;
}

header {
	background-image: url(../images/ics-logo-web-55-filled.png), url(../images/ics-logo-web-55s.png);
	background-position: right top, left top;
	background-repeat: no-repeat, repeat-x;
	background-attachment: scroll;
	border: none;	
	padding: 0px;
	margin-top: 0px;
	margin-left: 2em;
	margin-bottom: 0em;
	margin-right: 0em;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row-reverse wrap;
	flex-flow: row-reverse wrap;  
}
 
header * {
	-webkit-flex: 1 1 0%;
	flex: 1 1 0%;
}

#Title {
	margin: 25px 5px 10px 0px;
	padding: 0px;
	font: italic normal normal 90%/1.5em verdana, tahoma, arial, helvetica, sans-serif;
}

#Logo {
	margin: 0;
	padding: 0;
	flex: 0 0 160px;
	height: 55px;
}

header nav {
	-webkit-flex: 1 1 100%;
	flex: 1 1 100%;
}
 
nav,
nav ul,
nav li {
	margin: 0;
	padding: 0;
	border: none;
}

nav { 
	padding-bottom: 1.2em;
}

nav ul {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-flex-direction: column;
	flex-flow: column nowrap;
}

nav ul li {
	-webkit-flex: 0 0 1em;
	flex: 0 0 1em;
	position: relative;
	list-style: none;
}

nav ul li:last-child {
	margin-right: 0;
	padding-right: 0;
}

nav a {
	display: block;
	font: normal normal 300 75%/1.0em verdana, tahoma, arial, helvetica, sans-serif;
	width: 12em;
	height: 1em;
	background-color: white;
/*	border: 2px solid #F1F3F4; */
	border: 2px solid rgb(224,224,224);
	color: rgb(19,121,90);
	margin: 0;
	text-align: left;
	text-decoration: none;
}

nav a:hover {
background-color: rgb(243,243,243);
}

nav a.active {
	color: rgb(243,243,243);
	background-color: rgb(176,176,176);
}

nav a.active:hover {
color: rgb(5,5,5);
background-color: rgb(243,243,243);
}

nav > ul > li:hover > ul:not(#current) {
	font: inherit;
	z-index: 2;
}

nav > ul > li > a.openButton,
nav > ul > li > a.closeButton {
	display:none;
}

nav > ul > li.active > a.openButton,
nav > ul > li.active > a.closeButton {
	position: absolute;
	font: normal normal 300 75%/1.0em verdana, tahoma, arial, helvetica, sans-serif;
	top: 0em;
	left: 12em;
	width: 2em;
	height: 1.0em;
}	

nav > ul > li.active > a.openButton {
	display: block;
}

nav > ul > li.active > a.closeButton {
	display:none;
}

nav#nav:target > ul > li.active > a.openButton {
	display:none;
}

nav#nav:target > ul > li.active > a.closeButton {
	display:block;
}

nav ul ul {
	position: absolute;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-flow: column nowrap;
	font: 0/0 serif;
	top: 0em;
	left: 10em;
	vertical-align: middle;
	z-index: -1;
	transition: all 0.3s ease-in;
}

nav ul ul#current {
	position: absolute; 
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-flow: column nowrap;
	font: inherit;
	top: 0em; 
	left: 10em; 
	vertical-align: middle;
	z-index: 2;
}

nav ul ul li {
	-webkit-flex: auto;
	flex: auto;
}

nav ul ul li a {
	display: block;
	width: 8em;
	font: normal normal 300 75%/1.0em verdana, tahoma, arial, helvetica, sans-serif;	
	height: 1.0em;
}

nav ul ul#current li a {
	display: none;
	font: 0/0 serif;
	height: 0;
}

nav#nav:target ul ul#current li a, 
nav ul ul#current li a.active {
	display: block;
	width: 8em;
	font: normal normal 300 75%/1.0em verdana, tahoma, arial, helvetica, sans-serif;	
	height: 1.0em;
}

article {
	margin-top: 0em;
	margin-left: 2em;
	margin-right: 2em;
	padding-left: 3em;
	padding-bottom: 3em;
	-webkit-flex: 3 1 0%;
	flex: 3 1 0%;
}

article h2 {
	font: normal normal 500 150%/1.2em verdana, tahoma, arial, helvetica, sans-serif;
}

article h3 {
	font: normal normal 500 120%/1.0em verdana, tahoma, arial, helvetica, sans-serif;
}

div.headline {
	margin: 15px 0 5px 0;
	padding: 0px 10px 5px 0px;
	font-weight: 400;
	font-size: 130%;
}

aside {
	background: #ebf5d7;
	border-color: #8db243;
	-webkit-flex: 1 1 0%;
	flex: 1 1 0%;
}

footer,
footer a,
footer ul,
footer li {
	background-color: rgb(224,224,224);
	color: rgb(19,121,90);
	margin: 0;
	padding: 0;
	border: none;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	font-weight: lighter;
	font-size: 80%;
	line-height: 120%;
	max-width: 66em;
	padding-top: 1em;
	padding-bottom: 0.5em;
	padding-left: 2em;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-flow: row wrap;  
}

footer ul,
footer div {
	-webkit-flex: 1 1 0%;
	flex: 1 1 0%;
}

footer ul {
	list-style: none;
}

footer ul:not(.sec-nav) {
	-webkit-flex: 2 1 0%;
	flex: 2 1 0%;
}

footer div {
	width: 20em;
}

form {
	width: auto;
}

form div {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: flex-start;
}

form div label {
	flex: 0 0 8em;
}

form div input,
form div textarea {
	flex: 1 1 60%;
	margin-top: 0.3em;
	padding: 0;
	
}

form div textarea {
	height: 10em;
}

form div input[type=checkbox] {
	justify-content: flex-start;
}



form input[type=submit],
form input[type=reset] {
	flex: 0 0 auto;
	margin-top: 1em;
}

#ArticleImage, 
#FadeImage {
	display: none;
}

#FadeImage img {
  position:absolute;
  left:0;
  top:0;
  -webkit-animation: FadeInOut 30s infinite;
  animation: FadeInOut 30s infinite;
  z-index: 1;
}

#FadeImage img:nth-of-type(1) {
  animation-delay: 24s;
}

#FadeImage img:nth-of-type(2) {
  animation-delay: 18s;
}

#FadeImage img:nth-of-type(3) {
  animation-delay: 12s;
}

#FadeImage img:nth-of-type(4) {
  animation-delay: 6s;
}

#FadeImage img:nth-of-type(5) {
  animation-delay: 0s;
}


@media (min-width: 31.9em) {

	header {
		background-image: url(../images/ics-logo-web-110-filled.png), url(../images/ics-logo-web-110s.png);
	}

	#Title {
		margin: 50px 10px 20px 0px;
		font: italic normal normal 150%/1.5em verdana, tahoma, arial, helvetica, sans-serif;
	}

	#Logo {
		flex: 0 0 320px;
		height: 110px;
	}

	nav ul {
		-webkit-flex-direction: row;
		flex-flow: row nowrap;
		font: normal normal 300 80%/1.5em verdana, tahoma, arial, helvetica, sans-serif;
	}

	nav ul li {
		-webkit-flex: 0 0 8em;
		flex: 0 0 8em;
	}

	nav a {
		display: block;
		font: normal normal 300 100%/1.5em verdana, tahoma, arial, helvetica, sans-serif;
		width: 7.5em;
		height: 3em;
		text-align: center;
		text-decoration: none;
	}

	nav > ul > li.active > a.openButton,
	nav > ul > li.active > a.closeButton {
		font: normal normal 300 75%/1.0em verdana, tahoma, arial, helvetica, sans-serif;
		top: 4.2em;
		left: 8em;
		height: 1.5em;
}	

	nav ul ul {
		top: 3.2em;
		left: 0em;
	}

	nav ul ul#current {
		top: 3.2em;
		left: 0em;
	}

	nav#nav:target ul ul#current li a, 
	nav ul ul#current li a.active,
	nav ul ul li a {
		height: 1.5em;
	}

	article h2 {
		font: normal normal 500 200%/1.2em verdana, tahoma, arial, helvetica, sans-serif;
	}

	article h3 {
		font: normal normal 500 150%/1.0em verdana, tahoma, arial, helvetica, sans-serif;
	}

	footer {
		font: inherit;
	}

	footer ul {
		font-weight: lighter;
		font-size: 80%;
		line-height: 120%;
	}

	#ArticleImage, 
	#FadeImage {
		display: inherit;
		position: relative;
		margin: 0;
		height: 18em;
		padding-bottom: 1em;
	}

	#ArticleImage img, 
	#FadeImage img {
		width: 100%;
		min-width: 350px;
		max-width: 512px;
		min-height: 180px;
		max-height: 264px;
	}
	
	
}

@media (min-width: 37.6em) {

	header {
		margin-bottom: 1em;
	}
	
	#Title {
		display: inherit;
		margin: 50px 10px 20px 0px;
		font: italic normal normal 150%/1.5em verdana, tahoma, arial, helvetica, sans-serif;
	}

	nav ul {
		-webkit-flex-direction: row;
		flex-flow: row wrap;
		font: normal normal 300 100%/1.5em verdana, tahoma, arial, helvetica, sans-serif;
	}

	nav a {
		display: block;
		font: normal normal 300 100%/1.5em verdana, tahoma, arial, helvetica, sans-serif;
		width: 7.5em;
		height: 3em;
	}

	footer ul:not(.sec-nav) {
		-webkit-flex: 1 1 0%;
		flex: 1 1 0%;
	}

	form {
		width: 512px;
	}

	#ArticleImage, 
	#FadeImage {
		display: inherit;
		position: relative;
		height: 264px;
		margin: 0;
	}

	
}

@keyframes FadeInOut {
	0 {
		opacity:1;
	}
	16% {
		opacity:1;
	}
	20% {
		opacity:0;
	}
	96% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}