/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

/* Handles menu appearance & behavior. Ingrained with menu_trigger.js */

#menu {
    z-index: 100;  /* Bring menu in front of everything, except menu-trigger button */
    position: fixed;

    pointer-events: none;  /* To click "through". Is set to "auto" (enabled) when menu opened to scroll & click. .menu-trigger has pointer-events set to auto.*/
}

#menu-clickable-area {
    /* background: red;
    opacity: 0.5; */
    right: 0.5em;
    top: 0.5em;
    width: 3em;
    height: 3em;
    position: fixed;
    margin: auto;
    z-index: 200;
    pointer-events: auto;
    cursor: pointer;
}

/* -- Menu items (switches) -- */
.menu-items {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: none;
    pointer-events: auto;
}

#menu .menu-items.is-open {
    position: fixed;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    height: 100vh; 
    height: calc(var(--vh, 1vh) * 100); /* Fix Safari */ 
    width: 100vw;

    overflow-y: auto;

    background: rgba(255, 255, 255, 0.95);
    text-align: left;
    
    font-size: calc(1.7vw + 1.5vh);
}
#menu .menu-items.is-open > ul {
    padding-top: 2em;
    padding-left: 2.1em;
    padding-bottom: 1em;
}

/* #menu .menu-items.is-open li {
    margin: 47px 0;
} */
#menu .menu-items.is-open h4 {
    font-size: 3em;
}


/* -- Hamburger menubar (.menu-trigger) -- */
#menu .menu-trigger {
    position: fixed;
    z-index: 101;

    top: 2em;
    right: 1em;

    width: 33px;
    /* height: 13px; */

    pointer-events: auto;
    cursor: pointer;
}

#menu .menu-trigger span,
#menu .menu-trigger span:before,
#menu .menu-trigger span:after {
    display: block;
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.75);
    -webkit-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 18%;
}

#menu .menu-trigger span {
    position: relative;
}

#menu .menu-trigger span:before,
#menu .menu-trigger span:after {
    position: absolute;
    content: "";
}
#menu .menu-trigger span:before {
    top: -10px;
}
#menu .menu-trigger span:after {
    top: 10px;
}
/* When menu is opened: cross the 1st and 3rd bar (to make an X), make 2nd transparent */
#menu .menu-trigger.is-open span {
    background: transparent;
}
#menu .menu-trigger.is-open span:before {
    -webkit-transform: translate(0, 10px) rotate(-45deg);
    -ms-transform: translate(0, 10px) rotate(-45deg);
        transform: translate(0, 10px) rotate(-45deg);
}
#menu .menu-trigger.is-open span:after {
    -webkit-transform: translate(0, -10px) rotate(45deg);
    -ms-transform: translate(0, -10px) rotate(45deg);
        transform: translate(0, -10px) rotate(45deg);
}

#contact {
    display: block;
    right: 0.5em;
    /* left: 0em; */
    bottom: 0.5em;
    position: fixed;
}

#contact a {
    opacity: 0.3;
    font-size: 0.8em;
    color: black;
    text-decoration: none;
}

/* -- Some responsive stuff -- */
/* On bigger screens - make menu button bigger */
@media screen and (orientation: landscape) and (max-height: 600px) {
    #menu .menu-trigger {
        -webkit-transform: scale(1.5);
            -ms-transform: scale(1.5);
                transform: scale(1.5);
        top: 3em;
        right: 2em;
    }
    #menu-clickable-area {
        -webkit-transform: scale(1.5);
            -ms-transform: scale(1.5);
                transform: scale(1.5);
        top: 1.5em;
        right: 1.5em;
    }
    #menu .menu-items.is-open {
        font-size: calc(1vw + 1.5vh);
        padding-left: 1.25em;
    }
}


@media screen and (min-width: 799px) and (min-height: 600px)
{
    #menu .menu-trigger {
        -webkit-transform: scale(1.5);
            -ms-transform: scale(1.5);
                transform: scale(1.5);
        top: 3em;
        right: 2em;
    }
    #menu-clickable-area {
        -webkit-transform: scale(1.5);
            -ms-transform: scale(1.5);
                transform: scale(1.5);
        top: 1.5em;
        right: 1.5em;
    }
}

@media screen and (min-width: 945px) {
    #menu .menu-items.is-open {
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        font-size: calc(0.8vw + 1.9vh);
    }
    #menu .menu-items.is-open > ul {
        text-align: -webkit-right;
        text-align: right;
        margin-right: 4em;
        margin-top: -5em;
        padding-top: 6em;
    }
    #menu .menu-items.is-open li {
        margin: 47px 0;
    }
    .tgl+.tgl-btn {
        margin-right: 3em;
        margin-top: 1em;
        margin-left: auto;
    }
    #contact {
        right: 0;
        left: 0.5em;
        bottom: 0.5em;
    }
}