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