@charset "utf-8";
body{font-family:OpenSans;}
	@media only screen and (max-device-width: 375px) {
			#ans
			{
			margin-left : 13.5% ;
				}
			}
		
			@media only screen and (max-device-width: 320px) {
			#ans
			{
			margin-left : 15.5% ;
				}
			}
/*font*/
@font-face {
	
  font-family: OpenSans;
  src: url(OpenSans-Regular.ttf) format("opentype");
}

@font-face {
  font-family: Adobe Arabic;
  src: url(OpenSans-Bold.ttf) format("opentype");
  font-weight:bold;
}

  

/*header*/

.result2 {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    font-family: Adobe Arabic;
    border: 0;
    margin-left: -90px;
    position: relative;
}

#back
{
	font-size:30px;
	margin-left:15px;
	padding-top:5px;
	color:#fff;
	float:left;	
}



input[type=radio] {
        display:none;	
}
input[type=checkbox] {
        display:none;	
}
	
	
input[type=radio] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 20px;  
	    height: 20px;  
	    vertical-align:middle;
	    margin-right: 8px;
		top:50%;
	    background-color: #fff;  
	    border-radius:0px;
		float:right;
		margin-left:10px;margin-top: 5px;
		border: 3px solid #666;
		 
}
	input[type=checkbox] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 20px;  
	    height: 20px;  
	    vertical-align:middle;
	    margin-right: 8px;
		top:50%;
	    background-color: #fff;  
	    border-radius:0px;
		float:right;
		margin-left:10px;margin-top: 5px;
		border: 3px solid #666;
		 
}
		

input[type=radio]:checked + label:before {
		color:#0F6;
	    background-color: #9C0;
		padding-right:2px;
		border: 3px solid #000;
}
	input[type=checkbox]:checked + label:before {
		color:#0F6;
	    background-color: #9C0;
		padding-right:2px;
		border: 3px solid #000;
}
	
	
input[type=radio] + label {
display:block;
float:left;
}input[type=checkbox] + label {
display:block;
float:left;
}

/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/

.textchoices{
	background-position: 5px 100px; 
	-webkit-transition: all 1.6s ease-out;
	color:000;
}

.textchoices:hover{
	/* padding-right:60px; */
	-webkit-transition: all 0.6s ease-out;
	 }
	 

input[type=radio]:hover + label~.textchoices {
	/* padding-right:60px; */
	-webkit-transition: all 0.6s ease-out;
	
}
	input[type=checkbox]:hover + label~.textchoices {
	/* padding-right:60px; */
	-webkit-transition: all 0.6s ease-out;
	
}
	
div.textchoices {
	direction: ltr;
    width: 100%;
    padding-right: 7%;
    -webkit-transition: all 1.6s ease-out;
	padding-top:2px;
	margin-left:-40px;
}	
.title3{
	    top: -45px;
	text-align:left;
	font-size:15px;
	font-weight:bold;
color:#ff931e;
background-color:#FFF;
border:0;
height:35px;
margin-right:35px;

margin-left:70px;
    font-family: OpenSans;
padding-left:20px;


position:relative;
}
.restitle{
		left:80px;
	font-size:16px;
	font-weight:bold;
color:#ff931e;
background-color:#FFF;
border:0;
margin-top:10px;
width:200px;

margin-right:80px;
    font-family: OpenSans;

padding-left:20px;

position:relative;
height:34px;
    padding-top: 5px;

}

.asstitle{
	font-size:18pt;
	font-weight:bold;
color:#ff931e;
background-color:#FFF;
border:0;
margin-top:28px;
width:200px;

margin-left:80px;
    font-family: OpenSans;
padding-left:20px;

position:relative;
}


.question{	
	line-height:27px;
	font-size:14px;
		position:relative;
	    font-family: OpenSans;
	color:#000;
	
	font-weight:bold;
	direction:ltr;
	text-align:left;
	background:#FFF;
    border:0;
    margin-bottom:10px;
    margin-top:-38px;
    height:40%;
    width:80%;
    padding-left:10px;
        font-family: OpenSans;
    margin-left:14%;
    padding-bottom:8px;
	 text-align:left;
	
}

.control-text{	
	 margin-top:0px;
	 margin-left:-3px;
	 text-align:left;
		
}


