$toggleheight: 212px;
$grey: #fafafa;
$darkgrey: #1d1b1d;
$blue: #42B3E4;
$darkerblue: #46B2E4;
// $bluehover: #00ace6;
$bluehover: #00bfff;
$bluehighlight: #f2fbff;
$darkblue: #29A3CC;
$white: #ffffff;
$black: #404040;
$green: #83CF10;
$red:#f63b31;
$redhover:#f63b31;
$greenhover: #57d812;
$headline: #2f3946;
$greybg: #F6F6F6;
$cloudbg: #F6F6F6;
$cardborder: #E5E5E5;
$cardcolor: #262626;
$stripe: #ebedee;
$bluestripe: #8dcfff;
$oldblue: #3687cc;
$footerlink: #33ccff;
$text: #4d4d4d;
$answer: #68BF26;

$maxwidth: 1400px;
$padding: 30px;


// Brand colors
$brand-primary:         #33ccff;
$brand-secondary:       #82EE2F;
$brand-dark:            #3687cc;
$brand-light:           #29A3CC;

$color-success:         #4caf50;
$color-info:            #5bc0de;
$color-warning:         #f0ad4e;
$color-error:           #e74c3c;

$body-bg:               #ffffff;

$gray:                  #e9e9e9;
$gray-light:            #edf3f6;
$deep-blue:             #171722; // Deprecated
$white:                 #ffffff;

// Borders
$border-color:          #ebedee;

// Shadows
$shadow-color:          rgba(0, 0, 0, .2);
$box-shadow:            0 0 5px $shadow-color;

// Social colors
$fb: rgb(59, 89, 182);
$tw: rgb(64, 153, 255);
$googleplus: rgb(215, 61, 50);
$pinterest: rgb(203, 32, 39);
$skype: rgb(18, 165, 244);
$spotify: rgb(129, 183, 26);
$instagram: #4e433c;
$tumblr: #2b4964;
$vimeo: #86b32d;
$soundcloud: #f76600;
$youtube: #ff3333;
$linkedin: #4875b4;
$flickr: #fe0883;
$foursquare: #8fd400;

// Text colors
$text-color:            $white;       // deprecated. Use $text-body instead.
$text-body:             #404040;
$text-gray:             #969da6;

$text-color-map: (
  primary:              $brand-primary,
  secondary:            $brand-secondary,
  body:                 $text-body,
  gray:                 $text-gray,
  green:                $color-success,
  success:              $color-success,
  red:                  $color-error,
  error:                $color-error,
  warning:              $color-warning
);


/**
 *  GRID SYSTEM
 *  set $flexboxgrid to `true` to use a flexbox based grid. More info: https://github.com/kristoferjoseph/flexboxgrid
 *  set $flexboxgrid to `false` to use Twitter bootstrap's grid. More info: https://getbootstrap.com/examples/grid/
 */


$flexboxgrid: false;


/**
 *  LAYOUT
 */

$gutterwidth:               24px;
$container-maxwidth:        1380px;
$container-medium-maxwidth: 944px;
$container-small-maxwidth:  400px;
$radius:                    3px;
$border-box:                true;


/**
 *  MEDIA QUERIES BREAKPOINTS
 */

// 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:                  1280px;
$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);


/**
 *  BOOTSTRAP GRID SYSTEM CONFIG
 */

// 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);


// CAUTION: This container sizes are deprecated. Use $container-maxwidth instead.

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

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

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


/**
 *  COMPONENTS
 */

// Background colors
$background-color-map: (
  'primary':              $brand-primary,
  'dark':                 $brand-dark,
  'secondary':            $brand-secondary,
  'white':                $white,
  'success':              $color-success,
  'info':                 $color-info,
  'warning':              $color-warning,
  'error':                $color-error,
  'gray':                 $gray,
  'gray-light':           $gray-light
);

// Badges
$badge-color:           $text-body;
$badge-bg:              $brand-light;
$badges-color-map: (
  primary:              $brand-primary,
  secondary:            $brand-secondary,
  dark:                 $brand-dark,
  light:                $gray,
  success:              $color-success,
  error:                $color-error,
  warning:              $color-warning
);

