@media (min-width: 851px) {
    .mobile-nav-wrapper {
        display: none;
    }
    .mobile-menu{
        display: none;
    }


}
@media (max-width: 850px){
    div#mobile-menu{
        display: flex;
        align-items: center;
    }
    .language-dropdown{
        display: none !important;
    }
    .mobile-nav-wrapper {
        position: absolute;
        width: 100vw;
        height: calc(100vh - var(--header-height));
        transition: transform 0.3s;
        transform: translateX(100%);
        top: calc(var(--header-height) + 1px);
    }
    .mobile-nav-wrapper.show-menu {
        transform: none;
    }
    .mobile-nav-wrapper nav {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #ffffff;
    }
    .mobile-nav-wrapper nav .nav-toggle {
        position: relative;
        top: 48px;
        left: 0;
        width: 100%;
        padding: 10px 24px;
        color: #fff;
        z-index: 100;
        cursor: pointer;
        transition: backgroun-color 0.2s;
        align-items: baseline;
    }

    .mobile-nav-wrapper nav .nav-toggle.back-visible .nav-back {
        opacity: 1;
    }
    .mobile-nav-wrapper nav .nav-toggle.back-visible .nav-title {
        transform: translateX(2px);
    }
    .mobile-nav-wrapper nav .nav-title {
        position: relative;
        left: 0;
        top: 0;
        padding-left: 0;
        transition: transform 0.3s;
        font-size: 18px;
        font-family: var(--font-primary-bold);
        text-transform: uppercase;
        color: var(--color-black);
    }
    .mobile-nav-wrapper nav .nav-back {
        display: inline-block;
        position: relative;
        width: 30px;
        height: 18px;
        vertical-align: middle;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .mobile-nav-wrapper nav .nav-back:before, .mobile-nav-wrapper nav .nav-back:before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-37%) rotate(180deg);
        transition: transform 0.3s;
        transform-origin: center;
        color: var(--color-black);
        width: 20px;
        height: 18px;
        /* background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="34.022" height="30.922" viewBox="0 0 34.022 30.922"><g transform="translate(0 1.207)"><line x2="33.607" transform="translate(0 14.254)" fill="none" stroke="%23fff" stroke-miterlimit="10" stroke-width="1"/><path d="M79.017,29.569,93.271,15.315,79.017,1.061Z" transform="translate(-59.956 -1.061)" fill="none" stroke="%23fff" stroke-miterlimit="10" stroke-width="1"/></g></svg>); */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17.118" height="15.418" viewBox="0 0 17.118 15.418"><path d="M-6394.242-11545.924l-.636-1.359,13.577-6.35-13.577-6.35.636-1.359,16.482,7.709-1.453.68Z" transform="translate(6394.877 11561.342)" fill="%23232323"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        flex-grow: 0;
        flex-shrink: 0;
        background-size: 16px;
        /* right: 24px; */
    }
    .mobile-nav-wrapper nav .nav-back:after {
        left: 28%;
        width: 15px;
        height: 2px;
        background-color: currentcolor;
        margin-top: -1px;
    }
    .mobile-nav-wrapper nav a {
        display: block;
        position: relative;
        padding: 10px 0;
        margin-bottom: 18px;
        border-bottom: 0px solid #eee;
        color: var(--color-black);
        text-decoration: none;
        text-transform: uppercase;
        transition: color 0.15s, background-color 0.15s;
        font-size: var(--navigation-header-font-size);
        line-height: var(--navigation-header-line-height);
        font-family: var(--font-primary-bold);

    }
    .mobile-nav-wrapper nav a:hover {
        color: var(--color-black);
    }
    .mobile-nav-wrapper nav ul {
        list-style: none;
        padding: 48px 24px 0;
        transition: transform 0.3s;
        background-color: #ffffff;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }

    .mobile-nav-wrapper .mobile-navigation.active-back-visible ul {
        padding: 116px 24px 0;
    }

    .mobile-nav-wrapper nav ul ul {
        display: none;
        left: 100%;
    }
    .mobile-nav-wrapper nav li.has-dropdown > a {
        padding-right: 2.5em;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .mobile-nav-wrapper nav li > a:after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-90%);
        transition: transform 0.3s;
        transform-origin: 100%;
        color: var(--color-black);
        width: 36px;
        height: 22px;
        /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="34.022" height="30.922" viewBox="0 0 34.022 30.922"><g transform="translate(0 1.207)"><line x2="33.607" transform="translate(0 14.254)" fill="none" stroke="%23fff" stroke-miterlimit="10" stroke-width="1"/><path d="M79.017,29.569,93.271,15.315,79.017,1.061Z" transform="translate(-59.956 -1.061)" fill="none" stroke="%23fff" stroke-miterlimit="10" stroke-width="1"/></g></svg>');*/
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17.118" height="15.418" viewBox="0 0 17.118 15.418"><path d="M-6394.242-11545.924l-.636-1.359,13.577-6.35-13.577-6.35.636-1.359,16.482,7.709-1.453.68Z" transform="translate(6394.877 11561.342)" fill="%23232323"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        flex-grow: 0;
        flex-shrink: 0;
        background-size: 16px;
        right: 24px;
    }

    .mobile-nav-wrapper nav li > a.menu-item-no-arrow:after{
        display: none;
    }


    .mobile-nav-wrapper nav li ul{
        display: none;
    }

    .mobile-nav-wrapper nav li.has-dropdown.nav-dropdown-open.nav-dropdown-active ul {
        display: block;
    }

    .mobile-nav-wrapper nav li.has-dropdown.nav-dropdown-open.nav-dropdown-active ul li ul {
        display: none;
    }

    .mobile-nav-wrapper nav ul li.has-dropdown.nav-dropdown-open.nav-dropdown-active ul li.has-dropdown.nav-dropdown-open.nav-dropdown-active ul {
        display: block;
    }

    .nav-toggle{
        display: none;
    }

    .nav-toggle.back-visible{
        display: flex;
    }

}