nav {
    position: fixed;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100vw;
    height: clamp(5rem, -0.875rem + 8vw, 6.25rem);
    background-color: var(--main-white);
    top: 0;
    z-index: 998;
    border-bottom: 2px solid var(--main-orange);
    max-width: 3000px;
    margin: 0 auto;
}

/* headroom/shy navigation */
.headroom--pinned {
    transform: translateY(0);
    transition: 0.25s ease-in-out;
}
.headroom--unpinned {
    transform: translateY(-100%);
    transition: 0.25s ease-in-out;
}

.headroom--bottom {
    transform: translateY(0%);
    border: none;
}

.logo {
    z-index: 999;
}

#logo__item {
    position: absolute;
    top: clamp(0.9375rem, -0.875rem + 10vw, 1.55rem);
    width: clamp(4.6875rem, -0.875rem + 10vw, 6.25rem);
    margin-left: var(--body-margin);
    cursor: pointer;
}

#logo__item:hover {
    filter: brightness(0) saturate(100%) invert(30%) sepia(53%) saturate(2425%) hue-rotate(145deg) brightness(85%) contrast(91%);
}

.menu__desktop {
    display: flex;
    flex-flow: row nowrap;
    justify-content: right;
    width: 100%;
    margin-right: var(--body-margin);
}

.menu__desktop > p {
    cursor: pointer;
}

.menu__mobile {
    position: absolute;
    display: none;
    width: 100%;
    justify-content: right;
    /* margin-right: var(--body-margin); */
    z-index: 998;
}

.menu__mobile > p {
    cursor: pointer;
}

@media (max-width: 800px) {
    .menu__desktop{
        display: none;
    }
    .menu__mobile{
        display: flex;
    }
}

.line {
    fill: none;
    stroke: black;
    stroke-width: 3;
}

#line1 {
    stroke-dasharray: 60 207;
    -webkit-transform-origin: 150% 41.5%;
    -moz-transform-origin: 150% 41.5%;
    -o-transform-origin: 150% 41.5%;
    transform-origin: 150% 41.5%;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

#line2 {
    opacity: 1;
    stroke-dasharray: 60 60;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

#line3 {
    stroke-dasharray: 60 207;
    -webkit-transform-origin: 100%;
    -moz-transform-origin: 100%;
    -o-transform-origin: 100%;
    transform-origin: 100%;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

#menu__overlay {
    display: flex;
    position: absolute;
    flex-flow: column wrap;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--main-orange);
    padding-left: clamp(0.5rem, -0.875rem + 4vw, 2rem);
    padding-top: 5rem;
}

#menu__item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: clamp(0.5rem, -0.875rem + 4vw, 2rem);
}

#menu__item:last-child {
    margin-right: 0px;
}

#menu__item--mobile {
    display: flex;
    width: 95%;
    height: 7vh;
    justify-content: space-between;
}

#menu__item--mobile:first-child {
    margin-top: 20px;
}

#menu__item--mobile .text__large {
    color: var(--main-white);
}

#menu__item--mobile .text__small {
    color: var(--main-white);
}

.menu__item--logo {
    position: absolute;
    bottom: 11vh;
    width: 93.1%;
}

.menu__item:last-child {
    margin-right: 0em;
}

#menu__item:hover {
    color: var(--main-orange)
}