.loading-animation-wrapper {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-color: #ebe5df;
    min-height: 400px;
}
.flipper {
    width: 300px;
    height: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    perspective: 300px;
    perspective-origin: 50% 50%;
}
.flipper div {
    position: absolute;
    width: 20%;
    height: 100%;
    background-color: red;
    left: 0%;
    box-sizing: border-box;
    transform-origin: 0% 50%;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.flipper div:nth-child(1) {
    left: 0%;
    background-color: #264653;
    animation-name: flipPreloader1;
    z-index: 1;
}
.flipper div:nth-child(2) {
    left: 20%;
    background-color: #2a9d8f;
    animation-name: flipPreloader2;
    z-index: 2;
}
.flipper div:nth-child(3) {
    left: 40%;
    background-color: #e9c46a;
    animation-name: flipPreloader3;
    z-index: 3;
}
.flipper div:nth-child(4) {
    left: 60%;
    background-color: #f4a261;
    animation-name: flipPreloader4;
    z-index: 4;
}
.flipper div:nth-child(5) {
    left: 80%;
    background-color: #e76f51;
    animation-name: flipPreloader5;
    z-index: 5;
}
@keyframes flipPreloader1 {
    0% {
        transform: rotateY(-180deg);
        opacity: 0;
        transform-origin: 0% 50%;
        background-color: #264653;
   }
    4% {
        background-color: #264653;
   }
    5% {
        background-color: #e76f51;
   }
    10% {
        transform: rotateY(0deg);
        opacity: 1;
        background-color: #e76f51;
        transform-origin: 0% 50%;
   }
    11% {
        transform-origin: 100% 50%;
        background-color: #264653;
   }
    48% {
        z-index: 1;
   }
    49% {
        z-index: 10;
   }
    50% {
        transform: rotateY(0deg);
   }
    51% {
        transform-origin: 100% 50%;
   }
    60% {
        transform: rotateY(180deg);
        opacity: 1;
        background-color: #264653;
   }
    61% {
        opacity: 0;
   }
    100% {
        z-index: 10;
        transform: rotateY(180deg);
        opacity: 0;
        transform-origin: 100% 50%;
        background-color: #264653;
   }
}
@keyframes flipPreloader2 {
    0% {
        transform: rotateY(-180deg);
        background-color: #e76f51;
        opacity: 0;
        transform-origin: 0% 50%;
   }
    9% {
        opacity: 0;
   }
    10% {
        transform: rotateY(-180deg);
        opacity: 1;
   }
    15% {
        background-color: #e76f51;
   }
    20% {
        background-color: #e76f51;
        transform: rotateY(0deg);
        transform-origin: 0% 50%;
   }
    21% {
        transform-origin: 100% 50%;
        background-color: #2a9d8f;
   }
    48% {
        z-index: 2;
   }
    49% {
        z-index: 9;
   }
    60% {
        opacity: 1;
        transform: rotateY(0deg);
        background-color: #2a9d8f;
   }
    61% {
        background-color: #264653;
        transform-origin: 100% 50%;
   }
    64% {
        background-color: #264653;
   }
    65% {
        background-color: #2a9d8f;
   }
    70% {
        transform: rotateY(180deg);
        opacity: 1;
   }
    71% {
        opacity: 0;
   }
    100% {
        z-index: 9;
        background-color: #2a9d8f;
        transform: rotateY(180deg);
        opacity: 0;
        transform-origin: 100% 50%;
   }
}
@keyframes flipPreloader3 {
    0% {
        transform: rotateY(-180deg);
        background-color: #e76f51;
        opacity: 0;
        transform-origin: 0% 50%;
   }
    19% {
        opacity: 0;
   }
    20% {
        transform: rotateY(-180deg);
        opacity: 1;
   }
    25% {
        background-color: #e76f51;
   }
    30% {
        background-color: #e76f51;
        transform: rotateY(0deg);
        transform-origin: 0% 50%;
   }
    31% {
        transform-origin: 100% 50%;
        background-color: #e9c46a;
   }
    48% {
        z-index: 3;
   }
    49% {
        z-index: 8;
   }
    70% {
        transform: rotateY(0deg);
        opactiy: 1;
        background-color: #e9c46a;
   }
    71% {
        background-color: #2a9d8f;
        transform-origin: 100% 50%;
   }
    74% {
        background-color: #2a9d8f;
   }
    75% {
        background-color: #e9c46a;
   }
    80% {
        transform: rotateY(180deg);
        opacity: 1;
   }
    81% {
        opacity: 0;
   }
    100% {
        z-index: 8;
        background-color: #e9c46a;
        transform: rotateY(180deg);
        opacity: 0;
        transform-origin: 100% 50%;
   }
}
@keyframes flipPreloader4 {
    0% {
        transform: rotateY(-180deg);
        background-color: #e76f51;
        opacity: 0;
        transform-origin: 0% 50%;
   }
    29% {
        opacity: 0;
   }
    30% {
        transform: rotateY(-180deg);
        opacity: 1;
   }
    35% {
        background-color: #e76f51;
   }
    40% {
        background-color: #e76f51;
        transform: rotateY(0deg);
        transform-origin: 0% 50%;
   }
    41% {
        transform-origin: 100% 50%;
        background-color: #f4a261;
   }
    48% {
        z-index: 4;
   }
    49% {
        z-index: 7;
   }
    80% {
        transform: rotateY(0deg);
        opacity: 1;
        background-color: #f4a261;
   }
    81% {
        background-color: #e9c46a;
        transform-origin: 100% 50%;
   }
    84% {
        background-color: #e9c46a;
   }
    85% {
        background-color: #f4a261;
   }
    90% {
        transform: rotateY(180deg);
        opacity: 1;
   }
    91% {
        opacity: 0;
   }
    100% {
        z-index: 7;
        background-color: #f4a261;
        transform: rotateY(180deg);
        opacity: 0;
        transform-origin: 100% 50%;
   }
}
@keyframes flipPreloader5 {
    0% {
        transform: rotateY(-180deg);
        background-color: #e76f51;
        opacity: 0;
        transform-origin: 0% 50%;
   }
    39% {
        opacity: 0;
   }
    40% {
        transform: rotateY(-180deg);
        opacity: 1;
   }
    45% {
        background-color: #e76f51;
   }
    48% {
        z-index: 5;
   }
    49% {
        z-index: 6;
   }
    50% {
        background-color: #e76f51;
        transform: rotateY(0deg);
        transform-origin: 0% 50%;
   }
    51% {
        transform-origin: 100% 50%;
        background-color: #e76f51;
   }
    90% {
        transform: rotateY(0deg);
        opacity: 1;
        background-color: #e76f51;
   }
    91% {
        background-color: #f4a261;
        transform-origin: 100% 50%;
   }
    94% {
        background-color: #f4a261;
   }
    95% {
        background-color: #e76f51;
   }
    100% {
        z-index: 6;
        background-color: #e76f51;
        transform: rotateY(180deg);
        opacity: 0;
        transform-origin: 100% 50%;
   }
}