


.questionScreen
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
    height: 100%;
	background-color:#ffffff;
}

.question_title{
	text-shadow: 3px 3px 4px rgb(30,30,30);
}

.question_answer{
	text-shadow: 3px 3px 4px rgb(30,30,30);
}

.answerLetter{
	text-shadow: 3px 3px 4px rgb(30,30,30);
}



.line{
	position:absolute;
	left:0;
	width:0;
	height:12px;
	background-image:url('../images/redLine.png');
}




.answerWrong{
	color:#c94843;
}

.answerCorrect{
	color:#008a0f;
}

.answerOff{
	opacity:0.3;
}






.starContainer{
	position: absolute;
	left:0px;
	top:0px;
	width:100%;
	height: 100%;
	pointer-events: none;
	z-index:5;
}

.star{
	position:absolute;
	left:0;
	top:0;
	width:150px;
	height: 150px;
	background-image:url('../images/star.png');
}


.starActive {
	transition:  top 4s linear, opacity 4s linear;
}




@media screen and (min-width: 1024px) and (max-width: 1200px)  {

	.questionframe{
		position: absolute;
		left:50%;
		margin-left:-450px;
		bottom:0;
		width:900px;
		height:265px;
	}

	.question_title{
		position: absolute;
		left:15px;
		top:0;
		width:900px;
		height:52px;
		font-size: 46px;
		line-height: 90px;
		color:white;
		font-family: Typewond_demi;
	}

	.lineActive{
		width:900px;
		transition: width 2s ease-out;
		-moz-transition: width 2s ease-out; /* Firefox 4 */
		-webkit-transition: width 2s ease-out; /* Safari and Chrome */
		-o-transition: width 2s ease-out; /* Opera */
		-ms-transition: width 2s ease-out; /* Explorer 10 */
	}

	.question_answer{
		position: absolute;
		left:0px;
		width:900px;
		height:52px;
		font-size: 46px;
		line-height: 28px;
		color:white;
		font-family: Typewond_demi;
	}

	.answerLetter{
		position: absolute;
		left:15px;
		top:10px;
		width:100px;
		height:52px;
	}

	.answerText{
		position: absolute;
		left:165px;
		top:10px;
		width:850px;
		height:52px;

	}




	#line_0{
		top:84px;
	}

	#line_1{
		top:136px;
	}

	#line_2{
		top:190px;
	}

	#line_3{
		top:244px;
	}


	#answer_0{
		top:88px;
	}

	#answer_1{
		top:140px;
	}

	#answer_2{
		top:192px;
	}




}


@media screen and (min-width:1201px) and (max-width:1600px) {

	.questionframe{
		position: absolute;
		left:50%;
		margin-left:-550px;
		bottom:0;
		width:1100px;
		height:410px;
	}

	.question_title{
		position: absolute;
		left:15px;
		top:0;
		width:11400px;
		height:84px;
		font-size: 56px;
		line-height: 74px;
		color:white;
		font-family: Typewond_demi;
	}

	.lineActive{
		width:1100px;
		transition: width 2s ease-out;
		-moz-transition: width 2s ease-out; /* Firefox 4 */
		-webkit-transition: width 2s ease-out; /* Safari and Chrome */
		-o-transition: width 2s ease-out; /* Opera */
		-ms-transition: width 2s ease-out; /* Explorer 10 */
	}

	.question_answer{
		position: absolute;
		left:0px;
		width:1100px;
		height:80px;
		font-size: 56px;
		line-height: 57px;
		color:white;
		font-family: Typewond_demi;
	}

	.answerLetter{
		position: absolute;
		left:15px;
		top:10px;
		width:100px;
		height:80px;
	}

	.answerText{
		position: absolute;
		left:165px;
		top:10px;
		width:1050px;
		height:80px;

	}




	#line_0{
		top:84px;
	}

	#line_1{
		top:168px;
	}

	#line_2{
		top:252px;
	}

	#line_3{
		top:336px;
	}


	#answer_0{
		top:88px;
	}

	#answer_1{
		top:172px;
	}

	#answer_2{
		top:256px;
	}


}

