/* = = = = = = = = = = = = = = = = = datei animation.css = = = = = = = = = = = = = = = = = = = = = = = = = */

/* diese datei regelt die css-animationen  */

/* ############################################################ */

/*
Animation KAMERAFAHRT,  ( CSS-Name: backposmovie-1-bis-4b)| startet automatisch
Animation ZOOM-IN, Vergrösserung läuft innerhalb der Box ab ( CSS-Name:  bigscale )
Animation PERSPEKTIVISCHES WENDEN auf Y-Ebene ( CSS-Name: wenden )
Animation PERSPEKTIVISCHES WENDEN auf X-Ebene ( CSS-Name: wenden2 )
Animation PERSPEKTIVISCHES WENDEN auf X + Y Ebene ( CSS-Name: flip-perskektiv | startet automatisch )
Animation SLIDE-RIGHT  + FARBÄNDERUNG ICON ( CSS-Name: slide-right )
Animation DREHEN, schnell ( CSS-Name: drehen )
Animation DREHEN, langsam ( CSS-Name: drehen2 )


*/





/* ############################################################ */
/* backposmovie-1 */
/* ############################################################ */

.backposmovie-1 {
animation: backposmovie-1 80s infinite ;
}

@keyframes backposmovie-1 {
0% {background-position:0% 50%;}
100% {background-position:100% 50%;}
}


/* ############################################################ */
/* backposmovie-2 */
/* ############################################################ */

.backposmovie-2 {
animation: backposmovie-2 80s infinite ;
}

@keyframes backposmovie-2 {
0% {background-position:50% 100%;}
50% {background-position:50% 0%;}
100% {background-position:50% 100%;}
}


/* ############################################################ */
/* backposmovie-3 */
/* ############################################################ */

.backposmovie-3 {
animation: backposmovie-3 80s infinite ;
}

@keyframes backposmovie-3 {
0% {background-position:0% 0%;}
50% {background-position:50% 100%;}
100% {background-position:0% 100%;}
}

/* ############################################################ */
/* backposmovie-4 */
/* ############################################################ */

.backposmovie-4 {
animation: backposmovie-4 30s infinite ;
}

@keyframes backposmovie-4 {
0% {background-position:50% 50%;}
25% {background-position:50% 100%;}
50% {background-position:50% 0%;}
100% {background-position:50% 50%;}
}



/* ############################################################ */
/* backposmovie-4b */
/* ############################################################ */

.backposmovie-4b {
animation: backposmovie-4b 20s infinite;
animation-fill-mode:forwards;
}

@keyframes backposmovie-4b {
0% {background-position:-20% 0% , -200% 0% ;}
25% {background-position:0% 0% , 5% 50%;}
50% {background-position:50% 100% , 100% 0% ;}
100% {background-position:380% 0% , 200% 50%;}
}




/* ############################################################ */
/* Animation | bigscale (Vergrössern mit scale - (Wert 1= mittel, darunter verkleinert, darüber vergrössert*/
/* ############################################################ */


.bigscale {
transition: all .8s ease-out;
}

.bigscale:hover {z-index:1;
transform:scale(2) ;
}



/* ############################################################ */
/* Animation | flip - perspektiv */
/* ############################################################ */

.flip-perspektiv {
animation: flip-perspektiv 26s infinite;
}


@keyframes flip-perspektiv {
0% {transform:perspective(px) rotateX(0deg) rotateY(0deg);}
50% {transform:perspective(800px) rotateX(-360deg) rotateY(-360deg);}
100% {transform:perspective(800px) rotateX(360deg) rotateY(360deg);}
}

/* ############################################################ */
/* WENDEN */
/* ############################################################ */

.wenden {
transition: all 2s  ;
}

.wenden:hover {
transform:perspective(1000px) rotateY(360deg);
}


/* ############################################################ */
/* WENDEN 2 */
/* ############################################################ */

.wenden2 {
transition: all 2s  ;
}

.wenden2:hover {
transform:perspective(1000px) rotateX(360deg);
}



/* ############################################################ */
/* Animation | drehen  */
/* ############################################################ */

.drehen {
transition: all .8s ;
}

.drehen:hover {
transform:rotate(1080deg);
}


/* ############################################################ */
/* Animation | drehen 2 */
/* ############################################################ */

.drehen2 {
transition: all 2.8s ;
}

.drehen2:hover {
transform:rotate(360deg);
}


/* ############################################################ */
/* Animation | slide-right  */
/* ############################################################ */


.slide-right {
transition: all .6s  ;
}

.slide-right:hover  {
transform: translateX(50px)  ;
}