p,
h1 {
  font-family: sniglet;
  color: #595959;
}
input {
  cursor: pointer;
}
.coverpage {
  width: 100%;
  height: 100%;
}
.background,
.bg1 {
  width: 100%;
  height: 100%;
}

.pari0 {
  position: absolute;
  top: 20%;
  left: 23%;
  width: 10%;
}
.title {
  position: absolute;
  top: 40%;
  left: 35%;
  font-family: sniglet;
  font-size: 4vw;
  font-weight: 600;
  color: #cc0558;
}

/* start of slide 1 */
.coverboardfull {
  background-color: #a4e8ff;
}

.pari {
  position: absolute;
  top: 25%;
  left: 13%;
  width: 25%;
}
.speechtextbox1 {
  width: 42%;
  height: 32%;
  position: absolute;
  top: 20%;
  right: 20%;
}
.textbox {
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}
.bigcloud {
  width: 50%;
  position: absolute;
  bottom: 5%;
  right: 10%;
}
.bigcloud1 {
  width: 30%;
  height: 25%;
  position: absolute;
  top: 25%;
  left: 8%;
}
.bigcloud2 {
  width: 60%;
  height: 40%;
  position: absolute;
  top: 1%;
  right: -30%;
}
/* end of slide 1 */

/* slide 2 */
.pari2 {
  position: absolute;
  top: 30%;
  right: 10%;
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  width: 18%;
}
.speechtextbox2 {
  width: 40%;
  height: 30%;
  position: absolute;
  top: 5%;
  right: 25%;
}

.handicon {
  position: absolute;
  top: 51%;
  left: 17%;
  width: 7%;
  cursor: pointer;
  opacity: 0;
  z-index: 101;
}
.heading {
  position: absolute;
  top: 4%;
  right: 0%;
  background-color: yellow;
  width: 100%;
  padding: 2% 0;
  font-size: 2vw;
  opacity: 0;
}
.hall {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}
.pariii {
  position: absolute;
  width: 12%;
  right: 30%;
  top: 27%;
  opacity: 0;
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}
.speechtextbox2_1 {
  position: absolute;
  top: 15%;
  left: 34%;
  height: 20%;
  width: 25%;
  opacity: 0;
}
/* end of slide 2 */

/* start of slide 3 */
.pari3 {
  position: absolute;
  top: 30%;
  right: 35%;
  width: 17%;
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}
.speechtextbox3 {
  position: absolute;
  top: 10%;
  left: 32%;
  height: 25%;
  width: 30%;
}
.textbox3 {
  width: 100%;
}
.text3 {
  max-width: 80%;
}

@media screen and (min-width: 1440px) {
  .pencil-in-text {
    right: 61% !important;
    top: 15% !important;
  }
}

.text3.mt {
  margin-top: 5% !important;
}
.speechtextbox3_1 {
  position: absolute;
  top: 9%;
  left: 15%;
  height: 35%;
  width: 40%;
  opacity: 0;
  font-size: 1.5vw;
  z-index: 3;
}
.textbox3_1 {
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}
.speechtextbox3_2 {
  position: absolute;
  top: 20%;
  left: 10%;
  height: 35%;
  width: 40%;
  opacity: 0;
  font-size: 1.5vw;
}

/* end of slide 3 */

