$enable-em-queries: true !default;
$base-font-size: $default-font-size;

@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;
	}

}