Lm1lbnUgbGkgYTo6YmVmb3JlIHsKICBjb250ZW50OiAnJzsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgd2lkdGg6IDIwcHg7CiAgaGVpZ2h0OiAycHg7CiAgYmFja2dyb3VuZDogI2ZmZjsKICBib3JkZXItcmFkaXVzOiAycHg7CiAgLW1vei1ib3JkZXItcmFkaXVzOiAycHg7CiAgLXdlYmtpdC1ib3JkZXItcmFkaXVzOiAycHg7CiAgdHJhbnNmb3JtOiByb3RhdGUoY2FsYyh2YXIoLS1pKSAqIDkwZGVnKSkgdHJhbnNsYXRlKDAsIDI1cHgpOwogIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoY2FsYyh2YXIoLS1pKSAqIDkwZGVnKSkgdHJhbnNsYXRlKDAsIDI1cHgpOwogIC1tb3otdHJhbnNmb3JtOiByb3RhdGUoY2FsYyh2YXIoLS1pKSAqIDkwZGVnKSkgdHJhbnNsYXRlKDAsIDI1cHgpOwogIC1tcy10cmFuc2Zvcm06IHJvdGF0ZShjYWxjKHZhcigtLWkpICogOTBkZWcpKSB0cmFuc2xhdGUoMCwgMjVweCk7CiAgLW8tdHJhbnNmb3JtOiByb3RhdGUoY2FsYyh2YXIoLS1pKSAqIDkwZGVnKSkgdHJhbnNsYXRlKDAsIDI1cHgpOwogIHRyYW5zaXRpb246IGhlaWdodCAwLjVzLCB3aWR0aCAwLjVzLCB0cmFuc2Zvcm0gMC41czsKICAtd2Via2l0LXRyYW5zaXRpb246IGhlaWdodCAwLjVzLCB3aWR0aCAwLjVzLCB0cmFuc2Zvcm0gMC41czsKICAtbW96LXRyYW5zaXRpb246IGhlaWdodCAwLjVzLCB3aWR0aCAwLjVzLCB0cmFuc2Zvcm0gMC41czsKICAtbXMtdHJhbnNpdGlvbjogaGVpZ2h0IDAuNXMsIHdpZHRoIDAuNXMsIHRyYW5zZm9ybSAwLjVzOwogIC1vLXRyYW5zaXRpb246IGhlaWdodCAwLjVzLCB3aWR0aCAwLjVzLCB0cmFuc2Zvcm0gMC41czsKICB0cmFuc2l0aW9uLWRlbGF5OiAwcywgMC41cywgMHM7Cn0KCi5tZW51LmFjdGl2ZSBsaSBhOjpiZWZvcmUgewogIGhlaWdodDogNjBweDsKICBib3JkZXI6IDJweCBzb2xpZCB2YXIoLS1jbHIpOwogIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50OwogIHotaW5kZXg6IDEwOwogIGJvcmRlci1yYWRpdXM6IDUwJTsKICAtbW96LWJvcmRlci1yYWRpdXM6IDUwJTsKICAtd2Via2l0LWJvcmRlci1yYWRpdXM6IDUwJTsKICB0cmFuc2Zvcm06IHJvdGF0ZShjYWxjKHZhcigtLWkpICogOTBkZWcpKSB0cmFuc2xhdGUoMHB4LCAwcHgpOwogIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoY2FsYyh2YXIoLS1pKSAqIDkwZGVnKSkgdHJhbnNsYXRlKDBweCwgMHB4KTsKICAtbW96LXRyYW5zZm9ybTogcm90YXRlKGNhbGModmFyKC0taSkgKiA5MGRlZykpIHRyYW5zbGF0ZSgwcHgsIDBweCk7CiAgLW1zLXRyYW5zZm9ybTogcm90YXRlKGNhbGModmFyKC0taSkgKiA5MGRlZykpIHRyYW5zbGF0ZSgwcHgsIDBweCk7CiAgLW8tdHJhbnNmb3JtOiByb3RhdGUoY2FsYyh2YXIoLS1pKSAqIDkwZGVnKSkgdHJhbnNsYXRlKDBweCwgMHB4KTsKICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC41cywgaGVpZ2h0IDAuNXMsIHdpZHRoIDAuNXM7CiAgLXdlYmtpdC10cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC41cywgaGVpZ2h0IDAuNXMsIHdpZHRoIDAuNXM7CiAgLW1vei10cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC41cywgaGVpZ2h0IDAuNXMsIHdpZHRoIDAuNXM7CiAgLW1zLXRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjVzLCBoZWlnaHQgMC41cywgd2lkdGggMC41czsKICAtby10cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC41cywgaGVpZ2h0IDAuNXMsIHdpZHRoIDAuNXM7CiAgdHJhbnNpdGlvbi1kZWxheTogMXMsIDEuNXMsIDEuNXM7CiAgcm90YXRlOiAxMzVkZWc7Cn0KCi5tZW51LmFjdGl2ZSBsaTpob3ZlciBhOjpiZWZvcmUgewogIGJhY2tncm91bmQ6IHZhcigtLWNscik7CiAgY29sb3I6ICNmZmY7CiAgYm94LXNoYWRvdzogMCAxMHB4IHZhcigtLWNsciksIDAgMCAzMHB4IHZhcigtLWNsciksIDAgMCA1MHB4IHZhcigtLWNscik7Cn0KCi5tZW51IGxpOjphZnRlciB7CiAgY29udGVudDogJyc7CiAgcG9zaXRpb246IGFic29sdXRlOwogIGxlZnQ6IDMwcHg7CiAgd2lkdGg6IDIwcHg7CiAgaGVpZ2h0OiAycHg7CiAgYmFja2dyb3VuZDogI2ZmZjsKICB0cmFuc2Zvcm06IHJvdGF0ZShjYWxjKHZhcigtLWkpICogLTkwZGVnKSkgdHJhbnNsYXRlKDE1cHgsIDBweCk7CiAgLXdlYmtpdC10cmFuc2Zvcm06IHJvdGF0ZShjYWxjKHZhcigtLWkpICogLTkwZGVnKSkgdHJhbnNsYXRlKDE1cHgsIDBweCk7CiAgLW1vei10cmFuc2Zvcm06IHJvdGF0ZShjYWxjKHZhcigtLWkpICogLTkwZGVnKSkgdHJhbnNsYXRlKDE1cHgsIDBweCk7CiAgLW1zLXRyYW5zZm9ybTogcm90YXRlKGNhbGModmFyKC0taSkgKiAtOTBkZWcpKSB0cmFuc2xhdGUoMTVweCwgMHB4KTsKICAtby10cmFuc2Zvcm06IHJvdGF0ZShjYWxjKHZhcigtLWkpICogLTkwZGVnKSkgdHJhbnNsYXRlKDE1cHgsIDBweCk7CiAgdHJhbnNpdGlvbjogMC41czsKICAtd2Via2l0LXRyYW5zaXRpb246IDAuNXM7CiAgLW1vei10cmFuc2l0aW9uOiAwLjVzOwogIC1tcy10cmFuc2l0aW9uOiAwLjVzOwogIC1vLXRyYW5zaXRpb246IDAuNXM7CiAgdHJhbnNpdGlvbi1kZWxheTogMC41czsKfQoKLm1lbnUuYWN0aXZlIGxpIGE6OmFmdGVyIHsKICBsZWZ0OiA0MHB4OwogIHdpZHRoOiA0MHB4OwogIGJhY2tncm91bmQ6IHZhcigtLWNscik7CiAgdHJhbnNmb3JtOiByb3RhdGUoY2FsYyh2YXIoLS1pKSAqIC00NWRlZykpIHRyYW5zbGF0ZSg1MHB4LCAwcHgpOwogIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoY2FsYyh2YXIoLS1pKSAqIC00NWRlZykpIHRyYW5zbGF0ZSg1MHB4LCAwcHgpOwogIC1tb3otdHJhbnNmb3JtOiByb3RhdGUoY2FsYyh2YXIoLS1pKSAqIC00NWRlZykpIHRyYW5zbGF0ZSg1MHB4LCAwcHgpOwogIC1tcy10cmFuc2Zvcm06IHJvdGF0ZShjYWxjKHZhcigtLWkpICogLTQ1ZGVnKSkgdHJhbnNsYXRlKDUwcHgsIDBweCk7CiAgLW8tdHJhbnNmb3JtOiByb3RhdGUoY2FsYyh2YXIoLS1pKSAqIC00NWRlZykpIHRyYW5zbGF0ZSg1MHB4LCAwcHgpOwogIHRyYW5zaXRpb24tZGVsYXk6IDAuNXM7Cn0KCi5tZW51IGxpOmhvdmVyIGEgaSB7CiAgcG9zaXRpb246IHJlbGF0aXZlOwogIGNvbG9yOiAjZmZmOwogIHotaW5kZXg6IDEwMDAwMDA7Cn0=
.menu li a::before {
content: '';
position: absolute;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
transform: rotate(calc(var(--i) * 90deg)) translate(0, 25px);
-webkit-transform: rotate(calc(var(--i) * 90deg)) translate(0, 25px);
-moz-transform: rotate(calc(var(--i) * 90deg)) translate(0, 25px);
-ms-transform: rotate(calc(var(--i) * 90deg)) translate(0, 25px);
-o-transform: rotate(calc(var(--i) * 90deg)) translate(0, 25px);
transition: height 0.5s, width 0.5s, transform 0.5s;
-webkit-transition: height 0.5s, width 0.5s, transform 0.5s;
-moz-transition: height 0.5s, width 0.5s, transform 0.5s;
-ms-transition: height 0.5s, width 0.5s, transform 0.5s;
-o-transition: height 0.5s, width 0.5s, transform 0.5s;
transition-delay: 0s, 0.5s, 0s;
}
.menu.active li a::before {
height: 60px;
border: 2px solid var(--clr);
background: transparent;
z-index: 10;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
transform: rotate(calc(var(--i) * 90deg)) translate(0px, 0px);
-webkit-transform: rotate(calc(var(--i) * 90deg)) translate(0px, 0px);
-moz-transform: rotate(calc(var(--i) * 90deg)) translate(0px, 0px);
-ms-transform: rotate(calc(var(--i) * 90deg)) translate(0px, 0px);
-o-transform: rotate(calc(var(--i) * 90deg)) translate(0px, 0px);
transition: transform 0.5s, height 0.5s, width 0.5s;
-webkit-transition: transform 0.5s, height 0.5s, width 0.5s;
-moz-transition: transform 0.5s, height 0.5s, width 0.5s;
-ms-transition: transform 0.5s, height 0.5s, width 0.5s;
-o-transition: transform 0.5s, height 0.5s, width 0.5s;
transition-delay: 1s, 1.5s, 1.5s;
rotate: 135deg;
}
.menu.active li:hover a::before {
background: var(--clr);
color: #fff;
box-shadow: 0 10px var(--clr), 0 0 30px var(--clr), 0 0 50px var(--clr);
}
.menu li::after {
content: '';
position: absolute;
left: 30px;
width: 20px;
height: 2px;
background: #fff;
transform: rotate(calc(var(--i) * -90deg)) translate(15px, 0px);
-webkit-transform: rotate(calc(var(--i) * -90deg)) translate(15px, 0px);
-moz-transform: rotate(calc(var(--i) * -90deg)) translate(15px, 0px);
-ms-transform: rotate(calc(var(--i) * -90deg)) translate(15px, 0px);
-o-transform: rotate(calc(var(--i) * -90deg)) translate(15px, 0px);
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition-delay: 0.5s;
}
.menu.active li a::after {
left: 40px;
width: 40px;
background: var(--clr);
transform: rotate(calc(var(--i) * -45deg)) translate(50px, 0px);
-webkit-transform: rotate(calc(var(--i) * -45deg)) translate(50px, 0px);
-moz-transform: rotate(calc(var(--i) * -45deg)) translate(50px, 0px);
-ms-transform: rotate(calc(var(--i) * -45deg)) translate(50px, 0px);
-o-transform: rotate(calc(var(--i) * -45deg)) translate(50px, 0px);
transition-delay: 0.5s;
}
.menu li:hover a i {
position: relative;
color: #fff;
z-index: 1000000;
}