// Variables
//


//
// Color system
//

// Gray colors
$white: #ffffff;
$black: #000000;

//Color theme main
//-----------------------------------
$gray-darker:             #434343; //
$gray-dark:               #333333;
$gray:                    #555555;
$gray-light:              #838386; //
$gray-lighter:            #f2f3f9; //

$gray-1:                  #c2c2c3; //
$gray-2:                  #ededed; //
$gray-3:                  #7f839a; //
$gray-4:                  #d8dae2; //
$gray-5:             			#3d3d3d;
$gray-6:             			#343434;

$primary:                 #008ae3; //

$secondary:               #008ae3; //
$secondary-1:             #ffec17; //
$secondary-2:             #6d0eb1; //
$secondary-3:             #080ab4; //
$secondary-4:             #6e7b9d; //
$secondary-7:             #6a0dac; //

$secondary-5:             #21212e; //
$secondary-6:             #dedfe8; //

$gray-100: #edeff4;
$gray-200: #d7d7d7;
$gray-300: #cccccc;
$gray-400: #b7b7b7;
$gray-500: #838386;
$gray-600: #868e96;
$gray-700: #2c343b;
$gray-800: #29293a;
$gray-900: #111111;

//
// Body 
//
$body-bg: $white;
$body-color: $gray-500;

$theme-colors: ();

// Accent colors
$danger-color: #f5543f;
$success-color: #98bf44;
// Theme colors
$black-invariable: #000000;
$white-invariable: #ffffff;

// Additional colors
$facebook: #4d70a8;
$facebook-light: #748abc;
$facebook-darken: #3e5a86;

$twitter: #02bcf3;
$twitter-light: #81cbdb;
$twitter-darken: #008ee0;

$google: #e2411e;
$google-light: #de7272;
$google-darken: #b53418;

$instagram: #8134af;
$linkedin: #1787b1;

//
// Page
//
$page-boxed-width: 1600px;
$page-boxed-background-color: $gray-100;
$page-boxed-background-image: url(../images/bg-pattern-boxed.png);

//
// Components
//
// Define common padding and border radius sizes and more.
$border-width: 1px;

$border-radius: 0;
$border-radius-lg: .3rem;
$border-radius-sm: .2rem;

$transition-base: all .3s ease-in-out;

// Map
//
$map-height: 200px;
$map-xs-height: 250px;
$map-md-height: 450px;

// Custom
$shadow-area-1: -3px 0px 50px -2px rgba(0, 0, 0, 0.09);
$shadow-area-2: 1px 1px 10px 0 rgba(0, 0, 0, 0.2);

//
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-family-sans-serif-2: "Oswald", Helvetica, Arial, sans-serif; //
$font-family-sans-serif-1: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-family-sans-serif-3: 'Montserrat', sans-serif; //
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;

$font-family-base: $font-family-sans-serif;
$font-family-sec: $font-family-sans-serif-2;

$font-weight-bold: 700;

// Base fonts
$font-size-base: 18px;
$font-size-lg: 24px;
$font-size-sm: 12px;

$_lh-base: 28px;
$_lh-lg: 28px;
$_lh-sm: 18px;

$font-weight-base: 300;

// ** < Calculated font values >
$line-height-base: ($_lh-base / $font-size-base);
$line-height-lg: ($_lh-lg / $font-size-lg);
$line-height-sm: ($_lh-sm / $font-size-sm);
// ** </ Calculated font values >

// Headings
$headings-font-family: $font-family-sec;
$headings-font-weight: 400;
$headings-line-height: 1.2;
$headings-color: $gray-800;

// Template Heading Values
$_h1-fsz: 80;
$_h2-fsz: 52;
$_h3-fsz: 48;
$_h4-fsz: 28;
$_h5-fsz: 24;
$_h6-fsz: 24;

$_h1-lh: 116;
$_h2-lh: 66;
$_h3-lh: 66;
$_h4-lh: 40;
$_h5-lh: 34;
$_h6-lh: 36;

// ** < Calculated Headings values >
$h1-font-size: $_h1-fsz * 1px;
$h2-font-size: $_h2-fsz * 1px;
$h3-font-size: $_h3-fsz * 1px;
$h4-font-size: $_h4-fsz * 1px;
$h5-font-size: $_h5-fsz * 1px;
$h6-font-size: $_h6-fsz * 1px;

$h1-line-height: ($_h1-lh / $_h1-fsz);
$h2-line-height: ($_h2-lh / $_h2-fsz);
$h3-line-height: ($_h3-lh / $_h3-fsz);
$h4-line-height: ($_h4-lh / $_h4-fsz);
$h5-line-height: ($_h5-lh / $_h5-fsz);
$h6-line-height: ($_h6-lh / $_h6-fsz);
// ** </ Calculated Headings values >

// Icon Fonts
$fa: 'FontAwesome';
$mdi: 'Material Design Icons';
$mi: 'Material Icons';

// Lead
$lead-font-size: 24px;
$lead-line-height: 34px;
$lead-font-weight: 300;

// Hr
$hr-border-color: $gray-200;
$hr-border-width: $border-width;

// Mark
$mark-padding: 5px 10px;
$mark-bg: $primary;

$dt-font-weight: inherit;
$list-inline-padding: 5px;

// Code
$code-font-size: 90%;
$code-padding-y: 10px;
$code-padding-x: 5px;
$code-color: $gray-900;
$code-bg: $gray-100;

