.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-family: questrial !important;
}

@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%;
  background-color: #ffc6c6;
  background-image: url("../../images/images_for_Exercise/exercise_bg.png");
  background-position: center;
  background-size: contain;
}
.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 -------
 * ---------------------------------------------*/
/*top to bottom dragdiv*/

.firstContainer{
  position: absolute;
  top: 40%;
  height: 32%;
  left: 0%;
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}
.opnContainer{
  position: relative;
  /*top: 0%;
  left: 0%;*/
  height: 100%;
  width: 30%;
  /* background: #fff; */
  border: 2px solid #000;
  border-radius: 1em;
  border: 4px solid #835F89;
}
.boximg{
  position: absolute;
  top: 43%;
  left: 50%;
  width: 70%;
  transform: translate(-50%,-50%);
}
.corincor_img{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
  width: 20%;
  display: none;
}
.boxtxt{
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 96%;
  font-family: questrial;
  font-size: 3vh;
  background: #B69ABF;
  margin: 2%;
  padding: 1%;
  border-radius: 10px;
}
.opnContainer:hover{
  cursor: pointer;
  transform: scale(1.1);
}
.topInstrn, .secInstrn{
  position: absolute;
  left: 0%;
  width: 100%;
  background: #8BB6F5;
  height: 10%;
}
.topqn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: questrial !important;
  font-weight: 500;
  font-size: 3vh;
}
.secInstrn{
  top: 24%;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
}
.secqn{
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  font-family: questrial !important;
  font-weight: 700;
  font-size: 3vh;
  width: 100%;
}

/*mcq */

.optionsdiv {
  top: 47%;
  display: flex;
  left: 12%;
  flex-direction: row;
  text-align: left;
  position: absolute;
  height: 30%;
  width: 75%;
  flex-wrap: wrap;
}

.optionscontainer {
  width: 50%;
}

.imagestartpos {
  position: absolute;
  width: 10%;
  display: none;
  left: 89%;
  top: 19%;
  transform: translateY(-7%);
}
.top57{
  top: 57%;
}

.optionsdiv p, .optionsdivSec p {
  padding: 2%;
  background: #3c78d8;
  border-radius: 15px;
  margin: 1%;
  font-size: 3vh;
  border: 5px solid #3c78d8;
  font-family: Abeezee;
  width: 95%;
  text-align: center;
  color: #fff;
}


.forhover:hover {
    background: #f6b26b;
    border: 5px solid #e69138;
    cursor: pointer;
}

.forhoverimg:hover{
	color: #F66E20;
	border: 5px solid #FFD966;
}
.optionsdivSec{
  top: 40%;
  display: flex;
  right: 0;
  flex-direction: row;
  text-align: left;
  position: absolute;
  height: 45%;
  width: 41%;
  flex-wrap: wrap;
}
.optionsdivSec .optionscontainer{
  width: 100%;
}
.leftImgCont{
  position: absolute;
  top: 40%;
  left: 8%;
  width: 37%;
  height: 39%;
  background: #d1f4ff;
  border: 4px solid #434343;
  border-radius: 1em;
  overflow: hidden;
}
.leftImg{
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  /* width: 100%; */
  border-radius: 1em;
}
[class^=forceTxt]{
  position: absolute;
  color: #fff;
  font-family: asap;
  font-size: 3.5vh;
  left: 50%;
  transform: translateX(-50%);
}
.boximg_8{
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
}
.b1f1{
  top: 5%;
}
.b1f2{
  top: 45%;
}
.b3f2{
  top: 33%;
}
.b3f3{
  top: 55%;
}
.blBg{
  background: #3c78d8;
}
.cyclGif{
  position: absolute;
  top: 25%;
  left: 31%;
  width: 33%;
}
.bgstretch{
  position: absolute;
  left: -100%;
  width: 200%;
  animation: cycleMove 3s linear infinite;
}
@keyframes cycleMove {
  100%{
    left:0%;
  }
}
.busht20{
  height: 100%;
}
.schoolbus{
  position: absolute;
  width: 45%;
  bottom: 17%;
  left: 33%;
}
 /*----------------------type 5 exercise end---------------------*/
 @media screen and (min-aspect-ratio: 4/3) {
 	/*vh*/
 	.boxtxt{
 		font-size: 3vh;
 	}
 .topqn, .secqn{
 		font-size: 3vh;
 	}
  .optionsdiv p, .optionsdivSec p{
    font-size: 3vh;
  }
 }
 @media screen and (max-aspect-ratio: 4/3) {
 	/*vh*/
 	.boxtxt, .topqn{
 		font-size: 1.5vw;
 	}
  .optionsdiv p, .optionsdivSec p{
    font-size: 2vw;
  }
 }