.one{
	background-color: #000000 ; 
	width:90%;
	height:425%;
	position:absolute;
		top:0;
		right:5%;
}
.two{
	background-color:#FFFFFF ; 
	width:90%;
	height:50%;
	position:absolute;
		top:0;
		right:5%;
}
.three{
	background-color:#FF3300; 
	width:90%;
	height:10%;
	position:absolute;
		top:50%;
		right:5%;
}
.text p{
	font-family:verdana;
	font-size:1.25em;
	color:#FFFFFF;
	position:absolute;
		top:50%;
		left:20%;
}
	
.a p{
	font-family:verdana;
	font-size:1.25em;
	color:#FFFFFF;
	position:absolute;
		top:50%;
		left:35%;
}
.b p{
	font-family:verdana;
	font-size:1.25em;
	color:#FFFFFF;
	position:absolute;
		top:50%;
		left:55%;
}
.c p{
	font-family:verdana;
	font-size:1.25em;
	color:#FFFFFF;
	position:absolute;
		top:50%;
		left:75%;
}
.text p:hover{
	color:#000000;
}
.a p:hover{
	color:#000000;
}
.b p:hover{
	color:#000000;
}
.c p:hover{
	color:#000000;
}

.e img{
	width:50%;
	height:50%;
	position:absolute;
		top:89%;
		left:10%;
}
.collen p{
	font-size:3em;
	color:#FF9900;
	position:absolute;
		top:60%;
		left:10%;
}
.una{
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	border-top-right-radius:15px;
	border-bottom-right-radius:15px;
	-moz-border-radius: 15px;
	background-color: #000000; 
	width:20%;
	height:15%;
	position:absolute;
		top:89%;
		right:10%;
}
.una p{
	font-size:2em;
	color:#66FFFF;
	position:absolute;
		left:30%;
}
.una:hover{
	background-color:#993300;
}
.pangalawa{
	background-color: #000000; 
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	border-top-right-radius:15px;
	border-bottom-right-radius:15px;
	-moz-border-radius: 15px;
	width:20%;
	height:17%;
	position:absolute;
		top:105%;
		right:10%;
}
.pangalawa p{
	font-size:2em;
	color:#66FFFF;
	position:absolute;
		left:30%;
}
.pangalawa:hover{
	background-color:#993300;
}
.tatlo{
	background-color: #000000; 
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	border-top-right-radius:15px;
	border-bottom-right-radius:15px;
	-moz-border-radius: 15px;
	width:20%;
	height:16%;
	position:absolute;
		top:123%;
		right:10%;
}
.tatlo:hover{
	background-color:#993300;
}
.tatlo p{
	font-size:2em;
	color:#66FFFF;
	position:absolute;
		left:30%;
}
.e:hover ~ #box-1 {  
    background-color: rgba(0,0,0,0.8); 
	visibility: visible;
	width:50%;
	color: #fff;
    position: absolute;   
		left:10%;
		top: 130%;
    
} 
#box-1{
	visibility:hidden;
}
.dex p{
	font-size:3em;
	color:#FF9900;
	position:absolute;
		top:155%;
		left:30%;	
}
.dia{
	background-color:#FFFFFF; 
	width:30%;
	height:35%;
	position:absolute;
		top:190%;
		left:6%;
}
.coll p{
	font-size:2em;
	color:#33FF66;
	position:absolute;
		top:220%;
		left:10%;
}
.nine{
	background-color:#FFFFFF; 
	width:30%;
	height:35%;
	position:absolute;
		top:187%;
		left:40%;
}
.ter{
	font-size:2em;
	color:#33FF66;
	position:absolute;
		top:220%;
		left:48%;
}
.eight{
	background-color:#FFFFFF; 
	width:20%;
	height:35%;
	position:absolute;
		top:187%;
		left:73%;
}
.na{
	font-size:2em;
	color:#33FF66;
	position:absolute;
		top:220%;
		left:78%;	
}
.seven{
	background-color:#FFFFFF; 
	width:30%;
	height:35%;
	position:absolute;
		top:240%;
		left:6%;
}
.wa p{
	font-size:2em;
	color:#33FF66;
	position:absolute;
		top:275%;
		left:13%;
}
.six{
	background-color:#FFFFFF; 
	width:25%;
	height:35%;
	position:absolute;
		top:240%;
		left:40%;
}
.ron{
	font-size:2em;
	color:#33FF66;
	position:absolute;
		top:275%;
		left:49%;
}
.five{
	background-color:#FFFFFF; 
	width:25%;
	height:35%;
	position:absolute;
		top:240%;
		left:68%;
}
.ran{
	font-size:2em;
	color:#33FF66;
	position:absolute;
		top:275%;
		right:15%;
}
.four{
	background-color:#FFFFFF; 
	width:30%;
	height:35%;
	position:absolute;
		top:296%;
		left:6%;
}
.far{
	font-size:2em;
	color:#33FF66;
	position:absolute;
		top:330%;
		left:15%;
}
.he{
	background-color:#FFFFFF; 
	width:25%;
	height:35%;
	position:absolute;
		top:296%;
		left:40%;
}
.tree{
	font-size:2em;
	color:#33FF66;
	position:absolute;
		top:330%;
		left:45%;
}
.de{
	background-color:#FFFFFF; 
	width:25%;
	height:35%;
	position:absolute;
		top:296%;
		left:68%;
}
.ree{
	font-size:2em;
	color:#33FF66;
	position:absolute;
		top:330%;
		left:75%;
}
.we{
	background-color:#FFFFFF; 
	width:40%;
	height:45%;
	position:absolute;
		top:360%;
		left:32%;
}
.rat{
	font-size:2em;
	color:#33FF66;
	position:absolute;
		top:400%;
		left:40%;
}
.coll p:hover{
	color:#FFCC00;
}
.ter p:hover{
	color:#FFCC00;
}
.na p:hover{
	color:#FFCC00;
}
.wa p:hover{
	color:#FFCC00;
}
.ron p:hover{
	color:#FFCC00;
}
.ran p:hover{
	color:#FFCC00;
}
.far p:hover{
	color:#FFCC00;
}
.tree p:hover{
	color:#FFCC00;
}
.ree p:hover{
	color:#FFCC00;
}
.rat p:hover{
	color:#FFCC00;
}
.coco:hover{
	opacity:0.9;
}
.maragarin:hover{
	opacity:0.9;
}
.star:hover{
	opacity:0.9;
}
.taas:hover{
	opacity:0.9;
}
.tangkad:hover{
	opacity:0.9;
}
.mw:hover{
	opacity:0.9;
}
.kq:hover{
	opacity:0.9;
}
.kj:hover{
	opacity:0.9;
}
.jj:hover{
	opacity:0.9;
}
.hh:hover{
	opacity:0.9;
}

