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


.logoanimation1 {
    position: fixed;
	
    left: 80cqw;
    top: 2cqw;
    animation: animationlogo1 20s infinite;
	z-index: 500;

}

.logoanimation1 img {
    width: 32cqw;
    height: auto;
}


@keyframes animationlogo1 {
 0%  {opacity: 0;      left:80cqw;}
 20%  {opacity: 1.0;   left:37cqw;}
 100%  {opacity: 1.0;  left:37cqw;;}
}




.logo_container_porsche {
	display: flex;
	position: fixed;
	margin:0px;
	right:20%;
	top:0;
	width: 1vw;
	height: 10px;
	z-index: 500;

}


.fade-in_logo_porsche {
	Position :absolute;
	top:0.5cqw;
	right:-100cqw;
    animation: fadeInlogoporsche 20s infinite;
}

.fade-in_logo_porsche img {
	width: 20cqw;
    height: auto;
}

@keyframes fadeInlogoporsche {
  0% {opacity: 0;transform: scale(1); right: -100cqw;}
  20% {opacity:0.4;transform: scale(0.5);right:20cqw;}
  40% {opacity: 0.7;transform: scale(1); right:2cqw;}
  100% {opacity: 1;transform: scale(1); right: 2cqw; }
}





.logogse {
	display:flex;
	position: absolute;
	left:-2cqw;
	z-index: 20;
	}



.logogse img {
	width: 10cqw;
	right:-2cqw;

}

.logogse img:hover {
    transform-origin: center top;
    animation: wachsen 1.5s ease-out forwards;
}

@keyframes wachsen {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(3) rotate(0deg);
    }
}





/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx    PULSE  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */



.logoanimation_pulse_bilder {
    position: relative;
    margin: 2cqw auto 0 auto;
    animation: pulse 5s infinite;

}


.logoanimation_pulse_bilder img {
    width: 35cqw;
    height: auto;

}


.logoanimation_pulse_kuplung {
	position: relative;
	right:10%;
	animation: pulse01 15s infinite;

}


.logoanimation_pulse_kuplung img {
    width: 40cqw;
    height: auto;

}


@keyframes pulse01 {
  0%, 100% {
    transform: scale(1) rotate(2deg);
  }

  50% {
    transform: scale(1.2) rotate(32deg);
  }
}



@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    
  }
  50% {
    transform: scale(1.1);
   
  }
}







/*  java script slide_in_animation gehört auch dazu  xxxxxxxxxxxxxxxxxxxxx   Slide in effekt xxxxxxxxxxxxxxxxxxxxx */

.slide-in {
    opacity: 0;
    transform: translateX(30vw);
    transition: transform 4s ease-out, opacity 4s ease-out;
}

.slide-in.visible {
    opacity: 1;
    transform: translateX(0%);
}

/*  java script slide_in_animation gehört auch dazu  xxxxxxxxxxxxxxxxxxxxx   Slide in effekt xxxxxxxxxxxxxxxxxxxxx */



.opacity-in{
    opacity: 0;

    transition: transform 3s ease-out, opacity 4s ease-out;
}

.opacity-in.visible {
    opacity: 1;

}


.slide-in-L {
    opacity: 0;
    transform: translateX(-10vw);
    transition: transform 4s ease-out, opacity 4s ease-out;
}

.slide-in-L.visible {
    opacity: 1;
    transform: translateX(0%);
}




/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx    PULSE  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.fly-logo {
    opacity: 0.5;
    position: fixed;
    width: 800px;
	left:100vw;
    top: 50vh;
    z-index: 99999;
    animation: flyAcross 25s linear infinite;
}

@keyframes flyAcross {
    0% {
        transform: translateX(0);
        opacity: 0.51;
    }

    50% {
        transform: translateX(calc(-100vw - 800px));
        opacity: 0;
    }

    100% {
        transform: translateX(calc(-100vw - 800px));
        opacity: 0; /* bleibt unten */
    }
}


.slide-in-right-gross {
	margin:0;
	padding:0;
	position: relative;
	white-space: nowrap;
	font-family: "Orbitron", sans-serif;
	font-size:3cqw;
	text-align: left;
	font-weight: 500;
	animation-iteration-count: infinite;
	animation: slideInRight-gross 20s infinite;
	line-height: 1;
    z-index: 20;
}


