/* menu navigation */

#page-nav {
    text-align: right;
    position: relative; /* so we can do an absolute child */
    font-size: 87.5%;
}

#page-nav label,
#hamburger {
    display: none;
}

/* main menu items */

#page-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#page-nav li {
    /* styling regardless of mode */
    margin: 0;
    padding: 5px 10px;
    box-sizing: border-box;
}

#page-nav > ul > li {
    /* when wide display, no hamburger */
    display: inline-block;
}

/* sub-menu */

#page-nav li ul {
    display: none;
    text-align: left;
    z-index: 100;
    background: #fff;
}

#page-nav li:hover ul {
    display: block;
    position: absolute;
}

#page-nav li li {
    display: block;
}

/* when display narrow, hamburger */
@media screen and (max-width: 905px) {
    #page-nav label {
        display: inline-block;
        font-style: normal;
        font-size: 30px;
        line-height: 18px;
        text-align: center;
        position: relative;
        top: -3px;
    }

    #page-nav ul {
        /* styling */
        text-align: left;
        position: absolute;
        right: 10%;
        border: 1px solid #c0c0c0;
        border-radius: 5px;
        background: #fff;
        z-index: 100;
        margin-top: 0;

        /* when input not checked */
        display: none;
    }
    #page-nav input:checked ~ ul {
        /* when input checked */
        display: block;
    }

    #page-nav > ul > li {
        display: block;
    }

    /* sub-menu */
    #page-nav li:hover ul {
        display: block;
        left: 20%;
    }
}