.footer {
  background: black;
  color: $gray;
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 3rem;
  padding: 2rem 1rem 5rem 1rem;
  z-index: 10;
  .container {
    max-width: $max-width;
    margin: 0 auto;
    a {
      color: $gray;
      border-bottom: 1px solid black;
      font-size: 1.1rem;
      font-weight: 400;
      &:hover {
        @include transition (all 0.2s ease-in-out);
        color: white;
        border-bottom: 1px solid white;
      }
    }
    .footer-nav {
      @include flex-this;
      flex-direction: column;
      color: $gray;
      padding: 0;
      margin: 0;
      width: 100%;
      @media screen and (min-width: $lg) {
        flex-direction: row;
        justify-content: space-between;
        width: 80%;
      }
      a {
        color: $gray;
        border-bottom: 1px solid black;
        font-size: 1.1rem;
        font-weight: 400;
        text-transform: uppercase;
        &:hover {
          @include transition (all 0.2s ease-in-out);
          color: white;
          border-bottom: 1px solid white;
        }
      }
    }
    .logo {
      width: 90%;
      @media screen and (min-width: $ph) {
        width: 28rem;
      }
      a {
        background: asset-url('EFF-logo-lockup-1color-white.svg') no-repeat;
        border: none;
        display: block;
        height: 4.5rem;
        margin: 2rem 0;
        opacity: 0.7;
        &:hover {
          opacity: 1;
          border: none;
          transition: none;
        }
      }
    }
  }
}
