﻿

/* ====== animation beim slogan ======  */

#slogan_animation {
-webkit-animation-name: slogan_animation;
-webkit-animation-duration: 8s;
-webkit-animation-direction:reverse;

animation-name: slogan_animation;
animation-duration: 8s;
animation-direction:reverse;
}


/*  mobile browser safari, chrome */
@-webkit-keyframes slogan_animation  {
from  {-webkit-transform: translateX(0)  rotate(0deg);}
to
{ -webkit-transform: translateX(220px) rotate(-1080deg);}

}


/*  normale browser */
@keyframes slogan_animation  {
from  {transform: translateX(0)  rotate(0deg);}
to    {transform: translateX(220px) rotate(-1080deg);}

}


/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {


/*  mobile browser safari, chrome */
@-webkit-keyframes slogan_animation  {
from  {-webkit-transform: translateX(0)  rotate(0deg);}
to
{ -webkit-transform: translateX(600px) rotate(-1080deg);}

}


/*  normale browser */
@keyframes slogan_animation  {
from  {transform: translateX(0)  rotate(0deg);}
to
{transform: translateX(600px) rotate(-1080deg);}

}


/* ==================================== ab 768 pixel ================================== */
@media (min-width: 768px) {


/*  mobile browser safari, chrome */
@-webkit-keyframes slogan_animation  {
from  {-webkit-transform: translateX(0)  rotate(0deg);}
to
{ -webkit-transform: translateX(710px) rotate(-1080deg);}

}


/*  normale browser */
@keyframes slogan_animation  {
from  {transform: translateX(0)  rotate(0deg);}
to
{transform: translateX(710px) rotate(-1080deg);}

}


/* ==================================== ab 1280 pixel ================================== */
@media (min-width: 1280px) {


/*  mobile browser safari, chrome */
@-webkit-keyframes slogan_animation  {
from  {-webkit-transform: translateX(0)  rotate(0deg);}
to
{ -webkit-transform: translateX(1200px) rotate(-1080deg);}

}


/*  normale browser */
@keyframes slogan_animation  {
from  {transform: translateX(0)  rotate(0deg);}
to
{ transform:translateX(1200px) rotate(-1080deg);}

}