.pplay-loader-container .padded-container,
.device-animation-container .padded-container {
  height: 0;
  position: relative;
  padding-bottom: 7.6923076923%;
}

.pplay-loader-container .wrapper,
.device-animation-container .wrapper {
  width: 7.6923076923%;
  margin: 0.5%;
  margin-bottom: 20%;
}

.pplay-loader-container img,
.pplay-loader-container .device-animation-img,
.device-animation-container img,
.device-animation-container .device-animation-img {
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  margin: auto;
  width: 100%;
  height: auto;
}

.device-animation-container {
  position: fixed;
  width: 80%;
  height: 90%;
  left: 30%;
  top: 1%;
  /* !!! apple moment !!! do not remove this because apple will remove element with position = fixed/absolute
  and not redraw it until user will touch screen. this is a just hack for this stupid case, i dont know how it works */
  transform: translate3d(0, 0, 0);
  animation: onRenderAnimation 0.5s linear;
}

@keyframes onRenderAnimation {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.device-tap-wrapper, .device-swipe-wrapper, .device-rotate-wrapper {
  visibility: hidden;
  position: absolute;
}

.visible:is(.device-tap-wrapper,.device-swipe-wrapper,.device-rotate-wrapper) {
    visibility: visible;
    position: unset;
  }

.device-animation-container>.device-tap-wrapper,
.device-animation-container>.device-swipe-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

.device-animation-container>.device-tap-wrapper>.device-img-container,
.device-animation-container>.device-swipe-wrapper>.device-img-container {
  display: flex;
  align-items: center;
  flex-basis: 50%;
  height: 90%;
  position: relative;
}

@media screen and (orientation: portrait) {
  .device-animation-container {
    transform: scale(2) translate3d(0, 0, 0);
    left: -2%;
    margin-top: 30%;
  }
}

@media screen and (orientation: portrait) and (min-aspect-ratio: 8/10) {
  .device-animation-container {
    transform: translateX(3%) scale(1.7) translate3d(0, 0, 0);
    margin-top: 20%;
  }
}

.device-tap-wrapper>.device-img-container>div {
  width: 25%;
  position: absolute;
  left: 90%;
}

@keyframes clipPath {
  0% {
    opacity: 1;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }

  15% {
    clip-path: polygon(0 65%, 100% 65%, 100% 30%, 0 30%);
  }

  30%,
  100% {
    clip-path: polygon(0 30%, 100% 30%, 100% 30%, 0 30%);
  }
}

.device-tap-wrapper>.device-img-container>.tapEffect {
  width: 1.7%;
  margin-left: 12%;
  margin-bottom: 32%;
}

.device-tap-wrapper>.device-img-container>.tapEffect>img {
  opacity: 0;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  animation: clipPath 1.8s infinite cubic-bezier(0.45, 0, 0.55, 1);
  -webkit-animation: clipPath 1.8s infinite cubic-bezier(0.45, 0, 0.55, 1);
  animation-delay: 1s;
}

.device-tap-wrapper>.device-img-container>.tapEffect:nth-child(4) {
  margin-left: 6.5%;
  margin-bottom: 20%;
  transform: rotate(-90deg);
}

.device-tap-wrapper>.device-img-container>.tapEffect:nth-child(5) {
  margin-left: 8%;
  margin-bottom: 28%;
  transform: rotate(-45deg);
}

.device-tap-wrapper>.device-img-container>.tapEffect:nth-child(6) {
  margin-left: 16%;
  margin-bottom: 28%;
  transform: rotate(45deg);
}

@keyframes handInitialTap {

  0%,
  9.99% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }
}

@keyframes handDownTap {

  0%,
  9.99% {
    opacity: 1;
  }

  10% {
    opacity: 0;
  }
}

