@import 'base/base';
body.team {
  hr {
    height: 1px;
    border: none;
    background-color: #dfd7d4;
  }

  .list-team { /* #content is needed for specifity override */
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    list-style-type: none;
    justify-content: flex-start;

    .list-team-item {
      align-items: center;
      display: flex;
      flex-flow: row wrap;
      flex-grow: 1;
      flex: 1 1 1;
      height: 175px;
      justify-content: center;
      margin: 1.5em 0.75em;
      padding: 0;
      text-align: center;
      width: 150px;

      .team-member-name {
        align-content: center;
        display: flex;
        font-size: 1em;
        font-size: calc( 14px + 3 * ((100vw - 500px) / 1500)); //this follows so that browsers that support it will use this instead
        font-weight: normal;
        justify-content: center;
        line-height: 1;
        min-width: 100%;
      }

      .team-member-image {
        align-self: center;
        border-radius: 50%;      
        display: flex;
        height: 100px;
        justify-content: center;
        margin: auto;
        width: 100px;

        &:hover,
        &:active,
        &:focus {
          border-color: transparent;
        }
      }

      .team-member-social {
        display: flex;
        flex: 1;
        justify-content: center;
        margin: 0 auto !important;
        min-width: 100%;

        > li {
          display: inline-block;
          padding: 0;
        }

        a {
          color: #7c7a79;
          font-size: 24px;

          &:hover {
            color: #444;
          }
        }
      }
    }
  }
}
