_about_pages.scss

.container.about {
  padding: 20px 30px 120px;

  > nav {
    margin-bottom: ($baseline*4);
    text-align: center;
    width: flex-grid(12);

    &::after {
      @extend %faded-hr-divider;
      content: "";
      display: block;
    }

    a {
      border-bottom: 3px solid transparent;
      color: $lighter-base-font-color;
      font-family: $serif;
      font-style: italic;
      display: inline-block;
      letter-spacing: 1px;
      margin: 0px 15px;
      padding: 20px 10px;
      @include transition(all 0.15s linear 0s);
      text-transform: lowercase;

      &:hover, &:active, &:focus {
        border-color: rgb(200,200,200);
        color: $base-font-color;
        text-decoration: none;
      }
    }
  }

  .vision {
    h1 + hr {
      margin-bottom: ($baseline*4);
    }

    .our-mission {
      border-bottom: 1px solid rgb(220,220,220);
      @include clearfix();
      margin: 0 auto 100px;
      padding-bottom: 40px;

      .logo {
        border-right: 1px solid rgb(200,200,200);
        @include box-sizing(border-box);
        float: left;
        height: 115px;
        margin-right: flex-gutter();
        text-align: center;
        width: flex-grid(3);

        > img {
          display: inline-block;
          margin-top: 26px;
          max-height: 60px;
        }
      }

      h2.mission-quote {
        @include box-sizing(border-box);
        float: right;
        font-style: italic;
        line-height: 1.4;
        margin: 0;
        padding: 5px 0px 5px 20px;
        text-transform: none;
        width: flex-grid(9);
      }
    }

    .message {
      border-bottom: 1px solid rgb(220,220,220);
      @include clearfix();
      margin-bottom: ($baseline*4);
      padding-bottom: 80px;
      position: relative;

      hr {
        bottom: 0px;
        display: none;
        margin: 0;
        position: absolute;
        width: 100%;
      }

      h2 {
        border-bottom: 1px solid rgb(200,200,200);
        padding-bottom: 15px;
      }

      .photo {
        @include box-sizing(border-box);
        background: rgb(255,255,255);
        border: 1px solid rgb(210,210,210);
        margin-top: 37px;
        padding: 1px;
        width: flex-grid(3);

        img {
          background: rgb(245,245,245);
          display: block;
          width: 100%;
        }
      }

      > article {
        @include box-sizing(border-box);
        float: left;
        padding-left: $baseline;
        width: flex-grid(9);
      }

      &.left {
        .photo {
          float: left;
          margin-right: flex-gutter();
        }
      }

      &.right {
        .photo {
          float: right;
          margin-left: flex-gutter();
        }
      }

      &:last-child {
        margin-bottom: 0px;
      }
    }

    .partners {
      @include clearfix();

      > article {
        float: left;
        width: flex-grid(6);

        &:first-child {
          margin-right: flex-gutter();
        }
      }
    }
  }


  .faq {
    @include clearfix();

    nav.categories {
      border: 1px solid rgb(220,220,220);
      @include box-sizing(border-box);
      float: left;
      margin-left: flex-gutter();
      padding: 20px;
      width: flex-grid(3);

      a {
        display: block;
        letter-spacing: 1px;
        margin: 0px -20px;
        padding: 12px 0px 12px 20px;
        text-align: left;

        &:hover, &:focus {
          background: rgb(245,245,245);
          text-decoration: none;
        }
      }
    }

    .responses {
      float: left;
      width: flex-grid(9);

      .category {
        padding-top: 40px;

        &:first-child {
          padding-top: 0px;
        }

        > h2 {
          border-bottom: 1px solid rgb(220,220,220);
          margin-bottom: ($baseline*2);
          padding-bottom: $baseline;
        }
      }

      .response {
        margin-bottom: ($baseline*2);

        h3 {
          font-family: $sans-serif;
          font-weight: 700;
          margin-bottom: ($baseline*0.75);
        }
      }
    }
  }

  .press {
    .press-story {
      border-bottom: 1px solid rgb(220,220,220);
      @include clearfix();
      margin-bottom: ($baseline*2);
      padding-bottom: 40px;

      &:last-child {
        border: none;
        margin: 0;
        padding: 0px;
      }

      .article-cover {
        background: rgb(255,255,255);
        border: 1px solid rgb(120,120,120);
        @include box-sizing(border-box);
        float: left;
        height: 140px;
        margin-right: flex-gutter();
        overflow: hidden;
        width: flex-grid(2);

        img {
          display: block;
          //min-height: 100%;
          //width: 100%;
        }
      }

      .press-info {
        float: left;
        width: flex-grid(10);

        header {
          margin-bottom: ($baseline/2);

          h3 {
            font-family: $sans-serif;
            font-weight: 700;
            margin-bottom: ($baseline/4);
          }

          span.post-date {
            color: $lighter-base-font-color;
            margin-right: ($baseline/2);
          }
        }
      }
    }
  }

  .contact {
    @include clearfix();
    margin: 0 auto;

    .photo {
      @include box-sizing(border-box);
      background: rgb(255,255,255);
      border: 1px solid rgb(210,210,210);
      padding: 1px;
      float: left;
      width: flex-grid(3);

      img {
        max-width: 100%;
      }
    }

    .contacts {
      @include box-sizing(border-box);
      float: left;
      padding-left: 40px;
      width: flex-grid(9);

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

        li {
          margin-bottom: ($baseline/2);
        }
      }
    }
  }
}