/* ============================< LOADING BLINKING >============================ */

@keyframes load-blink {
    50% {
        color: transparent;
    }
}

/* Firefox < 16 */

@-moz-keyframes load-blink {
    50% {
        color: transparent;
    }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes load-blink {
    50% {
        color: transparent;
    }
}

/* Internet Explorer */

@-ms-keyframes load-blink {
    50% {
        color: transparent;
    }
}

/* Opera < 12.1 */

@-o-keyframes load-blink {
    50% {
        color: transparent;
    }
}

@keyframes load-fade-blink {
    50% {
        opacity: 0.3;
    }
}

/* Firefox < 16 */

@-moz-keyframes load-fade-blink {
    50% {
        opacity: 0.3;
    }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes load-fade-blink {
    50% {
        opacity: 0.3;
    }
}

/* Internet Explorer */

@-ms-keyframes load-fade-blink {
    50% {
        opacity: 0.3;
    }
}

/* Opera < 12.1 */

@-o-keyframes load-fade-blink {
    50% {
        opacity: 0.3;
    }
}

.loader-dot {
    -webkit-animation: 500ms load-blink infinite;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: 500ms load-blink infinite;
    /* Firefox < 16 */
    -ms-animation: 500ms load-blink infinite;
    /* Internet Explorer */
    -o-animation: 500ms load-blink infinite;
    /* Opera < 12.1 */
    animation: 500ms load-blink infinite;
}

.loader-dot:nth-child(2) {
    animation-delay: 125ms;
}

.loader-dot:nth-child(3) {
    animation-delay: 250ms;
}

.load-blink {
    -webkit-animation: 1s load-fade-blink infinite;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: 1s load-fade-blink infinite;
    /* Firefox < 16 */
    -ms-animation: 1s load-fade-blink infinite;
    /* Internet Explorer */
    -o-animation: 1s load-fade-blink infinite;
    /* Opera < 12.1 */
    animation: 1s load-fade-blink infinite;
}

.loading-dots__blue {
    color: var(--candy-blue);
}

.loading-dots__big {
    text-align: center;
    font-size: 25px;
    padding: 30px;
}

.loading-dots__big span {
    padding: 0px 10px;
}

.loading-dots__medium {
    text-align: center;
    font-size: 20px;
    padding: 10px;
}

.loading-dots__medium span {
    padding: 0px 7px;
}
.loading-dots__small {
    text-align: center;
    font-size: 15px;
    padding: 3px;
}

.loading-dots__small span {
    padding: 0px 5px;
}