// // Header // —————————————-

.brand-footer {

background-color: $color-gray-darker;
color: $color-bright;
font-size: $footer-font-size;
line-height: $footer-font-size;
padding: 0 building-units(1);

}

.brand-footer-separator {

border-bottom: 1px solid $footer-border-color;

@media (max-width: #{$grid-small-max}px) {
  margin-left: building-units(-1);
  margin-right: building-units(-1);
}

}

.brand-footer-nav {

margin-left: -12px;
margin-right: -12px;

> li {
  display: inline-block;
  padding: building-units(1);

  > a {
    padding: 4px 0 3px;
    border-bottom: 1px solid transparent;

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

    &.hover,
    &:hover {
      border-bottom-color: $color-bright;
    }
  }
}

.active > a {
  border-bottom-color: $color-bright;
}

}

.brand-footer-nav-muted {

> li {
  > a {
    &,
    &:hover,
      &:focus,
      &:active {
      color: $color-footer-legal-text;
    }

    &.hover,
    &:hover {
      border-bottom-color: $color-footer-legal-text;
    }
  }

  .active > a {
    border-bottom-color: $color-footer-legal-text;
  }
}

}

.brand-footer-nav-caption {

@extend .content-list-item;
text-transform: uppercase;
font-weight: bold;

}

.brand-footer-content-list {

margin-bottom: building-units(1.5);

> .content-list-item {
  border-bottom: 0;

  > img {
    height: $footer-font-size;
    vertical-align: middle;
    margin-right: building-units(1);
  }

  &.hover,
  &:hover {
    background-color: $footer-navigation-hover-color;
  }

  &.active,
  &:active {
    background-color: $footer-navigation-hover-color;
  }
}

}

.brand-footer-bar {

padding-top: building-units(1.5);
padding-bottom: building-units(1.5);

.brand-logo {
  padding-top: building-units(.5);
  padding-bottom: building-units(.5);
}

.brand-claim {
  margin-top: 20px;
}

}

.brand-footer-bar-text {

padding-top: 16px;
padding-bottom: 16px;

}

.brand-footer-bar-condensed {

padding-top: building-units(1);
padding-bottom: building-units(1);

}

.brand-footer-bar-brandbar {

padding-top: building-units(1);
padding-bottom: 27px;

}

.brand-footer-social {

padding-bottom: building-units(3);
padding-top: building-units(1);

@media (min-width: #{$grid-medium-min}px) {
  padding-bottom: building-units(.5);
}

.nav > li > a > img {
  height: building-units(2.5);
  vertical-align: middle;
}

}