:root { 
  --alto: #dedede;
  --black: #000000;
  --celeste: #cccccc;
  --cloud: #c7c7c7;
  --eastern-blue: #2392ba;
  --green: #2d9f48;
  --mountain-mist: #999999;
  --orange: #f26b0e;
  --overlay: #00000099;
  --regal-blue: #09446c;
  --white: #ffffff;
 
  --font-size-42px: 42px;
  --font-size-l: 32px;
  --font-size-m: 24px;
  --font-size-s: 18px;
  --font-size-xs: 14px;
  --font-size-xxs: 12px;
  --font-size-xxxs: 11px;
  --font-size-xxxxs: 10px;
 
  --font-family-arial-regular: "Arial-Regular", Helvetica;
  --font-family-fontawesome-regular: "FontAwesome-Regular", Helvetica;
  --font-family-lato: "Lato", Helvetica;
  --font-family-open_sans: "Open Sans", Helvetica;
  --font-family-opensans-bold: "OpenSans-Bold", Helvetica;
  --font-family-opensans-extrabold: "OpenSans-Extrabold", Helvetica;
  --font-family-opensans-regular: "OpenSans-Regular", Helvetica;
}
.headline {
  font-family: var(--font-family-lato);
  font-size: var(--font-size-42px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.body-text {
  font-family: var(--font-family-lato);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.title {
  font-family: var(--font-family-lato);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.button-text {
  font-family: var(--font-family-lato);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.link-text {
  font-family: var(--font-family-lato);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.sub-headline {
  font-family: var(--font-family-lato);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.lato-normal-mountain-mist-11px {
  color: var(--mountain-mist);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xxxs);
  font-style: normal;
  font-weight: 400;
}

.lato-normal-mountain-mist-10px {
  color: var(--mountain-mist);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xxxxs);
  font-style: normal;
  font-weight: 400;
}

.lato-normal-black-11px {
  color: var(--black);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xxxs);
  font-style: normal;
  font-weight: 400;
}

.lato-normal-black-24px {
  color: var(--black);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-m);
}

.lato-normal-white-12px {
  color: var(--white);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xxs);
  font-style: normal;
  font-weight: 400;
}

.lato-medium-christine-14px {
  color: var(--orange);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
}

.lato-normal-black-11px-2 {
  color: var(--black);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xxxs);
}

.fontawesome-regular-normal-black-11px {
  color: var(--black);
  font-family: var(--font-family-fontawesome-regular);
  font-size: var(--font-size-xxxs);
  font-style: normal;
  font-weight: 400;
}

.opensans-bold-white-24px {
  color: var(--white);
  font-family: var(--font-family-opensans-bold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

.lato-normal-celeste-10px {
  color: var(--celeste);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xxxxs);
  font-style: normal;
  font-weight: 400;
}

.lato-normal-black-14px {
  color: var(--black);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
}

.opensans-extra-extra-bold-black-24px {
  color: var(--black);
  font-family: var(--font-family-opensans-extrabold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 800;
}

.opensans-regular-normal-black-18px {
  color: var(--black);
  font-family: var(--font-family-opensans-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.arial-regular-normal-black-14px {
  color: var(--black);
  font-family: var(--font-family-arial-regular);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
}

.lato-bold-black-24px {
  color: var(--black);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}

.arial-regular-normal-black-16px {
  color: var(--black);
  font-family: var(--font-family-arial-regular);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.opensans-extra-extra-bold-white-24px {
  color: var(--white);
  font-family: var(--font-family-opensans-extrabold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 800;
}

.lato-normal-white-14px {
  color: var(--white);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
}

.opensans-regular-normal-white-14px {
  color: var(--white);
  font-family: var(--font-family-opensans-regular);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
}

.opensans-regular-normal-white-18px {
  color: var(--white);
  font-family: var(--font-family-opensans-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.lato-black-black-32px {
  color: var(--black);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 900;
}

.lato-normal-mountain-mist-10px-2 {
  color: var(--mountain-mist);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xxxxs);
}

.lato-normal-black-12px {
  color: var(--black);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xxs);
  font-style: normal;
  font-weight: 400;
}

.opensans-regular-normal-white-16px {
  color: var(--white);
  font-family: var(--font-family-opensans-regular);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.opensans-extra-extra-bold-white-42px {
  color: var(--white);
  font-family: var(--font-family-opensans-extrabold);
  font-size: 42px;
  font-style: normal;
  font-weight: 800;
}

.lato-normal-cloud-14px {
  color: var(--cloud);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
}

.lato-black-white-12px {
  color: var(--white);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xxs);
}

.lato-black-white-16px {
  color: var(--white);
  font-family: var(--font-family-lato);
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}

.opensans-bold-white-16px {
  color: var(--white);
  font-family: var(--font-family-opensans-bold);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
}

.opensans-regular-normal-mountain-mist-18px {
  color: var(--mountain-mist);
  font-family: var(--font-family-opensans-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.opensans-extra-extra-bold-black-42px {
  color: var(--black);
  font-family: var(--font-family-opensans-extrabold);
  font-size: 42px;
  font-style: normal;
  font-weight: 800;
}

.opensans-regular-normal-black-24px {
  color: var(--black);
  font-family: var(--font-family-opensans-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.opensans-regular-normal-white-24px {
  color: var(--white);
  font-family: var(--font-family-opensans-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.border-5px-green {
  border: 5px solid var(--green);
}