Fire JS Bin - CSS3AnimatedFish

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

<!doctype html>
<html lang="en">
<head>
<title>Pure CSS3 animated fish tank</title>
<meta name="Description" content="Pure CSS3 animated fish tank demo by Tayo Wegner at lpto.net" >
<meta name="author" content="Tayo wegner" >
<!-- 
	CSS3 demo demonstrating some new technics that CSS3 can offer.

This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
</head>
<body>
	<div id="wrap">
		<h1>Pure CSS3 animated fish tank</h1>
		<div class="window">
			<div class="fishtank_wrap">
				<div class="fishtank">
				
					<div class="bubble_wrap">
						<div class="bubbles b0"></div>
						<div class="bubbles b1"></div>
						<div class="bubbles b2"></div>
						<div class="bubbles b3"></div>
						<div class="bubbles b4"></div>
						<div class="bubbles b5"></div>
					</div>
					<div class="bubble_wrap bw2">
						<div class="bubbles b6"></div>
						<div class="bubbles b7"></div>
						<div class="bubbles b8"></div>
					</div>
					<div class="water"></div>
					<div class="fish_wrap">
						<div class="fred">
							<div class="top_fin"></div>
							<div class="tail_fin"></div>
							<div class="fish_body">
								<div class="eye"></div>
								<div class="scale_1"></div>
								<div class="scale_2"></div>
								<div class="scale_3"></div>
								<div class="scale_4"></div>
							</div>
							
						</div>
					</div>
					
					<div class="ground"></div>
					<div class="rock_1"></div>
					<div class="rock_2"></div>
					<div class="rock_3"></div>
					<div class="rock_4"></div>
					<div class="rock_5"></div>
					
					<div class="plant_1_wrap">
						<div class="plant_1"></div>
						<div class="plant_2"></div>
						<div class="plant_3"></div>
					</div>
					<div class="plant_2_wrap">
						<div class="plant_4"></div>
						<div class="plant_5"></div>
					</div>
					<div class="long_plant">
						<div class="l_plant_1"></div>
						<div class="l_plant_2"></div>
						<div class="l_plant_3"></div>
					</div>
					<div class="long_plant2">
						
						<div class="l_plant_2"></div>
						<div class="l_plant_3"></div>
					</div>
					<div class="water"></div>
					
				</div>
			</div>
		</div>
	</div>
	<div class="table"></div>
</body>
</html>

/*	Pure CSS3 fish tank demo demonstrating Css3 animation keyframes and some new technics that CSS3 can offer.

You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
/* ...............< Pure CSS3 animated fish tank demo >..................  */

body{
background-color: #393939;
margin:0px;
}
/* start of globals */
a{
text-decoration:none;
color:cornflowerblue;
}
h1{
text-align:center;
color: #717273;
}
/* end of globals */
/* start of wrap */
#wrap{
width:970px;
margin:auto;
font-family:tahoma,ariel;
position:relative;
}
.clear{
clear:both;
}
/* end of wrap */
.window{
/*border:1px solid #191919;*/
width:950px;
height:500px;
position:relative;
z-index: 20;
}
/* ...............< fish tank  >.................. */
.fishtank_wrap{
border:1px solid #191919;
width:850px;
height:400px;
margin:auto;
margin-top:50px;
position:relative;
overflow: hidden;
border-right:20px solid #191919;
border-left:20px solid #191919;
border-bottom:8px solid #191919;
}
.water{
background-color: rgba(100, 148, 237, 0.09);
border-top: 1px solid #191919;
border-bottom: 1px solid #191919;
height: 349px;
position: absolute;
top: 30px;
width: 850px;
z-index: 160;
}
.fishtank{
box-shadow: 0 -10px 24px #817F7F inset, 0 -100px 134px #DCDCDC inset;
-moz-box-shadow: 0 -10px 24px #817F7F inset, 0 -100px 134px #DCDCDC inset;
-webkit-box-shadow: 0 -10px 24px #817F7F inset, 0 -100px 134px #DCDCDC inset;
-o-box-shadow: 0 -10px 24px #817F7F inset, 0 -100px 134px #DCDCDC inset;
-ms-box-shadow: 0 -10px 24px #817F7F inset, 0 -100px 134px #DCDCDC inset;
height: 400px;
width: 850px;
}
.ground{
background-color: #B19975;
border-bottom: 20px solid #655848;
height: 50px;
position: absolute;
top: 330px;
width: 850px;
z-index: 25;
box-shadow: 0 13px 19px #3A251D inset;
-moz-box-shadow: 0 13px 19px #3A251D inset;
-webkit-box-shadow: 0 13px 19px #3A251D inset;
-o-box-shadow: 0 13px 19px #3A251D inset;
-ms-box-shadow: 0 13px 19px #3A251D inset;
/*box-shadow: 0 -10px 24px #303030, 0 13px 19px #3A251D inset;*/
}
/*rocks*/
.rock_1{
border: 1px solid #252424;
transform: skew(-18deg);
-moz-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
-o-transform: skew(-18deg);
-ms-transform: skew(-18deg);
background-color: #956F53;
border-radius: 120px 20px 20px 20px;
-moz-border-radius: 120px 20px 20px 20px;
-webkit-border-radius: 120px 20px 20px 20px;
-o-border-radius: 120px 20px 20px 20px;
-ms-border-radius: 120px 20px 20px 20px;
height: 115px;
left: 485px;
position: absolute;
top: 238px;
width: 138px;
box-shadow: 3px -6px 2px #292828 inset, -13px -34px 49px #292828 inset;
-moz-box-shadow: 3px -6px 2px #292828 inset, -13px -34px 49px #292828 inset;
-webkit-box-shadow: 3px -6px 2px #292828 inset, -13px -34px 49px #292828 inset;
-o-box-shadow: 3px -6px 2px #292828 inset, -13px -34px 49px #292828 inset;
-ms-box-shadow: 3px -6px 2px #292828 inset, -13px -34px 49px #292828 inset;
z-index: 30;
}
.rock_2{
border: 1px solid #252424;
transform: skew(-20deg) rotate(0deg);
-moz-transform: skew(-20deg) rotate(0deg);
-webkit-transform: skew(-20deg) rotate(0deg);
-o-transform: skew(-20deg) rotate(0deg);
-ms-transform: skew(-20deg) rotate(0deg);
background-color: #604F46;
border-radius: 57px 84px 13px 13px;
-moz-border-radius: 57px 84px 13px 13px;
-webkit-border-radius: 57px 84px 13px 13px;
-o-border-radius: 57px 84px 13px 13px;
-ms-border-radius: 57px 84px 13px 13px;
height: 115px;
left: 566px;
position: absolute;
top: 238px;
width: 128px;
box-shadow: 11px 14px 23px #171717, -83px -37px 25px #292828 inset;
-moz-box-shadow: 11px 14px 23px #171717, -83px -37px 25px #292828 inset;
-webkit-box-shadow: 11px 14px 23px #171717, -83px -37px 25px #292828 inset;
-o-box-shadow: 11px 14px 23px #171717, -83px -37px 25px #292828 inset;
-ms-box-shadow: 11px 14px 23px #171717, -83px -37px 25px #292828 inset;
z-index: 30;
}
.rock_2:after{
transform: skew(36deg) rotate(-5deg);
-moz-transform: skew(36deg) rotate(-5deg);
-webkit-transform: skew(36deg) rotate(-5deg);
-o-transform: skew(36deg) rotate(-5deg);
-ms-transform: skew(36deg) rotate(-5deg);
background-color: #604F46;
border-radius: 24px 98px 8px 7px;
-moz-border-radius: 24px 98px 8px 7px;
-webkit-border-radius: 24px 98px 8px 7px;
-o-border-radius: 24px 98px 8px 7px;
-ms-border-radius: 24px 98px 8px 7px;

box-shadow: -11px 15px 22px #171717, 9px -27px 34px #292828 inset;
-moz-box-shadow: -11px 15px 22px #171717, 9px -27px 34px #292828 inset;
-webkit-box-shadow: -11px 15px 22px #171717, 9px -27px 34px #292828 inset;
-o-box-shadow: -11px 15px 22px #171717, 9px -27px 34px #292828 inset;
-ms-box-shadow: -11px 15px 22px #171717, 9px -27px 34px #292828 inset;
content: "";
height: 105px;
left: 76px;
position: absolute;
top: 14px;
width: 91px;
border: 1px solid #252424;
}
.rock_3{
border: 1px solid #252424;
transform: skew(-18deg) rotate(46deg);
-moz-transform: skew(-18deg) rotate(46deg);
-webkit-transform: skew(-18deg) rotate(46deg);
-o-transform: skew(-18deg) rotate(46deg);
-ms-transform: skew(-18deg) rotate(46deg);
background-color: #956F53;
border-radius: 121px 20px 137px 51px;
-moz-border-radius: 121px 20px 137px 51px;
-webkit-border-radius: 121px 20px 137px 51px;
-o-border-radius: 121px 20px 137px 51px;
-ms-border-radius: 121px 20px 137px 51px;
height: 51px;
left: 627px;
position: absolute;
top: 317px;
width: 67px;
box-shadow: 1px -2px 8px #171717, 1px -18px 18px #292828 inset;
-moz-box-shadow: 1px -2px 8px #171717, 1px -18px 18px #292828 inset;
-webkit-box-shadow: 1px -2px 8px #171717, 1px -18px 18px #292828 inset;
-o-box-shadow: 1px -2px 8px #171717, 1px -18px 18px #292828 inset;
-ms-box-shadow: 1px -2px 8px #171717, 1px -18px 18px #292828 inset;
z-index: 50;
}
.rock_3:before{
border: 1px solid #252424;
transform: skew(-18deg) rotate(129deg);
-moz-transform: skew(-18deg) rotate(129deg);
-webkit-transform: skew(-18deg) rotate(129deg);
-o-transform: skew(-18deg) rotate(129deg);
-ms-transform: skew(-18deg) rotate(129deg);
background-color: #A37F64;
border-radius: 121px 20px 137px 51px;
-moz-border-radius: 121px 20px 137px 51px;
-webkit-border-radius: 121px 20px 137px 51px;
-o-border-radius: 121px 20px 137px 51px;
-ms-border-radius: 121px 20px 137px 51px;
content: "";
height: 41px;
left: -36px;
position: absolute;
top: 53px;
width: 80px;
box-shadow: -1px 4px 8px #171717, 4px 3px 18px #292828 inset;
-moz-box-shadow: -1px 4px 8px #171717, 4px 3px 18px #292828 inset;
-webkit-box-shadow: -1px 4px 8px #171717, 4px 3px 18px #292828 inset;
-o-box-shadow: -1px 4px 8px #171717, 4px 3px 18px #292828 inset;
-ms-box-shadow: -1px 4px 8px #171717, 4px 3px 18px #292828 inset;
}
.rock_3:after{
border: 1px solid #252424;
transform: skew(-18deg) rotate(129deg);
-moz-transform: skew(-18deg) rotate(129deg);
-webkit-transform: skew(-18deg) rotate(129deg);
-o-transform: skew(-18deg) rotate(129deg);
-ms-transform: skew(-18deg) rotate(129deg);
background-color: #78604E;
border-radius: 121px 20px 137px 51px;
-moz-border-radius: 121px 20px 137px 51px;
-webkit-border-radius: 121px 20px 137px 51px;
-o-border-radius: 121px 20px 137px 51px;
-ms-border-radius: 121px 20px 137px 51px;
content: "";
height: 51px;
left: 49px;
position: absolute;
top: -40px;
width: 53px;
box-shadow: 1px -1px 6px #171717, 3px 2px 17px #292828 inset;
-moz-box-shadow: 1px -1px 6px #171717, 3px 2px 17px #292828 inset;
-webkit-box-shadow: 1px -1px 6px #171717, 3px 2px 17px #292828 inset;
-o-box-shadow: 1px -1px 6px #171717, 3px 2px 17px #292828 inset;
-ms-box-shadow: 1px -1px 6px #171717, 3px 2px 17px #292828 inset;
}

