/* reset */
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* render html5 elements as block
   rendert html5 elemente als block  */

header, footer, section, aside, nav, article { display: block;}

body {
  background: #fff;
  font-size: 0.8em;
  font-family: Arial, SunSans-Regular, Sans-Serif;
  color:#564b47;
  height: 100vh;
  overflow: auto;
  z-index: 10;
}

h1{
font-size:1.6em;
font-weight: oblique;
margin: 0 0 20px;
}

h2{
font-size:1.0em;
font-weight: oblique;
margin: 0 0 20px;
}



/* ---------- Links -------------- */

A.link:link	{
	font-size: 1.0em;
	color: #564b47;
	text-decoration: none;
}

A.link:visited	{
	font-size: 1.0em;
	color: #564b47;
	text-decoration: none;
}

A.link:active	{
	font-size: 1.0em;
	color: #564b47;
	text-decoration: none;
	}

A.link:hover	{
	font-size: 1.0em;
	color: #999;
	text-decoration: underline;
}


/* ---------- Tabelle -------------- */
td {
    border:0px solid;
    width: 600px;
    overflow:hidden;
    vertical-align:middle;
    text-align: left;
}

/* ---------- header, content -------------- */
.inner{
	margin:0 fixed;
	padding:5px;
	max-width:100%;
	min-width:100%;
}

/* ----------header ------------- */
header {
	background: #fff;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	padding: 0px 15px 0px;
	z-index: 10;
}


/* ----------------- content--------------------- */

section#content {
	background-color: #fff;
	max-width:400px;
	min-width:600px;
	margin:0  auto;
	padding: 100px 60px 200px;
}


/* ----------------- slider --------------------- */

.slider {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding-top: 50px; /* Abstand von oben */
  box-sizing: border-box;
}

.slider figure {
  position: absolute;
  top: 50px; /* Abstand vom oberen Rand */
  left: 0;
  width: 100%;
  height: calc(100% - 50px); /* passt die Höhe an, damit nichts abgeschnitten wird */
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fade 96s infinite;
  z-index: 0;
}

/* Animation-Zeiten: 12 Bilder x 8s = 96s */

.slider figure:nth-child(1)  { animation-delay: 0s; }
.slider figure:nth-child(2)  { animation-delay: 8s; }
.slider figure:nth-child(3)  { animation-delay: 16s; }
.slider figure:nth-child(4)  { animation-delay: 24s; }
.slider figure:nth-child(5)  { animation-delay: 32s; }
.slider figure:nth-child(6)  { animation-delay: 40s; }
.slider figure:nth-child(7)  { animation-delay: 48s; }
.slider figure:nth-child(8)  { animation-delay: 56s; }
.slider figure:nth-child(9)  { animation-delay: 64s; }
.slider figure:nth-child(10) { animation-delay: 72s; }
.slider figure:nth-child(11) { animation-delay: 80s; }
.slider figure:nth-child(12) { animation-delay: 88s; }

@keyframes fade {
  0%     { opacity: 0; }
  5%     { opacity: 1; }
  15%    { opacity: 1; }
  20%    { opacity: 0; }
  100%   { opacity: 0; }
}