*{
  margin:0;
  padding:0;
  
}


.circulo{

  width: 190px;
  height: 190px;
 
  margin: 100px auto;
  border-radius:100%;

  background:#f9da4f;
  
}
.shadow{
  position:absolute;
  width:90px;
  height:30px;
  border-radius:100%;
  background:#d6b939;
  margin:140px 60px;
  animation:acercar .9s infinite alternate;
    -webkit-animation: acercar .9s alternate infinite ;
    animation:  acercar .9s infinite alternate;
    -moz-animation:  acercar  .9s  infinite alternate; 
}
.celu{
  position:absolute;
  width:80px;
  height:105px;
  border-radius:10px;
  background:#7dcff7;
  border-left:11px solid #ffffff;
  border-right:11px solid #ffffff;
  border-bottom:15px solid #ffffff;
  border-top:10px solid #ffffff;
  margin: 130px 50px;
  animation:saltar .9s infinite alternate;
    -webkit-animation: saltar .9s alternate infinite ;
    animation:  saltar .9s infinite alternate;
    -moz-animation:  saltar  .9s  infinite alternate; 
     }
.celu::before{
  content:"";
  display:block;
  width:10px;
  height:5px;
  background:#ecebeb;
  margin: 85px 25px;
}
ul{
  position:absolute;
  display:block;
  width:60px;
  height:60px;
  list-style:none;
  
  
  margin: -260px 0px;
}
ul li{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:1px;
 
  
}

ul li:nth-child(1){
  background:#fbb651;
margin:-50px 3px;
}
ul li:nth-child(2){
 
  background:#00a2eb;
  margin:-70px 3px;
}

ul li:nth-child(3){
  background:#8ec31c;
  margin:-70px 3px;
}
ul li:nth-child(4){
  background:#b28a51;
   margin:-70px 3px;
}
ul li:nth-child(5){
  background:#fe5555;
  margin:-85px 3px;
}
ul li:nth-child(6){
  background:#fff75d;
  margin:-85px 3px;
}
ul li:nth-child(7){
  background:#f3939c;
    margin:-85px 3px;
}
ul li:nth-child(8){
  background:#00a2eb;
  margin:-85px 3px;
}

ul li:nth-child(1), ul li:nth-child(4){
     animation: reb1 .9s alternate infinite;
	-moz-animation:reb1 .9s alternate infinite; 
-webkit-animation:reb1 .9s alternate infinite; 
-o-animation:reb1 .9 alternate infinite;
  
}

ul li:nth-child(2), ul li:nth-child(3), ul li:nth-child(5), ul li:nth-child(8){
     animation: reb2 .9s alternate infinite;
	-moz-animation:reb2 .9s alternate infinite; 
-webkit-animation:reb2 .9s alternate infinite; 
-o-animation:reb2 .9s alternate infinite;
  
} 
ul li:nth-child(6), ul li:nth-child(7){
     animation: reb3 .9s alternate infinite;
	-moz-animation:reb3 .9s alternate infinite; 
-webkit-animation:reb3 .9s alternate infinite; 
-o-animation:reb3 .9s alternate infinite;
  
  
} 
@-webkit-keyframes saltar { 
  0% {margin-top:30px;}
  
  100% {margin-top:90px;}
}
@-moz-keyframes saltar { 
  0% {margin-top:30px;}
  
  100% {margin-top:90px;}
}
@keyframes saltar { 
  0% {margin-top:30px;}
  
  100% {margin-top:90px;}
}
@-webkit-keyframes acercar { 0% 
  {  transform: scale (.5);
    -webkit-transform:  scale(.5);
    -moz-transform:  scale(.5);
    -ms-transform:  scale (.5);
    -o-transform:  scale (.5);
   
 }
  
  100% 
  {  transform: scale (1);
    -webkit-transform:  scale(1);
    -moz-transform:  scale(1);
    -ms-transform:  scale (1);
    -o-transform:  scale (1);
     
}
}
    
 @-moz-keyframes acercar { 0% 
  {  transform: scale (.5);
    -webkit-transform:  scale(.5);
    -moz-transform:  scale(.5);
    -ms-transform:  scale (.5);
    -o-transform:  scale (.5);
   
 }
  
  100% 
  {  transform: scale (1);
    -webkit-transform:  scale(1);
    -moz-transform:  scale(1);
    -ms-transform:  scale (1);
    -o-transform:  scale (1);
     
}
}
@keyframes acercar { 0% 
  {  transform: scale (.5);
    -webkit-transform:  scale(.5);
    -moz-transform:  scale(.5);
    -ms-transform:  scale (.5);
    -o-transform:  scale (.5);
   
 }
  
  100% 
  {  transform: scale (1);
    -webkit-transform:  scale(1);
    -moz-transform:  scale(1);
    -ms-transform:  scale (1);
    -o-transform:  scale (1);
     
}
}
    
@-webkit-keyframes reb1 {
  
 0% 
  {  margin:-80px 3px;}
  
   50% 
  {  margin:-40px 3px;}
}
@-moz-keyframes reb1 {
  
 0% 
  {  margin:-80px 3px;}
  
   50% 
  {  margin:-40px 3px;}
}
@keyframes reb1 {
  
 0% 
  {  margin:-80px 3px;}
  
   50% 
  {  margin:-40px 3px;}
}
@-webkit-keyframes reb2 {
  
 0% 
  {  margin:-80px 3px;}
  
   50% 
  {  margin:-85px 3px;}
}  
@-moz-keyframes reb2 {
  
 0% 
  {  margin:-80px 3px;}
  
   50% 
  {  margin:-85px 3px;}
} 
@keyframes reb2 {
  
 0% 
  {  margin:-80px 3px;}
  
   50% 
  {  margin:-85px 3px;}
}  
@-webkit-keyframes reb3 {
  
 0% 
  {  margin:-95px 3px;}
  
   50% 
  {  margin:-97px 3px;}
}     
@-moz-keyframes reb3 {
  
 0% 
  {  margin:-95px 3px;}
  
   50% 
  {  margin:-97px 3px;}
}  
@keyframes reb3 {
  
 0% 
  {  margin:-95px 3px;}
  
   50% 
  {  margin:-97px 3px;}
}