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

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

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

/*=====================================
 =            common styles            =
 =====================================*/
.board {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	text-align: center;
}

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

/*================================================
 =            Notification Pulse Style            =
 ================================================*/
/**
 How to use:
 - To enable notification pulse add 'data-usernotification="notifyuser"'
 attribute to the html element inside board div
 */

@keyframes pulse {
0% { transform   : scale(0); opacity: 0.0; }
25% { transform  : scale(0); opacity: 0.6; }
50% { transform  : scale(0.1); opacity: 0.8; }
75% { transform  : scale(0.5); opacity: 1; }
100% { transform : scale(1); opacity: 0.0; }
}

@-moz-keyframes pulse {
0% { -moz-transform   : scale(0); opacity: 0.0; }
25% { -moz-transform  : scale(0); opacity: 0.6; }
50% { -moz-transform  : scale(0.1); opacity: 0.8; }
75% { -moz-transform  : scale(0.5); opacity: 1; }
100% { -moz-transform : scale(1); opacity: 0.0; }
}

@-webkit-keyframes pulse {
0% { -webkit-transform   : scale(0); opacity: 0.0; }
25% { -webkit-transform  : scale(0); opacity: 0.6; }
50% { -webkit-transform  : scale(0.1); opacity: 0.8; }
75% { -webkit-transform  : scale(0.5); opacity: 1; }
100% { -webkit-transform : scale(1); opacity: 0.0; }
}

/*for all element inside board*/
.board *[data-usernotification*="notifyuser"] {
	cursor: pointer;
}

.board *[data-usernotification*="notifyuser"]::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2em;
	height: 2em;
	background-color: white;
	border: 2px solid black;
	border-radius: 50%;
	-webkit-animation: pulse 1.2s ease-out infinite;
	-moz-animation: pulse 1.2s ease-out infinite;
	animation: pulse 1.2s ease-out infinite;
}

/*=====  End of Notification Pulse Style  ======*/

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

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

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

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

/*=========================================================
 =            general templated specific styles            =
 =========================================================*/

/*=====  End of general templated specific styles  ======*/

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

.imageblock{
	position: relative;
	width: 40%;
	height: 60%;
	/*background-color: #faf;*/
	margin-right: 1%;
	float: right;
}

.imageblock > img{
	position: relative;
	width: 100%;
	max-height: 100%;
}

.lowertextblock {
	position: relative;
	height: auto;
	width: 58%;
	bottom: 0;
	left: 0;
	text-align: center;
	padding: 0.5em 0.8em 1em 0.8em;
	float: left;
}

.closebtn1:hover {
	color: black;
}

.cong {
    background-color: #1bc402;
    border-radius: 15px;
    box-shadow: 2px 2px 5px #000;
    color: white;
    display: none;
    font-size: 1.5em;
    left: 12%;
    margin-bottom: 15px;
    padding: 20px;
    position: absolute;
    top: 44%;
    transform: translateY(-50%);
    width: 70%;
}

