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

Copyright (C) 2012  Tayo Wegner 
Let Pixels Take Over: www.lpto.net.    
Email: lpto.net@gmail.com

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/>.
*/
/* ...............< Pure CSS3 animated fish tank demo >..................  */

body{
	background: linear-gradient(to right, rgb(175, 212, 222) 0%, rgb(175, 202, 209) 41%, rgb(150, 176, 184) 100%);
    /* linear-gradient(to right, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%); */
	margin:0;
  padding:0;
  position: relative;
}
/* start of globals */
a{
	text-decoration:none;
	color:cornflowerblue;
}
/* h1{
	text-align:center;
	color: #717273;
} */
/* end of globals */

.clear{
	clear:both;
}

.fishtank_wrap{
	width:100%;
	/* height:200px; */
    height: 100vh;
	position:relative;
	overflow: hidden;
    z-index: 0;
    opacity: .5;
}
.water{
	/* background-color: rgba(100, 148, 237, 0.09); */
	height: 200px;
	position: absolute;
	top: 0;
	width: 100%;
	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:200px; */
    height: 100vh;
	width: 100%;
}

.bubble_wrap{
	height: 200px;
	left: 7px;
	position: absolute;
	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: 180px;
	width: 20px;
}
.b2{
	left: 50px;
	top: 180px;
}
.b3{
	left: 60px;
	top: 180px;
}
.b4{
	left: 80px;
	top: 180px;
}
.b5{
	left: 90px;
	top: 180px;
}
/* ...............< fish >.................. */
/*fred the fish*/
.fish_wrap{
	left: 200px;
	position: absolute;
	top: 0px;
	width: 290px;
	z-index: 90;
    opacity: .5;
}
.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: #c82255;
	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: 20px;
	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: #c82d5c;
	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: 27px;
	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: #c82d5c;
	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: 65px;
	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: #c82d5c;
	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: 0;
	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:960px;
	}
	50%{
		z-index:28;
		top:5px;
		left:100%;
		transform:scaleX(-1);
	}
	50.5%{
		transform:scaleX(1);
		z-index:100;
		left:100%;
		top:10px;
	}
	51%{
		left:940px;
		z-index:150;
	}
	60%{
		left:500px;
		z-index:150;
	}
	64%{
		left:200px;
		z-index:150;
	}
	66%{
		left:80px;
		z-index:150;
	}
	69%{
		left:-30px;
		z-index:150;
	}
	70%{
		top:5px;
		left:-30px;
		transform:scaleX(1);
		z-index:90;
	}
	70.5%{
		transform:scaleX(-1);
		z-index:10;
		left:-30px;
	}
	71%{
		left:40px;
	}
	80%{
		left:960px;
	}
	81%{
		left:960px;
		top:10px;
	}
	82%{
		left:960px;
		transform:scaleX(-1);
	}
	82.5%{
		transform:scaleX(1);
		top:5px;
		left:960px;
	}
	84%{
		top:0;
		left:500px;
		z-index:28;
	}
	88%{
		top:0;
		left:400px;
		z-index:28;
	}
	to{
		left:200px;
	}
}
@-moz-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:960px;
	}
	50%{
		z-index:28;
		top:5px;
		left:100%;
		transform:scaleX(-1);
	}
	50.5%{
		transform:scaleX(1);
		z-index:100;
		left:100%;
		top:10px;
	}
	51%{
		left:940px;
		z-index:150;
	}
	60%{
		left:500px;
		z-index:150;
	}
	64%{
		left:200px;
		z-index:150;
	}
	66%{
		left:80px;
		z-index:150;
	}
	69%{
		left:-30px;
		z-index:150;
	}
	70%{
		top:5px;
		left:-30px;
		transform:scaleX(1);
		z-index:90;
	}
	70.5%{
		transform:scaleX(-1);
		z-index:10;
		left:-30px;
	}
	71%{
		left:40px;
	}
	80%{
		left:960px;
	}
	81%{
		left:960px;
		top:10px;
	}
	82%{
		left:960px;
		transform:scaleX(-1);
	}
	82.5%{
		transform:scaleX(1);
		top:5px;
		left:960px;
	}
	84%{
		top:0;
		left:500px;
		z-index:28;
	}
	88%{
		top:0;
		left:400px;
		z-index:28;
	}
	to{
		left:200px;
	}
}
@-webkit-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:960px;
	}
	50%{
		z-index:28;
		top:5px;
		left:100%;
		transform:scaleX(-1);
	}
	50.5%{
		transform:scaleX(1);
		z-index:100;
		left:100%;
		top:10px;
	}
	51%{
		left:940px;
		z-index:150;
	}
	60%{
		left:500px;
		z-index:150;
	}
	64%{
		left:200px;
		z-index:150;
	}
	66%{
		left:80px;
		z-index:150;
	}
	69%{
		left:-30px;
		z-index:150;
	}
	70%{
		top:5px;
		left:-30px;
		transform:scaleX(1);
		z-index:90;
	}
	70.5%{
		transform:scaleX(-1);
		z-index:10;
		left:-30px;
	}
	71%{
		left:40px;
	}
	80%{
		left:960px;
	}
	81%{
		left:960px;
		top:10px;
	}
	82%{
		left:960px;
		transform:scaleX(-1);
	}
	82.5%{
		transform:scaleX(1);
		top:5px;
		left:960px;
	}
	84%{
		top:0;
		left:500px;
		z-index:28;
	}
	88%{
		top:0;
		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 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:210px;
		left:33px;
	}
	50%{
		left:39px;
	}
	to{
		top:0px;
		left:33px;
	}
}
@-moz-keyframes bubbles{
	from{
		top:210px;
		left:33px;
	}
	50%{
		left:39px;
	}
	to{
		top:0px;
		left:33px;
	}
}
@-webkit-keyframes bubbles{
	from{
		top:210px;
		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:210px;
	}
	to{
		top:0px;
	}
}
@-moz-keyframes bubbles{
	from{
		top:210px;
	}
	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:210px;
	}
	to{
		top:0px;
	}
}
@-moz-keyframes bubbles{
	from{
		top:260px;
	}
	to{
		top:0px;
	}
}
@-webkit-keyframes bubbles{
	from{
		top:210px;
	}
	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:210px;
		left:60px;
	}
	25%{
		left:30px;
	}
	50%{
		left:58px;
	}
	75%{
		left:37px;
	}
	to{
		top:0px;
		left:60px;
	}
}
@-moz-keyframes bubbles{
	from{
		top:210px;
		left:60px;
	}
	25%{
		left:30px;
	}
	50%{
		left:58px;
	}
	75%{
		left:37px;
	}
	to{
		top:0px;
		left:60px;
	}
}
@-webkit-keyframes bubbles{
	from{
		top:210px;
		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:210px;
	}
	to{
		top:0px;
	}
}
@-moz-keyframes bubbles{
	from{
		top:210px;
	}
	to{
		top:0px;
	}
}
@-webkit-keyframes bubbles{
	from{
		top:210px;
	}
	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:210px;
	}
	to{
		top:0px;
	}
}
@-moz-keyframes bubbles{
	from{
		top:210px;
	}
	to{
		top:0px;
	}
}
@-webkit-keyframes bubbles{
	from{
		top:210px;
	}
	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*/

/*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: 200px;
	left: 500px;
	margin: 10px;
	position: absolute;
	/* top:.3px; */
    /* top:400px; */
	/* top: 87%; */
	bottom: 70px;
	width: 100px;
	z-index: 98;
    opacity: .5;
}
.long_plant{
	transform: rotate(-13deg);
	-moz-transform: rotate(-13deg);
	-webkit-transform: rotate(-13deg);
	-o-transform: rotate(-13deg);
	-ms-transform: rotate(-13deg);
	height: 150px;
	left: 0px;
	margin: auto;
	position: absolute;
	/* top: 56px; */
    /* top: 500px; */
	bottom: 40px;
	width: 100px;
	z-index: 25;
    opacity: .3;
}

