.hexagon-grid-container{width:100%;height:720px;position:relative;overflow:hidden}.hexagon-grid{transform-style:preserve-3d;backface-visibility:hidden;position:absolute;top:50%;left:calc(50% - 360px);transform:rotateX(55deg)rotate(-45deg)}.hexagon{color:#1e1e22;transform-style:preserve-3d;backface-visibility:hidden;contain:layout style;transition:transform .7s cubic-bezier(.175,.885,.32,1.275);position:absolute;overflow:visible;transform:translateZ(0)}.hexagon:after{content:"";opacity:0;pointer-events:none;z-index:-1;border-radius:50%;transition:opacity .5s;position:absolute;inset:5%;box-shadow:0 20px 40px #000000e6}.hexagon.active{transform:translateZ(8px)}.hexagon.active:after{opacity:1}.hexagon:hover{transition:transform .5s cubic-bezier(.175,.885,.32,1.275);transform:translateZ(20px)}.hexagon:hover:after{opacity:1;box-shadow:0 25px 50px #000}.hexagon .hex-bg{width:100%;height:100%;overflow:visible}.hexagon .hex-icon{color:#1e1e22;width:68px;height:68px;transition:color .8s,filter .8s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(90deg)}.hexagon.active .hex-icon{color:#25392a;filter:drop-shadow(0 0 12px #25392ab3)}.hexagon:hover .hex-icon{color:#3a5c42;filter:drop-shadow(0 0 14px #3a5c42cc)}.hex-animated-stroke{stroke-dasharray:25 75;stroke-dashoffset:0;opacity:0;transition:opacity .3s}.hexagon.active .hex-animated-stroke{opacity:1;animation:.8s linear 4 dash}.hexagon:hover .hex-animated-stroke{opacity:1;animation:.8s linear infinite dash}@keyframes dash{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100px}}