.logo {
    height: 30px;
    margin: 0 6px;
    border-radius: 100%;
    box-shadow: inset 0 0 7px 3px #c7c7c7;
    padding: 6px;
    width: 30px;
}

.delta {
    position: relative;
    height: 56px;
    width: 56px;
}

.delta > div {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background-color: #909090;
    width: 30%;
    height: 46%;
    position: absolute;
    top: 50%;
    left: 35%;
    transform-origin: top center;
    animation-fill-mode: forwards;
}


@keyframes delta-1 {
    0% {
        opacity: 0;
        transform: rotate(-360deg) scale(0.01);
    }

    20% {
        opacity: 100;
        transform: rotate(0) scale(1);
    }

    60% {
        opacity: 100;
        transform: rotate(0) scale(1);
    }

    80% {
        opacity: 0;
        transform: rotate(720deg) scale(0.01);
    }

    100% {
        transform: rotate(720deg) scale(0.01);
    }
}

@keyframes delta-2 {
    0% {
        opacity: 0;
        transform: rotate(-340deg) scale(0.01);
    }

    20% {
        opacity: 100;
        transform: rotate(40deg) scale(1);
    }

    60% {
        opacity: 100;
        transform: rotate(40deg) scale(1);
    }

    80% {
        opacity: 0;
        transform: rotate(720deg) scale(0.01);
    }

    100% {
        transform: rotate(720deg) scale(0.01);
    }
}

@keyframes delta-3 {
    0% {
        opacity: 0;
        transform: rotate(-280deg) scale(0.01);
    }

    20% {
        opacity: 100;
        transform: rotate(80deg) scale(1);
    }

    60% {
        opacity: 100;
        transform: rotate(80deg) scale(1);
    }

    80% {
        opacity: 0;
        transform: rotate(720deg) scale(0.01);
    }

    100% {
        transform: rotate(720deg) scale(0.01);
    }
}

@keyframes delta-4 {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.01);
    }

    20% {
        opacity: 100;
        transform: rotate(120deg) scale(1);
    }

    60% {
        opacity: 100;
        transform: rotate(120deg) scale(1);
    }

    80% {
        opacity: 0;
        transform: rotate(720deg) scale(0.01);
    }

    100% {
        transform: rotate(720deg) scale(0.01);
    }
}

@keyframes delta-5 {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.01);
    }

    20% {
        opacity: 100;
        transform: rotate(200deg) scale(1);
    }

    60% {
        opacity: 100;
        transform: rotate(200deg) scale(1);
    }

    80% {
        opacity: 0;
        transform: rotate(720deg) scale(0.01);
    }

    100% {
        transform: rotate(720deg) scale(0.01);
    }
}

@keyframes delta-6 {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.01);
    }

    20% {
        opacity: 100;
        transform: rotate(240deg) scale(1);
    }

    60% {
        opacity: 100;
        transform: rotate(240deg) scale(1);
    }

    80% {
        opacity: 0;
        transform: rotate(720deg) scale(0.01);
    }

    100% {
        transform: rotate(720deg) scale(0.01);
    }
}

@keyframes delta-7 {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.01);
    }

    20% {
        opacity: 100;
        transform: rotate(280deg) scale(1);
    }

    60% {
        opacity: 100;
        transform: rotate(280deg) scale(1);
    }

    80% {
        opacity: 0;
        transform: rotate(720deg) scale(0.01);
    }

    100% {
        transform: rotate(720deg) scale(0.01);
    }
}

@keyframes delta-8 {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.01);
    }

    20% {
        opacity: 100;
        transform: rotate(320deg) scale(1);
    }

    60% {
        opacity: 100;
        transform: rotate(320deg) scale(1);
    }

    80% {
        opacity: 0;
        transform: rotate(720deg) scale(0.01);
    }

    100% {
        transform: rotate(720deg) scale(0.01);
    }
}

@keyframes delta-9 {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.01);
    }

    20% {
        opacity: 100;
        transform: rotate(36deg) scale(1);
    }

    60% {
        opacity: 100;
        transform: rotate(36deg) scale(1);
    }

    80% {
        opacity: 0;
        transform: rotate(720deg) scale(0.01);
    }

    100% {
        transform: rotate(720deg) scale(0.01);
    }
}

@keyframes delta-10 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.01);
        transform: rotate(0deg) scale(0.01);
    }

    20% {
        opacity: 100;
        transform: rotate(0deg) scale(1);
    }

    60% {
        opacity: 100;
        transform: rotate(0deg) scale(1);
    }

    80% {
        opacity: 0;
        transform: rotate(720deg) scale(0.01);
    }

    100% {
        transform: rotate(720deg) scale(0.01);
    }
}


.delta > div:nth-child(1) {
    transform: rotate(0deg);
    background-color: #70ad47;
    animation: delta-1 4s linear infinite;
    animation-delay: .20s;
}

.delta > div:nth-child(2) {
    transform: rotate(40deg);
    background-color: #ed7d31;
    animation: delta-2 4s linear infinite;
    animation-delay: .25s;
}

.delta > div:nth-child(3) {
    transform: rotate(80deg);
    background-color: #ed7d31;
    animation: delta-3 4s linear infinite;
    animation-delay: .30s;
}

.delta > div:nth-child(4) {
    transform: rotate(120deg);
    background-color: #5b9bd5;
    animation: delta-4 4s linear infinite;
    animation-delay: .35s;
}

.delta > div:nth-child(5) {
    transform: rotate(200deg);
    background-color: #5b9bd5;
    animation: delta-5 4s linear infinite;
    animation-delay: 0s;
}

.delta > div:nth-child(6) {
    transform: rotate(240deg);
    background-color: #ffc000;
    animation: delta-6 4s linear infinite;
    animation-delay: .05s;
}

.delta > div:nth-child(7) {
    transform: rotate(280deg);
    background-color: #ffc000;
    animation: delta-7 4s linear infinite;
    animation-delay: .10s;
}

.delta > div:nth-child(8) {
    transform: rotate(320deg);
    background-color: #70ad47;
    animation: delta-8 4s linear infinite;
    animation-delay: .15s;
}