.loader_box .loader {
    display: flex;
    font-size: 2em;
}
.loader_box .loader .dots {
    display: flex;
    position: relative;
    top: 20px;
    left: -10px;
    width: 100px;
    animation: dots 2s ease infinite 1s;
}
.loader_box .loader .dots div {
    position: relative;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 100%;
    background-color: #036C91;
}
.loader_box .loader .dots div:nth-child(1) {
    width: 0px;
    height: 0px;
    margin: 5px;
    margin-right: 15px;
    animation: show-dot 2s ease-out infinite 1s;
}
.loader_box .loader .dots div:nth-child(4) {
    background-color: transparent;
    animation: dot-fall-left 2s linear infinite 1s;
}
.loader_box .loader .dots div:nth-child(4):before {
    position: absolute;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 100%;
    background-color: #036C91;
    content: '';
    animation: dot-fall-top 2s cubic-bezier(0.46, 0.06, 0.94, 0.54) infinite 1s;
}
@-moz-keyframes dots {
    0% {
        left: -10px;
    }
    20%, 100% {
        left: 10px;
    }
}
@-webkit-keyframes dots {
    0% {
        left: -10px;
    }
    20%, 100% {
        left: 10px;
    }
}
@-o-keyframes dots {
    0% {
        left: -10px;
    }
    20%, 100% {
        left: 10px;
    }
}
@keyframes dots {
    0% {
        left: -10px;
    }
    20%, 100% {
        left: 10px;
    }
}
@-moz-keyframes show-dot {
    0%, 20% {
        width: 0px;
        height: 0px;
        margin: 5px;
        margin-right: 15px;
    }
    30%, 100% {
        width: 10px;
        height: 10px;
        margin: 0px;
        margin-right: 10px;
    }
}
@-webkit-keyframes show-dot {
    0%, 20% {
        width: 0px;
        height: 0px;
        margin: 5px;
        margin-right: 15px;
    }
    30%, 100% {
        width: 10px;
        height: 10px;
        margin: 0px;
        margin-right: 10px;
    }
}
@-o-keyframes show-dot {
    0%, 20% {
        width: 0px;
        height: 0px;
        margin: 5px;
        margin-right: 15px;
    }
    30%, 100% {
        width: 10px;
        height: 10px;
        margin: 0px;
        margin-right: 10px;
    }
}
@keyframes show-dot {
    0%, 20% {
        width: 0px;
        height: 0px;
        margin: 5px;
        margin-right: 15px;
    }
    30%, 100% {
        width: 10px;
        height: 10px;
        margin: 0px;
        margin-right: 10px;
    }
}
@-moz-keyframes dot-fall-left {
    0%, 5% {
        left: 0px;
    }
    100% {
        left: 200px;
    }
}
@-webkit-keyframes dot-fall-left {
    0%, 5% {
        left: 0px;
    }
    100% {
        left: 200px;
    }
}
@-o-keyframes dot-fall-left {
    0%, 5% {
        left: 0px;
    }
    100% {
        left: 200px;
    }
}
@keyframes dot-fall-left {
    0%, 5% {
        left: 0px;
    }
    100% {
        left: 200px;
    }
}
@-moz-keyframes dot-fall-top {
    0%, 5% {
        top: 0px;
    }
    30%, 100% {
        top: 50vh;
    }
}
@-webkit-keyframes dot-fall-top {
    0%, 5% {
        top: 0px;
    }
    30%, 100% {
        top: 50vh;
    }
}
@-o-keyframes dot-fall-top {
    0%, 5% {
        top: 0px;
    }
    30%, 100% {
        top: 50vh;
    }
}
@keyframes dot-fall-top {
    0%, 5% {
        top: 0px;
    }
    30%, 100% {
        top: 50vh;
    }
}