@charset "utf-8";

@font-face {
	font-family: Rubric;
	font-style: normal;
	font-weight: normal;
	src: url(../__fonts/Cabin-Bold.ttf);
}

@font-face {
	font-family: Ans;
	font-style: normal;
	src: url(../__fonts/Roboto-Regular.ttf);
}

@font-face {
	font-family: Title;
	font-style: normal;
	font-weight: normal;
	src: url(../__fonts/MyriadPro-Semibold_2.otf);
}


#rubricAud {
	display: inline-block;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	margin-right: 10px;
	vertical-align: middle;
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
	border: 1px solid #F29B34;
	box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

body {
	margin: 0px;
	padding: 0px;
	-webkit-user-select: none;
	-moz-user-select: none;
	min-height: 100vh;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
}

div {
	/*border:#000 dotted 2px;*/
}

#main {
	width: 100vw;
	height: 100%;
	min-height: 100vh;
	background-image: url("../Assets/images/bg.png");
	background-position: bottom;
	background-size: 100% 100%;
}


#rubricDiv {
	position: absolute;
	left: 50%;
	background: #ffffff;
	padding: 10px 10px 10px 20px;
	/* border-top-right-radius: 10px; */
	border-radius: 10px;
	border-bottom-right-radius: 10px;
	font-family: Rubric;
	font-weight: bold;
	color: black;
	text-align: left;
	transform: translate(-50%);
	top: 20px;
}

#stage {
	width: 1280px;
	height: 720px;
}

#ques {
	cursor: default;
}

.containr {
	position: absolute;
	width: 180px;
	top: 0px;
}

.optionDesign {
	font-family: Ans, sans-serif;
	box-shadow: inset 0px 0px 6px #666;
	border: 3px solid #F29B34;
	border-radius: 5px;
	background: #ffff99;
	padding: 10px;
}





#textBox {
	font-family: Ans, sans-serif;
	display: block;
	border: 3px solid #F29B34;
	background: #fff;
	padding-left: 0px;
	display: none;
}


#optDv {
	font-family: Ans, sans-serif;
	display: block;
	position: absolute;
	background: #979693;
	padding-left: 0px;
	border-radius: 10px;
	border: dashed 3px #fff;
	box-shadow: 11px 11px 34px #333;
	left: 50%;
	transform: translate(-50%);
	color: #fff;
	width: 700px;
}

@media only screen and (max-width: 750px) {
	#optDv{
		width: 80%;
	}
}
.quesDiv {
	display: block;
	position: absolute;
	padding-left: 10px;
	padding-top: 2px;
}

#SnoDiv {
	font-family: Ans, sans-serif;
	display: inline-block;
	position: absolute;
	padding-top: 5px;
	border: 3px solid #F29B34;
	border-radius: 50%;
	background: #FFF;
	text-align: center;
	font-size: 30px;
}

.option {
	text-align: center;
	font-size: 30px;
	display: inline-block;
	cursor: pointer;
	margin-left: 5px;
}

.option-selected {

	text-align: center;
	font-size: 30px;
	display: inline-block;
	cursor: pointer;
	margin-left: 5px;
	color: #2b64ff;

}

.option-right {
	text-align: center;
	font-size: 30px;
	display: inline-block;
	cursor: pointer;
	margin-left: 5px;
	color: #00c100;
}

.option-wrong {
	text-align: center;
	font-size: 30px;
	display: inline-block;
	cursor: pointer;
	margin-left: 5px;
	color: #F00;
}

#submitBtn {
	display: block;
	cursor: pointer;
	background-image: url(../Assets/images/submit.png);
	background-color: transparent;
	overflow: hidden;
	border: none;
	width: 109px;
	height: 66px;
}



#checkSolution {
	visibility: hidden;
	position: absolute;
	/* width:548px; */
	top: 639px;
	/* left: 180px; */
	left: 50%;
	transform: translate(-50%);
	z-index: 1;
}

#preNext {
	position: absolute;
	width: 500px;
	height: 50px;

}

