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

p {
  margin: 0;
}

.contentwithbg {
  width: 100%;
  height: 100%;
  /* background: url('../images/bg.png'); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

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

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

.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: relative;
  top: 0%;
  left: 0%;
  text-align: center;
  height: 100%;
  width: 100%;
  font-family: andika;
}

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

.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: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  border-radius: 10px;
  background: #fbb877;
  font-size: 2.5vmin;
  padding: 2%;
}

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%;
}

div.firstpage {
  position: relative;
  height: 90%;
  width: 100%;
  margin-top: 2%;
  margin-bottom: 2%;
}

div.fiftypage {
  position: relative;
  height: 50%;
  width: 100%;
  margin-top: 2%;
  margin-bottom: 2%;
}
div.imageblock {
  width: 100%;
  height: 100%;
}

.cover_page {
  width: 100%;
  height: 100%;
}
.maincontainer {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 1.3em;
  box-shadow: inset 0 0 30px #f2f2f2;
  background: #fff1e6;
}

/* magnet start */

.firsttitle {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
  font-size: 6vmin;
}

.magnet {
  top: 40%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  cursor: pointer;
}

.magrotate {
  animation: spin 4s ease-out forwards;
}

@keyframes spin {
  100% {
    left: 35%;
    width: 30%;
    transform: rotate(444deg);
  }
}

@-webkit-keyframes spin {
  100% {
    transform: rotate(444deg);
  }
}

.earth {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 45%;
  left: 50%;
  width: 30%;
}
.earth_compass {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
}

.hidden {
  opacity: 0;
}

.bg {
  opacity: 0;
  width: 100%;
}

.magnetearth {
  top: 40%;
  position: absolute;
  left: 40%;
  width: 20%;
  transform: rotate(444deg);
  z-index: 1;
}

.earthmag {
  width: 24%;
  position: absolute;
  top: 40%;
  left: 4%;
  transform: rotate(270deg);
}

.textblock {
  position: absolute;
  width: 100%;
  height: 100%;
}

.textdiv {
  position: absolute;
  width: 100%;
  height: 100%;
}
.northpole {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  color: white;
  font-size: 4vh;
}

.southpole {
  position: absolute;
  left: 50%;
  top: 71%;
  transform: translateX(-50%);
  color: white;
  font-size: 4vh;
}

.southtext {
  position: absolute;
  left: 2%;
  top: 26%;
  color: white;
  width: 30%;
  font-size: 4vh;
}

.northtext {
  position: absolute;
  right: 2%;
  top: 51%;
  color: white;
  width: 30%;
  font-size: 4vh;
}

.descriptionblock {
  position: absolute;
  left: 50%;
  top: 87%;
  font-size: 3vh;
  padding: 1% 3%;
  width: 95%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: #fbb877;
  z-index: 10;
}
.descriptionblock.top {
  top: 12%;
}

.letsexp {
  position: absolute;
  color: white;
  font-size: 4vmin;
  left: 43%;
  top: 90%;
}

.whysame {
  position: absolute;
  color: white;
  font-size: 4vmin;
  left: 39%;
  top: 84%;
}

.insidemag {
  width: 10%;
  position: absolute;
  top: 23%;
  left: 45%;
  transform: rotate(-3deg);
}

.fluc {
  animation: fluctu 2s ease-in-out infinite alternate forwards;
}

@keyframes fluctu {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

@-webkit-keyframes fluctu {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

.half {
  opacity: 0.5;
}

.highzin {
  z-index: 4;
}

.bar_magnet_revolve {
  top: 13%;
  left: 30%;
  transform: scale(0.6);
}
.compass_needle {
  z-index: 3;
}

.hightext {
  color: yellow;
}

.arrowone {
  position: absolute;
  width: 1%;
  transform: rotate(90deg);
  left: 39%;
  top: 18%;
  z-index: 10;
}

.arrowtwo {
  position: absolute;
  width: 1%;
  transform: rotate(270deg);
  right: 39%;
  top: 47%;
  z-index: 10;
}

.cssfadein {
  animation: fadein 1s linear forwards;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1 !important;
  }
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1 !important;
  }
}
.cover_all {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: 5;
}