*{
-webkit-user-modify:none;
-webkit-touch-callout:none;
/* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust:none;
/* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
/* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select:none;
/* prevent copy paste, to allow, change 'none' to 'text' */
:;
}
html {height:100%}
body{
overflow:hidden;
font-family:GillSans;
margin:0;
padding:0;
height:100%
}
/*Layout*/
#wrapper{
width:100%;
height:100%;
overflow:hidden;
position:relative;
margin:0 auto;
}
/*Scenery*/
.jungle{
background:url(img/background-jungle.png) top left repeat-x;
}
.day{
background:url(img/background-day.png) top left repeat-x;
}
#cloud{
position:absolute;
width:100%;
height:400px;
top:100px;
left:0;
background:url(img/cloud.png) top left no-repeat;
pointer-events:none;
/*animation-name*/
-webkit-animation-name:cloudsMove;
   -moz-animation-name:cloudsMove;
    -ms-animation-name:cloudsMove;
     -o-animation-name:cloudsMove;
        animation-name:cloudsMove;
/*animation-duration*/
-webkit-animation-duration:40s;
   -moz-animation-duration:40s;
    -ms-animation-duration:40s;
     -o-animation-duration:40s;
        animation-duration:40s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
     -o-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
opacity:0.7;
}
@-webkit-keyframes cloudsMove{
from {
			background-position: -200px top;
		}
		to {
			background-position: 1300px top;
		}
}
#plants-back{
position:absolute;
width:100%;
height:403px;
top:0px;
left:0px;
background-image:url(img/plants-back.png);
pointer-events:none;

}
#plants-front{
position:absolute;
width:1013px;
height:329px;
bottom:0px;
left:0px;
background-image:url(img/plants-front.png);
pointer-events:none;
}
#trunk{
position:absolute;
width:100%;
height:276px;
top:270px;
left:0px;
background-image:url(img/trunk.png);
    background-size:100% 100%;

}
#weed-left{
position:absolute;
width:111px;
height:198px;
bottom:0px;
left:0px;
background-image:url(img/weed-left.png);
pointer-events:none;
}
#weed-right{
position:absolute;
width:111px;
height:198px;
bottom:0px;
right:0px;
background-image:url(img/weed-right.png);
pointer-events:none;
}
/*Animals*/
#lion{
position:absolute;
width:238px;
height:419px;
bottom:-200px;
left:35%;
background-image:url(img/lion.png);
/*transition*/
-webkit-transition:-webkit-transform 3s ease-out;
   -moz-transition:   -moz-transform 3s ease-out;
     -o-transition:     -o-transform 3s ease-out;
        transition:        transform 3s ease-out;
}
.lionup{
/*transform*/
-webkit-transform:translate3d(-40px,-200px,0);
   -moz-transform:translate3d(-40px,-200px,0);
    -ms-transform:translate3d(-40px,-200px,0);
     -o-transform:translate3d(-40px,-200px,0);
        transform:translate3d(-40px,-200px,0);
}
.liondown{
/*animation*/
-webkit-animation:lionDown 5s 1;
   -moz-animation:lionDown 5s 1;
    -ms-animation:lionDown 5s 1;
     -o-animation:lionDown 5s 1;
        animation:lionDown 5s 1;
}
#lion img{
opacity:0;
/*transition*/
-webkit-transition:opacity 1s ease-out;
   -moz-transition:opacity 1s ease-out;
     -o-transition:opacity 1s ease-out;
        transition:opacity 1s ease-out;
}
#lion:hover img{
opacity:1;
/*transition*/
-webkit-transition:opacity 1s ease-out;
   -moz-transition:opacity 1s ease-out;
     -o-transition:opacity 1s ease-out;
        transition:opacity 1s ease-out;
}
#cheetah{
width:542px;
height:190px;
position:absolute;
left:10%;
top:200px;
background-image:url(img/cheetah.png);
/*animation-duration*/
-webkit-animation-duration:3s;
   -moz-animation-duration:3s;
    -ms-animation-duration:3s;
     -o-animation-duration:3s;
        animation-duration:3s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:1;
   -moz-animation-iteration-count:1;
    -ms-animation-iteration-count:1;
     -o-animation-iteration-count:1;
        animation-iteration-count:1;
}
.cheetahrun{
/*animation*/
-webkit-animation:cheetahRun 3s 1;
   -moz-animation:cheetahRun 3s 1;
    -ms-animation:cheetahRun 3s 1;
     -o-animation:cheetahRun 3s 1;
        animation:cheetahRun 3s 1;
}
.cheetahrunback{
/*animation*/
-webkit-animation:cheetahRunBack 3s 1;
   -moz-animation:cheetahRunBack 3s 1;
    -ms-animation:cheetahRunBack 3s 1;
     -o-animation:cheetahRunBack 3s 1;
        animation:cheetahRunBack 3s 1;
}
@-webkit-keyframes cheetahRun{
from {
				-webkit-transform: translate3d(0,0,0);
			}
			50% {
				-webkit-transform: translate3d(800px,50px,0);
				opacity:1;
			}
			51% {
				-webkit-transform: translate3d(800px,50px,0);
				opacity:0;
			}	
			52% {
				-webkit-transform: translate3d(-1500px,-100px,0);
				opacity:0;
			}			
			to {
				-webkit-transform: translate3d(0,0,0);
				opacity:1;
			}
}
@-webkit-keyframes cheetahRunBack{
from {
				-webkit-transform: translate3d(0,0,0);
			}
			50% {
				-webkit-transform: translate3d(800px,50px,0);
				opacity:1;
			}
			51% {
				-webkit-transform: translate3d(800px,50px,0);
				opacity:0;
			}	
			52% {
				-webkit-transform: translate3d(-1500px,-100px,0);
				opacity:0;
			}			
			to {
				-webkit-transform: translate3d(0,0,0);
				opacity:1;
			}
}
#zebra{
width:438px;
height:453px;
position:absolute;
right:-240px;
bottom:0px;
background-image:url(img/zebra.png);
/*transition*/
-webkit-transition:-webkit-transform 1s ease-out;
   -moz-transition:   -moz-transform 1s ease-out;
     -o-transition:     -o-transform 1s ease-out;
        transition:        transform 1s ease-out;
}
.zebrarun{
/*animation*/
-webkit-animation:zebraRun 10s 1;
   -moz-animation:zebraRun 10s 1;
    -ms-animation:zebraRun 10s 1;
     -o-animation:zebraRun 10s 1;
        animation:zebraRun 10s 1;
}
.zebrarunback{
/*animation*/
-webkit-animation:zebraRunBack 10s 1;
   -moz-animation:zebraRunBack 10s 1;
    -ms-animation:zebraRunBack 10s 1;
     -o-animation:zebraRunBack 10s 1;
        animation:zebraRunBack 10s 1;
}
@-webkit-keyframes zebraRun{
from {
				-webkit-transform: translate3d(0,0,0);
			}
			80% {
				-webkit-transform: translate3d(-1400px,0,0);
				opacity:1;
			}
			81% {
				-webkit-transform: translate3d(-1400px,0,0);
				opacity:0;
			}	
			82% {
				-webkit-transform: translate3d(1500px,0,0);
				opacity:0;
			}			
			to {
				-webkit-transform: translate3d(0,0,0);
				opacity:1;				
			}
}
@-webkit-keyframes zebraRunBack{
from {
				-webkit-transform: translate3d(0,0,0);
			}
			80% {
				-webkit-transform: translate3d(-1400px,0,0);
				opacity:1;
			}
			81% {
				-webkit-transform: translate3d(-1400px,0,0);
				opacity:0;
			}	
			82% {
				-webkit-transform: translate3d(1500px,0,0);
				opacity:0;
			}			
			to {
				-webkit-transform: translate3d(0,0,0);
				opacity:1;				
			}
}
#rhino{
width:377px;
height:259px;
position:absolute;
right:-160px;
bottom:0px;
background-image:url(img/rhino.png);
/*transition*/
-webkit-transition:-webkit-transform 1s ease-out;
   -moz-transition:   -moz-transform 1s ease-out;
     -o-transition:     -o-transform 1s ease-out;
        transition:        transform 1s ease-out;
}
.rhinoleft{
/*transform*/
-webkit-transform:translate3d(0,0,0);
   -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
     -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
background-image:url(img/rhino2.png)!important;
}
.rhinoright{
/*animation*/
-webkit-animation:translate3d(0,0,0);
   -moz-animation:translate3d(0,0,0);
    -ms-animation:translate3d(0,0,0);
     -o-animation:translate3d(0,0,0);
        animation:translate3d(0,0,0);
}
#elephant{
position:absolute;
width:550px;
height:434px;
bottom:0px;
left:-400px;
background-image:url(img/elephant.png);
/*transition*/
-webkit-transition:-webkit-transform 20s linear;
   -moz-transition:   -moz-transform 20s linear;
     -o-transition:     -o-transform 20s linear;
        transition:        transform 20s linear;
}
.elephantleft{
/*animation*/
-webkit-animation:elephantLeft 20s 1;
   -moz-animation:elephantLeft 20s 1;
    -ms-animation:elephantLeft 20s 1;
     -o-animation:elephantLeft 20s 1;
        animation:elephantLeft 20s 1;
background-image:url(img/elephant2.png)!important;
}
.elephantright{
/*animation*/
-webkit-animation:elephantRight 20s 1;
   -moz-animation:elephantRight 20s 1;
    -ms-animation:elephantRight 20s 1;
     -o-animation:elephantRight 20s 1;
        animation:elephantRight 20s 1;
}
@-webkit-keyframes elephantLeft{
from {
				-webkit-transform: translate3d(0,0,0);
			}
			90% {
				-webkit-transform: translate3d(1400px,0,0);
				opacity:1;
			}
			91% {
				-webkit-transform: translate3d(1400px,0,0);
				opacity:0;
			}	
			92% {
				-webkit-transform: translate3d(-200px,0,0);
				opacity:0;
			}			
			to {
				-webkit-transform: translate3d(0,0,0);
				opacity:1;
			}
}
@-webkit-keyframes elephantRight{
from {
				-webkit-transform: translate3d(0,0,0);
			}
			50% {
				-webkit-transform: translate3d(800px,50px,0);
				opacity:1;
			}
			51% {
				-webkit-transform: translate3d(800px,50px,0);
				opacity:0;
			}	
			52% {
				-webkit-transform: translate3d(-1500px,-100px,0);
				opacity:0;
			}			
			to {
				-webkit-transform: translate3d(0,0,0);
				opacity:1;
			}
}
#hippo{
width:308px;
height:243px;
position:absolute;
left:0px;
bottom:-100px;
background-image:url(img/hippo.png);
/*transition*/
-webkit-transition:-webkit-transform 3s ease-in;
   -moz-transition:   -moz-transform 3s ease-in;
     -o-transition:     -o-transform 3s ease-in;
        transition:        transform 3s ease-in;