//
// Links
//
$link-color: $secondary;
$link-decoration: none;
$link-hover-color: darken($link-color, 15%);
$link-press-color: darken($link-color, 15%);
$link-hover-decoration: underline;

// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;
$zindex-popover: 1060;
$zindex-tooltip: 1070;
// Custom
$zindex-rd-navbar: 1080;
$zindex-lg: 1090;
$zindex-layout-panel: 1100;

//
// 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: 1600px,
		xxxl: 1800px
);

//@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
//@include _assert-starts-at-zero($grid-breakpoints);

$screen-fullhd: 1920px;

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
		sm: 540px,
		md: 720px,
		lg: 960px,
		xl: 1200px
);
@include _assert-ascending($container-max-widths, "$container-max-widths");

//
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-gutter-width-narrow: 30px;
$cell-spacing-narrow: 10px;
//
// Buttons
//

$input-btn-padding-y: 11px;
$input-btn-padding-x: 35px;
$input-btn-font-size: 14px;
$input-btn-line-height: 1.25;

$input-btn-padding-y-sm: 5px;
$input-btn-padding-x-sm: 25px;
$input-btn-line-height-sm: 1.5;

$input-btn-padding-y-lg: 12px;
$input-btn-padding-x-lg: 50px;
$input-btn-line-height-lg: 1.5;

$btn-box-shadow: 0;
$btn-focus-box-shadow: 0;
$btn-active-box-shadow: 0;

$btn-link-disabled-color: $gray-600;

$btn-block-spacing-y: .5rem;

// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius;
$btn-border-radius-lg: $border-radius-lg;
$btn-border-radius-sm: $border-radius-sm;

$btn-transition: all .15s ease-in-out;

//
// Forms
//
$form-input-height: 50px;
$form-input-lg-height: 60px;
$form-input-sm-height: 40px;

$form-input-color: $gray-400;
$form-input-color-placeholder: $form-input-color;

$form-input-background: #f5f5f5;
$form-input-border-color: $form-input-background;
$form-input-border-radius: $border-radius;

$form-input-font-size: 14px;
$form-input-line-height: 24px;
$form-input-font-weight: 400;

$form-input-border: 1px solid $form-input-border-color;
$form-input-padding-horizontal: 19px;
$form-input-line-height: round($form-input-font-size * 1.7);

$form-input-padding-vertical: round(($form-input-height - $form-input-line-height) / 2) + 1px;
$form-input-padding: $form-input-padding-vertical $form-input-padding-horizontal;

@if ($form-input-border != none) {
	$form-input-padding-vertical: round(($form-input-height - $form-input-line-height - (nth($form-input-border, 1) * 2)) / 2);
	$form-input-padding: $form-input-padding-vertical $form-input-padding-horizontal;
}

$form-textarea-default-height: 135px;
$form-textarea-default-min-height: $form-input-height;
$form-textarea-default-max-height: round($form-textarea-default-height * 1.7);

$form-feedback-focus-color: $primary;
$form-feedback-valid-color: $success-color;
$form-feedback-invalid-color: $danger-color;

//
// Pagination
//
$pagination-padding-y: 10px;
$pagination-padding-x: 10px;
$pagination-font-size: 14px;
$pagination-line-height: 24px;

$pagination-color: $gray-500;
$pagination-bg: $white;
$pagination-border-width: 2px;
$pagination-border-color: $gray-200;

$pagination-hover-color: $white;
$pagination-hover-bg: $primary;
$pagination-hover-border-color: $primary;

$pagination-active-color: $white;
$pagination-active-bg: $primary;
$pagination-active-border-color: $primary;

$pagination-disabled-color: $gray-400;
$pagination-disabled-bg: $gray-200;
$pagination-disabled-border-color: $gray-200;

//
// Tooltips
//
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $gray-darker;
$tooltip-opacity: 1;
$tooltip-padding-y: 6px;
$tooltip-padding-x: 10px;
$tooltip-margin: 0;

$tooltip-arrow-width: 6px;
$tooltip-arrow-height: 6px;
$tooltip-arrow-color: $tooltip-bg;

//== Spacing
//
//##
$spacing-sm: .02em; //
$spacing-md: .06em; //
$spacing-lg: .12em; //

$btn-font-family: $font-family-sec;
$btn-font-weight: 400;
$btn-letter-spacing: $spacing-lg;
$btn-text-transform: uppercase;
$btn-border-width: 2px;
$btn-border-radius: 35px;

//== Borders
//
//##

$border-sm: 9px; // Pricing Box

//== Shadows
//
//##

$shadow-secondary-sm: 0 6px 10px 0 rgba($secondary, .36); // Secondary Button Shadow

$shadow-area-ambient: 0px 0px 1px 0 rgba(0, 0, 0, 0.15);
$shadow-area-xxs: 1px 1px 1px rgba(0, 0, 0, 0.15);
$shadow-area-xs: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
$shadow-area-sm: 0 6px 8px 0 rgba($secondary-4, .17); // Standard Boxed, Button Shadow
$shadow-area-md: 0 7px 24px 0 rgba($secondary-4, .42); // Standard Pricing Shadow
$shadow-area-lg: 0px 10px 30px 0px rgba(#8e95a6, 0.5); // Image shadow
$shadow-area-xl: 0 12px 36px 0 rgba(#1e1f22, .15);