/** Varialbes used for mixins */
/*** Media Queries : http://breakpoint-sass.com/ ***/
/** breakpojtns values : http://breakpoint-sass.com/ ***/
:root {
  /* Color palette. */
  --clr-white: #ffffff;
  --clr-black: #000000;
  --testcolorT: #00F;
  --clr-gray-50: #f8f8f8;
  --clr-gray-100: #EFEFEF;
  --clr-gray-200: #C5C5C5;
  --clr-gray-300: #848484;
  --clr-gray-400: #707070;
  --clr-gray-500: #3a4243;
  --clr-gray-600: #343b3c;
  --clr-gray-700: #2c3232;
  --clr-gray-800: #232828;
  --clr-gray-900: #1c2021;
  --clr-social-fb: #4267B2;
  --clr-social-fb--hover: #898F9C;
  --clr-social-google: #DB4437;
  --clr-social-google--hover: #ec9b98;
  /* Color palette. */
  --color-white: #ffffff;
  --color-white-o-25: rgba(255, 255, 255, 0.25);
  --color-black: #000000;
  --color-black-o-25: rgba(17, 17, 17, 0.25);
  --color-on-light: #3c3c3b;
  --color-on-dark: #ffffff;
  /* Main colors. */
  --color-primary: rgb(55, 175, 229);
  --color-primary-surface: #0e6eb6;
  --color-primary-tr: oklch(from var(--color-primary) l c h / 80%);
  --color-on-primary: var(--color-on-light);
  --color-primary-light: rgb(129, 203, 242);
  --color-primary-lighter: rgb(133, 193, 225);
  --color-primary-dark: rgb(14, 110, 182);
  --color-secondary: rgb(166, 179, 87);
  --color-secondary-surface: rgb(193, 209, 101);
  --color-secondary-tr: oklch(from var(--color-secondary) l c h / 80%);
  --color-on-secondary: var(--color-on-light);
  --color-secondary-light: rgb(193, 209, 101);
  --color-secondary-lighter: rgb(220, 226, 121);
  --color-secondary-dark: oklch(from var(--color-secondary) 80% c h);
  --color-tertiary: rgb(244, 154, 88);
  --color-tertiary-surface: rgb(244, 154, 88);
  --color-tertiary-tr: oklch(from var(--color-tertiary-dark) l c h / 50%);
  --color-on-tertiary: var(--color-on-light);
  --color-tertiary-light: rgb(251, 189, 75);
  --color-tertiary-lighter: rgb(255, 213, 64);
  --color-tertiary-dark: oklch(from var(--color-tertiary) calc(l * .7) c h);
  --color-cold: hsla(171, 24%, 94%, 1);
  --color-cold-surface: hsla(171, 24%, 94%, 1);
  --color-cold-tr: hsla(171, 24%, 94%, 0.8);
  --color-on-cold: var(--color-on-light);
  --color-cold-light: hsla(171, 24%, 100%, 1);
  --color-cold-lighter: hsla(171, 24%, 100%, 1);
  --color-cold-dark: hsla(171, 24%, 84%, 1);
  --color-warm: hsla(55, 41%, 71%, 1) ;
  --color-warm-tr: hsla(55, 41%, 71%, 0.8) ;
  --color-on-warm: var(--color-on-light);
  --color-warm-surface: hsla(55, 41%, 81%, 1) ;
  --color-warm-light: hsla(55, 41%, 81%, 1) ;
  --color-warm-lighter: hsla(55, 41%, 91%, 1);
  --color-warm-dark: hsla(55, 41%, 60%, 1) ;
  --color-background: var(--color-white);
  --color-surface: var(--color-white);
  --color-error: hsl(356, 87%, 41%);
  --color-error-surface: hsl(0, 58%, 81%);
  --color-on-error: var(--color-white);
  --color-error-light: hsl(356, 87%, 61%);
  --color-error-dark: hsl(356, 87%, 21%);
  --color-error-container: hsl(0, 58%, 81%);
  --color-on-error-container: hsl(356, 87%, 21%);
  --color-warning: hsl(31, 84%, 48%);
  --color-warning-surface: #edd19d;
  --color-warning-light: hsl(31, 84%, 60%);
  --color-warning-dark: hsl(31, 84%, 30%);
  --color-on-warning: var(--color-black);
  --color-warning-container: #edd19d;
  --color-on-warning-container: hsl(31, 84%, 30%);
  --color-success: #60A858;
  --color-on-success: var(--color-on-light);
  --color-success-surface: #bfdcbc;
  --color-success-container: #bfdcbc;
  --color-on-success-container: #487e42;
  /* Typography colors. */
  --color-text: var(--color-on-light);
  --color-headings: var(--color-on-light);
  --color-text-dimmed: var( --color-secondary-light);
  --color-mark-background: var( --color-secondary-light);
  /* Utility colors. */
  --color-border: var(--color-primary-light);
  --color-border-dark: var(--color-primary-dark);
  --color-disabled: #E5E2E2;
}

