.custom-shadow-btn{transition:box-shadow .3s;display:flex;align-items:center;gap:10px;font-size:20px;color:#fff;font-weight:500;line-height:20.6px;padding:28px 49.5px;border-radius:100000px;background:#356cfa;box-shadow:0 0 0 8px rgba(53,108,250,.2);transition:.3s ease}.custom-shadow-btn:hover{box-shadow:0 0 0 15px rgba(53,108,250,.1);filter:brightness(1.2)}.fade-in{opacity:1}.fade-in,.fade-out{transition:opacity .5s ease-in-out 5s}.fade-out{opacity:0}#circle-container{margin:0}#circle{width:1000px;padding-bottom:100%;overflow:hidden;position:relative;top:-10px;right:-505px}#circle text{font-family:Helvetica Neue,Arial;font-size:11px;font-weight:semi-bold}#circle svg{position:absolute;left:0;top:0;width:50%;height:50%;animation-name:rotate;animation-duration:50s;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.circular-segment{transition:all .4s cubic-bezier(.4,2,.6,1);box-shadow:0 2px 8px rgba(0,0,0,.08)}.circular-segment.active{background:#fff!important;color:#222!important;box-shadow:0 0 24px 4px rgba(255,255,255,.5);border:2px solid #fff;z-index:3}.circle{position:absolute;top:70%;left:70%;width:150px;height:150px;transition:width .3s,height .3s,transform .3s;transform-origin:top left;border-bottom-right-radius:100%;border:2px solid red}.circle .link{display:block}.circle .link:before{position:absolute;display:block;color:white;font-family:FontAwesome;font-size:1.5em;top:1em;right:1em}.wrapcircles.closed .circle{transform:rotate(90deg);width:50px;height:50px;transition-delay:0s}.wrapcircles.closed #click{transform:none;transition:all .3s}.wrapcircles.closed #click span{top:1.125em;right:2em}.wrapcircles.closed #click span:after{transform:rotate(90deg)}.wrapcircles.closed #click span:before{transform:none}#click{cursor:pointer}#click span{transition:bottom .3s,left .3s;display:block;width:30px;height:30px;top:1em;right:1em;position:absolute}#click span:after,#click span:before{display:block;position:absolute;content:"";width:30px;height:8px;transition:transform .3s;top:11px;border-radius:3px;background:white}#click span:before{transform:rotate(-45deg)}#click span:after{transform:rotate(45deg)}.c-1{background:#43A047;transition-delay:.1s,.1s,.1s;transform:rotate(18deg)}.c-1 .link:before{transform:rotate(-18deg);content:"\f0f3"}.c-2{background:#388E3C;transition-delay:.2s,.2s,.2s;transform:rotate(36deg)}.c-2 .link:before{transform:rotate(-36deg);content:"\f013"}.c-3{background:#2E7D32;transition-delay:.3s,.3s,.3s;transform:rotate(54deg)}.c-3 .link:before{transform:rotate(-54deg);content:"\f1cb"}.c-4{background:#1B5E20;transition-delay:.4s,.4s,.4s;transform:rotate(72deg)}.c-4 .link:before{transform:rotate(-72deg);content:"\f099"}.c-5{background:#4CAF50;z-index:-1}.c-6{background:#1B5E20;transition-delay:.4s,.4s,.4s;transform:rotate(90deg)}.c-6 .link:before{transform:rotate(-90deg);content:"\f099"}.c-7{background:#1B5E20;transition-delay:.4s,.4s,.4s;transform:rotate(108deg)}.c-7 .link:before{transform:rotate(-108deg);content:"\f099"}.c-8{background:#1B5E20;transition-delay:.4s,.4s,.4s;transform:rotate(126deg)}.c-8 .link:before{transform:rotate(-126deg);content:"\f099"}.c-9{background:#1B5E20;transition-delay:.4s,.4s,.4s;transform:rotate(144deg)}.c-9 .link:before{transform:rotate(-144deg);content:"\f099"}.c-10{background:#1B5E20;transition-delay:.4s,.4s,.4s;transform:rotate(162deg)}.c-10 .link:before{transform:rotate(-162deg);content:"\f099"}.c-11{background:#1B5E20;transition-delay:.4s,.4s,.4s;transform:rotate(180deg)}.c-11 .link:before{transform:rotate(-180deg);content:"\f099"}.c-12{background:#1B5E20;transition-delay:.4s,.4s,.4s;transform:rotate(198deg)}.c-12 .link:before{transform:rotate(-198deg);content:"\f099"}.c-13{background:#1B5E20;transition-delay:.4s,.4s,.4s;transform:rotate(216deg)}.c-13 .link:before{transform:rotate(-216deg);content:"\f099"}.c-14{background:#1B5E20;transition-delay:.4s,.4s,.4s;transform:rotate(234deg)}.c-14 .link:before{transform:rotate(-234deg);content:"\f099"}.c-15{background:#1B5E20;transition-delay:.4s,.4s,.4s;transform:rotate(252deg)}.c-15 .link:before{transform:rotate(-252deg);content:"\f099"}.rotate{animation:rotate360 70.5s linear infinite}@keyframes rotate360{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}