@media screen and (min-width: 992px) {
    div#hermeshamburger, div.box-hamburger{
        display:none;
    }
}

@media screen and (min-width: 768px) and (max-width:992px) {
    div.box-hamburger {
        width:auto;
    }
}

div.flex-hamburger {
    display:flex;
    flex-direction:row;
    align-items: center;
    gap:12px;
}

div#hermeshamburger div.logo img {
    max-width:200px;
}

div.flex-hamburger > div.header_logo {
    flex-grow: 1;
}

div#hermeshamburger > button {
    border:1px solid transparent;
    padding:0.45rem;
    width:2.0em;
    background:#1e2022;
    font-size:1.25rem;
    border-radius:0.25em;
    color:white;
}

div#hermeshamburger > button:hover {
    color: var(--secondary);
    border: 1px solid var(--secondary);
    cursor: pointer;
    background-color: white;
}

div#hermeshamburger > div {
    display:block;
    visibility: hidden;
    position:fixed;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0);
    width:100%;
    height:100%;
    z-index:1000;
    transition: all ease-in-out 0.3s;
}

div#hermeshamburger > nav {
    position:fixed;
    top:0;
    left:0;
    width:auto;
    height:100%;
    padding:1rem;
    background:white;
    z-index:1001;
    transform: translate(-100%, 0);
    box-shadow: none;
    transition: all ease-in-out 0.3s;
}

div#hermeshamburger > nav.on {
    transform: translate(0, 0);
    box-shadow: 0 0 24px rgba(0, 0, 0, .3);
    overflow-y: auto;
}

div#hermeshamburger > nav.on + div {
    display:block;
    visibility: visible;
    background-color:rgba(0,0,0,0.3);
}

div#hermeshamburger > nav > div.logo {
    display:flex;
    flex-direction: row;
    gap:18px;
    align-items: center;
}

div#hermeshamburger > nav > div.logo a {
    flex-grow:1;
}

div#hermeshamburger > nav > div.logo button {
    background:transparent;
    border:none;
    font-size: 1.8rem;
}

div#hermeshamburger > nav > div.logo button:hover {
    color:red;
    cursor:pointer;
}

div#hermeshamburger > nav div.menu > p,
div#hermeshamburger > nav div.page > p {
    font-size:0.8rem;
    color:#999999;
    padding-bottom:8px;
    margin:0 0 8px;
    border-bottom:1px dashed #bcbcbc;
}

div#hermeshamburger > nav div.menu > ul,
div#hermeshamburger > nav div.page > ul {
    /* margin-left:12px; */
    margin-bottom:0;
}

div#hermeshamburger > nav div.page {
    margin-top:24px;
    padding-bottom:12px;
}

/* div#hermeshamburger > nav div.menu a span {
    display:none;
} */

div#hermeshamburger > nav div.menu {
    margin-top:25px;
}

div#hermeshamburger > nav div.menu ul li a,
div#hermeshamburger > nav div.page ul li a {
    display:flex;
    font-size:1.0rem;
    color:#333333;
    align-items:center;
    width:fit-content;
}

div#hermeshamburger > nav div.menu ul li a > span,
div#hermeshamburger > nav div.page ul li a > span {
    display:inline-block;
    line-height:1.8rem;
}

div#hermeshamburger > nav div.menu ul li ul li ul li a > span {
    line-height:1.8rem;
}

div#hermeshamburger > nav div.menu ul li a:hover,
div#hermeshamburger > nav div.page ul li a:hover {
    color:var(--secondary);
}

div#hermeshamburger > nav div.menu > ul li a > img {
    max-width: 36px;
    height:100%;
    filter:invert(100%);
}

div#hermeshamburger > nav div.menu > ul li.brand a > img,
div#hermeshamburger > nav div.menu > ul li.blog a > img {
    transform: scale(0.8);
}

div#hermeshamburger > nav div.menu > ul li ul a > img {
    filter:none;
}

div#hermeshamburger > nav div.menu ul li a button {
    /* display: none; */
    background:none;
    border:none;
    border:1px solid #dedede;
    width:24px;
    height:24px;
    border-radius:4px;
    text-align: center;
    margin-left:8px;
}

div#hermeshamburger > nav div.menu ul li a button:hover {
    cursor:pointer;
    color:var(--secondary);
    border-color: var(--secondary);
}

div#hermeshamburger > nav div.menu ul li a button:before { 
    content:"\002B"; 
}

div#hermeshamburger > nav div.menu ul li a.expand button:before {
    content:"\2212";
}

div#hermeshamburger > nav div.menu ul li a.expand + ul {
    display:block;
}

div#hermeshamburger > nav div.menu ul li {
    align-items: center;
}

div#hermeshamburger > nav div.menu ul li ul {
    display:none;
    width:100%;
    margin-left:32px;
    /* margin-bottom:18px; */
}

div#hermeshamburger > nav div.menu ul li ul li ul {
    margin-left:36px;
}

/* search widget */

div#hermeshamburger > nav > div.search {
    display:none;
}

@media (max-width: 768px) {
    div#hermeshamburger > nav > div.search {
        margin-top:20px;
        display:block;
    } 
}