/*radio float*/
.left{
	
	float:left;
	background:#000;
	
}
#square1{
    background-color:#CCC;
	width:80px;
    height:35px; 
    position:relative;
    left:0;
    top:15px;

}
#square3{
	  background-color:#A0D250;
	width:80px;
    height:35px;
    position:relative;
    left:0;
bottom:240px;
}

#square3-1{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    left:0;
bottom:240px;
}

#image{
    
	
    position:relative;
    left:20px;
    top:-18px;



}
 #square1 img{
	 
	 float:left;
	 position:relative;
	
	height:100%;
	width:100%;}
	
	
	#square4{
    background-color:#CCC;
	width:80px;
    height:35px;
    position:relative;
    right:0px;
	bottom:-44px;
   



}
#square2 {
    font-family: Adobe Arabic;
    font-weight: bold;
    font-size: 17px;
    text-align: center;
    color: #FFF;
    background-color: #ff931e;
    width: 14%;
    margin-top: -30px;
	height:38px;
	padding:7px;
}



#square5{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    left:0;
bottom:220px;
}

#line{
	margin-right:auto;
	margin-left:auto;
	width:60%;
	height:5px;
	background:#A0D250;
}


#block{
	margin-right:auto;
	margin-left:auto;
    filter: alpha(opacity=100);
	font-size:18px;
    background:#E1E1E1;
	opacity:0.8;
	margin-top:25px;
	padding-bottom:5px;
	width:60%;
	
}
#blockEX{
	margin-right:auto;
	margin-left:auto;
    filter: alpha(opacity=100);
	font-size:16px;
    background:#E1E1E1;
	opacity:0.8;
	margin-top:0%;
	padding-bottom:2px;
	padding-top:50px;
	width:60%;
	
}

#block1{
	margin-right:auto;
	margin-left:auto;
    filter: alpha(opacity=100);
	font-size:18px;
    background:#E1E1E1;
	opacity:0.8;
	height:400px;
	
	
	
	
	
	width:60%;
	
}
#block:hover { 
    background-color:#F0F0F0;
    color:#84C1C1;	
}#blockEX:hover { 
    background-color:#F0F0F0;
    color:#84C1C1;	
}


#ans{
    font-size:13px;
	
	font-weight:bold;
	color:#000;
	    font-family: OpenSans;
	border:0;
    margin-left:14%;
    margin-bottom:2px;
    position:relative;
    width: 74%;
	margin-bottom:12px;

}


#ans:hover {
	
 

}



.hh{display: block;}

.incorrect{
	display: block;
    margin-top:2%;	
}



.answer{
    display: block;
	margin-left:25px;
	margin-top:-25px;
}



.correct{
	display: block;
	margin-top:2%;	
}
.result{
		font-size:14px;
		font-weight:bold;
		color:#000;
		    font-family: OpenSans;
		border:0;
		margin-left:100px;
		top:-329px;
		position:relative;
    }
	
	
.resulttit{
	font-size:18px;
	font-weight:bold;
color:#000;



width:20%px;
height:30%;

font-family:OpenSans;


position:relative;
}

	

.CircleChartS{
	width:300;
	height::300px;
	margin-left:50%;
	margin-buttom:0px;
	font-family:OpenSans;
	}
	

@media only screen and (max-device-width: 768px) {
	#block1{
	margin-left:auto;
	margin-left:auto;
    filter: alp
	ha(opacity=100);
	font-size:18px;
    background:#E1E1E1;
	opacity:0.8;
	height:600px;
	
	
	
	
	
	width:60%;
	
}
	
					#square3{
	  background-color:#A0D250;
	width:80px;
    height:35px;
    position:relative;
    left:0;
bottom:-20px;
}
			#square3-1{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    left:0;
