#fader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  pointer-events: none;
  background: #fdb813;
  animation-duration: 400ms;
  animation-timing-function: ease-in-out;
}

#fader:before {
  content: 'fade'
}

@keyframes fade-out {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes fade-in  {
  0% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
}

#fader.fade-out {
  animation-name: fade-out;
  animation-fill-mode: forwards;
}

#fader.fade-in {
  opacity: 1;
  animation-name: fade-in;
}

@media (min-width: 992px) {
    .navbar {
        z-index: 1000000;
    }
}