$css-prefix: pl;

$--color-primary: #0066cc !default;
$--color-danger: #f30 !default;

$--color-white: #FFFFFF !default;

$--color-black: #000000 !default;

// #4d94db
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; 
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default;
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default;
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default;
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default;
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default;
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default;
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default;
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default;

// Media queries breakpoints
// Extra small screen / phone
$screen-xs : 480px;
$screen-xs-min : $screen-xs;

// Small screen / tablet
$screen-sm : 576px;
$screen-sm-min : $screen-sm;

// Medium screen / desktop
$screen-md : 768px;
$screen-md-min : $screen-md;

// Large screen / wide desktop
$screen-lg : 992px;
$screen-lg-min : $screen-lg;

// Extra large screen / full hd
$screen-xl : 1200px;
$screen-xl-min : $screen-xl;

// Extra extra large screen / large descktop
$screen-xxl : 1600px;
$screen-xxl-min : $screen-xxl;

// provide a maximum
$screen-xs-max : ($screen-sm-min - 1px);
$screen-sm-max : ($screen-md-min - 1px);
$screen-md-max : ($screen-lg-min - 1px);
$screen-lg-max : ($screen-xl-min - 1px);
$screen-xl-max : ($screen-xxl-min - 1px);
// Grid system
$grid-columns : 24;
$grid-gutter-width : 0;