/*
    serve animated-counter.js
    
    ESEMPIO: 

    <div class="row bg-white s-counter counter-animate counter-active">
        <div class="row counter-cover">
            <div class="col-6 col-sm-4 counter-item">
                <div class="counter-number"><span data-number="1433" data-initialvalue="1000">0</span></div>
                <h5>Badge creati</h5>
            </div>
            <div class="col-6 col-sm-4 counter-item">
                <div class="counter-number"><span data-number="50128" data-initialvalue="49800">0</span>k</div>
                <h5>Badge rilasciati</h5>
            </div>
            <div class="col-12 col-sm-4 counter-item">
                <div class="counter-number"><span data-number="996" data-initialvalue="850">0</span></div>
                <h5>Badge pubblicati</h5>
            </div>
        </div>
    </div>

*/

.counter-item {
    text-align: center;
    color: var(--dark-blue);
    font-weight: 600;
    border-right: 15px solid #f4f5f7;
    padding-bottom: 10px
}

    .counter-item:last-child {
        border-right: none
    }

.counter-number {
    font-size: 55px;
    position: relative
}

    .counter-number:before {
        content: '';
        position: absolute;
        width: 50px;
        height: 7px;
        background-color: var(--contrast);
        bottom: -6px;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }

.counter-item h5 {
    margin-top: 20px;
    text-transform: uppercase;
    color: var(--dark-blue);
    letter-spacing: 0.12em;
    font-weight: 600;
    font-size: 14pt;
}