:root {
  --color-1: #44B3C2;
  --color-2: #F1A94E;
  --color-3: #E45641;
  --color-4: #5D4C46;
  --color-5: #7B8D8E;
}

.holder {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #EBE5DF;
  min-height: 400px;
}

.flip-preloader {
  width: 300px;
  height: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  perspective: 300px;
  perspective-origin: 50% 50%;
}

.flip-preloader.example-1 {
  top: 25%;
  height: 100px;
  width: 400px;
}

.flip-preloader.example-2 {
  top: 75%;
  height: 30px;
  width: 200px;
}

.flip-preloader 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;
}

.flip-preloader.example-1 div {
  animation-duration: 4s;
}

.flip-preloader.example-2 div {
  animation-duration: 2s;
}

.flip-preloader div:nth-child(1) {
  left: 0%;
  background-image: url('../img/bussiness.png'); /* Thay thế màu bằng hình ảnh */
  background-size: cover; /* Đảm bảo hình ảnh phủ toàn bộ div */
  animation-name: flipPreloader1;
  z-index: 1;
}

.flip-preloader div:nth-child(2) {
  left: 20%;
  background-image: url('../img/living.png'); /* Thay thế màu bằng hình ảnh */
  background-size: cover; /* Đảm bảo hình ảnh phủ toàn bộ div */
  animation-name: flipPreloader2;
  z-index: 2;
}

.flip-preloader div:nth-child(3) {
  left: 40%;
  background-image: url('../img/food.png'); /* Thay thế màu bằng hình ảnh */
  background-size: cover; /* Đảm bảo hình ảnh phủ toàn bộ div */
  animation-name: flipPreloader3;
  z-index: 3;
}

.flip-preloader div:nth-child(4) {
  left: 60%;
  background-image: url('../img/society.png'); /* Thay thế màu bằng hình ảnh */
  background-size: cover; /* Đảm bảo hình ảnh phủ toàn bộ div */
  animation-name: flipPreloader4;
  z-index: 4;
}

.flip-preloader div:nth-child(5) {
  left: 80%;
  background-image: url('../img/sight.png'); /* Thay thế màu bằng hình ảnh */
  background-size: cover; /* Đảm bảo hình ảnh phủ toàn bộ div */
  animation-name: flipPreloader5;
  z-index: 5;
}

@keyframes flipPreloader1 {
  0% { transform: rotateY(-180deg); opacity: 0; background-color: var(--color-1); }
  4% { background-color: var(--color-1); }
  5% { background-color: var(--color-5); }
  10% { transform: rotateY(0deg); opacity: 1; background-color: var(--color-5); }
  11% { transform-origin: 100% 50%; background-color: var(--color-1); }
  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: var(--color-1); }
  61% { opacity: 0; }
  100% { z-index: 10; transform: rotateY(180deg); opacity: 0; background-color: var(--color-1); }
}

@keyframes flipPreloader2 {
  0% { transform: rotateY(-180deg); background-color: var(--color-5); opacity: 0; }
  9% { opacity: 0; }
  10% { transform: rotateY(-180deg); opacity: 1; }
  15% { background-color: var(--color-5); }
  20% { background-color: var(--color-5); transform: rotateY(0deg); }
  21% { transform-origin: 100% 50%; background-color: var(--color-2); }
  48% { z-index: 2; }
  49% { z-index: 9; }
  60% { opacity: 1; transform: rotateY(0deg); background-color: var(--color-2); }
  61% { background-color: var(--color-1); transform-origin: 100% 50%; }
  64% { background-color: var(--color-1); }
  65% { background-color: var(--color-2); }
  70% { transform: rotateY(180deg); opacity: 1; }
  71% { opacity: 0; }
  100% { z-index: 9; background-color: var(--color-2); transform: rotateY(180deg); opacity: 0; }
}

@keyframes flipPreloader3 {
  0% { transform: rotateY(-180deg); background-color: var(--color-5); opacity: 0; }
  19% { opacity: 0; }
  20% { transform: rotateY(-180deg); opacity: 1; }
  25% { background-color: var(--color-5); }
  30% { background-color: var(--color-5); transform: rotateY(0deg); }
  31% { transform-origin: 100% 50%; background-color: var(--color-3); }
  48% { z-index: 3; }
  49% { z-index: 8; }
  70% { transform: rotateY(0deg); opacity: 1; background-color: var(--color-3); }
  71% { background-color: var(--color-2); transform-origin: 100% 50%; }
  74% { background-color: var(--color-2); }
  75% { background-color: var(--color-3); }
  80% { transform: rotateY(180deg); opacity: 1; }
  81% { opacity: 0; }
  100% { z-index: 8; background-color: var(--color-3); transform: rotateY(180deg); opacity: 0; }
}

@keyframes flipPreloader4 {
  0% { transform: rotateY(-180deg); background-color: var(--color-5); opacity: 0; }
  29% { opacity: 0; }
  30% { transform: rotateY(-180deg); opacity: 1; }
  35% { background-color: var(--color-5); }
  40% { background-color: var(--color-5); transform: rotateY(0deg); }
  41% { transform-origin: 100% 50%; background-color: var(--color-4); }
  48% { z-index: 4; }
  49% { z-index: 7; }
  80% { transform: rotateY(0deg); opacity: 1; background-color: var(--color-4); }
  81% { background-color: var(--color-3); transform-origin: 100% 50%; }
  84% { background-color: var(--color-3); }
  85% { background-color: var(--color-4); }
  90% { transform: rotateY(180deg); opacity: 1; }
  91% { opacity: 0; }
  100% { z-index: 7; background-color: var(--color-4); transform: rotateY(180deg); opacity: 0; }
}

@keyframes flipPreloader5 {
  0% { transform: rotateY(-180deg); background-color: var(--color-5); opacity: 0; }
  39% { opacity: 0; }
  40% { transform: rotateY(-180deg); opacity: 1; }
  45% { background-color: var(--color-5); }
  48% { z-index: 5; }
  49% { z-index: 6; }
  50% { background-color: var(--color-5); transform: rotateY(0deg); }
  51% { transform-origin: 100% 50%; background-color: var(--color-5); }
  90% { transform: rotateY(0deg); opacity: 1; background-color: var(--color-5); }
  91% { background-color: var(--color-4); transform-origin: 100% 50%; }
  94% { background-color: var(--color-4); }
  95% { background-color: var(--color-5); }
  100% { z-index: 6; background-color: var(--color-5); transform: rotateY(180deg); opacity: 0; }
}