.rock_4{
transform: skew(-18deg) rotate(6deg);
-moz-transform: skew(-18deg) rotate(6deg);
-webkit-transform: skew(-18deg) rotate(6deg);
-o-transform: skew(-18deg) rotate(6deg);
-ms-transform: skew(-18deg) rotate(6deg);
background-color: #956F53;
border-radius: 121px 19px 50px 18px;
-moz-border-radius: 121px 19px 50px 18px;
-webkit-border-radius: 121px 19px 50px 18px;
-o-border-radius: 121px 19px 50px 18px;
-ms-border-radius: 121px 19px 50px 18px;

box-shadow: 1px 4px 8px #171717, -6px -8px 12px #292828 inset;
-moz-box-shadow: 1px 4px 8px #171717, -6px -8px 12px #292828 inset;
-webkit-box-shadow: 1px 4px 8px #171717, -6px -8px 12px #292828 inset;
-o-box-shadow: 1px 4px 8px #171717, -6px -8px 12px #292828 inset;
-ms-box-shadow: 1px 4px 8px #171717, -6px -8px 12px #292828 inset;
height: 252px;
left: 227px;
position: absolute;
top: 110px;
width: 107px;
border: 1px solid #252424;
z-index: 25;
}
.rock_4:before{
transform: skew(-19deg) skewY(22deg) rotate(68deg);
-moz-transform: skew(-19deg) skewY(22deg) rotate(68deg);
-webkit-transform: skew(-19deg) skewY(22deg) rotate(68deg);
-o-transform: skew(-19deg) skewY(22deg) rotate(68deg);
-ms-transform: skew(-19deg) skewY(22deg) rotate(68deg);
background-color: #A37F64;
border-radius: 191px 106px 137px 1px;
-moz-border-radius: 191px 106px 137px 1px;
-webkit-border-radius: 191px 106px 137px 1px;
-o-border-radius: 191px 106px 137px 1px;
-ms-border-radius: 191px 106px 137px 1px;

box-shadow: 6px -27px 23px #473827 inset;
-moz-box-shadow: 6px -27px 23px #473827 inset;
-webkit-box-shadow: 6px -27px 23px #473827 inset;
-o-box-shadow: 6px -27px 23px #473827 inset;
-ms-box-shadow: 6px -27px 23px #473827 inset;
content: "";
height: 44px;
left: 7px;
position: absolute;
top: 102px;
width: 228px;
border: 1px solid #252424;
}
.rock_4:after{
transform: skew(-18deg) rotate(43deg);
-moz-transform: skew(-18deg) rotate(43deg);
-webkit-transform: skew(-18deg) rotate(43deg);
-o-transform: skew(-18deg) rotate(43deg);
-ms-transform: skew(-18deg) rotate(43deg);
background-color: #78604E;
border-radius: 121px 20px 137px 51px;
-moz-border-radius: 121px 20px 137px 51px;
-webkit-border-radius: 121px 20px 137px 51px;
-o-border-radius: 121px 20px 137px 51px;
-ms-border-radius: 121px 20px 137px 51px;

box-shadow: 5px 1px 4px #171717, -8px -7px 18px #292828 inset;
-moz-box-shadow: 5px 1px 4px #171717, -8px -7px 18px #292828 inset;
-webkit-box-shadow: 5px 1px 4px #171717, -8px -7px 18px #292828 inset;
-o-box-shadow: 5px 1px 4px #171717, -8px -7px 18px #292828 inset;
-ms-box-shadow: 5px 1px 4px #171717, -8px -7px 18px #292828 inset;
content: "";
height: 60px;
left: 101px;
position: absolute;
top: 192px;
width: 53px;
border: 1px solid #252424;
}

