/* @import url("https://use.typekit.net/qog6zmc.css"); */
@import url("https://use.typekit.net/nmz5jny.css");

:root {
  /*
===========================
Color Variables
===========================
*/

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

  /* Main Colors */
  --text-color: #242424;
  --primary-color: #ff1446;
  --primary-color-text: #fff;
  --secondary-color: #328ce6;
  --secondary-color-text: #fff;
  --tertiary-color: #ffffff;
  --tertiary-color-text: #fff;
  --quaternary-color: #7a1619;
  --quaternary-color-text: #fff;

  /* Shade Colors */
  --shade-color-1: #f5f5f5;
  --shade-color-2: #cdcdcd;
  --shade-color-3: #e5e5e5;

  /* Custom Colors */
  --custom-color-1: #00b482;
  --custom-color-2: #ff873c;
  --custom-color-3: #2F7FD6;
  --custom-color-4: #E9004B;

  /* 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(--primary-color);
  --link-hover-color: var(--secondary-color);

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

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

  /* Primary Button Colors */
  --primary-button-bg-color: var(--primary-color);
  --primary-button-text-color: var(--primary-color-text);
  --primary-button-hover-bg-color: var(--secondary-color);
  --primary-button-hover-text-color: var(--secondary-color-text);
  --primary-button-selected-bg-color: var(--tertiary-color);
  --primary-button-selected-text-color: var(--tertiary-color-text);

  --primary-button-border-radius: 16px;

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

  /* Primary Button Fonts */
  --primary-button-font-family: var(--sans-serif-font);
  --primary-button-font-weight: 600;

  /* Primary Button Border */
  --primary-button-border-width-top: 1px;
  --primary-button-border-type-top: solid;
  --primary-button-border-color-top: var(--primary-color);
  --primary-button-border-hover-color-top: var(--secondary-color);
  --primary-button-border-selected-color-top: var(--secondary-color);

  --primary-button-border-width-bottom: 1px;
  --primary-button-border-type-bottom: solid;
  --primary-button-border-color-bottom: var(--primary-color);
  --primary-button-border-hover-color-bottom: var(--secondary-color);
  --primary-button-border-selected-color-bottom: var(--secondary-color);

  --primary-button-border-width-left: 1px;
  --primary-button-border-type-left: solid;
  --primary-button-border-color-left: var(--primary-color);
  --primary-button-border-hover-color-left: var(--secondary-color);
  --primary-button-border-selected-color-left: var(--secondary-color);

  --primary-button-border-width-right: 1px;
  --primary-button-border-type-right: solid;
  --primary-button-border-color-right: var(--primary-color);
  --primary-button-border-hover-color-right: var(--secondary-color);
  --primary-button-border-selected-color-right: var(--secondary-color);

  /* Secondary Button Colors */
  --secondary-button-bg-color: var(--secondary-color);
  --secondary-button-text-color: var(--secondary-color-text);
  --secondary-button-hover-bg-color: var(--primary-color);
  --secondary-button-hover-text-color: var(--primary-color-text);
  --secondary-button-selected-bg-color: var(--tertiary-color);
  --secondary-button-selected-text-color: var(--tertiary-color-text);

  --secondary-button-border-radius: 16px;

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

  /* Secondary Button Fonts */
  --secondary-button-font-family: var(--sans-serif-font);
  --secondary-button-font-weight: 600;

  /* Secondary Button Border */
  --secondary-button-border-width-top: 1px;
  --secondary-button-border-type-top: solid;
  --secondary-button-border-color-top: var(--secondary-color);
  --secondary-button-border-hover-color-top: var(--primary-color);
  --secondary-button-border-selected-color-top: var(--primary-color);

  --secondary-button-border-width-bottom: 1px;
  --secondary-button-border-type-bottom: solid;
  --secondary-button-border-color-bottom: var(--secondary-color);
  --secondary-button-border-hover-color-bottom: var(--primary-color);
  --secondary-button-border-selected-color-bottom: var(--primary-color);

  --secondary-button-border-width-left: 1px;
  --secondary-button-border-type-left: solid;
  --secondary-button-border-color-left: var(--secondary-color);
  --secondary-button-border-hover-color-left: var(--primary-color);
  --secondary-button-border-selected-color-left: var(--primary-color);

  --secondary-button-border-width-right: 1px;
  --secondary-button-border-type-right: solid;
  --secondary-button-border-color-right: var(--secondary-color);
  --secondary-button-border-hover-color-right: var(--primary-color);
  --secondary-button-border-selected-color-right: var(--primary-color);

  /* Tertiary Button Colors */
  --tertiary-button-bg-color: var(--tertiary-color);
  --tertiary-button-text-color: var(--body-text-color);
  --tertiary-button-hover-bg-color: var(--custom-color-4);
  --tertiary-button-hover-text-color: var(--secondary-color-text);
  --tertiary-button-selected-bg-color: var(--secondary-color);
  --tertiary-button-selected-text-color: var(--tertiary-color-text);

  --tertiary-button-border-radius: 16px;

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

  /* Tertiary Button Fonts */
  --tertiary-button-font-family: var(--sans-serif-font);
  --tertiary-button-font-weight: 600;

  /* Tertiary Button Border */
  --tertiary-button-border-width-top: 0px;
  --tertiary-button-border-type-top: solid;
  --tertiary-button-border-color-top: var(--tertiary-color);
  --tertiary-button-border-hover-color-top: var(--primary-color);
  --tertiary-button-border-selected-color-top: var(--primary-color);

  --tertiary-button-border-width-bottom: 0px;
  --tertiary-button-border-type-bottom: dotted;
  --tertiary-button-border-color-bottom: var(--tertiary-color);
  --tertiary-button-border-hover-color-bottom: var(--primary-color);
  --tertiary-button-border-selected-color-bottom: var(--primary-color);

  --tertiary-button-border-width-left: 0px;
  --tertiary-button-border-type-left: solid;
  --tertiary-button-border-color-left: var(--tertiary-color);
  --tertiary-button-border-hover-color-left: var(--primary-color);
  --tertiary-button-border-selected-color-left: var(--primary-color);

  --tertiary-button-border-width-right: 0px;
  --tertiary-button-border-type-right: solid;
  --tertiary-button-border-color-right: var(--tertiary-color);
  --tertiary-button-border-hover-color-right: var(--primary-color);
  --tertiary-button-border-selected-color-right: var(--primary-color);

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

  /* Font Families */
  --serif-font: "houschka-pro", serif;
  --sans-serif-font: "houschka-pro", sans-serif;
  --font-3: "houschka-pro";
  --font-4: "houschka-pro";
  --font-5: "houschka-pro";
  --font-6: "houschka-pro";

  /* Font Assignments */
  --small-font: var(--sans-serif-font);
  --big-font: var(--sans-serif-font);
  --body-font: var(--sans-serif-font);
  --h1-font: var(--serif-font);
  --h2-font: var(--serif-font);
  --h3-font: var(--serif-font);
  --h4-font: var(--serif-font);
  --h5-font: var(--serif-font);
  --h6-font: var(--serif-font);

  /* Font Weights */
  --small-font-weight: 400;
  --big-font-weight: 400;
  --body-font-weight: 600;
  --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: 18;
  --small-font-size-min: 12;
  --small-line-height: 150%;

  --big-font-size-max: 26;
  --big-font-size-min: 14;
  --big-line-height: 150%;

  --body-font-size-max: 18;
  --body-font-size-min: 14;
  --body-line-height: 150%;

  --h1-font-size-max: 68;
  --h1-font-size-min: 38;
  --h1-line-height: 100%;

  --h2-font-size-max: 58;
  --h2-font-size-min: 28;
  --h2-line-height: 100%;

  --h3-font-size-max: 43;
  --h3-font-size-min: 23;
  --h3-line-height: 100%;

  --h4-font-size-max: 34;
  --h4-font-size-min: 28;
  --h4-line-height: 100%;

  --h5-font-size-max: 30;
  --h5-font-size-min: 28;
  --h5-line-height: 100%;

  --h6-font-size-max: 25;
  --h6-font-size-min: 23;
  --h6-line-height: 100%;

  /*
  ===========================
  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: 176px;

  --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: 157px;

  --space-tb-3xs: 5px;
  --space-tb-2xs: 9px;
  --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: 141px;

  --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: 128px;

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

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

  /*
  ===========================
  Gloabl Spacings
  ===========================
  */

  /* Website Container Padding */
  --container-padding-desktop: 129px;
  --container-padding-laptop: var(--space-lp-xl);
  --container-padding-tablet: var(--space-lp-s);
  --container-padding-mobile: var(--space-mb-s);

  /* Website default layout paddings for Desktop */
  --layout-padding-desktop-top: 0;
  --layout-padding-desktop-right: 0;
  --layout-padding-desktop-bottom: 0;
  --layout-padding-desktop-left: 0;

  /* Website default layout paddings for Laptop */
  --layout-padding-laptop-top: 0;
  --layout-padding-laptop-right: 0;
  --layout-padding-laptop-bottom: 0;
  --layout-padding-laptop-left: 0;

  /* Website default layout paddings for Tablet */
  --layout-padding-tablet-top: 0;
  --layout-padding-tablet-right: 0;
  --layout-padding-tablet-bottom: 0;
  --layout-padding-tablet-left: 0;

  /* Website default layout paddings for Mobile */
  --layout-padding-mobile-top: 0;
  --layout-padding-mobile-right: 0;
  --layout-padding-mobile-bottom: 0;
  --layout-padding-mobile-left: 0;

  /* Layout Margins for Desktop */
  --layout-margin-desktop-top: 0;
  --layout-margin-desktop-right: 0;
  --layout-margin-desktop-bottom: 0;
  --layout-margin-desktop-left: 0;

  /* Layout Margins for Laptop */
  --layout-margin-laptop-top: 0;
  --layout-margin-laptop-right: 0;
  --layout-margin-laptop-bottom: ;
  --layout-margin-laptop-left: 0;

  /* Layout Margins for Tablet */
  --layout-margin-tablet-top: 0;
  --layout-margin-tablet-right: 0;
  --layout-margin-tablet-bottom: 0;
  --layout-margin-tablet-left: 0;

  /* Layout Margins for Mobile */
  --layout-margin-mobile-top: 0;
  --layout-margin-mobile-right: 0;
  --layout-margin-mobile-bottom: 0;
  --layout-margin-mobile-left: 0;

  /* Website default zone paddings for Desktop */
  --zone-padding-desktop-top: 0;
  --zone-padding-desktop-right: 0;
  --zone-padding-desktop-bottom: 0;
  --zone-padding-desktop-left: 0;

  /* Website default zone paddings for Laptop */
  --zone-padding-laptop-top: 0;
  --zone-padding-laptop-right: 0;
  --zone-padding-laptop-bottom: 0;
  --zone-padding-laptop-left: 0;

  /* Website default zone paddings for Tablet */
  --zone-padding-tablet-top: 0;
  --zone-padding-tablet-right: 0;
  --zone-padding-tablet-bottom: 0;
  --zone-padding-tablet-left: 0;

  /* Website default zone paddings for Mobile */
  --zone-padding-mobile-top: 0;
  --zone-padding-mobile-right: 0;
  --zone-padding-mobile-bottom: 0;
  --zone-padding-mobile-left: 0;

  /* Zone Margins for Desktop */
  --zone-margin-desktop-top: 0;
  --zone-margin-desktop-right: 0;
  --zone-margin-desktop-bottom: 0;
  --zone-margin-desktop-left: 0;

  /* Zone Margins for Laptop */
  --zone-margin-laptop-top: 0;
  --zone-margin-laptop-right: 0;
  --zone-margin-laptop-bottom: 0;
  --zone-margin-laptop-left: 0;

  /* Zone Margins for Tablet */
  --zone-margin-tablet-top: 0;
  --zone-margin-tablet-right: 0;
  --zone-margin-tablet-bottom: 0;
  --zone-margin-tablet-left: 0;

  /* Zone Margins for Mobile */
  --zone-margin-mobile-top: 0;
  --zone-margin-mobile-right: 0;
  --zone-margin-mobile-bottom: 0;
  --zone-margin-mobile-left: 0;

  /* Zone Margins for Desktop */
  --zone-margin-desktop-top: 0;
  --zone-margin-desktop-right: 0;
  --zone-margin-desktop-bottom: 0;
  --zone-margin-desktop-left: 0;

  /* Zone Margins for Laptop */
  --zone-margin-laptop-top: 0;
  --zone-margin-laptop-right: 0;
  --zone-margin-laptop-bottom: 0;
  --zone-margin-laptop-left: 0;

  /* Zone Margins for Tablet  */
  --zone-margin-tablet-top: 0;
  --zone-margin-tablet-right: 0;
  --zone-margin-tablet-bottom: 0;
  --zone-margin-tablet-left: 0;

  /* Zone Margins for Mobile  */
  --zone-margin-mobile-top: 0;
  --zone-margin-mobile-right: 0;
  --zone-margin-mobile-bottom: 0;
  --zone-margin-mobile-left: 0;

  /* Zone Spaces for Desktop */
  --zone-spacing-desktop-column: 0;
  --zone-spacing-desktop-row: 0;

  /* Zone Spaces for Laptop   */
  --zone-spacing-laptop-column: 0;
  --zone-spacing-laptop-row: 0;

  /* Zone Spaces for Tablet   */
  --zone-spacing-tablet-column: 0;
  --zone-spacing-tablet-row: 0;

  /* Zone Spaces for Mobile   */
  --zone-spacing-mobile-column: 0;
  --zone-spacing-mobile-row: 0;

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

  --toggle-menu: 900px;

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

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

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

  --image-border-radius: 16px;
  --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;
  */
}

