@require '../pages_old/Layout.styl';

.TeamMember {
  position: relative;
  padding: 36px;
  font-family: "Proxima Nova";
  text-align: center;
  height: 520px;
  border: 2px solid #fff;
  transition: border-color .4s;
  //display: inline-block;
  //float: none;

  &HasBorders, &:hover {
    border: 2px solid #28A3E0;
    border-radius: 3px;
  }

  &Remove {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 5;
  }

  &Avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 2px solid #28A3E0;
    margin: 0 auto 22px;
    background-size: cover;
    background-position: center center;
  }

  &Name {
    font-weight: 600;
    font-size: 17px;
  }

  &Position {
    font-size: 14px;
    padding: 4px 0 0 0;
  }

  &Phrase {
    padding: 16px 0;
    color: #1B649B;
    font-size: 14px;
    height: 146px;
    overflow: hidden;

    &Quote {
      &Up {
        text-align: left;
        padding: 8px 0;
      }

      &Down {
        text-align: right;
        padding: 8px 0;
      }
    }
  }

  &Social {
    &List {
      text-align: center;
    }

    &Item {
      display: inline-block;
      vertical-align: center;
      margin: 8px;

      &:first-of-type {
        margin-left: 0;
      }

      &:last-of-type {
        margin-right: 0;
      }
    }

    &Icon {
      cursor: pointer;
      transition: opacity .4s;
      opacity: .5;

      & circle {
        stroke: #50BEFF;
      }

      &:hover {
        opacity: 1;
      }
    }

    &Icon {
      transition: opacity .4s;
      opacity: .5;

      & path {
        fill: #50BEFF;
      }

      &:hover {
        opacity: 1;
      }
    }
  }
  &Stretch {
    width: 100%;
    box-sizing: border-box;
  }
}

.AddProject {
  padding: 0 0 80px;
}