// Grid variables

$grid-columns: 12;
$grid-width: 100%;
$row-width: 1100px;
$grid-width-full: 100% !important;
$column-padding: 10px;
$wrapper-padding: 1em;

// Spacing

$base-spacing: 10;

// Breakpoints 

// Usage sample
// @include breakpoint(large) { background-color: red; }
// @include breakpoint(medium) { background-color: black; }
// @include breakpoint(small) { background-color: yellow; }
// @include breakpoint(xsmall) { background-color: green; }

$breakpoint-large: "(max-width: 1024px)";
$breakpoint-medium: "(max-width: 992px)";
$breakpoint-small: "(max-width: 768px)";
$breakpoint-xsmall: "(max-width: 480px)";

// Palette
// Colors 1 through to 5 are reserved for fonts,
// colors 6 through 9 are reserved for color scheme.

$color-1: #5e5e5e; // Primary body font color
$color-2: #000000; // Primary heading font color
$color-3: #F44E3F; // Primary link color
$color-4: #000000; // Primary heading link color
$color-5: #ffffff; // Always white
$color-6: #f88a20; 
$color-7: #939393; 
$color-8: #efefef; 
$color-9: #a0a0a0; 
$color-10: #3a4856; 
$color-11: #cccccc; 

// Typography colors

$text-color: $color-1;
$heading-color: $color-2;
$link-color: $color-3;
$heading-link-color: $color-4;

// Typography fonts

$text-font: "Open Sans", sans-serif ;
$heading-font: "Open Sans", sans-serif ;
$text-size: 15px;
$heading-size: 44px;
$paragraph-margin: 20px;
$heading-margin: 20px;

// Framework prefix
// All the framework CSS is prefixed here, if you change the prefix,
// all your markup classes and ID's also have to be changed
// ONLY CHANGE THE PREFIX IF YOU ARE SURE

$p: vf-;
