/* *** Animation Ratte*** */
/* ** Ratte unterhalb Seite rechts ** */
.ratte1 {
    width: 154px;
	width:100%;
    height: 47px;
	height:auto;
    /*background-color: blue;*/
	background-image:url(themes/razzo/images/ratte-animation-154px.png);
	background-repeat:no-repeat;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 5s infinite;
	-webkit-animation-iteration-count:2; /* Chrome, Safari, Opera */
    animation: mymove 3s infinite;
	animation-iteration-count: 2;
}
/* ** Ratte unterhalb Navigation ** */
.ratte2 {
    width: 154px;
    height: 47px;
	/*margin-top:17%;*/
	margin-top:3%;
	margin-left:0;
	padding-bottom:1%;
    /*background-color: red;*/
	background-image:url(../images/ratte-animation-links-154px.png);
	background-repeat:no-repeat;  
    position: relative;
	background-size: contain;
    -webkit-animation: mymove 8s infinite;
	-webkit-animation-iteration-count:1; /* Chrome, Safari, Opera */
    animation: mymove 3s infinite;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.ratte1 img,
.ratte2 img {
	width:100%!important;
	height:auto!important;
}

/* Chrome, Safari, Opera */
.ratte1 {-webkit-animation-timing-function: ease-in;
		-webkit-animation-direction: alternate;}
		
.ratte2 {-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);}


/* Standard syntax */

.ratte1 {animation-timing-function: ease-in;
  		animation-direction: alternate;}
		
.ratte2 {animation-timing-function: ease-out;
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); }


/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left:-250px; left: -100%; transform: rotate(0deg);}
    to {left: 300px; left: 200%; transform: rotate(35deg);}
}

/* Standard syntax */
@keyframes mymove {
    from {left: -250px;left: -100%; transform: rotate(0deg);}
    to {left: 300px; left: 200%; transform: rotate(35deg);}
}