.mystep{background:white;position:relative;font-size:12px;line-height:60px;color:black;display:inline-block;box-shadow:0 0 15px 1px rgba(0,0,0,0.35);overflow:hidden;border-radius:5px;counter-reset:flag;left:30px;padding-right:10px;margin-bottom:10px;width:95%}.mystep a{text-decoration:none;outline:0;display:block;float:left;font-size:12px;line-height:60px;color:white;padding:0 10px 0 70px;position:relative;width:20%}.mystep a:first-child{padding-left:46px;border-radius:5px 0 0 5px}.mystep a:first-child:before{left:14px}.mystep a:last-child{border-radius:0 5px 5px 0;padding-right:20px}.mystep a.active{background:#9eeb62}.mystep a.active:after{background:#9eeb62}.mystep a:after{content:'';position:absolute;top:0;right:-30px;width:60px;height:60px;transform:scale(0.707) rotate(45deg);z-index:1;box-shadow:2px -2px 0 1.5px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1);border-radius:0 5px 0 50px}.mystep a:last-child:after{content:none;color:royalblue}.mystep a:before{content:counter(flag);counter-increment:flag;border-radius:100%;width:20px;height:20px;line-height:20px;margin:8px 0;position:absolute;top:12px;left:40px;font-weight:bold;padding-left:6px}.last_cat{margin-left:30px}.last_step{margin-left:30px;padding:0 10px 0 40px}.last_step:before{content:counter(flag);counter-increment:flag;border-radius:100%;width:20px;height:20px;line-height:20px;margin:8px 0 0 -30px;position:absolute;top:12px;background:white;font-weight:bold;padding-left:6px;box-shadow:0 0 0 1px #ccc}.mystepflat a,.mystepflat a:after{background:white;color:black;transition:all .5s}.mystepflat a:before{background:white;box-shadow:0 0 0 1px #ccc}.mystepflat a:hover,.mystepflat a:hover:after{background:#bcf2dd}.flat a,.flat a:after{background:white;color:black;transition:all .5s}.flat a:before{background:white;box-shadow:0 0 0 1px #ccc}.flat a:hover,.flat a:hover:after{background:#bcf2dd}div.mystep a.mystep_done,div.mystep a.mystep_done:after{background:grey}div.mystep a.mystep_done:hover,div.mystep a.mystep_done:hover:after{background:#333}