.device-tap-wrapper>.device-img-container>.handInitial {
  z-index: 2;
  width: 35.7142857143%;
  margin-top: 15%;
  margin-left: 9%;
  animation: handInitialTap 1.8s infinite ease-in-out;
  animation-delay: 1s;
}

.device-tap-wrapper>.device-img-container>.handDown {
  z-index: 2;
  opacity: 0;
  width: 35.7142857143%;
  margin-top: 15%;
  margin-left: 9%;
  animation: handDownTap 1.8s infinite ease-in-out;
  animation-delay: 1s;
}

.device-swipe-wrapper>.device-img-container>div {
  width: 25%;
  position: absolute;
  top: auto;
  left: 90%;
}

@keyframes arrowUp {

  0%,
  20% {
    opacity: 1;
  }

  12% {
    transform: translate(64%, -50%);
  }

  31% {
    opacity: 0;
  }

  30% {
    transform: translate(64%, -120%);
    opacity: 0;
  }

  46%,
  55% {
    opacity: 0;
  }

  75% {
    transform: translate(64%, -50%);
    opacity: 1;
  }
}

.device-swipe-wrapper>.device-img-container>.arrow {
  width: 11.1111111111%;
  transform: translate(64%, -50%);
  animation: arrowUp 1.8s infinite cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-animation: arrowUp 1.8s infinite cubic-bezier(0.5, 1, 0.89, 1);
  animation-delay: 1s;
}

@keyframes handInitial {

  0%,
  5% {
    opacity: 0;
    margin-top: 20%;
  }

  5.01%,
  21.99% {
    opacity: 0;
  }

  12% {
    margin-top: 20%;
  }

  22% {
    opacity: 1;
  }

  30%,
  30.99% {
    margin-top: 8%;
  }

  65%,
  100% {
    margin-top: 20%;
  }
}

@keyframes handDown {

  from,
  5% {
    opacity: 1;
    margin-top: 20%;
  }

  12% {
    margin-top: 20%;
    opacity: 1;
  }

  21.99% {
    opacity: 1;
  }

  22% {
    opacity: 0;
  }

  30% {
    margin-top: 8%;
  }

  65%,
  100% {
    margin-top: 20%;
  }
}

.device-swipe-wrapper>.device-img-container>.handInitial {
  z-index: 2;
  width: 35.7142857143%;
  margin-top: 20%;
  margin-left: 10%;
  animation: handInitial 1.8s infinite cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-animation: handInitial 1.8s infinite cubic-bezier(0.5, 1, 0.89, 1);
  animation-delay: 1s;
}

.device-swipe-wrapper>.device-img-container>.handDown {
  z-index: 2;
  opacity: 0;
  width: 35.7142857143%;
  margin-top: 20%;
  margin-left: 10%;
  animation: handDown 1.8s infinite cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-animation: handDown 1.8s infinite cubic-bezier(0.5, 1, 0.89, 1);
  animation-delay: 1s;
}

.device-rotate-wrapper {
  transform: translateX(45%);
  width: 60%;
}

.device-rotate-wrapper>.device-img-container>div {
  width: 12.5%;
  position: absolute;
  left: 43.5%;
}

@keyframes rotatePhone {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(100deg);
  }

  50% {
    transform: rotate(88deg);
  }

  60%,
  75% {
    transform: rotate(90deg);
  }

  95% {
    transform: rotate(0deg);
  }
}

@keyframes rotateCircle {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(100deg);
  }

  55%,
  70% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.device-rotate-wrapper>.device-img-container>.phone {
  animation: rotatePhone 1.8s infinite cubic-bezier(0.45, 0, 0.55, 1);
  animation-delay: 1s;
}

.device-rotate-wrapper>.device-img-container>.circle {
  width: 40%;
  left: 30%;
  animation: rotateCircle 1.8s infinite cubic-bezier(0.45, 0, 0.55, 1);
  animation-delay: 1s;
}

html,
body,
div,
span,
img {
  margin: 0;
  padding: 0;
}

