@import url('https://fonts.googleapis.com/css?family=Signika+Negative');

@delay-between: 100ms;

body{
    font-family: 'Signika Negative', sans-serif;
    font-size: 4vw;
    background: #263238;
    margin: 0;
}

.delays(@n, @i: 1) when (@i =< @n) {

    &:nth-child(@{i}) {
        animation-delay: @delay-between * @i;
    }

    .delays(@n, (@i + 1));
}

.light(@n, @i: 1) when (@i =< @n) {

    &:nth-child(@{i}) {
        background-color:  spin(#fdf4a9, -@i*120)
    }

    .light(@n, (@i + 1));
}


.icon {
  font-size: 9vw;
}

div {
    animation: compare 3s ease-in-out infinite;
    opacity: 0;
    border-radius: 50%;
    padding: 2.5vw;
    text-align: center;
    width: 10vw;
    height: 10vw;
    display: inline-block;
    color: #37474F;

    .delays(5);
    .light(5);
}

@keyframes compare {
    0%,80%,100% {
        opacity: 0;
        margin-left: 1vw;
    }

    5%,75% {
        opacity: 1;
        margin-left: 0vw;
    }
}