.gears {
  margin-top: 30px;
  transform: scale(0.2);
}

.gears > img {
  position: absolute;
  /* width: 50px;
  height: 50px ; */
}

.gears > .gear0 {
  margin-left: -104px;
  animation-name: gear-anim;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.gears > .gear1 {
  /* width: 63px;
  height: 63px; */
  margin-top: 116px;
  animation-name: gear-anim-reverse;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}


.gears > .gear2 {
  margin-top: 126px;
  margin-left: 228px;
  animation-name: gear-anim;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes gear-anim-reverse {
  0% {
    transform:rotate(0deg); 
  }
  100% {transform:rotate(-360deg);}
}
@keyframes gear-anim {
  0%   {transform:rotate(0);}
  100%   {transform:rotate(360deg);}
}