@font-face {
    font-family:ChelseaMarket;
    src: url("../../../../../../fonts/ChelseaMarket-Regular.ttf");
}
@font-face {
    font-family:amaranath;
    src: url("../../../../../../fonts/amaranath/amaranth-bold.ttf");
}
.activity_container {
    width      : 100%;
    height     : 100%;
    position   : relative;
    overflow   : hidden;
    font-size  : 1.3em;
    background : #fff;
    box-shadow : inset 0 0 30px #f2f2f2;
}

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

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

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

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

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

p{
	margin: 0;
}
.contentwithbg {
	width: 100%;
	height: 100%;
	background: url("http://gituploads.olenepal.org/epaath_media/activity/nepali/poster_and_bhitteypatra/exercise/images/introduction-slide.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

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

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

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

.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: 0%;
	left: 0%;
	width: 100%;
	height: 20%;
	background-color: #E3D0DA;
	color: #CE00A7;

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

/*============ exercise template ===================
==================================================== */



.exefin {
	display: none;
    width: 100%;
    height: 20%;
    position: absolute;
    padding-bottom: 1%;
    top: 25%;
    animation: fade-in 1s linear forwards;
    text-align: center;
}

.exefin{
}

@keyframes fade-in{
	from{opacity: 0;}
	to{opacity: 1;}
}

.circleimg{
    background-image: url("http://gituploads.olenepal.org/epaath_media/activity/nepali/poster_and_bhitteypatra/exercise/images/11.jpg") !important;
}

.backtrue{
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    padding: 6% 10% !important;
    margin: 1% !important;
}

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

.jump_rhino {
	-webkit-animation: jump_rhino 0.5s cubic-bezier(0,.5,1,.5);
	animation: jump_rhino 0.5s cubic-bezier(.5,1,1,.75);
}
@keyframes
jump_rhino{
	50% {transform: translateY(-150%);}
}
@-webkit-keyframes
jump_rhino{
	50% {transform: translateY(-150%);}
}

.zoom_rhino {
	-webkit-animation: zoom_rhino 1s linear forwards;
	animation: zoom_rhino 1s linear forwards;
	animation-delay:0.75s;
	transform-origin: bottom right;
}
.zoom_marks_rhino {
	-webkit-animation: zoom_marks_rhino 1s linear forwards;
	animation: zoom_marks_rhino 1s linear forwards;
	animation-delay:0.75s;
}
@keyframes
zoom_marks_rhino{
	100% {transform: scale(2);right: 35%;  top: 15%;}
}
@-webkit-keyframes
zoom_marks_rhino{
	100% {transform: scale(2); right: 35%; top: 15%;}
}

@keyframes
zoom_rhino{
	100% {transform: scale(2.5);right: 0%;  bottom: 30%;}
}
@-webkit-keyframes
zoom_rhino{
	100% {transform: scale(2.5); right: 0%; bottom: 30%;}
}

/*--------- for exercise -------------*/
.main_bg{
	background-color:#fbf7eb ;

}
/*------------------ specific blocks ------------------*/
.textblock{
	position: absolute;
}
.topbox{
	top: 22%;
	left: 0%;
	width: 100%;
	z-index: 223;
	font-family: ChelseaMarket;
	padding: 0% 2%;
	position: absolute !important;
	transform: translateY(-50%);
}

.markboard_rhino{
	background-color:transparent;
	font-family:amaranath;
}

.color{
	color:#ffffff;
}
.instruction_div{
	top: 0%;
	padding: 0% 2%;
	height: 100%;
	width: 100%;
	text-align: left;

}
.instruction_div>*{
	position: relative;
	margin-top: 1%;
}
.question_number{
top: 17%;
text-align: left;
color: #595959;
left: 13%;
}
.instruction{
	/*font-weight: bold;*/
}
.correct{
	cursor: pointer;
	position: absolute;
	top: 50%;
	left: 10%;
	padding: 5%!important;
	border: 3px solid #FCD172;
	background-color: #6EB260;
	color: white;
}
.incorrect{
	cursor: pointer;
	position: absolute;
	top: 50%;
	right: 10%;
	padding: 5%!important;
	background-color: #BA6B82;
	color: black;
}

.correct:hover{
	opacity: 0.6;
}
.incorrect:hover{
	opacity: 0.6;
}
.passageblock{
	position: absolute;
	top: 0%;
	width: 100%;
	left: 0%;
	padding: 1%;
	height:auto;
	z-index: 30;
	text-align: left;
	background-color:#1CB7CD;
}
.highlight_text{
	font-weight: bold;
	color: #EEA22B;
}
.passageblock>p{
	width: 80%;
	font-family: ChelseaMarket;
	text-align: center;
}
@media (min-aspect-ratio: 4/3){
	.passageblock{

	}
}
.optionsblock, .optionblock2{
	padding: 2%;
	height: auto;
	top: 60%;
	width: 100%;
	left: 0%;
	z-index: 10;
	transform: translateY(-50%);
}

.optionblock2{
	width: 60%;
	left: 30%;
	top: 60%;
	transform: translate(-50%, -50%);
}

.optionsblock  >  div, .optionblock2 > div {
	position: relative;
	padding: 0.2em 0.8em;
	left: 50%;
	height: auto;
	margin-bottom: 2%;
	width: 90%;
	background-color: #FFCD53;
	border: 5px solid white;
	border-radius: 2vmin;
	cursor: pointer;
	font-family: pangolin;
	transform: translateX(-50%);
}
.correct-icon, .incorrect-icon{
	display: none;
	position: absolute;
	height: 1.5em;
	top: 50%;
	left: 102%;
	transform: translateY(-50%);
}
.optioncontainer:hover{
	background-color: #98C02E;
	border:2px solid #EEFF41;
}

#player_score_rhino {
    order: -1;
    font-size: 2.4vw;
    text-align: center;
    color: white;
    font-family: amaranath;
    top:35%;
}

/*-------------------------
 ------- for fonts --------
 --------------------------*/


.my_font_very_big{
	font-size: 4vw;
}

.my_font_big{
	font-size: 3.3vw;
}
.my_font_medium{
	font-size: 2.2vw;
}
.my_font_small{
	font-size: 1.5vw;
}
.bg_blue{
  background: #67baca;
}
@media (min-aspect-ratio: 4/3){
	.my_font_very_big{
		font-size: 5vmin;
	}
	.my_font_big{
		font-size: 4vmin;
	}
	.my_font_medium{
		font-size: 3vmin;
	}
	.my_font_small{
		font-size: 2vmin;
	}
}


@media screen and (min-aspect-ratio: 4/3) {
	/*vh*/
	.passageblock>p{
		font-size: 5vh;
	}
	.optionsblock > div, .topbox{
		font-size: 3.5vh;
	}
	.topbox{
		font-size: 4vh;
	}
	.optionsblock2 > div {
		font-size: 3.5vh;
	}
	.optionscontainer>p{
		font-size: 3.5vh;		
	}
}

@media screen and (max-aspect-ratio: 4/3) {
	/*vw*/
	.passageblock>p{
		font-size: 4.2vw;
	}
	.optionsblock > div, .topbox{
		font-size: 2.7vw;
	}
	.topbox{
		font-size: 2.8vw;
	}
	.optionsblock2 > div {
		font-size: 2.4vw;
	}
	.optionsblock > div{
		width: 98%;
	}
	.optionscontainer>p{
		font-size: 2.5vw;		
	}
}