header .menu-btn {
  width: 38px;
  float: right;
  margin-right: -1rem;
  cursor: pointer;
}


main h1::before {
  content: '';
  display: block;
}

nav {
  position: absolute;
  background:  black /**/ ;
  padding: 1em;
  width: calc(100%);
  display: none;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: right;
          transform-origin: right;
}

nav .close-button {
  width: 12px;
  margin: 1em 6em 0 0;
  float: right;
  cursor: pointer;
  opacity: 0;
}

nav ul {
  list-style-type: none;
  margin: 0 auto 0 auto;
  padding: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (auto)[4];
      grid-template-columns: repeat(4, auto);
  width: 90%;
}

nav ul a {
  color: #818181;
  font-weight: normal;
  font-size: 1.2em;
}

.active {
  color: white;
}

nav ul span {
  color: gray;
  display: block;
  font-size: .75em;
  margin-top: 20px;
}

nav ul li {
  opacity: 0;
}

.nav-link {
  padding: .5rem 1rem;
}

.show-menu {
  display: block;
  -webkit-animation: slide-menu 1s ease-in forwards;
          animation: slide-menu 1s ease-in forwards;
}

.show-menu .close-button {
  -webkit-animation: show-x 1s 1s forwards;
          animation: show-x 1s 1s forwards;
}

.show-menu li:nth-of-type(1) {
  -webkit-animation: menu-item-anim .6s forwards 1s ease-in-out;
          animation: menu-item-anim .6s forwards 1s ease-in-out;
}

.show-menu li:nth-of-type(2) {
  -webkit-animation: menu-item-anim .6s forwards 1.2s ease-in-out;
          animation: menu-item-anim .6s forwards 1.2s ease-in-out;
}

.show-menu li:nth-of-type(3) {
  -webkit-animation: menu-item-anim .6s forwards 1.6s ease-in-out;
          animation: menu-item-anim .6s forwards 1.6s ease-in-out;
}

.show-menu li:nth-of-type(4) {
  -webkit-animation: menu-item-anim .6s forwards 1.8s ease-in-out;
          animation: menu-item-anim .6s forwards 1.8s ease-in-out;
}

@-webkit-keyframes slide-menu {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@keyframes slide-menu {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@-webkit-keyframes show-x {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes show-x {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes menu-item-anim {
  from {
    -webkit-transform: translateY(70%);
            transform: translateY(70%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes menu-item-anim {
  from {
    -webkit-transform: translateY(70%);
            transform: translateY(70%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}



@media (max-width: 48em) {

nav ul a {
  font-size: .8em;
}

header .menu-btn {
  width: 33px;
  margin-right: -1rem;
  margin-top: .1rem;
}

nav .close-button {
  width: 10px;
  margin: .8em 0em 0 0;
  float: left;
}

.nav-link {
  padding: .5rem .5rem;
}

}