.stepper{list-style-type: none;padding:0px;}
.stepper li{
    display: inline-block;
    padding:0px 10px;
}
.stepper li{position:relative;}
.stepper li:hover .step-link{background-color:#eee;}
.stepper li:after{
    content:" ";
    width:110%; height:1px; background:#ddd;
    position: absolute;
    top:50%; left:-10px;
    z-index: 0;
}
.stepper li .step-link{
    display: inline-block;
    background:white;
    position: relative;
    z-index: 2;
}

.stepper li:first-of-type {padding-left:0px;}
.stepper li:first-of-type:after{left:0px;}
.stepper li:last-of-type {padding-right:0px;}
.stepper li:last-of-type:after{right:0px;left:auto;}

.stepper li .step-link .circle{
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: .5rem;
    line-height: 1.7rem;
    color: #fff;
    text-align: center;
    background: rgba(0,0,0,0.38);
    border-radius: 50%;
}
.stepper li.completed .circle{background-color:#00c851;content:"O";}
.stepper li.invalid .circle{background-color:#ff3547;}
.stepper li.active .circle{background-color:#2a3762;}