.progressbar li img{width:15px;}.progressbar{counter-reset:step;}.progressbar li{list-style-type:none;width:14%;float:left;font-size:12px;position:relative;text-align:center;text-transform:uppercase;color:#7d7d7d;}.progressbar li:before{width:30px;height:30px;content:counter(step);counter-increment:step;line-height:30px;border:2px solid #7d7d7d;display:block;text-align:center;margin:0 auto 10px auto;border-radius:50%;background-color:#fff;}.progressbar li:after{width:100%;height:2px;content:"";position:absolute;background-color:#7d7d7d;top:15px;left:-50%;z-index:-1;}.progressbar li:first-child:after{content:none;}.progressbar li.active{color:#008000;}.progressbar li.active:before{border-color:#55b776;}.progressbar li.active+li:after{background-color:#55b776;}