nav{position:absolute;right:0;top:0;z-index:1000;padding:0 10rem}.nav-big,nav{display:flex;width:100%}.nav-small{display:none;margin-top:2rem;width:100%;justify-content:space-between}.nav-small img{margin-right:auto}.nav__line-container{display:flex;width:5rem;height:5rem;border-radius:50%;flex-direction:column;justify-content:space-evenly;align-items:center;padding:1rem;background:#d0ffdb;background:radial-gradient(circle,#f0ebb2 0,#decb8c 100%);cursor:pointer;position:relative}.nav__line-container.active .line:first-child{transform:translateY(180%) rotate(45deg)}.nav__line-container.active .line:nth-child(2){opacity:0}.nav__line-container.active .line:nth-child(3){transform:translateY(-170%) rotate(135deg)}.nav__line-container .line{width:3rem;height:.5rem;background-color:#000;border-radius:1rem;transition:all .4s}.nav-small ul{background-color:#fff;list-style:none;position:absolute;transform:scale(0);opacity:0;visibility:hidden;transition:all .4s;right:2rem;top:3rem;z-index:-1;width:50%;transform-origin:top right;text-align:center;border-radius:1rem;background-image:linear-gradient(to right top,#2b696e,#235556,#1c4241,#142f2d,#0c1e1b);font-size:26px;padding:2rem}.nav-small ul a{color:#fff}.nav-small ul li{margin:1.5rem}.nav-small ul.active{transform:scale(1);visibility:visible;opacity:1}.nav-small a{text-decoration:none}.nav-big img{margin-top:1.5rem;margin-right:auto}.nav-big ul{display:flex;width:100%;list-style:none;font-size:22px;color:#fff;margin-top:2rem}.nav-big ul a{color:inherit;width:300px;height:60px;text-decoration:none;text-transform:uppercase;background-color:transparent;text-align:center;line-height:60px;font-weight:700;letter-spacing:2px;position:relative;transition:all .2s;color:#fff;padding:1rem;margin-right:3rem;font-size:18px}.nav-big ul a:before{content:"";position:absolute;top:-3px;left:-3px;width:100%;height:100%;background-color:var(--primary);z-index:-1;mix-blend-mode:multiply;transition:all .2s;transform-origin:top;border-radius:5px}.nav-big ul a:hover:before{top:-6px;left:0;transform:perspective(1000px) rotateX(75deg)}.nav-big ul a:after{content:"";position:absolute;top:3px;left:3px;width:100%;height:100%;background-color:var(--secondary);z-index:-1;mix-blend-mode:multiply;transition:all .2s;transform-origin:bottom;border-radius:5px}.nav-big ul a:hover:after{top:6px;left:0;transform:perspective(1000px) rotateX(-75deg)}@media only screen and (max-width:1399.98px){nav{padding:0 5rem}}@media only screen and (max-width:1199.98px){.nav-big{display:none}.nav-small{display:flex;position:relative}}@media only screen and (max-width:991.98px){.nav-small ul{width:70%}}@media only screen and (max-width:575.98px){.nav-small ul{width:90%}nav{padding:0 1rem}}