/*animation-iteration-count*/
-webkit-animation-iteration-count:1;
   -moz-animation-iteration-count:1;
    -ms-animation-iteration-count:1;
     -o-animation-iteration-count:1;
        animation-iteration-count:1;
}
.hippoup{
/*transform*/
-webkit-transform:translate3d(0,-100px,0);
   -moz-transform:translate3d(0,-100px,0);
    -ms-transform:translate3d(0,-100px,0);
     -o-transform:translate3d(0,-100px,0);
        transform:translate3d(0,-100px,0);
}
.hippodown{
/*transform*/
-webkit-transform:translate3d(0,0,0);
   -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
     -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
}
#branch-snake{
width:250px;
height:204px;
position:absolute;
left:0px;
top:48px;
background-image:url(img/branch-snake.png);
}
#snake{
width:278px;
height:179px;
position:absolute;
left:-200px;
top:-20px;
background-image:url(img/snake.png);
/*transition*/
-webkit-transition:-webkit-transform 4s ease-out;
   -moz-transition:   -moz-transform 4s ease-out;
     -o-transition:     -o-transform 4s ease-out;
        transition:        transform 4s ease-out;
}
.snakein{
/*animation*/
-webkit-animation:snakeIn 12s 1;
   -moz-animation:snakeIn 12s 1;
    -ms-animation:snakeIn 12s 1;
     -o-animation:snakeIn 12s 1;
        animation:snakeIn 12s 1;
}
.snakeout{
/*animation*/
-webkit-animation:snakeOut 12s 1;
   -moz-animation:snakeOut 12s 1;
    -ms-animation:snakeOut 12s 1;
     -o-animation:snakeOut 12s 1;
        animation:snakeOut 12s 1;
}
@-webkit-keyframes snakeIn{
from {
				-webkit-transform: translate3d(0,0,0);
			}
			10% {
				-webkit-transform: translate3d(250px,50px,0);
			}			
			to {
				-webkit-transform: translate3d(0,0,0);
			}
}
@-webkit-keyframes snakeOut{
from {
				-webkit-transform: translate3d(0,0,0);
			}
			10% {
				-webkit-transform: translate3d(200px,50px,0);
			}			
			to {
				-webkit-transform: translate3d(0,0,0);
			}
}
#grass{
width:100%;
height:95px;
position:absolute;
left:0;
bottom:0;
background-image:url(img/grass.png);
pointer-events:none;

}
#branch{
width:305px;
height:218px;
position:absolute;
right:-20px;
top:70px;
background-image:url(img/branch.png);
pointer-events:none;

}
#toucan{
width:167px;
height:149px;
position:absolute;
right:50px;
top:-10px;
background-image:url(img/toucan.png);
/*transition*/
-webkit-transition:-webkit-transform 2s ease-out;
   -moz-transition:   -moz-transform 2s ease-out;
     -o-transition:     -o-transform 2s ease-out;
        transition:        transform 2s ease-out;
}
.toucanflip{
/*transform*/
-webkit-transform:translate3d(-690px,260px,0)  rotateZ(-360deg);
   -moz-transform:translate3d(-690px,260px,0)  rotateZ(-360deg);
    -ms-transform:translate3d(-690px,260px,0)  rotateZ(-360deg);
     -o-transform:translate3d(-690px,260px,0)  rotateZ(-360deg);
        transform:translate3d(-690px,260px,0)  rotateZ(-360deg);
}
.toucanfly{
/*transform*/
-webkit-transform:translate3d(0,0,0)  rotateZ(360deg);
   -moz-transform:translate3d(0,0,0)  rotateZ(360deg);
    -ms-transform:translate3d(0,0,0)  rotateZ(360deg);
     -o-transform:translate3d(0,0,0)  rotateZ(360deg);
        transform:translate3d(0,0,0)  rotateZ(360deg);
}
#giraf{
width:434px;
height:725px;
position:absolute;
right:-300px;
bottom:0px;
background-image:url(img/giraf.png);
/*transition*/
-webkit-transition:-webkit-transform 3s ease-out;
   -moz-transition:   -moz-transform 3s ease-out;
     -o-transition:     -o-transform 3s ease-out;
        transition:        transform 3s ease-out;
}
.girafin{
/*transform*/
-webkit-transform:translate3d(-200px,0,0);
   -moz-transform:translate3d(-200px,0,0);
    -ms-transform:translate3d(-200px,0,0);
     -o-transform:translate3d(-200px,0,0);
        transform:translate3d(-200px,0,0);
}
.girafout{
/*transform*/
-webkit-transform:rotateZ(0) scale(1);
   -moz-transform:rotateZ(0) scale(1);
    -ms-transform:rotateZ(0) scale(1);
     -o-transform:rotateZ(0) scale(1);
        transform:rotateZ(0) scale(1);
}
#monkeycontainer{
/*transition*/
-webkit-transition:-webkit-transform 1s ease-out;
   -moz-transition:   -moz-transform 1s ease-out;
     -o-transition:     -o-transform 1s ease-out;
        transition:        transform 1s ease-out;