// Buttons
$button-bg-color:       #e9e9e9; // default color for buttons
$button-text-color:     $text-body; // default color for buttons
$button-border-color:   $body-bg;
$button-border-radius:  0px;
$button-sizes: (
  'normal': (
    fontSize: 12px,
    lineHeight: 1.5,
    paddingTB: 10px,
    paddingLR: 20px
  ),
  'big': (
    fontSize: 16px,
    lineHeight: 1.5,
    paddingTB: 10px,
    paddingLR: 30px
  ),
  'small': (
    fontSize: 11px,
    lineHeight: 1.273,
    paddingTB: 6px,
    paddingLR: 20px
  ),
  'huge': (
    fontSize: 16px,
    lineHeight: 1.5,
    paddingTB: 15px,
    paddingLR: 30px
  ),
  'hugeLg': (
    fontSize: 18px,
    lineHeight: 1.5,
    paddingTB: 18px,
    paddingLR: 50px
  )
);

// Forms
$form-bg-color:               $white;
$form-text-color:             $text-body;

// Loading spinner
$loading-spinner-bg:          $brand-primary;

// Paginator
$paginator-item-radius:       $radius;
$paginator-item-bg:           $brand-light;
$paginator-item-color:        $text-body;
$paginator-item-border:       $body-bg;         // only for compact paginator
$paginator-item-active-bg:    $brand-primary;
$paginator-item-active-color: $text-body;

// Rating circle
$rating-bg:                   $brand-light;

// Rating colors
$rating1:     #dd2c00;
$rating2:     #ff5722;
$rating3:     #ff9800;
$rating4:     #ffc107;
$rating5:     #f5dc00;
$rating6:     #cddc39;
$rating7:     #8bc34a;
$rating8:     #4caf50;
$rating9:     #43a047;
$rating10:    #388e3c;

$background-color-map: map-merge($background-color-map, (
  rating1:    $rating1,
  rating2:    $rating2,
  rating3:    $rating3,
  rating4:    $rating4,
  rating5:    $rating5,
  rating6:    $rating6,
  rating7:    $rating7,
  rating8:    $rating8,
  rating9:    $rating9,
  rating10:   $rating10
));

// Tables
$table-bg-color:        $brand-light;
$table-header-bg-color: $body-bg;
$table-text-color:      $text-body;

// Tags
$tag-text-color:        $text-body;
$tag-bg-color:          $brand-light;
$tag-bullet:            $body-bg;

// Typography
$basefont: 'Open Sans', sans-serif;
$codefont: 'Courier New', monospace;

$font-size-base:        14px;
$font-size-base-medium: 15px;
$font-size-base-large:  15px;

$line-height-base:      1.5em;
$font-weight-base:      400;

$heading-font:          $basefont;
$heading-weight:        300;
$heading-case:          none;

// New

$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

$font-size-base: 1rem !default;
$font-size-lg:   1.25rem !default;
$font-size-sm:   .875rem !default;

$font-weight-normal: 300 !default;
$font-weight-bold: 500 !default;

$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;

$h1-font-size: 3.052rem !default;
$h2-font-size: 2.441rem !default;
$h3-font-size: 1.953rem !default;
$h4-font-size: 1.563rem !default;
$h5-font-size: 1.25rem !default;
$h6-font-size: 1rem !default;

$headings-font-family: 'proximanova-semibold', sans-serif;
$headings-margin-bottom: .75rem !default;
$headings-font-weight:   400 !default;
$headings-color:         $gray-900 !default;
$headings-letter-spacing: -.05rem !default; // ~1px

$body-font-family: 'Proxima Nova', sans-serif;
$body-font-color: rgb(221, 221, 221);

$h1-line-height: 3rem !default;
$h2-line-height: 2.25rem !default;
$h3-line-height: 2.25rem !default;
$h4-line-height: 2rem !default;
$h5-line-height: 1.5rem !default;
$h6-line-height: 1.5rem !default;

$display1-size: 7.451rem !default;
$display2-size: 5.96rem !default;
$display3-size: 4.768rem !default;
$display4-size: 3.815rem !default;

$display-line-height: 1 !default;
$display-margin-bottom: 0.75rem !default;

$paragraphs-margin-bottom: 1.75rem !default;

$lead-line-height: 1.875rem !default;

$small-font-size: 80% !default;

$text-muted: $gray-600 !default;

$blockquote-font-size: 1.5rem !default;
$blockquote-footer-font-size: 1.125rem !default;
$blockquote-margin-bottom: 0.75rem !default;