@charset "utf-8";
body{font-family:OpenSans;
}

/*font*/
@font-face {
	font-family: OpenSans;
  src: url(../../../css/OpenSans-Regular.ttf) format("opentype");
}

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

  .uno {
            height: 1000px;
            background: #808080;
        }
		  .due {
            margin-top: 300px;
            height: 500px;
            background: #ff00ff;
        }
		p.clear{height: 2px; margin-bottom: 3px;}

/*header*/
#section-header-name{
	font-weight:bold;
	font-size:14px;
	margin-left:25px;/*right*/
	bottom:-7px;
	position:relative;
	
	
}

.outer_div .title-section div{
	float:left;/*right*/
}

.outer_div .title-section .popover
{
	width:270px;
	height:200px;
}
.outer_div .title-section .popover-title{
	width:266px;
}

.outer_div  .title-section  .title
{
	position:relative;
	font-size:22px;
	font-weight:bold;
	font-family:OpenSans;
	padding-top:5px;
}

.outer_div  .title-section  .title a
{
	color:black;
	text-decoration:none;
}

.outer_div  .title-section  .title a:hover
{
	text-decoration:none;
	/*color:#FF931E;*/
}


.outer_div .title-section .section-header
{
	position:relative;
	font-size:8px;
	font-weight:bold;
	font-family:OpenSans;
	padding-top:15px;
	margin-left:10px;/*right*/
}

.glyphicon-menu-right /*left*/
{
	font-size:14px;
	margin-left:5px;/*right*/
	top:18px;
	color:#FF931E;
	position:relative;
}
/* .outer_div p{
	font-size:22px;
	font-weight:bold;
	font-family:OpenSans;
	padding-top:5px;
	margin-right:48px;
} */

.outer_div{
	padding-top:5px;
	font-size:22px;
	font-family:OpenSans;
	position:fixed;
	background-color:#bde085;
	height:50px;
	top:0;
	left: 0;/*right*/
	width: 100%;
	direction : ltr;
	box-shadow: 0px 5px 10px #888888;
	opacity: 0.95;
	z-index:200;
}


div.textchoices {
	direction:ltr;
	width:100%;
    padding-right: 0px;/*left*/
    -webkit-transition: all 1.6s ease-out;
	}

#back
{
	font-size:30px;
	margin-right:15px;/*left*/
	top:5px;
	color:#fff;
	float:right;/*left*/
	right:0;	/*left*/
}

.outer_div small{
	position:fixed;
	font-size:12px;
	font-weight:bold;
	font-family:OpenSans;
	left:220px;/*right*/
	margin-top:1px;
	margin-left:5px;/*right*/
	margin-top:10px;
}

div.modal-body{
	font-family:OpenSans;
}

/*radio(checkbox)*/



/*input[type=radio]:checked + label {
	
        color:#000;		
}*/


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

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

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

.textchoices{
	padding-right:60px;/*left*/
	-webkit-transition: all 1.6s ease-out;
	
	color:000;
}

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

input[type=radio]:hover + label~.textchoices {
	padding-left:60px;/*right*/
	-webkit-transition: all 0.6s ease-out;
	
}
	
	
.title{
	font-size:16px;
	font-weight:bold;
color:#ff931e;
background-color:#FFF;
border:0;
margin-top:10px;
width:50%;
height:30%;
margin-left:80px;/*right*/
font-family:OpenSans;
padding-left:20px;/*right*/

position:relative;
min-height:36px;
}
.restitle{
	font-size:18px;
	font-weight:bold;
color:#ff931e;
background-color:#FFF;
border:0;
margin-top:10px;
width:200px;

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

position:relative;
height:35px;
}

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

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

position:relative;
}


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


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

}

#image{
    
	
    position:relative;
    left:20px;/*right*/
    top:35px;



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



}
#square2{
	font-family:OpenSans;
    font-weight:bold;
	font-size:20px;
	text-align:center;
	
	color:#FFF;
    background-color:#ff931e;
	width:10%;
    margin-top:50px;
	position:relative;
	top:-10px;
	
}

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

