@import "mixins/functions";

$font-sans-serif: 'open_sans', sans-serif;
$font-serif: 'charis_sil', serif;


$burnt-orange: #c15701;
$tan: #f5f4f0;
$black: #2c2c2c;
$dark-gray: #383838;
$mid-gray: #9d9d9d;

$row-width: 1200px;
$menu-width: 275px;
$menu-animation: .25s ease-in-out;

// Media Query Ranges
$small-range: (0px, 688px);
$medium-range: (689px, 1160px);
$large-range: (1161px, 1440px);
$xlarge-range: (1441px, 1920px);
$xxlarge-range: (1921px, 99999999px);


$screen: "only screen";

$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";

$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";