// base styles
// --------------------

html {
  font-size: 16px;
}

a {
  &:hover,
  &:focus {
    text-decoration: none;
  }
}

.container {
  background-color: $container-bg;
}

.sr {
  @extend .sr-only;
}

.page-header {
  .hd-1 {
    margin: 0;
  }
}

.breadcrumb {
  > li {
    + li:before {
      content: "#{$breadcrumb-separator} ";
    }
  }
}

.message-error {
  border-top: 4px solid #B20610;
  h3 {
    margin-bottom: 10px;
    font-weight: bold;
  }
}

.depth {
  padding: 1.25rem 1.25rem;
}

.depth-2 {
  background: #fcfcfc;
  box-shadow: 0 1px 2px 1px rgba(167, 164, 164, 0.25);
}

.depth--3 {
  background: #34383a;
  text-align: center;
  .copy {
    color: #e7e6e6;
    @include container-fixed;

    @media (min-width: $screen-sm-min) {
      width: $container-sm;
    }
    @media (min-width: $screen-md-min) {
      width: $container-md;
    }
    @media (min-width: $screen-lg-min) {
      width: $container-lg;
    }
  }
}
