/**
 * @file
 * Styles for Bootstrap Barrio's breadcrumbs.
 */
.breadcrumb-outer {
  position: relative;
  margin-top: -15px;
  padding: calc(2rem + 15px) 0 2rem 0;
  color: var(--bs-white);
  text-shadow: 1px 1px 1px var(--bs-dark);
  background-color: var(--bs-dark-blue);
  overflow: hidden;
}

.breadcrumb-outer:before {
  content: "";
  width: 50%;
  height: 300%;
  background: url("../../img/laur.svg") center no-repeat fixed;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translate(0, -50%) rotate(45deg);
  opacity: .1;
  z-index: 1;
}

.breadcrumb-outer:after {
  content: "";
  width: 98%;
  height: 200%;
  background: url("../../img/field.svg") center no-repeat fixed;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 1%;
  transform: translate(0, -50%) rotate(3deg);
  opacity: .025;
  z-index: 1;
}

.breadcrumb-outer > .container {
  z-index: 2;
}


.breadcrumb {
  --bs-breadcrumb-item-active-color: #fff;
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-margin-bottom: 0;
  font-size: 0.8em;
  color: var(--bs-white);
  opacity: .9;
}

.breadcrumb-outer a {
  color: var(--bs-white);
}

.breadcrumb-outer .title {
  margin-bottom: 0;
}