html,body,h1{margin:0;padding:0;font-size:100%}
article,footer,header,nav{display:block}
ul{list-style:none;margin-left:0;padding: 0px;}
/*article{height:100%} */
.seiten{position:absolute;top:80px;margin:20px 10%;width:76%;text-align:center; background:#66a;border:solid 2px #999;padding:20px 2%;background-color:rgba(100,120,155,.8);border-radius:15px}
body{background:#333;font-family:verdana, arial, helvetica, sans-serif;}
body.is-preload *, body.is-preload :before, body.is-preload :after{animation:none!important;transition:none!important}
body{color:#fff;letter-spacing:-.025em;line-height:1.75em;height:100vh;}

*,:before,:after{box-sizing:inherit}
a{text-decoration:none}
a:hover{border-color:#00f}
img{max-width:90%}
@keyframes wrapper { 0%{opacity:0}  100%{opacity:1}  }

#wrapper{position:relative;top:0;left:0;height:100%;width:99%;animation:wrapper 0.1s forwards;opacity:0}
#bg{animation:bg 30s linear infinite;backface-visibility:hidden;transform:translate3d(0,0,0);background:#27a url(bg_berg3.jpg) bottom left;background-repeat:repeat-x;height:100%;left:0;opacity:1;position:fixed;top:0}

@keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-2250px,0,0)} }
#bg{background-size:2250px auto;width:6750px}

@keyframes overlay { 0%{opacity:0} 100%{opacity:1}  }

#overlay{animation:overlay .1s .5s forwards;background-attachment:fixed;background-image:url(),url(overlay.svg);background-position:top left,center center;background-repeat:repeat,no-repeat;background-size:auto,cover;height:100%;left:0;opacity:0;position:fixed;top:0;width:100%}
#main{height:100%;width:100%;left:0;top:0;text-align:center}
#main:before{content:' ';display:inline-block;height:100%;margin-right:0;vertical-align:middle;width:1px}

@keyframes header    { 0%{transform:translate3d(0,1em,0);opacity:0}  100%{transform:translate3d(0,0,0);opacity:1} }

@keyframes nav-icons { 0%{transform:translate3d(0,1em,0);opacity:0}  100%{transform:translate3d(0,0,0);opacity:1} }

#header{animation:header 1s .25s forwards;backface-visibility:hidden;transform:translate3d(0,0,0);cursor:default;display:inline-block;opacity:0;position:relative;text-align:center;top:-5em;width:90%}
#header h1{font-size:3.5em;font-weight:900;letter-spacing:-.035em;line-height:1em}
#header p{font-size:1.25em;margin:.5em 0 .15em;opacity:.75}
nav{position:absolute;top:20px;width:100%;text-align:center}
nav li{border:solid 2px #999;animation:nav-icons .2s ease-in-out forwards;transform:translate3d(0,0,0);display:inline-block;opacity:0;position:relative;top:0;width:6em}
nav li:nth-child(1){animation-delay:.3s}
nav li:nth-child(2){animation-delay:.6s}
nav li:nth-child(3){animation-delay:.9s}
nav li:nth-child(4){animation-delay:1.2s}
nav li:nth-child(5){animation-delay:1.5s}
nav li:hover{border:solid 2px #fff;}
nav a{border:0;display:inline-block;color:#fff}
nav a:before{transition:all .1s ease-in-out;display:block;font-size:1.75em;height:2.5em;line-height:2.5em;position:relative;text-align:center;top:0;width:2.5em}
nav a:hover:before{background-color:rgba(255,255,255,1);color:#fff}

footer{background-image:linear-gradient(to top,rgba(0,0,50,.4),rgba(0,0,50,0.8) 75%);bottom:0;height:2em;line-height:2em;position:fixed;bottom:0px;text-align:center;width:100%}
footer a{color:#ddd;font-size:70%}

@media screen and (max-width: 1680px) { body{font-size:13pt}
@keyframes bg { 0%{transform:translate3d(0,0,0)}  100%{transform:translate3d(-1500px,0,0)} }
#bg{background-size:1500px auto;width:4500px}
}
@media screen and (max-width: 1280px) {
body{font-size:12pt}

@keyframes bg {
0%{transform:translate3d(0,0,0)}
100%{transform:translate3d(-750px,0,0)}
}
#bg{background-size:750px auto;width:2250px}
}
@media screen and (max-width: 736px) {
body{min-width:320px}
body{font-size:11pt}
ul{list-style:none;margin-left:-20px;padding:0px;}


@keyframes bg {
0%{transform:translate3d(0,0,0)}
100%{transform:translate3d(-300px,0,0)}
}
#bg{background-size:300px auto;width:900px}
#header h1{font-size:2.5em}
#header p{font-size:1em}
}
@media screen and (max-width: 480px) {
@keyframes bg {
0%{transform:translate3d(0,0,0)}
100%{transform:translate3d(-412.5px,0,0)}
}
#bg{background-size:412.5px auto;width:1237.5px}
nav{padding:0 1em}
}