body.about, body.resources, body.permissions, body.methodology {

  @include font-smoothing(antialiased);

  #container #content {
    max-width: 695px;
    padding-top: 20px;

    a {
      color: $lightlinkcolor;
      text-decoration: none;
      &:hover {
        border-bottom: 1px solid $lightlinkcolor;
      }
    }
  }

  h1 {
    line-height: 1;
    margin-bottom: 20px;
  }

  h2 {
    color: $brightlinkcolor;
    font-size: 34px;
    line-height: 1.1;
    margin-bottom: 15px;
  }

  h4 {
    color: $lightbordercolor;
    line-height: 1.3;
    font-size: 22px;
    @include margin(15px, 0, 15px, 0);
  }

  ol {
    @include margin-left(20px);
    margin-top: 0;
  }

  blockquote {
    @include margin(25px, 0, 25px, 0);
  }

  p {
    opacity: 0.8;
  }
}

body.about {
  h3 {
    line-height: 1.3;
    @include margin(20px, 0, 20px, 0);
    font-size: 24px;
    opacity: 0.8;
  }
}

body.resources {
  h3 {
    color: $brightlinkcolor;
    line-height: 1.3;
    @include margin(25px, 0, 10px, 0);
    font-size: 16px;
    font-weight: 400;
    opacity: 0.8;
  }
}

body.eci {
  h1 {
    color: $brightlinkcolor;
    @include margin(20px, 0, 20px, 0);
  }

  h4 {
    color: $medbordercolor;
    font-size: 26px;
  }

  ol {
    opacity: 0.9;
  }

  li span.calc {
    color: #fff;
  }

  .calc {
    position: relative;
    top: 3px;
  }
}

$image_size: 150px;

.member {
  @include margin(50px, 0, 50px, 0);
  min-height: $image_size;
  @include padding-left($image_size + 30);
  padding-top: 0;
  position: relative;

  &:before {
    @include filter(saturate(10%));
    @include rounded($image_size);
    border: 2px solid white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: $image_size;
    content: "";
    display: block;
    height: $image_size;
  @include margin-left(0);
    @include left(0);
    position: absolute;
    top: 0;
    width: $image_size;
  }

  h3 {
    color: $lightlinkcolor !important;
    font-size: 18px !important;
  }

  h3, h4 {
    @include margin(0, 0, 0, 0, !important);
  }

  @media all and (max-width: 500px) {
    @include padding-left(0);
    padding-top: $image_size + 30;

    &:before {
      @include margin-left(-$image_size/2);
      @include left(50%);
    }

  }

  & h3 a {
    @include transition(text-shadow 0.1s);
    color: $brightlinkcolor !important;
    font-size: 18px;
    @include margin(0, 5px, 0, 5px);
    opacity: 0.6;

    &:hover {
      border-bottom: 0 !important;
      opacity: 1;
      text-shadow: $shadow;
    }
  }

}

#past {
  @include flex;
  @include flex-wrap;

  $past_size: 100px;
  .member {
    @include margin(30px, 0, 0, 0);
    // max-width: 50%;
    min-width: 80%;
    min-height: $past_size;
    @include padding-left($past_size + 30);
    @include padding-right(15px);

    &:before {
      @include rounded($past_size);
      background-size: $past_size;
      height: $past_size;
      width: $past_size;
    }

    @media all and (max-width: 768px) and (max-width: 500px) {
      max-width: 100%;
      @include padding-left($past_size + 15);
      @include padding-right(0);
      padding-top: 0;
      &:before {
        @include left(0);
      @include margin-left(0);
      }
    }

  }

}

$team: "alexander_simoes",
       "dave_landry",
       "cesar_hidalgo",
       "melissa_teng",
       "eric_franco",
       "crystal_noel",
       "ali_almossawi",
       "sarah_chung";

@each $name in $team {
  ##{$name} {
    &:before {
      background-image: url("/static/img/about/#{$name}.png");
    }
  }
}