/*animation-iteration-count*/
-webkit-animation-iteration-count:1;
   -moz-animation-iteration-count:1;
    -ms-animation-iteration-count:1;
     -o-animation-iteration-count:1;
        animation-iteration-count:1;
}
.monkeySwingLeft{
/*transform*/
-webkit-transform:translate3d(-400px,0,0);
   -moz-transform:translate3d(-400px,0,0);
    -ms-transform:translate3d(-400px,0,0);
     -o-transform:translate3d(-400px,0,0);
        transform:translate3d(-400px,0,0);
}
.monkeySwingRight{
/*transform*/
-webkit-transform:translate3d(0,0,400px);
   -moz-transform:translate3d(0,0,400px);
    -ms-transform:translate3d(0,0,400px);
     -o-transform:translate3d(0,0,400px);
        transform:translate3d(0,0,400px);
}
#monkey{
width:283px;
height:384px;
position:absolute;
left:20%;
top:-40px;
background-image:url(img/monkey.png);
/*transform-origin*/
-webkit-transform-origin:50% 0;
   -moz-transform-origin:50% 0;
    -ms-transform-origin:50% 0;
     -o-transform-origin:50% 0;
        transform-origin:50% 0;
/*animation*/
-webkit-animation:aapSwing 3s infinite;
   -moz-animation:aapSwing 3s infinite;
    -ms-animation:aapSwing 3s infinite;
     -o-animation:aapSwing 3s infinite;
        animation:aapSwing 3s infinite;
