.orbit-container{position:relative;width:500px;height:500px}.orbit-wrap{height:100%;list-style:none;font-size:1.3em;position:relative}.orbit-wrap>li{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .3s ease-in-out}.orbit-wrap>li:hover ul{border-width:2px;border-color:rgba(255,255,255,.377);box-shadow:0 0 30px rgba(255,255,255,.01)}.orbit-wrap>li:nth-child(2):hover~li ul,.orbit-wrap>li:nth-child(3):hover~li ul{border-color:rgba(255,255,255,.1)}ul[class^=ring]{border:1px solid rgba(147,197,253,.3);position:relative;padding:0;border-radius:50%;list-style:none;box-sizing:content-box;transition:all .3s ease-in-out;background:radial-gradient(circle,rgba(147,197,253,.08) 0,transparent 70%);pointer-events:none}ul[class^=ring] li{display:block;position:absolute;top:50%;left:50%;width:3em;height:3em;margin:-1.5em;transition:all .3s ease-in-out}.orbit-icon{position:relative;width:100%;height:100%;border-radius:50%;background:rgba(59,130,246,.15);display:flex;align-items:center;justify-content:center;transition:all .3s ease-in-out;cursor:pointer;box-shadow:0 0 20px rgba(59,130,246,.3);border:2px solid rgba(59,130,246,.4);backdrop-filter:blur(10px);overflow:visible;z-index:50;pointer-events:auto}.orbit-icon:hover{transform:scale(1.3);box-shadow:0 0 40px rgba(59,130,246,.6);border-color:rgba(59,130,246,.8);background:rgba(59,130,246,.25)}.orbit-icon svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.orbit-icon:hover:after{display:none}.orbit-icon>div{position:relative;z-index:60}.ring-1{width:200px;height:200px;animation:clockwiseRotate 60s linear infinite;border:1px solid rgba(147,197,253,.3);background:radial-gradient(circle,rgba(147,197,253,.08) 0,transparent 70%);box-shadow:none}.ring-1 i{animation:counterClockwiseRotate 60s linear infinite}.ring-1>:first-of-type{transform:rotate(90deg) translate(100px) rotate(-90deg)}.ring-1>:nth-of-type(2){transform:rotate(180deg) translate(100px) rotate(-180deg)}.ring-1>:nth-of-type(3){transform:rotate(270deg) translate(100px) rotate(-270deg)}.ring-1>:nth-of-type(4){transform:rotate(1turn) translate(100px) rotate(-1turn)}.ring-2{width:350px;height:350px;animation:clockwiseRotate 75s linear infinite;border:1px solid rgba(255,255,255,.3);background:radial-gradient(circle,rgba(147,197,253,.08) 0,transparent 70%);box-shadow:none}.ring-2 i{animation:counterClockwiseRotate 75s linear infinite}.ring-2>:first-of-type{transform:rotate(72deg) translate(175px) rotate(-72deg)}.ring-2>:nth-of-type(2){transform:rotate(144deg) translate(175px) rotate(-144deg)}.ring-2>:nth-of-type(3){transform:rotate(216deg) translate(175px) rotate(-216deg)}.ring-2>:nth-of-type(4){transform:rotate(288deg) translate(175px) rotate(-288deg)}.ring-2>:nth-of-type(5){transform:rotate(1turn) translate(175px) rotate(-1turn)}.ring-3{width:500px;height:500px;animation:clockwiseRotate 90s linear infinite;border:1px solid rgba(147,197,253,.3);background:radial-gradient(circle,rgba(147,197,253,.08) 0,transparent 70%);box-shadow:none}.ring-3 i{animation:counterClockwiseRotate 90s linear infinite}.ring-3>:first-of-type{transform:rotate(60deg) translate(250px) rotate(-60deg)}.ring-3>:nth-of-type(2){transform:rotate(120deg) translate(250px) rotate(-120deg)}.ring-3>:nth-of-type(3){transform:rotate(180deg) translate(250px) rotate(-180deg)}.ring-3>:nth-of-type(4){transform:rotate(240deg) translate(250px) rotate(-240deg)}.ring-3>:nth-of-type(5){transform:rotate(300deg) translate(250px) rotate(-300deg)}.ring-3>:nth-of-type(6){transform:rotate(1turn) translate(250px) rotate(-1turn)}.orbit-center{z-index:40;font-size:1.8em;width:2em;height:2em;line-height:3em;text-align:center;background:linear-gradient(135deg,rgb(255,255,255),rgb(255,255,255),rgb(255,255,255));border-radius:50%;transition:all .3s ease-in-out;box-shadow:0 0 30px rgba(148,163,184,.3),inset 0 1px 0 rgba(255,255,255,.8);border:2px solid rgba(148,163,184,.4);backdrop-filter:blur(10px)}.orbit-center,.orbit-center__icon{display:flex;align-items:center;justify-content:center}.orbit-center__icon{width:100%;height:100%}.orbit-center:hover .orbit-center__icon{transform:rotate(0deg)}.orbit-center__icon{transform:rotate(-1turn);transition:all .3s ease-in-out}.orbit-wrap>li.orbit-center:hover~li>ul{width:0;height:0}.orbit-wrap>li.orbit-center:hover~li>ul *{transform:translate(0)}@keyframes clockwiseRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes counterClockwiseRotate{0%{transform:rotate(0deg)}to{transform:rotate(-1turn)}}.orbit-container:after,.orbit-container:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(59,130,246,.1);border-radius:50%;animation:pulse 4s ease-out infinite}.orbit-container:before{width:750px;height:750px;animation-delay:0s}.orbit-container:after{width:850px;height:850px;animation-delay:2s}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.3}50%{transform:translate(-50%,-50%) scale(1.2);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:.3}}.orbit-container:after{background:radial-gradient(circle,rgba(59,130,246,.05) 0,transparent 70%)}.orbit-container:after,.orbit-container:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:600px;height:600px;border-radius:50%;pointer-events:none}.orbit-container:before{animation:rotate 20s linear infinite}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}.ring-1 .orbit-icon{animation:counterClockwiseRotate 60s linear infinite}.ring-2 .orbit-icon{animation:counterClockwiseRotate 75s linear infinite}.ring-3 .orbit-icon{animation:counterClockwiseRotate 90s linear infinite}@media (max-width:1399px) and (min-width:1200px){.orbit-container{width:400px;height:400px}}@media (max-width:1199px) and (min-width:992px){.orbit-container{width:450px;height:450px}.ring-1{width:180px;height:180px}.ring-1>:first-of-type{transform:rotate(90deg) translate(90px) rotate(-90deg)}.ring-1>:nth-of-type(2){transform:rotate(180deg) translate(90px) rotate(-180deg)}.ring-1>:nth-of-type(3){transform:rotate(270deg) translate(90px) rotate(-270deg)}.ring-1>:nth-of-type(4){transform:rotate(1turn) translate(90px) rotate(-1turn)}.ring-2{width:315px;height:315px}.ring-2>:first-of-type{transform:rotate(72deg) translate(157.5px) rotate(-72deg)}.ring-2>:nth-of-type(2){transform:rotate(144deg) translate(157.5px) rotate(-144deg)}.ring-2>:nth-of-type(3){transform:rotate(216deg) translate(157.5px) rotate(-216deg)}.ring-2>:nth-of-type(4){transform:rotate(288deg) translate(157.5px) rotate(-288deg)}.ring-2>:nth-of-type(5){transform:rotate(1turn) translate(157.5px) rotate(-1turn)}.ring-3{width:450px;height:450px}.ring-3>:first-of-type{transform:rotate(60deg) translate(225px) rotate(-60deg)}.ring-3>:nth-of-type(2){transform:rotate(120deg) translate(225px) rotate(-120deg)}.ring-3>:nth-of-type(3){transform:rotate(180deg) translate(225px) rotate(-180deg)}.ring-3>:nth-of-type(4){transform:rotate(240deg) translate(225px) rotate(-240deg)}.ring-3>:nth-of-type(5){transform:rotate(300deg) translate(225px) rotate(-300deg)}.ring-3>:nth-of-type(6){transform:rotate(1turn) translate(225px) rotate(-1turn)}.orbit-container:before{width:675px;height:675px}.orbit-container:after{width:765px;height:765px}.orbit-container:after,.orbit-container:before{width:540px;height:540px}}@media (max-width:991px) and (min-width:768px){.orbit-container{width:400px;height:400px}.orbit-wrap{font-size:1.1em}.ring-1{width:160px;height:160px}.ring-1>:first-of-type{transform:rotate(90deg) translate(80px) rotate(-90deg)}.ring-1>:nth-of-type(2){transform:rotate(180deg) translate(80px) rotate(-180deg)}.ring-1>:nth-of-type(3){transform:rotate(270deg) translate(80px) rotate(-270deg)}.ring-1>:nth-of-type(4){transform:rotate(1turn) translate(80px) rotate(-1turn)}.ring-2{width:280px;height:280px}.ring-2>:first-of-type{transform:rotate(72deg) translate(140px) rotate(-72deg)}.ring-2>:nth-of-type(2){transform:rotate(144deg) translate(140px) rotate(-144deg)}.ring-2>:nth-of-type(3){transform:rotate(216deg) translate(140px) rotate(-216deg)}.ring-2>:nth-of-type(4){transform:rotate(288deg) translate(140px) rotate(-288deg)}.ring-2>:nth-of-type(5){transform:rotate(1turn) translate(140px) rotate(-1turn)}.ring-3{width:400px;height:400px}.ring-3>:first-of-type{transform:rotate(60deg) translate(200px) rotate(-60deg)}.ring-3>:nth-of-type(2){transform:rotate(120deg) translate(200px) rotate(-120deg)}.ring-3>:nth-of-type(3){transform:rotate(180deg) translate(200px) rotate(-180deg)}.ring-3>:nth-of-type(4){transform:rotate(240deg) translate(200px) rotate(-240deg)}.ring-3>:nth-of-type(5){transform:rotate(300deg) translate(200px) rotate(-300deg)}.ring-3>:nth-of-type(6){transform:rotate(1turn) translate(200px) rotate(-1turn)}.orbit-center{font-size:1.6em}.orbit-container:before{width:600px;height:600px}.orbit-container:after{width:680px;height:680px}.orbit-container:after,.orbit-container:before{width:480px;height:480px}}@media (max-width:767px) and (min-width:576px){.orbit-container{width:350px;height:350px}.orbit-wrap{font-size:1em}.ring-1{width:140px;height:140px}.ring-1>:first-of-type{transform:rotate(90deg) translate(70px) rotate(-90deg)}.ring-1>:nth-of-type(2){transform:rotate(180deg) translate(70px) rotate(-180deg)}.ring-1>:nth-of-type(3){transform:rotate(270deg) translate(70px) rotate(-270deg)}.ring-1>:nth-of-type(4){transform:rotate(1turn) translate(70px) rotate(-1turn)}.ring-2{width:245px;height:245px}.ring-2>:first-of-type{transform:rotate(72deg) translate(122.5px) rotate(-72deg)}.ring-2>:nth-of-type(2){transform:rotate(144deg) translate(122.5px) rotate(-144deg)}.ring-2>:nth-of-type(3){transform:rotate(216deg) translate(122.5px) rotate(-216deg)}.ring-2>:nth-of-type(4){transform:rotate(288deg) translate(122.5px) rotate(-288deg)}.ring-2>:nth-of-type(5){transform:rotate(1turn) translate(122.5px) rotate(-1turn)}.ring-3{width:350px;height:350px}.ring-3>:first-of-type{transform:rotate(60deg) translate(175px) rotate(-60deg)}.ring-3>:nth-of-type(2){transform:rotate(120deg) translate(175px) rotate(-120deg)}.ring-3>:nth-of-type(3){transform:rotate(180deg) translate(175px) rotate(-180deg)}.ring-3>:nth-of-type(4){transform:rotate(240deg) translate(175px) rotate(-240deg)}.ring-3>:nth-of-type(5){transform:rotate(300deg) translate(175px) rotate(-300deg)}.ring-3>:nth-of-type(6){transform:rotate(1turn) translate(175px) rotate(-1turn)}.orbit-center{font-size:1.4em}.orbit-container:before{width:525px;height:525px}.orbit-container:after{width:595px;height:595px}.orbit-container:after,.orbit-container:before{width:420px;height:420px}}@media (max-width:575px) and (min-width:450px){.orbit-container{width:300px;height:300px}.orbit-wrap{font-size:.9em}.ring-1{width:120px;height:120px}.ring-1>:first-of-type{transform:rotate(90deg) translate(60px) rotate(-90deg)}.ring-1>:nth-of-type(2){transform:rotate(180deg) translate(60px) rotate(-180deg)}.ring-1>:nth-of-type(3){transform:rotate(270deg) translate(60px) rotate(-270deg)}.ring-1>:nth-of-type(4){transform:rotate(1turn) translate(60px) rotate(-1turn)}.ring-2{width:210px;height:210px}.ring-2>:first-of-type{transform:rotate(72deg) translate(105px) rotate(-72deg)}.ring-2>:nth-of-type(2){transform:rotate(144deg) translate(105px) rotate(-144deg)}.ring-2>:nth-of-type(3){transform:rotate(216deg) translate(105px) rotate(-216deg)}.ring-2>:nth-of-type(4){transform:rotate(288deg) translate(105px) rotate(-288deg)}.ring-2>:nth-of-type(5){transform:rotate(1turn) translate(105px) rotate(-1turn)}.ring-3{width:300px;height:300px}.ring-3>:first-of-type{transform:rotate(60deg) translate(150px) rotate(-60deg)}.ring-3>:nth-of-type(2){transform:rotate(120deg) translate(150px) rotate(-120deg)}.ring-3>:nth-of-type(3){transform:rotate(180deg) translate(150px) rotate(-180deg)}.ring-3>:nth-of-type(4){transform:rotate(240deg) translate(150px) rotate(-240deg)}.ring-3>:nth-of-type(5){transform:rotate(300deg) translate(150px) rotate(-300deg)}.ring-3>:nth-of-type(6){transform:rotate(1turn) translate(150px) rotate(-1turn)}.orbit-center{font-size:1.2em}.orbit-container:after,.orbit-container:before{display:none}}@media (max-width:450px){.orbit-container{width:250px;height:250px}.orbit-wrap{font-size:.8em}.ring-1{width:100px;height:100px}.ring-1>:first-of-type{transform:rotate(90deg) translate(50px) rotate(-90deg)}.ring-1>:nth-of-type(2){transform:rotate(180deg) translate(50px) rotate(-180deg)}.ring-1>:nth-of-type(3){transform:rotate(270deg) translate(50px) rotate(-270deg)}.ring-1>:nth-of-type(4){transform:rotate(1turn) translate(50px) rotate(-1turn)}.ring-2{width:175px;height:175px}.ring-2>:first-of-type{transform:rotate(72deg) translate(87.5px) rotate(-72deg)}.ring-2>:nth-of-type(2){transform:rotate(144deg) translate(87.5px) rotate(-144deg)}.ring-2>:nth-of-type(3){transform:rotate(216deg) translate(87.5px) rotate(-216deg)}.ring-2>:nth-of-type(4){transform:rotate(288deg) translate(87.5px) rotate(-288deg)}.ring-2>:nth-of-type(5){transform:rotate(1turn) translate(87.5px) rotate(-1turn)}.ring-3{width:250px;height:250px}.ring-3>:first-of-type{transform:rotate(60deg) translate(125px) rotate(-60deg)}.ring-3>:nth-of-type(2){transform:rotate(120deg) translate(125px) rotate(-120deg)}.ring-3>:nth-of-type(3){transform:rotate(180deg) translate(125px) rotate(-180deg)}.ring-3>:nth-of-type(4){transform:rotate(240deg) translate(125px) rotate(-240deg)}.ring-3>:nth-of-type(5){transform:rotate(300deg) translate(125px) rotate(-300deg)}.ring-3>:nth-of-type(6){transform:rotate(1turn) translate(125px) rotate(-1turn)}.orbit-center{font-size:1em}.orbit-container:after,.orbit-container:before{display:none}}