// Need to be in pixels for IE8
$xsmall-min: 0px;
$xsmall-max: 375px;
$xsmall-range: $xsmall-min, $xsmall-max;
$small-min: 376px;
$small-max: 639px;
$small-range: $small-min, $small-max;
$medium-min: 640px;
$medium-max: 1023px;
$medium-range: $medium-min, $medium-max;
$large-min: 1024px;
$large-max: 1439px;
$large-range: $large-min, $large-max;
$xlarge-min: 1440px;
$xlarge-max: 1920px;
$xlarge-range: $xlarge-min, $xlarge-max;
$xxlarge-min: 1921px;
$xxlarge-max: 2650px;
$xxlarge-range: $xxlarge-min, $xxlarge-max;
$xxxlarge-min: 2651px;
$xxxlarge-max: 999999px;
$xxxlarge-range: $xxlarge-min, $xxlarge-max;

// TODO
// $content-max-width: 1440px;
// $global-gutter: 30px;

// $large-max: ($xlarge-min - 1px);
// $xlarge-min: ($content-max-width + $global-gutter);

//
// Media Queries
//

$screen: 'only screen';
$xsmall-only: '#{$screen} and (max-width: #{$xsmall-max})';
$small-only: '#{$screen} and (min-width: #{$small-min}) and (max-width: #{$small-max})';
$small-down: '#{$screen} and (max-width: #{$small-max})';
$small-up: '#{$screen} and (min-width: #{$small-min})';
$medium-only: '#{$screen} and (min-width: #{$medium-min}) and (max-width: #{$medium-max})';
$medium-up: '#{$screen} and (min-width: #{$medium-min})';
$medium-down: '#{$screen} and (max-width: #{$medium-max})';
$large-only: '#{$screen} and (min-width: #{$large-min}) and (max-width: #{$large-max})';
$large-up: '#{$screen} and (min-width: #{$large-min})';
$large-down: '#{$screen} and (max-width: #{$large-max})';
$xlarge-only: '#{$screen} and (min-width: #{$xlarge-min}) and (max-width: #{$xlarge-max})';
$xlarge-up: '#{$screen} and (min-width: #{$xlarge-min})';
$xlarge-down: '#{$screen} and (max-width: #{$xlarge-max})';
$xxlarge-only: '#{$screen} and (min-width: #{$xxlarge-min})';
$xxlarge-up: '#{$screen} and (min-width: #{$xxlarge-min})';
$xxlarge-down: '#{$screen} and (max-width: #{$xxlarge-max})';
$xxxlarge-up: '#{$screen} and (min-width: #{$xxxlarge-min})';
$landscape: '#{$screen} and (orientation: landscape)';
// $portrait: "#{$screen} and (orientation: portrait)";
// $small-only: "#{$screen} and (min-width: #{min($small-range...)}) and (max-width: #{max($small-range...)})";
// $small-up: "#{$screen} and (min-width: #{min($small-range...)})";
// $medium-only: "#{$screen} and (min-width: #{min($medium-range...)}) and (max-width: #{max($medium-range...)})";
// $medium-up: "#{$screen} and (min-width: #{min($medium-range...)})";
// $medium-down: "#{$screen} and (max-width: #{max($medium-range...)})";
// $large-only: "#{$screen} and (min-width: #{min($large-range...)}) and (max-width: #{max($large-range...)})";
// $large-up: "#{$screen} and (min-width: #{min($large-range...)})";
// $large-down: "#{$screen} and (max-width: #{max($large-range...)})";
// $xlarge-only: "only screen and (min-width: #{min($xlarge-range...)})";
// $xlarge-up: "#{$screen} and (min-width: #{min($xlarge-range...)})";
// $landscape: "#{$screen} and (orientation: landscape)";
// $portrait: "#{$screen} and (orientation: portrait)";