.top-header {
    background-color: var(--blue-dark-1);
    color: var(--grey-light-1);
    font-size: var(--fs-small);

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

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

    a {
        color: var(--white);
        text-decoration: none;
    }
}


header.header {
    background-color: var(--white);
    background: linear-gradient(180deg, var(--blue-light-1), var(--blue-base));
    padding-top: var(--margin-s);
    padding-bottom: var(--margin-s);
    

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & > .container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: var(--margin-s);
    }
}

/* responsive behavior of header elements */
@media all and (width <= 767px) {
    header.header {

        & > .container {


            align-items: flex-start;
            margin-top: var(--margin-xs);
            padding-bottom: var(--margin-xs);

            .branding {
                margin-top: var(--margin-s);
                flex: 1 1 10%;

            }
        }
    }
}

.branding {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;

    flex: 1 1 5%;
    
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;

    a {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--margin-xs);

        color: transparent;
        text-indent: -9999px;
        font-size: var(--fc-h1plus);

        &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260.17 63.08"><defs><style> .cls-1 { fill: %23fcfcfd; } </style></defs><g id="Layer_1-2" data-name="Layer 1"><g><g><g><path class="cls-1" d="M25.93.46v6.08H7.71v12.17h15.38v6.11H7.71v16.75H0V.46h25.93Z"/><path class="cls-1" d="M39.98,41.57h-7.68V.46h7.68v41.12Z"/><path class="cls-1" d="M56.3,35.26h16.46v6.31h-24.11V.46h7.65v34.8Z"/><path class="cls-1" d="M114.64,21.01c0,3.01-.5,5.81-1.51,8.37s-2.42,4.79-4.24,6.67c-1.82,1.88-4.01,3.34-6.57,4.39-2.56,1.05-5.39,1.58-8.5,1.58s-5.95-.53-8.52-1.58c-2.57-1.05-4.77-2.52-6.6-4.39-1.83-1.88-3.25-4.1-4.25-6.67s-1.51-5.36-1.51-8.37.5-5.8,1.51-8.37c1-2.57,2.42-4.79,4.25-6.67,1.83-1.88,4.03-3.34,6.6-4.39,2.57-1.05,5.41-1.58,8.52-1.58s5.94.53,8.5,1.59c2.56,1.06,4.75,2.53,6.57,4.39,1.82,1.87,3.23,4.08,4.24,6.65,1,2.57,1.51,5.36,1.51,8.37ZM106.8,21.01c0-2.26-.3-4.28-.9-6.07-.6-1.79-1.46-3.31-2.57-4.56-1.12-1.25-2.48-2.21-4.08-2.87-1.6-.66-3.41-1-5.42-1s-3.82.33-5.43,1c-1.61.66-2.98,1.62-4.11,2.87-1.13,1.25-2,2.77-2.6,4.56-.61,1.79-.91,3.81-.91,6.07s.3,4.28.91,6.07c.61,1.79,1.47,3.31,2.6,4.55,1.13,1.24,2.5,2.19,4.11,2.86,1.61.66,3.42,1,5.43,1s3.81-.33,5.42-1c1.6-.66,2.96-1.62,4.08-2.86,1.12-1.24,1.98-2.76,2.57-4.55.6-1.79.9-3.81.9-6.07Z"/><path class="cls-1" d="M128.01,25.5v16.07h-7.65V.46h12.54c2.81,0,5.21.29,7.21.87s3.64,1.39,4.92,2.43c1.28,1.04,2.22,2.29,2.82,3.74.6,1.45.9,3.05.9,4.79,0,1.38-.2,2.69-.61,3.92-.41,1.23-1,2.35-1.76,3.36s-1.72,1.89-2.84,2.64-2.41,1.36-3.85,1.82c.97.55,1.8,1.34,2.5,2.36l10.29,15.18h-6.88c-.66,0-1.23-.13-1.69-.4-.46-.26-.86-.64-1.18-1.14l-8.64-13.17c-.32-.49-.68-.84-1.07-1.05-.39-.21-.96-.31-1.72-.31h-3.27ZM128.01,20.02h4.78c1.44,0,2.7-.18,3.77-.54,1.07-.36,1.95-.86,2.64-1.49.69-.63,1.21-1.39,1.55-2.26.34-.87.51-1.83.51-2.87,0-2.08-.69-3.69-2.06-4.81-1.37-1.12-3.47-1.68-6.3-1.68h-4.89v13.65Z"/><path class="cls-1" d="M182.71.46v6.08h-18.23v11.4h14.36v5.89h-14.36v11.63h18.23v6.11h-25.93V.46h25.93Z"/><path class="cls-1" d="M193.63.5c.23.03.43.08.61.17.18.09.36.21.53.37.17.16.36.37.57.64l21.58,27.5c-.08-.66-.13-1.31-.16-1.95s-.04-1.23-.04-1.78V.46h6.74v41.12h-3.95c-.61,0-1.11-.09-1.51-.28-.4-.19-.79-.53-1.17-1.02l-21.5-27.38c.06.61.1,1.21.13,1.81.03.6.04,1.14.04,1.63v25.25h-6.74V.46h4.01c.34,0,.63.01.85.04Z"/><path class="cls-1" d="M260.17.46v6.28h-12.37v34.83h-7.65V6.74h-12.43V.46h32.44Z"/></g><g><path class="cls-1" d="M88.62,60.57c.09,0,.16.04.23.11l.61.67c-.47.55-1.04.97-1.72,1.28s-1.48.46-2.43.46c-.83,0-1.58-.14-2.26-.43-.68-.29-1.25-.69-1.73-1.21s-.85-1.14-1.11-1.86c-.26-.72-.39-1.52-.39-2.39s.14-1.67.42-2.39c.28-.72.68-1.35,1.19-1.87.51-.52,1.12-.92,1.83-1.21.71-.29,1.49-.43,2.35-.43s1.58.13,2.19.39c.61.26,1.16.62,1.64,1.07l-.51.72c-.04.05-.08.1-.13.13-.05.04-.12.05-.21.05-.07,0-.14-.03-.22-.08-.08-.05-.17-.11-.28-.19s-.23-.16-.38-.24-.32-.17-.51-.24-.43-.14-.69-.19c-.26-.05-.57-.08-.91-.08-.62,0-1.18.11-1.69.32-.51.21-.95.51-1.32.91s-.66.87-.86,1.43c-.21.56-.31,1.19-.31,1.89s.1,1.36.31,1.92c.21.56.49,1.04.84,1.43s.78.68,1.27.89c.49.2,1.01.31,1.58.31.34,0,.65-.02.92-.06s.53-.1.76-.19c.23-.09.45-.19.65-.33.2-.13.4-.29.61-.47.09-.08.18-.12.27-.12Z"/><path class="cls-1" d="M101.4,62.95h-1.21c-.14,0-.25-.04-.34-.1-.09-.07-.15-.16-.19-.27l-1.08-2.78h-5.17l-1.08,2.78c-.04.1-.1.18-.19.26-.09.08-.2.11-.34.11h-1.21l4.61-11.52h1.58l4.61,11.52ZM93.85,58.67h4.3l-1.81-4.69c-.12-.29-.23-.65-.35-1.09-.06.22-.12.42-.17.61-.06.19-.11.35-.17.49l-1.81,4.68Z"/><path class="cls-1" d="M104.97,58.14v4.81h-1.55v-11.52h3.26c.73,0,1.36.07,1.89.22.53.15.97.36,1.31.64.35.28.6.62.77,1.01.17.39.25.83.25,1.32,0,.41-.06.79-.19,1.14-.13.35-.31.67-.56.95s-.54.52-.89.72c-.35.2-.75.35-1.19.45.19.11.36.28.51.49l3.36,4.58h-1.38c-.28,0-.49-.11-.63-.33l-2.99-4.12c-.09-.13-.19-.22-.3-.28-.11-.06-.27-.08-.48-.08h-1.18ZM104.97,57h1.63c.46,0,.86-.05,1.2-.16.35-.11.63-.27.87-.47s.41-.44.53-.72c.12-.28.18-.59.18-.92,0-.69-.23-1.2-.68-1.55s-1.13-.52-2.02-.52h-1.71v4.35Z"/><path class="cls-1" d="M119.24,58.14v4.81h-1.55v-11.52h3.26c.73,0,1.36.07,1.89.22.53.15.97.36,1.31.64.35.28.6.62.77,1.01.17.39.25.83.25,1.32,0,.41-.06.79-.19,1.14-.13.35-.31.67-.56.95s-.54.52-.89.72c-.35.2-.75.35-1.19.45.19.11.36.28.51.49l3.36,4.58h-1.38c-.28,0-.49-.11-.63-.33l-2.99-4.12c-.09-.13-.19-.22-.3-.28-.11-.06-.27-.08-.48-.08h-1.18ZM119.24,57h1.63c.46,0,.86-.05,1.2-.16.35-.11.63-.27.87-.47s.41-.44.53-.72c.12-.28.18-.59.18-.92,0-.69-.23-1.2-.68-1.55s-1.13-.52-2.02-.52h-1.71v4.35Z"/><path class="cls-1" d="M135.38,51.42v1.27h-5.53v3.83h4.48v1.22h-4.48v3.93h5.53v1.27h-7.1v-11.52h7.1Z"/><path class="cls-1" d="M139.14,51.48c.07.04.14.11.23.21l6.67,8.69c-.02-.14-.03-.27-.03-.41,0-.13,0-.26,0-.38v-8.16h1.37v11.52h-.79c-.12,0-.23-.02-.31-.06s-.17-.12-.25-.22l-6.67-8.68c.01.13.02.27.02.39,0,.13,0,.25,0,.35v8.21h-1.37v-11.52h.8c.14,0,.24.02.31.05Z"/><path class="cls-1" d="M158.44,51.42v1.31h-3.72v10.21h-1.56v-10.21h-3.74v-1.31h9.02Z"/><path class="cls-1" d="M168.9,62.95h-1.21c-.14,0-.25-.04-.34-.1-.09-.07-.15-.16-.19-.27l-1.08-2.78h-5.17l-1.08,2.78c-.04.1-.1.18-.19.26-.09.08-.2.11-.34.11h-1.21l4.61-11.52h1.58l4.61,11.52ZM161.35,58.67h4.3l-1.81-4.69c-.12-.29-.23-.65-.35-1.09-.06.22-.12.42-.17.61-.06.19-.11.35-.17.49l-1.81,4.68Z"/><path class="cls-1" d="M172.32,61.64h4.99v1.31h-6.55v-11.52h1.56v10.21Z"/></g></g><g><rect class="cls-1" x="11.66" y="53" width="63.4" height="1.15"/><rect class="cls-1" x="17.33" y="56.46" width="57.73" height="1.15"/><rect class="cls-1" x="23.36" y="59.9" width="51.7" height="1.15"/><rect class="cls-1" x="181.67" y="53.01" width="63.4" height="1.15"/><rect class="cls-1" x="181.67" y="56.47" width="57.73" height="1.15"/><rect class="cls-1" x="181.67" y="59.9" width="51.7" height="1.15"/></g></g></g></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
    }

   img {
        height: auto;
        width: 100%;
        display: none;
    }

    
}

/* responsive behavior of branding elements */
@media all and (width <= 767px) {
    .branding {

      a {
        font-size: var(--fc-h2);
      }

    }
}

.site-navigation {
    flex: 1 1 60%;

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: var(--margin-s);

    .navbar-collapse {
      flex: 1 1 70%;

      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: var(--margin-xxs);
    }

    .secondary-menu-wrapper {
      flex: 1 1 20%;

      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: var(--margin-s);
    }

}


@media all and (width <= 767px) {

  .site-navigation {
    flex: 1 1 50%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;


    .secondary-menu-wrapper {
      flex: 1 1 auto;

      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: var(--margin-s);
    }
    
    .navbar-toggler {
      order: 2;
      padding: 0;
    }
    
    .navbar-collapse {
      order: 3;
      flex-basis: 100%;
    }
  }

}


.navbar-toggler {
    margin-left: auto;
}