:root {
  --breakpoint-xs: 320px;
  --breakpoint-s: 576px;
  --breakpoint-m: 768px;
  --breakpoint-l: 992px;
  --breakpoint-xl: 1248px;
  --breakpoint-xxl: 1440px;
  --container-width-xs: 288px;
  --container-width-s: 544px;
  --container-width-m: 720px;
  --container-width-l: 944px;
  --container-width-xl: 1200px;
  --color-brick: #bd2719;
  --color-brick-light: #ffeeed;
  --color-brick-medium-light: #facbc8;
  --color-brick-dark: #800e04;
  --color-bus: #0000bf;
  --color-bus-light: #f0f0ff;
  --color-bus-medium-light: #ccccff;
  --color-bus-dark: #00005e;
  --color-coat-of-arms: #0072c6;
  --color-coat-of-arms-light: #e6f4ff;
  --color-coat-of-arms-medium-light: #b5daf7;
  --color-coat-of-arms-dark: #005799;
  --color-copper: #00d7a7;
  --color-copper-light: #cffaf1;
  --color-copper-medium-light: #9ef0de;
  --color-copper-dark: #00a17d;
  --color-engel: #ffe977;
  --color-engel-light: #fff9db;
  --color-engel-medium-light: #fff3b8;
  --color-engel-dark: #dbc030;
  --color-fog: #9fc9eb;
  --color-fog-light: #e8f3fc;
  --color-fog-medium-light: #d0e6f7;
  --color-fog-dark: #72a5cf;
  --color-gold: #c2a251;
  --color-gold-light: #f7f2e4;
  --color-gold-medium-light: #e8d7a7;
  --color-gold-dark: #9e823c;
  --color-metro: #fd4f00;
  --color-metro-light: #ffeee6;
  --color-metro-medium-light: #ffcab3;
  --color-metro-dark: #bd2f00;
  --color-silver: #dedfe1;
  --color-silver-light: #f7f7f8;
  --color-silver-medium-light: #efeff0;
  --color-silver-dark: #b0b8bf;
  --color-summer: #ffc61e;
  --color-summer-light: #fff4d4;
  --color-summer-medium-light: #ffe49c;
  --color-summer-dark: #cc9200;
  --color-suomenlinna: #f5a3c7;
  --color-suomenlinna-light: #fff0f7;
  --color-suomenlinna-medium-light: #ffdbeb;
  --color-suomenlinna-dark: #e673a5;
  --color-tram: #008741;
  --color-tram-light: #dff7eb;
  --color-tram-medium-light: #a3e3c2;
  --color-tram-dark: #006631;
  --color-focus-outline: #0072c6;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-black-5: #f2f2f2;
  --color-black-10: #e6e6e6;
  --color-black-20: #cccccc;
  --color-black-30: #b3b3b3;
  --color-black-40: #999999;
  --color-black-50: #808080;
  --color-black-60: #595959;
  --color-black-70: #4d4d4d;
  --color-black-80: #333333;
  --color-black-90: #1a1a1a;
  --color-error: #b01038;
  --color-error-light: #f6e2e6;
  --color-error-dark: #8d0d2d;
  --color-success: #007a64;
  --color-success-light: #e2f5f3;
  --color-success-dark: #006250;
  --color-alert: #ffda07;
  --color-alert-light: #fff4b4;
  --color-alert-dark: #c27900;
  --color-info: #0062b9;
  --color-info-light: #e5eff8;
  --color-info-dark: #004f94;
  --box-shadow-s: 0px 2px 10px 0px rgba(0, 0, 0, 0.07);
  --box-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
  --box-shadow-l: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);
  --spacing-layout-2-xs: 1rem; /* 16px */
  --spacing-layout-xs: 1.5rem; /* 24px */
  --spacing-layout-s: 2rem; /* 32px */
  --spacing-layout-m: 3rem; /* 48px */
  --spacing-layout-l: 4rem; /* 64px */
  --spacing-layout-xl: 6rem; /* 96px */
  --spacing-layout-2-xl: 8rem; /* 128px */
  --spacing-4-xs: 0.125rem; /* 2px */
  --spacing-3-xs: 0.25rem; /* 4px */
  --spacing-2-xs: 0.5rem; /* 8px */
  --spacing-xs: 0.75rem; /* 12px */
  --spacing-s: 1rem; /* 16px */
  --spacing-m: 1.5rem; /* 24px */
  --spacing-l: 2rem; /* 32px */
  --spacing-xl: 2.5rem; /* 40px */
  --spacing-2-xl: 3.0rem; /* 48px */
  --spacing-3-xl: 3.5rem; /* 56px */
  --spacing-4-xl: 4rem; /* 64px */
  --spacing-5-xl: 4.5rem; /* 72px */
  --fontsize-heading-xxl: 4rem; /* 64px */
  --fontsize-heading-xl: 3rem; /* 48px */
  --fontsize-heading-xl-mobile: 2.5rem; /* 40px */
  --fontsize-heading-l: 2rem; /* 32px */
  --fontsize-heading-m: 1.5rem; /* 24px */
  --fontsize-heading-s: 1.25rem; /* 20px */
  --fontsize-heading-xs: 1.125rem; /* 18px */
  --fontsize-heading-xxs: 1rem; /* 16px */
  --fontsize-body-s: 0.875rem; /* 14px */
  --fontsize-body-m: 1rem; /* 16px */
  --fontsize-body-l: 1.125rem; /* 18px */
  --fontsize-body-xl: 1.25rem; /* 20px */
  --font-default: HelsinkiGroteskPro, Arial, sans-serif;
  --lineheight-s: 1;
  --lineheight-m: 1.2;
  --lineheight-l: 1.5;
  --lineheight-xl: 1.75;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.visually-hidden {
  border: 0;
  clip: 'rect(0 0 0 0)';
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.button-reset {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.text-body {
  color: var(--color-black-90);
  font-family: var(--font-default);
  font-size: var(--fontsize-body-m);
  line-height: var(--lineheight-l);
}
.text-medium {
  font-family: var(--font-default);
  font-weight: 500;
}
.text-bold {
  font-family: var(--font-default);
  font-weight: bold;
}
.text-xl {
  font-size: var(--fontsize-heading-m);
}
.text-lg {
  font-size: var(--fontsize-heading-s);
}
.text-md {
  font-size: var(--fontsize-heading-xs);
}
.subtitle {
  font-size: var(--fontsize-body-m);
}
.text-sm {
  font-size: var(--fontsize-body-s);
  line-height: var(--lineheight-xl);
}
/* HEADINGS */
.heading-xxl {
  font-size: var(--fontsize-heading-xxl);
  font-weight: 400;
  letter-spacing: -1.2px;
  line-height: var(--lineheight-s);
}
.heading-xl {
  font-size: var(--fontsize-heading-xl);
  font-weight: 400;
  letter-spacing: -1px;
  line-height: var(--lineheight-s);
}
.heading-xl-mobile {
  font-size: var(--fontsize-heading-xl-mobile);
  font-weight: 400;
  letter-spacing: -0.8px;
  line-height: var(--lineheight-s);
}
.heading-l {
  font-size: var(--fontsize-heading-l);
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: var(--lineheight-m);
}
.heading-m {
  font-size: var(--fontsize-heading-m);
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: var(--lineheight-m);
}
.heading-s {
  font-size: var(--fontsize-heading-s);
  font-weight: 500;
  letter-spacing: 0;
  line-height: var(--lineheight-l);
}
.heading-xs {
  font-size: var(--fontsize-heading-xs);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--lineheight-l);
}
.heading-xxs {
  font-size: var(--fontsize-heading-xxs);
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: var(--lineheight-l);
}
.helper-text {
  color: var(--color-black-60);
  display: block;
  flex-basis: 100%;
  font-size: var(--fontsize-body-m);
  margin-top: var(--spacing-2-xs);
}
/*
 * Normalize.css rule
 */
html {
  -webkit-text-size-adjust: 100%;
}