.prenxt {
	height: 53px;
	width: 53px;
	cursor: pointer;
	background: -webkit-linear-gradient(#fcfcfc, #bcbcbc);
	background: -o-linear-gradient(#fcfcfc, #bcbcbc);
	background: -moz-linear-gradient(#fcfcfc, #bcbcbc);
	background: linear-gradient(#fcfcfc, #bcbcbc);
	border-radius: 100%;


}


#prev {

	background: url(../Assets/images/arrow2.png);
	background-size: 53px 53px;
}

#next {

	background: url(../Assets/images/arrow.png);
	background-size: 53px 53px;
}

.innerQ {
	text-align: left;
	margin: 15px 10px 20px 20px;
	/* text-indent:-30px; */
}

.inClass {
	color: #fff;
	border: 0;
	outline: none;
	border-bottom: black 2px solid;
	text-align: center;
	font-size: 25px;
	background-color: transparent;
}

#startBtn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


#showHowBtn {
	font-size: 21px;
	font-family: Ans;
	display: block;
	width: 180px;
	/* height: 30px; */
	margin-top: 20px;
	font-weight: bold;
	text-align: center;
	background: -webkit-linear-gradient(#fcfcfc, #bcbcbc);
	background: -o-linear-gradient(#fcfcfc, #bcbcbc);
	background: -moz-linear-gradient(#fcfcfc, #bcbcbc);
	background: linear-gradient(#fcfcfc, #bcbcbc);
	color: #151515;
	cursor: pointer;
	padding: 7px 0 7px 0;
	margin-right: 20px;
	border-radius: 10px;
	border-bottom: 1px solid #9c9999;
	box-shadow: 2px 2px 5px 1px #3e3e3e;
	float: right;
}

#showHowVideo img,
#showHowVideo video {
	position: absolute;
	top: 285px;
	left: 619px;
	width: 640px;
	height: 360px;
	border: solid 5px #fff;
	border-radius: 20px;
}

img#xCloseBtn {
	width: 38px;
	height: 38px;
	display: block;
	border: none;
	position: absolute;
	left: 1224px;
	top: 291px;
	cursor: pointer;
}

img#questImg {
	position: absolute;
	width: 471px;
	height: 261px;
	top: 181px;
	left: 223px;
}









#activityText {
	position: absolute;
	left: 200px;
	top: 65px;
	-webkit-animation-name: activityTextAnim;
	-webkit-animation-duration: 1s;
	animation-name: activityTextAnim;
	animation-duration: 1s;
}

@-webkit-keyframes activityTextAnim {
	0% {
		left: 200px;
		top: -100px;
	}

	50% {
		left: 200px;
		top: 95px;
	}

	100% {
		left: 200px;
		top: 65px;
	}
}


@keyframes activityTextAnim {
	0% {
		left: 200px;
		top: -100px;
	}

	50% {
		left: 200px;
		top: 95px;
	}

	100% {
		left: 200px;
		top: 65px;
	}
}

#completedText {
	position: absolute;
	left: 600px;
	top: 65px;
	-webkit-animation-name: completedTextAnim;
	-webkit-animation-duration: 1s;
	animation-name: completedTextAnim;
	animation-duration: 1s;
}


@-webkit-keyframes completedTextAnim {
	0% {
		left: 600px;
		top: 225px;
	}

	50% {
		left: 600px;
		top: 35px;
	}

	100% {
		left: 600px;
		top: 65px;
	}
}


@keyframes completedTextAnim {
	0% {
		left: 600px;
		top: 225px;
	}

	50% {
		left: 600px;
		top: 35px;
	}

	100% {
		left: 600px;
		top: 65px;
	}
}


@media only screen and (max-width: 1820px) {
	.innerQ {
		font-size: 22px !important;
	}
}




.actCompleted {
	animation-name: completedTextAnim;
	animation-duration: 2s;
}


@-webkit-keyframes completedTextAnim {
	0% {
		left: -100%;
		top: 0;
	}

	100% {
		left: 0;
		top: 0;
	}
}


@keyframes completedTextAnim {
	0% {
		left: -100%;
		top: 0;
	}

	100% {
		left: 0;
		top: 0;
	}
}

@media only screen and (max-width: 940px) {
	.innerQ {
		display: flex !important;
		flex-wrap: wrap;
	}

	#optDv {
		width: 94%;
	}

	.innerQ b:nth-of-type(1),
	.innerQ span:nth-of-type(1) {
		order: 1;
		width: 100%;
	}

	.innerQ b:nth-of-type(2),
	.innerQ input:nth-of-type(1) {
		order: 2;
		width: 100%;
	}


	.innerQ b:nth-of-type(3),
	.innerQ input:nth-of-type(2) {
		order: 3;
		width: 100%;
	}

	#checkSolution {
		top: 718px;
	}
}