<input type="checkbox" id="nav-toggle">
<label id="nav-toggle-label" for="nav-toggle">
  <div id="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div id="cross">
    <span></span>
    <span></span>
  </div>
</label>
<nav role="navigation" id="main">
			<div id="nav-container"> <div id="nav-wrap"><a href="#" class="first"><i class="fa fa-user"></i>bio</a>
<a href="#"><i class="fa fa-code"></i>work</a>
<a href="#"><i class="fa fa-file-text-o"></i>resumé</a>
<a href="#" class="last active"><i class="fa fa-coffee"></i>blog</a>
</div></div>
		</nav>

*, *:before, *:after { -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.25s ease-in-out; -ms-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; -webkit-text-size-adjust: none }
html { height: 100% }
body { height: 100%; width: 100%; padding: 0; margin: 0; overflow-x: hidden; overflow-y: visible }
#nav-toggle { position: fixed; top: 0; left: 0; opacity: 0 }
#nav-toggle:checked ~ nav#main #nav-container #nav-wrap { top: 0px; box-shadow: 0 2px 4px rgba(0,0,0,0.3) }
#nav-toggle:checked+#nav-toggle-label, #nav-toggle:checked+#nav-toggle-label.slide-out { background: transparent; right: 0 }
#nav-toggle:checked+#nav-toggle-label #hamburger span, #nav-toggle:checked+#nav-toggle-label.slide-out #hamburger span { width: 0% }
#nav-toggle:checked+#nav-toggle-label #hamburger span:nth-child(1), #nav-toggle:checked+#nav-toggle-label.slide-out #hamburger span:nth-child(1) { -webkit-transition-delay: 0s; -ms-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s }
#nav-toggle:checked+#nav-toggle-label #hamburger span:nth-child(2), #nav-toggle:checked+#nav-toggle-label.slide-out #hamburger span:nth-child(2) { -webkit-transition-delay: 0.125s; -ms-transition-delay: 0.125s; -moz-transition-delay: 0.125s; transition-delay: 0.125s }
#nav-toggle:checked+#nav-toggle-label #hamburger span:nth-child(3), #nav-toggle:checked+#nav-toggle-label.slide-out #hamburger span:nth-child(3) { -webkit-transition-delay: 0.25s; -ms-transition-delay: 0.25s; -moz-transition-delay: 0.25s; transition-delay: 0.25s }
#nav-toggle:checked+#nav-toggle-label #cross span:nth-child(1), #nav-toggle:checked+#nav-toggle-label.slide-out #cross span:nth-child(1) { height: 100%; -webkit-transition-delay: 0.625s; -ms-transition-delay: 0.625s; -moz-transition-delay: 0.625s; transition-delay: 0.625s }
#nav-toggle:checked+#nav-toggle-label #cross span:nth-child(2), #nav-toggle:checked+#nav-toggle-label.slide-out #cross span:nth-child(2) { width: 100%; -webkit-transition-delay: 0.375s; -ms-transition-delay: 0.375s; -moz-transition-delay: 0.375s; transition-delay: 0.375s }
#nav-toggle:checked+#nav-toggle-label ~ nav#main #nav-container a#logo.slide-out, #nav-toggle:checked+#nav-toggle-label.slide-out ~ nav#main #nav-container a#logo.slide-out { left: 25px }
#nav-toggle-label { height: 80px; width: 80; position: fixed; z-index: 7; right: 0; top: 0; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); cursor: pointer; -webkit-transition: 0.25s ease-in-out; -ms-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out }
#nav-toggle-label.slide-out { right: -75px }
#nav-toggle-label #cross { position: absolute; right: 28px; top: 20px; width: 40px; height: 40px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg) }
#nav-toggle-label #cross span { display: block; background: #9fdcff }
#nav-toggle-label #cross span:nth-child(1) { height: 0%; width: 2px; position: absolute; top: 0; left: 50%; margin-left: -1px; -webkit-transition-delay: 0s; -ms-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s }
#nav-toggle-label #cross span:nth-child(2) { width: 0%; height: 2px; position: absolute; left: 0; top: 50%; margin-top: -1px; -webkit-transition-delay: 0.25s; -ms-transition-delay: 0.25s; -moz-transition-delay: 0.25s; transition-delay: 0.25s }
#nav-toggle-label #hamburger { position: absolute; height: 28px; width: 40px; top: 28px; right: 28px }
#nav-toggle-label #hamburger span { display: block; width: 100%; height: 2px; position: relative; margin: 0 0 11px 0; background: #545454; }
#nav-toggle-label #hamburger span:nth-child(1) { -webkit-transition-delay: 0.5s; -ms-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition-delay: 0.5s }
#nav-toggle-label #hamburger span:nth-child(2) { -webkit-transition-delay: 0.625s; -ms-transition-delay: 0.625s; -moz-transition-delay: 0.625s; transition-delay: 0.625s }
#nav-toggle-label #hamburger span:nth-child(3) { -webkit-transition-delay: 0.75s; -ms-transition-delay: 0.75s; -moz-transition-delay: 0.75s; transition-delay: 0.75s }
nav { font-family: "adelle-sans", sans-serif; text-transform: lowercase }
nav#main { position: fixed; z-index: 6; top: 0; left: 0; width: 100%; font-size: 15px; line-height: 16px; text-align: center; height: 0 }
nav#main #nav-container { max-width: 100%; margin: 0 auto; position: relative; height: 0 }
nav#main #nav-container #nav-wrap {text-align: left; width: 100%; height: 80px; background: rgba(6,26,38,0.9); position: fixed; z-index: 0; left: 0; top: -80px; -webkit-transition: 0.25s ease-in-out; -ms-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out }
nav#main #nav-container #nav-wrap.open { top: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.3) }
nav#main #nav-container #nav-wrap a { display: inline-block; padding: 48px 25px 16px 25px; text-decoration: none; color: #93d8ff; position: relative; overflow: hidden }
nav#main #nav-container #nav-wrap a.active:before { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #93d8ff }
nav#main #nav-container #nav-wrap a.active:hover:before { background: #ffcf91 }
nav#main #nav-container #nav-wrap a i.fa { display: block; height: 28px; width: 28px; margin-left: -14px; text-align: center; line-height: 28px; position: absolute; top: 11px; left: 50%; font-size: 13px; background: #93d8ff; color: #061a26; -webkit-border-radius: 100%; -ms-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100% }
nav#main #nav-container #nav-wrap a:hover { color: #ffcf91 }
nav#main #nav-container #nav-wrap a:hover i.fa { background: #ffcf91 }