<!--

header, article, nav, footer {display:block; padding:0px; margin:0px; background-color:#fff;}
section {display:block; padding:0px; margin:0px; border: 1px solid #808080;
}
nav {position:absolute; left:0; top:0px; margin-top: 80px; width:100%;  }
nav ul {padding:0; margin:0; list-style:none; position:relative; border:0px solid #00ff00;}
nav ul li {display:block; position:absolute; top:0; width:12.5%; margin:0;
-webkit-transition:0.5s; -moz-transition:0.5s;  -o-transition:0.5s;  transition:0.5s;
}
nav ul li a {
display:block; width:100%; text-decoration:none; text-align:center; height:30px; background:transparent; color:#8e6c60; white-space:nowrap; font: bold 20px/24px 'calibri', arial, sans-serif;  line-height:25px; border: 0px solid #8e6c60;
}
nav ul li a:hover {background-color:#fff; color: #8e6c60; border-bottom: 3px solid #a10f12;}
nav ul li a.hmenx { color: #8e6c60; border-bottom: 3px solid #a10f12;}

nav ul li:nth-of-type(1) {left:0%; transition-delay:0.7s;}
nav ul li:nth-of-type(2) {left:12.5%; transition-delay:0.6s;}
nav ul li:nth-of-type(3) {left:25%; transition-delay:0.5s;}
nav ul li:nth-of-type(4) {left:37.5%; transition-delay:0.4s;}
nav ul li:nth-of-type(5) {left:50%; transition-delay:0.3s;}
nav ul li:nth-of-type(6) {left:62.5%; transition-delay:0.2s;}
nav ul li:nth-of-type(7) {left:75%; transition-delay:0.1s;}
nav ul li:nth-of-type(8) {left:87.5%; transition-delay:0s;}

section {width:100%; max-width:1200px; min-width:320px; height:860px; position:relative; margin:0 auto; background:white;
-webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s;  transition:0.5s;
}
header { margin-top: 110px; height:350px; border: 0px solid #ff0000;}
header h1 {font:normal 60px/60px 'Shadows Into Light Two', arial, sans-serif; color: #a10f12; margin:0; padding:45px 0 0 50px;
-webkit-transition:0.5s; -moz-transition:0.5s;  -o-transition:0.5s; transition:0.5s;
}
img.logo {
        width: 50%;
        height: auto; padding-top: 0%;
}


article {width:33.3%;  margin:0; position:absolute; border: 0px #ff0000 solid;
-webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; transition:0.5s;
}
article img {display:block; margin:0px auto;  border: 5px solid #fff;
}
article h1 {font:bold 25px/30px 'calibri', arial, sans-serif; color:#a10f12; margin:0; padding:10px 20px;}
article h2 {font:bold 25px/30px 'calibri', arial, sans-serif; color:#a10f12; margin:0; padding:10px 20px;}
article h3 {font:bold 20px/30px 'calibri', arial, sans-serif; color:#a10f12; margin:0; padding:10px 20px ;}
article p {display:block; clear:left; padding:0 20px; margin:0;  color:#000; font:normal 16px/22px 'calibri', arial, sans-serif;}

article p a {margin:0; padding:0; font:normal 16px/18px 'calibri', arial, sans-serif; color:#286b07; padding:5px 10px; text-decoration:none;}
article p a:hover {margin:0; padding:0; font:normal 16px/18px 'calibri', arial, sans-serif; color:#a10f12; padding:5px 10px; text-decoration:none;}

article:nth-of-type(1) { height:auto; left:0; top:450px;
-webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s;  -o-transition-delay: 0.5s;  transition-delay: 0.5s;
}
article:nth-of-type(2) {height:uto; left:33.3%; top:450px;
-webkit-transition-delay:0.4s; -moz-transition-delay:0.4s; -o-transition-delay:0.4s; transition-delay:0.4s;
}
article:nth-of-type(3) {height:uto; left:33.3%; top:550px;
-webkit-transition-delay:0.4s; -moz-transition-delay:0.4s; -o-transition-delay:0.4s; transition-delay:0.4s;
}
article:nth-of-type(4) {height:auto; left:66.6%; top:450px;
-webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; -o-transition-delay:0.3s;transition-delay:0.3s;
}


footer {width:100%; min-width:320px; position:fixed; height: 40px; bottom:0; left:0; padding: 0; background:#a10f12;
box-shadow:0 -5px 10px rgba(0,0,0,0.4);
}
footer p {display:block; padding:0 80px; margin:0; font:normal 18px/30px 'calibri', arial, sans-serif; color:#fff;}
 footer p a {padding:0; margin:0; font:normal 18px/30px 'calibri', arial, sans-serif;  color: #8e6c60;}
 footer p a:hover {padding:0; margin:0; font:normal 18px/30px 'calibri', arial, sans-serif;  color: #fff;}

@media only screen and (max-width:1024px) {
header h1 {font:normal 60px/60px 'Shadows Into Light Two', arial, sans-serif; padding-top:15px;}
header h1 span:nth-of-type(2) {display:block;}

/* Abschnitt TABLET gelb */section {height:1210px;}
header { margin-top: 130px; height:350px; border: 0px solid #ff0000;}

article {width:49%; border: 0px solid #fff000;}
article:nth-of-type(1) {left:0; top: 400px; }
article:nth-of-type(2) {left:50%; top:400px;}
article:nth-of-type(3) {left:50%; top:500px;}
article:nth-of-type(4) {left:0%; top:720px;}

nav ul li {width:25%; margin:0 0.15%;}
nav ul li:nth-of-type(1) {left:0%; top:-20px;}
nav ul li:nth-of-type(2) {left:25%; top:-20px;}
nav ul li:nth-of-type(3) {left:50%;top:-20px;}
nav ul li:nth-of-type(4) {left:0%; top:20px;}
nav ul li:nth-of-type(5) {left:25%; top:20px;}
nav ul li:nth-of-type(6) {left:50%; top:20px;}
}

@media only screen and (max-width:1024px) and (orientation:portrait) {
header h1 {font:normal 40px/40px 'Shadows Into Light Two', arial, sans-serif; padding-top:10px;}
header h1 span {display:block;}

/* Abschnitt HANDY1 grün */section {height:1300px;}
header { margin-top: 160px; height:350px; border: 0px solid #0000ff;}

img.logo {
        width: 90%;
        height: auto; padding-top: 0%;
}
article {width:98%; border: 0px solid #00ff00;}
article:nth-of-type(1) {left:0%; top:350px;}
article:nth-of-type(2) {left:0%; top:650px;}
article:nth-of-type(3) {left:0%; top:650px;}
article:nth-of-type(4) {left:0%; top:850px;}

nav ul li {width:49.5%; margin:0 0.15%;}
nav ul li:nth-of-type(1) {left:0%;top:-12px;}
nav ul li:nth-of-type(2) {left:50%;top:-12px;}
nav ul li:nth-of-type(3) {left:0%; top:20px;}
nav ul li:nth-of-type(4) {left:50%; top:20px;}
nav ul li:nth-of-type(5) {left:0%; top:55px;}
nav ul li:nth-of-type(6) {left:50%; top:55px;}

@media only screen and (max-width:480px) {


/* Abschnitt HANDY2 */  section {height:1300px;}

article {width:98%; border: 0px solid #0000ff;}
article:nth-of-type(1) {left:0%; top:300px;}
article:nth-of-type(2) {left:0%; top:650px;}
article:nth-of-type(3) {left:0%; top:650px;}
article:nth-of-type(4) {left:0%; top:900px;}

nav ul li {width:49.5%; margin:0 0.25%;}
nav ul li:nth-of-type(1) {left:0%;top:-35px;}
nav ul li:nth-of-type(2) {left:50%;top:-35px;}
nav ul li:nth-of-type(3) {left:0%; top:0px;}
nav ul li:nth-of-type(4) {left:50%; top:0px;}
nav ul li:nth-of-type(5) {left:0%; top:35px;}
nav ul li:nth-of-type(6) {left:50%; top:35px;}

 -->