.player {
  position: relative; }
  .player img {
    max-width: 100px;
    border-radius: 50%;
    margin-bottom: 20px; }
  .player .team-number {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #007bff;
    border-radius: 50%;
    color: #fff; }
    .player .team-number > span {
      position: absolute;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%; }
  .player h2 {
    font-size: 20px;
    letter-spacing: .2em;
    text-transform: uppercase; }
  .player .position {
    font-size: 14px;
    color: #b3b3b3;
    text-transform: uppercase; }




.team-member figure {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden; }

.team-member .social {
  position: absolute;
  margin: 0;
  top: 0;
  padding: 0;
  bottom: 0;
  padding: 10px;
  -webkit-transform: translateX(-101%);
  -ms-transform: translateX(-101%);
  transform: translateX(-101%);
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease;
  background: #007bff; }
  .team-member .social li {
    list-style: none; }
    .team-member .social li a {
      display: inline-block;
      padding: 5px;
      color: #fff; }

.team-member h3 {
  color: #000;
  margin: 0;
  bottom: 0;
  font-size: 1.2rem; }

.team-member .position {
  color: #666666;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .05rem; }

.team-member:hover .social {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%); }