//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra Small screen / phone
$screen-xs:                  480px !default;
$screen-xs-min:              $screen-xs !default;

// Small screen / tablet
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;

// Medium screen / desktop
$screen-md:                  998px !default;
$screen-md-min:              $screen-md !default;

// Large screen / wide desktop
$screen-lg:                  1258px !default;
$screen-lg-min:              $screen-lg !default;

// Extra Large screen / wide desktop
$screen-xl:                  1458px !default;
$screen-xl-min:              $screen-xl !default;

// Extra Extra Large screen / wide desktop
$screen-xxl:                 1658px !default;
$screen-xxl-min:             $screen-xxl !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;
$screen-lg-max:              ($screen-xl-min - 1) !default;
$screen-xl-max:              ($screen-xxl-min - 1) !default;

//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
$grid-columns:              12 !default;
//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         12px !default;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:     $screen-sm-min !default;
//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;

$half-column-size: 20%;
$column-size7: 14.2857143%;

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
$container-sm:                 (720px + $grid-gutter-width) !default;
$container-md:                 (940px + $grid-gutter-width) !default;
$container-lg:                 (1222px + $grid-gutter-width) !default;
$container-xl:                 (1410px + $grid-gutter-width) !default;
$container-xxl:                (1610px + $grid-gutter-width) !default;