.loader--dot {
    animation-name: loader;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    height: 5px;
    width: 5px;
    border-radius: 100%;
    position: absolute;
    border: 1px solid white;
    background-color: #002654;
}

.loader {
    display: none;
    width: 390px;
}

.loader-show {
    display: block !important;
}

.loader--dot:first-child {
    animation-delay: 0.5s;
}

.loader--dot:nth-child(2) {
    animation-delay: 0.4s;
}

.loader--dot:nth-child(3) {
    animation-delay: 0.3s;
}

.loader--dot:nth-child(4) {
    animation-delay: 0.2s;
}

.loader--dot:nth-child(5) {
    animation-delay: 0.1s;
}

.loader--dot:nth-child(6) {
    animation-delay: 0s;
}

@media screen and (max-width: 510px) {
    @keyframes loader {
        15% {
            transform: translateX(0);
        }
        45% {
            transform: translateX(calc(100vw - 125px));
        }
        65% {
            transform: translateX(calc(100vw - 125px));
        }
        95% {
            transform: translateX(0);
        }
    }
}

@media screen and (min-width: 511px) and (max-width: 589px) {
    @keyframes loader {
        15% {
            transform: translateX(0);
        }
        45% {
            transform: translateX(calc(100vw - (125px + 100vw - 510px)));
        }
        65% {
            transform: translateX(calc(100vw - (125px + 100vw - 510px)));
        }
        95% {
            transform: translateX(0);
        }
    }
}

@media screen and (min-width: 591px) {
    @keyframes loader {
        15% {
            transform: translateX(0);
        }
        45% {
            transform: translateX(385px);
        }
        65% {
            transform: translateX(385px);
        }
        95% {
            transform: translateX(0);
        }
    }
}