.ms-bread-crumb {

  .ms-bread-crumb-container {
    height: 32px;
    margin: 0 -15px;
  }

  .step {
    background: #eaeaea;
    text-transform: uppercase;
    padding: 0 15px;
    display: block;
    height: 32px;
    line-height: 32px;

    text-decoration: none;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
    border-right: 1px solid #fff;

    span {
      color: $brand-brown;
      width: 100%;
      display: inline-block;
    }

    a {
      text-decoration: none;
    }
  }

  .step:hover {
    background: $brand-secondary-light;
    color: $brand-brown !important;
    text-decoration: none;
  }

  .step.current-step, .step.current-step:hover {
    background: $brand-secondary;

    span {
      color: #fff !important;
      text-decoration: none;
    }
  }

  .step:last-child {
    border-right:0;
  }

}