@import url("https://use.typekit.net/czc2zvd.css");
:root {
  /*
===========================
Color Variables
===========================
*/

  /* Website Background */
  --body-bg-color: #fcf5df;

  /* Main Colors */
  --text-color: #92192d;
  --primary-color: #92192d;
  --primary-text-color: #fcf5df;
  --secondary-color: #ff4829;
  --secondary-text-color: #92192d;
  --tertiary-color: #ff97df;
  --tertiary-text-color: #92192d;
  --quaternary-color: #00799c;
  --quaternary-text-color: #fcf5df;

  /* Shade Colors */
  --shade-color-1: #dfdfdf;
  --shade-color-2: #eeeeee;
  --shade-color-3: #f1f6f7;

  /* Custom Colors */
  --custom-color-1: #ff9665;
  --custom-color-2: #5c6ca4;
  --custom-color-3: #2c4024;
  --custom-color-4: #d7ffb0;

  /* Font Colors */
  --small-text-color: var(--text-color);
  --big-text-color: var(--text-color);
  --body-text-color: var(--text-color);
  --h1-color: var(--primary-color);
  --h2-color: var(--primary-color);
  --h3-color: var(--primary-color);
  --h4-color: var(--primary-color);
  --h5-color: var(--primary-color);
  --h6-color: var(--primary-color);

  /* Link Colors */
  --link-color: var(--secondary-color);
  --hover-color: var(--primary-color);

  /* HR Colors */
  --hr-color: var(--primary-color);

  /*
===========================
Button Variables
===========================
*/

  /* Button Colors */
  --primary-button-bg-color: #fcf5df;
  --primary-button-text-color: #92192d;
  --primary-button-hover-bg-color: #92192d;
  --primary-button-hover-text-color: #fcf5df;

  /* Button Icon */
  --primary-button-icon-code: "/e09";
  --primary-button-icon-position: left;
  --primary-button-icon-padding: 10px;

  /* Button Padding */
  --primary-button-padding-top: 10px;
  --primary-button-padding-bottom: 10px;
  --primary-button-padding-right: 10px;
  --primary-button-padding-left: 10px;

  /* Button Fonts */
  --primary-button-font-family: var(--sans-serif-font);
  --primary-button-font-size: 10px;
  --primary-button-font-weight: 400;
  --primary-button-line-height: 120%;
  --primary-button-text-transform: uppercase;

  /* Button Border */
  --primary-button-border-width: 1px;
  --primary-button-border-type: solid;
  --primary-button-border-color: #92192d;
  --primary-button-border-radius: 0;

  /* Secondary Button Colors */
  --secondary-button-bg-color: #fcf5df;
  --secondary-button-text-color: #ff4829;
  --secondary-button-hover-bg-color: #ff4829;
  --secondary-button-hover-text-color: #fcf5df;

  /* Secondary Button Icon */
  --secondary-button-icon-code: "/e09";
  --secondary-button-icon-position: left;
  --secondary-button-icon-padding: 10px;

  /* Secondary Button Padding */
  --secondary-button-padding-top: 10px;
  --secondary-button-padding-bottom: 10px;
  --secondary-button-padding-right: 10px;
  --secondary-button-padding-left: 10px;

  /* Secondary Button Fonts */
  --secondary-button-font-family: var(--sans-serif-font);
  --secondary-button-font-size: 10px;
  --secondary-button-font-weight: 400;
  --secondary-button-line-height: 120%;
  --secondary-button-text-transform: uppercase;

  /* Secondary Button Border */
  --secondary-button-border-width: 1px;
  --secondary-button-border-type: solid;
  --secondary-button-border-color: #ff4829;
  --secondary-button-border-radius: 0;

  /* Tertiary Button Colors */
  --tertiary-button-bg-color: #fcf5df;
  --tertiary-button-text-color: #5c6ca4;
  --tertiary-button-hover-bg-color: #5c6ca4;
  --tertiary-button-hover-text-color: #fcf5df;

  /* Tertiary Button Icon */
  --tertiary-button-icon-code: "/e09";
  --tertiary-button-icon-position: left;
  --tertiary-button-icon-padding: 10px;

  /* Tertiary Button Padding */
  --tertiary-button-padding-top: 10px;
  --tertiary-button-padding-bottom: 10px;
  --tertiary-button-padding-right: 10px;
  --tertiary-button-padding-left: 10px;

  /* Tertiary Button Fonts */
  --tertiary-button-font-family: var(--sans-serif-font);
  --tertiary-button-font-size: 10px;
  --tertiary-button-font-weight: 400;
  --tertiary-button-line-height: 120%;
  --tertiary-button-text-transform: uppercase;

  /* Tertiary Button Border */
  --tertiary-button-border-width: 1px;
  --tertiary-button-border-type: solid;
  --tertiary-button-border-color: #5c6ca4;
  --tertiary-button-border-radius: 0;

  /*
  ===========================
  Fonts Variables
  ===========================
  */

  /* Font Families */
  --font-import-url: "https://use.typekit.net/czc2zvd.css";
  --serif-font: "nagel-variable", serif;
  --sans-serif-font: "Polymath", sans-serif;

  /* Font Assignments */
  --small-font: inherit;
  --big-font: inherit;
  --body-font: "Polymath";
  --h1-font: "nagel-variable";
  --h2-font: "nagel-variable";
  --h3-font: "nagel-variable";
  --h4-font: "nagel-variable";
  --h5-font: "nagel-variable";
  --h6-font: "nagel-variable";

  /* Font Weights */
  --small-font-weight: 400;
  --big-font-weight: 500;
  --body-font-weight: 400;
  --h1-font-weight: 700;
  --h2-font-weight: 700;
  --h3-font-weight: 700;
  --h4-font-weight: 700;
  --h5-font-weight: 700;
  --h6-font-weight: 700;

  /* Font Sizes */
  font-size: 16px;

  --small-font-size-max: 14;
  --small-font-size-min: 12;
  --small-line-height: 100%;

  --big-font-size-max: 136;
  --big-font-size-min: 40;
  --big-line-height: 100%;

  --body-font-size-max: 20;
  --body-font-size-min: 16;
  --body-line-height: 160%;

  --h1-font-size-max: 84;
  --h1-font-size-min: 48;
  --h1-line-height: 120%;

  --h2-font-size-max: 54;
  --h2-font-size-min: 32;
  --h2-line-height: 120%;

  --h3-font-size-max: 43;
  --h3-font-size-min: 26;
  --h3-line-height: 120%;

  --h4-font-size-max: 36;
  --h4-font-size-min: 22;
  --h4-line-height: 120%;

  --h5-font-size-max: 32;
  --h5-font-size-min: 20;
  --h5-line-height: 120%;

  --h6-font-size-max: 28;
  --h6-font-size-min: 18;
  --h6-line-height: 120%;

  /*
  ===========================
  Space Size Variables
  ===========================
  */

  --space-dt-3xs: 6px;
  --space-dt-2xs: 11px;
  --space-dt-xs: 17px;
  --space-dt-s: 22px;
  --space-dt-m: 33px;
  --space-dt-l: 44px;
  --space-dt-xl: 66px;
  --space-dt-2xl: 88px;
  --space-dt-3xl: 132px;
  --space-dt-4xl: 168px;

  --space-lp-3xs: 5px;
  --space-lp-2xs: 10px;
  --space-lp-xs: 15px;
  --space-lp-s: 20px;
  --space-lp-m: 29px;
  --space-lp-l: 39px;
  --space-lp-xl: 59px;
  --space-lp-2xl: 78px;
  --space-lp-3xl: 118px;
  --space-lp-4xl: 130px;

  --space-tb-3xs: 5px;
  --space-tb-2xs: 10px;
  --space-tb-xs: 13px;
  --space-tb-s: 18px;
  --space-tb-m: 27px;
  --space-tb-l: 35px;
  --space-tb-xl: 53px;
  --space-tb-2xl: 71px;
  --space-tb-3xl: 106px;
  --space-tb-4xl: 125px;

  --space-mb-3xs: 4px;
  --space-mb-2xs: 8px;
  --space-mb-xs: 12px;
  --space-mb-s: 16px;
  --space-mb-m: 24px;
  --space-mb-l: 32px;
  --space-mb-xl: 48px;
  --space-mb-2xl: 64px;
  --space-mb-3xl: 96px;
  --space-mb-4xl: 115px;

  /*
  ===========================
  Paragraph Spacing
  ===========================
  */

  --desktop-paragraph-space: var(--space-dt-s);
  --laptop-paragraph-space: var(--space-lp-s);
  --tablet-paragraph-space: var(--space-tb-s);
  --mobile-paragraph-space: var(--space-mb-s);

  /*
  ===========================
  Global Spacings
  ===========================
  */

  /* Website Container Padding */
  --container-padding-desktop: var(--space-dt-3xl);
  --container-padding-laptop: var(--space-lp-2xl);
  --container-padding-tablet: var(--space-tb-l);
  --container-padding-mobile: var(--space-mb-m);

  /* Layout Margins for Desktop */
  --layout-margin-desktop-top: var(--space-dt-m);
  --layout-margin-desktop-right: var(--space-dt-m);
  --layout-margin-desktop-bottom: var(--space-dt-m);
  --layout-margin-desktop-left: var(--space-dt-m);

  /* Layout Margins for Laptop */
  --layout-margin-laptop-top: var(--space-lp-m);
  --layout-margin-laptop-right: var(--space-lp-m);
  --layout-margin-laptop-bottom: var(--space-lp-m);
  --layout-margin-laptop-left: var(--space-lp-m);

  /* Layout Margins for Tablet */
  --layout-margin-tablet-top: var(--space-tb-m);
  --layout-margin-tablet-right: var(--space-tb-m);
  --layout-margin-tablet-bottom: var(--space-tb-m);
  --layout-margin-tablet-left: var(--space-tb-m);

  /* Layout Margins for Mobile */
  --layout-margin-mobile-top: var(--space-mb-m);
  --layout-margin-mobile-right: var(--space-mb-m);
  --layout-margin-mobile-bottom: var(--space-mb-m);
  --layout-margin-mobile-left: var(--space-mb-m);

  /* Zone Margins for Desktop */
  --zone-margin-desktop-top: var(--space-dt-m);
  --zone-margin-desktop-right: var(--space-dt-m);
  --zone-margin-desktop-bottom: var(--space-dt-m);
  --zone-margin-desktop-left: var(--space-dt-m);

  /* Zone Margins for Laptop */
  --zone-margin-laptop-top: var(--space-lp-m);
  --zone-margin-laptop-right: var(--space-lp-m);
  --zone-margin-laptop-bottom: var(--space-lp-m);
  --zone-margin-laptop-left: var(--space-lp-m);

  /* Zone Margins for Tablet */
  --zone-margin-tablet-top: var(--space-tb-m);
  --zone-margin-tablet-right: var(--space-tb-m);
  --zone-margin-tablet-bottom: var(--space-tb-m);
  --zone-margin-tablet-left: var(--space-tb-m);

  /* Zone Margins for Mobile */
  --zone-margin-mobile-top: var(--space-mb-m);
  --zone-margin-mobile-right: var(--space-mb-m);
  --zone-margin-mobile-bottom: var(--space-mb-m);
  --zone-margin-mobile-left: var(--space-mb-m);

  /* Zone Spaces for Desktop */
  --zone-spacing-desktop-column: var(--space-dt-m);
  --zone-spacing-desktop-row: var(--space-dt-m);

  /* Zone Spaces for Laptop */
  --zone-spacing-laptop-column: var(--space-lp-m);
  --zone-spacing-laptop-row: var(--space-lp-m);

  /* Zone Spaces for Tablet */
  --zone-spacing-tablet-column: var(--space-tb-m);
  --zone-spacing-tablet-row: var(--space-tb-m);

  /* Zone Spaces for Mobile */
  --zone-spacing-mobile-column: var(--space-mb-m);
  --zone-spacing-mobile-row: var(--space-mb-m);

  /*
  ===========================
  Responsive Size Variables
  ===========================
  */

  --toggle-menu: 900px;

  /*
  ===========================
  Discuss with Jo
  ===========================
  */

  --page-hero-banner-mb-height: 450px;

  /*
  ===========================
  PRe-define veriables for CK5 inages
  ===========================
  */

  --image-border-radius: 20px;
  --image-overlay: rgba(0, 0, 0, 0.4);
  --border-round-radius: 100px;
  --button-semi-round-radius: 10px;

  /*
  ===========================
  Email Variables
  ===========================
  */

  --email-fonts: var(--sans-serif-font);
  --email-font-size: 18px;
  --email-h1: 60px;
  --email-h2: 50px;
  --email-h3: 40px;
  --email-h4: 30px;
  --email-h5: 25px;
  --email-h6: 20px;
  /*
    --email-fonts: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    --email-fonts: Verdana, Geneva, sans-serif;
  */
}