/*animation-timing-function*/
-webkit-animation-timing-function:linear;
   -moz-animation-timing-function:linear;
    -ms-animation-timing-function:linear;
     -o-animation-timing-function:linear;
        animation-timing-function:linear;
}
@-webkit-keyframes aapSwing{
from {
				-webkit-transform:rotate3d(0, 0, 0, 0);
				-webkit-animation-timing-function: ease-out;	
			}
			25% {
				-webkit-transform:rotate3d(0, 0, 0, 10deg);
						-webkit-animation-timing-function: ease-in;	
	
			}	
			50% {
				-webkit-transform:rotate3d(0, 0, 0, 0);
					-webkit-animation-timing-function: linear;	
	
			}		
			75% {
				-webkit-transform:rotate3d(0, 0, 0, -10deg);
					-webkit-animation-timing-function: ease-in;	
	
			}		
			to {
				-webkit-transform:rotate3d(0, 0, 0, 0);
				-webkit-animation-timing-function: ease-out;	
				
			}
}
#config{
font-family:Helvetica;
font-weight:bold;
font-size:12px;
color:rgb(255, 255, 255);
text-align:center;
text-shadow:rgba(0, 0, 0, 0.6) 0px -1px 0px;
text-overflow:ellipsis;
white-space:nowrap;
background:url(img/info.png) 50% 50% no-repeat;
-webkit-dashboard-region:dashboard-region(control rectangle);
position:absolute;
width:40px;
height:40px;
right:6px;
margin-left:auto;
margin-top:auto;
bottom:0px;
}
/* Various */
.copyright{
font-size:12px;
opacity:0.5;
}
li.clicked{
font-size:16px!important;
font-weight:bold;
opacity:1!important;
}
/* LightBox */
#trigger{
text-align:center;
}
/* Style you custom popupbox according to your requirement */
.popupbox{
width:798px;
height:476px;
    -ms-transform: scale(0.6); /* IE 9 */
    -webkit-transform: scale(0.6); /* Safari */
    transform: scale(0.6);
background-image:url(img/lightbox.png);
background-repeat:no-repeat;
display:none;
/* Hidden as default */
float:left;
position:fixed;
top:50%;
left:50%;
z-index:99999;
/*	-webkit-box-shadow: 0px 0px 20px #*/
*	-webkit-box-shadow:0px 0px 20px #000;
/*box-shadow*/
-webkit-box-shadow:0px 0px 20px #000;
   -moz-box-shadow:0px 0px 20px #000;
        box-shadow:0px 0px 20px #000;
:/;
}
#fade{
display:none;
/* Hidden as default */
background:#000;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
opacity:.80;
z-index:9999;
}
#intabdiv{
text-align:center;
padding-top:300px;
color:#fff;
}
h2{
margin:0 0 8px 0;
padding:0;
opacity:0.4;
font-size:16px;
}
#intabdiv ul{
margin:0;
padding:6px;
overflow:hidden;
list-style:none;
margin-left:155px;
}
#intabdiv ul li{
/*box-shadow*/
-webkit-box-shadow:0 0 10px #333;
   -moz-box-shadow:0 0 10px #333;
        box-shadow:0 0 10px #333;
