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


/* ############################################################ */
/* diese datei regelt die css-animationen  */
/* 1. animation drehen = angewendet auf startseite index.html sowie unterseiten bei mausberührung (hover) auf den fotos */
/* 2. animation slide-left = angewendet auf startseite index.html bei mausberührung (hover) auf den pfeil-icons in den bereichen 1-4  */
/* 3. animation slide-top = angewendet auf startseite index.html bei start der seite automatisch auf den social media icons in bereich4  */
/* 4. animation slide-left = angewendet auf startseite index.html bei mausberührung (hover) auf den social media icons in bereich4  */
/* 5. animation slide-top2 = angewendet auf allen seiten bei mausberührung (hover) auf dem nach-oben-pfeil in der fusszeile  */
/* 6. animation bildwechsler = angewendet auf allen Seiten bei start der seite automatisch  */
/* ############################################################ */


/* ====== DREHEN ======  */

.drehen ,.drehen:hover {
-webkit-transition: all 16s ease-in-out;
transition: all 16s ease-in-out;
}

.drehen:hover , .drehen a:hover, .drehen img:hover , .drehen i:hover , .drehen span:hover {
-webkit-transform: rotate(1250deg);
transform: rotate(1250deg);
}

/* ====== SLIDE  TOP ======  */

.slide-top {
-webkit-animation-name: slide-top;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function:linear ;
animation-name: slide-top;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

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

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

/* ====== SLIDE  TOP 2 ======  */

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

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

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


/* ====== SLIDE  Left ======  */

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


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

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


/* ====== SLIDESHOW - BILDWECHSLER ======  */

#slideshow {display:block;
width:100%;
height:100%;
overflow:hidden;
margin:0px auto ;
position: relative;
}

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

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

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

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

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



/* 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;}

}


/* alle 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;}

}




/* / / / / / / / / / / / / / / / / / / / / / / code ende  / / / / / / / / / / / / / / / / / / / / / / / / */