@media screen and (max-width: 700px){

html {width:100%; height:100%; overflow-x:hidden; }
/*html.mobilon {overflow:hidden;}*/

.screenoff {display:none;}
.onlymobil {display:block;}
.mobiloff {display:none;}


body, #wrapper, footer {min-width:100%; width:100%; }
#wrapper {padding:0px;}
body {height:100%; position:absolute;  background-image:none; left:0%; -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out; }
body.mobilon {left:80%;}

header {margin-top:0px; float:none; width:100%; height:50px; position:static;  }
header .mobilnav {width:100%; left:0%; height:50px; position:fixed; top:0px;  z-index:99099099099099090909090909; background:#486a7b url(data/bilder/mobil/mobilnav.png) top left no-repeat; cursor:pointer; overflow: hidden;  -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;   }
header .mobilnav.mobilon {/*left:80%;*/}
header a#logo {width:100%;}
header #logo img {height:30px; width:Auto; margin:10px auto 0; display:block;}

ul#nav {background:#041219; margin:0px; padding:0px; border:none; position:absolute; top:0px; bottom:0px; left:-80%; right:100%; width:80%;     -moz-box-sizing: border-box; box-sizing: border-box;

-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out; }

ul#nav li {float:none; margin:10% 0 0 20%; position:relative;}
ul#nav li:first-child {margin-top:50%;}


article {width:90%; padding:0 5% 10%; margin-top:40px;}
h1 {font-size:42px;}

ul.overview {width:100%;}
ul.overview li {border:none; width:50%; height:50%; margin:0px; padding:0px;}
ul.overview li a {width:100%; height:100%; margin:0px; padding:0px;}
ul.overview li .thumbnail {border:none; width:100%; height:100%; margin:0px; padding:0px;}
ul.overview li .thumbnail img {width:150%; height:auto;}

ul.overview li .thumbname {display:none;}

/*

ul.overview {width:100%;}
ul.overview li {border:none; width:100%; height:100px; margin:10px; padding:0px; background:#8daabf;}
ul.overview li a {width:100%; height:100%; margin:0px; padding:0px;}
ul.overview li .thumbnail {border:none; width:100%; height:100%; margin:0px; padding:0px;}
ul.overview li .thumbnail img {top:50%; position:relative;}

ul.overview li .thumbname {font-size:110px; text-align:center; width:100%; position:relative; top:-82px; color:#06202d; font-family: 'alex_brushregular';}

*/


#flasche {float:none; margin: 0 auto;}
#postkarte {width:100%; background:none;}
#postkarte img {width:100%; height:auto;}

.mobiltoggle {width:50px; height:50px; overflow:hidden; background:url(data/bilder/mobil/mobilnav.png) top left no-repeat; cursor:pointer; display:block;}

form textarea, form input.large, form input.medium, form input.small {width:100%;}
form input[type=submit] {margin-right:0px}


.buttonbottom span {float:left;}
span#number {float:none;}

.buttontop a img {width:40px; height:40px;}
.buttontop a span {left:150px;}

}



/* Landscape 
@media screen and (orientation:landscape) and (max-width: 700px) {
ul#nav li:first-child {margin-top:10%;}
}
*/