/* ====== animation beim logo ======  */

#logo_animation {
-webkit-animation-name: logo_animation;
-webkit-animation-duration: 8s;
-webkit-animation-direction:reverse;

animation-name: logo_animation;
animation-duration: 8s;
animation-direction:reverse;
}


/*  mobile browser safari, chrome */
@-webkit-keyframes logo_animation  {
from  {-webkit-transform: translateX(0)  rotate(0deg);}
to    {-webkit-transform: translateX(220px) rotate(360deg);}

}


/*  normale browser */
@keyframes logo_animation  {
from  {transform: translateX(0)  rotate(0deg);}
to    {transform: translateX(220px) rotate(360deg);}

}


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


/*  mobile browser safari, chrome */
@-webkit-keyframes logo_animation  {
from  {-webkit-transform: translateX(0)  rotate(0deg);}
to    {-webkit-transform: translateX(600px) rotate(360deg);}

}


/*  normale browser */
@keyframes logo_animation  {
from  {transform: translateX(0)  rotate(0deg);}
to    {transform: translateX(600px) rotate(360deg);}

}


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


/*  mobile browser safari, chrome */
@-webkit-keyframes logo_animation  {
from  {-webkit-transform: translateX(0)  rotate(0deg);}
to    {-webkit-transform: translateX(710px) rotate(360deg);}

}


/*  normale browser */
@keyframes logo_animation  {
from  {transform: translateX(0)  rotate(0deg);}
to    {transform: translateX(710px) rotate(360deg);}

}


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


/*  mobile browser safari, chrome */
@-webkit-keyframes logo_animation  {
from  {-webkit-transform: translateX(0)  rotate(0deg);}
to    {-webkit-transform: translateX(1200px) rotate(360deg);}

}


/*  normale browser */
@keyframes logo_animation  {
from  {transform: translateX(0)  rotate(0deg);}
to    {transform: translateX(1200px) rotate(360deg);}

}