:root{--circular-menu-unit-degree: 72deg;--circular-menu-rotation-offset: -162deg}.circular-menu li{list-style:none;display:inline}.circular-menu a{display:block;text-align:center;text-decoration:none;color:#fff;box-sizing:border-box}.circular-menu{position:absolute;transition:transform 1.25s}.circular-menu ul{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.circular-menu a{transition:transform 1.25s;position:relative}:root{--circular-menu-radius: 8.25rem;--bar-mode-height: 2.25rem}.circular-menu{border-radius:50%}.circular-menu a{width:5rem;height:5rem;line-height:5rem;margin:-2.5rem;-moz-border-radius:2.5rem;-webkit-border-radius:2.5rem;border-radius:2.5rem}@keyframes circularize{0%{border-radius:.5rem;width:3.5rem;height:2.25rem;line-height:2.25rem}to{border-radius:2.5rem;height:5rem;line-height:5rem;width:5rem}}@keyframes boxerize{0%{border-radius:2.5rem;height:5rem;line-height:5rem;width:5rem}to{border-radius:.5rem;width:3.5rem;height:2.25rem;line-height:2.25rem}}@media (width >= 48rem){:root{--circular-menu-radius: 16.5rem;--bar-mode-height: 4rem}.circular-menu{border-radius:50%}.circular-menu a{width:8rem;height:8rem;line-height:8rem;margin:-4rem;-moz-border-radius:4rem;-webkit-border-radius:4rem;border-radius:4rem}@keyframes circularize{0%{border-radius:1rem;height:4rem;width:4rem;line-height:4rem}to{border-radius:4rem;height:8rem;width:8rem;line-height:8rem}}@keyframes boxerize{0%{border-radius:4rem;height:8rem;line-height:8rem}to{border-radius:1rem;height:4rem;line-height:4rem}}}.circular-menu a.home{background:purple;opacity:0;transition:opacity 1s}.circular-menu a.one{background:#009cde;opacity:.6}.circular-menu a.two{background:#3a913f;opacity:.6}.circular-menu a.three{background:#fecd06;opacity:.6}.circular-menu a.four{background:#fa7f00;opacity:.6}.circular-menu a.five{background:#ed2124;opacity:.6}.circular-menu a.one:hover{background:#009cde;opacity:1}.circular-menu a.two:hover{background:#3a913f;opacity:1}.circular-menu a.three:hover{background:#fecd06;opacity:1}.circular-menu a.four:hover{background:#fa7f00;opacity:1}.circular-menu a.five:hover{background:#ed2124;opacity:1}.circular-menu.circle-mode a{animation:circularize 1.2s cubic-bezier(.3,.2,.2,1.4) forwards}.circular-menu.circle-mode a.one{transform:rotate(calc(var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-1 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)));-webkit-transform:rotate(calc(var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-1 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)));-ms-transform:rotate(calc(var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-1 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)))}.circular-menu.circle-mode a.two{transform:rotate(calc(2 * var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-2 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)));-webkit-transform:rotate(calc(2 * var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-2 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)));-ms-transform:rotate(calc(2 * var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-2 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)))}.circular-menu.circle-mode a.three{transform:rotate(calc(3 * var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-3 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)));-webkit-transform:rotate(calc(3 * var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-3 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)));-ms-transform:rotate(calc(3 * var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-3 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)))}.circular-menu.circle-mode a.four{transform:rotate(calc(4 * var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-4 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)));-webkit-transform:rotate(calc(4 * var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-4 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)));-ms-transform:rotate(calc(4 * var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-4 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)))}.circular-menu.circle-mode a.five{transform:rotate(calc(5 * var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-5 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)));-webkit-transform:rotate(calc(5 * var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(calc(-5 * var(--circular-menu-unit-degree) - var(--circular-menu-rotation-offset)));-ms-transform:rotate(calc(5 * var(--circular-menu-unit-degree) + var(--circular-menu-rotation-offset))) translate(var(--circular-menu-radius)) rotate(-255eg)}.circular-menu.bar-mode{transform:translateY(-44vh);-webkit-transform:translate(0,-44vh);-ms-transform:translate(0,-44vh)}.circular-menu.bar-mode a{animation:boxerize 1.2s cubic-bezier(.3,.2,.2,1.4) forwards}.circular-menu.bar-mode a.home{opacity:1;transform:translate(-45vw);-webkit-transform:translate(-45vw);-ms-transform:translate(-45vw)}.circular-menu.bar-mode a.one{transform:translate(9vw);-webkit-transform:translate(9vw);-ms-transform:translate(9vw)}.circular-menu.bar-mode a.five{transform:translate(-9vw);-webkit-transform:translate(-9vw);-ms-transform:translate(-9vw)}.circular-menu.bar-mode a.two{transform:translate(45vw);-webkit-transform:translate(45vw);-ms-transform:translate(45vw)}.circular-menu.bar-mode a.three{transform:translate(calc(1.5 * 90vw/5));-webkit-transform:translate(calc(1.5 * 90vw/5));-ms-transform:translate(18vw)}.circular-menu.bar-mode a.four{transform:translate(calc(-1.5 * 90vw/5));-webkit-transform:translate(calc(-1.5 * 90vw/5));-ms-transform:translate(calc(-1.5 * 90vw/5))}