.dia:hover ~ #box-2 { 
	visibility: visible;
	color: #b31b0b;
	font-size:2em;
    background-color: rgba(0,0,0,0.8);  
    position: absolute;   
		left:15%;
		top: 180%;
} 
.colet{
	visibility:hidden;
}
.nine:hover ~ #box-3 {  
    background-color: rgba(0,0,0,0.8);
	visibility: visible;
	font-size:2em;	
	color: #b31b0b; 
    position: absolute;   
		left:50%;
		top: 180%;
} 
.eight:hover ~ #box-4 {  
    background-color: rgba(0,0,0,0.8); 
	visibility: visible;
	font-size:2em;
	color: #b31b0b;   	
    position: absolute;  
		left:80%;
		top: 180%;
} 
.seven:hover ~ #box-5{  
    background-color: rgba(0,0,0,0.8);  
	color: #dc6429; 
	visibility: visible;
	font-size:2em;
    position: absolute;  
		left:17%;
		top: 233%;
} 
.six:hover ~ #box-6{  
    background-color: rgba(0,0,0,0.8);  
	visibility: visible;
	color: #dc6429;   
	font-size:2em;
    position: absolute;  
		left:50%;
		top: 233%;
} 
.five:hover ~ #box-7{  
    background-color: rgba(0,0,0,0.8);
	visibility: visible;
	font-size:2em;	
	color: #dc6429;  	
    position: absolute;  
		left:77%;
		top: 233%;
} 
.four:hover ~ #box-8{  
    background-color: rgba(0,0,0,0.8);  
	visibility: visible;
	font-size:2em;
	color: #b322a7;  
    position: absolute;    
		left:17%;
		top: 288%;
} 
.he:hover ~ #box-9{  
    background-color: rgba(0,0,0,0.8);  
	visibility: visible;
	font-size:2em;
	color: #b322a7; 
    position: absolute;  
		left:50%;
		top: 288%;
} 
.de:hover ~ #box-10{  
    background-color: rgba(0,0,0,0.8); 
	visibility: visible;
	color: #b322a7; 
	font-size:2em;	
    position: absolute; 
		left:78%;
		top: 288%;
} 
.we:hover ~ #box-11{  
    background-color: rgba(0,0,0,0.8); 
	color: #fed205; 	
	visibility: visible;
	font-size:3.5em;
    position: absolute;  
		left:47%;
		top: 347%;   
} 
.ques p{
	font-family:"Maiandra GD";
	width:90%;
	font-size:1.3em;
	color:#939e18;
	position:absolute;
		top:145%;
		left:6%;
	
}
@media screen and (max-width: 300px) {
	.collen p{
	font-size:1.5em;
	color:#FF9900;
	position:absolute;
		top:60%;
		left:10%;
	}
	.text p{
	font-family:verdana;
	font-size:1.25em;
	color:#FFFFFF;
	position:absolute;
		top:50%;
		left:10%;
	}
	.a p{
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
		position:absolute;
			top:50%;
			left:30%;
	}
	.b p{
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
		position:absolute;
			top:50%;
			left:50%;
	}
	.c p{
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
		position:absolute;
			top:50%;
			left:73%;
	}
	.e img{
		position:absolute;
			top:89%;
			left:10%;
			width:70%;
			height:50%;
	}
	.una p{
		font-size:1em;
		position:absolute;
			left:30%;
			color:#66FFFF;
	}
	.pangalawa p{
		color:#66FFFF;
		font-size:1em;
		position:absolute;
			left:30%;
	}
	.tatlo p{
		font-size:1em;
		color:#66FFFF;
		position:absolute;
			left:30%;
	}
	.tatlo{
		border-top-left-radius:15px;
		border-bottom-left-radius:15px;
		border-top-right-radius:15px;
		border-bottom-right-radius:15px;
		-moz-border-radius: 15px;
		background-color: #000000; 
		width:25%;
		height:16%;
		position:absolute;
			top:123%;
			right:5%;
	}
	.dex p{
		font-size:2em;
		color:#FF9900;
		position:absolute;
			top:155%;
			left:20%;
	}
	.rat {
		font-size:1.5em;
		color:#33FF66;
		position:absolute;
			top:390%;
			left:20%;
	}
	.coll p{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:220%;
			left:5%;
	}
	 .ter{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:220%;
			left:44%;
    }
	.na{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:220%;
			left:73%;
    }
	  .wa p{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:275%;
			left:13%;
		}
	  .ron{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:275%;
			left:49%;
		}
	.ran{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:275%;
			right:15%;
     }
	 .far{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:325%;
			left:10%;
    }
	.tree{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:325%;
			left:35%;
    }
	.ree{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:325%;
			left:70%;
    }
	
	 
}
@media screen and (max-width: 400px) {
	.collen p{
		font-size:1.5em;
		color:#FF9900;
		position:absolute;
			top:60%;
			left:10%;
	}
	.text p{
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
		position:absolute;
			top:50%;
			left:10%;
	}
	.a p{
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
		position:absolute;
			top:50%;
			left:30%;
	}
	.b p{
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
		position:absolute;
			top:50%;
			left:50%;
	}
	.c p{
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
		position:absolute;
			top:50%;
			left:73%;
	}
	.e img{
		position:absolute;
			top:89%;
			left:10%;
			width:70%;
			height:50%;
	}
	.una p{
		color:#66FFFF;
		font-size:1em;
		position:absolute;
			left:30%;
	}
	.pangalawa p{
		color:#66FFFF;
		font-size:1em;
		position:absolute;
			left:30%;
	}
	.tatlo p{
		color:#66FFFF;
		font-size:1em;
		position:absolute;
			left:30%;
	}
	.tatlo{
		border-top-left-radius:15px;
		border-bottom-left-radius:15px;
		border-top-right-radius:15px;
		border-bottom-right-radius:15px;
		-moz-border-radius: 15px;
		background-color: #000000; 
		width:25%;
		height:16%;
		position:absolute;
			top:123%;
			right:5%;
	}
	.dex p{
		font-size:1em;
		color:#FF9900;
		position:absolute;
			top:190%;
			left:20%;
	}
	.rat {
		font-size:1.5em;
		color:#33FF66;
		position:absolute;
			top:390%;
			left:20%;
	}
	.coll p{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:220%;
			left:5%;
	 }
	 .ter{
		position:absolute;
		top:220%;
		left:44%;
		font-size:1em;
		color:#33FF66;
        }
	.na{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:220%;
			left:73%;
      }
	  .wa p{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:275%;
			left:13%;
		}
	  .ron{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:275%;
			left:49%;
		}
	.ran{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:275%;
			right:15%;
     }
	 .far{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:325%;
			left:10%;
    }
	.tree{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:325%;
			left:38%;
    }
	.ree{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:325%;
			left:70%;
    }
	
	 
}
@media screen and (max-width: 500px) {
	.collen p{
		font-size:1.5em;
		color:#FF9900;
		position:absolute;
			top:60%;
			left:5%;
	}
	.text p{
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
		position:absolute;
			top:50%;
			left:10%;
	}
	.a p{
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
		position:absolute;
			top:50%;
			left:30%;
	}
	.b p{
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
		position:absolute;
			top:50%;
			left:50%;
	}
	.c p{
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
		position:absolute;
			top:50%;
			left:73%;
	}
	.e img{
		position:absolute;
			top:89%;
			left:10%;
			width:70%;
			height:50%;
	}
	.una p{
		color:#66FFFF;
		font-size:1em;
		position:absolute;
			left:30%;
	}
	.pangalawa p{
		color:#66FFFF;
		font-size:1em;
		position:absolute;
			left:30%;
	}
	.tatlo p{
		color:#66FFFF;
		font-size:1em;
		position:absolute;
			left:30%;
	}
	.tatlo{
		border-top-left-radius:15px;
		border-bottom-left-radius:15px;
		border-top-right-radius:15px;
		border-bottom-right-radius:15px;
		-moz-border-radius: 15px;
		background-color: #000000; 
		width:25%;
		height:16%;
		position:absolute;
			top:123%;
			right:5%;
	}
	.dex p{
		font-size:2em;
		color:#FF9900;
		position:absolute;
			top:155%;
			left:20%;
	}
	.rat {
		font-size:1.5em;
		color:#33FF66;
		position:absolute;
			top:390%;
			left:25%;
	}
	.coll p{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:220%;
			left:5%;
	 }
	.ter{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:220%;
			left:44%;
    }
	.na{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:220%;
			left:73%;
    }
	.wa p{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:275%;
			left:13%;
    }
	.ron{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:275%;
			left:49%;
		}
	.ran{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:275%;
			right:15%;
    }
	 .far{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:325%;
			left:10%;
    }
	.tree{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:325%;
			left:38%;
    }
	.ree{
		font-size:1em;
		color:#33FF66;
		position:absolute;
			top:325%;
			left:70%;
    }
	
	 
}
@media screen and (max-width: 600px) {
	.collen p{
		position:absolute;
		top:60%;
		left:5%;
		font-size:1.5em;
		color:#FF9900;
	}
	.text p{
		position:absolute;
		top:50%;
		left:10%;
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
	}
	.a p{
		position:absolute;
		top:50%;
		left:30%;
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
	}
	.b p{
		position:absolute;
		top:50%;
		left:50%;
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
	}
	.c p{
		position:absolute;
		top:50%;
		left:73%;
		font-family:verdana;
		font-size:1.25em;
		color:#FFFFFF;
	}
	.e img{
		position:absolute;
		top:89%;
		left:10%;
		width:70%;
		height:50%;
	}
	.una p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.pangalawa p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo{
		background-color: #000000; 
		width:25%;
		height:16%;
		position:absolute;
		top:123%;
		right:5%;
		border-top-left-radius:15px;
		border-bottom-left-radius:15px;
		border-top-right-radius:15px;
		border-bottom-right-radius:15px;
		-moz-border-radius: 15px;
	}
	.dex p{
		position:absolute;
		top:170%;
		left:10%;
		font-size:1em;
		color:#FF9900;
	}
	.rat {
		position:absolute;
		top:390%;
		left:30%;
		font-size:1.5em;
		color:#33FF66;

	}
	.coll p{
		position:absolute;
		top:220%;
		left:5%;
		font-size:1em;
		color:#33FF66;
	 }
	 .ter{
		position:absolute;
		top:220%;
		left:44%;
		font-size:1em;
		color:#33FF66;
        }
	.na{
		position:absolute;
		top:220%;
		left:73%;
		font-size:1em;
		color:#33FF66;
      }
	  .wa p{
		position:absolute;
		top:275%;
		left:13%;
		font-size:1em;
		color:#33FF66;
		}
	  .ron{
		position:absolute;
		top:275%;
		left:49%;
		font-size:1em;
		color:#33FF66;
		}
	.ran{
		position:absolute;
		top:275%;
		right:15%;
		font-size:1em;
		color:#33FF66;
     }
	 .far{
		position:absolute;
		top:325%;
		left:10%;
		font-size:1em;
		color:#33FF66;

    }
	.tree{
		position:absolute;
		top:325%;
		left:38%;
		font-size:1em;
		color:#33FF66;

    }
	.ree{
		position:absolute;
		top:325%;
		left:70%;
		font-size:1em;
		color:#33FF66;

    }

	
	
	 
}
@media screen and (max-width: 700px) {
	.collen p{
		position:absolute;
		top:60%;
		left:5%;
		font-size:2em;
		color:#FF9900;
	}
	.text p{
		position:absolute;
		top:50%;
		left:10%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.a p{
		position:absolute;
		top:50%;
		left:30%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.b p{
		position:absolute;
		top:50%;
		left:50%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.c p{
		position:absolute;
		top:50%;
		left:73%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.e img{
		position:absolute;
		top:89%;
		left:10%;
		width:70%;
		height:50%;
	}
	.una p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.pangalawa p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo{
		background-color: #000000; 
		width:25%;
		height:16%;
		position:absolute;
		top:123%;
		right:5%;
		border-top-left-radius:15px;
		border-bottom-left-radius:15px;
		border-top-right-radius:15px;
		border-bottom-right-radius:15px;
		-moz-border-radius: 15px;
	}
	.dex p{
		position:absolute;
		top:170%;
		left:10%;
		font-size:1.5em;
		color:#FF9900;
	}
	.rat {
		position:absolute;
		top:400%;
		left:30%;
		font-size:1.5em;
		color:#33FF66;

	}
	.coll p{
		position:absolute;
		top:225%;
		left:5%;
		font-size:1.3em;
		color:#33FF66;
	 }
	 .ter{
		position:absolute;
		top:225%;
		left:44%;
		font-size:1.3em;
		color:#33FF66;
        }
	.na{
		position:absolute;
		top:225%;
		left:73%;
		font-size:1.3em;
		color:#33FF66;
      }
	  .wa p{
		position:absolute;
		top:275%;
		left:13%;
		font-size:1.3em;
		color:#33FF66;
		}
	  .ron{
		position:absolute;
		top:275%;
		left:49%;
		font-size:1.3em;
		color:#33FF66;
		}
	.ran{
		position:absolute;
		top:275%;
		right:15%;
		font-size:1.3em;
		color:#33FF66;
     }
	 .far{
		position:absolute;
		top:330%;
		left:15%;
		font-size:1.3em;
		color:#33FF66;

    }
	.tree{
		position:absolute;
		top:330%;
		left:43%;
		font-size:1.3em;
		color:#33FF66;

    }
	.ree{
		position:absolute;
		top:330%;
		left:73%;
		font-size:1.3em;
		color:#33FF66;

    }
	.ques p{
		position:absolute;
		top:150%;
		font-size:1em;
		color:#939e18;
		left:5%;
		font-family:"Maiandra GD";
	}
	.one{
		background-color: #000000 ; 
		width:95%;
		height:425%;
		position:absolute;
		top:0;
		right:2%;
	}
	.e:hover ~ #box-1 {  
		background-color: rgba(0,0,0,0.8);  
		position: absolute;  
		position: absolute;  
		color: #fff;   
		left:10%;
		top: 130%;
		visibility: visible;
		width:70%;
	} 
	 
}
@media screen and (max-width: 800px) {
	.collen p{
		position:absolute;
		top:60%;
		left:5%;
		font-size:2em;
		color:#FF9900;
	}
	.text p{
		position:absolute;
		top:50%;
		left:10%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.a p{
		position:absolute;
		top:50%;
		left:30%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.b p{
		position:absolute;
		top:50%;
		left:50%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.c p{
		position:absolute;
		top:50%;
		left:73%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.e img{
		position:absolute;
		top:89%;
		left:10%;
		width:70%;
		height:50%;
	}
	.una p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.pangalawa p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo{
		background-color: #000000; 
		width:25%;
		height:16%;
		position:absolute;
		top:123%;
		right:5%;
		border-top-left-radius:15px;
		border-bottom-left-radius:15px;
		border-top-right-radius:15px;
		border-bottom-right-radius:15px;
		-moz-border-radius: 15px;
	}
	.dex p{
		position:absolute;
		top:170%;
		left:10%;
		font-size:1.5em;
		color:#FF9900;
	}
	.rat {
		position:absolute;
		top:400%;
		left:30%;
		font-size:1.5em;
		color:#33FF66;

	}
	.coll p{
		position:absolute;
		top:225%;
		left:5%;
		font-size:1.3em;
		color:#33FF66;
	 }
	 .ter{
		position:absolute;
		top:225%;
		left:44%;
		font-size:1.3em;
		color:#33FF66;
        }
	.na{
		position:absolute;
		top:225%;
		left:73%;
		font-size:1.3em;
		color:#33FF66;
      }
	  .wa p{
		position:absolute;
		top:275%;
		left:13%;
		font-size:1.3em;
		color:#33FF66;
		}
	  .ron{
		position:absolute;
		top:275%;
		left:49%;
		font-size:1.3em;
		color:#33FF66;
		}
	.ran{
		position:absolute;
		top:275%;
		right:15%;
		font-size:1.3em;
		color:#33FF66;
     }
	 .far{
		position:absolute;
		top:330%;
		left:15%;
		font-size:1.3em;
		color:#33FF66;

    }
	.tree{
		position:absolute;
		top:330%;
		left:43%;
		font-size:1.3em;
		color:#33FF66;

    }
	.ree{
		position:absolute;
		top:330%;
		left:73%;
		font-size:1.3em;
		color:#33FF66;

    }
	.ques p{
		position:absolute;
		top:150%;
		font-size:1em;
		color:#939e18;
		left:5%;
		font-family:"Maiandra GD";
	}
	.one{
		background-color: #000000 ; 
		width:95%;
		height:425%;
		position:absolute;
		top:0;
		right:2%;
	}
	.e:hover ~ #box-1 {  
		background-color: rgba(0,0,0,0.8);  
		position: absolute;  
		position: absolute;  
		color: #fff;   
		left:10%;
		top: 130%;
		visibility: visible;
		width:70%;
	} 
	 
}
@media screen and (max-width: 900px) {
	.collen p{
		position:absolute;
		top:60%;
		left:5%;
		font-size:2em;
		color:#FF9900;
	}
	.text p{
		position:absolute;
		top:50%;
		left:10%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.a p{
		position:absolute;
		top:50%;
		left:30%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.b p{
		position:absolute;
		top:50%;
		left:50%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.c p{
		position:absolute;
		top:50%;
		left:73%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.e img{
		position:absolute;
		top:89%;
		left:10%;
		width:70%;
		height:50%;
	}
	.una p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.pangalawa p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo{
		background-color: #000000; 
		width:25%;
		height:16%;
		position:absolute;
		top:123%;
		right:5%;
		border-top-left-radius:15px;
		border-bottom-left-radius:15px;
		border-top-right-radius:15px;
		border-bottom-right-radius:15px;
		-moz-border-radius: 15px;
	}
	.dex p{
		position:absolute;
		top:170%;
		left:10%;
		font-size:1.5em;
		color:#FF9900;
	}
	.rat {
		position:absolute;
		top:400%;
		left:30%;
		font-size:1.5em;
		color:#33FF66;

	}
	.coll p{
		position:absolute;
		top:225%;
		left:5%;
		font-size:1.3em;
		color:#33FF66;
	 }
	 .ter{
		position:absolute;
		top:225%;
		left:44%;
		font-size:1.3em;
		color:#33FF66;
        }
	.na{
		position:absolute;
		top:225%;
		left:73%;
		font-size:1.3em;
		color:#33FF66;
      }
	  .wa p{
		position:absolute;
		top:275%;
		left:13%;
		font-size:1.3em;
		color:#33FF66;
		}
	  .ron{
		position:absolute;
		top:275%;
		left:49%;
		font-size:1.3em;
		color:#33FF66;
		}
	.ran{
		position:absolute;
		top:275%;
		right:15%;
		font-size:1.3em;
		color:#33FF66;
     }
	 .far{
		position:absolute;
		top:330%;
		left:15%;
		font-size:1.3em;
		color:#33FF66;

    }
	.tree{
		position:absolute;
		top:330%;
		left:43%;
		font-size:1.3em;
		color:#33FF66;

    }
	.ree{
		position:absolute;
		top:330%;
		left:73%;
		font-size:1.3em;
		color:#33FF66;
    }
	.ques p{
		position:absolute;
		top:150%;
		font-size:1em;
		color:#939e18;
		left:5%;
		font-family:"Maiandra GD";
	}
	.one{
		background-color: #000000 ; 
		width:95%;
		height:425%;
		position:absolute;
		top:0;
		right:2%;
	}
	.e:hover ~ #box-1 {  
		background-color: rgba(0,0,0,0.8);  
		position: absolute;  
		position: absolute;  
		color: #fff;   
		left:10%;
		top: 130%;
		visibility: visible;
		width:70%;
	} 
	 
}
@media screen and (max-width: 1000px) {
	.collen p{
		position:absolute;
		top:60%;
		left:5%;
		font-size:2em;
		color:#FF9900;
	}
	.text p{
		position:absolute;
		top:50%;
		left:10%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.a p{
		position:absolute;
		top:50%;
		left:30%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.b p{
		position:absolute;
		top:50%;
		left:50%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.c p{
		position:absolute;
		top:50%;
		left:73%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.e img{
		position:absolute;
		top:89%;
		left:10%;
		width:70%;
		height:50%;
	}
	.una p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.pangalawa p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo{
		background-color: #000000; 
		width:25%;
		height:16%;
		position:absolute;
		top:123%;
		right:5%;
		border-top-left-radius:15px;
		border-bottom-left-radius:15px;
		border-top-right-radius:15px;
		border-bottom-right-radius:15px;
		-moz-border-radius: 15px;
	}
	.dex p{
		position:absolute;
		top:170%;
		left:10%;
		font-size:1.5em;
		color:#FF9900;
	}
	.rat {
		position:absolute;
		top:400%;
		left:30%;
		font-size:1.5em;
		color:#33FF66;

	}
	.coll p{
		position:absolute;
		top:225%;
		left:5%;
		font-size:1.3em;
		color:#33FF66;
	 }
	 .ter{
		position:absolute;
		top:225%;
		left:44%;
		font-size:1.3em;
		color:#33FF66;
        }
	.na{
		position:absolute;
		top:225%;
		left:73%;
		font-size:1.3em;
		color:#33FF66;
      }
	  .wa p{
		position:absolute;
		top:275%;
		left:13%;
		font-size:1.3em;
		color:#33FF66;
		}
	  .ron{
		position:absolute;
		top:275%;
		left:49%;
		font-size:1.3em;
		color:#33FF66;
		}
	.ran{
		position:absolute;
		top:275%;
		right:15%;
		font-size:1.3em;
		color:#33FF66;
     }
	 .far{
		position:absolute;
		top:330%;
		left:15%;
		font-size:1.3em;
		color:#33FF66;
    }
	.tree{
		position:absolute;
		top:330%;
		left:43%;
		font-size:1.3em;
		color:#33FF66;

    }
	.ree{
		position:absolute;
		top:330%;
		left:73%;
		font-size:1.3em;
		color:#33FF66;
    }
	.ques p{
		position:absolute;
		top:150%;
		font-size:1em;
		color:#939e18;
		left:5%;
		font-family:"Maiandra GD";
	}
	.one{
		background-color: #000000 ; 
		width:95%;
		height:425%;
		position:absolute;
		top:0;
		right:2%;
	}
	.e:hover ~ #box-1 {  
		background-color: rgba(0,0,0,0.8);  
		position: absolute;  
		position: absolute;  
		color: #fff;   
		left:10%;
		top: 130%;
		visibility: visible;
		width:70%;
	} 
	 
}
@media screen and (max-width: 1100px) {
	.collen p{
		position:absolute;
		top:60%;
		left:5%;
		font-size:2em;
		color:#FF9900;
	}
	.text p{
		position:absolute;
		top:50%;
		left:10%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.a p{
		position:absolute;
		top:50%;
		left:30%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.b p{
		position:absolute;
		top:50%;
		left:50%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.c p{
		position:absolute;
		top:50%;
		left:73%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.e img{
		position:absolute;
		top:89%;
		left:10%;
		width:70%;
		height:50%;
	}
	.una p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.pangalawa p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo{
		background-color: #000000; 
		width:25%;
		height:16%;
		position:absolute;
		top:123%;
		right:5%;
		border-top-left-radius:15px;
		border-bottom-left-radius:15px;
		border-top-right-radius:15px;
		border-bottom-right-radius:15px;
		-moz-border-radius: 15px;
	}
	.dex p{
		position:absolute;
		top:170%;
		left:10%;
		font-size:1.5em;
		color:#FF9900;
	}
	.rat {
		position:absolute;
		top:400%;
		left:30%;
		font-size:1.5em;
		color:#33FF66;

	}
	.coll p{
		position:absolute;
		top:225%;
		left:5%;
		font-size:1.3em;
		color:#33FF66;
	 }
	 .ter{
		position:absolute;
		top:225%;
		left:44%;
		font-size:1.3em;
		color:#33FF66;
        }
	.na{
		position:absolute;
		top:225%;
		left:73%;
		font-size:1.3em;
		color:#33FF66;
      }
	  .wa p{
		position:absolute;
		top:275%;
		left:13%;
		font-size:1.3em;
		color:#33FF66;
		}
	  .ron{
		position:absolute;
		top:275%;
		left:49%;
		font-size:1.3em;
		color:#33FF66;
		}
	.ran{
		position:absolute;
		top:275%;
		right:15%;
		font-size:1.3em;
		color:#33FF66;
     }
	 .far{
		position:absolute;
		top:330%;
		left:15%;
		font-size:1.3em;
		color:#33FF66;
    }
	.tree{
		position:absolute;
		top:330%;
		left:43%;
		font-size:1.3em;
		color:#33FF66;
    }
	.ree{
		position:absolute;
		top:330%;
		left:73%;
		font-size:1.3em;
		color:#33FF66;
    }
	.ques p{
		position:absolute;
		top:150%;
		font-size:1em;
		color:#939e18;
		left:5%;
		font-family:"Maiandra GD";
	}
	.one{
		background-color: #000000 ; 
		width:95%;
		height:425%;
		position:absolute;
		top:0;
		right:2%;
	}
	.e:hover ~ #box-1 {  
		background-color: rgba(0,0,0,0.8);  
		position: absolute;  
		position: absolute;  
		color: #fff;   
		left:10%;
		top: 130%;
		visibility: visible;
		width:70%;
    } 
	 
}
@media screen and (max-width: 1200px) {
	.collen p{
		position:absolute;
		top:60%;
		left:5%;
		font-size:2em;
		color:#FF9900;
	}
	.text p{
		position:absolute;
		top:50%;
		left:10%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.a p{
		position:absolute;
		top:50%;
		left:30%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.b p{
		position:absolute;
		top:50%;
		left:50%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.c p{
		position:absolute;
		top:50%;
		left:73%;
		font-family:verdana;
		font-size:1.5em;
		color:#FFFFFF;
	}
	.e img{
		position:absolute;
		top:89%;
		left:10%;
		width:70%;
		height:50%;
	}
	.una p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.pangalawa p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo p{
		font-size:1em;
		position:absolute;
		left:30%;
		color:#66FFFF;
	}
	.tatlo{
		background-color: #000000; 
		width:25%;
		height:16%;
		position:absolute;
		top:123%;
		right:5%;
		border-top-left-radius:15px;
		border-bottom-left-radius:15px;
		border-top-right-radius:15px;
		border-bottom-right-radius:15px;
		-moz-border-radius: 15px;
	}
	.dex p{
		position:absolute;
		top:170%;
		left:10%;
		font-size:1.5em;
		color:#FF9900;
	}
	.rat {
		position:absolute;
		top:400%;
		left:30%;
		font-size:1.5em;
		color:#33FF66;

	}
	.coll p{
		position:absolute;
		top:225%;
		left:5%;
		font-size:1.3em;
		color:#33FF66;
	}
	 .ter{
		position:absolute;
		top:225%;
		left:44%;
		font-size:1.3em;
		color:#33FF66;
    }
	.na{
		position:absolute;
		top:225%;
		left:73%;
		font-size:1.3em;
		color:#33FF66;
     }
	  .wa p{
		position:absolute;
		top:275%;
		left:13%;
		font-size:1.3em;
		color:#33FF66;
	}
	  .ron{
		position:absolute;
		top:275%;
		left:49%;
		font-size:1.3em;
		color:#33FF66;
	}
	.ran{
		position:absolute;
		top:275%;
		right:15%;
		font-size:1.3em;
		color:#33FF66;
     }
	 .far{
		position:absolute;
		top:330%;
		left:15%;
		font-size:1.3em;
		color:#33FF66;

    }
	.tree{
		position:absolute;
		top:330%;
		left:43%;
		font-size:1.3em;
		color:#33FF66;

    }
	.ree{
		position:absolute;
		top:330%;
		left:73%;
		font-size:1.3em;
		color:#33FF66;
    }
	.ques p{
			position:absolute;
			top:150%;
			font-size:1em;
			color:#939e18;
			left:5%;
			font-family:"Maiandra GD";
	}
	.one{
		background-color: #000000 ; 
		width:95%;
		height:425%;
		position:absolute;
		top:0;
		right:2%;
	}
	.e:hover ~ #box-1 {  
		background-color: rgba(0,0,0,0.8);  
		position: absolute;  
		position: absolute;  
		color: #fff;   
		left:10%;
		top: 130%;
		visibility: visible;
		width:70%;
	} 
	 
}