.pie__item {
  transform-origin: center;
}

.pie__huge {
  animation: 
    rotateRightHuge 15s linear forwards infinite,
    changeColorHuge 15s linear infinite;
}

.pie__big {
  animation: 
    rotateRightBig 15s linear forwards infinite,
    changeColorBig 15s linear infinite;
}

.pie__small {
  animation: 
    rotateRightSmall 15s linear forwards infinite,
    changeColorSmall 15s linear infinite;
}

@keyframes changeColorHuge {
  0% {
    fill: #8BA791;
  }
  23% {
    fill: #8BA791;
  }
  28% {
    fill: #A96BF1;
  }
  50% {
    fill: #A96BF1;
  }
  56% {
    fill: #6A96A7;
  }
  78% {
    fill: #6A96A7;
  }
  84% {
    fill: #8BA791;
  }
  100% {
    fill: #8BA791;
  }
}

@keyframes rotateRightHuge {
  0% {
    transform: rotate(0deg);
  }
  3% {
    transform: rotate(0deg);
  }
  28% {
    transform: rotate(300deg);
  }
  31% {
    transform: rotate(300deg);
  }
  56% {
    transform: rotate(420deg);
  }
  59% {
    transform: rotate(420deg);
  }
  84% {
    transform: rotate(600deg);
  }
  87% {
    transform: rotate(600deg);
  }
  100% {
    transform: rotate(720deg);
  }
}

@keyframes changeColorBig {
  0% {
    fill: #295162;
  }
  23% {
    fill: #295162;
  }
  28% {
    fill: #C3DA46;
  }
  50% {
    fill: #C3DA46;
  }
  56% {
    fill: #ACA48B;
  }
  78% {
    fill: #ACA48B;
  }
  84% {
    fill: #E54225;
  }
  95% {
    fill: #E54225;
  }
  100% {
    fill: #295162;
  }
}

@keyframes rotateRightBig {
  0% {
    transform: rotate(0deg);
  }
  3% {
    transform: rotate(0deg);
  }
  28% {
    transform: rotate(150deg);
  }
  31% {
    transform: rotate(150deg);
  }
  56% {
    transform: rotate(420deg);
  }
  59% {
    transform: rotate(420deg);
  }
  84% {
    transform: rotate(510deg);
  }
  87% {
    transform: rotate(510deg);
  }
  100% {
    transform: rotate(720deg);
  }
}

@keyframes changeColorSmall {
  0% {
    fill: #E54225;
  }
  23% {
    fill: #E54225;
  }
  28% {
    fill: #6A96A7;
  }
  50% {
    fill: #6A96A7;
  }
  56% {
    fill: #A96BF1;
  }
  78% {
    fill: #A96BF1;
  }
  84% {
    fill: #6A96A7;
  }
  95% {
    fill: #6A96A7;
  }
  100% {
    fill: #E54225;
  }
}

@keyframes rotateRightSmall {
  0% {
    transform: rotate(0deg);
  }
  3% {
    transform: rotate(0deg);
  }
  28% {
    transform: rotate(60deg);
  }
  31% {
    transform: rotate(60deg);
  }
  56% {
    transform: rotate(420deg);
  }
  59% {
    transform: rotate(420deg);
  }
  84% {
    transform: rotate(570deg);
  }
  87% {
    transform: rotate(570deg);
  }
  100% {
    transform: rotate(720deg);
  }
}