#testpage {
	display: none;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 100vh;
	height: 100vh;
	max-width: 100vw;
	/*border: solid red;*/
}


table{
	margin-left: auto; 
	margin-right: auto;
}

div > table img {
	width: 6vw;
	height: 6vw;
	margin-top: 2vh; 
	margin-bottom: 2vh
}

div > ul li{
	width: 30%;
	margin: auto;
	text-align: left;
	list-style: none;
}

hr{
	width: 50%;
	height: 2px;
	color: solid blue;
	border-bottom: 2px solid #aaaaaa;
	animation: longenth 2s ease;
	-webkit-animation: longenth 2s ease;
	-moz-animation: longenth 2s ease;
	-o-animation: longenth 2s ease;
	-ms-animation: longenth 2s ease;
}

.problem{
	/*font-family: josefin;*/
	font-size: 3vw;
	font-weight: bold;
}


.q1 {
	position: relative;
	display: block;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(40vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
	/*z-index: 1;*/
}

.q1_input{
	width: 4vw;
	height: 3vw;
	text-align: center;
	font-family: josefin;
	font-size: 2vw;
}

.q2{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(43vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}
.q3{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(35vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}
.q4{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(30vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}
.q4_input, .q12_input{
	width: 4vw;
	height: 3vw;
	font-family: josefin;
	font-size: 2vw;
}
.q5{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(40vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

.q6{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(40vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

.q7{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(41vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

.q8{
	position: relative;
	display: none;
	text-align: center;
	font-size: 2.5vw;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(35vh - 15vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

.q9{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(40vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

.q10{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(30vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

#ans101:hover, #ans102:hover, #ans103:hover, #ans104:hover, #ans105:hover, #ans106:hover, #ans111:hover, #ans112:hover, #ans113:hover, #ans114:hover {
	box-shadow: 0px 0.3vw .5vw #444444;
	cursor: pointer;
}

.q11{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(35vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

.q12{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(40vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

.q13{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	font-size: 2vw;
	height: 93vh;
	width: 100%;
	padding-top: calc(35vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}
.q13 > .btn-ans{
	width: 18vw;
	height: 5vw;
	font-size: 2vw;
	text-align: center;
	/*background-color: #8338c4;*/
	background-color: rgb(255, 255, 255, 0);
	color: #8338c4;
	border: 0.1vw solid #8338c4;
	transition: 100ms;
	-webkit-transition: 100ms;
	-moz-transition: 100ms;
	-o-transition: 100ms;
	-ms-transition: 100ms;
}

.q14{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(40vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

.q15{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(40vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}
.q15 > .btn-ans, .q16 > .btn-ans{
	width: 15vw;
	font-size: 1.5vw;
}

.q16{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(43vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

.q17{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(40vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}
.q18{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(40vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

.q19{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	font-size: 2vw;
	height: 93vh;
	width: 100%;
	padding-top: calc(40vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}
.q19 > table img{
	width: 25vw;
	height: 4vw;
}

.q19 > table#ans19 img:hover{
	box-shadow: 0px 0.3vw .5vw #444444;
	cursor: pointer;
}

.q20{
	position: relative;
	display: none;
	text-align: center;
	border: 0px solid black;
	height: 93vh;
	width: 100%;
	padding-top: calc(40vh - 10vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

.q21 {
	position: relative;
	display: none;
	height: 93vh;
	width: 100%;
	padding-top: calc(35vh - 16vw);
	animation: fadeInUp 1s ease;
	-webkit-animation: fadeInUp 1s ease;
	-moz-animation: fadeInUp 1s ease;
	-o-animation: fadeInUp 1s ease;
	-ms-animation: fadeInUp 1s ease;
}

.btn-ans{
	width: 10vw;
	height: 4vw;
	font-size: 2vw;
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
	/*background-color: #8338c4;*/
	background-color: rgba(255, 255, 255, 0);
	color: #8338c4;
	border: 0.1vw solid #8338c4;
	transition: 500ms;
	-webkit-transition: 500ms;
	-moz-transition: 500ms;
	-o-transition: 500ms;
	-ms-transition: 500ms;
	border-radius: 1vw;
}

#hint {
	height: calc(12px + 0.8vw);
	padding: 0;
	width: calc(40px + 1.7vw);
	font-size: calc(10px + 0.25vw);
	text-align: center;
	background-color: rgba(255, 255, 255, 0);
	color: red;
	border: 0.05vw solid red;
	transition: 500ms;
	-webkit-transition: 500ms;
	-moz-transition: 500ms;
	-o-transition: 500ms;
	-ms-transition: 500ms;
	/*border-radius: 0.7vw;*/
	border-radius: calc(5px + 4.5vw)
}

#hint:hover {
	transition: 500ms;
	-webkit-transition: 500ms;
	-moz-transition: 500ms;
	-o-transition: 500ms;
	-ms-transition: 500ms;
	animation: styleHint 2s ease infinite;
	-webkit-animation: styleHint 2s ease infinite;
	-moz-animation: styleHint 2s ease infinite;
	-o-animation: styleHint 2s ease infinite;
	-ms-animation: styleHint 2s ease infinite;
}

/*		.toggle #hint {
	width: 2vw;
	transition: 500ms;
	-webkit-transition: 500ms;
}
*/
.btn-ans:hover{
	color: white;
	transition: 500ms;
	-webkit-transition: 500ms;
	-moz-transition: 500ms;
	-o-transition: 500ms;
	-ms-transition: 500ms;
	background-color: #8338c4;
	animation: styleShadow 2s ease infinite;
	-webkit-animation: styleShadow 2s ease infinite;
	-moz-animation: styleShadow 2s ease infinite;
	-o-animation: styleShadow 2s ease infinite;
	-ms-animation: styleShadow 2s ease infinite;
}

.btn-ans:active {
	transform: translate(0px, 0.2vw);
	-webkit-transform: translate(0px, 0.2vw);
	-moz-transform: translate(0px, 0.2vw);
	-o-transform: translate(0px, 0.2vw);
	-ms-transform: translate(0px, 0.2vw);
	height: 3.8vw;
	background-color: #a55ae6;
	box-shadow: 0px 0.3vw .5vw #444444;
}

#divProgressBar {
	margin-top: 3.5vw;
}

#progBar {
	width: 100%;
	padding: 0;
	border-radius: 0.5vw;
	background-color: #e2e2e2;
	animation: progressBar 1s linear;
	-webkit-animation: progressBar 1s linear;
	-moz-animation: progressBar 1s linear;
	-o-animation: progressBar 1s linear;
	-ms-animation: progressBar 1s linear;
}

#prog {
	background-color: #3fad30;
	width: 5%;
	border-radius: 0.5vw;
	height: 0.7vw;
}

.clickable{
	cursor: pointer;
}

#replay {
	transition: 100ms;
	-webkit-transition: 100ms;
	-moz-transition: 100ms;
	-o-transition: 100ms;
	-ms-transition: 100ms;
}

#replay:hover {
	animation: styleShadow 2s ease infinite;
	-webkit-animation: styleShadow 2s ease infinite;
	-moz-animation: styleShadow 2s ease infinite;
	-o-animation: styleShadow 2s ease infinite;
	-ms-animation: styleShadow 2s ease infinite;
}

.alertEmpty {
	animation: styleAlert 1s ease;
	-webkit-animation: styleAlert 1s ease;
	-moz-animation: styleAlert 1s ease;
	-o-animation: styleAlert 1s ease;
	-ms-animation: styleAlert 1s ease;
}