/**
 * establish our max-width based screen resolution breakpoints
 */
$flexi-max-width-xs: 640px !default; // default 640px - mobile
$flexi-max-width-sm: 960px !default; // default 960px - tablet/phablet
$flexi-max-width-md: 1200px !default; // default 1200px - tablet/laptop
$flexi-max-width-lg: 1600px !default; // default 1600px - monitor
$flexi-max-width-xl: 1921px !default; // default 1921px - 4k
// max-width-xxl - assumed 9999999 or something ridic;

/**
 * set the maximum widht of a .container element
 */
$flexi-container-size: 1200px !default;

/**
 * grid specifications
 */
$flexi-flex-grid-size: 24 !default;
$flexi-child-display-as: block !default;

/**
 * max order level
 */
$flexi-flex-order-depth: 99 !default;

/**
 * transition variables
 */

$flexi-flex-transition-function: linear !default;
$flexi-flex-transition-speed: 150ms !default;


/**
 * font related
 */

$flexi-font-base-size: 14px !default;

/**
 * headings
 * @TODO i'm not entirely happy with this
 */
 $flexi-heading-sizes: (
   h1: 4rem,
   h2: 3.5rem,
   h3: 3rem,
   h4: 2.5rem,
   h5: 2rem,
   h6: 1.5rem
 ) !default;

 /**
  * modal
  */
$flexi-z-target: 99999 !default;
$flexi-modal-overlay-bg: rgba(0,0,0,0.5) !default;