.container{
     width: 100%;
    }

     .progressbar{
     counter-reset: step;
     }

     .progressbar li {
       list-style-type: none;
       float: left;
       width: 33.30%;
       position: relative;
       text-align: center;
     }

   .progressbar li::before {
       content: counter(step);
       counter-increment: step;
        width: 35px;
        height: 35px;
        line-height: 35px;
        border: 1px solid #ddd;
        display: block;
        text-align: center;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        background-color:white;
        z-index: 2;
        position:inherit;


    }

    .progressbar li::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 10px;
        background-color: #ddd;
        top: 15px;
        left: -50%;
        z-index: 1;
    }

    .progressbar li:first-child:after{
        content: none;
    }

    .progressbar li.active{
       color:#1b6db0;
       border-color:#1b6db0;
    }

    .progressbar li.active.before{
       color:#1b6db0;
       border-color:#1b6db0;
    }

      .progressbar li.active + li::after{
       background-color:#1b6db0 !important;
       border-color:#1b6db0 !important;

    }