:root {
    --spinner-size: 40px
}

@media screen and (max-width:1024px) {
    :root {
        --spinner-size: 30px
    }
}

.spinner {
    position: relative;
    width: var(--spinner-size);
    height: var(--spinner-size);
    border-radius: 50%;
    animation: 4s linear 1s normal none infinite running;
    animation-name: rotate;
    margin-bottom: calc(var(--spinner-size)/2)
}

.spinner span::after {
    position: absolute;
    width: calc(var(--spinner-size)/8);
    height: calc(var(--spinner-size)/8);
    border-radius: 50%;
    background-color: #fff;
    content: "";
    display: block;
    transform-origin: calc(var(--spinner-size)/2) calc(var(--spinner-size)/2);
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.pip-0::after {
    transform: rotate(0);
    animation-name: rotate-0;
    animation-delay: .9s
}

@keyframes rotate-0 {

    0%,
    20% {
        transform: rotate(0)
    }

    40%,
    60% {
        transform: rotate(180deg)
    }

    100%,
    80% {
        transform: rotate(360deg)
    }
}

.dot-1::after {
    transform: rotate(20deg);
    animation-name: rotate-1;
    animation-delay: 775ms
}

@keyframes rotate-1 {

    0%,
    20% {
        transform: rotate(20deg)
    }

    40%,
    60% {
        transform: rotate(200deg)
    }

    100%,
    80% {
        transform: rotate(380deg)
    }
}

.dot-2::after {
    transform: rotate(40deg);
    animation-name: rotate-2;
    animation-delay: 650ms
}

@keyframes rotate-2 {

    0%,
    20% {
        transform: rotate(40deg)
    }

    40%,
    60% {
        transform: rotate(220deg)
    }

    100%,
    80% {
        transform: rotate(400deg)
    }
}

.dot-3::after {
    transform: rotate(60deg);
    animation-name: rotate-3;
    animation-delay: 525ms
}

@keyframes rotate-3 {

    0%,
    20% {
        transform: rotate(60deg)
    }

    40%,
    60% {
        transform: rotate(240deg)
    }

    100%,
    80% {
        transform: rotate(420deg)
    }
}

.dot-4::after {
    transform: rotate(80deg);
    animation-name: rotate-4;
    animation-delay: .4s
}

@keyframes rotate-4 {

    0%,
    20% {
        transform: rotate(80deg)
    }

    40%,
    60% {
        transform: rotate(260deg)
    }

    100%,
    80% {
        transform: rotate(440deg)
    }
}

.dot-5::after {
    transform: rotate(100deg);
    animation-name: rotate-5;
    animation-delay: 275ms
}

@keyframes rotate-5 {

    0%,
    20% {
        transform: rotate(100deg)
    }

    40%,
    60% {
        transform: rotate(280deg)
    }

    100%,
    80% {
        transform: rotate(460deg)
    }
}

@keyframes opacity {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}