article.people {
  padding: 100px 0; }

nav#main-nav li a {
  color: #fff; }

ul.people-list {
  list-style: none;
  padding: 0;
  margin: 0; }
  @media screen and (max-width: 1024px) {
    ul.people-list {
      margin: 0 5%; } }
  @media screen and (max-width: 800px) {
    ul.people-list {
      margin: 0 0; } }
  ul.people-list li {
    float: left;
    box-sizing: border-box;
    width: 22.75%;
    margin-right: 3%;
    margin-bottom: 3%;
    padding: 0; }
    ul.people-list li:nth-of-type(4n) {
      margin-right: 0%; }
    @media screen and (max-width: 1024px) {
      ul.people-list li {
        float: left;
        box-sizing: border-box;
        width: 48.5%;
        margin-right: 3%;
        margin-bottom: 3%;
        padding: 0; }
        ul.people-list li:nth-of-type(2n) {
          margin-right: 0%; }
        ul.people-list li:nth-of-type(3n):not(:nth-of-type(2n)) {
          margin-right: 3%; } }
    @media screen and (max-width: 380px) {
      ul.people-list li {
        width: auto;
        float: none; } }
  ul.people-list a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: #333; }
    ul.people-list a:hover div, ul.people-list a:focus div {
      opacity: 1;
      visibility: visible; }
  ul.people-list img {
    display: block;
    width: 100%;
    height: auto; }
  ul.people-list h2 {
    margin-bottom: 0; }
    ul.people-list h2 + h4 {
      margin-top: 5px;
      font-size: 18px; }
  ul.people-list div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.65);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
    -moz-transition: opacity 0.3s ease, visibility 0.3s ease;
    -o-transition: opacity 0.3s ease, visibility 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease; }
    ul.people-list div span {
      display: table;
      width: 100%;
      height: 100%; }
      ul.people-list div span span {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        padding: 0 20px; }
    @media screen and (max-width: 640px) {
      ul.people-list div p {
        display: none; } }

div.overlay.people h1 {
  margin-bottom: 0; }
  div.overlay.people h1 + h4 {
    margin-top: 5px; }
@media screen and (max-width: 1140px) {
  div.overlay.people {
    width: 50%; }
    div.overlay.people h1 {
      margin-top: 0; }
    div.overlay.people h4 {
      font-size: 20px; } }
@media screen and (max-width: 800px) {
  div.overlay.people {
    position: static;
    width: 100%;
    padding: 0;
    margin-top: 40px;
    background: none; } }