header {
    position: fixed;
    width: 100%;
    height: var(--header-height);
    background-color: transparent;
    top: 0;
    left: 0;
    z-index: 10;
    font-variation-settings: "slnt" 0,  "wdth" 400, "wght" 700, "INKT" 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--general-padding);
    transition: all .4s ease;
}


.scrolled header {
    background-color: var(--color-blue);
    height: var(--header-height-scrolled);
}

header .left {
    display: flex;
    align-items: center;
}

header .logo {
    width: calc(131 * var(--vwTransform));
    height: calc(29 * var(--vwTransform));
    display: block;
    margin-right: calc(30 * var(--vwTransform));
}

header .logo svg {
    width: 100%;
    height: 100%;
}

header nav ul {
    list-style: none;
    display: flex;
}

header nav ul li {
    margin-left: calc(50 * var(--vwTransform));
}

header nav ul li.mobile {
    display: none;
}

header nav ul li.green.current-menu-item a,
header nav ul li.green a:hover {
    color: var(--color-green);
}

header nav ul li.yellow.current-menu-item a,
header nav ul li.yellow a:hover {
    color: var(--color-yellow);
}

header nav ul li.red.current-menu-item a,
header nav ul li.red a:hover {
    color: var(--color-red);
}


@media screen and (max-width: 740px) {
  header .left > span,
  header .right {
    display: none;
  }

  header .logo {
    width: calc(170 * var(--vwTransform));
    height: calc(38 * var(--vwTransform));
  }
}