#square3-1{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    left:0;/*right*/
bottom:220px;
}
#line{
	margin-right:auto;/*left*/
	margin-left:auto;/*right*/
	width:60%;
	height:5px;
	background:#A0D250;
}


#block{
	margin-left:auto;/*left*/
	margin-right:auto;/*right*/
    filter: alpha(opacity=100);
	font-size:18px;
    background:#E1E1E1;
	opacity:0.8;
	margin-top:1%;
	padding-bottom:18px;
	width:60%;
	
}

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


#ans{
    font-size:16px;
	
	font-weight:bold;
	color:#000;
	font-family:OpenSans;
	border:0;
    margin-left:14%;/*right*/
    margin-bottom:2px;
    position:relative;
    width: 74%;
	top:6px;

}


#ans:hover {
	
 

}



.hh{display: block;}

.incorrect{
	display: block;
    margin-top:2%;
	position:relative;
	top:1px;
	
}



.answer{
	
    display: block;
	margin-left:30px;/*right*/
	margin-top:-25px;
	padding-right:100px;/*left*/
	position:relative;
	top:5px;
}



.correct{
	display: block;
	margin-top:2%;	
}
.result{
	
		font-size:16px;
	
	font-weight:bold;
	color:#000;
	font-family:OpenSans;
	border:0;
    margin-left:100px;/*right*/
	top:-310px;
    
    position:relative;
	
    
    }
	.result2{
	
		font-size:14px;
	
	font-weight:bold;
	color:#000;
	font-family:OpenSans;
	border:0;
    margin-left:-90px;/*right*/
	top:-70px;
    
    position:relative;
    
    }
	
	
.resulttit{
	font-size:18px;
	font-weight:bold;
color:#000;



width:200px;
height:30%;

font-family:OpenSans;


position:relative;
}

	

#CircleChart_1{
	width:300;
	height::300px;
	margin-left:50%;/*right*/
	margin-buttom:0px;}
	


@media only screen and (max-device-width: 768px) {
	
	#block1{
	margin-right:auto;/*left*/
	margin-left:auto;/*right*/
    filter: alpha(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;/*right*/
bottom:-35px;
}
			#square3-1{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    left:0;/*right*/
bottom:-35px;
}
	
	.question{
		margin-left:22%;/*right*/
		
		width:75%;
	}
	#square2{
		padding-left: 2%;/*right*/
		text-align: left;/*right*/
		width:22%;}
				.result{
	
		font-size:16px;
	
	font-weight:bold;
	color:#000;
	font-family:OpenSans;
	border:0;
    margin-left:85px;/*right*/
	top:-60px;
    
    position:relative;
    
    }
	
	.result2{
	
		font-size:14px;
	
	font-weight:bold;
	color:#000;
	font-family:OpenSans;
	border:0;
    margin-left:-75px;/*right*/
	left:-20px;/*right*/
	top:-70px;
    
    position:relative;
    
    }
			#CircleChart_1{
	width:250px;
	height::250px;
	margin-left:50px;/*right*/
	
	
	
	margin-buttom:0px;}

}
	@media only screen and (max-device-width: 640px) {
				#CircleChart_1{
	width:250px;
	height::250px;
	margin-left:100px;/*right*/
	
	
	
	margin-buttom:0px;}
		.result{
	
		font-size:14px;
	
	font-weight:bold;
	color:#000;
	font-family:OpenSans;
	border:0;
    margin-left:85px;/*right*/
	top:-60px;
    
    position:relative;
    
    }
	
	.result2{
	
		font-size:14px;
	
	font-weight:bold;
	color:#000;
	font-family:OpenSans;
	border:0;
    margin-left:-75px;/*right*/
	left:-20px/*right*/
	top:-70px;
    
    position:relative;
    
    }
	#ans {
		
		width:85%;
		margin-bottom:10%
	}}
		
		
		
		
		@media only screen and (max-device-width: 414px) {

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

.result2{
	
		font-size:13px;
	
	font-weight:bold;
	color:#000;
	font-family:OpenSans;
	border:0;
    
	top:-70px;
    margin-left:-110px;/*right*/
	right:-15px;/*left*/
	    position:relative;
    left:25%;
    }	
	
	#CircleChart_1{
	width:250;
	height::250px;
	
	margin-buttom:0px;
	
	margin-right:10px;/*left*/}
			
			#square3{
	  background-color:#A0D250;
	width:80px;
    height:35px;
    position:relative;
    left:0;/*right*/
