body {
		text-align: center;
	}
.animationfest {
	position: relative;
	width: 100%;
	height: auto;
	text-align: center;
	color: black;

}
.animation h1{
	margin: 0;
	padding: 0;
}
.animation{
position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: black;
}

   .fade-in1 {
  position: relative;
  animation: fadeInAnimation1 ease 60s  2;
  animation-fill-mode: forwards; /* Hält den Endzustand */
}
.fade-in2 {
  position: relative;
  animation: fadeInAnimation2 ease 60s 2;
}
.fade-in3 {
  position: relative;
  animation: fadeInAnimation3 ease 60s  2;
}
.fade-in4 {
  position: relative;
  animation: fadeInAnimation4 ease 60s  2;
}
.fade-in5 {
  position: relative;
  animation: fadeInAnimation5 ease 60s 2;
}
.fade-in6 {
  position: relative;
  animation: fadeInAnimation6 ease 60s  2;
}
.fade-in7 {
  position: relative;
  animation: fadeInAnimation7 ease 60s  2;
}
.fade-in8 {
  position: relative;
  animation: fadeInAnimation8 ease 60s  2;
}
.fade-in9 {
  position: relative;
  animation: fadeInAnimation9 ease 60s  2;
}
.fade-in10 {
  position: relative;
  animation: fadeInAnimation10 ease 60s  2;
}
.fade-in11 {
  position: relative;
  animation: fadeInAnimation11 ease 60s  2;
}
.fade-in12 {
  position: relative;
  animation: fadeInAnimation12 ease 60s  2;
}
.fade-in13 {
  position: relative;
  animation: fadeInAnimation13 ease 60s  2;
}
.fade-in14 {
  position: relative;
  animation: fadeInAnimation14 ease 60s  2;
}
.fade-in15 {
  position: relative;
  animation: fadeInAnimation15 ease 60s  2;
}

