#main-menu ul,
#main-menu li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#main-menu a {
    display: block;
    color: inherit;
    text-decoration: none;
}

#main-menu a:hover {
    color: var(--main-color);
}

#main-menu nav > ul > li.menu-item-has-children input[type=radio] {
    display: none;
}

#main-menu nav > ul > li.menu-item-has-children {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#main-menu nav > ul > li.menu-item-has-children label {
    margin: 0;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: block;
    content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M313.999,239.787l-83.492,-83.493c-8.983,-8.982 -23.49,-8.982 -32.472,0c-8.983,8.983 -8.983,23.489 -0,32.472l67.279,67.234l-67.279,67.234c-8.983,8.983 -8.983,23.489 -0,32.472c8.982,8.982 23.489,8.982 32.472,-0l83.492,-83.493c8.937,-8.937 8.937,-23.489 -0,-32.426Z" style="fill-rule:nonzero;"/></svg>');
}

#main-menu nav > ul > li > ul > li > ul > li > a {
    padding-left: 1rem;
}

#open-nav {
    display: none;
}

@media only screen and (min-width: 961px) {
    #main-menu nav > ul {
        display: flex;
        justify-content: center;
    }

    #main-menu nav > ul > li {
        padding: 0 1rem;
        position: relative;
    }

    #main-menu nav > ul > li > a {
        padding: 0.75rem 0;
    }

    #main-menu nav > ul > li.menu-item-has-children label {
        transform: rotate(90deg);
    }

    #main-menu nav > ul > li.menu-item-has-children > ul {
        z-index: 2;
        overflow: hidden;
        position: absolute;
        background: #fff;
        top: 2.5rem;
        padding: 1rem 1.25rem;
        opacity: 0;
        visibility: hidden;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease-in-out;
        min-width: 200px;
        width: max-content;
    }

    #main-menu nav > ul > li.menu-item-has-children:hover > ul {
        opacity: 1;
        visibility: visible;
    }

    #main-menu nav > ul > li > ul > li > a,
    #main-menu nav > ul > li > ul > li > ul > li > a {
        padding: 0.25rem 0;
    }
}

@media only screen and (max-width: 960px) {
    #top-head .content-box {
        flex-wrap: wrap;
    }

    #main-menu {
        width: 100%;
        display: none;
    }

    #open-nav + label {
        height: 38px;
        width: 38px;
        padding: 10px;
        background: var(--main-color);
        border-radius: 50%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        margin: 0;
        cursor: pointer;
        position: relative;
    }

    #open-nav + label span {
        position: relative;
        display: block;
        height: 2px;
        background: #2B6684;
        color: #fff;
        opacity: 1;
        border-radius: 3px;
        transition: .3s ease-in-out;
    }

    #open-nav:checked + label span:nth-child(1) {
        top: 50%;
        margin-top: -1px;
        transform: rotate(135deg);
    }

    #open-nav:checked + label span:nth-child(3) {
        bottom: 50%;
        margin-bottom: -1px;
        transform: rotate(-135deg);
    }

    #open-nav:checked + label span:nth-child(2) {
        opacity: 0;
    }

    #open-nav:checked + label + #main-menu {
        display: block;
    }

    #main-menu nav > ul > li {
        border-bottom: solid 1px #ddd;
    }

    #main-menu nav > ul > li:last-of-type {
        border-bottom: none;
    }

    #main-menu nav > ul > li > a {
        padding: 0.75rem 0;
    }

    #main-menu nav > ul > li.menu-item-has-children {
        flex-wrap: wrap;
    }

    #main-menu nav > ul > li.menu-item-has-children > a {
        width: calc(100% - 3rem);
    }

    #main-menu nav > ul > li.menu-item-has-children > ul,
    #main-menu nav > ul > li > ul > li.menu-item-has-children > ul {
        width: 100%;
        padding-left: 1rem;
    }

    #main-menu nav > ul > li > ul > li > a,
    #main-menu nav > ul > li > ul > li > ul > li > a {
        padding: 0.4rem 0;
    }

    #main-menu nav > ul > li > ul > li:last-of-type > a,
    #main-menu nav > ul > li > ul > li > ul > li:last-of-type > a {
        padding-bottom: 0.75rem;
    }

    #main-menu nav > ul > li.menu-item-has-children input[type="radio"] ~ ul {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all .8s ease-in-out;
    }

    #main-menu nav > ul > li.menu-item-has-children input[type="radio"]:checked ~ ul {
        opacity: 1;
        max-height: 1000px;
    }
}