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

/* diese datei regelt die css-animationen  */
/* ############################################################ */

/*
Animation FAHREN  ( CSS-Name: fahren )
Animation SCALE, vergrössern ( CSS-Name: bigscale  )
Animation SLIDE-RIGHT  + FARBÄNDERUNG ICON ( CSS-Name: slide-right )
Animation GUMMIBAND  ( CSS-Name: gummi )
Animation EINBLENDEN + TEXTÜBERLAGERUNG ( CSS-Name: bildtext-ani )
Animation PERSPEKTIVISCHES WENDEN auf Y-Ebene ( CSS-Name: wenden ) |startet automatisch
Animation PERSPEKTIVISCHES WENDEN auf X-Ebene ( CSS-Name: wenden2 ) |startet automatisch
Animation DREHEN, schnell ( CSS-Name: drehen )
Animation DREHEN, langsam ( CSS-Name: drehen2 )
Animation DREHEN + VERKLEINERN ( CSS-Name: drehen-verkleinern )
Animation WAEHLSCHEIBE  ( CSS-Name: waehlscheibe )
*/




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



/* ############################################################ */
/* Animation - FAHREN */
/* ############################################################ */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Ablauf 2x bei Mausberührung*/
/* Dauer: 8sek */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.wrapper-car:hover .fahren {
-webkit-animation: fahren 8s 2  ;
animation: fahren 8s 2  ;
}

@-webkit-keyframes fahren {
 0% {left: 0;}
 100% {left: 105%);}
}

@keyframes fahren {
 0% {left: 0;}
 100% {left: 105%}
}




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

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Ablauf 1x bei Mausberührung*/
/* Dauer: 0.8sek */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

.bigscale:hover {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}


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

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Ablauf unendlich , automatisch bei Start */
/* Dauer: 20sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.wenden {
-webkit-animation: wenden 20s infinite linear ;
animation: wenden 20s infinite linear;
}


@-webkit-keyframes wenden {
   0% {-webkit-transform:perspective(1000px) rotateY(0deg)}
   25% {-webkit-transform:perspective(1000px) rotateY(90deg)}
   50% {-webkit-transform:perspective(1000px) rotateY(180deg)}
   75% {-webkit-transform:perspective(1000px) rotateY(-270deg)}
   100% {-webkit-transform:perspective(1000px) rotateY(360deg)}
}



@keyframes wenden {
   0% {transform:perspective(1000px) rotateY(0deg)}
   25% {transform:perspective(1000px) rotateY(90deg)}
   50% {transform:perspective(1000px) rotateY(180deg)}
   75% {transform:perspective(1000px) rotateY(-270deg)}
   100% {transform:perspective(1000px) rotateY(-360deg)}
}


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

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Ablauf unendlich , automatisch bei Start */
/* Dauer: 20sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.wenden2 {
-webkit-animation: wenden2 20s infinite linear ;
animation: wenden2 20s infinite linear;
}


@-webkit-keyframes wenden2 {
   0% {-webkit-transform:perspective(1000px) rotateY(0deg)}
   25% {-webkit-transform:perspective(1000px) rotateY(90deg)}
   50% {-webkit-transform:perspective(1000px) rotateY(180deg)}
   75% {-webkit-transform:perspective(1000px) rotateY(-270deg)}
   100% {-webkit-transform:perspective(1000px) rotateY(360deg)}
}



@keyframes wenden2 {
   0% {transform:perspective(1000px) rotateX(0deg)}
   25% {transform:perspective(1000px) rotateX(90deg)}
   50% {transform:perspective(1000px) rotateX(180deg)}
   75% {transform:perspective(1000px) rotateX(-270deg)}
   100% {transform:perspective(1000px) rotateX(-360deg)}
}



/* ############################################################ */
/* GUMMIBAND */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Ablauf 1x bei Mausberührung */
/* Dauer: 3sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.gummi:hover {
-webkit-animation: gummi 3s linear 1;
animation: gummi 3s linear 1;
}

/*  mobile browser safari, chrome */
@-webkit-keyframes gummi {
from {transform: scale3d(1, 1, 1);}

30% {-webkit-transform: scale3d(1.25, 0.5, 1);}

40% {-webkit-transform: scale3d(0.75, 1.25, 1);}

50% {-webkit-transform: scale3d(1.15, 0.85, 1);}

65% {-webkit-transform: scale3d(.95, 1.05, 1);}

75% {-webkit-transform: scale3d(1.05, .95, 1);}

to {-webkit-transform: scale3d(1, 1, 1);  }
}

