.menu nav{z-index:99;background:#c1efff;flex-direction:column;justify-content:center;align-items:center;width:100%;height:-webkit-fill-available;font-weight:700;transition:all .5s;display:flex;position:fixed;top:0;left:100%}.menu nav ul,.menu nav .container{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.menu nav .menu-item,.menu nav .menu-link{margin-bottom:.5rem;font-size:1.5rem}.menu nav .button{margin-top:.5rem;padding:.5rem 3rem}.menu nav .main-link{font-size:1.75rem}@media only screen and (min-width:768px){.menu nav{height:fit-content;padding:1rem 0;left:0%}.menu nav .container,.menu nav ul{flex-direction:row;justify-content:space-between;align-items:center}.menu nav ul{gap:2rem}.menu nav .menu-item,.menu nav .menu-link{margin-bottom:0}.menu nav .button{margin-top:0}.menu nav li .menu-link,.menu nav .main-link{font-size:1.5rem;position:relative}.menu nav li .menu-link:before,.menu nav .main-link:before{content:"";background:#000;width:0;height:2px;transition:all .5s ease-in-out;position:absolute;bottom:-2px;left:0}.menu nav li .menu-link:hover:before,.menu nav .main-link:hover:before{width:100%}}.menu.active nav{left:0%}.menu .cross{z-index:100;cursor:pointer;background:#fff;border-radius:.25rem;width:calc(30px + .5rem);height:calc(25px + .5rem);margin:.5rem;padding:.5rem;position:fixed;top:0;right:0}.menu .cross .line{background:#000;width:30px;height:2px;transition:all .5s;position:absolute}.menu .cross .line:first-child{top:.5rem;left:50%;transform:translate(-50%,-50%)}.menu .cross .line:nth-child(2){top:calc(12px + .25rem);left:50%;transform:translate(-50%,-50%)}.menu .cross .line:nth-child(3){bottom:.4rem;left:50%;transform:translate(-50%,-50%)}@media only screen and (min-width:768px){.menu .cross{display:none}}.menu.active .cross .line:first-child{animation:.3s ease-in-out forwards topLine}.menu.active .cross .line:nth-child(2){width:0}.menu.active .cross .line:nth-child(3){animation:.3s ease-in-out forwards bottomLine}@keyframes topLine{0%{top:3px;left:50%;transform:translate(-50%,-50%)}50%{top:50%;left:50%;transform:translate(-50%,-50%)}to{top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}}@keyframes bottomLine{0%{bottom:-1px;left:50%;transform:translate(-50%,-50%)}50%{top:50%;left:50%;transform:translate(-50%,-50%)}to{top:50%;left:50%;transform:translate(-50%,-50%)rotate(-45deg)}}