/* ------ Celular ---------- */

@media (max-width: 576px) {

    .barraProgreso .line {
        width: 67%;
        margin-top: 4%;
        /*margin-left: 22px;*/
        position: absolute;
    }

    .prog {
        background-color: white;
        padding-left: 45%;
        border-radius: 100%;
        padding-right: 45%;
        padding-top: 30%;
        font-size: 16px;
        font-weight: 900;
        padding-bottom: 30%;
        margin-bottom:5px;
    }
    .barraProgreso p{
        margin:0;
    }

    .barraProgreso .step{
        font-size: 6px;
        /*margin-left:-20px;
        margin-right:-20px;*/
    }
}

/* ------ Web ---------- */

@media(min-width: 577px) {

    .barraProgreso .line {
        width: 65%;
        margin-top: 0%;
        margin-left: 22px;
        position: absolute;
    }

    .prog {
        background-color: white;
        padding-left: 16%;
        border-radius: 100%;
        padding-right: 16%;
        padding-top: 12%;
        font-size: 24px;
        font-weight: 900;
        padding-bottom: 12%;
    }
}