/********** Navigation-Toggle **********/

/*Fullscreen Fläche*/

.overlay-navigation {
  background-color: hsla(0, 0%, 100%, 0.2);
}

/*Title*/

nav li a {
  color: #ffffff;
}

nav li a:hover {
  color: #ff0044;
}

/*Line*/

nav li a:before {
  background-color: #ff0044;
}

/*Subtitle*/

nav li a:after {
  color: #f5ff00;
}

/*Background*/

nav li:nth-of-type(1) {
  background-color: #222222;
}

nav li:nth-of-type(2) {
  background-color: #656565;
}

nav li:nth-of-type(3) {
  background-color: #555555;
}

nav li:nth-of-type(4) {
  background-color: #444444;
}

nav li:nth-of-type(5) {
  background-color: #333333;
}

/*Burger King*/

.open-overlay span {
  background-color: #ff0044;
}

.open-overlay:hover span {
  background-color: #f5ff00;
}

/*Keyframes*/

@-webkit-keyframes animate-top-bar {
  0% {
    background-color: #ffffff;
  }
  
  50% {
    transform: translateY(9px);
  }
  
  80% {
    transform: translateY(5px);
    background-color: #ffffff;
  }
  
  100% {
    transform: translateY(0);
    background-color: #ffffff;
  }
  
}

@keyframes animate-top-bar {
  0% {
    background-color: #ffffff;
  }
  
  50% {
    transform: translateY(9px);
  }
  
  80% {
    transform: translateY(5px);
    background-color: #ffffff;
  }
  
  100% {
    transform: translateY(0);
    background-color: #ffffff;
  }
  
}

@-webkit-keyframes animate-bottom-bar {
  0% {
    background-color: #ffffff;
  }
  
  50% {
    transform: translateY(-9px);
  }
  
  80% {
    transform: translateY(-5px);
    background-color: #ffffff;
  }
  
  100% {
    transform: translateY(0);
    background-color: #ffffff;
  }
  
}

@keyframes animate-bottom-bar {
  0% {
    background-color: #ffffff;
  }
  
  50% {
    transform: translateY(-9px);
  }
  
  80% {
    transform: translateY(-5px);
    background-color: #ffffff;
  }
  
  100% {
    transform: translateY(0);
    background-color: #ffffff;
  }
  
}

@-webkit-keyframes animate-middle-bar {
  0% {
    background-color: #ffffff;
  }
  
  80% {
    background-color: #ffffff;
  }
  
  100% {
    background-color: #ffffff;
  }
  
}

@keyframes animate-middle-bar {
  0% {
    background-color: #ffffff;
  }
  
  80% {
    background-color: #ffffff;
  }
  
  100% {
    background-color: #ffffff;
  }
  
}

@-webkit-keyframes animate-out-top-bar {
  0% {
    background-color: #ffffff;
  }
  
  50% {
    transform: translateY(9px);
  }
  
  80% {
    transform: translateY(5px);
    background-color: #ffffff;
  }
  
  100% {
    transform: translateY(0);
    background-color: #ff0044;
  }
  
}

@keyframes animate-out-top-bar {
  0% {
    background-color: #ffffff;
  }
  
  50% {
    transform: translateY(9px);
  }
  
  80% {
    transform: translateY(5px);
    background-color: #ffffff;
  }
  
  100% {
    transform: translateY(0);
    background-color: #ff0044;
  }
  
}

@-webkit-keyframes animate-out-bottom-bar {
  0% {
    background-color: #ffffff;
  }
  
  50% {
    transform: translateY(-9px);
  }
  
  80% {
    transform: translateY(-5px);
    background-color: #ffffff;
  }
  
  100% {
    transform: translateY(0);
    background-color: #ff0044;
  }
  
}

@keyframes animate-out-bottom-bar {
  0% {
    background-color: #ffffff;
  }
  
  50% {
    transform: translateY(-9px);
  }
  
  80% {
    transform: translateY(-5px);
    background-color: #ffffff;
  }
  
  100% {
    transform: translateY(0);
    background-color: #ff0044;
  }
  
}

@-webkit-keyframes animate-out-middle-bar {
  0% {
    background-color: #ffffff;
  }
  
  80% {
    background-color: #ffffff;
  }
  
  100% {
    background-color: #ff0044;
  }
  
}

@keyframes animate-out-middle-bar {
  0% {
    background-color: #ffffff;
  }
  
  80% {
    background-color: #ffffff;
  }
  
  100% {
    background-color: #ff0044;
  }
  
}

/**************************************** Mediascreen ****************************************/

@media screen and (max-width: 1124px) {

}