.breadcrumb {
  list-style: none;
  display: inline-block;
  background-color:transparent;
  margin-bottom:0;
}

.breadcrumb {
    font-size: 7.5px;
    font-size: 0.75rem;
}

.breadcrumb .icon {
    font-size: 8px;
    font-size: 0.8rem;
}

.breadcrumb li {
  float: left;
}

.breadcrumb li a {
    color: #FFF;
    display: block;
    background: #9c842d;
    text-decoration: none;
    position: relative;
    height: 30px;
    line-height: 30px;
    padding: 0 2px 0 2px;
    text-align: center;
    margin-right: 23px;
}

.breadcrumb li:nth-child(even) a {
  background-color: #9c842d;
}
.breadcrumb li:nth-child(even) a:before {
  border-color: #9c842d; 
  border-left-color: transparent;
  /*-moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;*/
}
.breadcrumb li:nth-child(even) a:after {
  border-left-color: #9c842d; 
}
.breadcrumb li:first-child a {
  /*padding-left: 15px;*/
}
.breadcrumb li:first-child a:before {
  border: none;
}


.breadcrumb li:last-child a {
    padding-right: 10px;
    background-color: #9e4b78;
}

.breadcrumb li:last-child a:after {
  border: none;
}
.breadcrumb li a:before, .breadcrumb li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #9c842d; 
  border-width: 15px 10px;
  width: 0;
  height: 0;
}
.breadcrumb li a:before {
  left: -20px;
  border-left-color: transparent;
}

.breadcrumb li:last-child a:before {
  border-color:#9e4b78; 
    left: -20px;
  border-left-color: transparent;
}

.breadcrumb li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #9c842d;
}
.breadcrumb li a:last-child {
  border-left-color: #9e4b78;
}

.breadcrumb li:not(:last-child) a:hover {
  background-color: #c78cac;
}
.breadcrumb li:not(:last-child) a:hover:before {
  border-color: #c78cac; 
  border-left-color: transparent;
}
.breadcrumb li:not(:last-child) a:hover:after {
  border-left-color: #c78cac; 
}

.breadcrumb li:not(:last-child) a:active {
  background-color:#c78cac;
}
.breadcrumb li:not(:last-child) a:active:before {
  border-color:#c78cac; 
  border-left-color: transparent;
}
.breadcrumb li:not(:last-child) a:active:after {
  border-left-color: #c78cac;
}

/* larger font for wider devices */
@media (min-width: 400px) {

    .breadcrumb {
        font-size: 9px;
        font-size: 0.9rem;
    }

    .breadcrumb .icon {
        font-size: 10px;
        font-size: 1.0rem;
    }

    .breadcrumb li a {
        padding: 0 10px 0 5px;
    }

    .breadcrumb li:last-child a {
        padding-right: 15px;
    }
}