@media (min-width: 1920px) {
    :root {
        --menusize: 2rem;
    }
}

@media (max-width: 1536px) {
    :root {
        --menusize: 1em;
    }

    header #header_search,
    header ul.sub-menu {
        border-radius: 1.5rem;
        top: 100%;
    }
}

@media (max-width: 1380px) {
    :root {
        --firstrow: 0px;
    }
}

@media (min-width: 1081px) {
    #hamburger[aria-expanded="false"]~.mobilenav {
        display: flex !important;
    }

    header nav:before {
        content: '';
        display: block;
        height: 100%;
        width: 50%;
        top: 0;
        background-color: inherit;
        position: absolute;
        left: 0;
        z-index: -1;
        transform: translateX(calc(-100% + 2.5rem));
    }

    ul.sub-menu {
        width: fit-content;
        position: absolute;
        top: calc(100% + 1.5rem);
        left: -2rem;

        padding: 1.5rem 2rem;
        background-color: var(--white);
        box-shadow: 0.5rem 1rem 1rem rgba(0, 0, 0, 0.16);
        border-radius: 1rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        width: max-content;
        color: var(--primary);

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .5em
    }

    header nav .search {
        position: relative;
    }

    #header_search {
        position: absolute;
        top: calc(100% + 1.5rem);
        right: 0;
        padding: 1.5rem 2rem;
        background-color: var(--white);
        box-shadow: 0.5rem 1rem 1rem rgba(0, 0, 0, 0.16);
        border-radius: 1rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        width: max-content;
    }

    nav > ul > li > a:after {
        content: '';
        background-color: transparent;
        height: 1.5rem;
        width: 100%;
        position: absolute;
        left: 0;
        top: 100%;
        display: block;
    }

    header nav > ul {
        justify-content: flex-end;
    }

    header nav {
        padding-right: 5rem;
    }

    main > .note {
        margin-bottom: -5rem;
    }
}

@media (max-width: 1080px) {

    :root {
        --headlinesize: 2.5rem;
        --mediumsize: 2.25rem;
    }

    #hamburger[aria-expanded="false"]~.mobilenav {
        display: none;
    }

    #hamburger {
        width: 3rem;
        height: 2rem;
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
        -webkit-transition: 0.5s ease-in-out;
        -moz-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        right: 1.5rem;
        z-index: 99;
        position: sticky;
        top: var(--gap);
        display: block;
        z-index: 4;
    }

    #hamburger:after {
        content: '';
        position: absolute;
        border-radius: 50%;
        width: 100%;
        aspect-ratio: 1;
        background-color: var(--white);
        top: calc(50% + 0.15rem);
        left: 50%;
        z-index: -1;
        transform: translate(-50%, -50%) scale(1.66);
        box-shadow: 0px .5rem 1rem rgba(0,0,0,.16);
    }

    #hamburger.open span {
        /* background-color: var(--white); */
    }

    #hamburger span {
        display: block;
        position: absolute;
        height: 0.3rem;
        width: 100%;
        background: var(--primary);
        border-radius: 0.5rem;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
        -webkit-transition: 0.25s ease-in-out;
        -moz-transition: 0.25s ease-in-out;
        -o-transition: 0.25s ease-in-out;
        transition: 0.25s ease-in-out;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    #hamburger span:nth-child(1) {
        top: 0%;
    }

    #hamburger span:nth-child(2) {
        top: 50%;
    }

    #hamburger span:nth-child(3) {
        top: 100%;
    }

    #hamburger.open span:nth-child(1) {
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
        -moz-transform: translate(-50%, -50%) rotate(45deg);
        -o-transform: translate(-50%, -50%) rotate(45deg);
        transform: translate(-50%, -50%) rotate(45deg);
        top: calc(50% + 0.15rem);
        left: 50%;
        transform-origin: center center;
    }

    #hamburger.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }

    #hamburger.open span:nth-child(3) {
        -webkit-transform: translate(-50%, -50%) rotate(-45deg);
        -moz-transform: translate(-50%, -50%) rotate(-45deg);
        -o-transform: translate(-50%, -50%) rotate(-45deg);
        transform: translate(-50%, -50%) rotate(-45deg);
        top: calc(50% + 0.15rem);
        left: 50%;
        transform-origin: center center;
    }

    header nav {
        padding: var(--padding);
        position: fixed;
        left: 1rem;
        top: 1rem;
        right: 1rem;
        width: calc(100% - 2rem) !important;
        max-height: calc(100% - 2rem) !important;
        z-index: 3;
        --menusize: 1.5em;
    }

    header nav > ul {
        flex-direction: column;
        gap: 1em;
    }

    nav li {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1em;
    }

    ul.sub-menu {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: .5em;
    }

    header nav .search {
        margin-top: 3em;
        font-size: var(--textsize);
    }

    [aria-controls="header_search"] {
        display: none !important;
    }

    #header_search {
        display: block !important;
    }
    form.search {
        gap: 1em
    }

    .wp-block-contact-form-7-contact-form-selector form > fieldset {
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    }

    header nav .search button {
        background-color: var(--white);
        padding: .5em;
        border-radius: 1em;
    }
}

@media (max-width: 768px) {

        form.search {
        width: 100%;
    }

    .wp-block-contact-form-7-contact-form-selector > :only-child {
        min-width: 0;
        width: 100%;
    }

    .wp-block-contact-form-7-contact-form-selector {
        background-image: linear-gradient(180deg, transparent 0px, var(--headline-color) 50vw), url(../img/form_bg.jpeg);
        background-size: cover, auto 50vw;
        background-position: center, top center;
        background-repeat: no-repeat, no-repeat;
        padding-top: 50vw;
    }

    footer div {
        justify-content: flex-start;
    }

    nav.footernav {
        width: 100%;
    }

    nav.footernav ul {
        --gap: 2vw;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .wp-block-contact-form-7-contact-form-selector form > fieldset {
        display: flex;
        flex-direction: column;
    }

    .size-banner.wp-post-image {
        min-height: 50vw;
    }
}

@media (max-width: 480px) {
    :root {
        --gap: 1rem;
    }
    header nav {
        --menusize: 2rem;
    }

    footer form.search {
        width: 100%;
        margin: 2em 0;
    }

    footer form.search input {
        flex-grow: 1;
    }

    footer form.search [type='submit'] {
        padding: 0;
    }

    .intro-block {
        gap: 3em
    }
}