/* @import url('http://example.com/example_style.css'); */
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/**** Spacing ****/ 
/* update zero height 05/07/23 */
:root {
  --spacing-xxxs:0.4rem; /* 4px */
  --spacing-xxs: 0.8rem; /* 8px */
  --spacing-xs: 1.2rem /* 12px */
  --spacing-s: 1.6rem; /* 16px - Most used */
  --spacing-m: 2.4rem; /* 24px - The margin between sections/organisms */
  --spacing-l: 3.2rem; /* 32px */
  --spacing-xl: 4rem;/* 40px */
  --spacing-xxl: 5.2rem/* 52px */
  --spacing-xxxl: 6.4rem; /* 64px */
  --spacing-big: 12.8rem; /* 128px */
  
}


/**** Colors ****/
/* update zero height 05/07/23 */
:root {
--azure-500: #0099ff;
--azure-200: #def2ff;
--azure-300: #99d6ff;
--azure-400: #4db8ff;
--azure-600: #006bb3;
--azure-700: #003d66;
--firebrick-500: #ec5d61;
--firebrick-200: #ffe7e8;
--firebrick-300: #f7bec0;
--firebrick-400: #f28e91;
--firebrick-600: #c8292d;
--firebrick-700: #9d1216;
--grey-000: #ffffff;
--grey-100: #f5f6fa;
--grey-200: #ebedf4;
--grey-300: #c3c7d9;
--grey-400: #707689;
--grey-500: #34393f;
--grey-600: #1d2023;
--grey-700: #000000;
--juice-500: #ff8c00;
--juice-200: #ffedd5;
--juice-300: #ffd199;
--juice-400: #ffaf4d;
--juice-600: #d87600;
--juice-700: #9a5400;
--malachite-500: #1bc74e;
--malachite-200: #d8ffe3;
--malachite-300: #a4e9b8;
--malachite-400: #60d884;
--malachite-600: #128434;
--malachite-700: #094019;
--spectrum-500: #8260ff;
--spectrum-200: #e7e1ff;
--spectrum-300: #cdbfff;
--spectrum-400: #a890ff;
--spectrum-600: #6041d1;
--spectrum-700: #462f9d;
--sun-500: #ffcd40;
--sun-200: #fff7ce;
--sun-300: #fff0b3;
--sun-400: #ffe57a;
--sun-600: #e5aa00;
--sun-700: #9c5e00;
} /* close :root */



/**** Fonts ****/
:root {
/** Display ** update zero height 05/07/23 **/
--display-font-weight: 800;
--display-color: var(--grey-700);
--display-letter-spacing: 1.2;
/** display-1 ** update zero height 05/07/23 **/
--display-1-font-family: 'Montserrat', 'Montserrat-ExtraBold';
--display-1-font-size: 5rem; /* 80px */
--display-1-line-height: 1.2; 
/** display-2 ** update zero height 05/07/23 **/
--display-2-font-family: 'Montserrat', 'Montserrat-ExtraBold';
--display-2-font-size: 4.5rem; /* 72px */
--display-2-line-height: 1.2; 
/** display-3 ** update zero height 05/07/23 **/
--display-3-font-family: 'Montserrat-ExtraBold',  'Montserrat';
--display-3-font-size: 3.375rem; /* 54px */
--display-3-line-height: 1.4; 
/** Heading ** update zero height 05/07/23 **/
--display-font-weight: 800;
--display-color: var(--grey-700);
--display-letter-spacing: 1.2;
/** headline-1 ** update zero height 05/07/23 **/
--headline-1-font-family: 'ProximaNova-Extrabold', 'Proxima Nova';
--headline-1-font-size: 3rem; /* 48px */
--headline-1-line-height: 1.2; 
/** headline-2 ** update zero height 05/07/23 **/
--headline-2-font-family: 'ProximaNova-Bold', 'proxima-bold', 'Proxima Nova';
--headline-2-font-size: 2.5rem; /* 40px */
--headline-2-line-height: 1.2; 
/** headline-3 ** update zero height 05/07/23  **/
--headline-3-font-family: 'ProximaNova-Bold', 'proxima-bold', 'Proxima Nova';
--headline-3-font-size: 1.5rem; /* 24px */
--headline-3-line-height: 1.3; 
/** headline-4 ** update zero height 05/07/23 **/
--headline-4-font-family: 'ProximaNova-Bold', 'proxima-bold', 'Proxima Nova';
--headline-4-font-size: 1.25rem; /* 20px */
--headline-4-letter-spacing: 1.4;
--headline-4-line-height: 1.4; 
/** body ** update zero height 05/07/23 **/
--body-font-family: 'Proxima Nova', 'ProximaNova-Regular', 'proxima-regular';
--body-font-size: 1rem; /* 16px */
--body-letter-spacing:1.2;
--body-line-height: 1.5;
--body-color: var(--grey-700);
/** legal ** update zero height 05/07/23 **/
--legal-font-family: 'Proxima Nova', 'ProximaNova-Regular', 'proxima-regular';
--legal-font-size: 0.625rem; /* 10px */
--legal-letter-spacing:1.2;
--legal-line-height: 1.5; 
--legal-color: var(--grey-700);
/** footnote ** update zero height 05/07/23 **/
--footnote-font-family: 'Proxima Nova', 'ProximaNova-Regular', 'proxima-regular';
--footnote-font-size: 0.75rem; /* 12px */
--footnote-letter-spacing:1.2;
--footnote-line-height: 1.5; 
--footnote-color: var(--grey-700);
/** caption ** update zero height 05/07/23 **/
--caption-font-family: 'Proxima Nova', 'ProximaNova-Regular','proxima-regular';
--caption-font-size: 0.875rem; /* 14px */
--caption-letter-spacing:1.2;
--caption-line-height: 1.5;
--caption-color: var(--grey-700);
/** subheadline ** update zero height 05/07/23 **/
--subheadline-font-family: 'Proxima Nova', 'ProximaNova-Regular', 'proxima-regular';
--subheadline-font-size: 1.5rem; /* 24px */
--subheadline-letter-spacing:1.2;
--subheadline-line-height: 1.5; 
--subheadline-color: var(--grey-700);
/** uppercase  ** update zero height 05/07/23 **/
--uppercase-font-family: 'Proxima Nova', 'ProximaNova-Regular', 'proxima-regular';
--uppercase-font-size: 1rem; /* 16px */
--uppercase-letter-spacing: 20;
--uppercase-line-height: 1; /
--uppercase-text-transform: uppercase;
--uppercase-color: var(--grey-700);
/** button **/
--button-font-family: 'Proxima Nova', 'ProximaNova-Bold', 'proxima-bold';
--button-font-size: 1rem; /* 16px */
--button-letter-spacing: 0;
--button-line-height: 1; 
} /* close :root */

