body:lang(np),
body:lang(np) * {
  font-family: laila !important;
}
#activity-page-lesson-tab span,
#activity-page-exercise-tab span,
.coverboardfull .boxes_top_txt,
.lesson_end_container_g1 p {
  font-family: laila !important;
}
.black_birds {
  position: absolute;
  top: 3%;
  width: 15%;
  left: -15%;
  animation: flying_birds 20s infinite linear;
}
@keyframes flying_birds {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(800%, -25%);
  }
}
.boxes_top_txt {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  padding: 2%;
  background: #980000;
  color: white;
  font-size: 5vmin;
}

@media (min-aspect-ratio: 4/3) {
  .boxTxt {
    font-size: 9vmin;
  }
  .boxes_top_txt {
    font-size: 6vmin;
  }
}
@media (max-aspect-ratio: 4/3) {
  .boxTxt {
    font-size: 4.5vw;
  }
  .boxes_top_txt {
    font-size: 3vw;
  }
}
.contentScene {
  top: 8%;
}
.background {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.contentblock {
  padding: 0 !important;
}

.girl_walking {
  position: absolute;
  top: 55%;
  width: 10%;
  left: 100%;
  animation: walking_animation 4s forwards linear;
}
.girl_talking,
.girl_talking_png {
  position: absolute;
  top: 55%;
  width: 10%;
  left: 76%;
  display: none;
}
.girl_thank {
  position: absolute;
  top: 58%;
  width: 10%;
  left: 48%;
}
@keyframes walking_animation {
  from {
    transform: translateY(0);
  }
  to {
    transform: translate(-240%);
  }
}

.textbox {
  width: 20%;
  position: absolute;
  top: 30%;
  left: 0%;
}
.speechbox {
  opacity: 0;
  position: absolute;
  width: 25%;
  height: 25%;
  top: 19%;
  font-family: sniglet;
  font-size: 2vw;
  /* padding: 10%; */
}
@keyframes appear {
  to {
    opacity: 1;
  }
}
.girlText1 {
  top: 37%;
  left: 55%;
  animation: appear 1s ease-in-out 4s forwards;
}

.girlText2 {
  width: 28%;
  top: 35%;
  left: 53%;
  animation: appear 1s ease-in-out 4s forwards;
}
.girlText3 {
  width: 30%;
  top: 36%;
  left: 53%;
  animation: appear 1s ease-in-out forwards;
}
.basket-s3 {
  object-fit: contain;
  position: absolute;
  top: 70%;
  left: 42%;
  width: 15%;
}

.itemDiv {
  position: absolute;
  width: 10%;
  height: 10%;
}
.shop-item {
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  transition: transform 300ms;
}
.shop-item:hover {
  transform: scale(1.1);
}

.spot1 {
  top: 17%;
}

.spot1A {
  left: 2%;
}
.spot1B {
  left: 24%;
}

.spot2 {
  top: 47%;
}

.spot2A {
  left: 2%;
}
.spot2B {
  left: 24%;
}

.spot3 {
  top: 18%;
}

.spot3A {
  left: 64%;
}
.spot3B {
  left: 85%;
}

.spot4 {
  top: 18%;
}

.spot4A {
  left: 2%;
}
.spot4B {
  left: 24%;
}

.showSpot1 {
  animation: showSpot1 2s both 1s linear;
}
@keyframes showSpot1 {
  from {
    transform: translate(0%, 0%) scale(1);
  }
  to {
    transform: translate(45%, 44%) scale(1.9);
  }
}
.showSpot2 {
  animation: showSpot2 2s both linear;
}
@keyframes showSpot2 {
  from {
    transform: translate(45%, 44%) scale(1.9);
  }
  to {
    transform: translate(45%, -15%) scale(1.9);
  }
}
.showSpot3 {
  animation: showSpot3 2s both linear;
}
@keyframes showSpot3 {
  from {
    transform: translate(45%, -15%) scale(1.9);
  }
  to {
    transform: translate(-45%, 36%) scale(1.9);
  }
}
.showSpot4 {
  animation: showSpot4 2s both linear;
}
@keyframes showSpot4 {
  from {
    transform: translate(-45%, 36%) scale(1.9);
  }
  to {
    transform: translate(45%, 44%) scale(1.9);
  }
}

.correctwrongimg {
  width: 20%;
  position: absolute;
  top: 164%;
  left: 33%;
}

.hideTickCross {
  animation: disappear 1s ease-in-out 0.5s forwards;
}

.letterDiv {
  position: absolute;
  font-size: 25vmin;
  top: 16%;
  left: 78%;
}
.left-letter {
  left: 2%;
}

.avoid-clicks {
  pointer-events: none;
}

.itemBtn-spkr {
  width: 20%;
  margin-left: 5%;
}
.itemBtn {
  display: none;
  position: absolute;
  border: 1px solid black;
  border-radius: 5px;
  background: orange;
  width: 90%;
  user-select: none;
  pointer-events: none;
}

.spot1A-btn {
  top: 115%;
  left: 3%;
}
.spot1B-btn {
  top: 115%;
  left: 5%;
}
.spot2A-btn {
  top: 120%;
  left: 3%;
}
.spot2B-btn {
  top: 120%;
  left: 3%;
}
.spot3A-btn {
  top: 120%;
  left: 3%;
}
.spot3B-btn {
  top: 120%;
  left: 8%;
}
.spot4A-btn {
  top: 115%;
  left: 3%;
}
.spot4B-btn {
  top: 115%;
  left: 5%;
}

.basketDiv {
  width: 20%;
  height: 26%;
  top: -28%;
  left: 75%;
  overflow: hidden;
}

.basket-s3b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 5;
}
.vuikatara {
  width: 45%;
}

