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

/* diese datei regelt die css-animationen  */




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

.drehen {
transition: all .8s ;
}

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


/* ############################################################ */
/* Animation |  KÄFER KRABBELT */
/* ############################################################ */

.slide-ani {
animation-name: slide-ani;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 2s;
}


@keyframes slide-ani  {
0% {transform: translate(0) }
15%{transform: translate(0px, -290px)}
20%{transform:  translate(0px, -290px) rotate(180deg)}
35%{transform: translate(0px, 0px) rotate(180deg)}
40% {transform: translate(0px,0px)rotate(270deg) }
65%{transform:  translate(-300px, 0px) rotate(270deg)}
70%{transform: translate(-300px, 0px) rotate(90deg)}
90% {transform: translate(0px, 0px)rotate(90deg) }
}

/* icon käfer */
.content .kaefer .fa { text-shadow: 0 -1px 1px #666, 0 1px 1px #000;
color:#fff;
font-size:2.5rem;
}