ol{margin:0;padding:0;overflow:hidden}ol li{float:left;list-style-type:none;display:inline-block;position:relative;margin:0;padding:0;text-align:center;line-height:30px;height:30px;background-color:#f0f0f0}ol li>span{display:block;color:#999;font-weight:bold;text-transform:uppercase}ol li.done>span{color:#fff;background-color:#286090}ol li>span:after,ol li>span:before{content:"";display:block;width:0;height:0;position:absolute;top:0;left:0;border:solid transparent;border-left-color:#f0f0f0;border-width:15px}ol li>span:after{top:-5px;z-index:1;border-left-color:#fff;border-width:20px}ol li>span:before{z-index:2}ol li.done+li>span:before{border-left-color:#286090}ol li.first-child>span:before{display:none}ol li:first-child i,ol li:last-child i{display:block;height:0;width:0;position:absolute;top:0;left:0;border:solid transparent;border-left-color:#fff;border-width:15px}ol li:last-child i{left:auto;right:-15px;border-left-color:transparent;border-top-color:#fff;border-bottom-color:#fff}.hidden{display:none}.align-bottom{position:relative;transform:translateY(100%)}