.wf-button {
    background-color: var(--blue);
    border: 0;
    border-radius: 0;
    color: var(--white);
    cursor: pointer;
    display: inline-block;
    line-height: inherit;
    padding: 9px 15px;
    text-decoration: none
}

.wf-main-navigation {
    background-color: var(--background);
    color: var(--text);
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.4em;
    position: relative
}

.wf-main-navigation a {
    text-decoration: none
}

.wf-main-navigation ul {
    margin-top: 0
}

.wf-main-navigation li {
    list-style: none
}

.wf-navigation-container {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--screen);
    padding: 31px var(--padding);
    position: relative;
    width: calc(100% - var(--padding)*2);
    z-index: 5
}

.wf-navigation-inner-container {
    margin-left: auto;
    margin-right: auto;
    width: 100%
}

.wf-navbar-wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.wf-navbar-brand {
    align-items: flex-start;
    display: flex;
    margin-bottom: -5px
}

.wf-blog-link {
    color: var(--text);
    display: block;
    font-size: 1.875em;
    font-weight: 200;
    margin: 5px 0 0 15px
}

.wf-blog-link:hover {
    color: var(--text-hover)
}

.wf-blog-link:before {
    color: var(--text) !important;
    content: "/";
    cursor: default;
    display: inline-block;
    padding-right: 15px
}

.wf-navigation-menu {
    grid-column-gap: 8px;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-left: 0
}

.wf-navigation-link {
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px 10px;
    text-decoration: none
}

.wf-navigation-link:hover {
    color: var(--text-hover)
}

.wf-navigation-link:focus-visible,
.wf-navigation-link[data-wf-focus-visible] {
    border-radius: 4px;
    color: var(--blue);
    outline: 2px solid var(--blue);
    outline-offset: 0
}

.wf-navigation-logo {
    margin: 1px 0 -1px;
    width: 175px
}

.cls-1 {
    fill: var(--white)
}

.cls-2 {
    fill: var(--blue)
}

.cls-3,
.cls-4 {
    fill: var(--dark-gray)
}

.wf-navigation-button {
    background-color: var(--blue);
    border: 0 solid var(--blue);
    border-radius: 5px;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    padding: 9px 16px 8px;
    text-align: left
}

.wf-navigation-button:hover {
    opacity: .85
}

.wf-navigation-button.wf-nav-gray-button {
    background-color: var(--off-background);
    color: var(--text);
    margin-right: 16px
}

.wf-navigation-list-item {
    margin-bottom: 0;
    padding-left: 0
}

.wf-navigation-list-button {
    margin-left: 10px
}

@media screen and (max-width:1150px) {
    .wf-hide-big-tablet {
        display: none
    }
}

@media screen and (max-width:1050px) {
    .wf-hide-tablet {
        display: none
    }
}

@media screen and (max-width:950px) {
    .wf-hide-small-tablet {
        display: none
    }
}

@media screen and (max-width:855px) {
    .wf-hide-large-mobile {
        display: none
    }
}

@media screen and (max-width:767px) {
    .wf-navigation-container {
        width: calc(100% - 60px)
    }
}

@media screen and (max-width:670px) {
    .wf-hide-mobile {
        display: none
    }
}

@media screen and (max-width:580px) {
    .wf-navigation-container {
        padding: 23px var(--padding) 21px
    }

    .wf-navbar-wrapper {
        justify-content: center
    }

    .wf-hide-last {
        display: none
    }
}

@media screen and (max-width:340px) {
    .wf-nav-brand a:not(.wf-blog-link) {
        overflow: hidden;
        width: 31px
    }
}

@media (prefers-color-scheme:dark) {

    .cls-3,
    .cls-4 {
        fill: var(--white)
    }
}