#progressbar {

margin-bottom: 30px;

overflow: hidden;

counter-reset: step;

}

#progressbar li {

list-style-type: none;

color: #ccc;

text-transform: uppercase;

font-size: 9px;

width: 25%;

float: left;

position: relative;

text-align: center;

}

#progressbar li:before {

content: counter(step);

counter-increment: step;

width: 20px;

line-height: 20px;

display: block;

font-size: 10px;

color: #333;

background: #ccc;

border-radius: 3px;

margin: 0 auto 5px auto;

text-align: center;

position:relative;

z-index: 2;

}

#progressbar li:after {

content: '';

width: 100%;

height: 2px;

background: #ccc;

position: absolute;

left: -50%;

top: 9px;

z-index: 1; 

}

#progressbar li:first-child:after {

content: none;

}

#progressbar li.active:before,  #progressbar li.active:after{

background: #27AE60;

color: white;

}