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

/*-------------- For Loading ---------------*/

#loading-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #222;
}

#loading-text {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #999;
	text-align: center;
	transform: translate(-50%, -50%);
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 3vmin;
}

#loading-content {
	display: block;
	position: absolute;
	left: 40%;
	top: 33.35%;
	width: 20%;
	height: 33.3%;
	transform: translate(-50%, -50%);
	border: 3px solid #F00;
}

#loading-content:after {
	content: "";
	position: absolute;
	border: 3px solid #0F0;
	left: 15%;
	right: 15%;
	top: 15%;
	bottom: 15%;
}

#loading-content:before {
	content: "";
	position: absolute;
	border: 3px solid #00F;
	left: 5%;
	right: 5%;
	top: 5%;
	bottom: 5%;
}

#loading-content {
	border: 3px solid transparent;
	border-top-color: #4D658D;
	border-bottom-color: #4D658D;
	border-radius: 50%;
	-webkit-animation: loader 2s linear infinite;
	-moz-animation: loader 2s linear infinite;
	-o-animation: loader 2s linear infinite;
	animation: loader 2s linear infinite;
}

#loading-content:before {
	border: 3px solid transparent;
	border-top-color: #D4CC6A;
	border-bottom-color: #D4CC6A;
	border-radius: 50%;
	-webkit-animation: loader 3s linear infinite;
	-moz-animation: loader 2s linear infinite;
	-o-animation: loader 2s linear infinite;
	animation: loader 3s linear infinite;
}

#loading-content:after {
	border: 3px solid transparent;
	border-top-color: #84417C;
	border-bottom-color: #84417C;
	border-radius: 50%;
	-webkit-animation: loader 1.5s linear infinite;
	animation: loader 1.5s linear infinite;
	-moz-animation: loader 2s linear infinite;
	-o-animation: loader 2s linear infinite;
}

@-webkit-keyframes loaders {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/*----------------------------------------------
 * ------ css specific for this exercise -------
 * ---------------------------------------------*/
 .creamBg{
   background: #f4e5c2;
 }
.sp-1{
  position: absolute;
  width: 82%;
  height: 57%;
  left: 0%;
  top: 19%;
  opacity: 0;
  padding: 9% 10% 4% 5%;
}
.spBubble{
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
}
.sptxt{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  font-size: 3vh;
  font-family: patrickhand;
}
.spcorincorCont{
  position: absolute;
  width: 48%;
  height: 53%;
  left: 50%;
  bottom: 5%;
}
.monkeyexp{
  position: absolute;
  width: 30%;
  bottom: 0%;
  right: 0%;
  opacity: 0;
}
.optionsdiv {
  top: 44%;
  display: flex;
  left: 3%;
  text-align: left;
  position: absolute;
  height: 52%;
  width: 43%;
  flex-wrap: wrap;
}

.optionscontainer {
  width: 100%;
}

.imagestartpos {
  position: absolute;
  width: 9%;
  margin-left: 1%;
  display: none;
  left: 100%;
  top: 22%;
}

.optionsdiv p {
  padding: 2%;
  background: #926EED;
  border-radius: 15px;
  margin: 1%;
  font-size: 3.5vh;
  border: 5px solid #926EED;
  font-family: Abeezee;
  width: 100%;
  text-align: center;
  color: #fff;
}

.optimg {
    display: inline;
    border-radius: 15px;
    color: white;
    margin: 0% 1%;
    font-size: 4vmin;
    border: 5px solid #ADAEDB;
    cursor: pointer;
    width: 21%;
}

.forhover:hover {
    border: 5px solid #999999;
    cursor: pointer;
}

.forhoverimg:hover{
	color: #F66E20;
	border: 5px solid #FFD966;
}
.qndiv{
  position: absolute;
  top: 22%;
  left: 0%;
  width: 100%;
  background: #84ceeb;
  font-family: sniglet;
}
.question{
  left: 0%;
}
.clickTxt{
  position: absolute;
  top: 13%;
  font-size: 5vh;
  font-family: comicsansms;
  left: 5%;
  width: 90%;
}
.incorct_txt{
  top: 20%;
}
.smallFnt{
  font-size: 2.5vh !important;
}
@media screen and (min-aspect-ratio: 4/3) {
	/*vh*/
	.smallFnt{
		font-size: 2.5vh;
	}
  .sptxt{
    font-size: 2.8vh;
  }
  .question{
    font-size: 4vh;
  }
  .clickTxt{
    font-size: 5vh;
  }
}
@media screen and (max-aspect-ratio: 4/3) {
	/*vw*/
	.smallFnt{
		font-size: 1.3vw;
	}
  .sptxt{
    font-size: 1.4vw;
  }
  .question{
    font-size: 1.9vw;;
  }
  .clickTxt{
    font-size: 2.9vw;
  }
}