@import url("https://use.typekit.net/kez1ooa.css");
@font-face {
  font-family: 'memphis_lt_std_mediumbold';
  src: url('../fonts/memphisltstd-bold-webfont.woff2') format('woff2'),
       url('../fonts/memphisltstd-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'memphis_lt_std_mediumBdIt';
  src: url('../fonts/memphisltstd-bolditalic-webfont.woff2') format('woff2'),
       url('../fonts/memphisltstd-bolditalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'memphis_lt_stdextra_bold';
  src: url('../fonts/memphisltstd-extrabold-webfont.woff2') format('woff2'),
       url('../fonts/memphisltstd-extrabold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'memphis_lt_stdlight';
  src: url('../fonts/memphisltstd-light-webfont.woff2') format('woff2'),
       url('../fonts/memphisltstd-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'memphis_lt_stdlight_italic';
  src: url('../fonts/memphisltstd-lightitalic-webfont.woff2') format('woff2'),
       url('../fonts/memphisltstd-lightitalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'memphis_lt_stdmedium';
  src: url('../fonts/memphisltstd-medium-webfont.woff2') format('woff2'),
       url('../fonts/memphisltstd-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'memphis_lt_stdmedium_italic';
  src: url('../fonts/memphisltstd-mediumitalic-webfont.woff2') format('woff2'),
       url('../fonts/memphisltstd-mediumitalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}
:root {

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

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


  /* Main Colors */
  --text-color: #37424A;
  --primary-color: #204438;
  --primary-color-text: #fff;
  --secondary-color: #90D7E7;
  --secondary-text-color: #003145;
  --tertiary-color: #387661;
  --tertiary-text-color: #ffffff;
  --quaternary-color: #003145;
  --quaternary-text-color: #ffffff;

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


  /* Custom Colors */
  --custom-color-1: #C7EBF3;  
  --custom-color-2: #739600;  
  --custom-color-3: #a8996f; 
  --custom-color-4: #E1CD00;  
  --custom-color-5: #0072CE;
  --custom-color-6: #132922;

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

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

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


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

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

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

  /* Secondary Button Colors */
  --secondary-button-bg-color: var(--tertiary-color);
  --secondary-button-text-color: #ffffff;
  --secondary-button-hover-bg-color: transparent;
  --secondary-button-hover-text-color: var(--primary-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: 2px;
  --secondary-button-border-type: solid;
  --secondary-button-border-color: var(--secondary-color);
  --secondary-button-border-hover-color: var(--secondary-color);
  --secondary-button-border-radius: 5px;

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

  /* 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:  "memphis_lt_stdmedium", serif;
  --sans-serif-font: "gotham", sans-serif;
  

  /* Font Assignments */
  --small-font: "gotham", sans-serif;
  --big-font: "gotham", sans-serif;
  --body-font: "gotham", sans-serif;
  --h1-font: "memphis_lt_stdmedium", serif;
  --h2-font: "memphis_lt_stdmedium", serif;
  --h3-font: "memphis_lt_stdmedium", serif;
  --h4-font: "memphis_lt_stdmedium", serif;
  --h5-font: "memphis_lt_stdmedium", serif;
  --h6-font: "memphis_lt_stdmedium", serif;


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


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

  --small-font-size-max: 16;
  --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: 80;
  --h1-font-size-min: 40;
  --h1-line-height: 110%;

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

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

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

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

  --h6-font-size-max: 24;
  --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: 5%;
  --container-padding-laptop: 4%;
  --container-padding-tablet: 5%;
  --container-padding-mobile: 3%;

  /* 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: 10px;
  --image-overlay: rgba(0,0,0,0.4);
  --border-round-radius: 100px;
  --button-semi-round-radius: 5px;

  /*
  ===========================
  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;
  */
}