.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 #818181;
	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: #4E4E4E;
	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 #2C2C2C inset;
	-moz-box-shadow:5px 3px 5px #2C2C2C inset;
	-webkit-box-shadow:5px 3px 5px #2C2C2C inset;
	-o-box-shadow:5px 3px 5px #2C2C2C inset;
	-ms-box-shadow:5px 3px 5px #2C2C2C 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: #bfbebf;
	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 #3B3A3B inset;
	-moz-box-shadow:-9px 2px 7px #3B3A3B inset;
	-webkit-box-shadow:-9px 2px 7px #3B3A3B inset;
	-o-box-shadow:-9px 2px 7px #3B3A3B inset;
	-ms-box-shadow:-9px 2px 7px #3B3A3B inset;
	content: "";
	height: 43px;
	left: 83px;
	position: absolute;
	top: 8px;
	width: 25px;
}
.l_plant_2{
	border-left: 12px ridge #818181;
	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:#bfbebf;
	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 #3B3A3B inset;
	-moz-box-shadow: 5px 3px 7px #3B3A3B inset;
	-webkit-box-shadow: 5px 3px 7px #3B3A3B inset;
	-o-box-shadow: 5px 3px 7px #3B3A3B inset;
	-ms-box-shadow: 5px 3px 7px #3B3A3B 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: #4E4E4E;
	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 #303030 inset;
	-moz-box-shadow:-11px 6px 11px #303030 inset;
	-webkit-box-shadow:-11px 6px 11px #303030 inset;
	-o-box-shadow:-11px 6px 11px #303030 inset;
	-ms-box-shadow:-11px 6px 11px #303030 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 #818181;
	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: #4E4E4E;
	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 #2C2C2C inset;
	-moz-box-shadow: 4px 2px 5px #2C2C2C inset;
	-webkit-box-shadow: 4px 2px 5px #2C2C2C inset;
	-o-box-shadow: 4px 2px 5px #2C2C2C inset;
	-ms-box-shadow: 4px 2px 5px #2C2C2C 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: #bfbebf;
	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;
	
	box-shadow:-9px 2px 7px #3B3A3B inset;
	-moz-box-shadow:-9px 2px 7px #3B3A3B inset;
	-webkit-box-shadow:-9px 2px 7px #3B3A3B inset;
	-o-box-shadow:-9px 2px 7px #3B3A3B inset;
	-ms-box-shadow:-9px 2px 7px #3B3A3B inset;
	content: "";
	height: 55px;
	left: 82px;
	position: absolute;
	top: -5px;
	width: 28px;
}
/*end of long plant*/

