@charset "ISO-8859-1";body{background-color:#f7efeb;padding:1.25em;}
#nav{width:60em;font-family:'Open Sans', sans-serif;font-weight:400;position:absolute;top:25%;left:50%;margin-left:-30em;}
#nav > a{display:none;}
#nav li{position:relative;}
#nav li a{color:#fff;display:block;}
#nav li a:active{background-color:#c00 !important;}
#nav span:after{width:0;height:0;border:0.313em solid transparent;border-bottom:none;border-top-color:#efa585;content:'';vertical-align:middle;display:inline-block;position:relative;right:-0.313em;}
#nav > ul{height:3.75em;background-color:#e15a1f;}
#nav > ul > li{width:25%;height:100%;float:left;}
#nav > ul > li > a{height:100%;font-size:1.5em;line-height:2.5em;text-align:center;}
#nav > ul > li:not(:last-child) > a{border-right:1px solid #cc470d;}
#nav > ul > li:hover > a,
#nav > ul:not(:hover) > li.active > a{background-color:#cc470d;}
#nav li ul{background-color:#cc470d;display:none;position:absolute;top:100%;}
#nav li:hover ul{display:block;left:0;right:0;}
#nav li:not(:first-child):hover ul{left:-1px;}
#nav li ul a{font-size:1.25em;border-top:1px solid #e15a1f;padding:0.75em;}
#nav li ul li a:hover,
#nav li ul:not(:hover) li.active a{background-color:#e15a1f;}
@media only screen and (max-width:62.5em){#nav{width:100%;position:static;margin:0;}
}
@media only screen and (max-width:40em){html{font-size:75%;}
#nav{position:relative;top:auto;left:auto;}
#nav > a{width:3.125em;height:3.125em;text-align:left;text-indent:-9999px;background-color:#e15a1f;position:relative;}
#nav > a:before,
#nav > a:after{position:absolute;border:2px solid #fff;top:35%;left:25%;right:25%;content:'';}
#nav > a:after{top:60%;}
#nav:not(:target) > a:first-of-type,
#nav:target > a:last-of-type{display:block;}
#nav > ul{height:auto;display:none;position:absolute;left:0;right:0;}
#nav:target > ul{display:block;}
#nav > ul > li{width:100%;float:none;}
#nav > ul > li > a{height:auto;text-align:left;padding:0 0.833em;}
#nav > ul > li:not(:last-child) > a{border-right:none;border-bottom:1px solid #cc470d;}
#nav li ul{position:static;padding:1.25em;padding-top:0;}
b.orange{color:#FFBF00;font-size:20px;}
img.hintergrund{display:block;z-index:-20;min-height:100%;min-width:1024px;width:100%;height:auto;position:fixed;top:0;left:0;}
div.infobox{float:left;margin-bottom:30px;}
div.bottom{clear:both;font-size:15px;}
a.bottomnavi{font-size:15px;}
}
</style>
</head>
<body>
<nav id="nav" role="navigation">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul class="clearfix">
<li><a href="?home">Home</a></li>
<li>
<a href="?blog" aria-haspopup="true"><span>Blog</span></a>
<ul>
<li><a href="?design">Design</a></li>
<li><a href="?html">HTML</a></li>
<li><a href="?css">CSS</a></li>
<li><a href="?javascript">JavaScript</a></li>
</ul>
</li>
<li>
<a href="?work" aria-haspopup="true"><span>Work</span></a>
<ul>
<li><a href="?webdesign">Web Design</a></li>
<li><a href="?typography">Typography</a></li>
<li><a href="?frontend">Front-End</a></li>
</ul>
</li>
<li><a href="?about">About</a></li>
</ul>
</nav>
<script src="../jquery.min.js"></script>
<script src="doubletaptogo.js"></script>
<script>
$(function(){$('#nav li:has(ul)').doubleTapToGo();});figure{display:block;margin-top:1em;margin-bottom:1em;margin-left:4px;margin-right:4px;}
div.infobox{width:152px;float:left;margin-bottom:30px;}
div.infoboxright{width:152px;float:right;margin-bottom:30px;}
h1.infobox{background-color:#FFBF00;color:#FFFFFF;text-align:center;font-size:15px;}
ul.infobox{color:#FFBF00;}
div.infoboxblack{color:#000000;}

.google-maps {
        position: relative;
        padding-bottom: 60%;
        height: 0;
        overflow: hidden;
      }
      .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
      }