:root{--color:#000;--animation:.6s;--scale:.5}.hamburger{transform:scale(var(--scale));-webkit-touch-callout:none;user-select:none;visibility:hidden;width:68px;height:68px;display:block;position:absolute;top:10px;right:10px}.path-burger{width:68px;height:68px;position:absolute;top:0;left:0;mask:url(#mask)}.animate-path{width:68px;height:68px;position:absolute;top:0;left:0}.path-rotation{transform-origin:100% 0;width:34px;height:34px;margin:34px 34px 0 0;transform:rotate(0)}.path-rotation:before{content:"";background:var(--color);width:30px;height:34px;margin:0 4px 0 0;display:block}@keyframes rotate-out{0%{transform:rotate(0)}40%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes rotate-in{0%{transform:rotate(360deg)}40%{transform:rotate(180deg)}to{transform:rotate(0)}}.hamburger.is-open .path{animation:dash-in var(--animation) linear normal;animation-fill-mode:forwards}.hamburger.is-open .animate-path{animation:rotate-in var(--animation) linear normal;animation-fill-mode:forwards}.hamburger.is-closed .path{animation:dash-out var(--animation) linear normal;animation-fill-mode:forwards}.hamburger.is-closed .animate-path{animation:rotate-out var(--animation) linear normal;animation-fill-mode:forwards}.path{stroke-dasharray:240;stroke-dashoffset:240px;stroke-linejoin:round}@keyframes dash-in{0%{stroke-dashoffset:240px}40%{stroke-dashoffset:240px}to{stroke-dashoffset:0}}@keyframes dash-out{0%{stroke-dashoffset:0}40%{stroke-dashoffset:240px}to{stroke-dashoffset:240px}}.burger-icon{width:68px;height:68px;padding:20px 16px;position:absolute}.burger-container{width:36px;height:28px;position:relative}.burger-bun-top,.burger-bun-bot,.burger-filling{background:var(--color);border-radius:2px;width:36px;height:4px;display:block;position:absolute}.burger-bun-top{transform-origin:34px 2px;top:0}.burger-bun-bot{transform-origin:34px 2px;bottom:0}.burger-filling{top:12px}.burger-ring{width:68px;height:68px;position:absolute;top:0;left:0}.svg-ring{width:68px;height:68px}.svg-ring path{stroke:#fff}.hamburger.is-open .burger-bun-top{animation:bun-top-out var(--animation) linear normal;animation-fill-mode:forwards}.hamburger.is-open .burger-bun-bot{animation:bun-bot-out var(--animation) linear normal;animation-fill-mode:forwards}.hamburger.is-closed .burger-bun-top{animation:bun-top-in var(--animation) linear normal;animation-fill-mode:forwards}.hamburger.is-closed .burger-bun-bot{animation:bun-bot-in var(--animation) linear normal;animation-fill-mode:forwards}@keyframes bun-top-out{0%{top:0;left:0;transform:rotate(0)}20%{top:0;left:0;transform:rotate(15deg)}80%{top:0;left:-5px;transform:rotate(-60deg)}to{top:1px;left:-5px;transform:rotate(-45deg)}}@keyframes bun-bot-out{0%{left:0;transform:rotate(0)}20%{left:0;transform:rotate(-15deg)}80%{left:-5px;transform:rotate(60deg)}to{left:-5px;transform:rotate(45deg)}}@keyframes bun-top-in{0%{bot:0;left:-5px;transform:rotate(-45deg)}20%{bot:0;left:-5px;transform:rotate(-60deg)}80%{bot:0;left:0;transform:rotate(15deg)}to{bot:1px;left:0;transform:rotate(0)}}@keyframes bun-bot-in{0%{left:-5px;transform:rotate(45deg)}20%{bot:0;left:-5px;transform:rotate(60deg)}80%{bot:0;left:0;transform:rotate(-15deg)}to{left:0;transform:rotate(0)}}.hamburger.is-open .burger-filling{animation:burger-fill-out var(--animation) linear normal;animation-fill-mode:forwards}.hamburger.is-closed .burger-filling{animation:burger-fill-in var(--animation) linear normal;animation-fill-mode:forwards}@keyframes burger-fill-in{0%{width:0;left:36px}40%{width:0;left:40px}80%{width:36px;left:-6px}to{width:36px;left:0}}@keyframes burger-fill-out{0%{width:36px;left:0}20%{width:42px;left:-6px}40%{width:0;left:40px}to{width:0;left:36px}}