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

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

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

.magnets .prevBtn {
  display: none;
  position: absolute;
  z-index: 1000;
  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: 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%;
}

.bg_main {
  background-image: url('../images/bg.png');
  background-size: cover;
}
.its_hidden {
  display: none;
}

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

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

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

/*===================================
 =            HeaderBlock            =
 ===================================*/

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

div.headerblock p.headertextstyle {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1% 2%;
  font-size: 1.3em;
  font-weight: bold;
  color: rgb(238, 110, 115);
  background-color: rgb(252, 252, 252);
  text-align: center;
}

div.generalTemplateblock[data-templatecontains='hasheaderblock']
  div.headerblock {
  height: 13%;
}

div.generalTemplateblock[data-templatecontains='hasheaderblock']
  div.headerblock
  p.headertextstyle {
  padding: 2%;
}

/*=====  End of HeaderBlock  ======*/

/*====================================
 =            ContentBlock            =
 ====================================*/

div.generalTemplateblock div.contentblock {
  position: absolute;
  width: 100%;
  padding: 1%;
  /*border   : 1px solid blue;*/
}

div.generalTemplateblock[data-templatecontains='hasheaderblock']
  div.contentblock {
  top: 13%;
  height: 87%;
}

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

/*=====  End of ContentBlock  ======*/
/*----------------------------------
 |			Animations			   |
 -------------------------------- */

.blink_and_big {
  animation: blink_2_big infinite 1s;
  -webkit-animation: blink_2_big infinite 1s;
}

@-webkit-keyframes blink_2_big {
  0% {
    transform: scale(1, 1);
    filter: drop-shadow(0px 0px 1px white);
  }
  50% {
    transform: scale(1.05, 1.05);
    filter: drop-shadow(0px 0px 5px black);
  }
  100% {
    transform: scale(1, 1);
    filter: drop-shadow(0px 0px 1px white);
  }
}
@keyframes blink_2_big {
  0% {
    transform: scale(1, 1);
    filter: drop-shadow(0px 0px 1px white);
  }
  50% {
    transform: scale(1.05, 1.05);
    filter: drop-shadow(0px 0px 5px black);
  }
  100% {
    transform: scale(1, 1);
    filter: drop-shadow(0px 0px 1px white);
  }
}

/*==================================
 =            Text Block            =
 ==================================*/

div.textblock {
  position: absolute;
  /*border   : 1px solid green; */
}

/*----------------------------------
 |			Animations			   |
 -------------------------------- */
.fade_in {
  animation: appear 1s;
  -webkit-animation: appear 1s;
}

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

/*=====  End of Text Block  ======*/

/*===================================
 =            Image Block            =
 ===================================*/

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

div.droppableblock {
  position: absolute;
  width: 100%;
  height: 80%;
  top: 20%;
  /*border     : 1px solid green; */
}

div.imageblock label {
  position: absolute;
}

.horizontal_center {
  left: 50%;
  transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  text-align: center;
}

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

/* === Activity Specific Image Blocks === */

/*=====  End of Image Block  ======*/

/*============================================
 =            Definition layout               =
 ============================================*/
div.definitionblock > img {
  position: relative;
  width: 50%;
  left: -20%;
}

div.definitionblock > figcaption {
  position: relative;
  margin-top: -8%;
  left: -21%;
  font-size: 2em;
  color: rgb(201, 136, 116);
}

div.definitionblock > p.definitiontextstyle {
  position: relative;
  text-align: left;
  margin-top: 15%;
  font-size: 1.5em;
  padding: 0% 2%;
  /* border  : 1px solid red; */
}

.parsedString {
  color: gray;
}

/*=====  End of Definition layout  ======*/

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

/*====================================
 =            Custom Style            =
 ====================================*/
.cover {
  width: 100%;
  height: 100%;
}
.lesson_title {
  position: absolute;
  color: #ff6a65;
  font-size: 5em;
}

