.pop {
  animation: pop 0.3s linear forwards;
}
@keyframes pop {
  25% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.0);
  }
}
.reveal {
  animation: reveal 3s linear 1;
}
@keyframes reveal {
  0% {
    opacity: 1;
    display: block;
  }
  30% {
    opacity: 1;
    display: block;
  }
  60% {
    opacity: 0.7;
    display: block;
  }
  90% {
    opacity: 0.3;
    display: block;
  }
  100% {
    opacity: 0;
  }
}
.count-bar20 {
  animation: countBar20 1s linear forwards;
}
@keyframes countBar20 {
  from {
    width: 0;
  }
  to {
    width: 20%;
  }
}

.count-bar25 {
  animation: countBar25 1s linear forwards;
}
@keyframes countBar25 {
  from {
    width: 0;
  }
  to {
    width: 25%;
  }
}

.count-bar40 {
  animation: countBar40 1s linear forwards;
}
@keyframes countBar40 {
  from {
    width: 20%;
  }
  to {
    width: 40%;
  }
}

.count-bar50 {
  animation: countBar50 1s linear forwards;
}
@keyframes countBar50 {
  from {
    width: 25%;
  }
  to {
    width: 50%;
  }
}

.count-bar60 {
  animation: countBar60 1s linear forwards;
}
@keyframes countBar60 {
  from {
    width: 40%;
  }
  to {
    width: 60%;
  }
}

.count-bar75 {
  animation: countBar75 1s linear forwards;
}
@keyframes countBar75 {
  from {
    width: 50%;
  }
  to {
    width: 75%;
  }
}

.count-bar80 {
  animation: countBar80 1s linear forwards;
}
@keyframes countBar80 {
  from {
    width: 60%;
  }
  to {
    width: 80%;
  }
}

.count-bar100 {
  animation: countBar100 1s linear forwards;
}
@keyframes countBar100 {
  from {
    width: 75%;
  }
  to {
    width: 100%;
  }
}

.pin-move20 {
  animation: pinmove20 1s linear forwards;
}
@keyframes pinmove20 {
  from {
    left: 0;
  }
  to {
    left: calc(20% - 15px);
  }
}
.pin-move40 {
  animation: pinmove40 1s linear forwards;
}
@keyframes pinmove40 {
  from {
    left: calc(20% - 15px);
  }
  to {
    left: calc(40% - 15px);
  }
}
.pin-move60 {
  animation: pinmove60 1s linear forwards;
}
@keyframes pinmove60 {
  from {
    left: calc(40% - 15px);
  }
  to {
    left: calc(60% - 15px);
  }
}
.pin-move80 {
  animation: pinmove80 1s linear forwards;
}
@keyframes pinmove80 {
  from {
    left: calc(60% - 15px);
  }
  to {
    left: calc(80% - 15px);
  }
}
.lightSpeedIn {
  animation: lightSpeedIn 0.7s ease-in forwards;
}
.lightSpeedOut {
  animation: lightSpeedOut 0.7s ease-out forwards;
}
@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
@keyframes lightSpeedOut {
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  60% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}