//<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
//  <a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
//  <a href="#" class="hi-icon hi-icon-screen">Desktop</a>
//  <a href="#" class="hi-icon hi-icon-earth">Partners</a>
//  <a href="#" class="hi-icon hi-icon-support">Support</a>
//  <a href="#" class="hi-icon hi-icon-locked">Security</a>
//</div>

@mixin hi-icon($width, $height, $color, $font-size) {
  display: inline-block;
  font-size: 0;
  cursor: pointer;
  width: $width;
  height: $height;
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 1;
  color: $color;
  &:hover {
    text-decoration: none;
  }
  &:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }
  &:before {
    speak: none;
    font-size: $font-size;
    line-height: $height;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased;
  }
}

.hi-icon {
  @include hi-icon(40px, 40px, #fff, 20px);
}

@import 'effect-1';
@import 'effect-2';
@import 'effect-3';
@import 'effect-4';
@import 'effect-5';
@import 'effect-6';
@import 'effect-7';
@import 'effect-8';
@import 'effect-9';