@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans);.orderbreadcrumbcontainer{text-align:center;background:#f2eee6;padding:5px}.orderbreadcrumb{font-family:'Merriweather Sans',arial,verdana;text-align:center;display:inline-block;overflow:hidden;border-radius:5px;counter-reset:flag;padding:0}.orderbreadcrumb a{text-decoration:none;outline:none;display:block;float:left;font-size:14px;line-height:38px;margin-top:2px;padding:0 10px 0 60px;background:#20629f;color:#fff;transition:all 0.5s;position:relative;border:3px solid #fff}.orderbreadcrumb a:first-child{padding-left:46px;border-radius:5px 0 0 5px}.orderbreadcrumb a:first-child:before{left:14px}.orderbreadcrumb a:last-child{border-radius:0 5px 5px 0;padding-right:20px}.orderbreadcrumb a.active{background:#bf996a;color:#fff}.orderbreadcrumb a.active:after{background:#bf996a}.orderbreadcrumb a:after{content:'';position:absolute;top:0;right:-18px;width:36px;height:36px;transform:scale(.707) rotate(45deg);z-index:1;box-shadow:2px -2px 0 2px #fff0,3px -3px 0 2px rgb(255 255 255);background:#20629f;color:#000;transition:all 0.5s;border-radius:0 5px 0 50px}.orderbreadcrumb a:last-child:after{content:none}.orderbreadcrumb a:before{color:#000;content:counter(flag);counter-increment:flag;border-radius:100%;width:20px;height:20px;line-height:20px;margin:8px 0;position:absolute;top:0;left:30px;background:#f2eee6;box-shadow:0 0 0 1px #cfcfc6}