/* Breadcrumb - https://css-tricks.com/triangle-breadcrumbs/ */

/* Level 1 */
.breadcrumb1 { 
  list-style: none; 
  overflow: hidden; 
  font: 15px Sans-Serif;
}

.breadcrumb1 li { 
  float: left; 
}

.breadcrumb1 li a {
  color: white;
  text-decoration: none; 
  padding: 5px 0 5px 65px;
  background: hsla(36,100%,80%,1); /* fallback color */
  background: hsla(36,100%,80%,1); 
  position: relative; 
  display: block;
  float: left;
}

.breadcrumb1 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 hsla(36,100%,80%,1);
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  left: 100%;
  z-index: 2; 
}

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

.breadcrumb1 li:first-child a {
  padding-left: 5px;
}

.breadcrumb1 li:nth-child(2) a       { background:        hsla(36,100%,80%,1); }
.breadcrumb1 li:nth-child(2) a:after { border-left-color: hsla(36,100%,80%,1); }
.breadcrumb1 li:nth-child(3) a       { background:        hsla(36,100%,80%,1); }
.breadcrumb1 li:nth-child(3) a:after { border-left-color: hsla(36,100%,80%,1); }
.breadcrumb1 li:nth-child(4) a       { background:        hsla(36,100%,80%,1); }
.breadcrumb1 li:nth-child(4) a:after { border-left-color: hsla(36,100%,80%,1); }
.breadcrumb1 li:nth-child(5) a       { background:        hsla(36,100%,80%,1); }
.breadcrumb1 li:nth-child(5) a:after { border-left-color: hsla(36,100%,80%,1); }

.breadcrumb1 li:last-child a {
  background: white;
  color: black;
  cursor: default;
}

.breadcrumb1 li:last-child a::after { 
  border: 0; 
  border-left-color: white;
}

.breadcrumb1 li a:hover { 
  background: hsla(36, 100%, 50%, 1); 
}

.breadcrumb1 li a:hover:after { 
  border-left-color: hsla(36, 100%, 50%, 1); 
}

/* Level 2 */
.breadcrumb2 { 
  list-style: none; 
  overflow: hidden; 
  font: 15px Sans-Serif;
}

.breadcrumb2 li { 
  float: left; 
}

.breadcrumb2 li a {
  color: white;
  text-align: center; 
  padding: 5px 0 5px 40px;
  background: hsla(60,20%,95%,1); /* fallback color */
  background: hsla(60,20%,95%,1); 
  border-right: 2px solid hsla(60,20%,70%,1);   
  position: relative; 
  display: block;
  float: left;
}

.breadcrumb2 li a::after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 1px solid white;
  position: absolute;
  top: 0%;
  margin-top: -50px; 
  left: 100%;
  z-index: 2; 
}

.breadcrumb2 li a::before { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent;       
  border-bottom: 50px solid transparent;
  border-left: 2px solid white;
  position: absolute;
  top: 0%;
  margin-top: -50px; 
  margin-left: 0px;
  left: 100%;
  z-index: 1; 
}

.breadcrumb2 li:first-child a {
  padding-left: 5px;
}

.breadcrumb2 li:nth-child(2) a       { background:        hsla(60,20%,95%,1); }
.breadcrumb2 li:nth-child(2) a:after { border-left-color: hsla(60,20%,95%,1); }
.breadcrumb2 li:nth-child(3) a       { background:        hsla(60,20%,95%,1); }
.breadcrumb2 li:nth-child(3) a:after { border-left-color: hsla(60,20%,95%,1); }
.breadcrumb2 li:nth-child(4) a       { background:        hsla(60,20%,95%,1); }
.breadcrumb2 li:nth-child(4) a:after { border-left-color: hsla(60,20%,95%,1); }
.breadcrumb2 li:nth-child(5) a       { background:        hsla(60,20%,95%,1); }
.breadcrumb2 li:nth-child(5) a:after { border-left-color: hsla(60,20%,95%,1); }
.breadcrumb2 li:nth-child(6) a       { background:        hsla(60,20%,95%,1); }
.breadcrumb2 li:nth-child(6) a:after { border-left-color: hsla(60,20%,95%,1); }

.breadcrumb2 li:last-child a {
  background: transparent;
  color: black;
  text-align: left;
  pointer-events: none;
  cursor: default;
}

.breadcrumb2 li:last-child a::after { 
  border: 2px; 
}

.breadcrumb2 li a:hover { 
  background: hsla(60,20%,90%,1); 
}

.breadcrumb2 li a:hover:after { 
  border-left-color: hsla(60,20%,90%,1); 
}