@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {

/*
===========================
Color Variables
===========================
*/

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

  /* Main Colors */
  --text-color: #000;
  --primary-color: #414141;
  --primary-color-text: #fff;
  --secondary-color: #FFF500;
  --secondary-color-text: #000;
  --tertiary-color: #000;
  --tertiary-color-text: #fff;
  --quaternary-color: #7a1619;
  --quaternary-color-text: #ffffff;

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


  /* Custom Colors */
  --custom-color-1: #130092;  
  --custom-color-2: #419F7A;  
  --custom-color-3: #00B0DE;  
  --custom-color-4: #a8996f; 
  
  /* 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
===========================
*/


  /* Button Configuration */
  --primary-button-icon-enable: yes;
  --primary-button-type: yes;

  /* Button Text Alignment */
  --primary-button-text-alignment: left;

  /* 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(--secondary-color);
  --primary-button-selected-text-color: var(--secondary-color-text);

  /* 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-max: 18px;
  --primary-button-font-size-min: 16px;
  --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: var(--primary-color);
  --primary-button-border-hover-color: var(--primary-color);
  --primary-button-border-radius: 50px;


  /* Secondary Button Colors */
  --secondary-button-bg-color: var(--secondary-color);
  --secondary-button-text-color: #000;
  --secondary-button-hover-bg-color: transparent;
  --secondary-button-hover-text-color: var(--secondary-color);

  /* 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: var(--secondary-color);
  --secondary-button-border-hover-color: var(--secondary-color);
  --secondary-button-border-radius: 50px;

  /* Tertiary Button Colors */
  --tertiary-button-bg-color: var(--tertiary-color);
  --tertiary-button-text-color: #000;
  --tertiary-button-hover-bg-color: transparent;
  --tertiary-button-hover-text-color: #000;

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

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

  /* Secondary 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;

  /* Secondary Button Border */
  --tertiary-button-border-width: 1px;
  --tertiary-button-border-type: solid;
  --tertiary-button-border-color: var(--tertiary-color);
  --tertiary-button-border-hover-color: var(--tertiary-color);
  --tertiary-button-border-radius: 50px;

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

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

  /* 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: 400;
  --h1-font-weight: 400;
  --h2-font-weight: 400;
  --h3-font-weight: 400;
  --h4-font-weight: 400;
  --h5-font-weight: 400;
  --h6-font-weight: 400;


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

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

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

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

  --h1-font-size-max: 84;
  --h1-font-size-min: 40;
  --h1-line-height: 110%;

  --h2-font-size-max: 65;
  --h2-font-size-min: 35;
  --h2-line-height: 110%;

  --h3-font-size-max: 55;
  --h3-font-size-min: 30;
  --h3-line-height: 120%;

  --h4-font-size-max: 45;
  --h4-font-size-min: 25;
  --h4-line-height: 125%;

  --h5-font-size-max: 35;
  --h5-font-size-min: 22;
  --h5-line-height: 125%;

  --h6-font-size-max: 30;
  --h6-font-size-min: 20;
  --h6-line-height: 125%;


  /*
  ===========================
  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: var(--space-dt-2xl);
  --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: var(--space-dt-3xl);
  --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: var(--space-dt-2xl);
  --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: var(--space-dt-l);
  --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: var(--space-dt-m);
  --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: 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;
  */
}