.body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  color: var(--body-color);
}

.cta-button {
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
  line-height: var(--button-line-height);
}

.caption {
  font-family: var(--caption-font-family);
  font-size: var(--caption-font-size);
  letter-spacing: var(--caption-letter-spacing);
  line-height: var(--caption-line-height);
  color: var(--caption-color);
}

.display-1 {
  font-family: var(--display-1-font-family);
  font-size: var(--display-1-font-size);
  letter-spacing: var(--display-1-letter-spacing);
  line-height: var(--display-1-line-height);
  font-weight: var(--display-font-weight);
  color: var(--display-1-color);
}

.display-2 {
  font-family: var(--display-2-font-family);
  font-size: var(--display-2-font-size);
  letter-spacing: var(--display-2-letter-spacing);
  line-height: var(--display-2-line-height);
  font-weight: var(--display-font-weight);
  color: var(--display-2-color);
}

.display-3 {
  font-family: var(--display-3-font-family);
  font-size: var(--display-3-font-size);
  letter-spacing: var(--display-3-letter-spacing);
  line-height: var(--display-3-line-height);
  font-weight: var(--display-font-weight);
  color: var(--display-3-color);
}

.footnote {
  font-family: var(--footnote-font-family);
  font-size: var(--footnote-font-size);
  letter-spacing: var(--footnote-letter-spacing);
  line-height: var(--footnote-line-height);
  color: var(--footnote-color);
}

.headline-1 {
  font-family: var(--headline-1-font-family);
  font-size: var(--headline-1-font-size);
  letter-spacing: var(--headline-1-letter-spacing);
  line-height: var(--headline-1-line-height);
  font-weight: 800;
  color: var(--headline-1-color);
}

.headline-2 {
  font-family: var(--headline-2-font-family);
  font-size: var(--headline-2-font-size);
  letter-spacing: var(--headline-2-letter-spacing);
  line-height: var(--headline-2-line-height);
  font-weight: 700;
  color: var(--headline-2-color);
}

.headline-3 {
  font-family: var(--headline-3-font-family);
  font-size: var(--headline-3-font-size);
  letter-spacing: var(--headline-3-letter-spacing);
  line-height: var(--headline-3-line-height);
  font-weight: var(--headline-font-weight);
  color: var(--headline-3-color);
}

.headline-4 {
  font-family: var(--headline-4-font-family);
  font-size: var(--headline-4-font-size);
  letter-spacing: var(--headline-4-letter-spacing);
  line-height: var(--headline-4-line-height);
  font-weight: var(--headline-font-weight);
  color: var(--headline-4-color);
}

.legal {
  font-family: var(--legal-font-family);
  font-size: var(--legal-font-size);
  letter-spacing: var(--legal-letter-spacing);
  line-height: var(--legal-line-height);
  color: var(--legal-color);
}

.uppercase {
  font-family: var(--uppercase-font-family);
  font-size: var(--uppercase-font-size);
  letter-spacing: var(--uppercase-letter-spacing);
  line-height: var(--uppercase-line-height);
  text-transform: var(--uppercase-text-transform);
  color: var(--uppercase-color);
}