.preloader {
  position: fixed;
  inset: 0;
  background: #eef8f7;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.preloader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.duo-loader {
  width: 78px;
  height: 44px;
  position: relative;
}

.duo-loader .ring {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
}

.duo-loader .ring-red { left: 0; }
.duo-loader .ring-cyan { left: 34px; }

.duo-loader .ring::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin: -3.5px 0 0 -3.5px;
  animation: duo-spin 1s linear infinite;
}

.duo-loader .ring-red::before {
  box-shadow:
    0 -16px 0 #e63956,
    11.3px -11.3px 0 #e63956,
    16px 0 0 #e63956,
    11.3px 11.3px 0 #e63956,
    0 16px 0 #e63956,
    -11.3px 11.3px 0 #e63956,
    -16px 0 0 #e63956,
    -11.3px -11.3px 0 #e63956;
}

.duo-loader .ring-cyan::before {
  box-shadow:
    0 -16px 0 #3ec6d4,
    11.3px -11.3px 0 #3ec6d4,
    16px 0 0 #3ec6d4,
    11.3px 11.3px 0 #3ec6d4,
    0 16px 0 #3ec6d4,
    -11.3px 11.3px 0 #3ec6d4,
    -16px 0 0 #3ec6d4,
    -11.3px -11.3px 0 #3ec6d4;
  animation-direction: reverse;
}

@keyframes duo-spin {
  to { transform: rotate(360deg); }
}