/*!
 |-----------------------------------------------------------------------------------------------------------
 |
 |
 |
 | Root Variables
 |
 |
 |
 |-----------------------------------------------------------------------------------------------------------
*/
:root {
    /*
   |-----------------------------------------------------------
   |
   | Colors
   |
   |-----------------------------------------------------------
  */
    /*
   |--------------------------------
   | Black and white
   |--------------------------------
  */
    --gray-1: #f8f9fa;
    --gray-2: #e9ecef;
    --gray-3: #dee2e6;
    --gray-4: #ced4da;
    --gray-5: #adb5bd;
    --gray-6: #6c757d;
    --gray-7: #495057;
    --gray-8: #343a40;
    --gray-9: #212529;
    --gray-10: #181818;
    --white: #ffffff;
    --black: #000000;
    /* --light: #f5f2ea; */
    --light: #f3f3f3;
    --dark: var(--gray-10);
    /*
   |--------------------------------
   | Basic colors
   |--------------------------------
  */
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --success-1: #b6e6de;
    --success-2: #89d6c9;
    --success-3: #5bc7b5;
    --success-4: #2eb7a0;
    --success-5: #248f7d;
    --success-6: #1a685b;
    --success-7: #104038;
    --success: var(--success-4);
    --info-1: #bdeef1;
    --info-2: #95e4e8;
    --info-3: #6cd9df;
    --info-4: #43cfd6;
    --info-5: #35a2a8;
    --info-6: #267579;
    --info-7: #18484b;
    --info: var(--info-4);
    --warning-1: #fff0ca;
    --warning-2: #ffe7a9;
    --warning-3: #ffde89;
    --warning-4: #ffd568;
    --warning-5: #c8a752;
    --warning-6: #91793b;
    --warning-7: #594b24;
    --warning: var(--warning-4);
    --danger-1: #f3b8be;
    --danger-2: #eb8d96;
    --danger-3: #e4616d;
    --danger-4: #dc3545;
    --danger-5: #ac2a36;
    --danger-6: #7d1e27;
    --danger-7: #4d1318;
    --danger: var(--danger-4);
    /*
   |--------------------------------
   | Primary colors
   |--------------------------------
  */
    /* --primary-1: #d7b0b0;
    --primary-2: #be7e80;
    --primary-3: #a64d4f; */
    /* --primary-4: #8D1C1E; */
    /* --primary-4: #3c280d; */
    /* --primary-4: #535353; */
    /* --primary-5: #6F1618; */
    /* --primary-5: #291717; */
    /* --primary-6: #501011; */
    /* --primary-6: #2f1717; */
    /* --primary-7: #310A0B; */
    /* --primary-7: #281011; */
    --primary-1: #d9d9d9; /* very light */
    --primary-2: #bfbfbf;
    --primary-3: #999999;
    --primary-4: #535353; /* base */
    --primary-5: #3d3d3d;
    --primary-6: #262626;
    --primary-7: #0f0f0f; /* very dark */
    --primary: var(--primary-4);
    --primary-dark: var(--primary-5);
    /*
   |--------------------------------
   | Secondary colors
   |--------------------------------
  */
    /* --secondary-1: #c6c8b7;
    --secondary-2: #a3a78a;
    --secondary-3: #7f855d;
    --secondary-4: #806a70; */
    /* --secondary-4: #5c6330; */
    /* --secondary-5: #484e26;
    --secondary-6: #34381b;
    --secondary-7: #202311; */
    --secondary-1: #f0e9ea; /* lightest */
    --secondary-2: #d6c9cc;
    --secondary-3: #b89fa4;
    --secondary-4: #806a70; /* base */
    --secondary-5: #68555a;
    --secondary-6: #4f4044;
    --secondary-7: #362b2e; /* darkest */
    --secondary: var(--secondary-4);
    --secondary-dark: var(--secondary-5);
    /*
   |--------------------------------
   | Third colors
   |--------------------------------
  */
    /* --third-1: #e7e0cb;
    --third-2: #d8cdaa;
    --third-3: #c9ba8a;
    --third-4: #476a6f; */
    /* --third-4: #baa769; */
    /* --third-5: #928352;
    --third-6: #695f3c;
    --third-7: #413a25; */
    --third-1: #dde4e5; /* lightest */
    --third-2: #b6c6c9;
    --third-3: #7d9ba0;
    --third-4: #476a6f; /* base */
    --third-5: #3a575b;
    --third-6: #2c4347;
    --third-7: #1e2f33; /* darkest */
    --third: var(--third-4);
    --third-dark: var(--third-5);
    /*
   |--------------------------------
   | Fourth colors
   |--------------------------------
  */
    --fourth-1: #bac4cd;
    --fourth-2: #8f9fad;
    --fourth-3: #657b8e;
    --fourth-4: #3a566f;
    --fourth-5: #2d4357;
    --fourth-6: #21313f;
    --fourth-7: #141e27;
    --fourth: var(--fourth-4);
    --fourth-dark: var(--fourth-5);
    /*
   |-----------------------------------------------------------
   |
   | Typography
   |
   |-----------------------------------------------------------
  */
    /*
   |--------------------------------
   | Font families
   |--------------------------------
  */
    --font-family-sans-serif: quadraat sans, sans-serif;
    --font-family-serif: "Quadraat", serif;
    --font-family-display: "Quadraat", serif;
    --font-family-monospace: "Quadraat", serif;
    --font-family-icon: "Font Awesome 5 Free";
    --font-family-brand: "Font Awesome 5 Brands";
    /*
   |--------------------------------
   | Font sizes
   |--------------------------------
  */
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 22px;
    --font-size: var(--font-size-md);
    /*
   |--------------------------------
   | Font weights
   |--------------------------------
  */
    --font-weight-light: 100;
    --font-weight-thin: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
    /*
   |--------------------------------
   | Text colors
   |--------------------------------
  */
    --text-color-1: var(--gray-4);
    --text-color-2: var(--gray-5);
    --text-color-3: var(--gray-6);
    --text-color-4: var(--gray-10);
    --text-color-5: var(--gray-8);
    --text-color-6: var(--gray-9);
    --text-color-7: var(--gray-10);
    --text-color: var(--text-color-4);
    /*
   |--------------------------------
   | Line heights
   |--------------------------------
  */
    --line-height: 1.5;
    /*
   |-----------------------------------------------------------
   |
   | Heading
   |
   |-----------------------------------------------------------
  */
    --heading-color: var(--primary);
    --heading-font-weight: var(--font-weight-semi-bold);
    --heading-font-family: var(--font-family-serif);
    --heading-text-transform: none;
    --heading-line-height: 1.15;
    --h1-font-size: 62px;
    --h1-font-size-mobile: calc(var(--h1-font-size) * 0.85);
    --h1-color: var(--heading-color);
    --h1-font-weight: var(--heading-font-weight);
    --h1-font-family: var(--heading-font-family);
    --h2-font-size: 48px;
    --h2-font-size-mobile: calc(var(--h2-font-size) * 0.85);
    --h2-color: var(--heading-color);
    --h2-font-weight: var(--heading-font-weight);
    --h2-font-family: var(--heading-font-family);
    --h3-font-size: 40px;
    --h3-font-size-mobile: calc(var(--h3-font-size) * 0.85);
    --h3-color: var(--heading-color);
    --h3-font-weight: var(--heading-font-weight);
    --h3-font-family: var(--heading-font-family);
    --h4-font-size: 32px;
    --h4-font-size-mobile: calc(var(--h4-font-size) * 0.85);
    --h4-color: var(--heading-color);
    --h4-font-weight: var(--heading-font-weight);
    --h4-font-family: var(--heading-font-family);
    --h5-font-size: 24px;
    --h5-font-size-mobile: 20px;
    --h5-color: var(--heading-color);
    --h5-font-weight: var(--heading-font-weight);
    --h5-font-family: var(--heading-font-family);
    --h6-font-size: 20px;
    --h6-font-size-mobile: 18px;
    --h6-color: var(--heading-color);
    --h6-font-weight: var(--heading-font-weight);
    --h6-font-family: var(--heading-font-family);
    /*
   |-----------------------------------------------------------
   |
   | Border
   |
   |-----------------------------------------------------------
  */
    --border-color-light: rgba(255, 255, 255, 50%);
    --border-color-dark: rgba(0, 0, 0, 20%);
    --border-radius: 4px;
    --border-radius-circle: 50%;
    /*
   |-----------------------------------------------------------
   |
   | Links
   |
   |-----------------------------------------------------------
  */
    --link-color: var(--text-color);
    --link-color-hover: var(--primary);
    --link-decoration: none;
    --link-decoration-hover: none;
    /*
   |-----------------------------------------------------------
   |
   | List
   |
   |-----------------------------------------------------------
  */
    --list-padding-left: 20px;
    --list-item-margin-top: 0;
    --list-item-margin-bottom: 10px;
    --nested-list-margin-top: 15px;
    --nested-list-margin-bottom: 15px;
    --nested-list-item-margin-top: 0;
    --nested-list-item-margin-bottom: 10px;
    /*
   |-----------------------------------------------------------
   |
   | Table
   |
   |-----------------------------------------------------------
  */
    --table-border-color: var(--border-color-dark);
    --table-accent-bg: rgba(0, 0, 0, 0.1);
    /*
   |-----------------------------------------------------------
   |
   | Buttons
   |
   |-----------------------------------------------------------
  */
    --btn-letter-spacing: 0;
    --btn-border-width: 1px;
    --btn-border-style: solid;
    --btn-border-radius: 0;
    --btn-border-radius-rounded: 100px;
    --btn-text-transform: none;
    --btn-font-size: 16px;
    --btn-font-weight: var(--font-weight-normal);
    --btn-font-family: var(--font-family-sans-serif);
    --btn-sm-font-size: 12px;
    --btn-sm-padding-y: 8px;
    --btn-sm-padding-x: 15px;
    --btn-md-font-size: 16px;
    --btn-md-padding-y: 16px;
    --btn-md-padding-x: 25px;
    --btn-lg-font-size: 20px;
    --btn-lg-padding-y: 15px;
    --btn-lg-padding-x: 40px;
    /*
   |-----------------------------------------------------------
   |
   | Form
   |
   |-----------------------------------------------------------
  */
    /*
   |--------------------------------
   | Font
   |--------------------------------
  */
    --form-font-size: var(--font-size);
    --form-font-family: var(--font-family-sans-serif);
    --form-text-color: var(--text-color);
    --form-line-height: var(--line-height);
    /*
   |--------------------------------
   | Input
   |--------------------------------
  */
    --form-input-height: 46px;
    --form-input-padding: 15px;
    /*
   |--------------------------------
   | Border
   |--------------------------------
  */
    --form-border-color: var(--third);
    --form-border-radius: 0;
    /*
   |--------------------------------
   | Background
   |--------------------------------
  */
    --form-bg: var(--light);
    --form-bg-hover: var(--light);
    /*
   |--------------------------------
   | Shadow
   |--------------------------------
  */
    --form-inner-shadow: inset 0 1px 3px rgba(0, 0, 0, 0);
    --form-outer-shadow: 0 0 0 3px rgba(67, 207, 214, 0);
    --form-inner-shadow-focus: var(--form-inner-shadow);
    --form-outer-shadow-focus: 0 0 0 3px rgba(67, 207, 214, 0.25);
    --form-error-inner-shadow-focus: var(--form-inner-shadow);
    --form-error-outer-shadow-focus: 0 0 0 3px rgba(220, 53, 69, 0.25);
    /*
   |--------------------------------
   | Radio & Checkbox
   |--------------------------------
  */
    --form-checkbox-width: 26px;
    --form-checkbox-height: var(--form-checkbox-width);
    --form-checkbox-line-height: var(--form-line-height);
    --form-checkbox-border-radius: var(--form-border-radius);
    --form-checkbox-bg: var(--form-bg);
    --form-checkbox-bg-checked: var(--gray-6);
    --form-checkbox-border: var(--border-color-dark);
    --form-checkbox-border-checked: var(--gray-6);
    --form-checkbox-icon-size: 15px;
    --form-radio-icon-size: 10px;
    /*
   |--------------------------------
   | Spacing
   |--------------------------------
  */
    --form-gutter: 8px;
    /*
   |-----------------------------------------------------------
   |
   | Content Area
   |
   |-----------------------------------------------------------
  */
    /*
   |--------------------------------
   | Default / Medium
   |--------------------------------
  */
    --content-area-p-t: 60px;
    --content-area-p-b: 30px;
    --content-area-p-x: 45px;
    --content-area-p-t-tablet: 60px;
    --content-area-p-b-tablet: 30px;
    --content-area-p-x-tablet: 24px;
    --content-area-p-t-phone: 60px;
    --content-area-p-b-phone: 30px;
    --content-area-p-x-phone: 0px;
    /*
   |--------------------------------
   | Small
   |--------------------------------
  */
    --content-area-sm-p-t: 45px;
    --content-area-sm-p-b: 30px;
    --content-area-sm-p-x: 45px;
    --content-area-sm-p-t-tablet: 45px;
    --content-area-sm-p-b-tablet: 30px;
    --content-area-sm-p-x-tablet: 24px;
    --content-area-sm-p-t-phone: 45px;
    --content-area-sm-p-b-phone: 30px;
    --content-area-sm-p-x-phone: 0px;
    /*
   |--------------------------------
   | Large
   |--------------------------------
  */
    --content-area-lg-p-t: 90px;
    --content-area-lg-p-b: 60px;
    --content-area-lg-p-x: 45px;
    --content-area-lg-p-t-tablet: 90px;
    --content-area-lg-p-b-tablet: 60px;
    --content-area-lg-p-x-tablet: 24px;
    --content-area-lg-p-t-phone: 90px;
    --content-area-lg-p-b-phone: 60px;
    --content-area-lg-p-x-phone: 0px;
    /*
   |--------------------------------
   | Extra Large
   |--------------------------------
  */
    --content-area-xl-p-t: 120px;
    --content-area-xl-p-b: 90px;
    --content-area-xl-p-x: 45px;
    --content-area-xl-p-t-tablet: 120px;
    --content-area-xl-p-b-tablet: 90px;
    --content-area-xl-p-x-tablet: 24px;
    --content-area-xl-p-t-phone: 120px;
    --content-area-xl-p-b-phone: 60px;
    --content-area-xl-p-x-phone: 0px;
    /*
   |-----------------------------------------------------------
   |
   | Social Media
   |
   |-----------------------------------------------------------
  */
    --sns-color: var(--link-color);
    --sns-color-hover: var(--link-color-hover);
    --sns-font-size-sm: 16px;
    --sns-font-size-md: 25px;
    --sns-font-size-lg: 25px;
    --sns-font-size-huge: 30px;
    --sns-margin-sm: 15px;
    --sns-margin-md: 18px;
    --sns-margin-lg: 25px;
    --sns-margin-huge: 30px;
    /*
   |--------------------------------
   | Circle and square
   |--------------------------------
  */
    --sns-circle-font-size-sm: 14px;
    --sns-circle-font-size-md: var(--sns-font-size-md);
    --sns-circle-font-size-lg: var(--sns-font-size-lg);
    --sns-circle-font-size-huge: var(--sns-font-size-huge);
    --sns-circle-size-sm: 24px;
    --sns-circle-size-md: 43px;
    --sns-circle-size-lg: 50px;
    --sns-circle-size-huge: 60px;
    --sns-circle-margin-sm: 20px;
    --sns-circle-margin-md: 36px;
    --sns-circle-margin-lg: 36px;
    --sns-circle-margin-huge: 36px;
    /*
   |-----------------------------------------------------------
   |
   | Spacer
   |
   |-----------------------------------------------------------
  */
    --mwSpacer-height-sm: 30px;
    --mwSpacer-height-sm-mobile: 30px;
    --mwSpacer-height-md: 60px;
    --mwSpacer-height-md-mobile: 30px;
    --mwSpacer-height-lg: 90px;
    --mwSpacer-height-lg-mobile: 60px;
    /*
   |-----------------------------------------------------------
   |
   | Transition
   |
   |-----------------------------------------------------------
  */
    --tran-style-1: cubic-bezier(0.82, 0.01, 0.21, 1);
    --tran-style-2: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-200: var(--tran-style-2) 200ms;
    --transition-360: var(--tran-style-2) 360ms;
    --transition-linear-200: linear 200ms;
    --transition-linear-360: linear 360ms;
    /*
   |-----------------------------------------------------------
   |
   | Shadow
   |
   |-----------------------------------------------------------
  */
    --shadow-0: 0 0 0 0 rgba(0, 0, 0, 0);
    --shadow-1: 0 2px 2px 0 rgba(0, 0, 0, 0.06),
        0 3px 1px -2px rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.06);
    --shadow-2: 0 4px 5px 0 rgba(0, 0, 0, 0.06),
        0 1px 10px 0 rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-3: 0 8px 17px 2px rgba(0, 0, 0, 0.06),
        0 3px 14px 2px rgba(0, 0, 0, 0.04), 0 5px 5px -3px rgba(0, 0, 0, 0.06);
    --shadow-4: 0 16px 24px 2px rgba(0, 0, 0, 0.08),
        0 6px 30px 5px rgba(0, 0, 0, 0.06), 0 8px 10px -7px rgba(0, 0, 0, 0.08);
    --shadow-5: 0 24px 38px 3px rgba(0, 0, 0, 0.08),
        0 9px 46px 8px rgba(0, 0, 0, 0.06), 0 11px 15px -7px rgba(0, 0, 0, 0.08);
    --shadow-6: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-7: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-0-hover: 0 8px 17px 2px rgba(0, 0, 0, 0.06),
        0 3px 14px 2px rgba(0, 0, 0, 0.04), 0 5px 5px -3px rgba(0, 0, 0, 0.06);
    --shadow-1-hover: 0 8px 17px 2px rgba(0, 0, 0, 0.06),
        0 3px 14px 2px rgba(0, 0, 0, 0.04), 0 5px 5px -3px rgba(0, 0, 0, 0.06);
    --shadow-2-hover: 0 16px 24px 2px rgba(0, 0, 0, 0.08),
        0 6px 30px 5px rgba(0, 0, 0, 0.06), 0 8px 10px -7px rgba(0, 0, 0, 0.08);
    --shadow-3-hover: 0 24px 38px 3px rgba(0, 0, 0, 0.08),
        0 9px 46px 8px rgba(0, 0, 0, 0.06), 0 11px 15px -7px rgba(0, 0, 0, 0.08);
    --shadow-4-hover: 0 8px 17px 2px rgba(0, 0, 0, 0.06),
        0 3px 14px 2px rgba(0, 0, 0, 0.04), 0 5px 5px -3px rgba(0, 0, 0, 0.06);
    --shadow-5-hover: 0 8px 17px 2px rgba(0, 0, 0, 0.06),
        0 3px 14px 2px rgba(0, 0, 0, 0.04), 0 5px 5px -3px rgba(0, 0, 0, 0.06);
    --shadow-6-hover: 0 20px 30px rgba(0, 0, 0, 0.12);
    --shadow-7-hover: 0 20px 30px rgba(0, 0, 0, 0.3);
}