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


/* ############################################################ */
/* diese datei regelt die css-keyframes-animationen  */
/* 1. bildwechsler -  im logo-bereich - startet automatisch */
/* 2. slide-top - beim homepagenamen/slogan - bei mausberührung */
/* 3. drehen - das sonnen-icon beim slogan (this is responsive") - startet automatisch  */
/* ############################################################ */



/* ############################################################ */
/* hinweis: andere animationen - nämlich diejenigen, welche per css-transition ablaufen - ,
 befinden sich in der datei format.css beim jeweiligen bereich und werden von dort geregelt */
/* 1. drehen -  das pfeil-icon (nach oben) - bei mausberührung */
/* ############################################################ */





/* ############################################################ */
/* SLIDESHOW - BILDWECHSLER */
/* ############################################################ */


.slideshow {position: absolute;
padding:4rem;
margin:0rem;
width:100%;height:100%;
background-size:cover;
}

.logo .bild1 {background-image:url(images/logo.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation:show1 infinite 4000ms;
animation:show1 infinite 4000ms;
}

.logo .bild2 {background-image:url(images/logo2.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation:show2 infinite 4000ms;
animation:show2 infinite 4000ms;
}

.logo .bild3 {background-image:url(images/logo3.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation:show3 infinite 4000ms;
animation:show3 infinite 4000ms;
}

.logo .bild4 {background-image:url(images/logo4.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
-webkit-animation:show4 infinite 4000ms;
animation:show4 infinite 4000ms;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* safari, chrome browser */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


@-webkit-keyframes show1 {
0% {opacity:1;}
20% {opacity:1;}
25% {opacity:0;}
95% {opacity:0;}
}

@-webkit-keyframes show2 {
0% {opacity:0;}
20% {opacity:0;}
25% {opacity:1;}
45% {opacity:1;}
50% {opacity:0;}
100% {opacity:0;}
}

@-webkit-keyframes show3 {
0% {opacity:0;}
45% {opacity:0;}
50% {opacity:1;}
70% {opacity:1;}
75% {opacity:0;}
100% {opacity:0;}
}

@-webkit-keyframes show4 {
0% {opacity:0;}
70% {opacity:0;}
75% {opacity:1;}
95% {opacity:1;}
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* allen anderen, neueren browser */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


@keyframes show1 {
0% {opacity:1;}
20% {opacity:1;}
25% {opacity:0;}
95% {opacity:0;}
}

@keyframes show2{
0% {opacity:0;}
20% {opacity:0;}
25% {opacity:1;}
45% {opacity:1;}
50% {opacity:0;}
100% {opacity:0;}
}

@keyframes show3 {
0% {opacity:0;}
45% {opacity:0;}
50% {opacity:1;}
70% {opacity:1;}
75% {opacity:0;}
100% {opacity:0;}
}

@keyframes show4 {
0% {opacity:0;}
70% {opacity:0;}
75% {opacity:1;}
95% {opacity:1;}

}

/* ############################################################ */
/* Animation - SLIDE-TOP */
/* ############################################################ */

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

@-webkit-keyframes slide-top  {
0% {transform: translateY(0px);}
50% {transform: translateY(-22px);}
}

@keyframes slide-top  {
0% {transform: translateY(0px);}
50% {transform: translateY(-22px);}
}






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


.drehen
{
-webkit-animation:drehen 12s infinite linear;
animation:drehen 12s infinite linear;
}


@-webkit-keyframes drehen
{
from {transform:rotate(0deg);}
to {transform:rotate(359deg);}
}

@keyframes drehen
{
from {transform:rotate(0deg);}
to {transform:rotate(359deg);}
}