@media all{
    .containerprogressbar {
      margin: 0 0 30px 0; 
    }
    .progressbar {
        counter-reset: step;
    }
    .progressbar li {
        list-style-type: none;
        width: 20%;
        float: left;
        font-size: 12px;
        font-weight: 400;
        position: relative;
        text-align: center;
        line-height: 1.2em;
        color: #87c7f5;
    }
    .progressbar li:before { /* pallino */
        width: 25px;
        height: 25px;
        /*content: counter(step);
        counter-increment: step;*/
        content: "";
        line-height: 25px;
        border: 1px solid #ABD8F8;
        display: block;
        text-align: center;
        margin: 0 auto 5px auto; /* definisce lo spazio tra pallino e testo*/
        border-radius: 50%;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url(/res/img/progressbarinattesa.svg);
    }
    .progressbar li:after { /* righetta */
        width: 100%;
        height: 1px;
        content: '';
        position: absolute;
        background-color: #ABD8F8;
        top: 13px;
        left: -50%;
        z-index: -1;
    }
    .progressbar li:first-child:after {
        content: none;
    }
    .progressbar li.fatto {
        color: #256BBD;
        font-weight: 600;
    }
    .progressbar li.fatto:before {
        border-color: #256BBD;
        background-color: #256BBD;
        content: "";
        background-image: url(/res/img/progressbarfatto.svg);
    }
    .progressbar li.fatto + li:after {
        background-color: #256BBD;
    }
    .progressbar li.questo{
        color: #256BBD;
        /*font-weight: 600;*/
    }
    .progressbar li.questo:before {
        border-color: #ABD8F8;
        background-color: #ABD8F8;
        content: "";
        background-image: url(/res/img/progressbarquesto.svg);
    }
}