:root {
  --b: 5px; /* border thickness */
  --b-mobile: 3px; /* border thickness */
  --n: 10; /* number of dashes*/
  --g: 10deg; /* gap  between dashes*/
  --c: red; /* the color */
  --_m: /* we use +/-1deg between colors to avoid jagged edges */
    repeating-conic-gradient(#0000 0deg, #000 1deg 360deg, #0000 360deg 360deg),
    radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
  --_m-mobile: /* we use +/-1deg between colors to avoid jagged edges */
          repeating-conic-gradient(#0000 0deg, #000 1deg 360deg, #0000 360deg 360deg),
          radial-gradient(farthest-side,#0000 calc(98% - var(--b-mobile)),#000 calc(100% - var(--b-mobile)));
}

.preloader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 100001;
  opacity: 1;
  visibility: visible;
  -webkit-transition: 0.5s all ease-in-out;
  -o-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
}
.preloader.hiddenEl {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  -webkit-transition-delay: 0.8s;
       -o-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.preloader.hiddenEl .preloader__item {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
}
.preloader.hiddenEl .preloader__logo {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  -webkit-transition-delay: 0.4s;
       -o-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.preloader__item {
  width: min(366px, 25.4166666667vw); /* size */
  height: min(366px, 25.4166666667vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#A4C6F1, rgba(164, 198, 241, 0)) content-box;
  mask: var(--_m);
  -webkit-mask: var(--_m);
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;
  -webkit-animation: load 1s infinite linear;
          animation: load 1s infinite linear;
}
.preloader__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
  width: min(202px, 14.0277777778vw);
  height: min(91px, 6.3194444444vw);
}
.preloader__logo svg {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 576px) {
  .preloader__item {
    width: 250px; /* size */
    height: 250px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(#A4C6F1, rgba(164, 198, 241, 0)) content-box;
    mask: var(--_m-mobile);
    -webkit-mask: var(--_m-mobile);
    mask-composite: intersect;
    -webkit-mask-composite: destination-in;
    -webkit-animation: load 1s infinite steps(var(--n));
            animation: load 1s infinite steps(var(--n));
  }
  .preloader__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 2;
    width: 131px;
    height: 60px;
  }
  .preloader__logo svg {
    width: 100%;
    height: 100%;
  }
}

@-webkit-keyframes load {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes load {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}