#Fenster{

	height:100%;
	width: 80%;
/*border: green 2px solid;*/
	overflow:hidden;
	float: right;
	
}


.element1 {
  height:100px;
  width:0px;
  top:100%;
  left:-50%;
  display:inline-block;
  text-align: center;
  color: white; 
  mix-blend-mode: difference;
  position: relative;
  font-size:90px;
  font-weight: bold;
  overflow:visible;
  animation-name:meine-animation1;
  animation-duration:15s;
  animation-iteration-count:infinite;
}

@keyframes meine-animation1 {
   0% {
    top:100%;
    left:-50%;
  }
   16% { 
    top:45%;
    left:20%;
  }
   33% {
    top:45%;
    left:20%;
  } 
   50% {
    top:45%;
    left:120%;	
  }  
    100% {
    top:45%;
    left:120%;	
  } 
}

.element2 {
  height:100px;
  width:0px;
  top:100%;
  left:-50%;
  display:inline-block;
  text-align: center;
  color: white; 
  mix-blend-mode: difference;
  position: relative;
  font-size:80px;
  font-weight: bold;
  overflow:visible;
  animation-delay: 5s;
  animation-name:meine-animation2;
  animation-duration:15s;
  animation-iteration-count:infinite;
}

@keyframes meine-animation2 {
   0% {
    top:100%;
    left:-50%;
  }
   16% { 
    top:45%;
    left:20%;
  }
   33% {
 
    top:45%;
    left:20%;
  } 
   50% {
    top:45%;
    left:120%;	
  }  
    100% {
    top:45%;
    left:120%;	
  }
}

.trn{
	color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0);
}

.element3 {
  height:100px;
  width:0px;
  top:100%;
  left:-50%;
  display:inline-block;
  text-align: left;
  color: white; 
  mix-blend-mode: difference;  
  position: relative;
  font-size:80px;
  font-weight: bold;
  overflow:visible;
  animation-delay: 10s;
  animation-name:meine-animation3;
  animation-duration:15s;
  animation-iteration-count:infinite;
}

@keyframes meine-animation3 {
   0% {
    top:100%;
    left:-50%;
  }
   16% { 
    top:45%;
    left:20%;
  }
   33% {
 
    top:45%;
    left:20%;
  } 
   50% {
    top:45%;
    left:120%;	
  }  
    100% {
    top:45%;
    left:120%;	
  }
}
@media only screen and (max-width: 2000px) 
{
	#Fenster
		{
			height:100%;
			width: 85%;
			overflow:hidden;
			float: right;
		}
	.element1 
		{
		  font-size:70px;
		}

	.element2 
		{
		  font-size:70px;
		}
		
	.element3 
		{
		  font-size:70px;
		}		
}
@media only screen and (max-width: 1600px) 
{
	#Fenster
		{
			height:100%;
			width: 90%;
			overflow:hidden;
			float: right;
		}
	.element1 
		{
		  font-size:60px;
		}

	.element2 
		{
		  font-size:60px;
		}
		
	.element3 
		{
		  font-size:60px;
		}		
}

@media only screen and (max-width: 1200px) 
{
	#Fenster
		{
			height:100%;
			width: 95%;
			overflow:hidden;
			float: right;
		}
	.element1 
		{
		  font-size:45px;
		}

	.element2 
		{
		  font-size:45px;
		}
		
	.element3 
		{
		  font-size:45px;
		}		
}

@media only screen and (max-width: 1000px) 
{
	#Fenster
		{
			height:100%;
			width: 91%;
			overflow:hidden;
			float: right;
		}
	.element1 
		{
		  font-size:40px;
		}

	.element2 
		{
		  font-size:40px;
		}
		
	.element3 
		{
		  font-size:40px;
		}		
}


@media only screen and (max-width: 800px) 
{
	#Fenster
		{
			height:100%;
			width: 110%;
			overflow:hidden;
			float: right;
		}
	.element1 
		{
		  font-size:30px;
		}

	.element2 
		{
		  font-size:30px;
		}
		
	.element3 
		{
		  font-size:30px;
		}		
}

@media only screen and (max-width: 600px) 
{
	#Fenster
		{
			height:100%;
			width: 120%;
			overflow:hidden;
			float: right;	
		}

	.element1 
		{
		  font-size:25px;
		}

	.element2 
		{
		  font-size:25px;
		}
		
	.element3 
		{
		  font-size:25px;
		}		

}