bottom:-20px;
}
	
			.result{
	
		font-size:16pt;
	
	font-weight:bold;
	color:#000;
	    font-family: OpenSans;
	border:0;
    margin-left:100px;
	bottom:-20px;
    
    position:relative;
    
    }
	
	.result2 {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    font-family: Adobe Arabic;
    border: 0;
    margin-left: -90px;
    top: 20px;
    position: relative;
}
		.title3{
height:10%;
width:60%;

}

}
	@media only screen and (max-device-width: 773px) {
	.CircleChartS{
		width:200px;
		height::250px;
		margin-left:100px;
		margin-buttom:0px;
	}
			#CircleChart_2{
	width:200px;
	height::250px;
	margin-left:100px;
	
	
	
	margin-buttom:0px;}
		.result{
	
		font-size:15px;
	
	font-weight:bold;
	color:#000;
	    font-family: OpenSans;
	border:0;
    margin-left:85px;
	top:-80px;
    
    position:relative;
    
    }
	
	.result2{
	
    font-size: 14px;
    font-weight: bold;
    color: #000;
    font-family: Adobe Arabic;
    border: 0;
    margin-left: -75px;
    left: -20px
 top:-70px;
    position: relative;
    top: -80px;
}
		.title3{
height:10%;
width:60%;

}}
		
		
		
		
		@media only screen and (max-device-width: 414px) {

				div.textchoices {
       direction: ltr;
    width: 129%;
    padding-left: 37%;
    -webkit-transition: all 1.6s ease-out;
    margin-left: -33px;
    padding-bottom: 7px;
}
div.Ftextchoices {
    direction: ltr;
    width: 100%;
    padding-left: 15%;
    -webkit-transition: all 1.6s ease-out;
	margin-left: 20px;
}div.Ftextchoices2 {
    direction: ltr;
    width: 100%;
    padding-left: 15%;
    -webkit-transition: all 1.6s ease-out;
	margin-left: 20px;
}

			restitle {
    font-size: 18pt;
    font-weight: bold;
    color: #ff931e;
    background-color: #FFF;
    border: 0;
    margin-top: 10px;
    width: 40%;
    margin-left: 80px;
    font-family: Adobe Arabic;
    padding-left: 20px;
    position: relative;
}
						#square3{
	  background-color:#A0D250;
	width:80px;
    height:35px;
    position:relative;
    left:0;
bottom:-10px;
}
			#square3-1{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    left:0;
bottom:-10px;
}

			
	#block1{
	margin-left:auto;
	margin-left:auto;
    filter: alpha(opacity=100);
	font-size:18px;
    background:#E1E1E1;
	opacity:0.8;
	height:600px;
	
	
	width:100%;
	
}

.result2{
	
	.result2 {
    font-size: 14pt;
    font-weight: bold;
    color: #000;
    font-family: Adobe Arabic;
    border: 0;
    top: -70px;
    left: 5px;
    position: relative;
}	
	
	.CircleChartS{
	width:250;
	height::250px;
	
	margin-buttom:0px;
	
	margin-left:10px;}
			#CircleChart_2{
	width:250;
	height::250px;
	
	margin-buttom:0px;
	
	margin-left:10px;}
			.result{
	
		font-size:16pt;
	
	font-weight:bold;
	color:#000;
	    font-family: OpenSans;
	border:0;
    margin-left:100px;
	top:-80px;
    
    position:relative;
    
    }


		
input[type=radio] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 30px;  
	    height: 30px;  
	    vertical-align:middle;
	    margin-left: 8px;
		top:10%;
	    background-color: #fff;  
	    border-radius:0px;
		float:left;
		margin-left:10px;margin-top: 5px;
		 border: 3px solid #666;
	}		
input[type=checkbox] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 30px;  
	    height: 30px;  
	    vertical-align:middle;
	    margin-left: 8px;
		top:10%;
	    background-color: #fff;  
	    border-radius:0px;
		float:left;
		margin-left:10px;margin-top: 5px;
		 border: 3px solid #666;
	}
		
	/*	
input[type=checkbox] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 30px;  
	    height: 30px;  
	    vertical-align:middle;
	    margin-left: 8px;  
		
	    background-color: #aaa;  
}*/


#block{
	    width:90%;
		margin-left:auto;
		
}#blockEX{
	    width:90%;
		margin-left:auto;
		
}



#line{
	margin-right:auto;
	margin-left:auto;
	width:90%;;
}
	
	
.answer{

	display: block;
	margin-left:25px;
	margin-top:-25px;}
		.title3{
height:10%;
width:60%;

}
}