.rock_5{
transform: skew(-18deg) rotate(54deg);
-moz-transform: skew(-18deg) rotate(54deg);
-webkit-transform: skew(-18deg) rotate(54deg);
-o-transform: skew(-18deg) rotate(54deg);
-ms-transform: skew(-18deg) rotate(54deg);
background-color: #956F53;
border-radius: 121px 20px 137px 51px;
-moz-border-radius: 121px 20px 137px 51px;
-webkit-border-radius: 121px 20px 137px 51px;
-o-border-radius: 121px 20px 137px 51px;
-ms-border-radius: 121px 20px 137px 51px;

box-shadow:3px 2px 7px #171717, -14px -18px 30px #292828 inset;
-moz-box-shadow:3px 2px 7px #171717, -14px -18px 30px #292828 inset;
-webkit-box-shadow:3px 2px 7px #171717, -14px -18px 30px #292828 inset;
-o-box-shadow:3px 2px 7px #171717, -14px -18px 30px #292828 inset;
-ms-box-shadow:3px 2px 7px #171717, -14px -18px 30px #292828 inset;
height: 84px;
left: 95px;
position: absolute;
top: 290px;
width: 66px;
border: 1px solid #252424;
z-index: 100;
}
.rock_5:before{
transform: skew(-18deg) rotate(112deg);
-moz-transform: skew(-18deg) rotate(112deg);
-webkit-transform: skew(-18deg) rotate(112deg);
-o-transform: skew(-18deg) rotate(112deg);
-ms-transform: skew(-18deg) rotate(112deg);
background-color: #A37F64;
border: 1px solid #252424;
border-radius: 21px 20px 117px 51px;
-moz-border-radius: 21px 20px 117px 51px;
-webkit-border-radius: 21px 20px 117px 51px;
-o-border-radius: 21px 20px 117px 51px;
-ms-border-radius: 21px 20px 117px 51px;

box-shadow: -8px 1px 8px #212020, 5px 5px 12px #292828 inset;
-moz-box-shadow: -8px 1px 8px #212020, 5px 5px 12px #292828 inset;
-webkit-box-shadow: -8px 1px 8px #212020, 5px 5px 12px #292828 inset;
-ms-box-shadow: -8px 1px 8px #212020, 5px 5px 12px #292828 inset;
content: "";
height: 100px;
left: -58px;
position: absolute;
top: 43px;
width: 86px;
}
.rock_5:after{
transform: skewX(1deg) rotate(132deg);
-moz-transform: skewX(1deg) rotate(132deg);
-webkit-transform: skewX(1deg) rotate(132deg);
-o-transform: skewX(1deg) rotate(132deg);
-ms-transform: skewX(1deg) rotate(132deg);
background-color: #78604E;
border: 1px solid #252424;
border-radius: 40px 102px 104px 109px;
-moz-border-radius: 40px 102px 104px 109px;
-webkit-border-radius: 40px 102px 104px 109px;
-o-border-radius: 40px 102px 104px 109px;
-ms-border-radius: 40px 102px 104px 109px;

box-shadow: -4px -2px 7px #171717, 9px 11px 18px #292828 inset;
-moz-box-shadow: -4px -2px 7px #171717, 9px 11px 18px #292828 inset;
-webkit-box-shadow: -4px -2px 7px #171717, 9px 11px 18px #292828 inset;
-o-box-shadow: -4px -2px 7px #171717, 9px 11px 18px #292828 inset;
-ms-box-shadow: -4px -2px 7px #171717, 9px 11px 18px #292828 inset;
content: "";
height: 59px;
left: 195px;
position: absolute;
top: -265px;
width: 71px;
}
/*end of rocks*/
/*plants*/
.plant_1_wrap{
position: absolute;
left: 676px;
z-index: 40;
}
.plant_1{
transform: skew(-12deg) skewX(-22deg) rotate(-37deg);
-moz-transform: skew(-12deg) skewX(-22deg) rotate(-37deg);
-webkit-transform: skew(-12deg) skewX(-22deg) rotate(-37deg);
-o-transform: skew(-12deg) skewX(-22deg) rotate(-37deg);
-ms-transform: skew(-12deg) skewX(-22deg) rotate(-37deg);
background-color: #3D8F39;
border: 1px solid #252424;
border-radius: 260px 30px 260px 17px;
-moz-border-radius: 260px 30px 260px 17px;
-webkit-border-radius: 260px 30px 260px 17px;
-o-border-radius: 260px 30px 260px 17px;
-ms-border-radius: 260px 30px 260px 17px;

.plant_1:after{
transform: skew(11deg) skewX(-29deg) rotate(-20deg);
-moz-transform: skew(11deg) skewX(-29deg) rotate(-20deg);
-webkit-transform: skew(11deg) skewX(-29deg) rotate(-20deg);
-o-transform: skew(11deg) skewX(-29deg) rotate(-20deg);
-ms-transform: skew(11deg) skewX(-29deg) rotate(-20deg);
border: 1px solid #252424;
box-shadow: 0 10px 11px #292828;
-moz-box-shadow: 0 10px 11px #292828;
-webkit-box-shadow: 0 10px 11px #292828;
-o-box-shadow: 0 10px 11px #292828;
-ms-box-shadow: 0 10px 11px #292828;
content: "";
height: 179px;
left: 20px;
position: absolute;
top: 19px;
width: 2px;
}
.plant_2{
transform: skew(10deg) skewX(-29deg) rotate(-3deg);
-moz-transform: skew(10deg) skewX(-29deg) rotate(-3deg);
-webkit-transform: skew(10deg) skewX(-29deg) rotate(-3deg);
-o-transform: skew(10deg) skewX(-29deg) rotate(-3deg);
-ms-transform: skew(10deg) skewX(-29deg) rotate(-3deg);
background-color: #33852F;
border: 1px solid #252424;
border-radius: 260px 30px 260px 17px;
-moz-border-radius: 260px 30px 260px 17px;
-webkit-border-radius: 260px 30px 260px 17px;
-o-border-radius: 260px 30px 260px 17px;
-ms-border-radius: 260px 30px 260px 17px;

.plant_3{
transform: skew(10deg) skewX(-29deg) rotate(-15deg);
-moz-transform: skew(10deg) skewX(-29deg) rotate(-15deg);
-webkit-transform: skew(10deg) skewX(-29deg) rotate(-15deg);
-o-transform: skew(10deg) skewX(-29deg) rotate(-15deg);
-ms-transform: skew(10deg) skewX(-29deg) rotate(-15deg);
background-color: #33852F;
border: 1px solid #252424;
border-radius: 260px 30px 260px 17px;
-moz-border-radius: 260px 30px 260px 17px;
-webkit-border-radius: 260px 30px 260px 17px;
-o-border-radius: 260px 30px 260px 17px;
-ms-border-radius: 260px 30px 260px 17px;

box-shadow: -4px -5px 8px #292828 inset;
-moz-box-shadow: -4px -5px 8px #292828 inset;
-webkit-box-shadow: -4px -5px 8px #292828 inset;
-o-box-shadow: -4px -5px 8px #292828 inset;
-ms-box-shadow: -4px -5px 8px #292828 inset;
height: 153px;
left: 9px;
position: absolute;
top: 203px;
width: 39px;
}
.plant_3:after{
transform: skew(14deg) skewX(-29deg) rotate(-14deg);
-moz-transform: skew(14deg) skewX(-29deg) rotate(-14deg);
-webkit-transform: skew(14deg) skewX(-29deg) rotate(-14deg);
-o-transform: skew(14deg) skewX(-29deg) rotate(-14deg);
-ms-transform: skew(14deg) skewX(-29deg) rotate(-14deg);
border: 1px solid #252424;
box-shadow: 0 10px 11px #292828;
-moz-box-shadow: 0 10px 11px #292828;
-webkit-box-shadow: 0 10px 11px #292828;
-o-box-shadow: 0 10px 11px #292828;
-ms-box-shadow: 0 10px 11px #292828;
content: "";
height: 112px;
left: 14px;
position: absolute;
top: 19px;
width: 2px;
}
/*plant 2*/
.plant_2_wrap{
position: absolute;
left: 101px;
z-index: 40;
}
.plant_4{
transform: skew(10deg) skewX(-29deg) rotate(-34deg);
-moz-transform: skew(10deg) skewX(-29deg) rotate(-34deg);
-webkit-transform: skew(10deg) skewX(-29deg) rotate(-34deg);
-o-transform: skew(10deg) skewX(-29deg) rotate(-34deg);
-ms-transform: skew(10deg) skewX(-29deg) rotate(-34deg);
background-color: #33852F;
border: 1px solid #252424;
border-radius: 260px 30px 260px 17px;
-moz-border-radius: 260px 30px 260px 17px;
-webkit-border-radius: 260px 30px 260px 17px;
-o-border-radius: 260px 30px 260px 17px;
-ms-border-radius: 260px 30px 260px 17px;

box-shadow: -4px -5px 8px #292828 inset;
-moz-box-shadow: -4px -5px 8px #292828 inset;
-webkit-box-shadow: -4px -5px 8px #292828 inset;
-o-box-shadow: -4px -5px 8px #292828 inset;
-ms-box-shadow: -4px -5px 8px #292828 inset;
height: 135px;
left: -9px;
position: absolute;
top: 180px;
width: 39px;
}
.plant_4:after{
transform: skew(14deg) skewX(-29deg) rotate(-10deg);
-moz-transform: skew(14deg) skewX(-29deg) rotate(-10deg);
-webkit-transform: skew(14deg) skewX(-29deg) rotate(-10deg);
-o-transform: skew(14deg) skewX(-29deg) rotate(-10deg);
-ms-transform: skew(14deg) skewX(-29deg) rotate(-10deg);
border: 1px solid #252424;
box-shadow: 0 10px 11px #292828;
-moz-box-shadow: 0 10px 11px #292828;
-webkit-box-shadow: 0 10px 11px #292828;
-o-box-shadow: 0 10px 11px #292828;
-ms-box-shadow: 0 10px 11px #292828;
content: "";
height: 112px;
left: 14px;
position: absolute;
top: 19px;
width: 2px;
}
.plant_5{
transform: skew(10deg) skewX(-29deg) rotate(5deg);
-moz-transform: skew(10deg) skewX(-29deg) rotate(5deg);
-webkit-transform: skew(10deg) skewX(-29deg) rotate(5deg);
-o-transform: skew(10deg) skewX(-29deg) rotate(5deg);
-ms-transform: skew(10deg) skewX(-29deg) rotate(5deg);
background-color: #33852F;
border: 1px solid #252424;
-moz-border-radius: 260px 30px 260px 17px;
-webkit-border-radius: 260px 30px 260px 17px;
-o-border-radius: 260px 30px 260px 17px;
-ms-border-radius: 260px 30px 260px 17px;

box-shadow: -4px -5px 8px #292828 inset;
-moz-box-shadow: -4px -5px 8px #292828 inset;
-webkit-box-shadow: -4px -5px 8px #292828 inset;
-o-box-shadow: -4px -5px 8px #292828 inset;
-ms-box-shadow: -4px -5px 8px #292828 inset;
height: 135px;
left: 39px;
position: absolute;
top: 220px;
width: 39px;
}
.plant_5:after{
transform: skew(14deg) skewX(-29deg) rotate(-11deg);
-moz-transform: skew(14deg) skewX(-29deg) rotate(-11deg);
-webkit-transform: skew(14deg) skewX(-29deg) rotate(-11deg);
-o-transform: skew(14deg) skewX(-29deg) rotate(-11deg);
-ms-transform: skew(14deg) skewX(-29deg) rotate(-11deg);
border: 1px solid #252424;
box-shadow: 0 10px 11px #292828;
-moz-box-shadow: 0 10px 11px #292828;
-webkit-box-shadow: 0 10px 11px #292828;
-o-box-shadow: 0 10px 11px #292828;
-ms-box-shadow: 0 10px 11px #292828;
content: "";
height: 112px;
left: 14px;
position: absolute;
top: 19px;
width: 2px;
}
/**/
/*start of long plant*/
.long_plant2{
transform: rotate(13deg);
-moz-transform: rotate(13deg);
-webkit-transform: rotate(13deg);
-o-transform: rotate(13deg);
-ms-transform: rotate(13deg);
height: 298px;
left: 468px;
margin: auto;
position: absolute;
top: 41px;
width: 100px;
z-index: 98;
}
.long_plant{
transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-webkit-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
-ms-transform: rotate(-13deg);
height: 298px;
left: 400px;
margin: auto;
position: absolute;
top: 56px;
width: 100px;
z-index: 25;
}

.l_plant_1{
border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
-webkit-border-radius: 40px 40px 40px 40px;
-o-border-radius: 40px 40px 40px 40px;
-ms-border-radius: 40px 40px 40px 40px;
border-right: 12px groove green;
height: 90px;
position: absolute;
top: -1px;
width: 62px;
}
.l_plant_1:after{
transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
-moz-transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
-webkit-transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
-o-transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
-ms-transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
background-color: #1E4E1D;
border-radius: 40px 40px 8px 80px;
-moz-border-radius: 40px 40px 8px 80px;
-webkit-border-radius: 40px 40px 8px 80px;
-o-border-radius: 40px 40px 8px 80px;
-ms-border-radius: 40px 40px 8px 80px;

box-shadow:5px 3px 5px #1A2C1D inset;
-moz-box-shadow:5px 3px 5px #1A2C1D inset;
-webkit-box-shadow:5px 3px 5px #1A2C1D inset;
-o-box-shadow:5px 3px 5px #1A2C1D inset;
-ms-box-shadow:5px 3px 5px #1A2C1D inset;
content: "";
height: 47px;
left: 25px;
position: absolute;
top: 31px;
width: 25px;
}
.l_plant_1:before{
transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
-moz-transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
-webkit-transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
-o-transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
-ms-transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
background-color: #7fbf7f;
border-radius: 40px 40px 80px 8px;
-moz-border-radius: 40px 40px 80px 8px;
-webkit-border-radius: 40px 40px 80px 8px;
-o-border-radius: 40px 40px 80px 8px;
-ms-border-radius: 40px 40px 80px 8px;

box-shadow:-9px 2px 7px #233A27 inset;
-moz-box-shadow:-9px 2px 7px #233A27 inset;
-webkit-box-shadow:-9px 2px 7px #233A27 inset;
-o-box-shadow:-9px 2px 7px #233A27 inset;
-ms-box-shadow:-9px 2px 7px #233A27 inset;
content: "";
height: 43px;
left: 83px;
position: absolute;
top: 8px;
width: 25px;
}
.l_plant_2{
border-left: 12px ridge green;
border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
-webkit-border-radius: 40px 40px 40px 40px;
-o-border-radius: 40px 40px 40px 40px;
-ms-border-radius: 40px 40px 40px 40px;
height: 111px;
left: 24px;
position: absolute;
top: 83px;
width: 70px;
}

.l_plant_2:after{
transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
-moz-transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
-webkit-transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
-o-transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
-ms-transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
background-color:#7FBF7F;
border-radius: 40px 40px 8px 80px;
-moz-border-radius: 40px 40px 8px 80px;
-webkit-border-radius: 40px 40px 8px 80px;
-o-border-radius: 40px 40px 8px 80px;
-ms-border-radius: 40px 40px 8px 80px;

box-shadow: 5px 3px 7px #233A27 inset;
-moz-box-shadow: 5px 3px 7px #233A27 inset;
-webkit-box-shadow: 5px 3px 7px #233A27 inset;
-o-box-shadow: 5px 3px 7px #233A27 inset;
-ms-box-shadow: 5px 3px 7px #233A27 inset;
content: "";
height: 50px;
left: -46px;
position: absolute;
top: 19px;
width: 25px;
}
.l_plant_2:before{
transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
-moz-transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
-webkit-transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
-o-transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
-ms-transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
background-color: #1E4E1D;
border-radius: 40px 40px 80px 8px;
-moz-border-radius: 40px 40px 80px 8px;
-webkit-border-radius: 40px 40px 80px 8px;
-o-border-radius: 40px 40px 80px 8px;
-ms-border-radius: 40px 40px 80px 8px;

box-shadow:-11px 6px 11px #103016 inset;
-moz-box-shadow:-11px 6px 11px #103016 inset;
-webkit-box-shadow:-11px 6px 11px #103016 inset;
-o-box-shadow:-11px 6px 11px #103016 inset;
-ms-box-shadow:-11px 6px 11px #103016 inset;
content: "";
height: 58px;
left: 14px;
position: absolute;
top: 32px;
width: 26px;
}
.l_plant_3{
border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
-webkit-border-radius: 40px 40px 40px 40px;
-o-border-radius: 40px 40px 40px 40px;
-ms-border-radius: 40px 40px 40px 40px;
border-right: 12px groove green;
height: 111px;
position: absolute;
top: 187px;
width: 62px;
}

.l_plant_3:after{
transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
-moz-transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
-webkit-transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
-o-transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
-ms-transform: rotate(-32deg) skewX(-9deg) skewY(32deg);
background-color: #1E4E1D;
border-radius: 40px 40px 8px 80px;
-moz-border-radius: 40px 40px 8px 80px;
-webkit-border-radius: 40px 40px 8px 80px;
-o-border-radius: 40px 40px 8px 80px;
-ms-border-radius: 40px 40px 8px 80px;

box-shadow: 4px 2px 5px #1A2C1D inset;
-moz-box-shadow: 4px 2px 5px #1A2C1D inset;
-webkit-box-shadow: 4px 2px 5px #1A2C1D inset;
-o-box-shadow: 4px 2px 5px #1A2C1D inset;
-ms-box-shadow: 4px 2px 5px #1A2C1D inset;
content: "";
height: 47px;
left: 30px;
position: absolute;
top: 23px;
width: 25px;
}
.l_plant_3:before{
transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
-moz-transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
-webkit-transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
-o-transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
-ms-transform: rotate(16deg) skewX(-9deg) skewY(-32deg);
background-color: #7FBF7F;
border-radius: 130px 40px 165px 23px;
-moz-border-radius: 130px 40px 165px 23px;
-webkit-border-radius: 130px 40px 165px 23px;
-o-border-radius: 130px 40px 165px 23px;
-ms-border-radius: 130px 40px 165px 23px;

.bubble_wrap{
height: 299px;
left: 7px;
position: absolute;
top: 30px;
width: 200px;
}
.bubbles{
background-color: rgba(255, 255, 255, 0.16);
border: 1px solid #585858;
border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
-webkit-border-radius: 100px 100px 100px 100px;
-o-border-radius: 100px 100px 100px 100px;
-ms-border-radius: 100px 100px 100px 100px;
height: 20px;
left: 33px;
position: absolute;
top: 260px;
width: 20px;
}
.b2{
left: 50px;
top: 260px;
}
.b3{
left: 60px;
top: 260px;
}
.b4{
left: 80px;
top: 260px;
}
.b5{
left: 90px;
top: 260px;
}
/* ...............< fish >.................. */
/*fred the fish*/
.fish_wrap{
height: 230px;
left: 200px;
position: absolute;
top: 105px;
width: 290px;
z-index: 90;
}
.fred{
transform: rotate(-37deg);
-moz-transform: rotate(-37deg);
-webkit-transform: rotate(-37deg);
-o-transform: rotate(-37deg);
-ms-transform: rotate(-37deg);
}

.fish_body{
transform: skewX(30deg) skewY(5deg);
-moz-transform: skewX(30deg) skewY(5deg);
-webkit-transform: skewX(30deg) skewY(5deg);
-o-transform: skewX(30deg) skewY(5deg);
-ms-transform: skewX(30deg) skewY(5deg);
background-color: #FF9800;
border-radius: 200px 112px 47px 62px;
-moz-border-radius: 200px 112px 47px 62px;
-webkit-border-radius: 200px 112px 47px 62px;
-o-border-radius: 200px 112px 47px 62px;
-ms-border-radius: 200px 112px 47px 62px;

box-shadow: 6px -12px 15px #3A2104 inset, -2px -3px 4px #281602 inset;
-moz-box-shadow: 6px -12px 15px #3A2104 inset, -2px -3px 4px #281602 inset;
-webkit-box-shadow: 6px -12px 15px #3A2104 inset, -2px -3px 4px #281602 inset;
-o-box-shadow: 6px -12px 15px #3A2104 inset, -2px -3px 4px #281602 inset;
-ms-box-shadow: 6px -12px 15px #3A2104 inset, -2px -3px 4px #281602 inset;
height: 72px;
position: absolute;
top: 60px;
width: 92px;
}
.eye{
transform: rotate(50deg);
-moz-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
-o-transform: rotate(50deg);
-ms-transform: rotate(50deg);
background-color: #FCFCFC;
border: 1px solid #323232;
border-radius: 60px 60px 60px 60px;
-moz-border-radius: 60px 60px 60px 60px;
-webkit-border-radius: 60px 60px 60px 60px;
-o-border-radius: 60px 60px 60px 60px;
-ms-border-radius: 60px 60px 60px 60px;

box-shadow: 2px 4px 3px #3D270A;
-moz-box-shadow: 2px 4px 3px #3D270A;
-webkit-box-shadow: 2px 4px 3px #3D270A;
-o-box-shadow: 2px 4px 3px #3D270A;
-ms-box-shadow: 2px 4px 3px #3D270A;
height: 27px;
left: 40px;
position: absolute;
top: -1px;
width: 10px;
}
	.eye:before{/*fish eye pupil*/
	border: 2px solid #070707;
	border-radius: 60px 60px 60px 60px;
	-moz-border-radius: 60px 60px 60px 60px;
	-webkit-border-radius: 60px 60px 60px 60px;
	-o-border-radius: 60px 60px 60px 60px;
	-ms-border-radius: 60px 60px 60px 60px;
	content: "";
	height: 7px;
	left: 1px;
	position: absolute;
	top: 11px;
	width: 2px;
	}
.scale_1{
transform: rotate(35deg);
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-o-transform: rotate(35deg);
-ms-transform: rotate(35deg);

border-radius: 60px 60px 60px 60px;
-moz-border-radius: 60px 60px 60px 60px;
-webkit-border-radius: 60px 60px 60px 60px;
-o-border-radius: 60px 60px 60px 60px;
-ms-border-radius: 60px 60px 60px 60px;
border-right: 2px solid #432801;
height: 28px;
left: 38px;
position: absolute;
top: 8px;
width: 36px;
}
.scale_2{
transform: rotate(35deg);
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-o-transform: rotate(35deg);
-ms-transform: rotate(35deg);

border-radius: 60px 60px 60px 60px;
-moz-border-radius: 60px 60px 60px 60px;
-webkit-border-radius: 60px 60px 60px 60px;
-o-border-radius: 60px 60px 60px 60px;
-ms-border-radius: 60px 60px 60px 60px;
border-right: 2px solid #432801;
height: 28px;
left: 30px;
position: absolute;
top: 27px;
width: 36px;
}
.scale_3{
transform: rotate(35deg);
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-o-transform: rotate(35deg);
-ms-transform: rotate(35deg);

border-radius: 60px 60px 60px 60px;
-moz-border-radius: 60px 60px 60px 60px;
-webkit-border-radius: 60px 60px 60px 60px;
-o-border-radius: 60px 60px 60px 60px;
-ms-border-radius: 60px 60px 60px 60px;
border-right: 2px solid #432801;
height: 28px;
left: 47px;
position: absolute;
top: 19px;
width: 36px;
}
.scale_4{
transform: rotate(35deg);
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-o-transform: rotate(35deg);
-ms-transform: rotate(35deg);

border-radius: 60px 60px 60px 60px;
-moz-border-radius: 60px 60px 60px 60px;
-webkit-border-radius: 60px 60px 60px 60px;
-o-border-radius: 60px 60px 60px 60px;
-ms-border-radius: 60px 60px 60px 60px;
border-right: 2px solid #432801;
box-shadow:-5px -1px 4px black inset;
-moz-box-shadow:-5px -1px 4px black inset;
-webkit-box-shadow:-5px -1px 4px black inset;
-o-box-shadow:-5px -1px 4px black inset;
-ms-box-shadow:-5px -1px 4px black inset;
height: 32px;
left: 33px;
position: absolute;
top: 29px;
width: 19px;
}
.top_fin{
transform: skewX(30deg) skewY(8deg);
-moz-transform: skewX(30deg) skewY(8deg);
-webkit-transform: skewX(30deg) skewY(8deg);
-o-transform: skewX(30deg) skewY(8deg);
-ms-transform: skewX(30deg) skewY(8deg);
background-color: #E88B00;
border-radius: 200px 112px 47px 62px;
-moz-border-radius: 200px 112px 47px 62px;
-webkit-border-radius: 200px 112px 47px 62px;
-o-border-radius: 200px 112px 47px 62px;
-ms-border-radius: 200px 112px 47px 62px;

box-shadow: -7px -8px 9px black inset;
-moz-box-shadow: -7px -8px 9px black inset;
-webkit-box-shadow: -7px -8px 9px black inset;
-o-box-shadow: -7px -8px 9px black inset;
-ms-box-shadow: -7px -8px 9px black inset;
height: 20px;
left: 54px;
position: absolute;
top: 67px;
width: 42px;

}
.tail_fin{
transform: skewX(30deg) skewY(5deg);
-moz-transform: skewX(30deg) skewY(5deg);
-webkit-transform: skewX(30deg) skewY(5deg);
-o-transform: skewX(30deg) skewY(5deg);
-ms-transform: skewX(30deg) skewY(5deg);
background-color: #E88B00;
border-radius: 200px 112px 47px 62px;
-moz-border-radius: 200px 112px 47px 62px;
-webkit-border-radius: 200px 112px 47px 62px;
-o-border-radius: 200px 112px 47px 62px;
-ms-border-radius: 200px 112px 47px 62px;

box-shadow:-15px -7px 9px #060200 inset;
-moz-box-shadow:-15px -7px 9px #060200 inset;
-webkit-box-shadow:-15px -7px 9px #060200 inset;
-o-box-shadow:-15px -7px 9px #060200 inset;
-ms-box-shadow:-15px -7px 9px #060200 inset;
height: 32px;
left: 100px;
position: absolute;
top: 106px;
width: 42px;
}
.tail_fin:before{
transform: skewX(30deg) skewY(5deg);
-moz-transform: skewX(30deg) skewY(5deg);
-webkit-transform: skewX(30deg) skewY(5deg);
-o-transform: skewX(30deg) skewY(5deg);
-ms-transform: skewX(30deg) skewY(5deg);
background-color: #E88B00;
border-radius: 62px 112px 112px 200px;
-moz-border-radius: 62px 112px 112px 200px;
-webkit-border-radius: 62px 112px 112px 200px;
-o-border-radius: 62px 112px 112px 200px;
-ms-border-radius: 62px 112px 112px 200px;

box-shadow: 6px 13px 9px #2F1E01 inset, -6px -7px 2px black inset;
-moz-box-shadow: 6px 13px 9px #2F1E01 inset, -6px -7px 2px black inset;
-webkit-box-shadow: 6px 13px 9px #2F1E01 inset, -6px -7px 2px black inset;
-o-box-shadow: 6px 13px 9px #2F1E01 inset, -6px -7px 2px black inset;
-ms-box-shadow: 6px 13px 9px #2F1E01 inset, -6px -7px 2px black inset;
content: "";
height: 32px;
left: -12px;
position: absolute;
top: 28px;
width: 38px;
}
/* end of fred */
/* start of fish animation */
.fish_wrap{
    left: 200px;
    top: 105px;
    z-index: 100;
	animation-name:swim;
	animation-duration:30s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	/*firefox*/
	-moz-animation-name:swim;
	-moz-animation-duration:30s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	/*webkit*/
	-webkit-animation-name:swim;
	-webkit-animation-duration:30s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
	
}
@keyframes swim{
	from{
	left:200px;
	}
	20%{
	left:0px;
	transform:scaleX(1);
	z-index:90;
	}
	20.5%{
	transform:scaleX(-1);
	z-index:10;
	left:-30px;
	}
	21%{
	left:80px;
	}
	42%{
	left:550px;
	}
	50%{
	z-index:28;
	top:130px;
	left:630px;
	transform:scaleX(-1);
	}
	50.5%{
	transform:scaleX(1);
	z-index:100;
	left:630px;
	top:160px;
	}
	51%{
	left:530px;
	z-index:150;
	}
	60%{
	left:300px;
	z-index:150;
	}
	64%{
	left:200px;
	z-index:150;
	}
	66%{
	left:80px;
	z-index:150;
	}
	69%{
	left:-30px;
	z-index:150;
	}
	70%{
	top:105px;
	left:-30px;
	transform:scaleX(1);
	z-index:90;
	}
	70.5%{
	transform:scaleX(-1);
	z-index:10;
	left:-30px;
	}
	71%{
	left:40px;
	}
	80%{
	left:550px;
	}
	81%{
	left:550px;
	top:70px;
	}
	82%{
	left:550px;
	transform:scaleX(-1);
	}
	82.5%{
	transform:scaleX(1);
	top:70px;
	left:550px;
	}
	84%{
	top:105px;
	left:500px;
	z-index:28;
	}
	88%{
	top:105px;
	left:400px;
	z-index:28;
	}
	to{
	left:200px;
	}
}
@-moz-keyframes swim{
	from{
	left:200px;
	}
	20%{
	left:0px;
	-moz-transform:scaleX(1);
	z-index:90;
	}
	20.5%{
	-moz-transform:scaleX(-1);
	z-index:10;
	left:-30px;
	}
	21%{
	left:80px;
	}
	42%{
	left:550px;
	}
	50%{
	z-index:28;
	top:130px;
	left:630px;
	-moz-transform:scaleX(-1);
	}
	50.5%{
	-moz-transform:scaleX(1);
	z-index:100;
	left:630px;
	top:160px;
	}
	51%{
	left:530px;
	z-index:150;
	}
	60%{
	left:300px;
	z-index:150;
	}
	64%{
	left:200px;
	z-index:150;
	}
	66%{
	left:80px;
	z-index:150;
	}
	69%{
	left:-30px;
	z-index:150;
	}
	70%{
	top:105px;
	left:-30px;
	-moz-transform:scaleX(1);
	z-index:90;
	}
	70.5%{
	-moz-transform:scaleX(-1);
	z-index:10;
	left:-30px;
	}
	71%{
	left:40px;
	}
	80%{
	left:550px;
	}
	81%{
	left:550px;
	top:70px;
	}
	82%{
	left:550px;
	-moz-transform:scaleX(-1);
	}
	82.5%{
	-moz-transform:scaleX(1);
	top:70px;
	left:550px;
	}
	84%{
	top:105px;
	left:500px;
	z-index:28;
	}
	88%{
	top:105px;
	left:400px;
	z-index:28;
	}
	to{
	left:200px;
	}
}
@-webkit-keyframes swim{
	from{
	left:200px;
	}
	20%{
	left:0px;
	-webkit-transform:scaleX(1);
	z-index:90;
	}
	20.5%{
	-webkit-transform:scaleX(-1);
	z-index:10;
	left:-30px;
	}
	21%{
	left:80px;
	}
	42%{
	left:550px;
	}
	50%{
	z-index:28;
	top:130px;
	left:630px;
	-webkit-transform:scaleX(-1);
	}
	50.5%{
	-webkit-transform:scaleX(1);
	z-index:100;
	left:630px;
	top:160px;
	}
	51%{
	left:530px;
	z-index:150;
	}
	60%{
	left:300px;
	z-index:150;
	}
	64%{
	left:200px;
	z-index:150;
	}
	66%{
	left:80px;
	z-index:150;
	}
	69%{
	left:-30px;
	z-index:150;
	}
	70%{
	top:105px;
	left:-30px;
	-webkit-transform:scaleX(1);
	z-index:90;
	}
	70.5%{
	-webkit-transform:scaleX(-1);
	z-index:10;
	left:-30px;
	}
	71%{
	left:40px;
	}
	80%{
	left:550px;
	}
	81%{
	left:550px;
	top:70px;
	}
	82%{
	left:550px;
	-webkit-transform:scaleX(-1);
	}
	82.5%{
	-webkit-transform:scaleX(1);
	top:70px;
	left:550px;
	}
	84%{
	top:105px;
	left:500px;
	z-index:28;
	}
	88%{
	top:105px;
	left:400px;
	z-index:28;
	}
	to{
	left:200px;
	}
}
/*end of fish path */
.tail_fin{
	animation-name:tail;
    animation-duration: 0.9s;
	animation-iteration-count:infinite;
	animation-timing-function: ease-in;
	/*firefox*/
	-moz-animation-name:tail;
    -moz-animation-duration: 0.9s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: ease-in;
	/*webkit*/
	-webkit-animation-name:tail;
    -webkit-animation-duration: 0.9s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: ease-in;
}
@keyframes tail{
	from{
	transform:scale(.8)skewY(2deg);
	}
	50%{
	transform:scale(.7)skewY(20deg);
	}
	to{
	transform:scale(.8)skewY(2deg);
	}
}
@-moz-keyframes tail{
	from{
	-moz-transform:scale(.8)skewY(2deg);
	}
	50%{
	-moz-transform:scale(.7)skewY(20deg);
	}
	to{
	-moz-transform:scale(.8)skewY(2deg);
	}
}
@-webkit-keyframes tail{
	from{
	-webkit-transform:scale(.8)skewY(2deg);
	}
	50%{
	-webkit-transform:scale(.7)skewY(20deg);
	}
	to{
	-webkit-transform:scale(.8)skewY(2deg);
	}
}
/*end of tail fin*/
.scale_4{/*mid fin*/
	animation-name:midfin;
	animation-duration:2s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:midfin;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:midfin;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes midfin{
	from{
	transform:scale(.8)rotate(15deg);
	}
	50%{
	transform:scale(.6)skewY(30deg)rotate(15deg);
	}
	80%{
	transform:scale(.8)skewY(10deg)rotate(25deg);
	}
	to{
	transform:scale(.8)skewY(10deg)rotate(15deg);
	}
}
@-moz-keyframes midfin{
	from{
	-moz-transform:scale(.8)rotate(15deg);
	}
	50%{
	-moz-transform:scale(.6)skewY(30deg)rotate(15deg);
	}
	80%{
	-moz-transform:scale(.8)skewY(10deg)rotate(25deg);
	}
	to{
	-moz-transform:scale(.8)skewY(10deg)rotate(15deg);
	}
}
@-webkit-keyframes midfin{
	from{
	-webkit-transform:scale(.8)rotate(15deg);
	}
	50%{
	-webkit-transform:scale(.6)skewY(30deg)rotate(15deg);
	}
	80%{
	-webkit-transform:scale(.8)skewY(10deg)rotate(25deg);
	}
	to{
	-webkit-transform:scale(.8)skewY(10deg)rotate(15deg);
	}
}
/*end of mid fin*/
.eye{/*blink effect*/

animation-name:blink;
	animation-duration:5.7s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;

-moz-animation-name:blink;
	-moz-animation-duration:5.7s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;

-webkit-animation-name:blink;
	-webkit-animation-duration:5.7s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes blink{
	from{
	background-color:white;
	}
	49%{
	background-color:white;
	height: 27px;
	width: 10px;
	}
	50%{
	background-color:#070707;
	height: 20px;
	width: 5px;
	}
	52%{
	background-color:white;
	height: 27px;
	width: 10px;
	}
	to{
	background-color:white;
	}
}
@-moz-keyframes blink{
	from{
	background-color:white;
	}
	49%{
	background-color:white;
	height: 27px;
	width: 10px;
	}
	50%{
	background-color:#070707;
	height: 20px;
	width: 5px;
	}
	52%{
	background-color:white;
	height: 27px;
	width: 10px;
	}
	to{
	background-color:white;
	}
}
@-webkit-keyframes blink{
	from{
	background-color:white;
	}
	49%{
	background-color:white;
	height: 27px;
	width: 10px;
	}
	50%{
	background-color:#070707;
	height: 20px;
	width: 5px;
	}
	52%{
	background-color:white;
	height: 27px;
	width: 10px;
	}
	to{
	background-color:white;
	}
}
/*end of fish animations*/
/*start of plant animations*/

.long_plant2{
left:450px;
	transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	-webkit-transform-origin: center bottom;
	
	animation-name:l_plant2;
	animation-duration:16s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:l_plant2;
	-moz-animation-duration:16s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:l_plant2;
	-webkit-animation-duration:16s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes l_plant2{
	from{
	transform:rotate(13deg);
	}
	50%{
	transform:rotate(-4deg);
	}
	to{
	transform:rotate(13deg);
	}
}
@-moz-keyframes l_plant2{
	from{
	-moz-transform:rotate(13deg);
	}
	50%{
	-moz-transform:rotate(-4deg);
	}
	to{
	-moz-transform:rotate(13deg);
	}
}
@-webkit-keyframes l_plant2{
	from{
	-webkit-transform:rotate(13deg);
	}
	50%{
	-webkit-transform:rotate(-4deg);
	}
	to{
	-webkit-transform:rotate(13deg);
	}
}
.long_plant{
	transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	-webkit-transform-origin: center bottom;
	
	animation-name:l_plant;
	animation-duration:15s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-transform-origin: center bottom;
	-moz-animation-name:l_plant;
	-moz-animation-duration:15s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-transform-origin: center bottom;
	-webkit-animation-name:l_plant;
	-webkit-animation-duration:15s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes l_plant{
	from{
	transform:rotate(-13deg);
	}
	50%{
	transform:rotate(-5deg);
	}
	to{
	transform:rotate(-13deg);
	}
}
@-moz-keyframes l_plant{
	from{
	-moz-transform:rotate(-13deg);
	}
	50%{
	-moz-transform:rotate(-5deg);
	}
	to{
	-moz-transform:rotate(-13deg);
	}
}
@-webkit-keyframes l_plant{
	from{
	-webkit-transform:rotate(-13deg);
	}
	50%{
	-webkit-transform:rotate(-5deg);
	}
	to{
	-webkit-transform:rotate(-13deg);
	}
}
.plant_2{
	transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	-webkit-transform-origin: center bottom;
	
	animation-name:plant2;
	animation-duration:15s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:plant2;
	-moz-animation-duration:15s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:plant2;
	-webkit-animation-duration:15s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes plant2{
	from{
	transform:rotate(-7deg);
	}
	50%{
	transform:rotate(13deg);
	}
	to{
	transform:rotate(-7deg);
	}
}
@-moz-keyframes plant2{
	from{
	-moz-transform:rotate(-7deg);
	}
	50%{
	-moz-transform:rotate(13deg);
	}
	to{
	-moz-transform:rotate(-7deg);
	}
}
@-webkit-keyframes plant2{
	from{
	-webkit-transform:rotate(-7deg);
	}
	50%{
	-webkit-transform:rotate(13deg);
	}
	to{
	-webkit-transform:rotate(-7deg);
	}
}
.plant_3{
	transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	-webkit-transform-origin: center bottom;
	
	animation-name:plant3;
	animation-duration:16s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:plant3;
	-moz-animation-duration:16s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:plant3;
	-webkit-animation-duration:16s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes plant3{
	from{
	transform:rotate(-5deg);
	}
	50%{
	transform:rotate(12deg);
	}
	to{
	transform:rotate(-5deg);
	}
}
@-moz-keyframes plant3{
	from{
	-moz-transform:rotate(-5deg);
	}
	50%{
	-moz-transform:rotate(12deg);
	}
	to{
	-moz-transform:rotate(-5deg);
	}
}
@-webkit-keyframes plant3{
	from{
	-webkit-transform:rotate(-5deg);
	}
	50%{
	-webkit-transform:rotate(12deg);
	}
	to{
	-webkit-transform:rotate(-5deg);
	}
}
.plant_4{

left:-6px;
top:190px;
	transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	-webkit-transform-origin: center bottom;
	
	animation-name:plant4;
	animation-duration:14.98s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:plant4;
	-moz-animation-duration:14.98s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:plant4;
	-webkit-animation-duration:14.98s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes plant4{
	from{
	transform:rotate(-10deg);
	}
	45%{
	transform:rotate(-16deg);
	}
	50%{
	transform:rotate(-2deg);
	}
	to{
	transform:rotate(-10deg);
	}
}
@-moz-keyframes plant4{
	from{
	-moz-transform:rotate(-10deg);
	}
	45%{
	-moz-transform:rotate(-16deg);
	}
	50%{
	-moz-transform:rotate(-2deg);
	}
	to{
	-moz-transform:rotate(-10deg);
	}
}
@-webkit-keyframes plant4{
	from{
	-webkit-transform:rotate(-10deg);
	}
	45%{
	-webkit-transform:rotate(-16deg);
	}
	50%{
	-webkit-transform:rotate(-2deg);
	}
	to{
	-webkit-transform:rotate(-10deg);
	}
}
.plant_5{
left:40px;
top:200px;
	transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	-webkit-transform-origin: center bottom;
	
	animation-name:plant5;
	animation-duration:14.98s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:plant5;
	-moz-animation-duration:14.98s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:plant5;
	-webkit-animation-duration:14.98s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes plant5{
	from{
	transform:rotate(5deg);
	}
	45%{
	transform:rotate(8deg);
	}
	50%{
	transform:rotate(20deg);
	}
	to{
	transform:rotate(5deg);
	}
}
@-moz-keyframes plant5{
	from{
	-moz-transform:rotate(5deg);
	}
	45%{
	-moz-transform:rotate(8deg);
	}
	50%{
	-moz-transform:rotate(20deg);
	}
	to{
	-moz-transform:rotate(5deg);
	}
}
@-webkit-keyframes plant5{
	from{
	-webkit-transform:rotate(5deg);
	}
	45%{
	-webkit-transform:rotate(8deg);
	}
	50%{
	-webkit-transform:rotate(20deg);
	}
	to{
	-webkit-transform:rotate(5deg);
	}
}
/*end of plant animations*/
/*start of bubble animations*/
.b0{
	animation-name:bubbles;
	animation-delay:2s;
	animation-duration:4s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:bubbles;
	-moz-animation-delay:2s;
	-moz-animation-duration:4s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:bubbles;
	-webkit-animation-delay:2s;
	-webkit-animation-duration:4s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes bubbles{
	from{
	top:260px;
	left:33px;
	}
	50%{
	left:39px;
	}
	to{
	top:0px;
	left:33px;
	}
}
@-moz-keyframes bubbles{
	from{
	top:260px;
	left:33px;
	}
	50%{
	left:39px;
	}
	to{
	top:0px;
	left:33px;
	}
}
@-webkit-keyframes bubbles{
	from{
	top:260px;
	left:33px;
	}
	50%{
	left:39px;
	}
	to{
	top:0px;
	left:33px;
	}
}
.b1{
	animation-name:bubbles;
	animation-duration:7s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:bubbles;
	-moz-animation-duration:7s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:bubbles;
	-webkit-animation-duration:7s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes bubbles{
	from{
	top:260px;
	}
	to{
	top:0px;
	}
}
@-moz-keyframes bubbles{
	from{
	top:260px;
	}
	to{
	top:0px;
	}
}
@-webkit-keyframes bubbles{
	from{
	top:260px;
	}
	to{
	top:0px;
	}
}
.b2{
	animation-name:bubbles;
	animation-delay:1s;
	animation-duration:4s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:bubbles;
	-moz-animation-delay:1s;
	-moz-animation-duration:4s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:bubbles;
	-webkit-animation-delay:1s;
	-webkit-animation-duration:4s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes bubbles{
	from{
	top:260px;
	}
	to{
	top:0px;
	}
}
@-moz-keyframes bubbles{
	from{
	top:260px;
	}
	to{
	top:0px;
	}
}
@-webkit-keyframes bubbles{
	from{
	top:260px;
	}
	to{
	top:0px;
	}
}
.b3{
	animation-name:bubbles;
	animation-delay:500s;
	animation-duration:3s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:bubbles;
	-moz-animation-delay:500s;
	-moz-animation-duration:3s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:bubbles;
	-webkit-animation-delay:500s;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes bubbles{
	from{
	top:260px;
	left:60px;
	}
	25%{
	left:30px;
	}
	50%{
	left:58px;
	}
	75%{
	left:37px;
	}
	to{
	top:0px;
	left:60px;
	}
}
@-moz-keyframes bubbles{
	from{
	top:260px;
	left:60px;
	}
	25%{
	left:30px;
	}
	50%{
	left:58px;
	}
	75%{
	left:37px;
	}
	to{
	top:0px;
	left:60px;
	}
}
@-webkit-keyframes bubbles{
	from{
	top:260px;
	left:60px;
	}
	25%{
	left:30px;
	}
	50%{
	left:58px;
	}
	75%{
	left:37px;
	}
	to{
	top:0px;
	left:60px;
	}
}
.b4{
	animation-name:bubbles;
	animation-duration:6s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:bubbles;
	-moz-animation-duration:6s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:bubbles;
	-webkit-animation-duration:6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes bubbles{
	from{
	top:260px;
	}
	to{
	top:0px;
	}
}
@-moz-keyframes bubbles{
	from{
	top:260px;
	}
	to{
	top:0px;
	}
}
@-webkit-keyframes bubbles{
	from{
	top:260px;
	}
	to{
	top:0px;
	}
}
.b5{
	animation-name:bubbles;
	animation-duration:5s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:bubbles;
	-moz-animation-duration:5s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:bubbles;
	-webkit-animation-duration:5s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes bubbles{
	from{
	top:260px;
	}
	to{
	top:0px;
	}
}
@-moz-keyframes bubbles{
	from{
	top:260px;
	}
	to{
	top:0px;
	}
}
@-webkit-keyframes bubbles{
	from{
	top:260px;
	}
	to{
	top:0px;
	}
}
/*tail bubbles*/
.b6,.b7,.b8{
opacity:0;
}
.b6,.b8{
transform:scale(0.5);
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
-ms-transform:scale(0.5);
-o-transform:scale(0.5);
}
.b7{
transform:scale(0.8);
-moz-transform:scale(0.8);
-webkit-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
}
.bw2{
width:80px;
	animation-name:tail_bubbles;
	animation-duration:30s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:tail_bubbles;
	-moz-animation-duration:30s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:tail_bubbles;
	-webkit-animation-duration:30s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes tail_bubbles{
	from{
	left:30px;
	}
	48%{
	left:30px;
	}
	50.5%{
	left:760px;
	}
	65%{
	left:760px;
	}
	70.5%{
	left:30px;
	}
	78%{
	left:30px;
	}
	82.5%{
	left:720px;
	}
	92%{
	left:720px;
	}
	to{
	left:30px;
	}
}
@-moz-keyframes tail_bubbles{
	from{
	left:30px;
	}
	48%{
	left:30px;
	}
	50.5%{
	left:760px;
	}
	65%{
	left:760px;
	}
	70.5%{
	left:30px;
	}
	78%{
	left:30px;
	}
	82.5%{
	left:720px;
	}
	92%{
	left:720px;
	}
	to{
	left:30px;
	}
}
@-webkit-keyframes tail_bubbles{
	from{
	left:30px;
	}
	48%{
	left:30px;
	}
	50.5%{
	left:760px;
	}
	65%{
	left:760px;
	}
	70.5%{
	left:30px;
	}
	78%{
	left:30px;
	}
	82.5%{
	left:720px;
	}
	92%{
	left:720px;
	}
	to{
	left:30px;
	}
}
.b6{

animation-name:tail_bubble1;
	animation-duration:30s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;

-moz-animation-name:tail_bubble1;
	-moz-animation-duration:30s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;

-webkit-animation-name:tail_bubble1;
	-webkit-animation-duration:30s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes tail_bubble1{
	from{
	left:30px;
	top:205px;
	}
	20.5%{
	opacity:0;
	}
	21%{
	left:30px;
	top:205px;
	opacity:1;
	}
	26%{
	opacity:1;
	left:60px;
	top:105px;
	}
	26.3%{
	opacity:0;
	}
	40%{
	left:60px;
	top:205px;
	}
	50%{
	opacity:0;
	}
	50.5%{
	opacity:1;
	left:60px;
	top:205px;
	}
	54.3%{
	opacity:0;
	}
	55%{
	left:60px;
	top:105px;
	}
	65%{
	left:60px;
	}
	70%{
	opacity:0;
	}
	70.5%{
	opacity:1;
	left:30px;
	top:210px;
	}
	73.3%{
	opacity:0;
	}
	73%{
	left:30px;
	top:105px;
	}
	78%{
	left:30px;
	}
	82.3%{
	opacity:0;
	}
	82.5%{
	opacity:1;
	left:20px;
	top:150px;
	}
	86.3%{
	opacity:0;
	}
	87%{
	left:20px;
	top:30px;
	}
	92%{
	left:20px;
	}
	to{
	left:30px;
	}
}
@-moz-keyframes tail_bubble1{
	from{
	left:30px;
	top:205px;
	}
	20.5%{
	opacity:0;
	}
	21%{
	left:30px;
	top:205px;
	opacity:1;
	}
	26%{
	opacity:1;
	left:60px;
	top:105px;
	}
	26.3%{
	opacity:0;
	}
	40%{
	left:60px;
	top:205px;
	}
	50%{
	opacity:0;
	}
	50.5%{
	opacity:1;
	left:60px;
	top:205px;
	}
	54.3%{
	opacity:0;
	}
	55%{
	left:60px;
	top:105px;
	}
	65%{
	left:60px;
	}
	70%{
	opacity:0;
	}
	70.5%{
	opacity:1;
	left:30px;
	top:210px;
	}
	73.3%{
	opacity:0;
	}
	73%{
	left:30px;
	top:105px;
	}
	78%{
	left:30px;
	}
	82.3%{
	opacity:0;
	}
	82.5%{
	opacity:1;
	left:20px;
	top:150px;
	}
	86.3%{
	opacity:0;
	}
	87%{
	left:20px;
	top:30px;
	}
	92%{
	left:20px;
	}
	to{
	left:30px;
	}
}
@-webkit-keyframes tail_bubble1{
	from{
	left:30px;
	top:205px;
	}
	20.5%{
	opacity:0;
	}
	21%{
	left:30px;
	top:205px;
	opacity:1;
	}
	26%{
	opacity:1;
	left:60px;
	top:105px;
	}
	26.3%{
	opacity:0;
	}
	40%{
	left:60px;
	top:205px;
	}
	50%{
	opacity:0;
	}
	50.5%{
	opacity:1;
	left:60px;
	top:205px;
	}
	54.3%{
	opacity:0;
	}
	55%{
	left:60px;
	top:105px;
	}
	65%{
	left:60px;
	}
	70%{
	opacity:0;
	}
	70.5%{
	opacity:1;
	left:30px;
	top:210px;
	}
	73.3%{
	opacity:0;
	}
	73%{
	left:30px;
	top:105px;
	}
	78%{
	left:30px;
	}
	82.3%{
	opacity:0;
	}
	82.5%{
	opacity:1;
	left:20px;
	top:150px;
	}
	86.3%{
	opacity:0;
	}
	87%{
	left:20px;
	top:30px;
	}
	92%{
	left:20px;
	}
	to{
	left:30px;
	}
}
.b7{
	animation-name:tail_bubble2;
	animation-duration:30s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:tail_bubble2;
	-moz-animation-duration:30s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:tail_bubble2;
	-webkit-animation-duration:30s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes tail_bubble2{
	from{
	left:30px;
	top:205px;
	}
	20.5%{
	opacity:0;
	}
	21%{/*turn one*/
	opacity:1;
	left:30px;
	top:205px;
	}
	25.5%{
	opacity:0;
	}
	26%{
	left:-30px;
	top:105px;
	}
	40%{
	left:30px;
	top:205px;
	}
	49.5%{
	opacity:0;
	}
	50%{
	opacity:1;
	left:30px;
	top:205px;
	}
	53%{
	left:70px;
	top:80px;
	}
	54.3%{
	opacity:0;
	}
	65%{
	left:30px;
	}
	69.5%{
	opacity:0;
	}
	70.5%{
	opacity:1;
	left:30px;
	top:210px;
	}
	73%{
	left:70px;
	top:55px;
	}
	73.5%{
	opacity:0;
	}
	78%{
	left:30px;
	}
	82%{
	opacity:0;
	}
	82.5%{
	opacity:1;
	left:50px;
	top:150px;
	}
	86.3%{
	opacity:0;
	}
	87%{
	left:-20px;
	top:30px;
	}
	92%{
	left:20px;
	}
	to{
	left:30px;
	}
}
@-moz-keyframes tail_bubble2{
	from{
	left:30px;
	top:205px;
	}
	20.5%{
	opacity:0;
	}
	21%{/*turn one*/
	opacity:1;
	left:30px;
	top:205px;
	}
	25.5%{
	opacity:0;
	}
	26%{
	left:-30px;
	top:105px;
	}
	40%{
	left:30px;
	top:205px;
	}
	49.5%{
	opacity:0;
	}
	50%{
	opacity:1;
	left:30px;
	top:205px;
	}
	53%{
	left:70px;
	top:80px;
	}
	54.3%{
	opacity:0;
	}
	65%{
	left:30px;
	}
	69.5%{
	opacity:0;
	}
	70.5%{
	opacity:1;
	left:30px;
	top:210px;
	}
	73%{
	left:70px;
	top:55px;
	}
	73.5%{
	opacity:0;
	}
	78%{
	left:30px;
	}
	82%{
	opacity:0;
	}
	82.5%{
	opacity:1;
	left:50px;
	top:150px;
	}
	86.3%{
	opacity:0;
	}
	87%{
	left:-20px;
	top:30px;
	}
	92%{
	left:20px;
	}
	to{
	left:30px;
	}
}
@-webkit-keyframes tail_bubble2{
	from{
	left:30px;
	top:205px;
	}
	20.5%{
	opacity:0;
	}
	21%{/*turn one*/
	opacity:1;
	left:30px;
	top:205px;
	}
	25.5%{
	opacity:0;
	}
	26%{
	left:-30px;
	top:105px;
	}
	40%{
	left:30px;
	top:205px;
	}
	49.5%{
	opacity:0;
	}
	50%{
	opacity:1;
	left:30px;
	top:205px;
	}
	53%{
	left:70px;
	top:80px;
	}
	54.3%{
	opacity:0;
	}
	65%{
	left:30px;
	}
	69.5%{
	opacity:0;
	}
	70.5%{
	opacity:1;
	left:30px;
	top:210px;
	}
	73%{
	left:70px;
	top:55px;
	}
	73.5%{
	opacity:0;
	}
	78%{
	left:30px;
	}
	82%{
	opacity:0;
	}
	82.5%{
	opacity:1;
	left:50px;
	top:150px;
	}
	86.3%{
	opacity:0;
	}
	87%{
	left:-20px;
	top:30px;
	}
	92%{
	left:20px;
	}
	to{
	left:30px;
	}
}
.b8{
	animation-name:tail_bubble3;
	animation-duration:30s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	
	-moz-animation-name:tail_bubble3;
	-moz-animation-duration:30s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name:tail_bubble3;
	-webkit-animation-duration:30s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}
@keyframes tail_bubble3{
	from{
	left:50px;
	top:205px;
	}
	20.5%{
	opacity:0;
	}
	21%{
	opacity:1;
	left:30px;
	top:205px;
	}
	25.5%{
	opacity:0;
	}
	26%{
	left:30px;
	top:105px;
	}
	40%{
	left:30px;
	top:205px;
	}
	49.5%{
	opacity:0;
	}
	50.5%{
	opacity:1;
	left:50px;
	top:205px;
	}
	53%{
	left:40px;
	top:80px;
	}
	54.3%{
	opacity:0;
	}
	65%{
	left:40px;
	}
	69.5%{
	opacity:0;
	}
	70.5%{
	opacity:1;
	left:40px;
	top:210px;
	}
	73%{
	left:-20px;
	top:55px;
	}
	73.5%{
	opacity:0;
	}
	78%{
	left:40px;
	}
	82%{
	opacity:0;
	}
	82.5%{
	opacity:1;
	left:20px;
	top:150px;
	}
	86.3%{
	opacity:0;
	}
	87%{
	left:60px;
	top:30px;
	}
	92%{
	left:30px;
	}
	to{
	left:30px;
	}
}
@-moz-keyframes tail_bubble3{
	from{
	left:50px;
	top:205px;
	}
	20.5%{
	opacity:0;
	}
	21%{
	opacity:1;
	left:30px;
	top:205px;
	}
	25.5%{
	opacity:0;
	}
	26%{
	left:30px;
	top:105px;
	}
	40%{
	left:30px;
	top:205px;
	}
	49.5%{
	opacity:0;
	}
	50.5%{
	opacity:1;
	left:50px;
	top:205px;
	}
	53%{
	left:40px;
	top:80px;
	}
	54.3%{
	opacity:0;
	}
	65%{
	left:40px;
	}
	69.5%{
	opacity:0;
	}
	70.5%{
	opacity:1;
	left:40px;
	top:210px;
	}
	73%{
	left:-20px;
	top:55px;
	}
	73.5%{
	opacity:0;
	}
	78%{
	left:40px;
	}
	82%{
	opacity:0;
	}
	82.5%{
	opacity:1;
	left:20px;
	top:150px;
	}
	86.3%{
	opacity:0;
	}
	87%{
	left:60px;
	top:30px;
	}
	92%{
	left:30px;
	}
	to{
	left:30px;
	}
}
@-webkit-keyframes tail_bubble3{
	from{
	left:50px;
	top:205px;
	}
	20.5%{
	opacity:0;
	}
	21%{
	opacity:1;
	left:30px;
	top:205px;
	}
	25.5%{
	opacity:0;
	}
	26%{
	left:30px;
	top:105px;
	}
	40%{
	left:30px;
	top:205px;
	}
	49.5%{
	opacity:0;
	}
	50.5%{
	opacity:1;
	left:50px;
	top:205px;
	}
	53%{
	left:40px;
	top:80px;
	}
	54.3%{
	opacity:0;
	}
	65%{
	left:40px;
	}
	69.5%{
	opacity:0;
	}
	70.5%{
	opacity:1;
	left:40px;
	top:210px;
	}
	73%{
	left:-20px;
	top:55px;
	}
	73.5%{
	opacity:0;
	}
	78%{
	left:40px;
	}
	82%{
	opacity:0;
	}
	82.5%{
	opacity:1;
	left:20px;
	top:150px;
	}
	86.3%{
	opacity:0;
	}
	87%{
	left:60px;
	top:30px;
	}
	92%{
	left:30px;
	}
	to{
	left:30px;
	}
}
/*end of bubble animations*/
/*table*/
.table{
background-color: #282320;
border-bottom: 22px double #433A32;
box-shadow: 0 11px 60px #060505 inset;
-moz-box-shadow: 0 11px 60px #060505 inset;
-webkit-box-shadow: 0 11px 60px #060505 inset;
-o-box-shadow: 0 11px 60px #060505 inset;
-ms-box-shadow: 0 11px 60px #060505 inset;
height: 140px;
margin-top: -180px;
z-index: 2;
}
/* ...< let pixels take over @ lpto.net - tayo wegner 2012 >... */

Pop out