/* slide 4 */
.pari4 {
  position: absolute;
  top: 35%;
  right: 35%;
  width: 14%;
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}
.pari60 {
  position: absolute;
  top: 30%;
  right: 45%;
  width: 14%;
  /* transform: scaleX(-1);
  -webkit-transform: scaleX(-1); */
}
.speechtextbox4 {
  position: absolute;
  top: 17%;
  left: 20%;
  height: 20%;
  width: 35%;
  opacity: 0;
}
.textbox4,
.textbox4_4 {
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}
.speechtextbox4_1 {
  position: absolute;
  top: 45%;
  left: 20%;
  height: 13%;
  width: 25%;
  opacity: 0;
}
.speechtextbox4_2 {
  position: absolute;
  top: 13%;
  left: 20%;
  height: 27%;
  width: 35%;
  opacity: 0;
}
.speechtextbox4_3 {
  position: absolute;
  top: 7%;
  left: 10%;
  height: 50%;
  width: 40%;
  opacity: 0;
}
.text4_3 {
  font-size: 1.2vw;
}
.speechtextbox4_4 {
  position: absolute;
  top: 13%;
  left: 20%;
  height: 25%;
  width: 35%;
  opacity: 0;
}
:lang(np).speechtextbox4 {
  height: 30%;
}
:lang(np).speechtextbox4_1 {
  top: 35%;
  height: 30%;
}
:lang(np).speechtextbox4_3 {
  height: 50%;
  width: 50%;
}
/* end of side 4 */

/* slide 5 */
.slide5 {
  background-color: #ced8f9;
}

.table5 {
  width: 90% !important;
  margin: 15% auto !important;
  font-size: 1.2vw;
  text-align: center !important;
  background-color: #fffcedff !important;
}

.pari5 {
  position: absolute;
  top: 65%;
  right: 2%;
  width: 20%;
}
.title5 {
  font-size: 1.6vw;
  background-color: #0b5394ff;
  padding: 2% 0%;
  color: #fff;
  letter-spacing: 1px;
  position: absolute;
  top: 0;
  width: 100%;
}

.table5 tr,
td {
  border: 2px solid #b45f06;
  border-collapse: collapse;
  font-family: sniglet;
  color: #111;
  font-weight: 800;
  text-align: center;
  font-size: 2vw;
}

@media screen and (min-width: 1024px) {
  .table5 tr,
  td {
    font-size: 1.5vw;
  }
}
.table5 .row1 td {
  padding: 2% !important;
}
.row2,
tr td {
  padding: 2% !important;
  text-align: left;
}
.speechtextbox5 {
  position: absolute;
  top: 53%;
  right: 20%;
  width: 42%;
  height: 30%;
  opacity: 0;
}
.textbox5 {
  left: 5%;
  top: -5%;
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}
/* end of slide 5 */

/* slide 7 */
.title6 {
  font-size: 1.6vw;
  background-color: #0b5394ff;
  padding: 2% 15%;
  color: #fff;
  letter-spacing: 1px;
  position: absolute;
  top: 0;
  width: 100%;
}
.verticaltabel {
  width: 45% !important;
  background-color: #fff;
  border: 1px solid #783f04;
  margin-top: 15%;
  margin-left: 4%;
  font-size: 1.3vw;
}

.verticaltabel tr > :last-child {
  width: 30%;
}

@media screen and (max-width: 768px) {
  .verticaltabel {
    margin-top: 10%;
  }
}
:lang(np).verticaltabel {
  margin-top: 15%;
}
.verticaltabel tbody tr,
.verticaltabel tbody tr td {
  border: 3px solid #783f04;
}

.verticaltabel tbody tr td {
  border-top: none;
}
.verticaltabel tbody tr th {
  border: 3px solid #783f04;
  font-family: sniglet;
  color: #111;
  font-weight: 800;
  font-size: 1.6vw;
  padding: 2%;
}

.verticaltabel tbody tr th:nth-child(2) {
  border-bottom: none;
}
.verticaltabel tr td:nth-child(2) {
  width: 100%;
  height: 100%;
  display: flex;
  border-bottom: none;
  border-left: none;
  border-right: none;
  align-items: center;
}
:lang(np).verticaltabel tbody tr th {
  padding: 1%;
}
:lang(np).verticaltabel tbody tr td {
  padding: 1% !important;
}
.verticaltabel tr td:nth-child(odd) {
  width: 20%;
}
.speechtextbox6 {
  position: absolute;
  top: 28%;
  right: 3%;
  width: 37%;
  height: 44%;
  opacity: 1;
}
.pot01 {
  position: absolute;
  top: 36%;
  right: 20%;
  width: 4%;
  z-index: 101;
}

