.loader li:nth-child(0) {
    background: #d36821;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.loader:nth-child(2) li:nth-child(0) {
    background: #d30621;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.loader:nth-child(3) li:nth-child(0) {
    background: #d31221;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.loader li:nth-child(1) {
    background: #d32721;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.loader:nth-child(2) li:nth-child(1) {
    background: #d35b21;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.loader:nth-child(3) li:nth-child(1) {
    background: #d32121;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.loader li:nth-child(2) {
    background: #d32121;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.loader:nth-child(2) li:nth-child(2) {
    background: #d31221;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.loader:nth-child(3) li:nth-child(2) {
    background: #d35d21;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.loader li:nth-child(3) {
    background: #d36321;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.loader:nth-child(2) li:nth-child(3) {
    background: #d30a21;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.loader:nth-child(3) li:nth-child(3) {
    background: #d35721;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.loader li:nth-child(4) {
    background: #d33021;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.loader:nth-child(2) li:nth-child(4) {
    background: #d32521;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.loader:nth-child(3) li:nth-child(4) {
    background: #d32a21;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.loader li:nth-child(5) {
    background: #d30721;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.loader:nth-child(2) li:nth-child(5) {
    background: #d34421;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.loader:nth-child(3) li:nth-child(5) {
    background: #d33d21;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.loader li:nth-child(6) {
    background: #d31621;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.loader:nth-child(2) li:nth-child(6) {
    background: #d31c21;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.loader:nth-child(3) li:nth-child(6) {
    background: #d34921;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.loader li:nth-child(7) {
    background: #d36521;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

.loader:nth-child(2) li:nth-child(7) {
    background: #d33021;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

.loader:nth-child(3) li:nth-child(7) {
    background: #d31f21;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

.loader li:nth-child(8) {
    background: #d35821;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}

.loader:nth-child(2) li:nth-child(8) {
    background: #d32f21;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}

.loader:nth-child(3) li:nth-child(8) {
    background: #d36b21;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}

.loader li:nth-child(9) {
    background: #d38121;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}

.loader:nth-child(2) li:nth-child(9) {
    background: #d35821;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}

.loader:nth-child(3) li:nth-child(9) {
    background: #d30221;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}

.loader li:nth-child(10) {
    background: #d32121;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.loader:nth-child(2) li:nth-child(10) {
    background: #d32921;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.loader:nth-child(3) li:nth-child(10) {
    background: #d35321;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.loader li:nth-child(11) {
    background: #d37421;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}

.loader:nth-child(2) li:nth-child(11) {
    background: #d32121;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}

.loader:nth-child(3) li:nth-child(11) {
    background: #d31621;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}

.loader li:nth-child(12) {
    background: #d32621;
    -webkit-animation: slide 1s ease-in-out infinite;
    animation: slide 1s ease-in-out infinite;
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}

.loader:nth-child(2) li:nth-child(12) {
    background: #d33d21;
    -webkit-animation: slide2 1s ease-in-out infinite;
    animation: slide2 1s ease-in-out infinite;
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}

.loader:nth-child(3) li:nth-child(12) {
    background: #d34e21;
    -webkit-animation: slide3 0.6s ease-in-out infinite;
    animation: slide3 0.6s ease-in-out infinite;
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}



.loader-text h3 span:nth-child(2) {
    -webkit-animation: fade 1s infinite;
    animation: fade 1s infinite;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.loader-text h3 span:nth-child(3) {
    -webkit-animation: fade 1s infinite;
    animation: fade 1s infinite;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.loader-text h3 span:nth-child(4) {
    -webkit-animation: fade 1s infinite;
    animation: fade 1s infinite;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

@-webkit-keyframes slide {
    0% {
        -webkit-transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(1.52rem);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@keyframes slide {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(1.52rem);
        -ms-transform: translateX(1.52rem);
        transform: translateX(1.52rem);
    }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes slide2 {
    0% {
        -webkit-transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(-1.52rem);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@keyframes slide2 {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(-1.52rem);
        -ms-transform: translateX(-1.52rem);
        transform: translateX(-1.52rem);
    }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes slide3 {
    0% {
        -webkit-transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(-1.92rem);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@keyframes slide3 {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(-1.92rem);
        -ms-transform: translateX(-1.92rem);
        transform: translateX(-1.92rem);
    }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes fade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fade2 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade2 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


ul, li {
    margin: 0;
    padding: 0;
}

.vert {
    position: relative;
    top: 50%;
    display: none;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-animation: fade2 1.5s ease-in-out;
    animation: fade2 1.5s ease-in-out;
}

.loader__container {
    position: relative;
    width: 10rem;
    height: 10rem;
    margin: auto;
}

.loader {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

    .loader:first-child {
        -webkit-transform: translateX(-0.8rem);
        -ms-transform: translateX(-0.8rem);
        transform: translateX(-0.8rem);
    }

    .loader:nth-child(3) {
        -webkit-transform: translateX(0.44444rem);
        -ms-transform: translateX(0.44444rem);
        transform: translateX(0.44444rem);
    }

        .loader:nth-child(3) li {
            width: 0.24rem;
            height: 0.24rem;
            margin-top: 0.23529rem;
        }

    .loader li {
        width: 0.4rem;
        height: 0.4rem;
        margin: auto;
        display: block;
        border-radius: 50%;
        margin-top: 0.1rem;
    }

.loader-text {
    margin-top: 1.6rem;
    text-align: center;
}

    .loader-text h3 {
        position: relative;
        font-size: 35px;
        color: white;
        font-weight: 400;
        padding: 0;
        margin: 0;
        display: inline;
        text-transform: uppercase;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


    .loader-text span {
        margin-right: 2px;
    }

        .loader-text span:first-child {
            margin-left: 2px;
        }