@mixin hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
}

@mixin clearfix {
  &:before, &:after {
      content: "\0020";
      display: block;
      height: 0;
      overflow: hidden;
  }
  &:after {
      clear: both;
  }
}

%icon-font:before {
  font-family: "fontcustom";
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  display: inline-block;
}

@mixin icon-font($font-name) {
  @extend .icon-#{$font-name};
  @extend %icon-font;
  &:before {
   @content;
  }
}

@mixin respond-to($primary, $secondary:min-width, $nq:false, $nq-class:lt9) {
  // Convert pixel values to ems
  @if unit($primary) == 'px' {
    $primary: pem($primary);
  }
   @if type-of($secondary) == number and unit($secondary) == 'px' {
    $secondary: pem($secondary);
  }

  // Print out Media Queries
  @if $secondary == max-width {
    @media screen and (max-width: $primary - .001) { @content; }
    @if $nq == true {
      .#{$nq-value} &{
        @content;
      }
    }
  }
  @else if $secondary == min-width {
    @media screen and (min-width: $primary) { @content; }
    @if $nq == true {
      .#{$nq-value} &{
        @content;
      }
    }
  }
  @else {
    @media screen and (min-width: $primary) and (max-width: $secondary - .001) { @content; }
    @if $nq == true {
      .#{$nq-value} &{
        @content;
      }
    }
  }
}