/****************************************************************************** 
* Breadcrumbs
******************************************************************************/

  .breadcrumbs {
    align-items: center;
    background-color: $grey-200;
    border-bottom: 1px solid rgba($black, 0.06);
    border-top: 1px solid rgba($black, 0.06);
    display: flex;
    font-size: 0.875rem; 
    font-weight: 700;
    justify-content: flex-start;
    letter-spacing: 1px;
    min-height: 60px;
    padding: 1rem 0;
    text-transform: uppercase;

    .container {
      flex: 1 1;
      text-align: right;
    }

    a {
      color: $color-800;
      text-decoration: none;

      &:hover,
      &:focus,
      &:active {
        color: $color-400;
      }

      &::after {
        color: $black;
        font-size: inherit;
        margin: 0 0.25rem 0 0.25rem;
        opacity: 0.8;
        position: relative;
        text-decoration: none;
        top: -1px;
      }

      &::before {
        margin-right: 0.25rem;
      }
    }

    strong {
      color: $black;
      font-weight: 400;
      letter-spacing: 0;

      &::after {
        font-size: inherit;
        margin: 0 0.25rem 0 0.5rem;
        opacity: 0.8;
        position: relative;
        text-decoration: none;
        top: -1px;
      }
    }

    a,
    strong {
      
      &.fa-icon-angle-double-right::after {
        content: '\f101';
      } 
    }

    span {
      font-weight: 400;
      letter-spacing: 0;
    }
  }

/****************************************************************************** 
* Breadcrumbs Mobile
******************************************************************************/
  
  @media (max-width: $breakpoint-tablet) {
  
    .breadcrumbs {
      margin-top: 80px;
      padding: 1rem 0;

      .container {
        text-align: left;
      }
    }
  }