/*==================================================*/


.progressbar {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.progressbar li {
    position: relative;
    list-style-type: none;
    text-align: center;
    text-transform: uppercase;
    /* width: 33.333%; */
    width : 25%;
    color: #999999;
    font-weight: bold;
}

.progressbar li:before {
    display: block;
    width: 18px;
    height: 18px;
    margin: 7px auto 20px auto;
    content: '';
    text-align: center;
    border-radius: 50%;
    background-color: #F5F5F5;
}

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

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

.progressbar li.active,
.progressbar li.complete {
    color: #0070BD;
}

.progressbar li.active:before,
.progressbar li.complete:before {
    background-color: #0070BD;
}

.progressbar li.active:after,
.progressbar li.complete:after {
    background-color: #0070BD;
}