/* Responsive Navigation styles begin here */

nav > input,
.nav-button {
  display: none; /* hidden on large screens */
}

/* small screens styles */
@media (max-width: 767px) {
 .nav-inner {
     z-index: 10;
   position: absolute;
   width: 70vw;  
   -webkit-transform: translateX(-100%) translateZ(0);  
           transform: translateX(-100%) translateZ(0);
   -webkit-transition: -webkit-transform .2s;
   transition: -webkit-transform .2s;
   transition: transform .2s;
   transition: transform .2s, -webkit-transform .2s;
   will-change: transform;
  }
   .nav-inner{
    margin-top: 0;
    background-color: #FFF;
   }
  /* here's goes the slide effect */
  input:checked ~ .nav-inner {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  /* Button deco */
  .nav-button {
    display: block;
    position: absolute;
    top: 1rem; left: 1rem;
    z-index: 1;
    height: 2.5rem; width: 2.5rem;
    background-color: transparent;
    background-image: -webkit-gradient(linear, left top, right top, from(#333), to(#333)),
      -webkit-gradient(linear, left top, right top, from(#333), to(#333)),
      -webkit-gradient(linear, left top, right top, from(#333), to(#333));
    background-image: linear-gradient(to right, #333, #333),
      linear-gradient(to right, #333, #333),
      linear-gradient(to right, #333, #333);
    background-position: center top, center, center bottom;
    background-repeat: no-repeat;
    background-size: 2.5rem .5rem;
    padding: 0;
    outline: 0;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
}

nav a {
  display: block;
  padding: .7em;
  margin-bottom: 2px;
  text-decoration: none;
}