body:lang(np) .pot01 {
  width: 3%;
}

@media screen and (max-width: 768px) {
  .pot01 {
    right: 23%;
  }
}

@media screen and (min-width: 1400px) {
  .pot01 {
    right: 22%;
  }
  body:lang(np) .pot01 {
    top: 38%;
  }
}

:lang(np).pot01 {
  right: 22%;
  /* top: 34%; */
}
.infobox {
  position: absolute;
  top: 20%;
  right: 22%;
  width: 70%;
  height: 70%;
  background-color: #fffcedff;
  border: 5px solid #0b5394;
  border-radius: 4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 500ms;
}
.infotext {
  font-size: 3vw;
  width: 65%;
  text-align: left !important;
}
.pot03_1 {
  width: 4%;
  position: absolute;
  left: 29%;
  top: 45%;
}

@media screen and (min-width: 1281px) {
  .pot03_1 {
    left: 35%;
    top: 39%;
  }
}
:lang(np).pot03_1 {
  left: 17%;
  top: 43%;
}
.cross {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 3%;
  z-index: 102;
  cursor: pointer;
}
/* end of slide 7 */
.pot03 {
  width: 25%;
  position: absolute;
  top: 25%;
  right: 45%;
  z-index: 101;
  opacity: 0;
}
.infoicon {
  position: absolute;
  top: 3%;
  right: 3%;
  width: 5%;
  z-index: 101;
  cursor: pointer;
}

@media screen and (min-width: 1025px) {
  .infoicon {
    top: 0.8%;
  }
}
/* //slide 8 */
.pot03_8 {
  width: 3%;
  position: absolute;
  top: 52%;
  right: 20%;
  z-index: 102;
}
.pot03_8-1 {
  right: 25%;
}
.sunday {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 29%;
  left: 20%;
  height: 10%;
  width: 10%;
}
.sundaypot1,
.sundaypot2 {
  width: 50%;
  border-radius: 50%;
  padding: 6%;
  /* margin-right: 10%; */
}

/* //slide 9 */

.pot03_9 {
  width: 3%;
  position: absolute;
  right: 30.5%;
  top: 37%;
  z-index: 102;
}

body:lang(np) .pot03_9 {
  right: 20%;
  top: 31%;
}

@media screen and (max-width: 767px) {
  .pot03_9 {
    right: 19%;
    top: 36%;
  }
  body:lang(np) .pot03_9 {
    right: 24%;
    top: 34%;
  }
}
@media screen and (max-width: 768px) {
  .pot03_9 {
    right: 20.5%;
    top: 38%;
  }
  body:lang(np) .pot03_9 {
    right: 24%;
    top: 34%;
  }
}

@media screen and (min-width: 1400px) {
  .pot03_9 {
    top: 39%;
    right: 21.5%;
  }
  body:lang(np) .pot03_9 {
    right: 21%;
    top: 34%;
  }
}
/* slide 10 */
.speechtextbox10 {
  position: absolute;
  top: 50%;
  right: 5%;
  width: 30%;
  height: 20%;
  opacity: 1;
}
.speechtextbox10_1,
.speechtextbox10_2 {
  opacity: 0;
}
/* //slide 10 */
.speechtextbox11 {
  position: absolute;
  top: 40%;
  right: 3%;
  width: 39%;
  height: 33%;
  opacity: 1;
}
.monday {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 38%;
  left: 20%;
  height: 10%;
  width: 10%;
}
.tuesday {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 47%;
  left: 20%;
  height: 10%;
  width: 10%;
}
.wednesday {
  top: 55.5%;
}
.thursday {
  top: 64.5%;
}
.friday {
  top: 73.5%;
}
.saturday {
  top: 82%;
}
/* //slide 18 */

