@media only screen and (min-width: 801px) {
  #hamburger {
    display: none;
  }
  .hamburgerdiv {
    display: none;
    position: relative; 
    height: 100%; 
    width: 40px; 
    float: left;
    margin-left: 4px;
  }
}

@media only screen and (max-width: 801px) {
  #hamburger {
      display: none;
      position: fixed;
      left: -9999px;
  }
  .hamburgerdiv {
    position: relative; 
    height: 100%; 
    width: 40px; 
    float: left;
    margin-left: 4px;
  }

  .line {
      display: block;
      height: 5px;
      width: 30px;
      background: white;
      border-radius: 0.2rem;
      cursor: pointer;
      position: absolute;
      top: 17px;
  }
  .top, .bottom {
      display: block;
      position: absolute;
      height: 5px;
      background: white;
      border-radius: 0.2rem;
      top: 6px;
  }
  .bottom {
      top: 29px;
  }
  .line {
      -webkit-transition: background 0s 0s;
      transition: background 0s 0s;
  }
  .top, .bottom {
      -webkit-transition-duration: 0.3s, 0.3s;
      transition-duration: 0.3s, 0.3s;
      -webkit-transition-property: top, -webkit-transform;
      transition-property: top, transform;
  }
  .middle {
      -webkit-transition-property: opacity, -webkit-transform;
      transition-property: opacity, transform;
  }
  #hamburgerdiv.active > .middle {
      opacity: 0;
  }
  #hamburgerdiv.active > .top {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      top: 15px;
  }
  #hamburgerdiv.active > .bottom {
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 15px;
  }
}