#menu {
    position: absolute;
    left: 0%; top: 0; width: 100%; height: 100%;
    background-color: rgba(0, 66, 55, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform-origin: left top;
    transform-origin: top;
    /* background-image: url(../testbg.jpg); */
    /* background-size: cover; */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
    opacity: 0;
    z-index: 100;
}

body.menu #menu {
    animation: menu_open calc(var(--transition-duration) * 1) ease-out both;
}

body:not(.menu) #menu {
    animation: menu_close calc(var(--transition-duration) * 1) ease-out both;
}

/* @keyframes menu_open {
    0% { transform: translate3d(0,-110%,-100px); opacity: 1; }
    50% { transform: translate3d(0,-8%,-100px); opacity: 1; }
    100% { transform: translate3d(0,0%,0px); opacity: 1; }
}

@keyframes menu_close {
    0% { transform: translate3d(0,0%,0px); opacity: 1; }
    30% { transform: translate3d(0,-8%,-100px); opacity: 1; }
    100% { transform: translate3d(0,-110%,-100px); opacity: 1; }
} */

@keyframes menu_open {
    0% { transform: translate(0,-110%) scale(0.95); opacity: 1; border-radius: 2rem; }
    50% { transform: translate(0,-3%) scale(0.95); opacity: 1; border-radius: 2rem; }
    100% { transform: translate(0,0%) scale(1); opacity: 1; border-radius: 0rem; }
}

@keyframes menu_close {
    0% { transform: translate(0,0%) scale(1); opacity: 1; border-radius: 0rem; }
    30% { transform: translate(0,-3%) scale(0.95); opacity: 1; border-radius: 2rem; }
    100% { transform: translate(0,-110%) scale(0.95); opacity: 1; border-radius: 2rem; }
}


#menu .top_menu {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 11rem;
    /* background-color: rgba(0,0,0,0.2); */
    background-color: rgb(21, 63, 55, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2;
}

body.menu #menu .top_menu {
    /* backdrop-filter: blur(20px); */
    /* -webkit-backdrop-filter: blur(20px); */
}

#menu .top_menu .logo {
    position: absolute;
    left: 3.5rem; top: 50%; transform: translateY(-50%); width: auto; height: 7rem;
}

@media (width < 960px) { 
    #menu .top_menu .logo {
        left: 2rem; top: 1rem; transform: none; width: auto; height: 5rem;
    }
}

#menu .top_menu button.close {
    position: absolute;
    right: 3.5rem; top: 50%; transform: translateY(-50%); width: 4rem; height: 4rem;
    background-image: url(images/icon_menu_close.svg);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
}

@media (width < 960px) { 
    #menu .top_menu button.close {
        right: 2rem; top: 2rem; transform: none; width: 3rem; height: 3rem;
    }
}

#menu .tabs {
    position: absolute;
    left: 50%; top: 0; transform: translateX(-50%); height: 100%; 
    width: 40rem;
    /* background-color: rgba(0,0,0,0.1); */
    display: flex;
    flex-direction: row;

}

@media (width < 960px) { 
    #menu .tabs {
        left: 2rem; top: auto; transform: none; bottom: 0; height: 40%; 
    }
}

#menu .tabs button {
    /* width: 100%; */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2.4rem;
    font-weight: lighter;
    color: white;
    padding: 0 1.6rem;
    border-style: solid;
    border-color: transparent;
    border-bottom-width: 2px;
    transition: border-color var(--transition-duration);
}

@media (width < 960px) { 
    #menu .tabs button {
        font-size: 1.8rem;
    }
}

#menu .tabs .select_line {
    position: absolute;
    left: 33.3%; top: 100%; width: 33.3%; height: 0.1rem;
    background-color: white;
    transition: left var(--transition-duration);
    display: none;
}

/* body.menu_list #menu .tabs .select_line { left: 0 } */
/* body.menu_plan #menu .tabs .select_line { left: 69% } */
/* body.menu_map #menu .tabs .select_line { left: 66.9% } */
/* body.menu_info #menu .tabs .select_line { left: 37% } */

body.menu_list #menu .tabs button[menu='list'] { border-color: #fff; }
body.menu_plan #menu .tabs button[menu='plan']  { border-color: #fff; }
/* body.menu_map #menu .tabs .select_line { left: 66.9% } */
body.menu_info #menu .tabs button[menu='info']  { border-color: #fff; }

#menu .tabs_stage {
    position: absolute;
    left: 0; top: 0; width: 100%; bottom: 0;
    overflow: hidden;
    z-index: 1;
}

#menu .tabs_bar {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: visible;
    transition: left var(--transition-duration);
}

body.menu_list #menu .tabs_bar { left: 0; }
body.menu_plan #menu .tabs_bar { left: -200%; }
/* body.menu_map #menu .tabs_bar { left: -200%; } */
body.menu_info #menu .tabs_bar { left: -100%; }

#menu .tabs_bar .tab {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    overflow: hidden;
    /* background-image: url(../testbg.jpg); */
    /* background-size: 100%; */
}

#menu .tabs_bar .tab.list { left: 0; }
#menu .tabs_bar .tab.plan { left: 200%; }
/* #menu .tabs_bar .tab.map { left: 200%; } */
#menu .tabs_bar .tab.info { left: 100%; }


#menu .tabs_bar .tab.plan #plan {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0;
}

/* #menu .tabs_bar .tab.map #map {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0;
} */

#menu .tabs_bar .tab.info #info {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0;
}