@charset "UTF-8";
/* This is a CSS file */

.menuparent {
    display: initial;
}

.menuparent > * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 998;
}

.menuwrapper {
    position: fixed;
    right: -100%;
    height: 100%;
    width: 100%;
    background: var(--black);
    transition: all 0.3s ease-in-out;
    z-index: 999;
}

.menuwrapper > ul > li:nth-child(6) > a {
    color: var(--red);
}

#active:checked ~ .menuwrapper {
    right: 0;
}

.menu-btn {
    position: fixed; /* Ændret fra absolute til fixed */
    z-index: 1000;
    right: 2rem;
    top: 87%;
    height: 3.125rem;
    width: 3.125rem;
    text-align: center;
    line-height: 3.125rem;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background-color: #0a0a0aB3;
}

.menu-btn span, .menu-btn:before, .menu-btn:after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 30%;
    width: 40%;
    border-bottom: 2px solid var(--white);
    transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.menu-btn:before {
    transform: translateY(-8px);
}

.menu-btn:after {
    transform: translateY(8px);
}

.close {
width: 100%;
height: 100%;
pointer-events: none;
transition: background .3s;
}

#active:checked + .menu-btn span {
    transform: scaleX(0);
}

#active:checked + .menu-btn:before {
    transform: rotate(45deg);
}

#active:checked + .menu-btn:after {
    transform: rotate(-45deg);
}

.close {
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: background .3s;
}


.separatorline {
    display: flex;
    border: 2px solid var(--white);
  }

.menuwrapper ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 90%;
    left: 50%;
    height: 90%;
    transform: translate(-50%, -50%);
    list-style: none;
    text-align: center;
    width: calc(100% - 2rem);
    line-height: 3rem;
}

.menuwrapper ul li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hidden {
    display: none;
}

.menu2 {
    display: none;
}

/* MQ's */
@media screen and (min-width: 768px) {
    .menuparent {
        display: none;
    }

    /* Secondary Menu */

    .menu2 {
        display: unset;
        position: fixed;
        width: 100%;
        z-index: 1000;
        opacity: 100;
        animation: navgradient linear forwards;
        /* OBS !!!! THOMAS, ANDREA, EVERYONE !!! Dette validere ikke hos W3 pga. VARIABLER! MEN KODEN ER ALTSÅ FUNGERENDE OG KORREKT!*/
        animation-timeline: view();
        animation-range-start: 100vh;
        animation-range-end: 110vh;
    }

    .menu2 li:first-of-type img {
    display: flex;
    flex-direction: row;
    height: 100%;
    padding-left: 1rem;
    }
    
    .menuparent2 {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .menuparent2 > ul {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        font-size: 1.8rem;
        padding: 1rem 0 1rem 0;
        max-width: var(--maxwidth);
        line-height: 4.5rem;
        animation: navsize linear forwards;
        /* OBS !!!! THOMAS, ANDREA, EVERYONE !!! Dette validere ikke hos W3 pga. VARIABLER! MEN KODEN ER ALTSÅ FUNGERENDE OG KORREKT! Der er begrænset kompatibilitet for safari på ios, HVOR MENUEN ER SKJULT. Sååå <3*/
        /* Animation-timeline bliver her brugt til at animere menuen, efter hvor du er på skærmen, og ud fra scroll-event-listeners - det er i pipeline for Safari iOS. Experimental for nu. */
        animation-timeline: view();
        animation-range-start: 100vh;
        animation-range-end: 110vh;
    }

    .menuparent2 > ul > li {
        padding-top: 0.3rem;
    }


    .menuparent2 > ul > li:nth-child(5) > a {
        color: var(--red);
    }

    .menuparent2 > ul > li:nth-child(6) > a {
        color: var(--red);
    }
    .menu2ani {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .menu2ani * {
        box-sizing: border-box;
    }

    .menu2ani li {
        display: inline-block;
        list-style: outside none none;
    }


    .menu2ani a {
        padding: .3em .6em;
        position: relative;
        text-decoration: none;
    }

    #logominifix1 {
        padding: 0 0 0 0;
    }

    #logominifix2 {
        padding: 0 0 0 0;
    }

    .menu2ani a::before,
    .menu2ani a::after {
    content: '';
    height: 1rem;
    width: 1rem;
    position: absolute;
    transition: all .2s ease;
    opacity: 0;
    }

    .menu2ani a::before {
    content: '';
    right: 0;
    top: 0;
    border-top: 4px solid var(--white);
    border-right: 4px solid var(--white);
    transform: translate(-100%, 50%);
    }

    .menu2ani a:after {
    content: '';
    left: 0;
    bottom: 0;
    border-bottom: 4px solid var(--white);
    border-left: 4px solid var(--white);
    transform: translate(100%, -50%)
    }

    .menu2ani a:hover:before,
    .menu2ani a:hover:after{
    transform: translate(0,0);
    opacity: 1;
    }

    /* To choose specific border-color for kontak */

    .menu2ani > li:nth-child(1) > a:before {
        border-top: unset;
        border-right: unset;
    }
    
    .menu2ani > li:nth-child(1) > a:after {
        border-bottom: unset;
        border-left: unset;
    }

    .menu2ani > li:nth-child(1) > a:hover {
        color: var(--red);
    }
    

    .menu2ani > li:nth-child(5) > a:before {
        border-top: 4px solid var(--red);
        border-right: 4px solid var(--red);
    }
    
    .menu2ani > li:nth-child(5) > a:after {
        border-bottom: 4px solid var(--red);
        border-left: 4px solid var(--red);
    }

    .menu2ani > li:nth-child(5) > a:hover {
        color: var(--red);
    }
    
    .menu2ani > li:nth-child(6) > a:before {
        border-top: 4px solid var(--red);
        border-right: 4px solid var(--red);
    }
    
    .menu2ani > li:nth-child(6) > a:after {
        border-bottom: 4px solid var(--red);
        border-left: 4px solid var(--red);
    }

    .menu2ani > li:nth-child(6) > a:hover {
        color: var(--red);
    }

    @keyframes navgradient {
        100% {
            background:var(--black);
        }
    }

    @keyframes navsize {
        100% {
            line-height: 2rem;
            font-size: 1.5rem;
            }
    }
}

@media screen and (orientation: landscape) and (max-width: 768px) {
    .menuwrapper ul {
        top: 58%;
    }
    .menu-btn {
        right: 2rem;
        top: 78%;
    }
}