html {
	--colorPuntoIzq: #FFFF21;
	--colorPuntoFront: #3FC380;
	--colorPuntoDch: #3462EB;
	--tamanhoPunto: 15px;
}

.flecha {
	height: 150px;
/*	left: 35px; /* 35px es el 0 */
/*	position: absolute; */
/*	top: 5px; /* 5px es el 0 */
	width: 65px;
}

.circle {
    border-radius: var(--tamanhoPunto);
    height: var(--tamanhoPunto);
    position: absolute;
    width: var(--tamanhoPunto);
}
.flechaIzq .circle {
    background-color: var(--colorPuntoIzq);
}
.flechaFront .circle {
    background-color: var(--colorPuntoFront);
}
.flechaDch .circle {
    background-color: var(--colorPuntoDch);
}


.avanzar:hover .circle,
.girarIzquierda:hover .circle,
.girarDerecha:hover .circle {
    animation: animacionPuntoFlecha linear 2s infinite;
}

.flecha .circle:nth-child(1) {
  animation-delay: 1.3s;
}
.flecha .circle:nth-child(2),
.flecha .circle:nth-child(3) {
  animation-delay: 1.1s;
}
.flecha .circle:nth-child(4),
.flecha .circle:nth-child(5),
.flecha .circle:nth-child(6) {
  animation-delay: 0.9s;
}
.flecha .circle:nth-child(7) {
  animation-delay: 0.7s;
}
.flecha .circle:nth-child(8) {
  animation-delay: 0.5s;
}
.flecha .circle:nth-child(9) {
  animation-delay: 0.3s;
}
.flecha .circle:nth-child(10) {
  animation-delay: 0.1s;
}

.flechaFront .circle:nth-child(1) {
  transform: translate(26px,0);
}
.flechaFront .circle:nth-child(2) {
  transform: translate(13px,20px);
}
.flechaFront .circle:nth-child(3) {
  transform: translate(39px,20px);
}
.flechaFront .circle:nth-child(4) {
  transform: translate(0,40px);
}
.flechaFront .circle:nth-child(5) {
  transform: translate(26px,40px);
}
.flechaFront .circle:nth-child(6) {
  transform: translate(50px,40px);
}
.flechaFront .circle:nth-child(7) {
  transform: translate(26px,63px);
}
.flechaFront .circle:nth-child(8) {
  transform: translate(26px,86px);
}
.flechaFront .circle:nth-child(9) {
  transform: translate(26px,109px);
}
.flechaFront .circle:nth-child(10) {
  transform: translate(26px,132px);
}

.flechaIzq .circle:nth-child(1) {
  transform: translate(0,0);
}
.flechaIzq .circle:nth-child(2) {
  transform: translate(3px,20px);
}
.flechaIzq .circle:nth-child(3) {
  transform: translate(20px,1px);
}
.flechaIzq .circle:nth-child(4) {
  transform: translate(6px,40px);
}
.flechaIzq .circle:nth-child(5) {
  transform: translate(26px,22px);
}
.flechaIzq .circle:nth-child(6) {
  transform: translate(40px,2px);
}
.flechaIzq .circle:nth-child(7) {
  transform: translate(42px,42px);
}
.flechaIzq .circle:nth-child(8) {
  transform: translate(50px,66px);
}
.flechaIzq .circle:nth-child(9) {
  transform: translate(42px,91px);
}
.flechaIzq .circle:nth-child(10) {
  transform: translate(24px,113px);
}
.flechaIzq .circle:nth-child(11) {
  transform: translate(0,132px);
}

.flechaDch .circle:nth-child(1) {
  transform: translate(0,132px);
}
.flechaDch .circle:nth-child(2) {
  transform: translate(3px,112px);
}
.flechaDch .circle:nth-child(3) {
  transform: translate(20px,131px);
}
.flechaDch .circle:nth-child(4) {
  transform: translate(6px,92px);
}
.flechaDch .circle:nth-child(5) {
  transform: translate(26px,110px);
}
.flechaDch .circle:nth-child(6) {
  transform: translate(40px,130px);
}
.flechaDch .circle:nth-child(7) {
  transform: translate(42px,90px);
}
.flechaDch .circle:nth-child(8) {
  transform: translate(50px,66px);
}
.flechaDch .circle:nth-child(9) {
  transform: translate(42px,41px);
}
.flechaDch .circle:nth-child(10) {
  transform: translate(24px,18px);
}
.flechaDch .circle:nth-child(11) {
  transform: translate(0,0);
}

@keyframes animacionPuntoFlecha {
  50% {
    background-color: transparent;
  }
}