body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
}

a:active,
a:hover {
  outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* ------------------------------------------
  Responsive
--------------------------------------------- */


.logo {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-decoration: none;
  font-weight: bold;
  margin-left: 0px;
  padding: 30px 20px;
  color: black;
  float: left;
  background-color: white;
  font: bold 14px/14px "Biter", helvetica, arial, san-serif;

}

@media screen and (min-width: 40em) {

.logo {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-decoration: none;
  font-weight: bold;
  padding: 5px 40px 5px 0;
  color: black;
  float: left;
  background-color: white;
  font: bold 18px/18px "Biter", helvetica, arial, san-serif;
}

}


/* ------------------------------------------
  MASK
--------------------------------------------- */

.mask {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms;
  background: rgba(0,0,0, .5);
  visibility: hidden;
  position: fixed;
  opacity: 0;
  z-index: 2;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.android .mask {
  -webkit-transition: none;
  transition: none;
}

.js-nav-active .mask {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width: 40em) {
  .mask {
    display: none !important;
    opacity: 0 !important;
  }
}