/*
compatibility:
ie gte 7 and modern browsers
add <meta name="viewport" content="width=device-width"> for mobile

usage examples:
<div class="navicon"><a href="#">Menu</a></div>
<button class="navicon"><i>Menu</i></button>
*/
button.navicon::-moz-focus-inner {
  border: 0;
  padding: 0;
}
button.navicon {
  overflow: visible;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.navicon {
  background-color: transparent;
  border: 0;
  display: block;
  font-size: 100%;
  position: relative;
}
.navicon,
.navicon > :first-child {
  line-height: 1;
  margin: 0;
  padding: 0;
}
.navicon > :first-child {
  background-color: transparent;
  border-color: red;
  border-bottom-style: solid;
  border-bottom-width: .125em;
  border-top-style: double;
  border-top-width: .375em;
  color: red;
  cursor: pointer;
  display: block;
  font-size: 3em;
  height: .125em;
  position: absolute;
  text-decoration: none;
  text-indent: -9999em;
  top: 0;
  width: .75em;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -moz-transition: all 0.5s ease;
  -webikit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.navicon > :first-child:focus,
.navicon > :first-child:hover {
  opacity: .5;
}