#hamburger {
    width: 50px;
    height: 40px;
    position: relative;
    float: right;
    margin: 6px 0 0 40px;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
}
#hamburger span {
    display: block;
    position: absolute;
    height: 6px;
    width: 100%;
    background: var(--grey);
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}
#hamburger span:nth-child(1) {
    top: 3px;
}
#hamburger span:nth-child(2),
#hamburger span:nth-child(3) {
    top: 17px;
}
#hamburger span:nth-child(4) {
    top: 31px;
}
#hamburger.open span:nth-child(1) {
    top: 17px;
    width: 0%;
    left: 50%;
}
#hamburger.open span:nth-child(2) {
    transform: rotate(45deg);
}
#hamburger.open span:nth-child(3) {
    transform: rotate(-45deg);
}
#hamburger.open span:nth-child(4) {
    top: 17px;
    width: 0%;
    left: 50% ;
}

nav {
  top: 116px;
  right: 0;
  background-color: var(--grey);
  position: fixed;
  width: 600px;
  transition: max-height .5s ease-out;
  overflow: hidden;
  z-index: 999;
}
  nav > ul {
    display: none;
    margin: 0;
    padding: 20px 0;
    width: 100%;
    float: left;
  }
    nav > ul > li {
      float: left;
      margin: 0;
      padding: 0 5%;
      width: 90%;
      font-size: 14pt;
      text-align: right;
      line-height: 46px;
      list-style-type: none;
      transition: all .4s linear;
    }
    nav > ul > li:hover {
      background: #fff;
    }

    nav > ul > li > a {
      display: block;
      color: var(--white);
      text-decoration: none;
      transition: all .4s linear;
    }
    nav > ul > li:hover > a {
      color: var(--black);
    }

@media (max-width: 900px) {
  nav {
    width: 330px;
  }
}