/*  andere browser */
@keyframes gummi {
from {transform: scale3d(1, 1, 1);}

30% {transform: scale3d(1.25, 0.5, 1);}

40% {transform: scale3d(0.75, 1.25, 1);}

50% {transform: scale3d(1.15, 0.85, 1);}

65% {transform: scale3d(.95, 1.05, 1);}

75% {transform: scale3d(1.05, .95, 1);}

to {transform: scale3d(1, 1, 1);  }
}

/* ... bei mouseout langsam zurück in ausgangszustand und nicht abrupt */
.gummi {
-webkit-transition: all 3s ease-out;
transition: all 3s ease-out;
}


/* ############################################################ */
/* Animation - WAEHLSCHEIBE */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Viertel-Drehung nach rechts, dann Viertel-Drehung nach links */
/* Ablauf 1x bei Mausberührung */
/* Dauer: 1.7sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



.waehlscheibe:hover
{
-webkit-animation:waehlscheibe 1.7s 1 linear;
animation:waehlscheibe 1.7s 1 linear;
}

@-webkit-keyframes waehlscheibe
{
0% {-webkit-transform:rotate(0deg);}
30% {-webkit-transform:rotate(90deg);}
60% {-webkit-transform:rotate(-90deg);}
100% {-webkit-transform:rotate(0deg);}
}

@keyframes waehlscheibe
{
0% {transform:rotate(0deg);}
30% {transform:rotate(90deg);}
60% {transform:rotate(-90deg);}
100% {transform:rotate(0deg);}
}

/* ... bei mouseout langsam zurück in ausgangszustand und nicht abrupt */
.waehlscheibe {
-webkit-transition: all 1.7s ease-out;
transition: all 1.7s ease-out;
}



/* ############################################################ */
/* Animation - DREHEN */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 360GRAD-Drehung nach rechts */
/* Ablauf 3x bei Mausberührung */
/* Dauer: 0.8sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


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

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


/* ############################################################ */
/* Animation - DREHEN 2 */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 360GRAD-Drehung nach rechts */
/* Ablauf 1x bei Mausberührung */
/* Dauer: 2.8sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.drehen2 {
-webkit-transition: all 2.8s ease-out;
transition: all 2.8s ease-out;
}

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


/* ############################################################ */
/* Animation - DREHEN + VERKLEINERN */
/* ############################################################ */

.drehen-verkleinern {
-webkit-transition: all 1.1s ease-out;
transition: all 1.1s ease-out;
}

.drehen-verkleinern:hover {
-webkit-transform:rotate(360deg)scale(0.5);
transform:rotate(360deg)scale(0.5);
}




/* ############################################################ */
/* Animation - SLIDE RIGHT  */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Verschieben nach rechts */
/* Ablauf 1x bei Mausberührung */
/* Dauer: 0.6sek */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.slide-right:hover  {
-webkit-animation-name: slide-right;
-webkit-animation-duration: .6s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
animation-name: slide-right;
animation-duration: .6s;
animation-iteration-count: 1;
animation-timing-function: linear;
}


@-webkit-keyframes slide-right  {
0% {-webkit-transform: translateX(0px) ; }
50% {-webkit-transform: translateX(50px)  ; }
}

@keyframes slide-right  {
0% {transform: translateX(0px) ; }
50% {transform: translateX(50px)  ; }
}

/* ... bei mouseout langsam zurück in ausgangszustand und nicht abrupt */
.slide-right {
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}





/* ############################################################ */
/* Animation - FADE IN mit TEXTÜBERLAGERUNG */
/* aufruf mit:  .ani-bildtext */
/* ############################################################ */




.ani-bildtext  {opacity:0;
font-family:arial,sans-serif;
font-size:1.3rem;
line-height:1;
position:absolute;
width:100%;padding:2rem 0 0 0;
height:100%;
left:0;top:0;
background:rgba(0,0,0,.6);
color:white;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}

.ani-bildtext a {color:white;text-decoration:none;display:block;
height:100%;
}

.ani-bildtext:hover  {opacity:1;
}

/* lupe-icon */
.ani-bildtext .fa {color:#FFFFFF ;font-size:2rem;padding-top:.5rem;display:block;height:100%;
}



/* ############################################################ */
/* M E D I A   Q U E R I E S */
/* ############################################################ */



/* ==================================== ab 1024 pixel ================================== */
@media (min-width: 1024px) {

.span_1_of_3 .ani-bildtext  {
font-size:1.0rem;
line-height:1;
}

.span_1_of_3 .ani-bildtext .fa {font-size:1.7rem;font-weight:bold;
}

}