.holderCircle{width:400px;height:400px;border-radius:100%;margin:60px auto;position:relative}.dotCircle{width:100%;height:100%;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;border-radius:100%;z-index:20}.dotCircle .itemDot{display:block;width:80px;height:80px;position:absolute;background:#ddd;color:#fff;border-radius:100%;text-align:center;line-height:80px;font-size:30px;z-index:3;cursor:pointer}.dotCircle .itemDot::after{content:"";width:82px;height:82px;position:absolute;border-radius:100%;top:0;left:0;right:0;margin:auto;z-index:2;border:3px solid #fff}.dotCircle .itemDot::before{content:"";width:85px;height:85px;position:absolute;border-radius:100%;top:0;left:0;right:0;margin:auto;z-index:2;border:3px solid}.dotCircle .itemDot.active{background:#352d6e;color:#fff;transition:.5s}.dotCircle .itemDot.active::before{border-color:#352d6e}.dotCircle .itemDot .forActive{width:56px;height:56px;position:absolute;top:0;left:0;right:0;bottom:0;display:none}.dotCircle .itemDot .forActive::after{content:'';width:5px;height:5px;bottom:-31px;left:-14px;filter:blur(1px);position:absolute;border-radius:100%}.dotCircle .itemDot .forActive::before{content:'';width:6px;height:6px;filter:blur(5px);top:-15px;position:absolute;transform:rotate(-45deg);right:-39px}.dotCircle .itemDot.active .forActive{display:block}.dotCircle .itemDot:hover{background:#34495e;color:#fff;transition:.5s}.dotCircle .itemDot:hover::before{border-color:#34495e}.contentCircle{width:50%;height:50%;border-radius:100%;color:#fff;position:relative;top:25%;right:0;bottom:0;left:0;box-shadow:0 0 69px 1px #2b152e;margin:auto}.contentCircle .CirItem{border-radius:100%;color:#fff;position:absolute;text-align:center;bottom:0;left:0;opacity:0;transform:scale(0);transition:.5s;font-weight:700;font-size:13px;width:100%;height:100%;top:0;right:0;margin:auto;background:#00000054;line-height:250px}.CirItem.active{z-index:1;opacity:1;transform:scale(1);transition:.5s}.contentCircle .CirItem1{background:rgba(255,176,72,.83)}.contentCircle .CirItem10::after,.contentCircle .CirItem1::after,.contentCircle .CirItem2::after,.contentCircle .CirItem3::after,.contentCircle .CirItem4::after,.contentCircle .CirItem5::after,.contentCircle .CirItem6::after,.contentCircle .CirItem7::after,.contentCircle .CirItem8::after,.contentCircle .CirItem9::after{content:'';width:50%;height:100%;border-bottom-left-radius:250px;border-top-left-radius:250px;position:absolute;top:0;left:0;z-index:-1;background:rgba(0,0,0,.33)}.contentCircle .CirItem2{background:rgba(40,169,224,.83)}.contentCircle .CirItem3{background:rgba(137,196,69,.83)}.contentCircle .CirItem4{background:rgba(252,167,43,.83)}.contentCircle .CirItem5{background:rgba(61,190,160,.83)}.contentCircle .CirItem6{background:rgba(170,34,157,.83)}.contentCircle .CirItem7{background:rgba(224,100,16,.83)}.contentCircle .CirItem8{background:rgba(19,98,183,.83)}.contentCircle .CirItem9{background:rgba(229,44,71,.83)}.contentCircle .CirItem10{background:rgba(254,68,145,.83)}@media only screen and (min-width:300px) and (max-width:599px){.holderCircle{width:350px;height:350px;margin:110px auto}.dotCircle .itemDot{line-height:50px}.holderCircle::after{width:100%;height:100%}.dotCircle{width:100%;height:100%;top:0;right:0;bottom:0;left:0;margin:auto}.contentCircle{width:160px;height:160px;top:94px}.contentCircle .CirItem10::after,.contentCircle .CirItem1::after,.contentCircle .CirItem2::after,.contentCircle .CirItem3::after,.contentCircle .CirItem4::after,.contentCircle .CirItem5::after,.contentCircle .CirItem6::after,.contentCircle .CirItem7::after,.contentCircle .CirItem8::after,.contentCircle .CirItem9::after{border-bottom-left-radius:160px;border-top-left-radius:160px}.dotCircle .itemDot .forActive{width:56px;height:56px}.dotCircle .itemDot::before{content:"";width:62px;height:62px}.dotCircle .itemDot,.dotCircle .itemDot::after{content:"";width:60px;height:60px}}