.imageGrid {
  z-index: 29;
  max-height: 60%;
  max-width: 60%;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.loadersymbol01 {
  z-index: 30;
  width: 1224px;
  height: 1824px;
  max-width: 200%;
  max-height: 200%;
  position: absolute;
  transform-origin: 60vw 50vh;
  animation: rotate 10s linear infinite;
  overflow: hidden;
}

.loadersymbol02 {
  z-index: 30;
  width: 1024px;
  height: 2024px;
  max-width: 200%;
  max-height: 200%;
  position: absolute;
  transform-origin: 60vw 50vh;
  animation: rotate 10s linear infinite;
  animation-delay: -5s;
  overflow: hidden;
}

.textLoading {
  max-height: 16vmin;
  max-width: 16vmin;
  min-width: 98px;
  width: auto;
  height: auto;
  position: absolute;
  top: -30%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.loader {
  z-index: 30;
  --size: 184px;
  --stroke-size: 0.3rem;
  --diff: calc(calc(var(--size) / 2) - var(--stroke-size));
  position: absolute;
  background-image: conic-gradient(#000, transparent 85%);
  width: var(--size);
  height: var(--size);
  top: 0px;
  bottom: 0px;
  visibility: hidden;
  left: 0px;
  right: 0px;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle var(--diff), transparent 99%, #fff 100%);
  mask-image: radial-gradient(circle var(--diff), transparent 99%, #fff 100%);
  animation: rotate 2s linear infinite;
  margin: auto;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes passingNumbers {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-55px);
  }
}

.digit {
  display: inline-block;
  font-size: 24px;
  color: #1f0114;
  height: 55px;
  line-height: 1;
  -webkit-text-fill-color: #1f0114;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #1f0114;
}

.digitGrabSize {
  position: absolute;
  visibility: hidden;
  font-size: 24px;
  color: black;
  line-height: 1;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #c8d0d5;
}

.time-part-wrapper {
  &:not(:last-child):after {
    content: "";
    display: block;
    width: 30px;
    height: 230px;
    position: absolute;
    top: 0px;
    right: -30px;
    color: rgba(0, 0, 0, 0.25);
    font-size: 200px;
    line-height: 0.9;
  }
}

.time-part {
  width: min-content;
  text-align: center;
  height: 195px;
  overflow: hidden;
  display: inline-block;
  margin-left: -2px;
  box-sizing: border-box;

  .digit-wrapper {
    animation-timing-function: cubic-bezier(1, 0, 1, 0);
  }
}

.time-partFirst {
  width: min-content;
  text-align: center;
  height: 195px;
  overflow: hidden;
  display: inline-block;
  margin-left: -37px;
  box-sizing: border-box;
  transition: width 0.2s;
}

.percentage-part {
  width: min-content;
  text-align: center;
  height: 195px;
  overflow: hidden;
  display: inline-block;
  margin-left: -1px;
  box-sizing: border-box;
}

.wrapper {
  text-align: center;
  vertical-align: middle;
  position: absolute;
  top: 49vh;
  bottom: 0;
  left: calc(50% - 48vw);
  right: 0;
  margin: auto;
  clip-path: inset(0px 0px 0px 0px);
  font-family: 'Montserrat-Regular';

  &:before,
  &:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    height: 10px;
    z-index: 10;
  }
}

.animSecond {
  animation-name: passingNumbers;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

.animFirst {
  animation-name: passingNumbers;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
  .loader {
    z-index: 30;
    --size: 134px !important;
    --stroke-size: 0.3rem;
    --diff: calc(calc(var(--size) / 2) - var(--stroke-size));
    position: absolute;
    background-image: conic-gradient(#000, transparent 85%);
    width: calc(var(--size));
    height: calc(var(--size));
    top: 0px;
    bottom: 0px;
    visibility: hidden;
    left: 0px;
    right: 0px;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle var(--diff), transparent 99%, #fff 100%);
    mask-image: radial-gradient(circle var(--diff), transparent 99%, #fff 100%);
    animation: rotate 2s linear infinite;
    margin: auto;
  }

  .wrapper {
    top: 47vh !important;
  }
}

/*button in AR*/
/* #ar-controls {
	position: absolute;
	bottom: 0;
	width: 100%;
	justify-content: center;
} */