.counter {
    font-family: "Open Sans", "Courier New", Courier, monospace;
    display: inline-flex;
    font-weight: 900;
    overflow: hidden;
    line-height: normal !important;
}
.counter span {
    display: inline-block;
    line-height: 1;
    color: #3f1f7d;
}
.counter span.counting {
    animation-name: slide-up-from-bottom;
    animation-duration: 100ms;
    animation-iteration-count: 14;
}
.counter span.counting:nth-child(2) {
    animation-duration: 80ms;
    animation-iteration-count: 18;
}
.counter span.counting:nth-child(3) {
    animation-duration: 20ms;
    animation-iteration-count: 90;
}
.counter.length-4 span.counting:nth-child(3),
.counter.length-5 span.counting:nth-child(3) {
    animation-duration: 60ms;
    animation-iteration-count: 30;
}
.counter.length-4 span.counting:nth-child(4),
.counter.length-5 span.counting:nth-child(4) {
    animation-duration: 40ms;
    animation-iteration-count: 60;
}
.counter.length-5 span.counting:nth-child(5) {
    animation-duration: 40ms;
    animation-iteration-count: 65;
}
.counter span.counted {
    animation: 0.25s slide-up forwards !important;
}

@keyframes slide-up-from-bottom {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}
@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}