.introduction {
  position: absolute;
  top: 5%;
  text-align: center;
  width: 100%;
  color: black;
  font-size: 3vmin;
  z-index: 10;
  /*background-color: #FFD966;*/
}

.qnablock {
  position: absolute;
  top: 20%;
  height: 80%;
  width: 100%;
  padding: 1%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.magnetpair {
  width: 45%;
  height: 45%;
  margin: 1%;
  border-radius: 0.5em;
  flex: 0 0 40%;
  cursor: pointer;
  border: 1px solid #7c7c7c;
  background: #f9f9f9;
}

.magnetpair > img {
  position: absolute;
  width: 30%;
  top: 40%;
}
.magnetpair:hover {
  box-shadow: 4px 5px 3px -2px gray;
  transform: scale(1.05);
}

.order_1 {
  order: 1;
}
.order_2 {
  order: 1;
}
.order_3 {
  order: 1;
}
.order_4 {
  order: 1;
}
.magnet_l {
  left: 12%;
}
.magnet_r {
  left: 58%;
}

.attract {
  animation: attract 1s ease-in forwards;
  -webkit-animation: attract 1s ease-in forwards;
}
@-webkit-keyframes attract {
  100% {
    left: 20.5%;
  }
}
@keyframes attract {
  100% {
    left: 20.5%;
  }
}
.attract_1 {
  animation: attract_1 1s ease-in forwards;
  -webkit-animation: attract_1 1s ease-in forwards;
}
@-webkit-keyframes attract_1 {
  100% {
    left: 50%;
  }
}
@keyframes attract_1 {
  100% {
    left: 50%;
  }
}

.repel {
  animation: repel 1s ease-out forwards;
  -webkit-animation: repel 1s ease-out forwards;
}
@-webkit-keyframes repel {
  100% {
    left: 2%;
  }
}
@keyframes repel {
  100% {
    left: 2%;
  }
}
.repel_1 {
  animation: repel_1 1s ease-out forwards;
  -webkit-animation: repel_1 1s ease-out forwards;
}
@-webkit-keyframes repel_1 {
  100% {
    left: 68%;
  }
}
@keyframes repel_1 {
  100% {
    left: 68%;
  }
}

.feedback {
  display: none;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  text-align: center;
  font-size: 4vmin;
  z-index: 50;
}
.correct {
  font-size: 5vmin !important;
}
.remaining_text {
  display: none;
  color: #ff9da9;
  animation: blink infinite 1s ease-in-out;
  -webkit-animation: blink infinite 1s ease-in-out;
}

@-webkit-keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
/*images*/
.cover_full {
  font-size: 5vmin;
  top: 0%;
  width: 100%;
  height: 100%;
}
.squirrel {
  position: absolute;
  bottom: 20%;
  left: 50%;
  width: 35%;
  transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
}
.font_diy {
  width: 30%;
  height: 20%;
  top: 40%;
  left: 48%;
  transform: translate(-50%, -50%);
  font-size: 4.5vw;
}

.font_diy:lang(np) {
  top: 50%;
}

.fade_out {
  animation: fade_out 1s forwards;
  -webkit-animation: fade_out 1s forwards;
}

@-webkit-keyframes fade_out {
  100% {
    opacity: 0;
  }
}
@keyframes fade_out {
  100% {
    opacity: 0;
  }
}
.zooming_effect {
  animation: zooming_effect infinite 1s;
  -webkit-animation: zooming_effect infinite 1s;
}
@-webkit-keyframes zooming_effect {
  50% {
    transform: scale(1.1);
  }
}
@keyframes zooming_effect {
  50% {
    transform: scale(1.1);
  }
}

/*=====  End of Custom Style  ======*/
.introduction p {
  font-size: 2.5vmin;
  padding: 2%;
  width: 80%;
  margin: auto;
  border-radius: 0.3em;
  background: #fbb877;
}

.feedback p {
  border: 1px solid #3186ea;
  background: #e7effa;
  padding: 4%;
  border-radius: 0.5em;
}
.flipped {
  transform: scaleX(-1) scaleY(-1);
}