$color_blue: #308ACF;
$color_navy: #243661;
$color_pink: #DE45AD;
$color_green: #0BBD83;
$color_orange: #E67E22;
$color_light_orange: #ECAB1E;
$color_red: #D71520;
$color_dark_red: #BD3038;
$color_light_red: #FF858C;
$color_lighter_red: #FFEEEF;
$color_mustard_yellow: #F2DE33;
$color_light_yellow: #FFF9C6;

$color_white: #FFFFFF;
$color_off_white: #E9F1F5;
$color_lighter_grey: #DCECF2;
$color_light_grey: #CFDDE3;
$color_grey: #B1C2C9;
$color_mid_grey: #849196;
$color_dark_grey: #5A6266;
$color_black: #282C2E;

$root_font_size: 16px;
$one_pixel_in_root_ems: 1em * (1px / $root_font_size);

$screen_tiny_min: 0em; // eg: phones, 0-399px
$screen_small_min: $one_pixel_in_root_ems * 400; // eg: phablets, 400-767px
$screen_medium_min: $one_pixel_in_root_ems * 768; // eg: tablets and netbooks, 768-1023px
$screen_large_min: $one_pixel_in_root_ems * 1024; // eg: laptops, 1024-1439px
$screen_xlarge_min: $one_pixel_in_root_ems * 1440; // eg: large laptops, 1440-1919px
$screen_huge_min: $one_pixel_in_root_ems * 1920; // eg: desktops, 1990px+

$screen_tiny_max: $screen_small_min - $one_pixel_in_root_ems;
$screen_small_max: $screen_medium_min - $one_pixel_in_root_ems;
$screen_medium_max: $screen_large_min - $one_pixel_in_root_ems;
$screen_large_max: $screen_xlarge_min - $one_pixel_in_root_ems;
$screen_xlarge_max: $screen_huge_min - $one_pixel_in_root_ems;

$high_dpi_screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi';

$column-gutter: 1em; // remember this will be doubled

$svg_red_warning_triangle: "data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'481' height%3D'424' viewBox%3D'57.351 134.506 480.579 424.053'%3E%3Cpath fill%3D'%23D71520' d%3D'M532 514L323 153c-14-25-37-25-51 0L63 514c-14 25-2 45 26 45h417c28 0 40-20 26-45zm-234-3c-19 0-34-16-34-35s15-34 34-34c20 0 35 15 35 34s-16 35-35 35zm42-225l-5 91c-1 19-17 34-36 34h-1c-19 0-35-15-36-34l-6-91c-1-19 13-34 32-34h19c19 0 34 15 33 34z'%2F%3E%3C%2Fsvg%3E";

%clearfix {
  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}