// media query support
// -----------------------------------------------------

// I have found that for most designs, the primary breakpoints are with $tablet_portrait first then $mobile.

$mobile:                    "screen and (max-width: 40em)" !default;
$mobile_portrait:	          "screen and (max-width: 40em) and (orientation : portrait)" !default;
$mobile_landscape:	        "screen and (max-width: 40em) and (orientation : landscape)" !default; 

$tablet:                    "screen and (max-width: 64em)" !default;
$tablet_portrait:           "screen and (max-width: 64em) and (orientation: portrait)" !default;
$tablet_landscape:          "screen and (max-width: 64em) and (orientation: landscape)" !default;

$desktop:                   "screen and (max-width: 120em) and (min-width: 50em)" !default;

$hidpi:                     "(-webkit-min-device-pixel-ratio: 1.3), 
                             (-o-min-device-pixel-ratio: 2.6/2), 
                             (min--moz-device-pixel-ratio: 1.3), 
                             (min-device-pixel-ratio: 1.3),(min-resolution: 1.3dppx)" !default;