:root{--menu-animation-duration:0.3s}.menu-wrapper{width:60px;transition:all var(--menu-animation-duration) ease;overflow-x:hidden;overflow-y:hidden}.menu-wrapper:hover{width:200px}.manu-button{display:flex;padding:.75rem;transition:all var(--menu-animation-duration) ease;color:#fff}.manu-button:hover{background-color:hsla(0,0%,100%,.1)}.icon-only{margin-right:-10px}.icon-only,.menu-text{transition:all var(--menu-animation-duration) ease;color:#fff}.menu-text{opacity:0;max-width:0;overflow:hidden;white-space:nowrap;margin-left:10px}.menu-wrapper:hover .menu-text{opacity:1;max-width:320px}.menu-wrapper:hover .icon-only{margin-right:0;opacity:1}.menu-background-svg{opacity:0;transition:opacity var(--menu-animation-duration) ease-out}.menu-wrapper:hover .menu-background-svg{opacity:1}.menu-logo-wrapper{transition:background-color var(--menu-animation-duration) ease-out;background-color:transparent}.menu-wrapper:hover .menu-logo-wrapper{background-color:#f5f7f9}.logo_manu{justify-content:center;opacity:0;max-width:0;transition:all var(--menu-animation-duration) ease;margin-left:10px;margin-bottom:0;margin-top:-10px}.small_logo_manu{opacity:1;max-width:180px;transition:all var(--menu-animation-duration);margin-bottom:10px}.menu-wrapper:hover .logo_manu{opacity:1;max-width:150px;margin-bottom:4px}.menu-wrapper:hover .small_logo_manu{opacity:0;max-width:0}@media (max-width:768px){.menu-wrapper{width:200px}.menu-text{opacity:1;max-width:120px}.icon-only{margin-right:0}.logo_manu{opacity:1;max-width:150px}.small_logo_manu{opacity:0;max-width:20px}}