@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@keyframes slide {
  0% {
    left: 0;
    top: 100% ;
  }
  100% {
    left: 35%;
    top: -30%;
  }
}

@keyframes slide_right {
  0% {
    right: -50%;
    top: 8%;
  }
  100% {
    right: 150%;
    top: -15%;
  }
}

@keyframes slide_right_one {
  0% {
    right: 40%;
    top: -3%;
  }
  100% {
    right: 50%;
    top: -60%;
  }
}

@keyframes slide_right_two {
  0% {
    right: -40%;
    top: 600px;
  }
  100% {
    right: 150%;
    top: 450px;
  }
}

@keyframes top_bottom {
	0% {
	  	left:20% ;
	    top: 30%;
  	}
	50%{
  		left: 20%;
  		top: 10%;
  	}
  	100% {
    	top: 30%;
    	left: 20%;
  	}
}

@keyframes top_bottom_one {
	0% {
	    top: 30%;
  	}
	50%{
  		top: 0;
  	}
  	100% {
    	top: 30%;
  	}
}

@keyframes top_bottom_two{
  0%{
    top: 550px;
  }
  50%{
    top: 200px;
  }
  100%{
    top: 550px;
  }
}

.luna{animation: spin 20s linear infinite; position: absolute; top: 25%; right: 10%;}

.astronauta{position: absolute; top: 100%; left: 0; animation: slide 30s linear infinite;}

.comet{position: absolute; animation:slide_right 20s infinite; top: 5%; right: -50%;}

.extra2{position: absolute; top: 550px; left: -151px; animation: top_bottom_two 12s infinite;}

.extra3{position: absolute; top: 550px; left: -161px;top:55px; animation: top_bottom_two 12s infinite;}

.extra1{position: absolute; top: 0; right: 20%; z-index: 0;}

.extra{position: absolute; left: 20%; animation:top_bottom infinite 12s;  top: 30%;}

.mono{animation: top_bottom_one infinite 10s; margin: 0 auto; position: relative;}

#blog .comet{position: absolute; top: 600px; right: -40%; animation: slide_right_two 20s infinite; }


@media(min-width: 768px) and (max-width: 1220px){
	.luna{top: 20%; right: 25%; width: 100px;}
	.astronauta{width: 100px;}


}