#header {
  text-align: center;
  color: white;
  background-color: black;
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
}

#menu-btn {
  cursor: pointer;
}

.menu-btn-animation {
  opacity: 0.0;

  /* This calls the unhideMenuButton followed by the hiliteMenuButton animation. */
  /* @keyframes duration | timing-function | delay | iteration-count | name      */
  animation: 6s ease 2s 1 unhideMenuButton,
             8s ease 4s infinite hiliteMenuButton;
  /* Element retains style values from last keyframe when animation ends */
  animation-fill-mode: forwards;
}

.menu-styles {
  position: fixed;
  left: 0;

  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in;

  color: white;
  background-color: black;
}

.menu-styles ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  color: white;
  display: block;
  text-decoration: none;
}

.menu-styles li:hover {
  background: gray;
}

@keyframes unhideMenuButton {
  0%   { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@keyframes hiliteMenuButton {
  0%   { opacity: 1.00; }
  20%  { opacity: 0.20; }
  40%  { opacity: 1.00; }
  100% { opacity: 1.00; }
}

/* Mobile Styles */
@media only screen and (max-width: 460px) { /* 414pt = Width of iPhone 6+, 7+, 8+, XR, Xs Max */
  #header {
    top: 20px;
    height: 24pt;
    font-size: 20pt;
  }
  #menu-btn {
    /*top: 30px;*/
    left: 16px;
    height: 30px;
  }
  .menu-styles {
    top: 67px;
    font-size: 16pt;
  }
  ul {
    width: 138px;
  }
  li a {
    padding: 8px 18px;
  }
  .dropdown {
    height: 80px;
  }
}

/* Tablet Styles */
@media only screen and (min-width: 461px) and (max-width: 800px) {
  #header {
    top: 25px;
    height: 34pt;
    font-size: 28pt;
  }
  #menu-btn {
    /*top: 40px;*/
    left: 22px;
    height: 30px;
  }
  .menu-styles {
    top: 85px;
    font-size: 20pt;
  }
  ul {
    width: 176px;
  }
  li a {
    padding: 10px 26px;
  }
  .dropdown {
    height: 102px;
  }
}

/* Desktop Styles */
@media only screen and (min-width: 801px) {
  #header {
    top: 30px;
    height: 44pt;
    font-size: 36pt;
  }
  #menu-btn {
    /*top: 48px;*/
    left: 28px;
    height: 40px;
  }
  .menu-styles {
    top: 104px;
    font-size: 24pt;
  }
  ul {
    width: 216px;
  }
  li a {
    padding: 12px 34px;
  }
  .dropdown {
    height: 122px;
  }
}