.social {
  ul {
    @media only screen and (min-width: $lap-start){
      @include content-columns(2, 10px);
    }
  }

  a {
    @include box-sizing(border-box);
    background-color: darken($site-background, 5%);
    border: 1px solid darken($site-background, 10%);
    border-radius: 4px;
    color: #222;
    display: inline-block;
    font-size: 0.8em;
    margin-bottom: 7px;
    padding: 1em;
    padding-right: 0.5em;
    position: relative;
    text-decoration: none;
    width: 100%;
    z-index: 5;
    @include transition(
      box-shadow 200ms,
      color 400ms,
      transform 400ms
    );

    &:hover {
      color: $white !important;
      text-decoration: none;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
      z-index: 7;
      &::before {
        border: 1px solid #000;
        height: 100%;
        top: 0;
        width: 100%;
      }
    }

    &::before {
      background-color: #222;
      border-radius: 4px;
      content: "";
      height: 1px;
      position: absolute;
        top: 50%; left: 0%;
      width: 0;
      z-index: -1;
      @include transition(
        border 200ms,
        height 200ms 200ms,
        top 200ms 200ms,
        width 200ms
      );
    }

    i {
      font-size: 2em;
      line-height: 0.8em;
      margin-right: 0.35em;
    }

    @each $kvp in $sites {
      &.#{nth($kvp, 1)} {
        color: nth($kvp, 2);
        &::before {
          background-color: nth($kvp, 2);
          border-color: darken(nth($kvp, 2), 5%);
        }
      }
    }

  }
}