_page-footer.scss

footer {
  background-color: var(--color-dim-bg);
  padding-top:10px;
}

.page-footer {
  clear: both;
  color: var(--color-dim-primary);
  font-size: 12px;
  font-weight: $font-weight-regular;
  min-height: 100px;
  overflow: auto;
  padding: 0 4% $grid-gutter;
  width: 100%;

  h3 {
    border-bottom: 1px solid var(--color-dim-primary);
    font-weight: $font-weight-regular;
    margin-bottom: 1.25rem;
    margin-top: 1.25rem;
    padding-bottom: 1em;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__link {
    color: var(--color-dim-primary);
    font-weight: $font-weight-regular;
    line-height: $footer-line-height;
    text-decoration: underline;

    .icon {
      clear: left;
      float: left;
      max-height: $footer-line-height;
      max-width: $footer-icon-width;
      padding-right: 1em;
    }

    .icon path {
      fill: var(--color-dim-primary);
    }

    .icon .spidermonkey-small {
      fill: var(--color-bg);
    }

    .icon .spidermonkey-circle {
      fill: var(--color-dim-primary);
    }

    &:active .icon path,
    &:focus .icon path,
    &:hover .icon path {
      fill: var(--color-link);
    }
    &:hover .icon .spidermonkey-small {
      fill: var(--color-bg);
    }

    &:hover .icon .spidermonkey-circle {
      fill: var(--color-link);
    }

    span {
      line-height: $footer-line-height;
    }
  }
}

@media (min-width: $bp-large-tablet) {
  footer {
    padding-top:30px;
  }
}