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

/* diese datei regelt die css-animationen  */




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


@keyframes show1 {
0% {opacity:1;background-position:50% 0%}
20% {opacity:1;background-position:50% 100%;}
25% {opacity:0;}
95% {opacity:0;}
}

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

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

@keyframes show4 {
0% {opacity:0;}
70% {opacity:0;}
75% {opacity:1;background-position:50% 100%}
100% {opacity:1;background-position:50% 0%;}

}


.pics {position: absolute;
padding:0rem;
margin:0rem;
width:100%;
height:100%;
overflow:hidden;
text-align:right;
padding-right: 2rem;
padding-top:.5rem;
background-repeat:no-repeat;
background-size:auto;
background-image:url(../images/logo01.jpg);/* dieses bild erscheint nur, wenn der bildwechsler gel�scht wird*/
background-position:50% 50%;
}

/* = = = = = slideshow-bilder auf seite index.html (HOME) = = = = =  */


.pic-a-01 {
    background-image:url(../images/logo01.jpg);
animation:show1 infinite 60s; }

.pic-a-02  {background-image:url(../images/logo02.jpg);
animation:show2 infinite 60s ; }

.pic-a-03 {background-image:url(../images/logo03.jpg);
animation:show3 infinite 60s; }

.pic-a-04  {background-image:url(../images/logo04.jpg);
animation:show4 infinite 60s; }


/*  = = = = = slideshow-bilder auf seite index1.html (PRIMUS)  = = = = = */

.pic-b-01 {background-image:url(../images/logo05.jpg);
animation:show1 infinite 60s; }

.pic-b-02  {background-image:url(../images/logo06.jpg);
animation:show2 infinite 60s ; }

.pic-b-03 {background-image:url(../images/logo07.jpg);
animation:show3 infinite 60s; }

.pic-b-04  {background-image:url(../images/logo08.jpg);
animation:show4 infinite 60s; }


/*  = = = = = slideshow-bilder auf seite index2.html (SECUNDUS)  = = = = = */

.pic-c-01 {background-image:url(../images/logo09.jpg);
animation:show1 infinite 60s; }

.pic-c-02  {background-image:url(../images/logo10.jpg);
animation:show2 infinite 60s ; }

.pic-c-03 {background-image:url(../images/logo11.jpg);
animation:show3 infinite 60s; }

.pic-c-04  {background-image:url(../images/logo12.jpg);
animation:show4 infinite 60s; }


/*  = = = = = slideshow-bilder auf seite index3.html (TERTIUS)  = = = = = */

.pic-d-01 {background-image:url(../images/logo13.jpg);
animation:show1 infinite 60s; }

.pic-d-02  {background-image:url(../images/logo14.jpg);
animation:show2 infinite 60s ; }

.pic-d-03 {background-image:url(../images/logo15.jpg);
animation:show3 infinite 60s; }

.pic-d-04  {background-image:url(../images/logo16.jpg);
animation:show4 infinite 60s; }





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


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

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




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

.wenden {
animation: wenden 15s infinite ;
}

@keyframes wenden {
from {transform:perspective(0px) rotateY(0deg); }
to {transform:perspective(3000px) rotateY(360deg); }
}


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

.wenden2 {
animation: wenden2 30s 1;
animation-delay: 30s;
}

@keyframes wenden2 {
0%   {visibility:hidden;opacity:0;}
10%  {visibility:visible;opacity:1 }

11%  {transform:rotate(0deg) ;color:white }
50%  {transform:rotate(360deg) ;color:white}

51%  {transform:translate(0rem);color:#EEC10D; }
60%  {transform:rotate(-45deg); }
80%  {transform:rotate(45deg);color:#EEC10D; }

81%  {color:white; }
90%  {transform:translate(0rem); }

91%  {opacity:1;transform:translate(0rem) }
100%  {opacity:0 }
}


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

.wenden3 {
animation: wenden3 15s 1;
animation-delay: 15s;
}

@keyframes wenden3 {
0%   {transform:perspective(0px) rotateX(0deg) rotateY(0deg);}
70%  {transform:perspective(1000px) rotateX(0deg) rotateY(720deg)}
71%   {transform:perspective(1000px) rotateX(0deg) rotateY(0deg);}
100%  {transform:perspective(1000px) rotateX(720deg) rotateY(0deg) }


}


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

.wenden4 {
transition: all 2s  ;
}

.wenden4:hover {transform:perspective(3000px) rotateY(360deg);
}



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

.drehen {
transition: all .8s ;
}

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


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

.drehen2 {
transition: all 1.6s ;
}

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


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


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

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