.guten-nav-menu * {
    transition: background-color .4s ease 0s, border .4s ease 0s, border-radius .4s ease 0s, box-shadow .4s ease 0s, color .4s ease 0s, height .4s ease 0s
}

.guten-nav-menu .gutenverse-hamburger-wrapper {
    display: flex
}

.guten-nav-menu .gutenverse-hamburger-menu {
    background-color: var(--guten-border-color);
    border: 1px solid var(--guten-border-color);
    color: var(--guten-base-color);
    cursor: pointer;
    display: none;
    padding: 25px 40px;
    z-index: 100
}

.guten-nav-menu .gutenverse-menu-wrapper {
    z-index: 1000
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-nav-identity-panel .gutenverse-nav-site-title {
    display: none
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-nav-identity-panel .gutenverse-nav-site-title .gutenverse-nav-logo {
    display: block;
    margin: 5px 0;
    padding: 5px
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-nav-identity-panel .gutenverse-nav-site-title .gutenverse-nav-logo img {
    height: auto;
    width: 120px
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-nav-identity-panel .gutenverse-close-menu {
    background: var(--guten-border-color);
    border: 1px solid var(--guten-border-color);
    border-radius: 3px;
    color: var(--guten-base-color);
    cursor: pointer;
    display: none;
    float: right;
    margin: 12px;
    padding: 8px;
    position: relative;
    width: 45px;
    z-index: 10
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu,
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>ul {
    align-items: center;
    display: flex;
    list-style: none;
    margin: 0;
    padding-left: 0
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>li,
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>ul>li {
    list-style: none;
    margin: 0;
    padding: 0
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>li>a,
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>ul>li>a {
    align-items: center;
    color: #707070;
    display: flex;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: normal;
    padding: 0 15px;
    text-decoration: none;
    text-transform: none;
    transition: all .4s ease
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li,
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>ul li {
    display: flex;
    position: relative
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li a,
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>ul li a {
    color: #000;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    justify-content: space-between;
    padding: 15px;
    width: 100%
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children .sub-menu,
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>ul li.menu-item-has-children .sub-menu {
    background: var(--guten-bg-color);
    box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
    left: 0;
    margin: 0;
    max-height: none;
    position: absolute;
    top: 100%
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children:hover>.sub-menu,
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>ul li.menu-item-has-children:hover>.sub-menu {
    opacity: 1;
    visibility: visible
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children>a .gutenverse-icon-svg,
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children>a i,
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>ul li.menu-item-has-children>a .gutenverse-icon-svg,
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>ul li.menu-item-has-children>a i {
    align-items: center;
    cursor: pointer;
    display: flex;
    margin-left: 5px
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu .sub-menu,
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>ul .sub-menu {
    border-radius: 0 0 0 0;
    list-style: none;
    opacity: 0;
    padding: 0;
    transition: all .4s ease;
    visibility: hidden;
    z-index: 1000
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu .sub-menu>li>.sub-menu,
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu>ul .sub-menu>li>.sub-menu {
    left: 100%;
    top: 0
}

@keyframes slideLeftToRight {
    0% {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes slideRightToLeft {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}