.rotate {
  flex-direction: column;
}

.rotate .foreground-container {
  margin-top: -18%;
}

.rotate .device-animation-container {
  display: flex;
  align-items: center;
  margin-top: 16%;
}

.pplay-loader-container {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  background-color: #36384c;
  z-index: 14;
}

.pplay-loader-container * {
  box-sizing: initial !important;
}

.pplay-loader-container .bar-background {
  position: fixed;
  width: 70%;
  bottom: 15%;
  left: 15%;
  height: 0.5%;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.0588235294);
}

.pplay-loader-container .bar-foreground {
  position: relative;
  width: 0%;
  height: 100%;
  border-radius: 2px;
  background-color: #0092ef;
  transition: width 100ms ease;
  -webkit-transition: width 100ms ease;
}

.pplay-loader-container .percentage-display {
  position: absolute;
  bottom: 18%;
  left: 50%;
  color: white;
  font-family: "Fira Sans", sans-serif;
  font-weight: 500;
  font-size: calc(6px + 1vw + 1vh);
  transform: translateX(-50%);
}

.pplay-loader-container .foreground-container {
  position: fixed;
  width: 80%;
  height: 90%;
  top: -5.5%;
  left: 10%;
  transition: left 1s;
}

.pplay-loader-container .foreground-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  user-select: none;
  pointer-events: none;
}

.pplay-loader-container .foreground-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-basis: 50%;
  height: 90%;
}

.pplay-loader-container .spin-logo-container {
  clip-path: polygon(0% 4%, 32% 4%, 80% 28%, 80% 73%, 32% 97%, 0% 95%);
  mask-image: radial-gradient(circle at 26% 30%, black 27%, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 40% 50%, black 62%, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 26% 70.6%, black 27%, rgba(0, 0, 0, 0) 0%);
  position: absolute;
  left: 10%;
  height: 100%;
  top: -3%;
  z-index: 3;
}