bottom:-10px;
}
			#square3-1{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    left:0;/*right*/
bottom:-10px;
}
	
			.result{
	
		font-size:16px;
	
	font-weight:bold;
	color:#000;
	font-family:OpenSans;
	border:0;
    margin-left:100px;/*right*/
	top:-80px;
    
    position:relative;
    
    }


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


#block{
	    width:90%;
		margin-right:auto;/*left*/
		
}



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

	display: block;
	margin-left:30px;/*right*/
	margin-top:-25px;
	padding:0;
	position:relative;
	padding-top:5px;
	}
}


@media only screen and (max-device-width: 414px) {
	
	#CircleChart_1{
	width:250;
	height::250px;
	margin-left:10%;/*right*/
	
	margin-buttom:0px;
	
}

.incorrect{
	top:7px;
}

#ans {
		width:85%
		margin-bottom:10%
	}
				
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	


	#ans{
    font-size:15px;
	
	font-weight:bold;
	color:#000;
	font-family:OpenSans;
	border:0;
    margin-left:14%;/*right*/
  margin-bottom:10%
    position:relative;
    width: 85%;
    height: 40px;
	padding-top:10px;
}
	.title{
	font-size:16px;
	font-weight:bold;
color:#ff931e;
background-color:#FFF;
border:0;
margin-top:10px;
min-width:300px;
height:30%;
margin-left:80px;/*right*/
font-family:OpenSans;
padding-left:20px;/*right*/

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

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

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

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

#line{
	margin-right:auto;/*left*/
	margin-left:auto;/*right*/
	width:90%;;
}


	
.result2{
	
		font-size:16px;
	
	font-weight:bold;
	color:#000;
	font-family:OpenSans;
	border:0;
    
	top:-90px;
    margin-left:-110px;/*right*/
	right:-15px;/*left*/
	    position:relative;
		left:40%;
    
    }	
	
	#CircleChart_1{
	width:250;
	height::250px;
	margin-left:25%;/*right*/
	   
	margin-buttom:0px;
	
	}
			
			#square3{
	  background-color#A0D250;
	width:80px;
    height:35px;
    position:relative;
    left:0;/*right*/
bottom:-13px;
}
			#square3-1{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    left:0;/*right*/
bottom:-27px;
}
			.result{
	
		font-size:17px;
	
	font-weight:bold;
	color:#000;
	font-family:OpenSans;
	border:0;
    margin-left:100px;/*right*/
	top:-74px;
    
    position:relative;
    
    }


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

	display: block;
	margin-left:30px;/*right*/
	margin-top:-25px;
	padding:0;}
				
}

/* @media only screen and (min-device-width: 320px) {
.outer_div p {
    font-size: 16px;
    font-weight: bold;
    font-family: OpenSans;
    margin-right: 22px;
}
} */

.unit-title
{
	font-size:20px;
	position:relative;
	float:left;/*right*/
	margin-left:10px;/*right*/
	font-family : OpenSans;
	font-weight:bold;
	top:4px;
	
}

@media only screen and (max-device-width: 500px) {
.unit-title{
    font-size: 18px;
    font-weight: bold;
    font-family: OpenSans;
    margin-left: 10px;/*right*/
}

.outer_div
{
	height:70px;
}

#section-header-name{
	font-weight:bold;
	font-size:13px;
	bottom:15px;
	position:absolute;
	left:10px;/*right*/
}

#back
{
	font-size: 30px;
    /* margin-left: 15px; */
    top: 18px;
    color: #fff;
    float: right;/*left*/
    right: -10px;/*left*/
    position: absolute;
}
	

}





#section-menu.glyphicon.glyphicon-menu-right /*left*/
{
	position:relative;
	margin-left:-132px;/*right*/
	top:3px;
	
}