@font-face {
  font-family: 'messina';
  src: url('fonts/messinasans-regular-webfont.woff2') format('woff2'), url('fonts/messinasans-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  min-height: 100dvh;
}
html {
  font-size: max(16px, 1.59574468vw);
  line-height: max(28px, 2.65957447vw);
}
body {
  font-family: 'messina', sans-serif;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}
p + p {
  margin-top: max(32px, 3.40425532vw);
}
a[href] {
  color: inherit;
  text-decoration: none;
}
a[href]:hover {
  color: #797979;
}
a[href].active {
  text-decoration: underline;
}
.element-invisible {
  position: absolute !important;
  clip-path: rect(0 0 0 0);
  overflow: hidden;
  width: 0;
  height: 0;
}
video {
  display: block;
  width: 100%;
  height: auto;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: max(80px, 8.5106383vw);
  padding: 0 max(16px, 1.70212766vw);
  display: flex;
  justify-content: space-between;
  column-gap: max(32px, 3.40425532vw);
  align-items: center;
  z-index: 1000;
  background-color: white;
  white-space: nowrap;
}
header .logo {
  flex: 1;
}
header .logo a {
  display: block;
  width: fit-content;
}
html.front header .logo a {
  pointer-events: none;
}
header .logo img {
  display: block;
  height: max(31px, 3.29787234vw);
  width: auto;
}
header #menu-toggle,
header .menu-icon {
  display: none;
}
header nav {
  flex: 2;
  justify-content: center;
  text-transform: lowercase;
  display: flex;
  gap: max(16px, 1.70212766vw);
}
header .lang {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
}
header .lang a {
  color: #797979;
}
header .lang a.active {
  color: black;
  text-decoration: none;
}
main {
  margin-top: max(80px, 8.5106383vw);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: max(32px, 3.40425532vw);
  padding: 0 max(16px, 1.70212766vw) max(32px, 3.40425532vw);
}
main > div {
  flex: 1;
  padding-top: max(32px, 3.40425532vw);
}
main .col-image {
  position: sticky;
  top: max(80px, 8.5106383vw);
}
main .col-image img {
  margin-left: auto;
  max-width: 100%;
  height: auto;
  display: block;
}
#slideshow img {
  display: none;
}
#slideshow img:only-child,
#slideshow img.active {
  display: block;
}
footer {
  margin-top: auto;
  padding: max(32px, 3.40425532vw) max(16px, 1.70212766vw);
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: max(32px, 3.40425532vw);
}
footer .columns {
  display: flex;
  gap: max(16px, 1.70212766vw);
  justify-content: space-between;
}
footer .columns > div {
  min-width: 25%;
}
footer .bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: max(16px, 1.70212766vw);
}
footer .bottom img {
  display: block;
  width: auto;
  height: max(47px, 5vw);
}
html.contact footer {
  display: none;
}
@media (max-width: 768px) {
  header {
    display: grid;
    height: auto;
    grid-template-columns: 1fr auto;
    grid-template-rows: 80px auto;
  }
  header .menu-icon {
    display: block;
    width: 50px;
    height: 50px;
    background: transparent url(assets/menu.svg) center / 32px auto no-repeat;
    justify-self: right;
  }
  header nav,
  header .lang {
    display: none;
  }
  header #menu-toggle:checked + .menu-icon {
    background-image: url(assets/close.svg);
    background-size: auto 26px;
  }
  header #menu-toggle:checked ~ nav,
  header #menu-toggle:checked ~ .lang {
    display: flex;
    flex-direction: column;
    flex: auto;
    padding: max(32px, 3.40425532vw) 0;
  }
  header #menu-toggle:checked ~ .lang {
    flex-direction: row;
    align-self: flex-start;
  }
  header #menu-toggle:checked ~ .lang > a {
    min-width: 32px;
    text-align: center;
  }
  main {
    margin-top: 80px;
    flex-direction: column;
  }
  main .col-image {
    position: static;
    padding-top: 0;
  }
  main img {
    margin: 0;
  }
  main .fd {
    display: none;
  }
  footer {
    display: flex !important;
    background-color: transparent;
  }
  footer .columns,
  footer .bottom {
    display: none;
  }
  html.contact footer .bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  html.contact footer .bottom .fd {
    order: -1;
  }
  html.contact footer .bottom .fd img {
    width: 86px;
    height: auto;
  }
}