.page--footer {
  background: $sch-black;
  position: relative;
  clear: both;
  z-index: 50;

  &:before {
    content: '';
    position: absolute;

    width: 100%;
    height: 10px;

    left: 0;
    top: -10px;

    background: rgba(0,0,0,.25);
  }

  > .container {
    overflow: auto;
    position: relative;

    @include bp-medium {
      padding-left: 240px;
    }

    @include bp-large {
      padding-left: 340px;
    }
  }

  .container .site-branding {
    position: absolute;
    display: none;

    h1 {
      background-image: url(/images/logo-square-white.svg);
    }

    @include bp-medium {
      min-width: 0;
      top: 20px;
      left: 50px;
      display: block;
      width: 150px;
    }

    @include bp-large {
      top: 40px;
      width: 250px;
    }
  }

  .container > section {
    padding: 20px;

    @include bp-medium {
      padding: 20px 0;
      float: left;
      width: 50%;
    }

    @include bp-large {
      padding-top: 40px;
    }
  }

  h3 {
    font-size: 1.8em;
    color: #fff;
    margin: 0 0 1em 0;
  }

  .post--list {
    @include bp-medium {
      padding-right: 1em
    }
  }

  .footer--info {
    h3 {
      margin-bottom: .75em;
    }

    nav {
      overflow: auto;

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 1.1em;

        li a {
          color: #ccc;
          text-decoration: none;
          font-weight: 300;
          display: block;
          padding: .25em 0;

          &:hover {
            color: $sch-blue;
          }

          &.social--facebook {
            color: $brand-facebook;
          }

          &.social--twitter {
            color: $brand-twitter;
          }

          &.social--youtube {
            color: $brand-youtube;
          }
        }

        + h3 {
          margin-top: .75em;
        }
      }

      @include bp-medium {
        ul {
          float: none;
          width: 100%;
        }

        ul + ul {
          margin-top: 1em;
        }
      }
    }
  }

  .footer--about {
    background: #111;
    overflow: auto;
    position: relative;
    padding: 20px 0 140px 0;

    .footer--about-profile {
      display: block;
      margin: 0 auto 20px auto;
      width: 250px;

      @include bp-medium {
        margin: 0 0 0 50px;
        float: left;
        width: 150px;
      }

      @include bp-large {
        width: 250px;
      }
    }

    @include bp-medium {
      padding: 40px 0 160px 0;
      font-size: .9em;
    }

    .footer--about-info {
      font-size: 1em;
      padding: 0 20px;
      color: #999;
      text-align: center;

      a {
        color: #fff;

        &:hover {
          color: $sch-blue;
        }
      }

      strong {
        color: #fff;
        display: block;
        text-transform: Capitalize;

        @include bp-medium {
          display: inline;
        }
      }

      @include bp-medium {
        text-align: left;
        margin-left: 200px;
        font-size: .9em;
      }

      @include bp-large {
        margin-left: 320px;
        font-size: 1em;
      }

      p {
        margin: 0;
        padding: 0 0 1em 0;
      }
    }

    .footer--about-info-social {
      margin: 0;
      padding: 0;
      list-style: none;

      > li {
        display: inline-block;
        margin-right: 5px;

        a {
          width: 40px;
          height: 40px;
          display: inline-block;
          color: $sch-black !important;
          background: #fff;

          font-size: 1.25em;
          line-height: 40px;
          text-align: center;
        }

        a.social--facebook:hover {
          background: $brand-facebook;
        }

        a.social--twitter:hover {
          background: $brand-twitter;
        }
      }

      @include bp-large {
        position: absolute;
        bottom: 160px;
      }
    }
  }
}
