/*
 * ==== VARIABLES ====
 */

/*-- PAGE MARGIN VARIABLE --*/

@media (max-width: 778px) {
    :root {
        --page-margin: 20px;
		--col-1: calc((100vw - 40px) / 12);
    }
}
@media (min-width: 779px) and (max-width: 1314px) {
    :root {
        --page-margin: 50px;
		--col-1: calc((100vw - 100px) / 12);
    }
}
@media (min-width: 1315px) {
    :root {
        --page-margin: calc(50vw - 610px);
		--col-1: calc(1200px / 12);
    }
}

/*-- DESKTOP SIZES & FONTS --*/

@media (min-width:768px) {
	:root {
		--body-font: "Plus Jakarta Sans", Helvetica, Arial, Verdana, sans-serif;
		--titles-font: "cabinet-grotesk", Helvetica, Arial, Verdana, sans-serif;
		--buttons-font: "Plus Jakarta Sans", Helvetica, Arial, Verdana, sans-serif;
		--hero-large: 7.5rem;
		--hero-normal: 5.5rem;
		--hero-small: 3.5rem;
		--highlight: 3rem;
		--title-h2: 2.5rem;
		--title-h3: 2rem;
		--title-h4: 1.5rem;
		--body-xl: 1.5rem;
		--body-l: 1.25rem;
		--body-m: 1.125rem;
		--body-s: 1rem;
		--body-xs: 0.75rem;
		--buttons-large: 1.125rem;
		--buttons-small: 1rem;
		--elements-label: 1.125rem;
		--elements-highlight: 3rem;
		--box-border-radius-xl: 6.25rem;
	}
}

/*-- MOBILE SIZES & FONTS --*/

@media (max-width:767px) {
	:root {
		--body-font: "Plus Jakarta Sans", Helvetica, Arial, Verdana, sans-serif;
		--titles-font: "cabinet-grotesk", Helvetica, Arial, Verdana, sans-serif;
		--buttons-font: "Plus Jakarta Sans", Helvetica, Arial, Verdana, sans-serif;
		--hero-large: 4rem;
		--hero-normal: 3rem;
		--hero-small: 2.5rem;
		--highlight: 2rem;
		--title-h2: 2rem;
		--title-h3: 1.5rem;
		--title-h4: 1.25rem;
		--body-xl: 1.25rem;
		--body-l: 1.125rem;
		--body-m: 1rem;
		--body-s: 0.75rem;
		--body-xs: 0.5rem;
		--buttons-large: 1.125rem;
		--buttons-small: 1rem;
		--elements-label: 1rem;
		--elements-highlight: 2rem;
		--box-border-radius-xl: 2.5rem;
	}
}

/*-- COLORS & SETTINGS --*/

:root {
	--icons-font: 'calmo_icons';
	--icons-google: 'Material Symbols Outlined';
	--neutral-900: #212529;
	--neutral-800: #343A40;
	--neutral-700: #495057;
	--neutral-600: #6C757D;
	--neutral-500: #ADB5BD;
	--neutral-400: #CED4DA;
	--neutral-300: #DEE2E6;
	--neutral-200: #E9ECEF;
	--neutral-100: #F8F9FA;
	--neutral-black: #111111;
	--neutral-grey: #ADADAD;
	--neutral-white: #FFFFFF;
	--custom-box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 15%);
	--custom-box-shadow-hover: 0px 0px 4px 0px rgb(0 0 0 / 25%);
	--font-weight-body: 400;
	--font-weight-medium: 500;
	--font-weight-strong: 700;
	--font-weight-titles: 500;
	--font-weight-buttons: 500;
	--line-height-body: 1.4em;
	--box-border-radius: 1.25rem;
	--col-2: calc(var(--col-1) * 2);
	--col-3: calc(var(--col-1) * 3);
	--col-4: calc(var(--col-1) * 4);
	--col-5: calc(var(--col-1) * 5);
	--col-6: calc(var(--col-1) * 6);
	--col-7: calc(var(--col-1) * 7);
	--col-8: calc(var(--col-1) * 8);
	--col-9: calc(var(--col-1) * 9);
	--col-10: calc(var(--col-1) * 10);
	--col-11: calc(var(--col-1) * 11);
	--col-12: calc(var(--col-1) * 12);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wpb_text_column li {
    margin-bottom: 0.75rem;
}



/*
 * ==== TITLES ====
 */

