body, html {
  height: 100%;
  margin: 0;
  background-color: black;
}

#background-img { 
  /* The image used */
  background-image: url("images/john_hancock_center.jpg");

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.background-img-animation {
  /* This calls the slideUpFromBottom animation defined below */
  /* animation: 2s linear 0s 1 slideUpFromBottom; */
  animation-name: slideUpFromBottom;
  animation-duration: 1s;
  /*animation-duration: 850ms; !* 0.85 seconds *!*/
  /*animation-duration: 750ms; !* 0.75 seconds *!*/
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count: 1;
}

#header {
  position: fixed;
}

#menu-btn {
  position: fixed;
}

.header-animation {
  opacity: 0.0;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  /* This calls the slideInFromRight animation which is defined below       */
  /* @keyframes duration | timing-function | delay | iteration-count | name */
  animation: 1250ms ease 2250ms 1 slideInFromRight;
  /* The delay (2250ms) should be 0.25 seconds after the completion of the  */
  /* background image sliding up from the bottom...
  /* Element retains style values from last keyframe when animation ends    */
  animation-fill-mode: forwards;
}

@keyframes slideUpFromBottom {
  0%   { transform: translateY(+100%); }
  100% { transform: translateY(0); }
}



@keyframes slideInFromRightWithoutBounce {
  0%   { transform: translateX(+100%); opacity: 1.00; }
  100% { transform: translateX(0); opacity: 1.00; }
}

@keyframes slideInFromRightOneBounce {
  0%   { transform: translateX(+100%); opacity: 1.00; }
  80%  { transform: translateX(-5%); opacity: 1.00; }
  90%  { transform: translateX(+2%); opacity: 1.00; }
  100% { transform: translateX(0); opacity: 1.00; }
}

@keyframes slideInFromRight {
  /* 0%   { transform: translateX(+100%); opacity: 1.00; }*/
  /* 20%  { transform: translateX(-6%); opacity: 1.00; }*/
  /* 40%  { transform: translateX(+4%); opacity: 1.00; }*/
  /* 60%  { transform: translateX(-3%); opacity: 1.00; }*/
  /* 80%  { transform: translateX(+2%); opacity: 1.00; }*/
  /* 100% { transform: translateX(0); opacity: 1.00; }*/
  0%   { transform: translateX(+100%); opacity: 1.00; }
  10%  { transform: translateX(-6%); opacity: 1.00; }
  25%  { transform: translateX(+4%); opacity: 1.00; }
  45%  { transform: translateX(-3%); opacity: 1.00; }
  70%  { transform: translateX(+2%); opacity: 1.00; }
  100% { transform: translateX(0); opacity: 1.00; }
}

/* Mobile Styles */
@media only screen and (max-width: 460px) { /* 414pt = Width of iPhone 6+, 7+, 8+, XR, Xs Max */
  #menu-btn {
    top: 30px;
  }
}

/* Tablet Styles */
@media only screen and (min-width: 461px) and (max-width: 800px) {
  #menu-btn {
    top: 40px;
  }
}

/* Desktop Styles */
@media only screen and (min-width: 801px) {
  #menu-btn {
    top: 48px;
  }
}