body:lang(np),
body:lang(np) * {
  font-family: mangal !important;
}
body:lang(en),
body:lang(en) * {
  font-family: laila !important;
}
.activity_container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 1.8em;
  background: #fff;
  box-shadow: inset 0 0 30px #f2f2f2;
}

.activity_container,
.activity_container * {
  position: relative;
  margin: 0;
  padding: 0;
}

.activity_container .nextBtn {
  display: none;
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 7%;
  height: 10%;
  z-index: 10;
}

.activity_container .prevBtn {
  display: none;
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 7%;
  height: 10%;
  z-index: 10;
}

@font-face {
  font-family: amaranth;
  src: url('../fonts/amaranath/amaranth-regular.ttf');
}

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
}

p {
  margin: 0;
}

.contentwithbg {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.nextBtn {
  display: none;
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 7%;
  height: 10%;
  z-index: 1000 !important;
}

.prevBtn {
  display: none;
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 7%;
  height: 10%;
  z-index: 1000 !important;
}

.myNextStyle {
  cursor: pointer;
  background-image: url('../../../../../../images/arrows/arrow.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.myNextStyle:hover {
  background-image: url('../../../../../../images/arrows/arrow_hover.png');
}

.myNextStyle:active {
  background-image: url('../../../../../../images/arrows/arrow_active.png');
}

.myPrevStyle {
  cursor: pointer;
  background-image: url('../../../../../../images/arrows/arrow_prev.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.myPrevStyle:hover {
  background-image: url('../../../../../../images/arrows/arrow_hover_prev.png');
}

.myPrevStyle:active {
  background-image: url('../../../../../../images/arrows/arrow_active_prev.png');
}

.board {
  position: absolute;
  top: 0%;
  left: 0%;
  text-align: center;
  height: 100%;
  width: 100%;
  font-family: amaranth;
}

.vertical-horizontal-center {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  text-align: center;
}

.vertical-center {
  position: relative;
  top: 45%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  text-align: center;
}

.coverboardfull {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

div.generalTemplateblock {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  /*border   : 1px solid red; */
}

div.headerblock {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 20%;
  background-color: #e3d0da;
  color: #ce00a7;
  /*border   : 1px solid red;*/
}

div.generalTemplateblock[data-templatecontains='hasheaderblock']
  div.contentblock {
  top: 20%;
  height: 80%;
  position: absolute;
  width: 100%;
}

div.generalTemplateblock[data-templatecontains='hasonlycontent']
  div.contentblock {
  top: 0%;
  height: 100%;
}

/*============ exercise template ===================
==================================================== */

.exefin {
  display: none;
  width: 100%;
  height: 20%;
  position: absolute;
  padding-bottom: 1%;
  top: 25%;
  animation: fade-in 1s linear forwards;
  text-align: center;
}

.exefin {
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.circleimg {
  background-image: url(../images/11.jpg) !important;
}

.backtrue {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  padding: 6% 10% !important;
  margin: 1% !important;
}

div.imageblock {
  position: absolute;
  width: 100%;
  height: 100%;
  /*border     : 1px solid green; */
}

.jump_rhino {
  -webkit-animation: jump_rhino 0.5s cubic-bezier(0, 0.5, 1, 0.5);
  animation: jump_rhino 0.5s cubic-bezier(0.5, 1, 1, 0.75);
}

@keyframes jump_rhino {
  50% {
    transform: translateY(-150%);
  }
}

@-webkit-keyframes jump_rhino {
  50% {
    transform: translateY(-150%);
  }
}

.zoom_rhino {
  -webkit-animation: zoom_rhino 1s linear forwards;
  animation: zoom_rhino 1s linear forwards;
  animation-delay: 0.75s;
  transform-origin: bottom right;
}

.zoom_marks_rhino {
  -webkit-animation: zoom_marks_rhino 1s linear forwards;
  animation: zoom_marks_rhino 1s linear forwards;
  animation-delay: 0.75s;
}

@keyframes zoom_marks_rhino {
  100% {
    transform: scale(2);
    right: 35%;
    top: 15%;
  }
}

@-webkit-keyframes zoom_marks_rhino {
  100% {
    transform: scale(2);
    right: 35%;
    top: 15%;
  }
}

@keyframes zoom_rhino {
  100% {
    transform: scale(2.5);
    right: 0%;
    bottom: 30%;
  }
}

@-webkit-keyframes zoom_rhino {
  100% {
    transform: scale(2.5);
    right: 0%;
    bottom: 30%;
  }
}

/*--------- for exercise -------------*/

.main_bg {
  background-color: #b7f5ff;
}

.main_bg_2 {
  background-color: #ffd966;
}

/*------------------ specific blocks ------------------*/

.textblock {
  position: absolute;
}

.instruction_div {
  width: 100%;
  height: 15%;
  padding: 1.5% 2%;
  position: absolute;
  top: 0;
  left: 50%;
  color: white;
  background: #ff9b90;
  transform: translateX(-50%);
  font-size: 2vw;
  font-family: HappyMonkey;
}

.correct {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 10%;
  padding: 5% !important;
  border: 3px solid #fcd172;
  background-color: #6eb260;
  color: white;
}

.incorrect {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 10%;
  padding: 5% !important;
  background-color: #ba6b82;
  color: black;
}

.correct:hover {
  opacity: 0.6;
}

.incorrect:hover {
  opacity: 0.6;
}

.hintimageblock {
  overflow: hidden;
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
  top: 25%;
  width: 100%;
  height: 45%;
  left: 0%;
  z-index: 10;
}

.hintimageblock > img {
  height: 100%;
}

.optionsblock {
  position: absolute;
  height: 10%;
  top: 80%;
  width: 85%;
  left: 7.5%;
  z-index: 10;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.option-item {
  position: relative;
  width: 26%;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: #f9cb9c;
  border: 0.1em solid #ff9900;
  border-radius: 14px;
}

.option-text {
  font-size: 2.5vmin;
  width: 100%;
  /* margin-right: 10%; */
}

.option-item:hover {
  background-color: #fcd172;
}

.correct-select,
.wrong-select {
  display: none;
  position: absolute;
  top: 25%;
  right: 1.5%;
  height: 50%;
  z-index: 10;
}

/*-------------------------
 ------- for fonts --------
 --------------------------*/

.my_font_very_big {
  font-size: 4vw;
}

.my_font_big {
  width: 88%;
  font-size: 3.3vw;
  text-align: left;
}

.my_font_medium {
  font-size: 2.2vw;
}

.my_font_small {
  font-size: 1.5vw;
}

@media (min-aspect-ratio: 4/3) {
  .my_font_very_big {
    font-size: 5vmin;
  }
  .my_font_big {
    font-size: 4vmin;
  }
  .my_font_medium {
    font-size: 3vmin;
  }
  .my_font_small {
    font-size: 2vmin;
  }
}

.question_number {
  background-color: #d0e0e3;
  height: 13%;
  top: -3%;
  padding-top: 1%;
  padding-left: 1%;
  color: black;
}

/* .hintimageblock img {
  opacity: 0;
} */

@keyframes slideFromLeft {
  0% {
    transform: translateX(-150%);
    /* opacity: 0; */
  }
  99% {
    transform: translateX(0%);
    opacity: 1;
  }
}
.slidefromleft {
  animation: slideFromLeft forwards 3s ease-out;
}

@keyframes slideToRight {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  99% {
    transform: translateX(250%);
    opacity: 0;
  }
}

.slidetoright {
  animation: slideToRight 4s forwards 0s ease-in;
}

.flipped {
  transform: scaleX(-1);
}
.bike,
.car,
.bus,
.ambulance {
  width: 40%;
  object-fit: contain;
}
.hintimageblock.last-page {
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.hintimageblock.last-page > img {
  opacity: 1 !important;
  z-index: 1 !important;
}
.glitter {
  z-index: 9 !important;
  background: url(../../images/new/glitter.gif) !important;
}
div[class*='_btn'] img {
  display: none;
}
.repeat_exercise_btn > p,
.main_menu_btn > p,
.repeat_chapter_btn > p {
  position: absolute;
  width: 100%;
  height: 60% !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.4vw;
  background: #ff9b90;
  color: #000 !important;
  font-family: sniglet;
  border: 0.3em solid #ffccbb;
  border-radius: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}
.repeat_exercise_btn,
.main_menu_btn,
.repeat_chapter_btn {
  top: 70%;
}
.nxtbtntext {
  transition: all 0.3s linear;
}
.nxtbtntext:hover {
  background: #ffc800;
}
.content-last {
  position: absolute;
  position: absolute;
  left: 50%;
  width: 60%;
  top: 40%;
  height: 40%;
  background: #fff;
  border-radius: 4vmin;
  padding: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transform: translate(-50%, -50%);
}
.last-text {
  color: #fa6700;
}