@charset "UTF-8";

header {
  position: sticky;
  top: 0;
  z-index: 1;

  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--size-m);

  padding: 0 var(--size-m);

  background: var(--color-light);
  box-shadow: 4px 2px var(--size-xs) 0 var(--color-light);
}
header .logo img {
  height: var(--size-3xl);
  padding: var(--size-2xs) 0;
}
header .bt_menu {
  display: grid;

  align-items: center;

  padding: 0 var(--size-l);

  font-size: var(--size-2xl);
}
header .bt_menu.open {
  color: var(--color-kibi-red);
  cursor: pointer;
}
header nav {
  position: fixed;
  overflow: auto;
  opacity: 0;

  display: grid;
  align-content: start;

  width: 100%;
  height: 0;

  margin: 0 calc(var(--size-m) *-1);
  padding: 0 var(--size-m);

  background: var(--color-light);

  transition: all var(--speed-normal) ease-out;
}
header .bt_menu.open ~ nav {
  height: calc(100% - var(--size-3xl));
  opacity: 1;

  margin-top: var(--size-3xl);
  padding: var(--size-m);

  transition: all var(--speed-normal) ease-out;
}
header nav a {
  padding: var(--size-s);
  text-decoration: none;
}
header nav a.active:not(.bg-red) {
  font-weight: 700;
  color: var(--color-kibi-red);
}
header nav a.bg-red {
  border-radius: var(--size-l);
  padding: var(--size-xs) var(--size-xl);

  background: var(--color-kibi-red);
}
header nav a.bg-red:hover {
  color: var(--color-text);
  font-weight: 700;
}

section:not(.fullwidth) {
  padding: var(--size-2xl) var(--size-m);
}

footer {
  display: grid;
  grid-auto-flow: row;
  gap: var(--size-m);

  margin: var(--size-3xl) 0 0;
  padding: var(--size-3xl) var(--size-m);

  background: var(--color-kibi-grey);
}
footer a {
  padding: var(--size-m) 0 0;
  text-decoration: none;
}
footer a svg {
  color: var(--color-kibi-red);
}
footer .fa-instagram, footer .fa-linkedin {
  margin: 0 var(--size-m) 0 0;
  font-size: var(--size-2xl);
}
footer .fa-instagram:hover, footer .fa-linkedin:hover {
  color: var(--color-kibi-red-shaded);
}
div.footer {
  padding: var(--size-m);
  background: var(--color-dark);

  color: var(--color-light);
}
div.footer a {
  text-decoration: none;
}


@media only screen and (min-width: 480px) {
}
@media only screen and (min-width: 768px) {
  footer {
    grid-auto-flow: column;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 1024px) {
}
@media only screen and (min-width: 1200px) {
  body > header,
  body > footer,
  div.footer,
  section:not(.fullwidth) {
    padding-left: calc(50vw - var(--viewport-xl) /2 + var(--size-m));
    padding-right: calc(50vw - var(--viewport-xl) /2 + var(--size-m));
  }

  header nav {
    position: relative;
    opacity: 1;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;

    align-content: initial;
    align-items: center;
    justify-items: right;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
  }
  header .bt_menu {
    display: none;
  }
}