.steps{margin-left:auto;margin-right:auto;width:100%;margin-top:25px;}ul.progressbar{height:100%;padding:0;margin:0;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;justify-content:center;margin-bottom:30px;}ul.progressbar li{list-style-type:none;color:rgb(165,165,165);float:left;position:relative;text-align:center;font-size:11px;text-transform:uppercase;}ul.progressbar li:before{content:counter(step);counter-increment:step;color:#333;width:42px;height:42px;line-height:42px;border-radius:50%;display:block;text-align:center;margin:0 49px 10px 45px;background:rgb(216,216,216);}ul.progressbar li:after{content:"";background:#ddd;position:absolute;width:100%;height:14px;top:14px;right:-42%;z-index:-1;}ul.progressbar li:last-child:after{content:none;}ul.progressbar li.done:before,ul.progressbar li.done:after{background:#fb4;color:#fff;}ul.progressbar li.current:before{background:#263238;color:#fff;}ul.progressbar li.fail:before{background:rgb(229,48,40)}