.basket_end {
  position: absolute;
  top: 78%;
  width: 7%;
  left: 56%;
}
.endItem1 {
  position: absolute;
  width: 5%;
  top: 79%;
  left: 56%;
}
.endItem2 {
  position: absolute;
  width: 5%;
  top: 79%;
  left: 58%;
}
.correctBtn {
  background-color: #92c13f;
}
.incorrectBtn {
  background-color: red;
  color: white;
}
.zoomOut {
  animation: zoomOut 2s both linear;
}
@keyframes zoomOut {
  from {
    transform: translate(45%, 44%) scale(1.9);
  }
  to {
    transform: translate(0%, 0%) scale(1);
  }
}

.shakeBasket {
  animation: shakeBasket 2s linear 1;
}

@keyframes shakeBasket {
  0% {
    transform: rotate(0deg) scale(1);
  }
  20% {
    transform: rotate(5deg) scale(1.1);
  }
  40% {
    transform: rotate(-5deg) scale(1.1);
  }
  60% {
    transform: rotate(5deg) scale(1.1);
  }
  80% {
    transform: rotate(-5deg) scale(1);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}
.spot1item {
  position: absolute;

  top: 19%;
  left: 5%;
  width: 50%;
  animation: appearInBasket 1s both 1s linear;
}
.spot2item {
  position: absolute;
  top: 19%;
  left: 45%;
  width: 50%;
  animation: appearInBasket 1s both 1s linear;
}
.spot3item {
  position: absolute;
  top: 23%;
  left: 45%;
  width: 50%;
  animation: appearInBasket 1s both 1s linear;
}
.spot4item {
  position: absolute;
  top: 5%;
  left: 15%;
  width: 50%;
  animation: appearInBasket 1s both 1s linear;
}
@keyframes appearInBasket {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.tree{
  position: absolute;
  width: 30%;
  left: 5%;
  top: 32%;
}
.pasal_name{
  position: absolute;
  left: 9%;
  font-size: 4vh;
  top: 33%;
  color: orange;
}
.flipbox{
  transform: scaleX(-1);
}