@font-face {
    font-family: ESFace-Light;
    src: url('../fonts/ESFace-Light.woff2') format('woff2'),
         url('../fonts/ESFace-Light.woff') format('woff');
}

@font-face {
    font-family: ESFace-LightItalic;
    src: url('../fonts/ESFace-LightItalic.woff2') format('woff2'),
         url('../fonts/ESFace-LightItalic.woff') format('woff');
}

:root { 
  --black: #000000;
  --white: #ffffff;
 
  --font-size-l: 24px;
  --font-size-m: 17px;
  --font-size-xl: 40px;
  --font-size-xxl: 50px;
 
  --font-family-es_face: ESFace-Light;
  --font-family-esface-light: ESFace-Light;
  --font-family-esface-lightitalic: ESFace-LightItalic;
}
.copy-desktop {
  font-family: var(--font-family-esface-light);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0px;
}

    .copy-desktop .ESFace-LightItalic {
        font-family: var(--font-family-esface-lightitalic);
    }

.copy-mobile {
  font-family: var(--font-family-esface-light);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0px;
}

    .copy-mobile .ESFace-LightItalic {
        font-family: var(--font-family-esface-lightitalic);
    }

.h1-desktop {
    font-family: var(--font-family-esface-light);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0px;
}

.h1-mobile {
  font-family: var(--font-family-esface-light);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0px;
}

.h2-desktop {
    color: var(--black);
    font-family: var(--font-family-esface-lightitalic);
    font-size: 30px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0px;
    line-height: 36px;
}

.h2-mobile {
    color: var(--black);
    font-family: var(--font-family-esface-lightitalic);
    font-size: 25px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0px;
    line-height: 32px;
}

.esface-lightitalic-light-black-40px {
  color: var(--black);
  font-family: var(--font-family-esface-lightitalic);
  font-size: var(--font-size-xl);
  /*font-style: italic;*/
  font-weight: 300;
}

.esface-lightitalic-light-black-50px {
  color: var(--black);
  font-family: var(--font-family-esface-lightitalic);
  font-size: var(--font-size-xxl);
  /*font-style: italic;*/
  font-weight: 300;
}

.esface-light-black-40px {
  color: var(--black);
  font-family: var(--font-family-es_face);
  font-size: var(--font-size-xl);
}

.esface-light-black-50px {
  color: var(--black);
  font-family: var(--font-family-es_face);
  font-size: var(--font-size-xxl);
}