.closebtn1 {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.SequenceTimeLine {
    display: none;
}




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


/****************************
 *		ex specific css		*
 ****************************/

 svg{
 	position: absolute;
 	top: 0%;
 	left: 0%;
 	width: 100%;
 	height: 100%;
 }

 .bg-full{
 	position: absolute;
 	top: 0%;
 	left: 0%;
 	width: 100%;
 	height: 100%;
 }
 .bg-1{
 	background-color: #cfe2f3;
 }

 .text-ques{
 	position: absolute;
 	top: 10%;
 	width: 80%;
 	left: 10%;
 	font-family: amaranath;
 	font-size: 3.4vw;
 	color: #595959;
 	text-align: left;
 }
 @media(min-aspect-ratio:4/3){
 	.text-ques{
 		font-size: 4.3vh;
 	}
 }

 .text-hint{
 	display: none;
 	position: absolute;
 	z-index: 5;
 	background-color: #9FC5E8;
 	color: #434343;
 	padding: 2% 4%;
 	top: 52%;
 	left: 10%;
 	font-family: andika;
 	font-size: 2.3vw;
 	text-align: left;
 }
 .text-hint>*{
 	position: relative;
 }
 .bt-feedback{ 	display: none;
 	position: absolute;
 	bottom: 18%;
 	left: 10%;
 	width: 80%;
 	text-align: center;
 	font-size: 2.3vw;
 	color: #595959;
 }
 @media(min-aspect-ratio:4/3){
 	.text-hint, .bt-feedback{
 		font-size: 3vh;
 	}
 }

 .input-1{
 	top: 35%;
 	width: 55%;
 	height: 10%;
 	left: 8%;
 	z-index: 50;
 }

 .tri-2{
 	position: absolute;
 	right: 10%;
 	top: 35%;
 	transform: translateY(-50%);
 	width: 22%;
 	height: 30%;
 	font-size: 2vw;
 	color: black;
 }
 @media (min-aspect-ratio:4/3){
 	.tri-2{
 		font-size: 2.7vh;
 	}
 }
 .tri-side2{
 	position: absolute;
 	background-color: #6D9EEB;
 	height: 2%;
 	width: 100%;
 	bottom: 0%;
 }

 .t2-side-1{
 	left: 0%;
 }
 .t2-side-2{
 	right: 0%;
 	transform-origin: 100% 50%;
 	transform: rotate(60deg);
 }
 .t2-side-3{
 	left: 0%;
 	transform-origin: 0% 50%;
 	transform: rotate(-60deg);
 }
 .t2-side-2>p{
 	position: absolute;
 	left: 50%;
 	transform: translateX(-50%);
 	bottom: 100%;
 }
 .t2-side-3>p{
 	position: absolute;
 	left: 50%;
 	transform: translateX(-50%);
 	bottom: 100%;
 }






 .bg-2{
 	background-color: #F4EBCE;
 }
 .text-1-hl{
 	color: #03A9A7;
 }
 .tri-3{
 	position: absolute;
 	right: 10%;
 	top: 35%;
 	transform: translateY(-50%);
 	width: 22%;
 	height: 30%;
 	font-size: 2vw;
 	color: black;
 }
 @media (min-aspect-ratio:4/3){
 	.tri-3{
 		font-size: 2.7vh;
 	}
 }
 .tri-3>div{
 	background-color: #724C3F;
 }


 .para-1{
 	position: absolute;
 	top: 5%;
 	left: 2%;
 	width: 80%;
 	color: #DA4D00;
 	font-family: amaranath;
 	text-align: center;
 	font-size: 3.4vw;
 }
 .para-1>*{
 	margin: 2% 0%;
 }
 @media(min-aspect-ratio:4/3){
 	.para-1{
 		font-size: 4.5vh;
 	}
 }

 .input-2{
	 top: 40%;
	 width: 50%;
	 height: 10%;
	 left: 10%;
	 z-index: 50;
 }
 .hint-formula{
 	display: none;
 	z-index: 30;
 	position: absolute;
 	top: 65%;
 	left: 32%;
 	padding: 2%;
 	padding-top: 0%;
 	transform: translate(-50%, -50%);
 	background-color: #FFE599;
 	border: 0.5vmin solid #946F00;
 	color: black;
 	font-family: amaranath;
 	font-size: 2.1vw;
 }
 @media(min-aspect-ratio:4/3){
 	.hint-formula{
 		font-size: 2.8vh;
 	}
 }
 .leqtext{
 	width: 30%;
 }

 .last-full{
 	position: absolute;
 	bottom: 5%;
 	width: 100%;
 	left: 0%;
 	padding: 2% 0%;
 	background-color: #9FC5E8;
 	color: #595959;
 	font-family: amaranath;
 	font-size: 2.3vw;
 }
 @media(min-aspect-ratio:4/3){
 	.last-full{
 		font-size: 3vh;
 	}
 }








 .bg-3{
  background-color: #CFE2F3;
 }

 .hl-blue{
 	color: #6D9EEB;
 }
 .hl-red{
 	color: #C27BA0;
 }
 .ques-text{
 	position: absolute;
 	top: 10%;
 	width: 45%;
 	left: 2.5%;
 	color: #DA4D00;
 	padding: 2%;
 	font-family: amaranath;
 	font-size: 3.4vw;
 	text-align: center;
 }
 @media(min-aspect-ratio:4/3){
 	.ques-text{
 		font-size: 4.4vh;
 	}
 }

 .sundar{
 	display: none;
 	position: absolute;
 	top:55%;
 	left: 24%;
 	transform: translateX(-50%);
 	height: 35%;
 }
 .ques-poly{
 	position: absolute;
 	width: 27%;
 	height: 28%;
 	bottom: 50%;
 	right: 18.5%;
 	background-color: #9FC5E8;
 }

 .rect-count{
 	display: flex;
 	flex-direction: row;
 	flex-flow: row wrap;
 	justify-content: center;
 	align-items: center;
 	font-size: 2vw;
 }
 .rect-num-block{
 	opacity: 0;
 	width: 33.33%;
 	height: 16.6667%;
 }
 .rect-num-block>p{
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
 }
 .rect-num-block2{
 	width: 33.33%;
 	height: 16.6667%;
 }
 .rect-num-block2>p{
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
 }
 @media (min-aspect-ratio:4/3){
 	.rect-count{
 		font-size: 2.6vh;
 	}
 }

 #bar-graph{
 	position: absolute;
 	width: 45%;
 	top: 15%;
 	height: 70%;
 	right: 5%;
 	z-index: 5;
 }

 .input-3{
 	top: 30%;
 	width: 45%;
 	height: 10%;
 	left: 2.5%;
 	z-index: 50;
 }

 .rect-num-block3{
 	opacity: 0;
 	height: 25%;
 	width: 16.6667%;
 }
 .rect-num-block3>p{
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
 }

 .hint-text{
 	display: none;
 	position: absolute;
 	bottom: 5%;
 	width: 48%;
 	left: 0%;
 	color: #59596B;
 	padding: 2%;
 	font-family: amaranath;
 	font-size: 2.5vw;
 	text-align: left;
 	background-color: #FFD966;
 }
 @media(min-aspect-ratio:4/3){
 	.hint-text{
 		font-size: 3.3vh;
 	}
 }
 .correct-feedback{
 	display: none;
 	position: absolute;
 	bottom: 35%;
 	left: 20%;
 	width: 10%;
 }




 .bg-4{
 	background-color: #85D4EE;
 }

 .ques-text-1{
 	position: absolute;
 	top: 10%;
 	width: 55%;
 	left: 2.5%;
 	color: #DA4D00;
 	padding: 0% 2%;
 	font-family: amaranath;
 	font-size: 3.4vw;
 	text-align: center;
 }
 @media(min-aspect-ratio:4/3){
 	.ques-text-1{
 		font-size: 4.4vh;
 	}
 }

 .hl-brown{
 	color: #72504F;
 }

 .tag{
 	position: absolute;
 	font-size: 2.2vw;
 }
 @media(min-aspect-ratio:4/3){
 	.tag{
 		font-size: 2.9vh;
 	}
 }
 .garden{
 	position: absolute;
 	right: 4%;
 	bottom: 10%;
 	height: 80%;
 }
 .tag-3{
 	bottom: 10%;
 	right: 21%;
 	transform: translateX(50%);
 }
 .tag-4{
 	bottom: 51%;
 	right: 41%;
 }

 .hint-text-1{
 	display: none;
 	position: absolute;
 	top: 55%;
 	width: 40%;
 	left: 11%;
 	color: #59596B;
 	padding: 1%;
 	font-family: amaranath;
 	font-size: 3vw;
 	text-align: left;
 	background-color: #FFE599;
 }
 @media(min-aspect-ratio:4/3){
 	.hint-text-1{
 		font-size: 4vh;
 	}
 }

 .input-4{
 	top: 30%;
 	width: 45%;
 	height: 10%;
 	left: 2.5%;
 	z-index: 50;
 }

 .btn-2{
 	background-color: #F4CC70;
 	border: none;
 	color: #666969;
 }

 .arrow-1{
 	position: absolute;
 	width: 55%;
 	right: 2%;
 	bottom: 3%;
 }
 .arrow-2{
 	position: absolute;
 	height: 61%;
 	right: 60%;
 	bottom: 8%;
 }

 .hint-text-4{
 	display: none;
 	position: absolute;
 	top: 55%;
 	width: 40%;
 	left: 11%;
 	color: #59596B;
 	padding: 1%;
 	font-family: amaranath;
 	font-size: 3vw;
 	text-align: left;
 	background-color: #FFE599;
 }

