/*	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 >..................  */

/* 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;*/
    min-width: 850px;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media (max-width: 1200px) {
    .fishtank{
        min-width: 990px;
    }
}
/* Large devices (laptops/desktops, 992px and up) */
@media (max-width: 991px) {
    .fishtank{
        min-width: 820px;
    }
}
/* Medium devices (landscape tablets, 768px and up) */
@media (max-width: 820px) {
    .fishtank{
        min-width: 768px;
    }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media (max-width: 768px) {
    .fishtank{
        min-width: 620px;
    }
}
/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {
    .fishtank{
        min-width: 420px;
    }
}
/* Extra small devices (phones, 600px and down) */
@media (max-width: 414px) {
    .fishtank{
        min-width: 330px;
    }
}
/* Extra small devices (phones, 600px and down) */
@media (max-width: 360px) {
    .fishtank{
        min-width: 300px;
    }
}
/* Extra small devices (phones, 600px and down) */
@media (max-width: 320px) {
    .fishtank{
        min-width: 280px;
    }
}

.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{
    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;
    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{
    background-color: #604F46;
    border-radius: 57px 0 57px 0;
    -moz-border-radius: 57px 0 57px 0;
    -webkit-border-radius: 57px 0 57px 0;
    -o-border-radius: 57px 0 57px 0;
    -ms-border-radius:57px 0 57px 0;

    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: 60px;
    left: 34px;
    position: absolute;
    top: 51px;
    width: 165px;
    border: 1px solid #252424;
}
.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: 615px;
    position: absolute;
    top: 323px;
    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: -12px;
    width: 120px;
}

.rock_4{
    transform: rotate(19deg);
    -moz-transform: rotate(19deg);
    -webkit-transform:rotate(19deg);
    -o-transform: rotate(19deg);
    -ms-transform:rotate(19deg);
    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:100;
}
.rock_4:before{
    transform: rotate(89deg);
    -moz-transform: rotate(89deg);
    -webkit-transform:rotate(89deg);
    -o-transform: rotate(89deg);
    -ms-transform: rotate(89deg);
    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: 91px;
    width: 228px;
    border: 1px solid #252424;
}
.rock_4:after{
    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: 63px;
    left: 232px;
    position: absolute;
    top: 128px;
    width: 87px;
    border: 1px solid #252424;
}

.rock_5{
    border: 1px solid #252424;
    transform: rotate(52deg) skewX(-3deg);
    -moz-transform: rotate(52deg) skewX(-3deg);
    -webkit-transform: rotate(52deg) skewX(-3deg);
    -o-transform: rotate(52deg) skewX(-3deg);
    -ms-transform: rotate(52deg) skewX(-3deg);
    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: 77px;
    z-index: 100;
}
.rock_5:before{
    transform:rotate(217deg);
    -moz-transform: rotate(217deg);
    -webkit-transform:rotate(217deg);
    -o-transform: rotate(217deg);
    -ms-transform: rotate(217deg);
    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 -2px 15px #292828 inset;
    -moz-box-shadow: -8px 1px 8px #212020, 5px -2px 15px #292828 inset;
    -webkit-box-shadow: -8px 1px 8px #212020, 5px -2px 15px #292828 inset;
    -ms-box-shadow: -8px 1px 8px #212020, 5px -2px 15px #292828 inset;
    -o-box-shadow: -8px 1px 8px #212020, 5px -2px 15px #292828 inset;
    content: "";
    height: 144px;
    left: -40px;
    position: absolute;
    top: 5px;
    width: 82px;
}
.rock_5:after{
    transform: skewX(-6deg) rotate(114deg);
    -moz-transform: skewX(-6deg) rotate(114deg);
    -webkit-transform:skewX(-6deg) rotate(114deg);
    -o-transform:skewX(-6deg) rotate(114deg);
    -ms-transform:skewX(-6deg) rotate(114deg);
    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:2px -1px 7px #171717, -5px 10px 20px #292828 inset;
    -moz-box-shadow:2px -1px 7px #171717, -5px 10px 20px #292828 inset;
    -webkit-box-shadow:2px -1px 7px #171717, -5px 10px 20px #292828 inset;
    -o-box-shadow:2px -1px 7px #171717, -5px 10px 20px #292828 inset;
    -ms-box-shadow:2px -1px 7px #171717, -5px 10px 20px #292828 inset;
    content: "";
    height: 57px;
    left: 91px;
    position: absolute;
    top: -147px;
    width: 125px;
}
/*end of rocks*/
/*plants*/
.plant_1_wrap{
    position: absolute;
    left: 676px;
    z-index: 40;
}
.plant_1{
    transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    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;

    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: 214px;
    left: -20px;
    position: absolute;
    top: 150px;
    width: 43px;
}

.plant_1:after{

    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{
    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: 176px;
    left: 42px;
    position: absolute;
    top: 179px;
    width: 71px;
}
.plant_2:after{
    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: 135px;
    left: 29px;
    position: absolute;
    top: 19px;
    width: 2px;
}

.plant_3{
    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{
    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{
    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{
    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{
    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;
    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{
    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;

    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: 55px;
    left: 82px;
    position: absolute;
    top: -5px;
    width: 28px;
}
/*end of long plant*/

.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 >... */