.menu { position: fixed; bottom: -2px; left: 0; width: 100%; height: auto; z-index: 2; overflow: visible; transition: transform 0.3s; } .tuyau { position: fixed; bottom: -2px; right: 3vw; width: 8%; min-width: 6.3vmax; height: auto; z-index: 2; cursor: pointer; transition: transform 0.3s; overflow: visible; } .menu-link use { transition: transform 50ms; transform-origin: center; } .menu-link.menu-bottom-line use { transform-origin: bottom; } .menu-link text { transition: transform 50ms; } .menu .menu-link:hover text { fill: #FFDC00; transform: translateY(-1px); } .menu-link:hover use { transform: scaleY(1.1); } .menu svg { overflow: visible; } .mobile-menu { display: block; position: fixed; top: 0; left: 0; overflow: hidden; width: 100%; z-index: 20; height: 0; background: rgba(15, 15, 23, 0); transition: background-color 0.2s linear; } .mobile-menu .containerF3g { width: 100%; height: 100%; overflow: auto; } .mobile-grid { display: flex; flex-wrap: wrap; padding: 2vh 60px; min-height: 100vh; justify-content: center; align-content: center; } .mobile-menu-link { min-width: 100px; width: 50%; display: block; opacity: 0; cursor: pointer; transform: translateY(10%); transition: transform 0.2s ease-out, opacity 0.2s linear 0.05s; } nav.mobile-menu.open .mobile-menu-link { transform: translateY(0); opacity: 1; } .menu-link:hover text { fill: #FFDC00; } .mobile-brick { display: block; } span.close-mobile-menu { color: #FFF; font-size: 80px; display: block; position: absolute; -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ cursor: pointer; bottom: 0; right: 20px; transition: color 0.5s; } span.close-mobile-menu:hover { color: #FFDC00; }