body:not(.preload) #mobilenav {
    /*transition: transform 0.3s ease;*/
    transition: transform .2s, box-shadow .2s .1s;
}

#mobilenav {
    position: fixed;

    pointer-events: none;
    bottom: 0;
    right: 0;
    width: 360px; max-width: calc(100% - 20px);
    height: calc(100% - 80px); overflow: auto;

    height: 100%;  padding-top: 10px;
    /*padding: 20px;*/
    background: #FFF;

    transform: translateX(100%);
    box-shadow:none;
    display: flex; flex-direction: column;
    z-index: 200;
}







    body.navshown #mobilenav {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);

        box-shadow: -8px 0 8px rgba(0, 0, 0, 0.3);

    }

@media all and (max-width: 599px) {
    #mobilenav {
    width: calc(100% - 20px);
    }
}


#navclose { padding: 20px 24px 20px 40px; font-size:36px; text-align: right}
#navclose span { width: 0; height: 0; overflow: hidden; font-size: 0; pointer-events: none;
    position: fixed; top: -100px;}
#navclose::before {
    content:"\00D7";
}



#mobilenav>nav.nav  {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.6);
}


#mobilenav>nav.nav::-webkit-scrollbar { width: 5px; background-color: rgba(255,255,255,0.3); }
#mobilenav>nav.nav::-webkit-scrollbar-thumb  { background-color: rgba(0,0,0,0.6);	}









#mobilenav>nav.nav>ul li { font-size: 16px; line-height: 1.2; display: flex; flex-wrap: wrap;
    /*font-weight: 600;*/
    font-weight: 700;
    border-bottom: 1px solid #DCD5BE; margin: 0;  }
#mobilenav>nav.nav>ul:first-of-type li:first-child {  border-top: 1px solid #DCD5BE;   }

#mobilenav>nav.nav>ul>li a { color: #30312C   }

/*#mobilenav>nav.nav>ul>li:hover,
#mobilenav>nav.nav>ul>li:active*/
 #mobilenav>nav.nav>ul>li a:hover,
#mobilenav>nav.nav>ul>li a:active,
 #mobilenav>nav.nav>ul>li a:hover+span,
 #mobilenav>nav.nav>ul>li a:active+span
{ background: #A89769; background: rgba(176, 159, 107, 0.2);  /*  color: white;*/  }

/*#mobilenav>nav.nav>ul>li a:hover,
#mobilenav>nav.nav>ul>li a:active ,
#mobilenav>nav.nav>ul>li:hover a,
#mobilenav>nav.nav>ul>li:active a
{ background: #A89769; color: white;   }*/


#mobilenav>nav.nav>ul li>ul { width: 100%; background: rgba(176, 159, 107, 0.1); border-bottom: none;}
#mobilenav>nav.nav>ul li>ul>li:last-child {   border-bottom: none;}



#mobilenav>nav.nav>ul li>a{   padding: 1.25em 40px 1em;  flex:1;      }

#mobilenav>nav.nav>ul li ul li a {  padding-left: 60px;  }
#mobilenav>nav.nav>ul li ul li ul li a {  padding-left: 80px;  }





#mobilenav>nav.nav li>span { display: flex; justify-content: space-between;
    z-index: 12;  align-items: center; height:2.4em; height:3.6em; /*transition: background 0.2s ease;*/ }

#mobilenav>nav.nav>ul>li.opensub>span {  }




#mobilenav>nav.nav>ul>li span>b{ display: block; /*padding:1.5em 1em 1.5em;*/ box-sizing: content-box; width: 3em; height: 3em;   border-right:10px solid transparent;  position: relative;   }
#mobilenav>nav.nav>ul>li span>b::before,
#mobilenav>nav.nav>ul>li span>b::after { content:""; display: block; position: absolute;background: #30312C; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all 0.2s ease; }

#mobilenav>nav.nav>ul>li span>b::before { height:1px; width: 1.5em;  }
#mobilenav>nav.nav>ul>li span>b::after { height:1.5em; width: 1px; }

#mobilenav>nav.nav>ul li.opensub>span>b::before {transform: translate(-50%,-50%) rotate(90deg); opacity: 0;}
#mobilenav>nav.nav>ul li.opensub>span>b::after {transform: translate(-50%,-50%) rotate(90deg);}


#mobilenav>nav.nav li>span:hover { transform: scale(1.2); }
/*#mobilenav>nav.nav li>span:hover>b::before { height:3px;  }
#mobilenav>nav.nav li>span:hover>b::after { width: 3px; }*/