.socials {
  position: relative;
  z-index: 2;
  float: right;
  font-size: 0;

  &-i {
    transition: 0.3s background-color;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: fade-out(#fff, 0.8);

    &:hover {
      @media screen and (min-width: 768px) {
        background-color: fade-out(#fff, 0.6);
      }
    }

    &:before {
      @include image-2x('../images/socials@2x.png', 15px, 40px);
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      background-image: url(../images/socials.png);
    }

    &_reddit {
      &:before {
        width: 15px;
      	height: 13px;
        margin: -6.5px 0 0 -7.5px;
        background-position: 0 -15px;
      }
    }

    &_twitter {
      &:before {
        width: 15px;
        height: 12px;
        margin: -6px 0 0 -7.5px;
        background-position: 0 -28px;
      }
    }

    &_bitcoin {
      &:before {
        width: 11px;
      	height: 15px;
        margin: -7.5px 0 0 -5.5px;
        background-position: 0 0;
      }
    }
  }
}