a.menu-link {
  float: right;
  display: block;
  padding: 1em;
}

nav[role=navigation] {
  clear: both;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.js nav[role=navigation] {
  overflow: hidden;
  max-height: 0;
}

nav[role=navigation].active {
  max-height: 25em;
}

nav[role=navigation] ul {
  margin: 0;
  padding: 0;
}

nav[role=navigation] li a {
  padding: 0.8em;
}

@media screen and (min-width: 48.25em) {
  a.menu-link {
    display: none;
  }

  .js nav[role=navigation] {
    max-height: none;
  }

  nav[role=navigation] ul {
    margin: 0 0 0 -0.25em;
    border: 0;
  }

  nav[role=navigation]  li {
    display: inline-block;
    margin: 0 0.25em;
  }

  nav[role=navigation] li a {
    display: inline-block;
    border: 0;
  }
}