.hint-text-5{
	top: 72%;
	left: 7%;
}
 @media(min-aspect-ratio:4/3){
 	.hint-text-4{
 		font-size: 3vh;
 	}
 }




 .road-2{
 	position: absolute;
 	width: 35%;
 	right: 47%;
 	height: 12%;
 	bottom: 30%;
 	background-color: #999999;
 	color: white;
 	font-family: amaranath;
 	font-size: 2.3vw;
 }
 .road-2>p{
 	position: absolute;
 	width: 100%;
 	left: 9%;
 	top: 50%;
 	transform: translateY(-50%);
 }
 @media (min-aspect-ratio:4/3){
 	.road-2{
 		font-size: 1.9vw;
 	}
 }

 .road-1{
 	position: absolute;
 	width: 8%;
 	right: 15%;
 	height: 40%;
 	bottom: 60%;
 	background-color: #999999;
 	color: white;
 	font-family: amaranath;
 	font-size: 2.3vw;
 }
 .road-1>p{
 	position: absolute;
 	width: 100%;
 	left: 0%;
 	top: 50%;
 	transform: translateY(-50%);
 }
 @media (min-aspect-ratio:4/3){
 	.road-1{
 		font-size: 1.7vw;
 	}
 }

 .qt-2{
 	color: #595959;
 	top: 5%;
 	left: 20%;
 }
 .tag-2m{
 	bottom: 34%;
 	left: 21%;
 	color: white;
 }

 .hint-5{
 	display: none;
 	top: auto;
 	top: 30%;
 	left: 19%;
 }


 .ans-formula{
 	z-index: 30;
 	position: absolute;
 	top: 25%;
 	left: 20%;
 	padding: 3%;
 	padding-top: 0%;
 	background-color: #FFE599;
 	border: 0.5vmin solid #946F00;
 	color: black;
 	font-family: amaranath;
 }

 .using-formula, .ans-formula,.last-feedback{
 	font-size: 2.5vw;
 }

 @media(min-aspect-ratio:4/3){
 	.last-feedback, .using-formula, .ans-formula{
 		font-size: 3.3vh;
 	}
 }

 .input-5{
 	top: 17%;
 	width: 45%;
 	height: 10%;
 	left: 20%;
 	z-index: 50;
 }

 .garden-2{
 	position: absolute;
 	left: 2%;
 	height: 35%;
 	bottom: 30%;
 	z-index: 2;
 }
 .pond-2{
 	position: absolute;
 	right: 2%;
 	height: 50%;
 	bottom: 10%;
 	z-index: 2;
 }

 .arrow-4{
 	position: absolute;
 	left: 22%;
 	height: 12%;
 	bottom: 30%;
 	z-index: 5;
 }




 .bg-6{
	 background-color: #a4d028;
 }
 .hl-black{
	 color: #000000;
 }
