.star {
  width: 20px;
  height: 20px;
  position: absolute;
}
.star:before, .star:after {
  content: "";
  display: block;
  width: 15%;
  height: 100%;
  border-radius: 15px;
  background: #c7ff00;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.star.alt:before, .star.alt:after {
  background: #00b7da;
}
.star.alt2:before, .star.alt2:after {
  background: #FFF;
}
.star:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.sparkle {
  width: 7px;
  height: 7px;
  position: absolute;
  border-radius: 50%;
  background: #c7ff00;
}
.sparkle.alt {
  background: #00b7da;
}
.sparkle.alt2 {
  background: #FFF;
}

.mitad {
  transform: scale(0.6);
}

.pequeno {
  transform: scale(0.4);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  90% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1);
  }
}
.pulse {
  animation: pulse 1s linear infinite;
}

.pulse-1 {
  animation: pulse 1.1s 300ms linear infinite;
}

.pulse-2 {
  animation: pulse 0.8s 600ms linear infinite;
}

.pulse-3 {
  animation: pulse 1.3s 900ms linear infinite;
}