:root {
  --size-000: -.5rem;
  --size-00: -.25rem;
  --size-1: .25rem;
  --size-2: .5rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;
  --size-6: 1.75rem;
  --size-7: 2rem;
  --size-8: 3rem;
  --size-9: 4rem;
  --size-10: 5rem;
  --size-11: 7.5rem;
  --size-12: 10rem;
  --size-13: 15rem;
  --size-14: 20rem;
  --size-15: 30rem;
  --size-fluid-1: max(.5rem, min(1vw, 1rem));
  --size-fluid-2: max(1rem, min(2vw, 1.5rem));
  --size-fluid-3: max(1.5rem, min(3vw, 2rem));
  --size-fluid-4: max(2rem, min(4vw, 3rem));
  --size-fluid-5: max(4rem, min(5vw, 5rem));
  --size-fluid-6: max(5rem, min(7vw, 7.5rem));
  --size-fluid-7: max(7.5rem, min(10vw, 10rem));
  --size-fluid-8: max(10rem, min(20vw, 15rem));
  --size-fluid-9: max(15rem, min(30vw, 20rem));
  --size-fluid-10: max(20rem, min(40vw, 30rem));
  --size-content-1: 20ch;
  --size-content-2: 45ch;
  --size-content-3: 60ch;
  --size-header-1: 20ch;
  --size-header-2: 25ch;
  --size-header-3: 35ch;
  --size-xxs: 240px;
  --size-xs: 360px;
  --size-sm: 500px;
  --size-smd: 670px;
  --size-md: 768px;
  --size-lg: 1024px;
  --size-xl: 1140px;
  --size-xxl: 1440px;
  --size-xxxl: 1710px;
  --default-site-width: var(--size-xl);
  --max-site-width: var(--size-xxxl);
}

:root {
  --spacing-xxs: 0.25rem; /* 0.25 * 16px = 4px */
  --spacing-xs: 0.5rem; /* 0.5 * 16px = 8px */
  --spacing-sm: 0.625rem; /* 0.75 * 16px = 12px */
  --spacing-md: 1rem; /* 1 * 16px = 16px */
  --spacing-lg: 1.3125em; /* 1.5 * 16px = 24px */
  --spacing-xl: 1.875rem; /* 3 * 16px = 48px */
  --spacing-xxl: 2.5rem; /* 4 * 16px = 64px */
  --spacing-max: 4rem; /* 90 */
  --spacing-auto-xxs: max(.5rem, min(1.2vw, 1rem)); /* 8 -> 16 */
  --spacing-auto-xs: max(.5rem, min(2vw, 1.5rem)); /* 8 -> 24 */
  --spacing-auto-sm: max(1rem, min(3vw, 1.875rem)); /* 16 -> 30 */
  --spacing-auto: max(1.5rem, min(3.9vw, 2.5rem)); /* 24 -> 36 */
  --spacing-auto-lg: max(1.85rem, min(5.2vw, 3.125rem)); /* 30 -> 50 */
  --spacing-auto-xl: max(2.25rem, min(6.6vw, 4.5rem)); /* 36 -> 70 */
  --spacing-auto-xxl: max(2.5rem, min(8.4vw, 5.625rem)); /* 40 -> 90 */
  --spacing-auto-max: max(3.13rem, min(calc(-3.3rem + 13.39vw), 8.75rem)); /* 50 - 140 */
  --gut--spacing: var(--spacing-auto);
}

:root {
  --radius-xxs: 0.125rem; /* 0.125 * 16px = 2px */
  --radius-xs: 0.3125rem; /* 4px */
  --radius-sm: 0.5rem; /* 0.5 * 16px = 8px */
  --radius-md: 0.625rem; /* 0.75 * 16px = 10px */
  --radius-lg: 1rem; /* 1 * 16px = 16px */
  --radius-xl: 1.875rem; /* 30px */
  --radius-xxl: 3rem; /* 3 * 16px = 48px */
  --radius-default: var(--radius-md);
  --radius-auto: max(20px, min(3vw, 40px));
  --radius-auto-lg: max(30px, min(5vw, 60px));
  --radius-auto-xl: max(50px, min(7vw, 80px));
  --radius-auto-xxl: max(50px, min(9vw, 130px));
  --radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
  --radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
  --radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
  --radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
  --radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
  --radius-conditional-xxs: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-xxs));
  --radius-conditional-xs: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-xs));
  --radius-conditional-sm: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-sm));
  --radius-conditional-md: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-md));
  --radius-conditional-lg: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-lg));
  --radius-conditional-xl: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-xl));
  --radius-conditional-xxl: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-xxl));
}

:root {
  --shadow-color: 220 3% 15%;
  /*--shadow-color: 187 7% 25%;*/
  --shadow-strength: 3%;
  --shadow-xs: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-sm:
    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
  --shadow-md:
    0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-lg:
    0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
  --shadow-xl:
    0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-xxl:
    0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
    0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --inner-shadow-xs: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --inner-shadow-sm: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --inner-shadow-md: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --inner-shadow-lg: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --inner-shadow-xl: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --inner-shadow-xxl: inset 0 3px 20px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
}

:root {
  --grid-gap: var(--spacing-lg);
  --grid-container-max-width: 100%;
  --grid-template-columns-12: repeat(12, [col] 1fr);
}
@media (min-width: 1024px) {
  :root {
    --grid-container-max-width: 1024px;
  }
}
@media (min-width: 1140px) {
  :root {
    --grid-container-max-width: 1140px;
  }
}
@media (min-width: 1440px) {
  :root {
    --grid-container-max-width: 1440px;
  }
}
/*# sourceMappingURL=index.css.map */