.ques-text-6{
	position: absolute;
	top: 2.5%;
	width: 75%;
	left: 2.5%;
	color: #FFFFFF;
	padding: 2%;
	font-family: amaranath;
	font-size: 3.7vw;
	text-align: left;
}
@media(min-aspect-ratio:4/3){
	.ques-text-6{
		font-size: 4.5vh;
	}
}

.tag-6{
 bottom: 2.5%;
 right: 50%;
 transform: translateX(50%);
}
.tag-6a{
	bottom: 49%;
	right: 3%;
}

.input-6{
	top: 45%;
	width: 55%;
	height: 10%;
	left: 22.5%;
	z-index: 50;
}

.btn-6{
	background-color: #F4CC70;
	border: none;
	color: #666969;
}

.arrow-6{
	position: absolute;
	width: 100%;
	right: 0%;
	bottom: 3%;
}
.arrow-6a{
	position: absolute;
	height: 100%;
	left: 95%;
	bottom: 0%;
}

.hint-text-6{
	top: 63%;
	left: 30%;
}




.tag-7{
 bottom: 22.5%;
 right: 60%;
 transform: translateX(50%);
}
.tag-7a{
	bottom: 53%;
	right: 86%;
}

.input-7{
	top: 85%;
	width: 55%;
	height: 10%;
	left: 10%;
	z-index: 50;
}

.btn-7{
	background-color: #F4CC70;
	border: none;
	color: #666969;
}

.arrow-7{
	position: absolute;
	width: 50%;
	right: 35%;
	bottom: 24%;
}
.arrow-7a{
	position: absolute;
	height: 50%;
	left: 10%;
	bottom: 30%;
}
.pond-7{
	position: absolute;
	width: 50%;
	left: 15%;
	top: 20%;
	height: 50%;
}
.hint-text-7{
	top: 72%;
	left: 67.5%;
	width: 30%;
}


.input-8{
	top: 80%;
	width: 55%;
	height: 10%;
	left: 0%;
	z-index: 50;
}

.hint-text-8{
	top: 72%;
	left: 57.5%;
	width: 37%;
}

.hint-text-9{
	top: 67.5%;
	left: 67.5%;
	width: 30%;
}

.fence{
	position: absolute;
	left: 75%;
	top: 20%;
	height: 25%;
}

.pond-area-text{
	position: absolute;
	top: 45%;
	left: 40%;
	transform: translate(-50%, -50%);
	font-size: 4vw;
	width: 35%;
	background-color: rgba(255,255,255,0.7);
	color: #595959;
	padding: 1% 2%;
}
@media(min-aspect-ratio:4/3){
 .pond-area-text{
	 font-size: 5.4vh;
 }
}