@media screen and (min-width:1601px) and (max-width:2000px) {

	.questionframe{
		position: absolute;
		left:50%;
		margin-left:-700px;
		bottom:0;
		width:1400px;
		height:410px;
	}


	.question_title{
		position: absolute;
		left:15px;
		top:0;
		width:11400px;
		height:84px;
		font-size: 72px;
		line-height: 74px;
		color:white;
		font-family: Typewond_demi;
	}

	.lineActive{
		width:1400px;
		transition: width 2s ease-out;
		-moz-transition: width 2s ease-out; /* Firefox 4 */
		-webkit-transition: width 2s ease-out; /* Safari and Chrome */
		-o-transition: width 2s ease-out; /* Opera */
		-ms-transition: width 2s ease-out; /* Explorer 10 */
	}

	.question_answer{
		position: absolute;
		left:0px;
		width:1400px;
		height:80px;
		font-size: 72px;
		line-height: 57px;
		color:white;
		font-family: Typewond_demi;
	}

	.answerLetter{
		position: absolute;
		left:15px;
		top:10px;
		width:100px;
		height:80px;
	}

	.answerText{
		position: absolute;
		left:165px;
		top:10px;
		width:1350px;
		height:80px;

	}



	#line_0{
		top:84px;
	}

	#line_1{
		top:168px;
	}

	#line_2{
		top:252px;
	}

	#line_3{
		top:336px;
	}


	#answer_0{
		top:88px;
	}

	#answer_1{
		top:172px;
	}

	#answer_2{
		top:256px;
	}



}



@media screen and (min-width:2001px) and (max-width:3000px) {

	.questionframe{
		position: absolute;
		left:50%;
		margin-left:-700px;
		bottom:0;
		width:1400px;
		height:410px;
	}


	.question_title{
		position: absolute;
		left:15px;
		top:0;
		width:11400px;
		height:84px;
		font-size: 72px;
		line-height: 74px;
		color:white;
		font-family: Typewond_demi;
	}

	.lineActive{
		width:1400px;
		transition: width 2s ease-out;
		-moz-transition: width 2s ease-out; /* Firefox 4 */
		-webkit-transition: width 2s ease-out; /* Safari and Chrome */
		-o-transition: width 2s ease-out; /* Opera */
		-ms-transition: width 2s ease-out; /* Explorer 10 */
	}

	.question_answer{
		position: absolute;
		left:0px;
		width:1400px;
		height:80px;
		font-size: 72px;
		line-height: 57px;
		color:white;
		font-family: Typewond_demi;
	}

	.answerLetter{
		position: absolute;
		left:15px;
		top:10px;
		width:100px;
		height:80px;
	}

	.answerText{
		position: absolute;
		left:165px;
		top:10px;
		width:1350px;
		height:80px;

	}



	#line_0{
		top:84px;
	}

	#line_1{
		top:168px;
	}

	#line_2{
		top:252px;
	}

	#line_3{
		top:336px;
	}


	#answer_0{
		top:88px;
	}

	#answer_1{
		top:172px;
	}

	#answer_2{
		top:256px;
	}



}



@media screen and (min-width:3001px) {

	.questionframe{
		position: absolute;
		left:50%;
		margin-left:-1400px;
		bottom:0;
		width:2800px;
		height:820px;
	}


	.question_title{
		position: absolute;
		left:30px;
		top:0;
		width:2800px;
		height:168px;
		font-size: 144px;
		line-height: 148px;
		color:white;
		font-family: Typewond_demi;
	}

	.lineActive{
		width:2800px;
		transition: width 2s ease-out;
		-moz-transition: width 2s ease-out; /* Firefox 4 */
		-webkit-transition: width 2s ease-out; /* Safari and Chrome */
		-o-transition: width 2s ease-out; /* Opera */
		-ms-transition: width 2s ease-out; /* Explorer 10 */
	}

	.question_answer{
		position: absolute;
		left:0px;
		width:2800px;
		height:160px;
		font-size: 144px;
		line-height: 100px;
		color:white;
		font-family: Typewond_demi;
	}

	.answerLetter{
		position: absolute;
		left:30px;
		top:20px;
		width:200px;
		height:160px;
	}

	.answerText{
		position: absolute;
		left:330px;
		top:20px;
		width:2700px;
		height:160px;

	}



	#line_0{
		top:168px;
	}

	#line_1{
		top:336px;
	}

	#line_2{
		top:504px;
	}

	#line_3{
		top:672px;
	}


	#answer_0{
		top:176px;
	}

	#answer_1{
		top:344px;
	}

	#answer_2{
		top:512px;
	}


	.question_title{
		text-shadow: 6px 6px 8px rgb(30,30,30);
	}

	.question_answer{
		text-shadow: 6px 6px 8px rgb(30,30,30);
	}

	.answerLetter{
		text-shadow: 6px 6px 8px rgb(30,30,30);
	}




}



