/**
* ------------ Colors -----------------
*/
$brand:#2271b1;
$brand-semi-deep:#135e96;
$brand-deep:#135e96;
$label-color:#333333;
$placeholder-color:#B3B3B3;
$text-color: #808080;
$gray-background: #f4f2f2;
$border-block:#D6D6D6;
$fieldset-border:#F2F2F2;
$unit-selector-bg: #e2e2e4;
$active-tab: #f5f5f5;



$path: '../images/';

/**
* Animation time
*/
$transition: .1s;

/**
* Sizes
*/
$container-width: 1140px;
$container-md: 970px;
$container-sm: 750px;
$container-xs: 100%;
$button-height: 44px;
$line-height: 1.4;

/**
* Fonts
*/

$font-base: 16px;
$font-small: 12px;
$font-base-responsive: 14px;
$font-hc: 20px;
$font-h4: 18px;
$font-h3: 24px;
$font-h2: 36px;
$font-h1: 48px;
$font-h1-mob: 24px;
$font-h2-mob: 18px;
$font-h3-mob: 16px;


$font-weight: 400;
$font-family: "Inter", sans-serif;
$font-family2: sans-serif;
$icons: "icons";

/* Border radius*/
$b-radius: 16px;
$b-radius-min: 8px;
$b-radius-max: 32px;


/*Stars*/
$star-width:100px;
$star-height:15px;

// Hamburgers
// Settings
// ==================================================
$hamburger-layer-width: 30px !default;
$hamburger-layer-height: 2px !default;
$hamburger-layer-spacing: 6px !default;
$hamburger-layer-color: #fff !default;
$hamburger-layer-border-radius: 4px !default;
$hamburger-hover-opacity: 1 !default;
$hamburger-hover-transition-duration: 0.20s !default;
$hamburger-hover-transition-timing-function: ease-in-out !default;
// To use CSS filters as the hover effect instead of opacity,
// set $hamburger-hover-use-filter as true and
// change the value of $hamburger-hover-filter accordingly.
$hamburger-hover-use-filter: false !default;
$hamburger-hover-filter: opacity(50%) !default;


/*
* Grid breakpoints
* Define the minimum dimensions at which your layout will change,
* adapting to different screen sizes, for use in media queries.
*/

$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1367px
) !default;