/* ==========================================================================
   Boostrap Variables

   This file is exclusively intended for setting up variables
   Never add styles directly to this file
   ========================================================================== */


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

// Extra small screen / phone
// ** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px;
// ** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs;
// ** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min;

// Small screen / tablet
// ** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px;
$screen-sm-min:              $screen-sm;
// ** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min;

// Medium screen / desktop
// ** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px;
$screen-md-min:              $screen-md;
// ** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min;

// Large screen / wide desktop
// ** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px;
$screen-lg-min:              $screen-lg;
// ** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min;

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


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

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


// == Container sizes
//
// ## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
$container-tablet:             ((720px + $grid-gutter-width));
// ** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet;

// Medium screen / desktop
$container-desktop:            ((940px + $grid-gutter-width));
// ** For `$screen-md-min` and up.
$container-md:                 $container-desktop;

// Large screen / wide desktop
$container-large-desktop:      ((1140px + $grid-gutter-width));
// ** For `$screen-lg-min` and up.
$container-lg:                 $container-large-desktop;