#block-breadcrumbs {
  margin-bottom: 2em;
}
#block-breadcrumbs ol {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
#block-breadcrumbs ol li {
  display: block;
  margin-right: -16px;
  overflow: hidden;
  padding-right: 32px;
}
#block-breadcrumbs ol li a {
  color: var(--desktop-text);
  text-decoration: none;
  padding: 10px 0 10px 24px;
  background: #eee;
  position: relative;
  display: flex;
  float: left;
  height: 100%;
  align-items: center;
}
#block-breadcrumbs ol li a:before, #block-breadcrumbs ol li a:after,
#block-breadcrumbs ol li span.title:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: calc(100% - 1px);
}
#block-breadcrumbs ol li a:before,
#block-breadcrumbs ol li span.title:before {
  border-left: 30px solid white;
  margin-left: 1px;
  z-index: 1;
}
#block-breadcrumbs ol li a:after {
  border-left: 30px solid #eee;
  z-index: 2;
}
#block-breadcrumbs ol li a:hover {
  background: #ddd;
}
#block-breadcrumbs ol li a:hover:after {
  border-left-color: #ddd;
}
#block-breadcrumbs ol li:first-of-type a {
  background: var(--desktop-header-bg);
  color: #fff;
}
#block-breadcrumbs ol li:first-of-type a:after {
  border-left: 30px solid var(--desktop-header-bg);
  z-index: 2;
}
#block-breadcrumbs ol li span.title {
  display: flex;
  position: relative;
  padding: 10px 0 10px 24px;
  background: #f8f8f8;
}
#block-breadcrumbs ol li span.title:after {
  border-left: 30px solid #f8f8f8;
  z-index: 2;
}