.loader-anim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999999999;
    opacity: 1;
    visibility: visible;
    background: #f4f4fb !important;
    transition: opacity 0.3s ease 5s, visibility 0.3s ease 5s !important;
  }

  .loader-anim.hidden {
    opacity: 0;
    visibility: hidden;
  }

  .loader-anim .anim-el {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    margin: 0;
  }

  .loader-anim .anim-el:not(.step-6) {
    max-width: 80vw;
  }

  .loader-anim .step-1 {
    visibility: hidden;
    animation: showing 0.4s ease forwards, hiding 0.2s ease forwards 0.4s;
  }

  .loader-anim .step-2 {
    visibility: hidden;
    animation: showing 0.4s ease forwards 0.6s, hiding 0.2s ease forwards 1s;
  }

  .loader-anim .step-3 {
    visibility: hidden;
    animation: showing 0.4s ease forwards 1.2s,
      hiding 0.2s ease forwards 1.6s;
  }

  .loader-anim .step-4 {
    visibility: hidden;
    animation: showing 0.4s ease forwards 1.8s,
      hiding 0.2s ease forwards 2.2s;
  }

  .loader-anim .step-5 {
    visibility: hidden;
    z-index: 2;
    animation: showing 0.4s ease forwards 2.4s,
      hiding 0.4s ease forwards 2.8s;
  }

  .loader-anim .step-6 {
    opacity: 0;
    width: 220vw;
    height: 220vw;
    border-radius: 50%;
    animation: cliping 0.5s ease forwards 2.4s,
      fliping 0.5s ease forwards 4s,
      clipingBackwards 0.5s ease forwards 4.5s,
      flipingBackwards 0.5s ease forwards 4.5s;
  }

  .loader-anim .step-7 {
    opacity: 0;
    width: auto;
    height: auto;
    animation: moveRigth 0.5s ease forwards 3s,
      moveRigthBackwards 0.5s ease forwards 3.5s;
  }

  .loader-anim .step-8 {
    opacity: 0;
    width: auto;
    height: auto;
    animation: moveLeft 0.5s ease forwards 3s,
      moveLeftBackwards 0.5s ease forwards 3.5s;
  }

  .loader-anim .step-9 {
    opacity: 0;
    width: auto;
    height: auto;
    animation: showingOpacity 0.5s ease forwards 4.5s;
  }

  @keyframes hiding {
    to {
      visibility: hidden;
    }

    from {
      visibility: visible;
    }
  }

  @keyframes showingOpacity {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes showing {
    from {
      visibility: hidden;
    }

    to {
      visibility: visible;
    }
  }

  @keyframes flipingBackwards {
    from {
      opacity: 1;
      transform: rotateY(0deg) translate(-50%, -50%);
      transform-style: preserve-3d;
      transform-origin: top left;
    }

    to {
      opacity: 1;
      transform: rotateY(-1turn) translate(-50%, -50%);
      transform-style: preserve-3d;
      transform-origin: top left;
    }
  }

  @keyframes fliping {
    from {
      transform: rotateY(0deg) translate(-50%, -50%);
      transform-style: preserve-3d;
      transform-origin: top left;
    }

    to {
      transform: rotateY(1turn) translate(-50%, -50%);
      transform-style: preserve-3d;
      transform-origin: top left;
    }
  }

  @keyframes moveLeftBackwards {
    100% {
      opacity: 0;
      transform: translate(-50%, -50%);
    }

    0% {
      opacity: 1;
      transform: translate(calc(-50% - 150px), calc(-50% + 150px));
    }
  }

  @keyframes moveLeft {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%);
    }

    100% {
      opacity: 1;
      transform: translate(calc(-50% - 150px), calc(-50% + 150px));
    }
  }

  @keyframes moveRigthBackwards {
    100% {
      opacity: 0;
      transform: translate(-50%, -50%);
    }

    0% {
      opacity: 1;
      transform: translate(calc(-50% + 150px), calc(-50% - 150px));
    }
  }

  @keyframes moveRigth {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%);
    }

    100% {
      opacity: 1;
      transform: translate(calc(-50% + 150px), calc(-50% - 150px));
    }
  }

  @keyframes clipingBackwards {
    to {
      opacity: 0;
      width: 220vw;
      height: 220vw;
      transform: translate(-50%, -50%);
    }

    from {
      opacity: 1;
      width: 160px;
      height: 160px;
      transform: translate(-50%, -50%);
    }
  }

  @keyframes cliping {
    from {
      opacity: 0;
      width: 220vw;
      height: 220vw;
      transform: translate(-50%, -50%);
    }

    to {
      opacity: 1;
      width: 160px;
      height: 160px;
      transform: translate(-50%, -50%);
    }
  }

  @media (min-width: 1000px) {
    .loader-anim .step-6 {
      width: 120vw;
      height: 120vw;
    }

    @keyframes clipingBackwards {
      to {
        opacity: 0;
        width: 120vw;
        height: 120vw;
        transform: translate(-50%, -50%);
      }

      from {
        opacity: 1;
        width: 160px;
        height: 160px;
        transform: translate(-50%, -50%);
      }
    }

    @keyframes cliping {
      from {
        opacity: 0;
        width: 120vw;
        height: 120vw;
        transform: translate(-50%, -50%);
      }

      to {
        opacity: 1;
        width: 160px;
        height: 160px;
        transform: translate(-50%, -50%);
      }
    }
  }