@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: 0px;
}
.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: white;
transition: all 0.5s;
position: relative;
border: 3px solid #ffffff; } .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: white;
}
.orderbreadcrumb a.active:after {
background: #bf996a;
} .orderbreadcrumb a:after {
content: '';
position: absolute;
top: 0;
right: -18px;  width: 36px;
height: 36px; transform: scale(0.707) rotate(45deg); z-index: 1;  box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.0), 3px -3px 0 2px rgba(255, 255, 255, 1.0);
background: #20629f;
color: black;
transition: all 0.5s; border-radius: 0 5px 0 50px;
} .orderbreadcrumb a:last-child:after {
content: none;
} .orderbreadcrumb a:before {
color: #000000;
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;
}