/*start of plant animations*/
.long_plant2{
	left:15px;
	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);
	}
}
/*end of plant animations*/


.fishtank img.bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /* height: 200px; */
    height:100vh;
    opacity: 0.8;
}

/*rocks*/

.rock_3{
	border: 1px solid #252424;
	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: 52px;
	left: 30px;
	position: absolute;
	/* top: 150px; */
    top: 650px;
	width: 97px;
	z-index: 50;
	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;
}
.rock_3:before{
	border: 1px solid #252424;
	transform: rotate(186deg);
	-moz-transform: rotate(186deg);
	-webkit-transform: rotate(186deg);
	-o-transform: rotate(186deg);
	-ms-transform: rotate(186deg);
	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: -50px;
	position: absolute;
	top: 9px;
	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;
	background-color: #78604E;
	border-radius: 60px 80px 30px 40px;
	-moz-border-radius: 60px 80px 30px 40px;
	-webkit-border-radius: 60px 80px 30px 40px;
	-o-border-radius: 60px 80px 30px 40px;
	-ms-border-radius: 60px 80px 30px 40px;
	content: "";
	box-shadow: -4px 3px 6px #171717, 10px -7px 17px #292828 inset;
	-moz-box-shadow:-4px 3px 6px #171717, 10px -7px 17px #292828 inset;
	-webkit-box-shadow: -4px 3px 6px #171717, 10px -7px 17px #292828 inset;
	-o-box-shadow: -4px 3px 6px #171717, 10px -7px 17px #292828 inset;
	-ms-box-shadow: -4px 3px 6px #171717, 10px -7px 17px #292828 inset;
	-moz-transform: skewX(22deg) skewY(-5deg);
	-webkit-transform: skewX(22deg) skewY(-5deg);
	-ms-transform: skewX(22deg) skewY(-5deg);
	-o-transform: skewX(22deg) skewY(-5deg);
	transform: skewX(22deg) skewY(-5deg);
	height: 48px;
	left: 70px;
	position: absolute;
	top: -1px;
	width: 120px;
}
/*end of rocks*/

