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

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

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

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

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

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

div.generalTemplateblock {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  /*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%;
}
.contentblock {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
}

.exerciseblock {
  position: relative;
  width: 100%;
  height: 85%;
  left: 0%;
  top: 0%;
  margin-top: 9%;
}
.scoreboard_rhino
  ~ .board
  > .generalTemplateblock
  > .contentblock
  > .exerciseblock {
  margin-top: 5%;
}

/*----------------------------------------------
 * ------ css specific for this exercise -------
 * ---------------------------------------------*/
.excblkclass {
  position: absolute;
  top: 40%;
  left: 50%;
  height: 20%;
  width: 58%;
  transform: translate(-50%);
}
.fstblk,
.imgcont,
.ipcont,
.lstblk {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 20%;
}
.imgcont {
  left: 20%;
}
.ipcont {
  left: 40%;
}
.eqcont {
  left: 60%;
}
.lstblk {
  left: 80%;
}
.imgplus {
  position: absolute;
  z-index: 10;
}
.imgbig {
  width: 100%;
  left: 0;
  top: 38%;
  position: relative;
  z-index: 50;
}
.imgsmall {
  width: 60%;
  top: 45%;
  left: 20%;
  z-index: 100;
  position: relative;
}

.bigobjtext {
  left: 22%;
}
.button {
  position: absolute;
  background: #0097a7;
  width: 16%;
  padding: 1%;
  bottom: 20%;
  border-radius: 1vmin;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-family: abeeZee;
  letter-spacing: 1.5;
}

.smallobjtext {
  left: 62%;
}

.qntxt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #595959;
  font-family: proximaNova;
}
.highlighted-text {
  position: absolute;
  top: 25%;
  font-size: 2.5vw;
  background: #f9cb9c;
  width: 100%;
  padding: 1% 0;
  font-family: abeeZee;
}

.input {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 63%;
  font-size: 7vh;
  text-align: center;
  font-family: proximaNova;
}
.qn2_blk {
  text-align: left;
  width: 100%;
}
.toptxt {
  position: absolute;
  top: 15%;
  width: 100%;
  left: 10%;
  text-align: left;
  font-family: abeeZee;
}
.submit {
  position: absolute;
  top: 70%;
  background: #6d9eeb;
  padding: 1%;
  color: #fff;
  font-size: 3.5vh;
  border-radius: 0.5em;
  left: 45%;
}
.submit:hover {
  cursor: pointer;
}
.correctclass {
  background: #0f0;
  border: 3px solid #ff0;
}
.incorrectclass {
  background: #f00;
  border: 3px solid #660000;
}
.corincorimg {
  position: absolute;
  width: 39%;
  top: 88%;
  left: 34%;
  display: none;
}
.grassbg {
  background-color: #67baca;
}
@media (min-aspect-ratio: 4/3) {
  .qntxt {
    font-size: 10vh;
  }
  .input {
    font-size: 7vh;
  }
  .toptxt {
    font-size: 5vh;
  }
  .submit {
    font-size: 3.5vh;
  }
}
@media (max-aspect-ratio: 4/3) {
  .qntxt {
    font-size: 8vw;
  }
  .input {
    font-size: 5vw;
  }
  .toptxt {
    font-size: 3vw;
  }
  .submit {
    font-size: 2.7vw;
  }
}