:root {
  /* Colors */
  --color-black: #212121;
  --color-white: #ffffff;
  --color-orange: #ffb24e;
  /* Fonts */
  --font-haettenschweiler: 'Haettenschweiler';
  --font-suisse: 'Suisse Intl';
  --font-size-xs: 9px;
  --font-size-s: 12px;
  --font-size-m: 16px;
  --font-size-l: 20px;
  --font-size-xl: 24px;
  --font-size-h1: 90px;
  --font-size-h2: 32px;
  --line-height-h1: 80%;
  --line-height-h2: 80%;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --letter-spacing-m: 0.008em;
  --letter-spacing-h1: -0.03em;
  /* z-indexes */
  --z-index-debug: 10000;
  /* Transitions */
  --easings: cubic-bezier(0.42, 0, 0.58, 1);
  --duration-fast: 0.2s;
  --duration: 0.4s;
  --duration-slow: 0.6s;
  --transition-fast: var(--duration-fast) var(--easings);
  --transition: var(--duration) var(--easings);
  --transition-slow: var(--duration-slow) var(--easings);
}
@media screen and (min-width: 1440px) {
  :root {
    --font-size-h1: 110px;
    --font-size-h2: 64px;
  }
}

*,
*::after,
*::before {
  box-sizing: border-box;
  outline: none;
}

html,
body {
  max-width: 100%;
  min-width: 375px;
  background-color: var(--color-white);
}

html,
body,
input,
button,
textarea {
  font:
    var(--font-weight-normal) var(--font-size-m)/var(--line-height-m) var(--font-geologica),
    sans-serif;
  letter-spacing: var(--letter-spacing-m);
  color: var(--color-black);
  font-family: var(--font-suisse);
}

input,
p,
button,
textarea {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
}

button {
  cursor: pointer;
}

i,
em {
  font-style: italic;
}

hr {
  height: 1px;
  border: none;
  background-color: var(--color-grey-3);
}
hr._white-transparent {
  background-color: var(--color-white-transparent);
}

b,
strong {
  font-weight: var(--font-weight-normal);
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: var(--font-weight-normal);
  font-family: var(--font-haettenschweiler);
  text-transform: uppercase;
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  transition: var(--transition-fast);
}
@media (hover: hover) {
  h1:hover {
    color: var(--color-orange);
    transition: var(--transition-fast);
    cursor: default;
  }
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

@media screen and (min-width: 0px) {
  .min-up-hide {
    display: none !important;
  }
}

@media screen and (max-width: 374px) {
  .min-down-hide {
    display: none !important;
  }
}

@media screen and (max-width: 374px) {
  .min-hide {
    display: none !important;
  }
}

@media screen and (min-width: 375px) {
  .min-not-hide {
    display: none !important;
  }
}

@media screen and (min-width: 375px) {
  .xs-up-hide {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .xs-down-hide {
    display: none !important;
  }
}

@media screen and (min-width: 375px) and (max-width: 767px) {
  .xs-hide {
    display: none !important;
  }
}

@media screen and (max-width: 374px), screen and (min-width: 768px) {
  .xs-not-hide {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .m-up-hide {
    display: none !important;
  }
}

@media screen and (max-width: 1023px) {
  .m-down-hide {
    display: none !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .m-hide {
    display: none !important;
  }
}

@media screen and (max-width: 767px), screen and (min-width: 1024px) {
  .m-not-hide {
    display: none !important;
  }
}

@media screen and (min-width: 1024px) {
  .l-up-hide {
    display: none !important;
  }
}

@media screen and (max-width: 1439px) {
  .l-down-hide {
    display: none !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .l-hide {
    display: none !important;
  }
}

@media screen and (max-width: 1023px), screen and (min-width: 1440px) {
  .l-not-hide {
    display: none !important;
  }
}

@media screen and (min-width: 1440px) {
  .xl-up-hide {
    display: none !important;
  }
}

@media screen and (max-width: 1919px) {
  .xl-down-hide {
    display: none !important;
  }
}

@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .xl-hide {
    display: none !important;
  }
}

@media screen and (max-width: 1439px), screen and (min-width: 1920px) {
  .xl-not-hide {
    display: none !important;
  }
}

@media screen and (min-width: 1920px) {
  .xxl-up-hide {
    display: none !important;
  }
}

@media screen and (max-width: 1920px) {
  .xxl-down-hide {
    display: none !important;
  }
}

@media screen and (min-width: 1920px) and (max-width: 1920px) {
  .xxl-hide {
    display: none !important;
  }
}

@media screen and (max-width: 1919px), screen and (min-width: 1921px) {
  .xxl-not-hide {
    display: none !important;
  }
}

@media screen and (min-width: 1921px) {
  .max-up-hide {
    display: none !important;
  }
}

@media screen and (min-width: 1921px) {
  .max-hide {
    display: none !important;
  }
}

@media screen and (max-width: 1920px) {
  .max-not-hide {
    display: none !important;
  }
}

.container {
  max-width: 1440px;
  margin: 0 auto;
}

@font-face {
  font-family: 'Haettenschweiler';
  src: url('/assets/fonts/Haettenschweiler.ttf');
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
}
@font-face {
  font-family: 'Suisse Intl';
  src: url('/assets/fonts/suisseintl.ttf');
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}