.slide-in-right-mittel {
	margin:0;
	padding:0;
	position: relative;
	white-space: nowrap;
	font-family: "Orbitron", sans-serif;
	font-size:2.5cqw;
	text-align: left;
	font-weight: 500;
	animation-iteration-count: infinite;
	animation: slideInRight-gross 20s infinite;
	line-height: 1;
	z-index: 20;
}



@keyframes slideInRight-gross {
  0% {transform: translateX(20%); opacity: 0;letter-spacing: 0.2em;color:#a00303; }
  30% {transform: translateX(0); opacity: 1; letter-spacing: 0em; color:#a00303; }
 100% {transform: translateX(0); opacity: 1; letter-spacing: 0em; color:#a00303; }
}







/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */












/* Laptop / kleines Desktop */
@media screen and (max-width: 2000px) {

.logoanimation1 {
    position: fixed;
    left: 50cqw;
    top: 1.5cqw;
    animation: animationlogo1 20s infinite;
	z-index: 500;

}

.logoanimation1 img {
    width: 27cqw;
    height: auto;
}


@keyframes animationlogo1 {
 0%  {opacity: 0;      left:50cqw; top:1.5cqw;}
 20%  {opacity: 1.0;   left:15cqw; top:1.5cqw;}
 100%  {opacity: 1.0;  left:15cqw; top:1.5cqw;}
}


.logo_container_porsche {
	right:10%;
	top:0px;
    z-index: 500;

}

.fade-in_logo_porsche {
	Position :absolute;
	top:7px;
	right:-50cqw;
    animation: fadeInlogoporsche 20s infinite;
}

.fade-in_logo_porsche img {
	width: 15cqw;
    height: auto;
}



}



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

.logoanimation1 {

	position: fixed;
	left: 300px;
	top: 60px;
	animation: animationlogo1 20s infinite;

}

.logoanimation1 img {
    width: 200px;
    height: auto;
}


@keyframes animationlogo1 {
 0%  {opacity: 0;      left:300px; top:50px;}
 20%  {opacity: 1.0;   left:10px; top:50px;}
 100%  {opacity: 1.0;  left:10px; top:50px;}
}

.logo_container_porsche {
	margin:0px;
	right:120px;
	top:40px;
	display: flex;
	position: fixed;
	width: 100px;
	height: 10px;

}

.fade-in_logo_porsche {
	Position :absolute;
	top:0;
	left:0px;
    animation: fadeInlogoporsche 20s infinite;
}

.fade-in_logo_porsche img {
	width: 150px;
    height: auto;
}

@keyframes fadeInlogoporsche {
  0% {opacity: 0;transform: scale(0); left:300px;}
  20% {opacity:0.4;transform: scale(1.3);left:0px;}
  40% {opacity: 0.7;transform: scale(1); left:0px;}
  100% {opacity: 1;transform: scale(1);  left:0px; }
}


.logoanimation_pulse_kuplung {
	position: relative;
	right:20%;
	top:2.5cqw;
	animation: pulse01 15s infinite;
}


.logoanimation_pulse_kuplung img {
    width: 60cqw;
    height: auto;

}




.fly-logo {
    opacity: 0.5;
    position: fixed;
    width: 120vw;
    left: 100vw;
    top: 50%;
    z-index: 1;
    animation: flyAcross 30s linear infinite;
}

@keyframes flyAcross {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-220vw);
    }

    100% {
        transform: translateX(-220vw);
    }
}

/* Überschrift animationen */

.slide-in-right-gross {

	font-size:22px;


}




.slide-in-right-mittel {

	font-size:20px;

}



.logoanimation_pulse_bilder {
    position: relative;
    margin: 1cqw auto 0 auto;
    animation: pulse 5s infinite;

}


.logoanimation_pulse_bilder img {
    width: 300px;
    height: auto;

}

   .slide-in {
        width: 100%;
        margin-left: auto;
        margin-right: auto;

        opacity: 0;
        transform: translateX(100vw);
        transition: transform 2s ease-out, opacity 4s ease-out;
    }

    .slide-in.visible {
        opacity: 1;
        transform: translateX(0);
    }



}