@media only screen and (max-width: 768px) {
    :root {
        --header-height: 125px;
    }
    html.menu-open {
        overflow:hidden;
    }
    #hamburger {
        display:inline-block;
        width: 25px;
        height: 20px;
        position: absolute;
        top: 28px;
        right:20px;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #hamburger span {
        background: #4d4d4d;
        height: 4px;
        width: 100%;
        border-radius: 4px;
        transition: all 0.8s;
        opacity: 1;
        transform-origin: 1px;
    }
    nav, nav .sub-menu {
        height:calc(100vh - var(--header-height));
        background:#FFF;
        position:absolute;
        width:0px;
        top:var(--header-height);
        left:-100vw;
        box-sizing: border-box;
        padding: 0px 20px;
        transition: all 0.8s ease;
    }
    nav .sub-menu {
        top: 0px;
        padding: 0px;
        border: none;
    }
    html.menu-open nav, nav .sub-menu.open {
        width:100%;
        left:0px;
    }
    html.menu-open #hamburger span:nth-child(1) {
        transform: rotate(45deg);
    }
    html.menu-open #hamburger span:nth-child(2) {
        opacity: 0;
    }
    html.menu-open #hamburger span:nth-child(3) {
        transform: rotate(-45deg);
    }
    nav li, nav ul li ul li {
        border-bottom: 1px solid #4d4d4d;
        padding: 0px;
    }
    nav li:last-child, nav ul li ul li:last-child {
        border-bottom:none;
    }
    nav li a {
        padding: 15px 0px;
        display:block;
    }
    nav ul li ul {
        top:0px;
        margin-left:0px;
        background:#FFFFFF;
        width:calc(100vw - 40px);
        display:block;
        transition: all 0.8s ease;
        z-index:5;
    }
    nav ul li ul a {
        padding:10px 0px;
    }
    nav a:hover::after {
        display: none;
    }
    nav li.parent > a {
        display:flex;
        justify-content: space-between;
    }
    nav li.parent > a::after, nav li.back > a::before {
        content: ">";
        width:auto;
        height:auto;
        background:none;
    }
    nav li.back > a::before {
        content: "<";
        padding-right:10px;
    }
}