//	Colors
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

//	primary
$alex-blue: 							#0981b0;
$alex-orange: 							#ff8458;

//	etc
$alex-aqua:								#90d3d3;
$alex-navy:								#036991;
$alex-light-blue:						#cff5f9;
$alex-red:								#ff3333;
$alex-light-gray:						#f2f2f2;
$alex-gray:								#808080;
$alex-transparent-black:				rgba(38, 63, 84,.8); //80% $art-slate

//	text
$alex-text:								$alex-gray;
$alex-black:							#333;
$alex-white:							#fff; // it's regular white

//	utility
$error:									$alex-red;
$recommended:							#048cbf;

//	art
$art-gray: 								#BDB9B2;
$art-beige: 							#E9D19D;
$art-tan: 								#CEA65A;
$art-brown: 							#726848;
$art-graphite: 							#414042;
$art-ink: 								#2F2F52;
$art-slate: 							#263F54;
$art-royal-blue:						#0E0AFC;
$art-blue:								#00B8E0;
$art-cyan:								#6DE1C0;
$art-green:								#3CBF00;
$art-lime: 								#A8E600;
$art-yellow: 							#FFD831;
$art-warm-orange: 						#FF8458;
$art-orange: 							#FB5024;
$art-red: 								#E20D1C;
$art-fuchsia:							#FB5077;
$art-pink: 								#FF8ADC;
$art-purple:							#8E0C70;

// comparison bar
$bar1:									$art-blue;
$bar2:									$art-lime;
$bar3:									url('../img/cost-comp-lines-lime.png') repeat-x left center;
$bar4:									lighten($art-orange, 25%);
$bar-last:								url('../img/cost-comp-lines-red.png') repeat-x left center;



//	Fonts
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// weights: 100, 400, 700
// italic available for 100 and 400
$foro:  100 1em "Foro", serif;

// weights: 100, 300, 500, 700, 900
// italic available for 100 and 500
$museo: 300 1em/1.6 "Museo Sans", Verdana, sans-serif;

//	Margin basis variables
//	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//	inner is for inside section elements, outer is for outside

$inner-margin:							0.75em;
$outer-margin:							1.5em;

// VIEWPORT SIZES defaults
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$mobile-small-port-width:				320px;
$mobile-small-land-width:				480px;

$mobile-large-port-width:				375px;
$mobile-large-land-width:				667px;

$tablet-small-land-height:				640px;
$tablet-small-land-width:				960px;

$tablet-port-width:						720px;
$tablet-land-width:						1000px;

$desktop-port-width:					800px;
$desktop-max-width:						1000px;
$desktop-max-height:					600px;

$desktop-large-width:					1150px;


// Shadow settings
$shadow:								0 4px 2px rgba(0, 0, 0, 0.2);

// Base transition timing
$transition-main:						all 200ms ease-in-out;