/*  CREDITS TO https://css-tricks.com/triangle-breadcrumbs/
    Improved on it / altered a tad!
*/

.custom-breadcrumb li a::after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #000000;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  left: 100%;
  z-index: 10; 
}

.custom-breadcrumb li a::before { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent;       
  border-bottom: 50px solid transparent;
  border-left: 30px solid #d6d6d6;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  margin-left: 1px;
  left: 100%;
  z-index: 9; 
}

.custom-breadcrumb { 
  list-style: none; 
  overflow: hidden; 
}
.custom-breadcrumb li { 
  float: left; 
}
.custom-breadcrumb li a {
  color: white;
  text-decoration: none; 
  padding: 10px 0 10px 50px;
  background: #000000; 
  position: relative; 
  display: block;
  float: left;
  font-size: 14px!important;
}

.custom-breadcrumb li:first-child a {
  padding-left: 15px;
}
/*.custom-breadcrumb li:nth-child(2) a       { background:        var(--aoclife-yellow); }
.custom-breadcrumb li:nth-child(2) a:after { border-left-color: var(--aoclife-yellow); }
.custom-breadcrumb li:nth-child(3) a       { background:        var(--aoclife-red); }
.custom-breadcrumb li:nth-child(3) a:after { border-left-color: var(--aoclife-red); }
.custom-breadcrumb li:nth-child(4) a       { background:        var(--aoclife-sand); }
.custom-breadcrumb li:nth-child(4) a:after { border-left-color: var(--aoclife-sand); }*/
.custom-breadcrumb li:last-child a {
  background: transparent !important;
  color: black;
  pointer-events: none;
  cursor: default;
}
.custom-breadcrumb li:last-child a:after {
  border-left-color: #d6d6d6 !important;
}

.bg-breadcrumb-blue {
  background: var(--aoclife-blue)!important;
}

a.bg-breadcrumb-blue:after {
  border-left-color: var(--aoclife-blue)!important;
}

.bg-breadcrumb-red {
  background: var(--aoclife-red)!important;
}

a.bg-breadcrumb-red:after {
  border-left-color: var(--aoclife-red)!important;
}

.bg-breadcrumb-yellow {
  background: var(--aoclife-yellow)!important;
}

a.bg-breadcrumb-yellow:after {
  border-left-color: var(--aoclife-yellow)!important;
}

.bg-breadcrumb-green {
  background: var(--aoclife-green)!important;
}

a.bg-breadcrumb-green:after {
  border-left-color: var(--aoclife-green)!important;
}

.bg-breadcrumb-sand {
  background: var(--aoclife-sand)!important;
}

a.bg-breadcrumb-sand:after {
  border-left-color: var(--aoclife-sand)!important;
}

.bg-breadcrumb-grey {
  background: var(--aoclife-grey)!important;
}

a.bg-breadcrumb-grey:after {
  border-left-color: var(--aoclife-grey)!important;
}