.greenDownAni {
  width: 70px;
  height: 70px;
  background: url('../img/spritesheet.png') left center;
}

@keyframes play {
   100% { background-position: -3360px; }
}

.downHover {
  position: relative;
  width: 70px;
  height: 70px;

  margin: 0 auto;
  margin-top: 30vh;
  bottom: 10vh ;
}

.downHover:hover .greenDownAni {
  animation: play 1.6s steps(48);
  animation-fill-mode: forwards;

  cursor: pointer;
}

 #processWraper .downHover {
  position: relative;
  width: 70px;
  height: 70px;


  margin-top: 60vh;
  bottom: 10vh ;
}

.grayDownAni {
  width: 70px;
  height: 70px;
  background: url('../img/spritesheet_dark.png') left center;
}

@keyframes play {
   100% { background-position: -3360px; }
}

.downHoverGray {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  margin-top: 10vh;
  bottom: 0;
}

.downHoverGray:hover .grayDownAni {
  animation: play 1.6s steps(48);
  animation-fill-mode: forwards;

  cursor: pointer;
}