@media only screen and (max-device-width: 414px) {
	
	.CircleChartS{
	width:250;
	height::250px;
	margin-left:5%;
	
	margin-buttom:0px;
	
}
	#CircleChart_2{
	width:250;
	height::250px;
	margin-left:5%;
	
	margin-buttom:0px;
	
}
	.title3{
height:10%;
width:60%;

}
#block{
	    width:90%;
		margin-left:auto;
		
}#blockEX{
	    width:90%;
		margin-left:auto;
		
}
#line{
	margin-right:auto;
	margin-left:auto;
	width:90%;;
}
				
}
.restitle {

    font-size: 15px;
    font-weight: bold;
    color: #ff931e;
    background-color: #FFF;
    border: 0;
    margin-top: 10px;
    width: 40%;
    margin-left: 0px;
    font-family: Adobe Arabic;
    padding-left: 15px;
    position: relative;
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {

		div.textchoices {
	
    direction: ltr;
    width: 100%;
    padding-left: 10%;
    -webkit-transition: all 1.6s ease-out;margin-left: 20px;
}
				#square3{
	  background-color#A0D250;
	width:80px;
    height:35px;
    position:relative;
    left:0;
bottom:-10px;
}
			#square3-1{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    left:0;
bottom:-50px;
}


	
.restitle{
	font-size:24pt;
	font-weight:bold;
color:#ff931e;
background-color:#FFF;
border:0;
margin-top:10px;
width:40%px;

margin-left:80px;
    font-family: OpenSans;
padding-left:20px;

position:relative;
}
	.question{
	line-height:27px;
	font-size:14px;
		position:relative;
	    font-family: OpenSans;
	color:#000;
	font-size:24pt;
	font-weight:bold;
	direction:ltr;
	text-align:left;
	background:#FFF;
    border:0;
    margin-bottom:10px;
    margin-top:-38px;
    height:40%;
    width:80%;
    padding-left:10px;
        font-family: OpenSans;
		margin-left:10%;
    padding-bottom:8px;
	
}

#block{
	    width:90%;
		margin-left:auto;
		
}
#blockEX{
	    width:90%;
		margin-left:auto;
		
}
			#block1{
	margin-left:auto;
	margin-left:auto;
    filter: alpha(opacity=100);
	font-size:18px;
    background:#E1E1E1;
	opacity:0.8;
	height:600px;
	
	
	width:90%;
	
}

#line{
	margin-left:auto;
	margin-left:auto;
	width:90%;;
}
	
.result2{
	
		font-size:20pt;
	
	font-weight:bold;
	color:#000;
	    font-family: OpenSans;
	border:0;
    
	top:-120px;
    margin-left:-110px;
	left:-15px;
	    position:relative;
    
    }	
	
	.CircleChartS{
	width:250;
	height::250px;
	margin-left:25%;
	   
	margin-buttom:0px;
	
	}
		#CircleChart_2{
	width:250;
	height::250px;
	margin-left:25%;
	   
	margin-buttom:0px;
	
	}
			

			.result{
	
		font-size:24pt;
	
	font-weight:bold;
	color:#000;
	    font-family: OpenSans;
	border:0;
    margin-left:100px;
	top:-80px;
    
    position:relative;
    
    }


		
input[type=radio] + label:before {
	
	    content: "";  
	    display: inline-block;  
	    width: 30px;  
	    height: 30px;  
	    vertical-align:middle;
	    margin-left: 8px;
		top:10%;
	    background-color: #fff;  
	    border-radius:0px;
		float:left;
		margin-left:10px;margin-top: 5px;
		 border: 3px solid #666;
	}input[type=checkbox] + label:before {
	
	    content: "";  
	    display: inline-block;  
	    width: 30px;  
	    height: 30px;  
	    vertical-align:middle;
	    margin-left: 8px;
		top:10%;
	    background-color: #fff;  
	    border-radius:0px;
		float:left;
		margin-left:10px;margin-top: 5px;
		 border: 3px solid #666;
	}
		
	/*	
input[type=checkbox] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 30px;  
	    height: 30px;  
	    vertical-align:middle;
	    margin-left: 8px;  
		
	    background-color: #aaa;  
}*/
.answer{
	display: block;
	margin-left:25px;
	margin-top:-25px;
	}
	
	
	.title3{
height:10%;
width:60%;

}
				
}