.fishtank img.fish {
    position: absolute;
    right:-500px;
    top: 0;
    animation-name:swim1;
	animation-duration:30s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
}
.fishtank img.fish1 {
    position: absolute;
    left:0;
    top: 0;
    animation-name:swim2;
	animation-duration:30s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
}
@keyframes swim1{
	from{
		left:100%;
	}
	20%{
		left:0px;
		transform:scaleX(1);
		z-index:91;
	}
	20.5%{
		transform:scaleX(-1);
		z-index:11;
		left:-30px;
	}
	21%{
		left:200px;
    top:50px;
	}
	25%{
		left:250px;
    top:80px;
	}
	30%{
		left:300px;
  top:100px;
	}
	35%{
		left:350px;
    top:80px;
	}
	39%{
		left:500px;
    top:80px;
	}
	42%{
		left:850px;
    z-index:160;
	}
	50%{
		z-index:28;
		top:5px;
		left:100%;
		transform:scaleX(-1);
	}
	50.5%{
		transform:scaleX(1);
		z-index:100;
		left:100%;
		top:10px;
	}
	51%{
		left:100%;
		z-index:150;
	}
	60%{
		left:500px;
		z-index:150;
	}
	64%{
		left:200px;
		z-index:150;
	}
	66%{
		left:80px;
		z-index:150;
	}
	69%{
		left:-30px;
		z-index:150;
	}
	70%{
		top:5px;
		left:-30px;
		transform:scaleX(1);
		z-index:90;
	}
	70.5%{
		transform:scaleX(-1);
		z-index:10;
		left:-30px;
	}
	71%{
		left:40px;
	}
	80%{
		left:50px;
	}
	81%{
		left:50px;
		top:50px;
	}
	90%{
		left:100%;
		transform:scaleX(-1);
	}
	90.5%{
		transform:scaleX(1);
		top:5px;
		left:100%;
    z-index:200;
	}
	to{
		left:100%;
    z-index:200;
	}
}

@keyframes swim2{
 0% {
    transform: translateY(-50px) translateX(0) rotate(30deg);
  }
  25% { 
    transform: translateY(50px) translateX(250px) rotate(20deg);
  }
  50% {
    transform: translateY(100px) translateX(500px);
  }
  75% {
    transform: translateY(50px) translateX(850px) rotate(-20deg);
  }
  100% {
    transform: translateY(-170px) translateX(1200px) rotate(-40deg);
  }
}
/* ...< let pixels take over @ lpto.net - tayo wegner 2012 >... */

.fish_wrap1{
	left: 200px;
	position: absolute;
	top: 0px;
	width: 290px;
	z-index: 90;
}
.freddie{
	transform: rotate(-37deg);
	-moz-transform: rotate(-37deg);
	-webkit-transform: rotate(-37deg);
	-o-transform: rotate(-37deg);
	-ms-transform: rotate(-37deg);
}

.fish_body1{
	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: #5BC5BF;
	border-radius: 80px 100px 20px 100px;
	-moz-border-radius: 80px 100px 20px 100px;
	-webkit-border-radius: 80px 100px 20px 100px;
	-o-border-radius: 80px 100px 20px 100px;
	-ms-border-radius: 80px 100px 20px 100px;
	
	box-shadow: 6px -12px 15px #1b3b39 inset, -2px -3px 4px #122726 inset;
	-moz-box-shadow: 6px -12px 15px #1b3b39 inset, -2px -3px 4px #122726 inset;
	-webkit-box-shadow: 6px -12px 15px #1b3b39 inset, -2px -3px 4px #122726 inset;
	-o-box-shadow: 6px -12px 15px #1b3b39 inset, -2px -3px 4px #122726 inset;
	-ms-box-shadow: 6px -12px 15px #1b3b39 inset, -2px -3px 4px #122726 inset;
	height: 90px;
	position: absolute;
	top: 20px;
	width: 100px;
}
.eye1{
	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: 15px;
	left: 30px;
	position: absolute;
	top: 5px;
	width: 10px;
}
.eye1: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: 5px;
	left: 2px;
	position: absolute;
	top: 3px;
	width: 2px;
}
.scale_11{
	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_21{
	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_31{
	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_41{
	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_fin1{
	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: #c82d5c;
	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: 27px;
	width: 42px;
	
}
.tail_fin1{
	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: #c82d5c;
	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: 65px;
	width: 42px;
}
.tail_fin1: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: #c82d5c;
	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 freddie */