body{
  margin:0;
  padding:0;
  background: #f1f1f1;
  text-align: center;
}
.icon{
  width: 32px;
  height: 32px;
  fill: #22A62B;
  animation: anima 30s ease-out infinite;
}

.icon.is-check{
  fill: #FE4365;
}

.icon.is-x10{
  width: 320px;
  height: 320px;
}

.icon.is-x2{
  width: 64px;
  height: 64px;
}

.icon.is-x3{
  width: 96px;
  height: 96px;
}

.icon.is-x4{
  width: 128px;
  height: 128px;
}

.icon.is-x5{
  width: 160px;
  height: 160px;
}

.icon.is-x6{
  width: 192px;
  height: 192px;
}


@keyframes anima {
	0% {fill: #22A62B;color: #22A62B;}	
  10% {fill: #14E3E6;color: #14E3E6;}
  20%{fill: #195BEF;color: #195BEF;}
  30%{fill: #DF26D9;color: #DF26D9;}
  40%{fill: #DF2688;color: #DF2688;}
  50%{fill: #FEA903;color: #FEA903;}
  60%{fill: #DF26DE;color: #DF26DE;}
  70%{fill: #2C4AED;color: #2C4AED;}
  80%{fill: #14E3F7;color: #14E3F7;}
  90%{fill: #195BEF;color: #195BEF;}
  100% {fill: #22A62B;}
}

.icon.is-delay-1s{
  animation-delay: .5s;
}

.icon.is-delay-2s{
  animation-delay: 1s;
}

.icon.is-delay-3s{
  animation-delay: 1.5s;
}

.icon.is-delay-4s{
  animation-delay: 2s;
}

.icon.is-delay-5s{
  animation-delay: 2.5s;
}


.icon.is-delay-6s{
  animation-delay: 3s;
}

.icon.is-delay-7s{
  animation-delay: 3.5s;
}

.icon.is-delay-8s{
  animation-delay: 4s;
}

.icon.is-delay-9s{
  animation-delay: 4.5s;
}

.icon.is-delay-10s{
  animation-delay: 5s;
}

.svg-time-b{
  margin-top: 100px;
  display: inline-block;
  min-width: 1360px;
}

.svg-time-b .icon + .icon{
  margin-left: 16px;
}


.svg-time-b > .text-be{
  font-size: 32px;
  color: white;
  font-family: monospace;
  margin-top: 32px;
  display: block;
  text-decoration: none;
  animation: anima 30s ease-out infinite;
  animation-delay: 2.5s;
  color: #22A62B;
  text-shadow: 4px 4px 3px rgba(0,0,0,.25);
  font-weight: bold;
}