.menu__backdrop  {
    position:  fixed;
    top:  0;
    right:  0;
    height:  100vh;
    width:  100vw;
    z-index:  99995;
    background-color:  rgba(0, 0, 0, 0.5);
    transition:  opacity .4s ease-in-out;
    opacity:  0;
    transform:  translateX(100%);
    visibility:  hidden;
}
.menu__backdrop.active  {
    opacity:  1;
    transform:  translateX(0);
    visibility:  visible;
}
.menu  {
    position:  fixed;
    z-index:  99996;
    right:  0;
    top:  0;
    height:  100vh;
    width:  auto;
    max-width:  100%;
    background-color:  white;
    transform:  translateX(100%);
    transition:  all .5s ease-in;
}
.menu.active  {
    transform:  translateX(0);
}
.menu__container  {
    display:  flex;
    height:  100vh;
    width:  auto;
}
.menu__close-btn  {
    display:  flex;
    justify-content:  center;
    align-items:  center;
    position:  absolute;
    top:  0;
    right:  0;
    height:  60px;
    width:  60px;
    background-color:  #998542;
    color:  white;
    font-size:  20px;
    cursor:  pointer;
    z-index:  5;
}
.menu__level  {
    display:  flex;
    position:  relative;
    height:  100%;
    width:  100%;
    overflow-x:  hidden;
    background-color:  white;
    transition:  all .5s ease-in;
    max-width:  0;
    opacity:  0;
}
.menu__level::after  {
    content:  '';
    top:  0;
    left:  0;
    width:  1px;
    height:  100%;
    position:  absolute;
    background-color:  whitesmoke;
}
.menu__level.active  {
    max-width:  1000px;
    opacity:  1;
}
.menu__level.active.closed  {
    max-width:  200px;
    opacity:  0.5;
    transition:  all .4s ease-in;
}
.menu__level.closed:hover  {
    max-width:  300px;
    opacity:  1;
}
.menu__level.level-x  {
    position:  absolute;
    top:  0;
    left:  0;
}
.menu__level-container  {
    overflow-y:  auto;
    overflow-x:  hidden;
    padding:  24px 136px 24px 64px;
    width:  100%;
}
.menu__back-btn  {
    display:  flex;
    align-items:  center;
    background-color:  transparent;
    border:  none;
    padding:  0;
    margin-bottom:  16px;
    margin-top:  40px;
    cursor:  pointer;
    color:  #998542;
}
.menu__back-btn .material-symbols-outlined  {
    margin-left:  -8px;
}
.menu__primary-heading  {
    font-family:  'GT-Ultra-Median';
    font-size:  24px;
    font-weight:  400;
}
.menu__level-1-heading  {
    margin-top:  41px;
    white-space:  nowrap;
}
.menu__level-list  {
    display:  flex;
    flex-direction:  column;
    margin-bottom:  48px;
}
.menu__level-list-item:hover .menu__level-list-text  {
    border-bottom:  solid 1px #173f35;
}
.menu__level-list-item  {
    position:  relative;
    display:  flex;
    justify-content:  space-between;
    align-items:  center;
    text-decoration:  none;
    margin:  8px 0;
    cursor:  pointer;
    font-family:  'Activ-Grotesk-Bold';
    font-size:  14px;
    font-weight:  500;
    min-width:  302px;
    background-color:  transparent;
    border:  none;
    padding:  0;
    min-height:  25px;
    white-space:  nowrap;
}
.menu__level-list-item *  {
    display:  flex;
    justify-content:  center;
    align-items:  center;
}
.menu__level-list-item.active,  .menu__level-list-item.current-sector  {
    color:  #998542;
}
.menu__level-list-item.active:hover .menu__level-list-text,  .menu__level-list-item.current-sector:hover .menu__level-list-text  {
    border-bottom:  solid 1px #998542;
}
.menu__level-list-item-container  {
    display:  flex;
    align-items:  center;
}
.menu__level-list-item--sectors  {
    position:  relative;
    display:  flex;
    justify-content:  space-between;
    align-items:  center;
    text-decoration:  none;
    margin:  8px 0;
    cursor:  pointer;
    font-family:  'Activ-Grotesk-Bold';
    font-size:  14px;
    font-weight:  500;
    min-width:  302px;
    background-color:  transparent;
    border:  none;
    padding:  0;
    min-height:  25px;
    white-space:  nowrap;
    width:  100%;
}
.menu__level-list-item--sectors > *  {
    display:  flex;
    justify-content:  space-between;
    align-items:  center;
    cursor:  pointer;
}
.menu__level-list-text  {
    border-bottom:  solid 1px transparent;
    transition:  border-bottom .4s ease;
}
.menu__level-icon:not(.menu__level-icon.active)  {
    transform:  translateX(5px);
}
.menu__icon  {
    margin-right:  8px;
    margin-left:  -4px;
    color:  #998542;
    font-size:  14px;
    font-weight:  500;
}
.menu__hr  {
    background-color:  #eeeeee;
    height:  2px;
    width:  100%;
    border:  none;
}
@media (max-width: 800px)  {
    .menu__container  {
    position:  relative;
    width:  100vw;
}
.menu__level  {
    position:  absolute;
}
.menu__level.active  {
    max-width:  100%;
}
.menu__level.active.closed  {
    max-width:  100%;
}
.menu__level.closed:hover  {
    max-width:  100%;
}
.menu__level.level-1  {
    z-index:  1;
}
.menu__level.level-2  {
    z-index:  2;
}
.menu__level.level-3  {
    z-index:  3;
}
.menu__level.level-4  {
    z-index:  4;
}
.menu__level.level-x  {
    z-index:  10;
}
}