// Social Icons (20x20)
// =================================
._social_icon_22x22( @font-size: 22px, @top: 0, @left: 0) {
  position: relative;

  &:before {
    position: absolute;
    top: @top;
    left: @left;

    font-size: @font-size;
    color: @white;
  }

  .animation(all);
  opacity: 0.9;
  &:hover{
    opacity: 1;
  }
}

.dm_social_nav_22x22 {
  li {
    display: inline-block;
  }

  a.twitter {
    &:extend(._twitter all);
    ._social_icon_22x22(18px, 2px, 3px);
    .circle(22px, @color_twitter);
  }

  a.facebook {
    &:extend(._facebook all);
    ._social_icon_22x22(16px, 4px, 3px);
    .circle(22px, @color_facebook);
  }

  a.gplus {
    &:extend(._google_plus all);
    ._social_icon_22x22(14px, 4px, 5px);
    .circle(22px, @color_gplus);
  }

  a.instagram {
    &:extend(._instagram all);
    ._social_icon_22x22(14px, 3px, 4px);
    .circle(22px, @color_instagram);
  }
  a.whatsapp {
    &:extend(._whatsapp all);
    ._social_icon_22x22(17px, 1px, 3px);
    .circle(22px, @color_whatsapp);
  }

  a.rss {
    &:extend(._rss all);
    ._social_icon_22x22(14px, 4px, 5px);
    .circle(22px, @color_rss);
  }

  a.email {
    &:extend(._mail all);
    ._social_icon_22x22(13px, 4px, 5px);
    .circle(22px, @color_email);
  }

  a.youtube {
    &:extend(._youtube all);
    ._social_icon_22x22(13px, 4px, 5px);
    .circle(22px, @color_youtube);
  }
}