body
{
overflow-y:scroll;
overflow-x:hidden;
background-image: url('bg3.jpg');
background-image:repeat;
width:100%;
height:100%;
}

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

#brown
{
background-image: linear-gradient(top, rgb(150,117,76) 0%, rgb(190,145,78) 50%, rgb(247,252,170) 100%);
background-image: -o-linear-gradient(top, rgb(150,117,76) 0%, rgb(190,145,78) 50%, rgb(247,252,170) 100%);
background-image: -moz-linear-gradient(top, rgb(150,117,76) 0%, rgb(190,145,78) 50%, rgb(247,252,170) 100%);
background-image: -webkit-linear-gradient(top, rgb(150,117,76) 0%, rgb(190,145,78) 50%, rgb(247,252,170) 100%);
background-image: -ms-linear-gradient(top, rgb(150,117,76) 0%, rgb(190,145,78) 50%, rgb(247,252,170) 100%);

background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, rgb(150,117,76)),
	color-stop(0.5, rgb(190,145,78)),
	color-stop(1, rgb(247,252,170))
);
position:absolute;
z-index:-2;
top:100%;
right:0px;	
height:10%;
width:100%;
}

#about {background-image: url('monkeyssss.jpg');
width: 100%;
height:50%;
color:#000;
font-family:'Century Gothic';
text-align:center;
font-size:20px;
position:absolute;
top:110%;
left:0px;
z-index:-1;
}

#jungle {background-image: url('monkeyssss.jpg');
width: 100%;
height:55%;
color:#000;
font-family:'Century Gothic';
text-align:center;
font-size:20px;
position:absolute;
top:160%;
left:0px;
z-index:-1;
border-bottom:10px solid #025827;
}

h1.big {padding-top:5%;
padding-bottom:0;
font-family:'tempus sans itc';
font-size: 72px;
color:#000;}

.meet {top:215%;
width:100%;
font-family:'tempus sans itc';
font-size:50px;
color:#72c6ff;
position:absolute;
z-index:-1;
}

.lion
{
width:20%; 
height:45%;
position:absolute;
top:250%;
left:10%;
padding:5px;
z-index:-1;
}
.tiger
{
width:20%; 
height:45%;
position:absolute;
top:250%;
left:40%;
padding:5px;
z-index:-1;
}
.monkey
{
width:20%; 
height:45%;
position:absolute;
top:250%;
left:70%;
padding:5px;
z-index:-1;
}
.cheetah
{
width:20%; 
height:45%;
position:absolute;
top: 320%;
left:10%;
padding:5px;
z-index:-1;
}
.hippo
{
width:20%; 
height:45%;
position:absolute;
top: 320%;
left:40%;
padding:5px;
z-index:-1;
}
.owl
{
width:20%; 
height:45%;
position:absolute;
top:320%;
left:70%;
padding:5px;
z-index:-1;
}
.lion, .tiger, .monkey, .cheetah, .hippo, .owl
{
border-radius:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
-moz-border-radius:5px;
}
.image
{
border-radius: 50%/50%;
border:2px solid white; 
width:100%;
height:100%;
}
.content
{
font-family:"Arial";
font-size: 16px;
color:#FFFFFF;
}
.footer 
{
background-image: linear-gradient(bottom, rgb(150,117,76) 0%, rgb(191,146,78) 50%, rgb(248,252,170) 100%);
background-image: -o-linear-gradient(bottom, rgb(150,117,76) 0%, rgb(191,146,78) 50%, rgb(248,252,170) 100%);
background-image: -moz-linear-gradient(bottom, rgb(150,117,76) 0%, rgb(191,146,78) 50%, rgb(248,252,170) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(150,117,76) 0%, rgb(191,146,78) 50%, rgb(248,252,170) 100%);
background-image: -ms-linear-gradient(bottom, rgb(150,117,76) 0%, rgb(191,146,78) 50%, rgb(248,252,170) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(150,117,76)),
	color-stop(0.5, rgb(191,146,78)),
	color-stop(1, rgb(248,252,170))
);
width: 100%;
height: 20%;
border-top:10px solid #025827;
position:absolute;
top: 385%;}
#copyright
{
padding:8% 0 0 0;
text-align: center;
color:white;
font-size:12px;
}





