@property --p{syntax:"<percentage>";inherits:false;initial-value:.1%}.infographic{max-width:250px;color:#333;margin:0 auto}.infographic .infographic__inner{height:0;padding-bottom:100%;width:250px;border-radius:50%;position:relative}.infographic .infographic__ball{height:50%;width:0;position:absolute;left:50%;top:0;transform-origin:bottom left;transform:rotate(0);transition:transform 2.7s ease-in-out;z-index:2}.infographic .infographic__ball::after{background-color:var(--color-primary);border-radius:50%;height:19px;width:19px;content:"";display:block;position:absolute;top:0;left:50%;transform:translate(-50%, -50%);transition:opacity .4s linear;transition-delay:2.5s;opacity:1}.infographic .infographic__circle{width:100%;aspect-ratio:1;border-radius:50%;transition:--p 2.7s ease-in-out;background:conic-gradient(var(--color-orange) var(--p), #DBDBDB 0)}.infographic .infographic__circle::before{inset:2px;border-radius:inherit;background:#fff;position:absolute;content:""}.infographic.start-animation .infographic__circle{--p: 100%}.infographic.start-animation .infographic__ball{transform:rotate(360deg)}.infographic.start-animation .infographic__ball::after{opacity:0}.infographic .infographic__inner-container{width:100%;height:100%;position:absolute;left:0;top:0;display:flex;justify-content:center;align-items:center;text-align:center}.infographic .field--name-field-top-text{text-transform:uppercase;font-weight:600;font-size:14px;line-height:20px}.infographic .infographic__number-container{font-weight:600;font-size:56px;line-height:66px}.infographic .field--name-field-bottom-text{font-weight:500;font-size:18px;line-height:26px;text-align:center;margin-top:16px;margin-bottom:16px}