@charset "utf-8";
/* CSS Document */


.logo_online {
	position: Absolute;
	right:2%;
	top: 20%;
	z-index:1;
}

.logo_online img {
    width: 7vw;   /* gewünschte Breite */
    height: auto;   /* Seitenverhältnis beibehalten */
	z-index: 1;
}




.logoanimation2 {
	position: absolute;
	animation-name: animationlogo2;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	left:2%;
	top:10%;
	z-index: 1;

}

@keyframes animationlogo2 {
 0%  {opacity: 0;left:left:2%; top:10%;}
 5%  {opacity: 0.3; left:30%; top:10%;}
 15%  {opacity: 1.0; left:2%; top:10%;}
 100%  {opacity: 1.0; left:2%; top:10%;}
 
}


.logoanimation2 img {
    width: 5.4vw;
    height: auto;

}



.fade-in_logo01 {
	Position :absolute;
	top:55%;
	left:2.5%;
	text-align: left;
    width: 15vw;
    animation: fadeInlogo01 20s infinite;
 /*   width: 500px; */
	
}

.fade-in_logo01 img {
	width: 15vw;
    height: auto;
}

@keyframes fadeInlogo01 {
  0% {transform: scale(0);}
  15% {transform: scale(1.2);}
  50% {transform: scale(1);}
  100% {transform: scale(1);}
}



.slide-in-right1 {
	position: absolute;
	white-space: nowrap;
	top:10%;
	left:2.5%;
	font-family: Arial;
	font-size: 3cqw; /* 5% der Container-Breite */
	text-shadow: 4px 4px 3px rgba(0,0,0,0.5);
	transform: scaleY(1.5);
	text-align: left;
	font-weight: bolder;
	animation: slideInRight1 20s infinite;
	font-variant: normal;
	z-index:10;
}

@keyframes slideInRight1 {
  0% {transform: translateX(20%)scaleY(1.5); opacity: 0;letter-spacing: 0.5em;color:#a00303; }
  20% {transform: translateX(0)scaleY(1.5); opacity: 1; letter-spacing: 0em;color:Black; }
  100% {transform: translateX(0)scaleY(1.5); opacity: 1; letter-spacing: -0em;color:Black; }
}

.slide-in-right2 {
	position: absolute;
	white-space: nowrap;
	top:29%;
	left:2.5%;
	font-family: Arial;
	font-size: 3cqw; /* 5% der Container-Breite */
	;
	text-shadow: 4px 4px 3px rgba(0,0,0,0.5);
	transform: scaleY(1.5);
	/*	letter-spacing: 0.2em; */
	text-align: left;
	font-weight: bolder;
	animation: slideInRight2 20s infinite;
	z-index:10;
	font-variant: normal;
}



@keyframes slideInRight2 {
  0% {transform: translateX(20%)scaleY(1.5); opacity: 0;letter-spacing: 0.5em;color:#a00303; }
  20% {transform: translateX(0)scaleY(1.5); opacity: 1; letter-spacing: 0em; color:#a00303; }
  100% {transform: translateX(0)scaleY(1.5); opacity: 1; letter-spacing: 0em; color:#a00303; }
}


.slide-in-right3 {
	Position :relativ;
	white-space: nowrap;
	font-family: Arial;
	font-size: 1cqw;
	text-align: left;
	font-weight: bold;
	animation-iteration-count: infinite;
	animation: slideInRight3 20s infinite;
	line-height: 1;
}


@keyframes slideInRight3 {
  0% {transform: translateX(20%); opacity: 0;letter-spacing: 0.5em;color:#FFF; }
  40% {transform: translateX(0); opacity: 1; letter-spacing: 0em; color:#FFF; }
 100% {transform: translateX(0); opacity: 1; letter-spacing: 0em; color:#FFF; }
}





.slide-in-right4 {
   
    position: absolutewhite-space: nowrap;
	font-family: Arial;
	font-size: 2cqw; /* 5% der Container-Breite */
	;
	text-shadow: 4px 4px 3px rgba(0,0,0,0.5);
	transform: scaleY(1.5);
	font-weight: bolder;
	animation: slideInRight4 20s infinite;
	font-variant: normal;
}

@keyframes slideInRight4 {
  0% {transform: translateX(-100%)scaleY(1.5); opacity: 0;color:#a00303; }
  30% {transform: translateX(0)scaleY(1.5); opacity: 1; color:#FFF; }
  100% {transform: translateX(0)scaleY(1.5); opacity: 1;color:#FFF; }
}




.slide-in-right5 {
	margin:10px 0 0 0;
	Padding:0 0 0 0;
	Position :relative;
	white-space: nowrap;
	font-family: Arial;
	font-size: 1.5em;
	text-align: left;
	font-weight: bold;
	animation-iteration-count: infinite;
	animation: slideInRight5 20s infinite;
}


@keyframes slideInRight5 {
  0% {transform: translateX(20%); opacity: 0;letter-spacing: 0.5em;color:#a00303; }
  40% {transform: translateX(0); opacity: 1; letter-spacing: 0em; color:#a00303; }
 100% {transform: translateX(0); opacity: 1; letter-spacing: 0em; color:#a00303; }
}

















/* Handy */
@media screen and (max-width: 768px) {



.logoanimation2 img {
	Display:none;
    width: 70px;   /* gewünschte Breite */
    height: auto;   /* Seitenverhältnis beibehalten */
	z-index: 10;
}

@keyframes animationlogo2 {
 0%  {opacity: 0;left:5px; top:10px;}
 5%  {opacity: 0.3; left:40%; top:10px;}
 15%  {opacity: 1.0; left:5px; top:10px;}
 100%  {opacity: 1.0; left:5px; top:10px;}
 
}

 .logoanimation2 {
    left:5px;
     top:5px;
	z-index: 1;
    }
	


.logo_online img {
	width: 100px;   /* gewünschte Breite */
	height: auto;   /* Seitenverhältnis beibehalten */
	z-index:1;
}

.logo_online {
    position:absolute;
    top:10px;
    right:10px;
    z-index:1;
	z-index:1;
}




.slide-in-right3 {
	font-size: 1em;
	font-family: Arial;
	font-weight: bolder;


}


.slide-in-right4 {
Position :relativ;
	white-space: nowrap;
	margin: 0px 0px 1px 0px;

	font-size: 12px;
	text-shadow: 4px 4px 5px rgba(0,0,0,0.5);
	transform: scaleY(1.5);
	font-weight: bolder;
	animation: slideInRight4 10s infinite;
	font-variant: small-caps;
}


.slide-in-right5 {
	font-size: 1.2em;
	font-family: Arial;
	font-weight: bolder;
	/*	letter-spacing: 0.2em; */

}





}