@font-face {
    font-family: 'SfPro';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: 
    local("SfPro"),
    url('../fonts/sfpro/SfPro-ultralight.woff2') format('woff2'),
    url('../fonts/sfpro/SfPro-ultralight.woff') format('woff'),
  }

@font-face {
    font-family: 'SfPro';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: 
    local("SfPro"),
    url('../fonts/sfpro/SfPro-thin.woff2') format('woff2'),
    url('../fonts/sfpro/SfPro-thin.woff') format('woff');
  }

  @font-face {
    font-family: 'SfPro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: 
    local("SfPro"),
    url('../fonts/sfpro/SfPro-light.woff2') format('woff2'),
    url('../fonts/sfpro/SfPro-light.woff') format('woff');
  }

  @font-face {
    font-family: 'SfPro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: 
    local("SfPro"),
    url('../fonts/sfpro/SfPro.woff2') format('woff2'),
    url('../fonts/sfpro/SfPro.woff') format('woff');
  }
  
  @font-face {
    font-family: 'SfPro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src:
    url('../fonts/sfpro/SfPro-medium.woff2') format('woff2'),
    url('../fonts/sfpro/SfPro-medium.woff') format('woff');
  }

  @font-face {
    font-family: 'SfPro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src:
    url('../fonts/sfpro/SfPro-semibold.woff2') format('woff2'),
    url('../fonts/sfpro/SfPro-semibold.woff') format('woff');
  }

  @font-face {
    font-family: 'SfPro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: 
    url('../fonts/sfpro/SfPro-bold.woff2') format('woff2'),
    url('../fonts/sfpro/SfPro-bold.woff') format('woff');
  }

  @font-face {
    font-family: 'SfPro';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: 
    url('../fonts/sfpro/SfPro-heavy.woff2') format('woff2'),
    url('../fonts/sfpro/SfPro-heavy.woff') format('woff');
  }

  @font-face {
    font-family: 'SfPro';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: 
    url('../fonts/sfpro/SfPro-black.woff2') format('woff2'),
    url('../fonts/sfpro/SfPro-black.woff') format('woff');
  }

  /* * Sets the main font for the site if this stylesheet is loaded.
 */
:root {
    --mds-font-main: "SfPro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}