@font-face {
  font-family: 'Museo';
  font-style: normal;
  font-weight: 100;
  font-display: block;
  src: url('../fonts/light.woff2') format('woff2');
}

@font-face {
  font-family: 'Museo';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url('../fonts/regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Museo';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../fonts/bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Museo';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('../fonts/black.woff2') format('woff2');
}

:root {
  --font-main: 'Museo', Tahoma, Arial;

  --color-accent: #264982;
  --color-accent-transparent: rgba(0, 48, 158, 0.2);

  --color-white: #ffffff;
  --color-black: #131313;
  --color-black-light: #1e1e1e;
  --color-black-extra-light: #383838;
  --color-grey-extra-light: #f6f6f6;
  --color-grey-light: #d3d3d3;
  --color-grey: #a2a2a2;
  --color-grey-dark: #6e6e6e;

  --color-red-dark: #800000;

  --subheader-height: 500px;

  --container-gutter: 10px;

  @media (width >= 480px) {
    --container-gutter: 14px;
  }

  @media (width >= 768px) {
    --container-gutter: calc(50vw - 372px);
  }

  @media (width >= 1024px) {
    --container-gutter: calc(50vw - 480px);
  }

  @media (width >= 1200px) {
    --container-gutter: calc(50vw - 587.5px);
  }
}