.magnet {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 1.3em;
  background: #fff;
}

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

.magnet .nextBtn {
  display: none;
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 7%;
  height: 10%;
}

.magnet .prevBtn {
  display: none;
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 7%;
  height: 10%;
}

/*=====================================
 =            common styles            =
 =====================================*/
.board {
  position: relative;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: andika;
}

.board:lang(np) * {
  font-family: laila !important;
}

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

.vertical-center {
  position: relative;
  top: 50%;
  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%;
}

/*================================================
 =            Notification Pulse Style            =
 ================================================*/
/**
 How to use:
 - To enable notification pulse add 'data-usernotification="notifyuser"'
 attribute to the html element inside board div
 */

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(0);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.1);
    opacity: 0.8;
  }
  75% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(0);
    opacity: 0;
  }
  25% {
    -moz-transform: scale(0);
    opacity: 0.6;
  }
  50% {
    -moz-transform: scale(0.1);
    opacity: 0.8;
  }
  75% {
    -moz-transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1);
    opacity: 0;
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  25% {
    -webkit-transform: scale(0);
    opacity: 0.6;
  }
  50% {
    -webkit-transform: scale(0.1);
    opacity: 0.8;
  }
  75% {
    -webkit-transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}

/*for all element inside board*/
.board *[data-usernotification*='notifyuser'] {
  cursor: pointer;
}

.board *[data-usernotification*='notifyuser']::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2em;
  height: 2em;
  background-color: white;
  border: 2px solid black;
  border-radius: 50%;
  -webkit-animation: pulse 1.2s ease-out infinite;
  -moz-animation: pulse 1.2s ease-out infinite;
  animation: pulse 1.2s ease-out infinite;
}

/*=====  End of Notification Pulse Style  ======*/

/*=====  End of common styles  ======*/

/*===============================================
 =            general template layout            =
 ===============================================*/

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

/*=====  End of general template layout  ======*/

/*=========================================================
 =            general templated specific styles            =
 =========================================================*/

/*=====  End of general templated specific styles  ======*/
.contentblock {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #faf2e9;
}

.contentcontainer {
  width: 98%;
  height: 90%;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  background: #dcc3ac;
}

.imgblk_80 {
  position: absolute;
  height: 80%;
  width: 100%;
  left: 0;
  top: 0;
}
.imgblk_100 {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.ltb_100_top_70 {
  position: absolute;
  height: 20%;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  bottom: -100%;
}

.description1 {
  top: -1em;
  width: fit-content;
  margin: auto;
  font-size: 5vmin;
  color: #fff;
  background: #ad5545;
  border-radius: 0.5em;
  padding: 1% 6%;
}

.description2 {
  border-radius: 1em;
  border: 8px solid #dba49b;
  background: #f4eadf;
  width: 80%;
  margin: auto;
  padding: 2% 1%;
  font-size: 2.5vmin;
}

.magnetcontainer {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.magnetcontainer1,
.magnetcontainer2,
.magnetcontainer3 {
  position: absolute;
  width: 20%;
  top: 25%;
  height: 55%;
  display: none;
  padding: 1em 0.2em;
  background: #c3714b;
  border-radius: 1em;
}

.magnetcontainer1::before,
.magnetcontainer2::before,
.magnetcontainer3::before {
  content: '';
  background: white;
  border-radius: 0.5em;
  width: 85%;
  height: 65%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.magnetcontainer1 {
  left: 10%;
}

.magnetcontainer2 {
  top: 40%;
  left: 40%;
}

.magnetcontainer3 {
  left: 70%;
}

.magnetimage {
  height: 80%;
  width: 90%;
  padding: 10%;
  object-fit: contain;
  border-radius: 1em;
}

.magnetimage.bar {
  width: 50%;
  transform: rotate(-45deg);
}

.magnetlabel {
  width: 90%;
}
.magnetlabel:lang(np) {
  font-size: 0.8em;
}

.fadein1 {
  -webkit-animation: fade_in 1s linear 1s forwards;
  animation: fade_in 1s linear 1s forwards;
}

.fadein2 {
  -webkit-animation: fade_in 1s linear 2s forwards;
  animation: fade_in 1s linear 2s forwards;
}

.fadein3 {
  -webkit-animation: fade_in 1s linear 3s forwards;
  animation: fade_in 1s linear 3s forwards;
}

.fadein4 {
  -webkit-animation: fade_in 1s linear 4s forwards;
  animation: fade_in 1s linear 4s forwards;
}

@-webkit-keyframes fade_in {
  to {
    opacity: 1;
  }
}

@keyframes fade_in {
  to {
    opacity: 1;
  }
}

.content_100_map {
  width: 100%;
  height: 100%;
}

.content_100_map img {
  width: 100%;
  height: 100%;
}

.content_100_yellow {
  background-color: #ffe599;
}

.legendbg {
  height: 100%;
  width: 100%;
}

.description3 {
  font-size: 3.56vmin;
  background-color: #ffe599;
  padding: 2%;
}

.balckhighlight {
  font-size: 4vmin;
  color: #4a4a4a;
}
.content_full .contentcontainer {
  width: 97%;
  height: 95%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.summary_images {
  width: 100%;
  height: 80%;
}
.boy_happyimage {
  width: 15%;
}
.summary_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
}
.summary_img.bar_magnet {
  left: 45%;
}
.summary_img.place-1 {
  top: 60%;
}
.summary_img.place-2 {
  left: 64%;
  top: 40%;
  width: 15%;
}
.summary_img.place-3 {
  transform: rotate(45deg) translate(-50%, -50%);
  left: 25%;
  top: 45%;
  height: 45%;
  width: auto;
}

.boy_happyimage {
  top: 64%;
  width: 25%;
  height: auto;
}
.top-20 {
  top: 20px;
}

@media screen and (min-aspect-ratio: 4/3) {
  .magnetlabel:lang(np) {
    font-size: 0.8em;
  }
}

@media screen and (max-width: 992px) {
  .magnetlabel:lang(np) {
    font-size: 0.6em;
  }
}