/**
 * -----------------------------------------------------------------------------
 * New Colors - Source: Figma (these names will not change in Figma as they come
 * from the Figma library, we should standardize around them).
 * -----------------------------------------------------------------------------
 */
/* Custom breakpoints for mobile carousel */
/* Navy icons */
nav#block-navycom-main-menu:before {
  content: "";
  display: block;
  position: absolute;
  height: 40px;
  background: #05567c;
  width: 100%;
  top: 58px;
  z-index: 1;
  left: 0;
}
@media (min-width: 992px) {
  nav#block-navycom-main-menu:before {
    top: 63px;
  }
}

.breadcrumb-header {
  position: relative;
  width: 100%;
  z-index: 2;
}
.breadcrumb-header .region.region-breadcrumb {
  position: relative;
  left: 0;
  padding-left: 30px;
  padding-right: 14px;
}
@media (min-width: 992px) {
  .breadcrumb-header .region.region-breadcrumb {
    left: 5%;
    padding-left: 0;
    padding-right: 0;
  }
}
.breadcrumb-header .region.region-breadcrumb .breadcrumb-wrapper {
  position: relative;
  width: 100%;
  height: 40px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .breadcrumb-header .region.region-breadcrumb .breadcrumb-wrapper:before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    height: 100%;
    opacity: 1;
    z-index: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(16, 37, 52, 0)), color-stop(70%, rgba(16, 37, 52, 0.8)), to(rgb(16, 37, 52)));
    background: linear-gradient(90deg, rgba(16, 37, 52, 0) 50%, rgba(16, 37, 52, 0.8) 70%, rgb(16, 37, 52) 100%);
  }
  .breadcrumb-header .region.region-breadcrumb .breadcrumb-wrapper:after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(7, 86, 124, 0)), color-stop(70%, rgba(7, 86, 124, 0.8)), to(rgb(7, 86, 124)));
    background: linear-gradient(90deg, rgba(7, 86, 124, 0) 50%, rgba(7, 86, 124, 0.8) 70%, rgb(7, 86, 124) 100%);
  }
}
.breadcrumb-header .region.region-breadcrumb .breadcrumb-wrapper .breadcrumb {
  padding: 10px 20px 10px 0;
  margin-bottom: 0;
  list-style: none;
  background-color: transparent;
  border-radius: 0;
  width: 100%;
  height: 50px;
  white-space: nowrap;
  overflow-x: scroll;
  scroll-behavior: smooth;
}
.breadcrumb-header .region.region-breadcrumb .breadcrumb-wrapper .breadcrumb::-webkit-scrollbar {
  display: none;
}
.breadcrumb-header .region.region-breadcrumb .breadcrumb-wrapper .breadcrumb > li {
  display: inline-block;
}
.breadcrumb-header .region.region-breadcrumb .breadcrumb-wrapper .breadcrumb > li a {
  color: #fff;
  text-decoration: none;
  font-family: "Roboto-Regular", Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 1;
}
.breadcrumb-header .region.region-breadcrumb .breadcrumb-wrapper .breadcrumb > li a:hover {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 0.6;
}
.breadcrumb-header .region.region-breadcrumb .breadcrumb-wrapper .breadcrumb > li > span {
  opacity: 0.6;
}
.breadcrumb-header .region.region-breadcrumb .breadcrumb-wrapper .breadcrumb > li + li:before {
  content: ">";
  padding: 0 5px;
  color: #fff;
}

@media (max-width: 767px) {
  .breadcrumb-header.in .region.region-breadcrumb .breadcrumb-wrapper:before {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
  }
  .breadcrumb-header.in .region.region-breadcrumb .breadcrumb-wrapper:after {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
  }
}