ul.menu { position: relative; margin: 0; padding: 0; list-style: none; }
ul.menu ul { position: relative; margin: 0; padding: 0; list-style: none; }
ul.menu a { display: block; padding: 6px 12px; text-decoration: none; }
ul.menu > li { position: relative; display: inline-block; }
#mainmenu { position: fixed; bottom: 50px; left: 0; right: 0; z-index: 900; display: flex; flex-flow: column; align-items: center; pointer-events: none; overflow: hidden; padding-top: 50px; --bulletHeight: 92px; --bulletWidht: 86%; color: #000; view-transition-name: mainmenu; }
@media (max-width: 1023px) {
    #mainmenu { bottom: 25px; --bulletHeight: 78px; --bulletWidht: 250px; }
}
@media (max-width: 659px) {
    #mainmenu { --bulletHeight: 62px; --bulletWidht: 180px; }
}
@keyframes jump {
    0% { height: var(--bulletHeight); opacity: 0; }
    30% { opacity: 1; }
    80% { height: 105%; }
    100% { height: 100%; }
}
@keyframes jumpInit {
    0% { height: 100%; width: 100%; }
    100% { height: var(--bulletHeight); width: var(--bulletWidht); }
}
.resp-menu { display: flex; flex-flow: column; position: relative; }
.resp-menu ul.mod-menu { margin: 0; padding: 10px 20px; text-align: center; list-style-type: none; position: relative; z-index: 303; transform: translateY(200%); transition: transform 0s; transition-delay: 0.5s; pointer-events: auto; }
.resp-menu ul.mod-menu:before { border-radius: 44px; background: #D4FF26; content: ""; position: absolute; right: 0; left: 0; margin-left: auto; margin-right: auto; bottom: 0; width: 100%; height: 0%; animation: jumpInit 0.4s ease forwards; }
.resp-menu ul.mod-menu > .nav-item { opacity: 0; position: relative; z-index: 3; padding-bottom: 10px; transition: opacity 0.1s; }
.resp-menu ul.mod-menu > .nav-item > a { font-size: 34px; padding: 10px 28px; display: block; text-transform: uppercase; }
.resp-menu ul.mod-menu > .nav-item > a:hover { text-decoration: none; }
.resp-menu ul.mod-menu > .pill { border-radius: 40px; transition: opacity 0.1s; left: 20px; right: 20px; position: absolute; pointer-events: none; mix-blend-mode: difference; transform: translateY(800%); transition: top 0.2s, opacity 0.1s, transform 0s 0.4s; opacity: 0; height: 59px; z-index: 3; background: #D4FF26; }
@media (max-width: 659px) {
    .resp-menu ul.mod-menu { padding: 10px; }
    .resp-menu ul.mod-menu:before { border-radius: 33px; }
    .resp-menu ul.mod-menu > .nav-item { padding-bottom: 0; }
    .resp-menu ul.mod-menu > .nav-item > a { font-size: 24px; }
    .resp-menu ul.mod-menu > .pill { height: 48px; left: 10px; right: 10px; }
}
.resp-menu input, .resp-menu label { display: none; position: relative; }
.resp-menu.open ul.mod-menu { transform: translateY(0%); transition-delay: 0s; }
.resp-menu.open ul.mod-menu:before { animation: jump 0.5s cubic-bezier(0.37, 0.08, 0.25, 1.29) forwards; }
.resp-menu.open ul.mod-menu > .nav-item { opacity: 1; transition: opacity 0.4s 0.2s; }
.resp-menu.open ul.mod-menu > .pill { opacity: 1; transform: translateY(0%); transition: top 0.2s, transform 0.2s 0.1s; }
#toggle-main-menu { display: block; position: absolute; bottom: 0; left: 0; right: 0; font-family: inherit; color: inherit; -webkit-appearance: none; appearance: none; background: none; border: none; outline: none; padding: 8px; margin: 0 auto; z-index: 305; display: flex; justify-content: space-between; align-items: center; background: #D4FF26; border-radius: 44px; overflow: hidden; max-height: 100%; cursor: pointer; pointer-events: auto; width: var(--bulletWidht); opacity: 1; transition: width 0.4s, opacity 0.3s 0.2s; }
#toggle-main-menu .menu-ball { background: #000; border-radius: 50%; width: 76px; height: 76px; position: relative; display: flex; flex-flow: column; justify-content: center; align-items: center; }
#toggle-main-menu .menu-ball .line { width: 24px; height: 4px; margin: 3px 0; background: #D4FF26; transition: margin 0.4s; }
#toggle-main-menu .label { text-transform: uppercase; font-size: 34px; margin-left: auto; margin-right: auto; }
#toggle-main-menu:hover { width: 100%; }
#toggle-main-menu:hover .line { margin: 5px 0; transition: margin 0.4s; }
#toggle-main-menu.open { width: 100%; opacity: 0; pointer-events: none; transition: width 0.4s, opacity 0.3s; }
#toggle-main-menu.open .line { margin: 5px 0; transition: margin 0.4s; }
@media (max-width: 1400px) {
    #toggle-main-menu { width: 250px; }
    #toggle-main-menu .label { font-size: 28px; }
    #toggle-main-menu .menu-ball { width: 62px; height: 62px; }
}
@media (max-width: 659px) {
    #toggle-main-menu { width: 180px; padding: 5px; }
    #toggle-main-menu .label { font-size: 23px; }
    #toggle-main-menu .menu-ball { width: 52px; height: 52px; }
    #toggle-main-menu .menu-ball .line { width: 16px; height: 3px; margin: 3px 0; background: #D4FF26; transition: margin 0.4s; }
}