/*
===========================
Portal Styling
===========================
*/
body.custom-portal-styles {
  --primary-color: #328ce6;

  /* Font Colors */
  --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);


    /* Primary Button Colors */
  --primary-button-bg-color: var(--primary-color);
  --primary-button-text-color: var(--primary-color-text);
  --primary-button-hover-bg-color: var(--custom-color-3);
  --primary-button-hover-text-color: var(--secondary-color-text);
  --primary-button-selected-bg-color: var(--tertiary-color);
  --primary-button-selected-text-color: var(--tertiary-color-text);

    /* Primary Button Border */
  --primary-button-border-width-top: 1px;
  --primary-button-border-type-top: solid;
  --primary-button-border-color-top: var(--primary-color);
  --primary-button-border-hover-color-top: var(--secondary-color);
  --primary-button-border-selected-color-top: var(--secondary-color);

  --primary-button-border-width-bottom: 1px;
  --primary-button-border-type-bottom: solid;
  --primary-button-border-color-bottom: var(--primary-color);
  --primary-button-border-hover-color-bottom: var(--secondary-color);
  --primary-button-border-selected-color-bottom: var(--secondary-color);

  --primary-button-border-width-left: 1px;
  --primary-button-border-type-left: solid;
  --primary-button-border-color-left: var(--primary-color);
  --primary-button-border-hover-color-left: var(--secondary-color);
  --primary-button-border-selected-color-left: var(--secondary-color);

  --primary-button-border-width-right: 1px;
  --primary-button-border-type-right: solid;
  --primary-button-border-color-right: var(--primary-color);
  --primary-button-border-hover-color-right: var(--secondary-color);
  --primary-button-border-selected-color-right: var(--secondary-color);

    /* Tertiary Button Colors */
  --tertiary-button-bg-color: var(--tertiary-color);
  --tertiary-button-text-color: var(--body-text-color);
  --tertiary-button-hover-bg-color: var(--custom-color-3);
  --tertiary-button-hover-text-color: var(--secondary-color-text);
  --tertiary-button-selected-bg-color: var(--secondary-color);
  --tertiary-button-selected-text-color: var(--tertiary-color-text);

  /* Tertiary Button Border */
  --tertiary-button-border-width-top: 0px;
  --tertiary-button-border-type-top: solid;
  --tertiary-button-border-color-top: var(--tertiary-color);
  --tertiary-button-border-hover-color-top: var(--primary-color);
  --tertiary-button-border-selected-color-top: var(--primary-color);

  --tertiary-button-border-width-bottom: 0px;
  --tertiary-button-border-type-bottom: dotted;
  --tertiary-button-border-color-bottom: var(--tertiary-color);
  --tertiary-button-border-hover-color-bottom: var(--primary-color);
  --tertiary-button-border-selected-color-bottom: var(--primary-color);

  --tertiary-button-border-width-left: 0px;
  --tertiary-button-border-type-left: solid;
  --tertiary-button-border-color-left: var(--tertiary-color);
  --tertiary-button-border-hover-color-left: var(--primary-color);
  --tertiary-button-border-selected-color-left: var(--primary-color);

  --tertiary-button-border-width-right: 0px;
  --tertiary-button-border-type-right: solid;
  --tertiary-button-border-color-right: var(--tertiary-color);
  --tertiary-button-border-hover-color-right: var(--primary-color);
  --tertiary-button-border-selected-color-right: var(--primary-color);
}