/* ===========================
   PMA MODAL MENU
   =========================== */

/* Hide checkbox */
.toggle {
    position:absolute;
    left:-999em;
}

/* Burger icon */

#pma-burger {
    display: block;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25em;
    z-index: 99999;
}

/* Two-line burger */
#pma-burger:before,
#pma-burger:after {
    content:"";
    display:block;
    width:1.5em;
    height:0.25em;
    border:solid #fffaf1;
    border-width:0.2em 0;
    cursor:pointer;
}

#pma-burger:after {
    border-top:0;
}

#mainMenu {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.4;
}

#mainMenu nav ul li a {
    font-size: 1.1rem;
    font-weight: 600;
}

#mainMenu nav > label:first-child {
    cursor:pointer;
}

/* Modal overlay */
#mainMenu {
    position:fixed;
    left:-100vw;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.55);
    box-shadow:inset 0 0 128px 128px rgba(0,0,0,0.5);
    opacity:0;
    transition:opacity 0.5s, left 0s 0.5s;
}

/* Centering container */
#mainMenu > div {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:100%;
    padding:1em;
}

/* Inner menu box */
#mainMenu nav {
    position:relative;
    top:-50vh;
    overflow:hidden;
    max-width:26em;
    background:#fffaf1;
    border:2px solid #78336A;
    border-radius:0.5em;
    transition:top 0.5s;
}

/* Title bar */
#mainMenu nav:before {
    content:"Menu";
    display:block;
    padding:0.5em 0.75em;
    font-weight:bold;
    background:#78336A;
    color:#fffaf1;
}

/* Close X */
#mainMenu nav > label:first-child:before {
    content:"X";
    position:absolute;
    font-size:1.5em;
    top:0.2em;
    right:0.4em;
    color:#fffaf1;
}

/* Menu list */
#mainMenu ul {
    display:flex;
    flex-wrap:wrap;
    gap: 0.2em 0.35em;
    padding:0.5em;
    list-style:none;
}

#mainMenu li {
    width:46.5%;
    padding:0.25em;
    list-style:none;
}

#mainMenu a {
    display:block;
    padding:0.75em;
    background:#f3e7d9;
    color:#451638;
    text-decoration:none;
    font-weight:600;
    border-radius:0.25em;
    text-align:center;
}

#mainMenu a:hover {
    background:#e8d8c7;
}

/* OPEN STATE */
#toggle_mainMenu:checked ~ #mainMenu {
    left:0;
    opacity:1;
    transition:opacity 0.5s, left 0s;
}

#toggle_mainMenu:checked ~ #mainMenu nav {
    top:0;
}

@media (max-width: 480px) {
    #mainMenu nav {
        max-width: 90%;
        width: 90%;
        border-width: 1px;
    }

    #mainMenu nav > label:first-child:before {
        font-size: 1.2em;
        right: 0.3em;
        top: 0.15em;
    }

    #mainMenu ul {
        padding: 0.25em;
    }

    #mainMenu li {
        width: 46%;
        padding: 0.2em;
    }

    #mainMenu a {
        padding: 0.6em;
        font-size: 1rem;
    }
    
    #mainMenu {
    position: fixed;
    left: 0 !important;
    top: 0;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}
	#mainMenu > div {
    width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}


}