/* Style the list */

ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    /*background-color: #eee;*/
    font-size: 17px;
    display: inline-block;
    /*clear:right;*/
    width: 100%
}

ul.breadcrumb li {
  float: left;
  display: inline-block;
}
/* Display list items side by side */
/*ul.breadcrumb li {
    float: left;
  display: inline-block;
}
*/
/* Add a slash symbol (/) before/behind each list item 
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: ">\00a0";
}

 Add a color to all links inside the list */

 
/* Add a color on mouse-over 
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}*/
.breadcrumb a {
  transition: all 250ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  background: #E1E1E1;
  color: #657778;
  display: inline-block;
  text-decoration: none;
  line-height: 44px;
  padding-right: 6px;
  padding-left: 6px;
  margin-right: 4px;
  padding-left: 18px;
  border-right: 4px solid #fff;
  position: relative;

}
.breadcrumb a:hover {
    transition: all 250ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
    background: #F7C05D;
    color: #000;
  }
.breadcrumb a:hover:after {
  border-width: 22px 0 22px 10px;
  border-color:transparent transparent transparent #F7C05D;;
  z-index: 2;
}

.breadcrumb a:after {
  transition: all 250ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: -10px; // position it outside the anchor tag
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22px 0 22px 10px;
  border-color: transparent transparent transparent #E1E1E1;
  z-index: 2;
}

.breadcrumb a:before {

  content: '';
  display: block;
  position: absolute;
 
  right: -16px; // positioned 4px away from the original triangle
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22px 0 22px 14px;
  border-color: transparent transparent transparent #fff;
  z-index: 1; // lower z-index so it sits below our original
}
}