body {
background: #3bff5b;}

#header {background-image: url('smallerhead.jpg');
background-repeat: repeat-x;
position:absolute;
z-index:-2;
top:0px;
right:0px;	
height:100%;
width:100%;
background-size: auto 100%;}


.menu {position:absolute;
top:0px;
left: 0px;
width:100%;
height:50px;
background-image: url('smallerhead.jpg') center;
z-index:-1;
}

.nav {list-style:none;
margin:0;
padding:0;
text-align:center;
height:100%;
background: url('leaves.png') repeat-x 50% #01b700;
border-bottom: 3px solid #01b700;
z-index:1;
}

.nav li {display:inline;}

.nav a {display:inline-block;
padding:10px;
text-decoration:none;
border:none;
font-family: Arial, Serif;
text-align:center;
font-size:25px;
font-weight:bold;
}
.nav a:link, .nav a:visited, .nav a:active {color:#fff;
text-shadow: 2px 2px 0 #000;}


#about {background:#228c02  ;
width: 100%; 
height: 35%;
color:#fff;
font-family: Arial, Serif;
text-align:center;
font-size:20px;
top:100%;
position:absolute;
left:0px;
z-index:-1;
}

h1.about {padding:0px;
font-family:'century gothic';
font-size: 2.7em;
color:#FFFFFF;}

.middle {position:absolute;
top:135%;
width:100%;
height:145%;
background: url('bg.jpg');
background-size: 100% auto;
left:0;
right:0;
z-index:-1;}

.lion
{
width:20%; 
height:35%;
position:absolute;
top:20%;
left:10%;
padding:5px;
z-index: 1;
}

.tiger
{
width:20%; 
height:35%;
position:absolute;
top:20%;
left:40%;
padding:5px;
z-index: 1;
}

.monkey
{
width:20%; 
height:35%;
position:absolute;
top:20%;
left:70%;
padding:5px;
z-index: 1;
}

.cheetah
{
width:20%; 
height:35%;
position:absolute;
top: 60%;
left:10%;
padding:5px;
z-index: 1;
}

.hippo
{
width:20%; 
height:35%;
position:absolute;
top: 60%;
left:40%;
padding:5px;
z-index: 1;
}

.owl
{
width:20%; 
height:35%;
position:absolute;
top:60%;
left:70%;
padding:5px;
z-index: 1;
}

.lion, .tiger, .monkey, .cheetah, .hippo, .owl
{

background-color: #00CC00; 
border-radius: 15px;
border-top-left-radius:15px;
border-bottom-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
-moz-border-radius: 15px;
}

.image
{
border-radius: 50px/50px;
border:2px solid white; 
width:100px;
height:100px;
margin-top:10px;
}

.content
{ 
font-family:"Arial";
font-size: 16px;
color:#FFFFFF;
}

.footer 
{
background:#03406A;
height: 10%;
width: 100%; 
left:0;
right:0;
text-align: center;
color:white;
font-size:12px;
position:absolute;
top: 379%;}

.footer span {position:absolute;
top:40%;
right:30%;}

.footer a {text-decoration:none;
color:#fff;}

#aa {top:0;
width:100%;
font-family:'century gothic';
font-size:3em;
color:#ffffff;
text-shadow: 2px 0 0 #437434, -2px 0 0 #437434, 0 2px 0 #437434, 0 -2px 0 #437434, 1px 1px #437434, -1px -1px 0 #437434, 1px -1px 0 #437434, -1px 1px 0 #437434;
position:absolute;
left:0;
right:0;
}

.anim img {transition: transform 2s;
-moz-transition: transform 2s;
-webkit-transition: transform 2s;
-o-transition: transform 2s;}

.anim:hover img {transform:rotate(360deg);
-ms-transform: rotate(360deg); 
-webkit-transform: rotate(360deg);}

.middle div {transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;}

.middle div:hover {background-color:#00ccaa;
transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
-webkit-transform: translate(0px, 10px);}

h2 {font-family:arial, serif;
	text-align:center;
	color:#fff;
	text-shadow: 2px 0 0 #437434, -2px 0 0 #437434, 0 2px 0 #437434, 0 -2px 0 #437434, 1px 1px #437434, -1px -1px 0 #437434, 1px -1px 0 #437434, -1px 1px 0 #437434;
	font-size:2em;
	padding:0;
	margin:0;
	margin-top:2%;
	}

h1 {text-align:center;
font-family: arial, serif;
padding:0;
color:#fff;
text-shadow: 2px 2px 0 #000;}


.add {
	position:absolute;
	top:269%;
	left:0;
	right:0;
	height:100%;
	width:100%;
	margin-top:5%;
	background: url('bg_lst.png');
	border-top:solid #fff 5px;
	overflow-y:hidden;}
	
.add img {
			position:absolute;
			visibility:hidden;}
			
.text {width:70%;
margin:2%;
visibility:hidden;}

.info {height:6.1%;
		width:13%;
		font-family: arial, serif;
		border-radius: 15px;
		background-color:#00cccc;
		margin-left:5%;
		transition: width 0.8s linear, height 0.5s linear;
		-webkit-transition: width 0.5s linear, height 0.8s linear;
		-moz-transition: width 0.5s linear, height 0.8s linear;
		-o-transition: width 0.5s linear, height 0.8s linear;}

.info:hover img {visibility:visible;}

.info:hover {width:90%;
				height:37%;}

.info:hover .text {visibility:visible;}

#ban {top:15%;
		right:7%;
		width: 21%;}
		
#orch {top: 25%;
		right: 7%;
		height: 33%;}
		
#brom {top:34.5%;
			right:7%;
			height:33%;}
			
#sap {top:43.5%;
		right:7%;
		height:33%;}
		
#hel {top:53.5%;
right:7%;
height:33%;}

#poin {top:62.5%;
		right:7%;
		height:33%;}