.ibb-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f8f5f3;
  z-index: 99;
  font-size: 0;
  color: #353642;
  display: block;
  /* animation: fade-out 750ms linear 3333ms forwards, out-of-display 333ms linear 3333ms forwards; */
  animation: fade-out 500ms linear 5500ms forwards, out-of-display 500ms linear 5500ms forwards;
  font-family: Roboto;
  font-style: italic;
  font-weight: bold;
}
/* 
.ibb-preloader svg:last-of-type {
  margin-left: -8px;
  animation: margin-left 1s linear 750ms forwards;
} */

/* .ibb-preloader svg:first-of-type {
  margin-right: -7px;
} */

.ibb-preloader span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* opacity: 0; */
  /* transform-origin: left top; */
  transform-origin: center center;

  /* animation: scale-logo 250ms linear forwards, scale-x; */
  /* animation: trans 333ms linear forwards 2666ms; */
  animation: trans 500ms linear forwards 5000ms;
  white-space: nowrap;
  padding-top: 10px;
}

.ibb-preloader span #ibb-preloader-i {
  /* animation: down-to-center 666ms linear forwards, fade-out 333ms linear forwards 1000ms; */
  animation: down-to-center 1000ms linear forwards, fade-out 500ms linear forwards 1500ms;
  margin-left: -70px;
  width: 71px;
  /* height: 170px; */
}

.ibb-preloader span #ibb-preloader-b1 {
  /* animation: top-to-center 333ms linear forwards, fade-out 333ms linear forwards 1000ms; */
  animation: top-to-center 500ms linear forwards, fade-out 500ms linear forwards 1500ms;
  margin-left: -18px;
  width: 149px;
  /* height: 170px; */
}

.ibb-preloader span #ibb-preloader-b2 {
  /* animation: top-to-center 1000ms linear forwards, fade-out 333ms linear forwards 1000ms; */
  transform: translateY(-100vh);
  animation: top-to-center 1000ms linear forwards 500ms, fade-out 500ms linear forwards 1500ms;
  margin-left: -25px;
  width: 118px;
  /* height: 170px; */
}

/* .ibb-preloader span svg:nth-child(1) {
  margin: 0 -20px 0 0;
}

.ibb-preloader span svg:nth-child(3) {
  margin: 0 -20px;
} */

.ibb-preloader span #ibb-preloader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* animation: fade-in 333ms linear forwards 1000ms, scale-out 333ms linear forwards 1333ms, */
  animation: fade-in 500ms linear forwards 1500ms, scale-out 750ms linear forwards 2000ms,
    scale-in 750ms linear forwards 4500ms;
  transform-origin: top left;
  width: 381px;
  /* height: 176px; */
}

.ibb-preloader span #ibb-preloader-full {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: scaleY(0);
  /* animation: scale-in 333ms linear forwards 1666ms, scale-out 333ms linear forwards 2000ms; */
  animation: scale-in 750ms ease-in-out forwards 3000ms, scale-out 750ms ease-in-out forwards 3500ms;
  width: 471px;
  /* height: 72px; */
}

@media (max-width: 640px) {
  .ibb-preloader span #ibb-preloader-i {
    width: calc(71px / 2);
    margin-left: calc(-70px / 2);
  }
  .ibb-preloader span #ibb-preloader-b1 {
    width: calc(149px / 2);
    margin-left: calc(-18px / 2);
  }
  .ibb-preloader span #ibb-preloader-b2 {
    width: calc(118px / 2);
    margin-left: calc(-25px / 2);
  }
  .ibb-preloader span #ibb-preloader-logo {
    width: calc(381px / 2);
  }
  .ibb-preloader span #ibb-preloader-full {
    width: calc(471px / 2);
  }
}

@keyframes top-to-center {
  0% {
    transform: translateY(-100vh);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes down-to-center {
  0% {
    transform: translateY(100vh);
  }

  100% {
    transform: translateY(0);
  }
}

/* @keyframes scale-logo {
  0% {
    transform: scaleY(0) translate(-50%, -50%);
    opacity: 1;
  }
  100% {
    transform: scaleY(1) translate(-50%, -50%);
    opacity: 1;
  }
} */

@keyframes scale-out {
  0% {
    transform: scaleY(1) translate(-50%, -50%);
  }
  100% {
    transform: scaleY(0) translate(-50%, -50%);
  }
}

@keyframes scale-in {
  0% {
    transform: scaleY(0) translate(-50%, -50%);
  }
  100% {
    transform: scaleY(1) translate(-50%, -50%);
  }
}

@keyframes font-in {
  0% {
    font-size: 0;
  }
  50% {
    font-size: 48px;
  }
  100% {
    font-size: 0;
  }
}

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

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

@keyframes back {
  from {
    background-color: #020737;
  }
  to {
    background-color: #fff;
  }
}

@keyframes trans {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* 50% {
    top: 25%;
    left: calc((100vw - 750px) / 2);
    transform: translate(-50%, -50%);
  } */
  100% {
    /* top: 10px; */
    top: 0;
    top: -60px;
    left: calc((100vw - 1610px) / 2);
    transform: scale(0.23) translate(0, 0);
  }
}

@media (max-width: 1440px) {
  @keyframes trans {
    from {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    to {
      top: 10px;
      left: calc((100vw - 1170px) / 2);
      transform: scale(0.25) translate(0, 0);
    }
  }
}

@media (max-width: 1200px) {
  @keyframes trans {
    from {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    to {
      top: 10px;
      left: 28px;
      transform: scale(0.25) translate(0, 0);
    }
  }
  @keyframes font-in {
    0% {
      font-size: 0;
    }
    50% {
      font-size: 36px;
    }
    100% {
      font-size: 0;
    }
  }
}

@media (max-width: 640px) {
  @keyframes trans {
    from {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    to {
      top: 5px;
      left: 12px;
      transform: scale(0.45) translate(0, 0);
    }
  }
  @keyframes font-in {
    0% {
      font-size: 0;
    }
    50% {
      font-size: 28px;
    }
    100% {
      font-size: 0;
    }
  }
}

@keyframes margin-left {
  0% {
    margin-left: -8px;
  }
  50% {
    margin-left: 0;
  }
  100% {
    margin-left: -8px;
  }
}

@keyframes out-of-display {
  from {
    z-index: 99;
  }
  to {
    z-index: -100;
  }
}