.pari18 {
  position: absolute;
  top: 35%;
  right: 3%;
  width: 25%;
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}
.speechtextbox18 {
  position: absolute;
  top: 10%;
  right: 55%;
  height: 25%;
  width: 35%;
  /* opacity: 0; */
}
.speechtextbox18_1 {
  position: absolute;
  top: 2%;
  right: 55%;
  height: 40%;
  width: 35%;
  opacity: 0;
}
.speechtextbox18_2 {
  position: absolute;
  top: 2%;
  right: 55%;
  height: 40%;
  width: 35%;
  opacity: 0;
}
.speechtextbox18_3 {
  position: absolute;
  top: 2%;
  right: 55%;
  height: 45%;
  width: 30%;
  opacity: 0;
}
.pot08 {
  position: absolute;
  top: 19.5%;
  right: 37.5%;
  width: 2.5%;
  z-index: 103;
  opacity: 0;
}
@media (min-width: 1827px) {
  .pot08 {
    top: 17%;
    right: 25%;
  }
}
.speechtextbox18_4 {
  position: absolute;
  top: 2%;
  right: 55%;
  height: 40%;
  width: 35%;
  opacity: 0;
}
/* slide 19 */
.slide19 {
  background-color: #d7ddee !important;
}
.title19 {
  background-color: #0b5394ff;
  color: #fff;
  padding: 2%;
  font-size: 2vw;
  letter-spacing: 2px;
}
.pari19 {
  position: absolute;
  top: 45%;
  right: 3%;
  width: 20%;
  /* transform: scaleX(-1);
  -webkit-transform: scaleX(-1); */
}
.speechtextbox19 {
  position: absolute;
  top: 20%;
  right: 18%;
  height: 35%;
  width: 35%;
  /* opacity: 0; */
}
.speechtextbox19_1 {
  position: absolute;
  top: 20%;
  right: 18%;
  height: 35%;
  width: 35%;
  opacity: 0;
}
.Book_horizontal {
  position: absolute;
  top: 25%;
  left: 5%;
  width: 40%;
}
.arrow {
  position: absolute;
  top: 70%;
  left: 6%;
}
.rightarrow {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1));
  background-color: #980000;
  width: 38%;
  height: 0.8rem;
}
.rightarrow::after {
  content: '';
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-top: 1rem solid #980000;
  border-right: 1rem solid #980000;
  border-bottom: 1rem solid transparent;
  border-left: 1rem solid transparent;
  transform: rotate(45deg);
  right: 0;
  bottom: -5px;
}
.horizotalbooks {
  display: flex;
  justify-content: space-between;
  width: 45%;
  position: absolute;
  bottom: 3%;
  padding: 5%;
  background-color: #ddcfaf;
  /* margin-left: 7.5rem; */
  left: 6%;
  border-radius: 0.5em;
  border: 2px solid #bd8725;
}

.books-table {
  top: -15%;
  left: 2%;
  max-width: 40%;
  height: 40%;
}

.books-table tr,
.books-table td,
.books-table th {
  border-color: #111 !important;
  font-size: 1.9vw !important;
  padding: 2% !important;
}

.books-table tr th:first-child {
  width: 20%;
}

.books-table td {
  font-weight: normal;
}

.book-table {
  width: 28%;
}

.book-table:not(:first-of-type) {
  margin-left: 0.5em;
}

.books-table.verticle {
  height: 50%;
  top: 20%;
  left: 2%;
  background-color: #fff;
}

.books-table.verticle .row1 td:first-of-type {
  /* writing-mode: vertical-lr; */
  transform: rotateZ(270deg);
  white-space: nowrap;
  font-weight: 800;
  text-align: center;
  width: 25%;
}

.row2 td:first-of-type {
  font-weight: 800;
}

.books-table.verticle .book-table {
  width: 80%;
}

.img-verticle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  min-height: 25svh;
}

.book01 {
  width: 15%;
  height: 8%;
  opacity: 0;
}
.book02 {
  width: 15%;
  height: 8%;
  opacity: 0;
}
.book03 {
  width: 15%;
  height: 8%;
  opacity: 0;
}
.book04 {
  width: 15%;
  height: 8%;
  opacity: 0;
}
.book05 {
  width: 15%;
  height: 8%;
  opacity: 0;
}