@media screen and (max-width: 1024px) {
.content {font-size:16px;}
#brown {top:79%}
#about {top:89%;}
.meet {top:135%;}
.lion, .tiger, .monkey {top:170%}
.cheetah, .hippo, .owl {top:220%}
.footer {top:275%}
}

@media screen and (max-width: 960px) {
.content {font-size:15.5px;}
#brown {top:74%}
#about {top:84%;}
.meet {top:130%;}
.lion, .tiger, .monkey {top:165%}
.cheetah, .hippo, .owl {top:220%}
.footer {top:270%}
}

@media screen and (max-width: 800px) {
.content {font-size:15px;}
#brown {top:63%}
#about {top:73%;}
.meet {top:120%;}
.lion, .tiger, .monkey {height:45%;top:155%;}
.cheetah, .hippo, .owl {height:45%;top:210%;}
.footer {top:265%}
}

@media screen and (max-width: 700px) {
.content {font-size:16px;}
#brown {top:56%}
#about {top:66%;}
.meet {top:110%;}
.lion, .tiger {height:50%;top:165%;}
.monkey, .cheetah {height:45%;top:225%;}
.hippo, .owl {height:45%;top:280%;}
.lion, .monkey, .hippo {width:35%;left:10%;}
.tiger, .cheetah, .owl {width:35%;left:53%;}
.footer {top:335%;}
}

@media screen and (max-width: 640px) {
.content {font-size:15.5px;}
#brown {top:52%}
#about {top:62%;}
.meet {top:105%;}
.lion, .tiger {top:165%;}
.monkey, .cheetah {top:225%;}
.hippo, .owl {top:280%;}
.footer {top:335%}
}

@media screen and (max-width: 600px) {
#brown {top:49%}
#about {top:59%;}
}

@media screen and (max-width: 530px) {
.content {font-size:15.5px;}
#brown {top:44%}
#about {top:54%;}
h1.about {font-size:60px; padding-top:8%;}
.meet {top:100%; font-size:40px;}
.lion, .tiger {top:144%;}
.monkey, .cheetah {top:205%;}
.hippo, .owl {top:260%;}
.footer {top:315%}
}

@media screen and (max-width: 420px) {
.content {font-size:20px;}
#brown {top:36%}
#about {top:46%;}
.meet {top:95%;}
.lion
{
padding-top:20px;
width:75%; 
height:50%;
position:absolute;
top:144%;
left:10%;
}
.tiger
{
padding-top:20px;
width:75%; 
height:50%;
position:absolute;
top:205%;
left:10%;
}
.monkey
{
padding-top:20px;
width:75%; 
height:50%;
position:absolute;
top:265%;
left:10%;
}
.cheetah
{
padding-top:20px;
width:75%; 
height:55%;
position:absolute;
top: 325%;
left:10%;
}
.hippo
{
padding-top:20px;
width:75%; 
height:50%;
position:absolute;
top: 390%;
left:10%;
}
.owl
{
padding-top:20px;
width:75%; 
height:55%;
position:absolute;
top:450%;
left:10%;
}
.footer 
{
font-size:10px;
top:515%;
}

}

@media screen and (max-width: 320px) {
.content {font-size:20px;}
#brown {top:30%}
#about {top:40%;}
.meet {top:90%; font-size:32px;}
.lion {top:132%;}
.tiger {top:192%;}
.monkey {top:252%;}
.cheetah {top: 312%;}
.hippo {top: 377%;}
.owl {top:437%;}
.footer {font-size:9px;top:505%;}
}