.stepper-container {
    width: 100%;
    text-align: center;
}

.stepper-progress-bar {
    counter-reset: step;
}

.stepper-progress-bar li {
    list-style-type: none;
    float: left;
    width: 33.33%;
    position: relative;
}

.stepper-progress-bar li:before {
    content: counter(step);
    counter-increment: step;
    width:30px;
    height:30px;
    line-height:30px;
    border-radius:50%;
    border: 1px solid #ddd;
    display:block;
    text-align:center;
    margin: 0 auto 10px auto;
    background-color:#D1D2D4;
    color:#fff;
}

.stepper-progress-bar li:after {
    content:'';
    position:absolute;
    width:100%;
    height:3px;
    background-color:#ddd;
    top:13.5px;
    left:-50%;
    z-index:-1;
}

.stepper-progress-bar li:first-child:after {
    content: none;
}

.stepper-progress-bar li.stepper-active {
    color:#000;
}

.stepper-progress-bar li.stepper-active:before {
    border-color:#DF0707;
    background-color:#DF0707;
}

.stepper-progress-bar li.stepper-active:after {
    background-color: #DF0707;
}