.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.header .nav-links {
  clear:both;
  max-height:0;
  transition:max-height .2s ease-out;
}
.header .menu-icon {
  /*  outline: 1px solid red; /* DELETE THIS LINE LATER */
  padding: 10px 20px;
  position: relative;
  float:left;
  cursor: pointer;
}
.header .menu-icon .nav-icon {
  background:#333;
  display:block;
  height:2px;
  width:18px;
  position: relative;
  transition:background .2s ease-out;
}
.header .menu-icon .nav-icon:before {
  background:#333;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition:all .2s ease-out;
  top: 5px;
}
.header .menu-icon .nav-icon:after {
  background:#333;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition:all .2s ease-out;
  top: -5px;
}
.header .menu-btn {
  display: none;
}
.header .menu-btn:checked ~ .nav-links {
  max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon {
  background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top:0;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top:0;
}

@media (min-width: 800px){
  .header li {
    float: left;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
  .header ul {
    overflow: visible;
  }
  .header .nav-links {
    max-height:100px;
  }
}