margin:0;
padding:8px 2px;
float:left;
margin-right:10px;
text-align:center;
width:104px;
background-position:0 100%;
background-color:#003;
/*border-radius*/
-webkit-border-radius:8px;
   -moz-border-radius:8px;
        border-radius:8px;
opacity:0.5;
}
#intabdiv ul li span{
font-size:15px;
}
.dayBackgroundThumb{
background-image:-webkit-gradient(    linear,    left bottom,    left top,    color-stop(0.19, rgb(229,250,255)),    color-stop(0.87, rgb(38,181,248)));
color:#3985a8;
text-shadow:0 1px #fff;
}
.nightBackgroundThumb{
background-image:-webkit-gradient(    linear,    left bottom,    left top,    color-stop(0.19, rgb(2,17,158)),    color-stop(0.83, rgb(1,7,74)));
color:#03C;
text-shadow:0 1px rgb(1,7,74);
}
.jungleBackgroundThumb{
background-image:-webkit-gradient(    linear,    left bottom,    left top,    color-stop(0.19, rgb(0,46,0)),    color-stop(0.55, rgb(5,59,17)));
color:#093;
text-shadow:0 1px rgb(0,46,0);
}
.animatedBackgroundThumb{
/*animation*/
-webkit-animation:animateBackground 30s infinite;
   -moz-animation:animateBackground 30s infinite;
    -ms-animation:animateBackground 30s infinite;
     -o-animation:animateBackground 30s infinite;
        animation:animateBackground 30s infinite;
/*animation-timing-function*/
-webkit-animation-timing-function:linear;
   -moz-animation-timing-function:linear;
    -ms-animation-timing-function:linear;
     -o-animation-timing-function:linear;
        animation-timing-function:linear;
}
@-webkit-keyframes animateBackground{
from {
				background-color:#27b5f8;
			}
			50% {
				background-color:#0004b3;
			}	
			75% {
				background-color:#002e00;
			}			
			to {
				background-color:#27b5f8;
			}
}
#close img{
text-decoration:none;
}
#close{
width:50px;
height:50px;
position:absolute;
float:right;
}


.banner {z-index:1;height:70px;width:50%;background-color:#33BF00;position:absolute;left:25%;bottom:0;padding:10px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;

}