$enable-em-queries: true !default;

@mixin query($direction, $value, $use-ems: $enable-em-queries) {

  @if ($use-ems == true) {
    $value: 1em * $value / $base-font-size;
  }

  @if ($direction == 'above') {
    @media only screen and (min-width: $value) {
      @content;
    }
  } @else {
    @media not screen and (min-width: $value) {
      @content;
    }
  }

}

// shortcuts
@mixin query-below($value) {

  @include query('below', $value, $base-font-size) {
    @content;
  }

}

@mixin query-above($value) {

  @include query('above', $value, $base-font-size) {
    @content;
  }

}