@keyframes fadeInAnimation1 {
  0% {
    left: 30px;
    opacity: 0;
  }
  8.5%{
	  left:  30px;
	  opacity: 0;
	  color:#474747;
  }
  10% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  18.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  20%{
  	left:0px;
  	opacity: 0;
  }
  23.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  25%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  28.5%{
  	left:0px;
  	opacity:1;
	color:#474747;
  }
  30%{
  	  left:0px;
	  opacity: 0;
  }
  43.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  45%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  53.5%{
  left:0px;
  	opacity:1;
  }
  55%{
  	opacity:0;
  }
  73.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  75%{
  	left:0px;
	opacity:1
  }
}
@keyframes fadeInAnimation2 {
  0% {
    left: -30px;
    opacity: 0;
  }
  3.5%{
	  left: -30px;
	  opacity: 0;
	  color:#474747;
  }
  5% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  18.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  20%{
  	opacity: 0;
  }
  33.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  35%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  38.5%{
  	left:0px;
  	opacity:1;
	color:#474747;
  }
  40%{
  	  left:0px;
	  opacity: 0;
  }
  53.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  55%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  68.5%{
  left:0px;
  	opacity:1;
  }
  70%{
  	opacity:0;
  }
  83.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  85%{
  	left:0px;
	opacity:1
  }
  88.5%{
  	left:0px;
	opacity:1;
  }
    90%{
  	left:0px;
	opacity:0;
  }

}
@keyframes fadeInAnimation3 {
  0% {
    left: 0px;
    opacity: 1;
	color:#474747;
  }
  8.5%{
	  left:  0px;
	  opacity: 1;
	  color:#474747;
  }
  10% {
    left: 0px;
    opacity: 0;
	color: #474747;
  }
  
  13.5% {
    left:30px;
    opacity: 0;
	color: #474747;
  }
  15%{
    left:0px;
  	opacity: 1;
	color:#474747;
  }
  18.5%{
  	left:0px;
	opacity:1;
	color:#474747;
  }
  20%{
  	left:0px;
	opacity:0;
	color:#474747;
  }
  58.5%{
  	left:-30px;
  	opacity:0;
	color:#474747;
  }
  60%{
  	  left:0px;
	  opacity: 1;
	  color:#474747;
  }
  68.5%{
  	left:0px;
	opacity:1;
	color:#474747;
  }
  70%{
  	left:0;
	opacity:0;
	color:#474747;
  }
  68.5%{
  left:0px;
  	opacity:1;
  }
  70%{
  	opacity:0;
  }
  88.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  90%{
  	left:0px;
	opacity:1;
	color:#474747;
  }
  100%{
  	left:0px;
	opacity:1;
	color:#474747;
  }
}
@keyframes fadeInAnimation4 {
  0% {
    left: 0px;
    opacity: 1;
	color:#474747;
  }
  13.5%{
	  left:  0px;
	  opacity: 1;
	  color:#474747;
  }
  15% {
    left: 0px;
    opacity: 0;
	color: #474747;
  }
  
  33.5% {
    left:30px;
    opacity: 0;
	color: #474747;
  }
  35%{
    left:0px;
  	opacity: 1;
	color:#474747;
  }
  43.5%{
  	left:0px;
	opacity:1;
	color:#474747;
  }
  45%{
  	left:0px;
	opacity:0;
	color:#474747;
  }
  68.5%{
  	left:-30px;
  	opacity:0;
	color:#474747;
  }
  70%{
  	  left:0px;
	  opacity: 1;
	  color:#474747;
  }
  68.5%{
  	left:0px;
	opacity:1;
	color:#474747;
  }
  70%{
  	left:0;
	opacity:0;
	color:#474747;
  }
  83.5%{
  left:0px;
  	opacity:1;
  }
  85%{
  	opacity:0;
  }
  98.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  100%{
  	left:0px;
	opacity:1;
	color:#474747;
  }
}
@keyframes fadeInAnimation5 {
  0% {
    left: 0px;
    opacity: 0;
	color:#474747;
  }
  23.5%{
	  left:  30px;
	  opacity: 0;
	  color:#474747;
  }
  25% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  28.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  30%{
    left:0px;
  	opacity: 0;
	color:#474747;
  }
  48.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  50%{
  	left:0px;
	opacity:1;
	color:#474747;
  }
  58.5%{
  	left:0px;
  	opacity:1;
	color:#474747;
  }
  60%{
  	  left:0px;
	  opacity: 0;
	  color:#474747;
  }
  83.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  85%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  88.5%{
  left:0px;
  	opacity:1;
  }
  90%{
  left:0;
  	opacity:0;
  }

}
@keyframes fadeInAnimation6 {
  0% {
    left: 30px;
    opacity: 0;
  }
  8.5%{
	  left:  30px;
	  opacity: 0;
	  color:#474747;
  }
  10% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  23.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  25%{
  	opacity: 0;
  }
  38.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  40%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  48.5%{
  	left:0px;
  	opacity:1;
	color:#474747;
  }
  50%{
  	  left:0px;
	  opacity: 0;
  }
  63.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  65%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  78.5%{
  left:0px;
  	opacity:1;
  }
  80%{
  	opacity:0;
  }
 
}
@keyframes fadeInAnimation7 {
  0% {
    left: -30px;
    opacity: 0;
  }
  43.5%{
	  left:  -30px;
	  opacity: 0;
	  color:#474747;
  }
  45% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  63.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  65%{
  	opacity: 0;
  }
  93.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  95%{
  	left:0;
	opacity:1;
	color:#474747;
  }
 
}
@keyframes fadeInAnimation8 {
  0% {
    left: 0px;
    opacity: 1;
	color:#474747;
  }
  8.5%{
	  left:  0px;
	  opacity: 1;
	  color:#474747;
  }
  10% {
    left: 0px;
    opacity: 0;
	color: #474747;
  }
  33.5%{
	  left:  30px;
	  opacity: 0;
	  color:#474747;
  }
  35% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  38.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  40%{
  	opacity: 0;
  }
  53.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  55%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  58.5%{
  	left:0px;
  	opacity:1;
	color:#474747;
  }
  60%{
  	  left:0px;
	  opacity: 0;
  }
  73.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  75%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  78.5%{
  left:0px;
  	opacity:1;
  }
  80%{
  	opacity:0;
  }
  98.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  100%{
  	left:0px;
	opacity:1
  }
 
}
@keyframes fadeInAnimation9 {
  0% {
    left: -30px;
    opacity: 0;
  }
  13.5%{
	  left:  -30px;
	  opacity: 0;
	  color:#474747;
  }
  15% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  28.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  30%{
  	opacity: 0;
  }
  78.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  80%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  93.5%{
  	left:0px;
  	opacity:1;
	color:#474747;
  }
  95%{
  	  left:0px;
	  opacity: 0;
  }
}
@keyframes fadeInAnimation10 {
  0% {
    left: 30px;
    opacity: 0;
  }
  23.5%{
	  left:  30px;
	  opacity: 0;
	  color:#474747;
  }
  25% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  33.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  35%{
  	opacity: 0;
  }
  43.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  45%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  48.5%{
  	left:0px;
  	opacity:1;
	color:#474747;
  }
  50%{
  	  left:0px;
	  opacity: 0;
  }
  58.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  60%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  63.5%{
  left:0px;
  	opacity:1;
  }
  65%{
  	opacity:0;
  }
   88.5%{
  left:-30px;
  	opacity:0;
	color:#474747;
  }
  90%{
  left:0;
  	opacity:1;
	color:#474747;
  }
  98.5%{
  left:0px;
  	opacity:1;
  }
  100%{
  	opacity:0;
  }

}
@keyframes fadeInAnimation11 {
  0% {
    left: -30px;
    opacity: 0;
  }
  18.5%{
	  left:  -30px;
	  opacity: 0;
	  color:#474747;
  }
  20% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  38.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  40%{
  	opacity: 0;
  }
  68.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  70%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  73.5%{
  	left:0px;
  	opacity:1;
	color:#474747;
  }
  75%{
  	  left:0px;
	  opacity: 0;
  } 
}
@keyframes fadeInAnimation12 {
  0% {
    left: 30px;
    opacity: 0;
  }
  3.5%{
	  left:  30px;
	  opacity: 0;
	  color:#474747;
  }
  5% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  13.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  15%{
  	opacity: 0;
  }
  28.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  30%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  33.5%{
  	left:0px;
  	opacity:1;
	color:#474747;
  }
  35%{
  	  left:0px;
	  opacity: 0;
  }
  48.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  50%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  53.5%{
  left:0px;
  	opacity:1;
  }
  55%{
  	opacity:0;
  }
   78.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  80%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  93.5%{
  left:0px;
  	opacity:1;
  }
  95%{
  	opacity:0;
  }

}

