@font-face {
    font-family: ChelseaMarket-Regular;
    src: url("../../../../../fonts/ChelseaMarket-Regular.ttf");
}
@font-face {
    font-family: ComicSansMSRegular;
    src: url("../../../../../fonts/ComicSansMSRegular.ttf");
}
@font-face {
    font-family: Andika-Regular;
    src: url("../../../../../fonts/Andika-Regular.ttf");
}
.thebg1{
background-color:#CFE2F3;
}
.bg1{
	position:absolute;
	top:0%;
	left:0%;
	height:100%;
	width:100%;
}
.bgclr{
	background-color:#CFE2F3;
}
.qnword1{
	color:#874CE7;
	font-weight:bold;
}
.uptxt{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	font-family: sniglet;
	font-size: 2vw;
	padding: 1% 1% 1% 2%;
	text-align: center;
	background-color: #579C94;
	color: #fff;
	font-family: Andika-Regular;
}
.question{
	position: relative;
	top:0%;
	left: 10%;
	width: 100%;
	font-family: sniglet;
	font-size: 3.2vh;
	text-align: left;
}
.hintcls{
	position: absolute;
	left: 23%;
	width: 100%;
	height: 20%;
	top: 97%;
}
.hint{
	position: relative;
	top:0%;
	left:0%;
	width: 100%;
	font-family: sniglet;
	font-size: 2vw;
	text-align: left;
}
.qn1{
	top:14%;
}
.qn2{
	top:43%;
}
.qn3{
	top:35%;
}
.clktxt{
	position:absolute;
	top:25%;
	left:30%;
	color:#A61C00;
	font-size:2vw;
	font-family:sniglet;
}
.optionsdiv {
	display: flex;
	position: absolute;
	top: 3%;
	width: 73%;
	left: 0%;
	text-align: center;
	height: 100%;
}
.optionscontainer {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: flex-start;
	justify-content: space-between;
	height: 50%;
	top: 55%;
	left: 10%;
}
.optionscontainer p {
	position: relative;
	display: flex;
	padding: 3.5%;
	left: 10%;
	top: -6%;
	margin: 1%;
	width: 80%;
	font-size: 2vw;
	color: #ffffff;
	background-color:#1155CC;
	border: 4px solid #1155CC;
	border-radius: 6px;
	font-family: Andika-Regular;
}

.imagestartpos {
	position: absolute;
	width: 14%;
	top: 20%;
	left: 129%;
	margin-left: -38%;
	display: none;
}

.forhover{
	cursor: pointer;
}

.forhover:hover {
    background: #F9CB9C;
    border:4px solid #E69138;
}
.exerciseblock{
	position:absolute;
	top:15%;
	left:0%;
	width:100%;
	height:90%;
	}
.block1{
	position: absolute;
	top: 0%;
	width: 100%;
	height: 30%;
}
.block2{
	position:absolute;
	top:30%;
	width:100%;
	height: 30%;
}
.s2{
	position: absolute;
	top: 41%;
	width: 100%;
	height: 30%;
}
.block3{
	position:absolute;
	top:60%;
	width:100%;
	height: 30%;
}
.qnclass{
	position: absolute;
	left: 0%;
	width: 100%;
	height: 51%;
	top: 3%;
}
.midtxt{
	position:absolute;
	top:30%;
	left:10%;
	width:90%;
	font-size:2vw;
	font-family: sniglet;
	text-align:left;
  line-height:5.5vmin;
}
@media (min-aspect-ratio:4/3){
	.titletext{
		font-size: 4vw;

	}
	.uptxt, .clktxt,.optionsdiv, .midtxt{
		font-size: 2vw;
	}
	 .crwr{
	 	font-size:1.8vw;
	 }
}
.diyimage{
	position: absolute;
	width: 102%;
	left: 0%;
}
.diytitle{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 20%;
	top: 46%;
	color: #0097a7;
}

.option{
	position: absolute;
	width: 100%;
	float: right;
	right: 0%;
	top: 20%;
	background-color: #7EC7FF;;
	height: 80%;
}
.commonbtn{
	position: absolute;
	width: 65%;
	left: 17%;
	background-color: #7b74d4;
	color: white;
	border-radius: 14px;
	height: 14%;
	top: 34%;
	padding: 1%;
	font-size: 1.5vw;
	z-index:1;
}
.opt1{
	top:33%;
}
.opt2{
	top:50%;
}
.opt3{
	top:66%;
}
.opt4{
	top:82%;
}
.commonbtn:hover{
	transform: scale(1);
	border:2px solid;
	background-color: #F9CB9C;
	border-color: #E39540;
	color:#43434B;
	border-radius: 9px;
	transition:0.8s;
	cursor: pointer;
}
.correctans{
	pointer-events: none;
	background-color: #98C02E;
	border:3px solid;
	border-color: #DEEF3C;
	border-radius:14px;
	color: white;
}
.wrongans{
	pointer-events: none;
	background-color:#FF0000;
	border:3px solid;
	border-color: #980000;
	color: white;
	border-radius: 3vmin;
}
.correctWrongImg{
	position: absolute;
	width: 6%;
	left: 102%;
	bottom: 30%;
}