.container-menu{z-index:20;clip-path:polygon(97% 12%,97% 12%,97% 13%,97% 13%);background:#35353574;width:100%;height:100%;transition:display .4s cubic-bezier(.4,0,.2,1),clip-path .4s cubic-bezier(.4,0,.2,1),background-color .4s cubic-bezier(.4,0,.2,1);position:fixed;top:0;left:0}.active .container-menu{clip-path:polygon(101% -1%,101% 101%,-1% 101%,-1% -1%)}.menu{color:#fff;background-color:#0082c8;flex-direction:column;align-items:center;width:100%;font-size:28px;display:flex;overflow:hidden;box-shadow:0 0 #000}.options{flex-direction:column;align-items:center;margin:30px auto;transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;transform:scale(.8)}.option{cursor:pointer;margin:8px 0}.option.selected{color:#a02f56}.active .options{transform:scale(1)}.x{pointer-events:none;z-index:21;width:24px;height:24px;position:absolute;top:1.25rem;right:1.25rem}.top-bars{stroke:#fff;transition:stroke .4s cubic-bezier(.4,0,.2,1)}.active .top-bars{stroke:#f2f2f2}.bar{transition:transform .4s cubic-bezier(.4,0,.2,1)}.bar1{transform-origin:13px 2.5px}.bar2{transform-origin:11px 10.5px}.active .bar1{transform:translateY(8.6px)rotate(45deg)}.active .bar2{transform:rotate(-45deg)}.menu-click-area{cursor:pointer;opacity:.3;z-index:22;width:24px;height:24px;position:absolute;top:1.25rem;right:1.25rem}