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

@delay-between: 100ms;

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

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

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

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

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

    &:nth-child(@{i}) {
        background-color:  spin(#2196f3, @i*62);
    }

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


.icon {
  font-size: 164px;
}

div {
    animation: compare 3s ease-in-out infinite;
    opacity: 0;
    padding: 8vw;
    color: #37474F;

    .delays(12);
    .light(12);
}

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

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