/*-- HERO LARGE --*/
.hero-large {
	font-weight: var(--font-weight-titles) !important;
	font-size:  var(--hero-large) !important;
	line-height: 1em !important;
	font-family: var(--titles-font, --the7-h1-font-family !important);
}
/*-- HERO NORMAL --*/
.hero-normal {
	font-weight: var(--font-weight-titles) !important;
	font-size:  var(--hero-normal) !important;
	line-height: 1em !important;
	font-family: var(--titles-font, --the7-h1-font-family) !important;
}
/*-- HERO SMALL --*/
.hero-small {
	font-weight: var(--font-weight-titles) !important;
	font-size:  var(--hero-small) !important;
	line-height: 1.2em !important;
	font-family: var(--titles-font, --the7-h1-font-family) !important;
}
/*-- HIGHLIGHT --*/
.highlight {
	font-weight: var(--font-weight-body) !important;
	font-size:  var(--highlight) !important;
	line-height: 1.4em !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- HEADING 2 - COMPACT --*/
h2,
.title-h2-compact {
	font-weight: var(--font-weight-titles);
	font-size:  var(--title-h2);
	line-height: 1.2em;
	font-family: var(--titles-font, --the7-h2-font-family);
}
/*-- HEADING 2 - EXTENDED --*/
h2.title-h2-extended {
	font-weight: var(--font-weight-titles) !important;
	font-size:  var(--title-h2) !important;
	line-height: 1.2em !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- HEADING 3 --*/
h3,
.title-h3 {
	font-weight: var(--font-weight-titles);
	font-size:  var(--title-h3);
	line-height: 1.2em;
	font-family: var(--titles-font, --the7-h3-font-family);
}
/*-- HEADING 4 --*/
h4,
.title-h4 {
	font-weight: var(--font-weight-titles);
	font-size:  var(--title-h4);
	line-height: 1.4em;
	font-family: var(--titles-font, --the7-h4-font-family);
}
/*-- PRE-TITLE - HIGHLIGHTED --*/
.pre-title-highlighted {
	font-weight: var(--font-weight-titles);
	font-size:  var(--body-m);
	line-height: 1em;
	font-family: var(--titles-font, --the7-h2-font-family);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
/*-- PRE-TITLE --*/
.pre-title,
.pre-title > * {
	font-weight: var(--font-weight-body);
	font-size:  var(--body-m);
	line-height: 1em;
	font-family: var(--titles-font, --the7-h2-font-family);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * ==== BODY ====
 */

/*-- BODY XS --*/
.body-xs,
.body-xs > * {
	font-weight: var(--font-weight-body) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-xs) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- BODY S --*/
.body-s,
.body-s > * {
	font-weight: var(--font-weight-body) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-s) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- BODY M --*/
p,
.wpb_text_column p {
	font-weight: var(--font-weight-body);
	line-height: var(--line-height-body);
	font-size: var(--body-m);
	font-family: var(--body-font, --the7-base-font-family) !important;
}
.body-m,
.body-m > * {
	font-weight: var(--font-weight-body) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-m) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- BODY L --*/
.body-l,
.body-l > * {
	font-weight: var(--font-weight-body) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-l) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- BODY XL --*/
.body-xl,
.body-xl > * {
	font-weight: var(--font-weight-body) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-xl) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}

/*
 * ==== BODY MEDIUM ====
 */

/*-- BODY MEDIUM XS --*/
.body-medium-xs,
.body-medium-xs > * {
	font-weight: var(--font-weight-medium) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-xs) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- BODY MEDIUM S --*/
.body-medium-s,
.body-medium-s > * {
	font-weight: var(--font-weight-medium) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-s) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- BODY MEDIUM M --*/
.body-medium-m,
.body-medium-m > * {
	font-weight: var(--font-weight-medium) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-m) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- BODY MEDIUM L --*/
.body-medium-l,
.body-medium-l > * {
	font-weight: var(--font-weight-medium) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-l) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- BODY MEDIUM XL --*/
.body-medium-xl,
.body-medium-xl > * {
	font-weight: var(--font-weight-medium) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-xl) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}

/*
 * ==== BODY STRONG ====
 */

/*-- BODY STRONG XS --*/
.body-xs strong,
.body-medium-xs strong {
	font-weight: var(--font-weight-strong) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-xs) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- BODY STRONG S --*/
.body-s strong,
.body-medium-s strong {
	font-weight: var(--font-weight-strong) !important;
	line-height: var(--line-height-body !important);
	font-size: var(--body-s) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- BODY STRONG M --*/
.body-m strong,
.body-medium-m strong {
	font-weight: var(--font-weight-strong) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-m) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- BODY STRONG L --*/
.body-l strong,
.body-medium-l strong {
	font-weight: var(--font-weight-strong) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-l) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}
/*-- BODY STRONG XL --*/
.body-xl strong,
.body-medium-xl strong {
	font-weight: var(--font-weight-strong) !important;
	line-height: var(--line-height-body) !important;
	font-size: var(--body-xl) !important;
	font-family: var(--body-font, --the7-base-font-family) !important;
}

/*
 * ==== ELEMENTS ====
 */

/*-- LABEL --*/
.element-label {
	font-weight: var(--font-weight-body);
	line-height: 1em;
	font-size: var(--elements-label);
	font-family: var(--body-font, --the7-base-font-family) !important;
	text-transform: uppercase;
}

/*-- HIGHLIGHT --*/
.element-highlight {
	font-weight: var(--font-weight-body);
	line-height: 1.4em;
	font-size: var(--elements-highlight);
	font-family: var(--body-font, --the7-base-font-family) !important;
}

/*
 * ==== COLORS ====
 */

.color-neutral-900 {
    color: var(--neutral-900);
}

.color-neutral-800 {
    color: var(--neutral-800);
}

.color-neutral-700 {
    color: var(--neutral-700);
}

.color-neutral-600 {
    color: var(--neutral-600);
}

.color-neutral-500 {
    color: var(--neutral-500);
}

.color-neutral-400 {
    color: var(--neutral-400);
}

.color-neutral-300 {
    color: var(--neutral-300);
}

.color-neutral-200 {
    color: var(--neutral-200);
}

.color-neutral-100 {
    color: var(--neutral-100);
}

.color-neutral-black {
    color: var(--neutral-black);
}

.color-neutral-grey {
    color: var(--neutral-grey);
}

.color-neutral-white {
    color: var(--neutral-white);
}