.hexagon{overflow:hidden;position:relative;width:6em;height:6em;margin:0 auto}.hexagon__group,.hexagon__sector,.hexagon__sector:after,.hexagon__sector:before{position:absolute}.hexagon__group{width:100%;height:100%}.hexagon__group:nth-child(2) .hexagon__sector,.hexagon__group:nth-child(2) .hexagon__sector:after,.hexagon__group:nth-child(2) .hexagon__sector:before{animation-delay:calc(var(--hexagon-dur) * -1/6)}.hexagon__group:nth-child(3) .hexagon__sector,.hexagon__group:nth-child(3) .hexagon__sector:after,.hexagon__group:nth-child(3) .hexagon__sector:before{animation-delay:calc(var(--hexagon-dur) * -2/6)}.hexagon__group:nth-child(4) .hexagon__sector,.hexagon__group:nth-child(4) .hexagon__sector:after,.hexagon__group:nth-child(4) .hexagon__sector:before{animation-delay:calc(var(--hexagon-dur) * -3/6)}.hexagon__group:nth-child(5) .hexagon__sector,.hexagon__group:nth-child(5) .hexagon__sector:after,.hexagon__group:nth-child(5) .hexagon__sector:before{animation-delay:calc(var(--hexagon-dur) * -4/6)}.hexagon__group:nth-child(6) .hexagon__sector,.hexagon__group:nth-child(6) .hexagon__sector:after,.hexagon__group:nth-child(6) .hexagon__sector:before{animation-delay:calc(var(--hexagon-dur) * -5/6)}.hexagon__group:nth-child(odd){transform:rotate(30deg)}.hexagon__sector,.hexagon__sector:after,.hexagon__sector:before{animation-duration:var(--hexagon-dur);animation-iteration-count:infinite;animation-timing-function:linear;width:.2em;height:.2em}.hexagon__sector{animation-name:moveOut1;top:calc(50% - .1em);left:calc(50% - .1em)}.hexagon__sector:nth-child(2){animation-name:moveOut2}.hexagon__sector:nth-child(3){animation-name:moveOut3}.hexagon__sector:nth-child(4){animation-name:moveOut4}.hexagon__sector:nth-child(5){animation-name:moveOut5}.hexagon__sector:nth-child(6){animation-name:moveOut6}.hexagon__sector:after,.hexagon__sector:before{animation-name:ripple;background-color:currentColor;border-radius:.1em;content:"";display:block;top:0;left:0;transform-origin:.1em .1em}.hexagon__sector:before{transform:rotate(-30deg)}.hexagon__sector:after{transform:rotate(-150deg)}@keyframes moveOut1{0%{transform:translateY(0) scale(0)}3%{transform:translateY(.2em) scale(1)}97%{transform:translateY(3em) scale(1)}to{transform:translateY(3.2em) scale(0)}}@keyframes moveOut2{0%{transform:rotate(60deg) translateY(0) scale(0)}3%{transform:rotate(60deg) translateY(.2em) scale(1)}97%{transform:rotate(60deg) translateY(3em) scale(1)}to{transform:rotate(60deg) translateY(3.2em) scale(0)}}@keyframes moveOut3{0%{transform:rotate(120deg) translateY(0) scale(0)}3%{transform:rotate(120deg) translateY(.2em) scale(1)}97%{transform:rotate(120deg) translateY(3em) scale(1)}to{transform:rotate(120deg) translateY(3.2em) scale(0)}}@keyframes moveOut4{0%{transform:rotate(180deg) translateY(0) scale(0)}3%{transform:rotate(180deg) translateY(.2em) scale(1)}97%{transform:rotate(180deg) translateY(3em) scale(1)}to{transform:rotate(180deg) translateY(3.2em) scale(0)}}@keyframes moveOut5{0%{transform:rotate(240deg) translateY(0) scale(0)}3%{transform:rotate(240deg) translateY(.2em) scale(1)}97%{transform:rotate(240deg) translateY(3em) scale(1)}to{transform:rotate(240deg) translateY(3.2em) scale(0)}}@keyframes moveOut6{0%{transform:rotate(300deg) translateY(0) scale(0)}3%{transform:rotate(300deg) translateY(.2em) scale(1)}97%{transform:rotate(300deg) translateY(3em) scale(1)}to{transform:rotate(300deg) translateY(3.2em) scale(0)}}@keyframes ripple{0%,to{width:.2em}33%{width:1.2em}}.hexagon-sm{overflow:hidden;position:relative;width:2em;height:2em;margin:0 auto}.hexagon-sm .hexagon__group,.hexagon-sm .hexagon__sector,.hexagon-sm .hexagon__sector:after,.hexagon-sm .hexagon__sector:before{position:absolute}.hexagon-sm .hexagon__group{width:100%;height:100%}.hexagon-sm .hexagon__group:nth-child(2) .hexagon__sector,.hexagon-sm .hexagon__group:nth-child(2) .hexagon__sector:after,.hexagon-sm .hexagon__group:nth-child(2) .hexagon__sector:before{animation-delay:calc(var(--hexagon-dur) * -1/6)}.hexagon-sm .hexagon__group:nth-child(3) .hexagon__sector,.hexagon-sm .hexagon__group:nth-child(3) .hexagon__sector:after,.hexagon-sm .hexagon__group:nth-child(3) .hexagon__sector:before{animation-delay:calc(var(--hexagon-dur) * -2/6)}.hexagon-sm .hexagon__group:nth-child(4) .hexagon__sector,.hexagon-sm .hexagon__group:nth-child(4) .hexagon__sector:after,.hexagon-sm .hexagon__group:nth-child(4) .hexagon__sector:before{animation-delay:calc(var(--hexagon-dur) * -3/6)}.hexagon-sm .hexagon__group:nth-child(5) .hexagon__sector,.hexagon-sm .hexagon__group:nth-child(5) .hexagon__sector:after,.hexagon-sm .hexagon__group:nth-child(5) .hexagon__sector:before{animation-delay:calc(var(--hexagon-dur) * -4/6)}.hexagon-sm .hexagon__group:nth-child(6) .hexagon__sector,.hexagon-sm .hexagon__group:nth-child(6) .hexagon__sector:after,.hexagon-sm .hexagon__group:nth-child(6) .hexagon__sector:before{animation-delay:calc(var(--hexagon-dur) * -5/6)}.hexagon-sm .hexagon__group:nth-child(odd){transform:rotate(30deg)}.hexagon-sm .hexagon__sector,.hexagon-sm .hexagon__sector:after,.hexagon-sm .hexagon__sector:before{animation-duration:var(--hexagon-dur);animation-iteration-count:infinite;animation-timing-function:linear;width:.066em;height:.066em}.hexagon-sm .hexagon__sector{animation-name:moveOut1Sm;top:calc(50% - .033em);left:calc(50% - .033em)}.hexagon-sm .hexagon__sector:nth-child(2){animation-name:moveOut2Sm}.hexagon-sm .hexagon__sector:nth-child(3){animation-name:moveOut3Sm}.hexagon-sm .hexagon__sector:nth-child(4){animation-name:moveOut4Sm}.hexagon-sm .hexagon__sector:nth-child(5){animation-name:moveOut5Sm}.hexagon-sm .hexagon__sector:nth-child(6){animation-name:moveOut6Sm}.hexagon-sm .hexagon__sector:after,.hexagon-sm .hexagon__sector:before{animation-name:rippleSm;background-color:currentColor;border-radius:.033em;content:"";display:block;top:0;left:0;transform-origin:.033em .033em}.hexagon-sm .hexagon__sector:before{transform:rotate(-30deg)}.hexagon-sm .hexagon__sector:after{transform:rotate(-150deg)}@keyframes moveOut1Sm{0%{transform:translateY(0) scale(0)}3%{transform:translateY(.066em) scale(1)}97%{transform:translateY(1em) scale(1)}to{transform:translateY(1.066em) scale(0)}}@keyframes moveOut2Sm{0%{transform:rotate(60deg) translateY(0) scale(0)}3%{transform:rotate(60deg) translateY(.066em) scale(1)}97%{transform:rotate(60deg) translateY(1em) scale(1)}to{transform:rotate(60deg) translateY(1.066em) scale(0)}}@keyframes moveOut3Sm{0%{transform:rotate(120deg) translateY(0) scale(0)}3%{transform:rotate(120deg) translateY(.066em) scale(1)}97%{transform:rotate(120deg) translateY(1em) scale(1)}to{transform:rotate(120deg) translateY(1.066em) scale(0)}}@keyframes moveOut4Sm{0%{transform:rotate(180deg) translateY(0) scale(0)}3%{transform:rotate(180deg) translateY(.066em) scale(1)}97%{transform:rotate(180deg) translateY(1em) scale(1)}to{transform:rotate(180deg) translateY(1.066em) scale(0)}}@keyframes moveOut5Sm{0%{transform:rotate(240deg) translateY(0) scale(0)}3%{transform:rotate(240deg) translateY(.066em) scale(1)}97%{transform:rotate(240deg) translateY(1em) scale(1)}to{transform:rotate(240deg) translateY(1.066em) scale(0)}}@keyframes moveOut6Sm{0%{transform:rotate(300deg) translateY(0) scale(0)}3%{transform:rotate(300deg) translateY(.066em) scale(1)}97%{transform:rotate(300deg) translateY(1em) scale(1)}to{transform:rotate(300deg) translateY(1.066em) scale(0)}}@keyframes rippleSm{0%,to{width:.066em}33%{width:.4em}}