menu.css

.menu {
    margin-top: 2vw;
    margin-right: -3vw
}

#navn {
    font-family: Helvetica Neue;
}

a#gallery,
a#oplevelser,
a#produktudvikling,
a#om,
a#kontakt {
    text-decoration: none;
    color: white;
}

#navn {
    color: white;
    margin-top: 1.1vh;
    font-size: 2em;
}

#menuContainer {
    list-style: none;
    margin: 0;
    margin-top: 6vh;
    padding: 0;
    font-weight: bold;
}

li.menuItems {
    /*    padding: 5px;*/
    cursor: pointer;
    padding-left: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}

#logoWrapper {
    display: none
}

.bar1,
.bar2,
.bar3 {
    position: relative;
    left: 87vw;
    width: 35px;
    height: 5px;
    background: #fff;
    margin: 6px 0;
    /*    transition: 0.4s;*/
}

nav {
    padding: 0;
    z-index: 99999;
    position: fixed;
    width: 100vw;
    max-height: 0px;
    overflow: hidden;
    /*    transition: 0.6s;*/
}


/* Rotate first bar */

.change .bar1 {
    transform: rotate(-45deg) translate(-9px, 6px);
}


/* Fade out the second bar */

.change .bar2 {
    opacity: 0;
}


/* Rotate last bar */

.change .bar3 {
    transform: rotate(45deg) translate(-8px, -8px);
}

#instaLink {
    display: none;
}

nav.show {
    max-height: 500px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.burger {
    padding: 0;
    /*    display: inline-block;*/
    cursor: pointer;
    background: none;
    border: none;
    position: fixed;
    width: 100vw;
    background: rgba(0, 0, 0, 0.5);
    /*    z-index: 99999;*/
    display: flex;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
}


/********************   DESKTOP  *****************************/

@media (min-width: 1024px) {
    .burger {
        display: none !important;
    }
    nav {
        height: 10vh;
        width: 100vw;
        /*        border: pink 2px dotted;*/
        max-height: 10vh;
        background: rgba(0, 0, 0, 0.5);
        left: 0;
        top: 0;
        overflow: visible;
    }
    /*
    nav a {
        width: 10vw;
    }*/
    nav.show {
        max-height: 1vh;
    }
    nav a:hover {
        color: orange;
    }
    #menuContainer {
        width: 100vw;
        display: flex;
        height: 100%;
        padding: 0;
        margin: 0;
        flex-direction: row;
        position: relative;
        left: 0vw;
        bottom: 0vh;
        top: 0;
        right: 0;
        justify-content: flex-end;
        align-items: center;
    }
    .menuItems {
        margin-right: 2vh;
        font-size: 1.4em;
    }
    #logoWrapper {
        /*        border: 1px green solid;*/
        width: 10vh;
        height: 10vh;
        margin: 0;
        position: absolute;
        display: block;
    }
    #logoLink {
        height: 100%;
        width: 100%;
    }
    #instaLink {
        display: block;
        margin-left: 10vh;
        margin-right: 3vh;
    }
    #logo {
        background-image: url(imgs/andersRaadGlasLogo.png);
        background-size: contain;
        /*        background-repeat: no-repeat;*/
        cursor: pointer;
        height: 100%;
    }
    #instaItem {
        /*        height: 100%;*/
        /*        width: 100%;*/
    }
    #instagram {
        /*        background-image: url(imgs/instagram_pic.png);*/
        /*        filter: invert();*/
        cursor: pointer;
        height: 4vh;
        width: 4vh;
    }
}