/* slide 20 */

.title20 {
  background-color: red;
  color: #fff;
  padding: 2%;
  font-size: 2vw;
  letter-spacing: 3px;
  /* position: absolute;
  top: 0;
  right: 0; */
}
.bookvertical {
  width: 35%;
  position: absolute;
  top: 30%;
  left: 5%;
}
.arrow2 {
  position: absolute;
  top: 35%;
  left: 43%;
}
.arrowup {
  display: block;
  box-sizing: border-box;
  width: 8px;
}

.arrowup {
  position: relative;
  transform: scale(var(--ggs, 1));
  border: none;
  border: none;
  height: 48%;
  width: 0.5%;
  background-color: #980000;
  margin-left: 2rem;
}

.arrowup::after {
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  border-top: 15px solid #980000;
  border-left: 15px solid #980000;
  border-bottom: 15px solid transparent;
  border-right: 15px solid transparent;
  transform: rotate(45deg);
  top: 0;
  right: 50%;
  transform: translate(50%) rotateZ(45deg);
}
.pot_t {
  width: 10%;
  margin-right: 2%;
}

.speechbox > p {
  position: absolute;
  width: 91%;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  padding: 3% 1% 1% 1%;
}

.man {
  position: absolute;
  left: 3%;
  bottom: 3%;
  height: 40%;
}

.pot-container {
  position: absolute;
  top: 60%;
  right: 8%;
  width: 40%;
}

.pot-container.pot-2 {
  top: 70%;
  right: 5%;
}
.pot-container.pot-3 {
  right: 2%;
  top: 82%;
}

.pot-container > .pot,
.pot-container > .pot-second {
  width: 20%;
}

td:has(.circle, .rect) {
  position: relative;
}

.circle {
  position: absolute;
  width: 12%;
  top: 50%;
  left: 0.7%;
  transform: translate(0 -50%);
  aspect-ratio: 1/1;
  border: 2px solid red;
  border-radius: 50%;
}

.circle.circle-2 {
  left: 12%;
}

.rect {
  position: absolute;
  width: 24%;
  top: 50%;
  left: 0.7%;
  transform: translate(0 -50%);
  aspect-ratio: 2/1;
  border: 2px solid red;
}

.pencil-in-text {
  position: absolute;
  top: 16%;
  right: 62%;
  width: 2.5%;
  z-index: 100;
}

@media (min-aspect-ratio: 4/3) {
  .table5 tr,
  td {
    font-size: 2.5vh;
  }
  .text1,
  .speechbox,
  .text3,
  .verticaltabel tr td:nth-child(odd) {
    font-size: 2.5vh !important;
  }
  .speechtextbox5 > p {
    width: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .speechtextbox6 .text3,
  .speechtextbox10_1 .text3,
  .speechtextbox10_2 .text3,
  .speechtextbox11 .text3 {
    font-size: 2.8vh !important;
  }

  .pot03_9 {
    right: 29%;
  }
}

@media (max-aspect-ratio: 4/3) {
  .text1,
  .speechbox,
  .text3,
  .verticaltabel tr td:nth-child(odd) {
    font-size: 2vw;
  }
}

@media screen and (max-width: 767px) {
  .horizotalbooks {
    padding: 2%;
  }
  .books-table tr,
  .books-table td,
  .books-table th {
    padding: 1em !important;
  }
  .rightarrow {
    height: 0.2rem;
  }
  .rightarrow::after {
    border-width: 0.6rem;
  }
  .arrowup {
    left: -4.5%;
  }

  .arrowup::after {
    width: 0.5rem;
    height: 0.5rem;
    border-width: 0.5rem;
  }
  .horizotalbooks {
    padding: 5%;
  }
  .img-verticle {
    min-height: auto;
  }
}