.moeda{
  position: absolute;
  margin-top: 122px;
  max-width: 100%;
}

.moeda1{
  background-image: url(../../images/moeda1.png);
  animation-duration: 3s;
  animation-name: moeda1;
  width: 300px;
  height: 300px;
  background-size: cover;
  animation: moeda1 15s linear infinite;
}

.moeda2{
  background-image: url(../../images/moeda2.png);
  animation-duration: 3s;
  animation-name: moeda2;
  width: 90px;
  height: 90px;
  background-size: cover;
  margin-top: 124px;
  margin-left: 364px;
  animation: moeda2 30s linear infinite;
}

.moeda3 {
  background-image: url(../../images/moeda3.png);
  animation-duration: 3s;
  animation-name: moeda3;
  width: 200px;
  height: 200px;
  background-size: cover;
  margin-top: 24px;
  margin-left: 304px;
  animation: moeda3 40s linear infinite;
}

.moeda4 {
  background-image: url(../../images/moeda4.png);
  animation-duration: 3s;
  animation-name: moeda4;
  width: 180px;
  height: 180px;
  background-size: cover;
  margin-top: -436px;
  margin-left: 143px;
  animation: moeda4 50s linear infinite;
}

.moeda5 {
  background-image: url(../../images/moeda5.png);
  animation-duration: 3s;
  animation-name: moeda5;
  width: 90px;
  height: 90px;
  background-size: cover;
  margin-top: -340px;
  margin-left: 287px;
  animation: moeda4 35s linear infinite;
}





@media (max-width: 768px){
  .moeda{
    position: absolute;
    margin-top: 222px;
   
  }



  .moeda1{
   
    animation-duration: 3s;
    animation-name: moeda1;
    width: 200px;
    height: 200px;
    background-size: cover;
    animation: moeda1 15s linear infinite;
   
  }

.moeda2 {
    animation-duration: 3s;
    animation-name: moeda2;
    width: 90px;
    height: 90px;
    background-size: cover;
    margin-top: 29px;
    margin-left: 62px;
    animation: moeda2 30s linear infinite;
}

 .moeda3 {
   
    animation-duration: 3s;
    animation-name: moeda3;
    width: 90px;
    height: 90px;
    background-size: cover;
    margin-top: -108px;
    margin-left: 28px;
    animation: moeda3 40s linear infinite;
}

  .moeda4 {
   
    animation-duration: 3s;
    animation-name: moeda4;
    width: 120px;
    height: 120px;
    background-size: cover;
    margin-top: -436px;
    margin-left: 43px;
    animation: moeda4 50s linear infinite;
   
  }

.moeda5 {
   
    animation-duration: 3s;
    animation-name: moeda5;
    width: 90px;
    height: 90px;
    background-size: cover;
    margin-top: -10px;
    margin-left: 78px;
    animation: moeda4 35s linear infinite;
    
}


}




@-webkit-keyframes moeda1 {
  0% {
    -webkit-transform: rotate(0) translate3d(0, 20px, 0) rotate(0);
    transform: rotate(0) translate3d(0, 20px, 0) rotate(0)
  }
  100% {
    -webkit-transform: rotate(-360deg) translate3d(0, 20px, 0) rotate(360deg);
    transform: rotate(-360deg) translate3d(0, 20px, 0) rotate(360deg)
  }
}

@keyframes moeda1 {
  0% {
    -webkit-transform: rotate(0) translate3d(0, 30px, 0) rotate(0);
    transform: rotate(0) translate3d(0, 30px, 0) rotate(0)
  }
  100% {
    -webkit-transform: rotate(-360deg) translate3d(0, 30px, 0) rotate(360deg);
    transform: rotate(-360deg) translate3d(0, 30px, 0) rotate(360deg)
  }
}


@-webkit-keyframes moeda2 {
  0% {
    -webkit-transform: rotate(0) translate3d(0, 00px, 0) rotate(0);
    transform: rotate(0) translate3d(0, 20px, 0) rotate(0)
  }
  100% {
    -webkit-transform: rotate(360deg) translate3d(0, 0px, 0) rotate(-360deg);
    transform: rotate(360deg) translate3d(0, 40px, 0) rotate(-360deg)
  }
}

@keyframes moeda2 {
  0% {
    -webkit-transform: rotate(0) translate3d(0, 40px, 0) rotate(0);
    transform: rotate(0) translate3d(0, 40px, 0) rotate(0)
  }
  100% {
    -webkit-transform: rotate(360deg) translate3d(0, 40px, 0) rotate(-360deg);
    transform: rotate(360deg) translate3d(0, 40px, 0) rotate(-360deg)
  }
}




@-webkit-keyframes moeda3 {
  0% {
    -webkit-transform: rotate(0) translate3d(0, 40px, 0) rotate(0);
    transform: rotate(0) translate3d(0, 20px, 0) rotate(0)
  }
  100% {
    -webkit-transform: rotate(60deg) translate3d(0, 40px, 0) rotate(-60deg);
    transform: rotate(60deg) translate3d(0, 40px, 0) rotate(-60deg)
  }
}

@keyframes moeda3 {
  0% {
    -webkit-transform: rotate(0) translate3d(0, 40px, 0) rotate(0);
    transform: rotate(0) translate3d(0, 40px, 0) rotate(0)
  }
  100% {
    -webkit-transform: rotate(360deg) translate3d(0, 40px, 0) rotate(-360deg);
    transform: rotate(360deg) translate3d(0, 40px, 0) rotate(-360deg)
  }
}




@-webkit-keyframes moeda4 {
  0% {
    -webkit-transform: rotate(0) translate3d(0, 20px, 0) rotate(0);
    transform: rotate(0) translate3d(0, 20px, 0) rotate(0)
  }
  100% {
    -webkit-transform: rotate(-360deg) translate3d(0, 20px, 0) rotate(360deg);
    transform: rotate(-360deg) translate3d(0, 20px, 0) rotate(360deg)
  }
}

@keyframes moeda4 {
  0% {
    -webkit-transform: rotate(0) translate3d(0, 60px, 0) rotate(0);
    transform: rotate(0) translate3d(0, 60px, 0) rotate(0)
  }
  100% {
    -webkit-transform: rotate(-360deg) translate3d(0, 60px, 0) rotate(360deg);
    transform: rotate(-360deg) translate3d(0, 60px, 0) rotate(360deg)
  }
}



@-webkit-keyframes moeda5 {
  0% {
    -webkit-transform: rotate(0) translate3d(0, 20px, 0) rotate(0);
    transform: rotate(0) translate3d(0, 20px, 0) rotate(0)
  }
  100% {
    -webkit-transform: rotate(-360deg) translate3d(0, 20px, 0) rotate(360deg);
    transform: rotate(-360deg) translate3d(0, 20px, 0) rotate(360deg)
  }
}

@keyframes moeda5 {
  0% {
    -webkit-transform: rotate(0) translate3d(0, 10px, 0) rotate(0);
    transform: rotate(0) translate3d(0, 10px, 0) rotate(0)
  }
  100% {
    -webkit-transform: rotate(360deg) translate3d(0, 0px, 0) rotate(-360deg);
    transform: rotate(360deg) translate3d(0, 0px, 0) rotate(-360deg)
  }
}