@keyframes fadeInAnimation13 {
	0% {
		left:-30px;
		opacity:0;
		color:#474747;
		}
  18.5%{
	  left: -30px;
	  opacity: 0;
	  color:#474747;
  }
  20% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  23.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  25%{
  	opacity: 0;
  }
  38.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  40%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  58.5%{
  	left:0px;
  	opacity:1;
	color:#474747;
  }
  60%{
  	  left:0px;
	  opacity: 0;
  }
  68.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  70%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  73.5%{
  left:0px;
  	opacity:1;
  }
  75%{
  	opacity:0;
  }
   93.5% {
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  95% {
  	left:0;
	opacity:1;
	color:#474747;
  }
  98.5%{
  left:0px;
  	opacity:1;
  }
  100%{
  	opacity:0;
  }

}
@keyframes fadeInAnimation14 {
	0%{
	left:0px;
	opacity:1;
	color:#474747;
	}
	3.5%{
		left:0px;
		opacity:1;
		color:#474747;
	}
	5%{
		opacity:0;
	}
  13.5%{
	  left:  -30px;
	  opacity: 0;
	  color:#474747;
  }
  15% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  23.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  25%{
  	opacity: 0;
  }
  38.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  40%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  43.5%{
  	left:0px;
  	opacity:1;
	color:#474747;
  }
  45%{
  	  left:0px;
	  opacity: 0;
  }
  63.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  65%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  78.5%{
  left:0px;
  	opacity:1;
  }
  80%{
  	opacity:0;
  }
   98.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  100%{
  	left:0;
	opacity:1;
	color:#474747;
  }

}
@keyframes fadeInAnimation15 {
  0% {
    left: -30px;
    opacity: 0;
  }
  28.5%{
	  left:  -30px;
	  opacity: 0;
	  color:#474747;
  }
  30% {
    left: 0px;
    opacity: 1;
	color: #474747;
  }
  
  38.5% {
    left:0px;
    opacity: 1;
	color: #474747;
  }
  40%{
  	opacity: 0;
  }
  48.5%{
  	left:-30px;
	opacity:0;
	color:#474747;
  }
  50%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  53.5%{
  	left:0px;
  	opacity:1;
	color:#474747;
  }
  55%{
  	  left:0px;
	  opacity: 0;
  }
  88.5%{
  	left:30px;
	opacity:0;
	color:#474747;
  }
  90%{
  	left:0;
	opacity:1;
	color:#474747;
  }
  98.5%{
  left:0px;
  	opacity:1;
  }
  100%{
  	opacity:0;
  }

}