@keyframes wave {

  0%,
  3% {
    transform: translateY(0%);
  }

  6% {
    transform: translateY(4.5%);
  }

  8% {
    transform: translateY(-4.6%);
  }

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

.pplay-loader-container .letter {
  animation: wave 3.5s infinite ease-out;
}

.pplay-loader-container .pLetter {
  animation-delay: 2.15s;
}

.pplay-loader-container .oLetter {
  animation-delay: 2.05s;
}

.pplay-loader-container .g1Letter {
  animation-delay: 2s;
}

.pplay-loader-container .g2Letter {
  animation-delay: 1.95s;
}

.pplay-loader-container .iLetter {
  animation-delay: 1.85s;
}

.pplay-loader-container .aLetter {
  animation-delay: 1.95s;
}

.pplay-loader-container .yLetter {
  animation-delay: 1.95s;
}

.pplay-loader-container .first-foreground-text {
  position: relative;
  left: 48.5%;
  display: flex;
}

.pplay-loader-container .first-foreground-text>div {
  height: 100%;
  width: 9.5238095238%;
  top: 6%;
  right: 0.2%;
}

.pplay-loader-container .first-foreground-text>.iLetter {
  width: 4%;
  right: 3%;
  top: 12%;
}

@keyframes bounceCircle {

  0%,
  8% {
    transform: translateY(0%);
  }

  19%,
  21% {
    transform: translateY(-50%);
  }

  29% {
    transform: translateY(7%) scaleY(0.95);
  }

  32% {
    transform: translateY(-5%) scaleY(0.95);
  }

  34% {
    transform: translateY(0%) scaleY(1);
  }
}

.pplay-loader-container .first-foreground-text>.pLetter {
  width: 9.7087378641%;
  top: 5.3%;
  right: 0.3%;
}

.pplay-loader-container .first-foreground-text>.redCircle {
  width: 2.8571428571%;
  right: 6.6%;
  top: -15.5%;
  filter: brightness(1);
  animation: bounceCircle 3.5s infinite ease-in-out;
  animation-delay: 1s;
}

.pplay-loader-container .first-foreground-text>.oLetter {
  top: 12%;
  right: 1.6%;
  width: 10%;
}

.pplay-loader-container .first-foreground-text>.g1Letter {
  top: 41%;
  right: 1.8%;
  width: 3.8vw;
}

.pplay-loader-container .first-foreground-text>.g2Letter {
  top: 18%;
  right: 2.2%;
}

.pplay-loader-container .second-foreground-text {
  position: relative;
  left: 58.5%;
  display: flex;
}

.pplay-loader-container .second-foreground-text>div {
  height: 100%;
  width: 9.5238095238%;
}

.pplay-loader-container .second-foreground-text>.pLetter {
  margin-right: 3.8%;
  right: 0.4%;
  bottom: 37%;
}

.pplay-loader-container .second-foreground-text>.aLetter {
  bottom: 29.5%;
  left: 0.8%;
}

.pplay-loader-container .second-foreground-text>.yLetter {
  bottom: 22%;
  right: 0.7%;
  width: 10.5263157895%;
}

.pplay-loader-container .foreground-logo-wrapper {
  display: flex;
  align-items: center;
  flex-basis: 50%;
  overflow: hidden;
  position: relative;
  margin-top: 3%;
  padding-top: 8.7%;
}

.pplay-loader-container .foreground-logo-wrapper>div {
  width: 40%;
}

@keyframes leftBounceBlue {
  from {
    transform: translateX(0%);
  }

  5% {
    transform: translateX(-6%);
  }

  7% {
    transform: translateX(0%);
  }
}

.pplay-loader-container .foreground-logo-wrapper>.blueLogo {
  z-index: 2;
  left: 9%;
  mix-blend-mode: darken;
  animation: leftBounceBlue 3.5s infinite ease-in;
  -webkit-animation: leftBounceBlue 3.5s infinite ease-in;
  animation-delay: 1s;
}

@keyframes spin {
  0% {
    margin-top: -144%;
  }

  5% {
    margin-top: -144%;
    left: 0%;
  }

  7%,
  10% {
    margin-top: -144%;
    left: 7%;
  }

  17%,
  24% {
    filter: url(#blur);
  }

  26% {
    margin-top: 288%;
    filter: none;
  }

  29% {
    margin-top: 284.5%;
  }

  31% {
    margin-top: 286.5%;
  }

  31.00001%,
  100% {
    margin-top: -144%;
  }
}

.pplay-loader-container .foreground-logo-wrapper>*>.spinLogo {
  overflow: initial;
  width: 50%;
  top: 24%;
  left: 7%;
  position: absolute;
  z-index: 3;
  margin-top: -144%;
  animation: spin 3.5s infinite ease-in;
  -webkit-animation: spin 3.5s infinite ease-in;
  animation-delay: 1s;
}

.pplay-loader-container .foreground-logo-wrapper>.redLogo {
  position: absolute;
  top: 38%;
  left: 0;
  z-index: 1;
}

@media screen and (orientation: portrait) {
  .pplay-loader-container .foreground-wrapper {
    scale: 1.8;
  }

  .pplay-loader-container .bar-background {
    bottom: 11%;
  }

  .pplay-loader-container .percentage-display {
    bottom: 14%;
  }
}

@media screen and (orientation: landscape) and (min-aspect-ratio: 1.8) {
  .pplay-loader-container .device-tap-wrapper,
  .pplay-loader-container .foreground-wrapper,
  .pplay-loader-container .device-swipe-wrapper {
    scale: var(--scale-ratio);
  }
}

.tap .foreground-container,
.swipe .foreground-container {
  left: -5%;
}

@media screen and (orientation: portrait) {
  .tap .foreground-container,
  .swipe .foreground-container {
    left: 9%;
    margin-top: -20%;
  }
}