div.hearts {
    width: 100%;
    height: auto;
    position: absolute;
    top: 60%;
    margin-left: 1em;
    margin-right: 1em;
}
div.heart {
    width: 480px;
    height: 480px;
    opacity: 1;
    position: absolute;
    bottom: 0;
    display: none;
}
div.heart i {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
}
.colOne {
    color: #fce473;
}
.colTwo {
    color: #f68b39;
}
.colThree {
    color: #ed6c63;
}
.colFour {
    color: #847bb9;
}
.colFive {
    color: #97cd76;
}
.colSix {
    color: #35b1d1;
}
@keyframes flowOne {
    0% {
    opacity: 0;
    bottom: 0;
    left: 14%}
40% {
    opacity: .8;
}
50% {
    opacity: 1;
    left: 0;
}
60% {
    opacity: .2;
}
80% {
    bottom: 80%}
100% {
    opacity: 0;
    bottom: 100%;
    left: 18%}
}@keyframes flowTwo {
    0% {
    opacity: 0;
    bottom: 0;
    left: 0;
}
40% {
    opacity: .8;
}
50% {
    opacity: 1;
    left: 11%}
60% {
    opacity: .2;
}
80% {
    bottom: 60%}
100% {
    opacity: 0;
    bottom: 80%;
    left: 0;
}
}@keyframes flowThree {
    0% {
    opacity: 0;
    bottom: 0;
    left: 0;
}
40% {
    opacity: .8;
}
50% {
    opacity: 1;
    left: 30%}
60% {
    opacity: .2;
}
80% {
    bottom: 70%}
100% {
    opacity: 0;
    bottom: 90%;
    left: 0;
}
}
@keyframes st166 {
    0% {
        transform: translateY(60%) ;
    }
    20% {
        transform: translateY(20%);
    }
    40% {
        transform: translateY(-20%);
    }
    60% {
        transform: translateY(-60%)
    }
    80% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(-140%);
    }
}

.st166 {
    animation: st166 16s linear infinite;
}

@keyframes st1666 {
    0% {
        transform: translateY(120%) ;
    }
    20% {
        transform: translateY(80%);
    }
    40% {
        transform: translateY(40%);
    }
    60% {
        transform: translateY(0%)
    }
    80% {
        transform: translateY(-40%);
    }
    100% {
        transform: translateY(-80%);
    }
}

.st1666 {
    animation: st1666 16s linear infinite;
}


@keyframes baleine {
    0% { 
        transform: rotateX(8deg) rotateY(-7deg);
    } 
    50% { 
        transform: rotateX(-8deg) rotateY(7deg);
    }
    100% { 
        transform: rotateX(8deg) rotateY(-7deg);
    } 
}

.st322,.st114a,.st312,.st313,.st314,.st317,.st318, .st319,.st316,.st315,.st320 {
    animation: baleine  8s linear infinite;
}

@keyframes st311 {
    0% { 
        transform: rotateX(8deg) rotateY(-7deg);
    } 
    50% { 
        transform: rotateX(-8deg) rotateY(7deg);
    }
    100% { 
        transform: rotateX(8deg) rotateY(-7deg);
    } 
}

.st311{
    animation: st311  8s linear infinite;
}

@keyframes fish1 {
	0% {left:-30%; transform: translate(0,20px);}
	20% {left:20%; transform: translate(0,-20px);}
	40% {left:40%; transform: translate(0,20px);}
	60% {left:60%; transform: translate(0,-20px);}
	80% {left:80%; transform: translate(0,20px);}
	100% {left:100%; transform: translate(0,-20px);}
}

.fish1{
    animation: fish1  8s linear infinite;
}

@keyframes st310 {
    0% { 
        transform: rotateX(8deg) rotateY(-7deg);
    } 
    50% { 
        transform: rotateX(-8deg) rotateY(7deg);
    }
    100% { 
        transform: rotateX(8deg) rotateY(-7deg);
    } 
}

.st310  {
    animation: st310 8s linear infinite;
}

@keyframes st321 {
    0% { 
        transform:translateY(-20px) rotateY(-5deg);
    } 
    50% { 
        transform:translateY(-10px) rotateY(5deg);
    }
    100% { 
        transform:translateY(-20px) rotateY(-5deg);
    }
}

.st321 {
    animation: st321 48s linear infinite;
}


.st0{fill:url(#SVGID_1_);}
.st1{opacity:0.4;}
.st2{fill:url(#SVGID_2_);}
.st3{fill:url(#SVGID_3_);}
.st4{fill:url(#SVGID_4_);}
.st5{fill:url(#SVGID_5_);}
.st6{fill:url(#SVGID_6_);}
.st7{fill:url(#SVGID_7_);}
.st8{fill:url(#SVGID_8_);}
.st9{fill:url(#SVGID_9_);}
.st10{opacity:0.4;fill:url(#SVGID_10_);}
.st11{opacity:0.4;fill:url(#SVGID_11_);}
.st12{fill:url(#SVGID_12_);}
.st13{fill:url(#SVGID_13_);}
.st14{fill:url(#SVGID_14_);}
.st15{fill:url(#SVGID_15_);}
.st16{fill:url(#SVGID_16_);}
.st17{fill:url(#SVGID_17_);}
.st18{fill:url(#SVGID_18_);}
.st19{fill:url(#SVGID_19_);}
.st20{opacity:0.2;fill:url(#SVGID_20_);}
.st21{opacity:0.1;fill:url(#SVGID_21_);}
.st22{fill:url(#SVGID_22_);}
.st23{fill:url(#SVGID_23_);}
.st24{fill:url(#SVGID_24_);}
.st25{fill:url(#SVGID_25_);}
.st26{fill:url(#SVGID_26_);}
.st27{fill:url(#SVGID_27_);}
.st28{fill:url(#SVGID_28_);}
.st29{fill:url(#SVGID_29_);}
.st30{fill:url(#SVGID_30_);}
.st31{fill:url(#SVGID_31_);}
.st32{fill:url(#SVGID_32_);}
.st33{fill:url(#SVGID_33_);}
.st34{fill:url(#SVGID_34_);}
.st35{fill:url(#SVGID_35_);}
.st36{fill:url(#SVGID_36_);}
.st37{fill:url(#SVGID_37_);}
.st38{fill:url(#SVGID_38_);}
.st39{fill:url(#SVGID_39_);}
.st40{fill:url(#SVGID_40_);}
.st41{fill:url(#SVGID_41_);}
.st42{fill:url(#SVGID_42_);}
.st43{fill:url(#SVGID_43_);}
.st44{fill:url(#SVGID_44_);}
.st45{fill:url(#SVGID_45_);}
.st46{fill:url(#SVGID_46_);}
.st47{fill:url(#SVGID_47_);}
.st48{fill:url(#SVGID_48_);}
.st49{fill:url(#SVGID_49_);}
.st50{fill:url(#SVGID_50_);}
.st51{fill:url(#SVGID_51_);}
.st52{fill:url(#SVGID_52_);}
.st53{fill:url(#SVGID_53_);}
.st54{fill:url(#SVGID_54_);}
.st55{fill:url(#SVGID_55_);}
.st56{fill:url(#SVGID_56_);}
.st57{fill:url(#SVGID_57_);}
.st58{fill:url(#SVGID_58_);}
.st59{fill:url(#SVGID_59_);}
.st60{fill:url(#SVGID_60_);}
.st61{fill:url(#SVGID_61_);}
.st62{fill:url(#SVGID_62_);}
.st63{fill:url(#SVGID_63_);}
.st64{fill:url(#SVGID_64_);}
.st65{fill:url(#SVGID_65_);}
.st66{fill:url(#SVGID_66_);}
.st67{fill:url(#SVGID_67_);}
.st68{fill:url(#SVGID_68_);}
.st69{fill:url(#SVGID_69_);}
.st70{fill:url(#SVGID_70_);}
.st71{fill:url(#SVGID_71_);}
.st72{fill:url(#SVGID_72_);}
.st73{fill:url(#SVGID_73_);}
.st74{opacity:0.4;fill:url(#SVGID_74_);}
.st75{opacity:0.4;fill:url(#SVGID_75_);}
.st76{opacity:0.4;fill:url(#SVGID_76_);}
.st77{fill:url(#SVGID_77_);}
.st78{fill:url(#SVGID_78_);}
.st79{fill:url(#SVGID_79_);}
.st80{fill:url(#SVGID_80_);}
.st81{fill:url(#SVGID_81_);}
.st82{fill:url(#SVGID_82_);}
.st83{fill:url(#SVGID_83_);}
.st84{fill:url(#SVGID_84_);}
.st85{fill:url(#SVGID_85_);}
.st86{fill:url(#SVGID_86_);}
.st87{fill:url(#SVGID_87_);}
.st88{fill:url(#SVGID_88_);}
.st89{fill:url(#SVGID_89_);}
.st90{fill:url(#SVGID_90_);}
.st91{fill:url(#SVGID_91_);}
.st92{fill:url(#SVGID_92_);}
.st93{fill:url(#SVGID_93_);}
.st94{fill:url(#SVGID_94_);}
.st95{fill:url(#SVGID_95_);}
.st96{fill:url(#SVGID_96_);}
.st97{fill:url(#SVGID_97_);}
.st98{fill:url(#SVGID_98_);}
.st99{fill:url(#SVGID_99_);}
.st100{fill:url(#SVGID_100_);}
.st101{fill:url(#SVGID_101_);}
.st102{fill:url(#SVGID_102_);}
.st103{fill:url(#SVGID_103_);}
.st104{fill:url(#SVGID_104_);}
.st105{fill:url(#SVGID_105_);}
.st106{fill:url(#SVGID_106_);}
.st107{opacity:0.3;fill:#524837;}
.st108{opacity:0.3;fill:#FFFFFF;}
.st109{fill:url(#SVGID_107_);}
.st110{fill:url(#SVGID_108_);}
.st111{fill:url(#SVGID_109_);}
.st112{fill:url(#SVGID_110_);}
.st113{fill:url(#SVGID_111_);}
.st114{fill:#FFFFFF;}
.st115{fill:#A13800;}
.st116{fill:url(#SVGID_112_);}
.st117{fill:url(#SVGID_113_);}
.st118{fill:url(#SVGID_114_);}
.st119{fill:url(#SVGID_115_);}
.st120{fill:url(#SVGID_116_);}
.st121{fill:url(#SVGID_117_);}
.st122{fill:url(#SVGID_118_);}
.st123{fill:url(#SVGID_119_);}
.st124{fill:url(#SVGID_120_);}
.st125{fill:url(#SVGID_121_);}
.st126{fill:url(#SVGID_122_);}
.st127{fill:url(#SVGID_123_);}
.st128{fill:url(#SVGID_124_);}
.st129{fill:url(#SVGID_125_);}
.st130{fill:url(#SVGID_126_);}
.st131{fill:url(#SVGID_127_);}
.st132{fill:url(#SVGID_128_);}
.st133{fill:url(#SVGID_129_);}
.st134{fill:url(#SVGID_130_);}
.st135{fill:url(#SVGID_131_);}
.st136{fill:url(#SVGID_132_);}
.st137{fill:url(#SVGID_133_);}
.st138{fill:url(#SVGID_134_);}
.st139{fill:url(#SVGID_135_);}
.st140{fill:url(#SVGID_136_);}
.st141{fill:url(#SVGID_137_);}
.st142{fill:#FFFFFF;stroke:#1D1D1B;stroke-miterlimit:10;}
.st143{fill:url(#SVGID_138_);}
.st144{fill:url(#SVGID_139_);}
.st145{fill:url(#SVGID_140_);}
.st146{fill:url(#SVGID_141_);}
.st147{fill:url(#SVGID_142_);}
.st148{fill:url(#SVGID_143_);}
.st149{fill:#554A87;}
.st150{fill:url(#SVGID_144_);}
.st151{fill:url(#SVGID_145_);}
.st152{fill:url(#SVGID_146_);}
.st153{fill:url(#SVGID_147_);}
.st154{fill:url(#SVGID_148_);}
.st155{fill:url(#SVGID_149_);}
.st156{fill:url(#SVGID_150_);}
.st157{fill:url(#SVGID_151_);}
.st158{fill:url(#SVGID_152_);}
.st159{fill:#A104B0;}
.st160{fill:url(#SVGID_153_);}
.st161{fill:url(#SVGID_154_);}
.st162{fill:url(#SVGID_155_);}
.st163{fill:url(#SVGID_156_);}
.st164{fill:#2929B0;}
.st165{fill:#E06AE6;}
.st166{opacity:0.48;}
.st167{fill:url(#SVGID_157_);}
.st168{fill:url(#SVGID_158_);}
.st169{fill:url(#SVGID_159_);}
.st170{fill:url(#SVGID_160_);}
.st171{fill:url(#SVGID_161_);}
.st172{fill:url(#SVGID_162_);}
.st173{fill:url(#SVGID_163_);}
.st174{fill:url(#SVGID_164_);}
.st175{fill:url(#SVGID_165_);}
.st176{fill:url(#SVGID_166_);}
.st177{fill:url(#SVGID_167_);}
.st178{fill:url(#SVGID_168_);}
.st179{fill:url(#SVGID_169_);}
.st180{fill:url(#SVGID_170_);}
.st181{fill:url(#SVGID_171_);}
.st182{fill:url(#SVGID_172_);}
.st183{fill:url(#SVGID_173_);}
.st184{fill:url(#SVGID_174_);}
.st185{fill:url(#SVGID_175_);}
.st186{fill:url(#SVGID_176_);}
.st187{fill:url(#SVGID_177_);}
.st188{fill:url(#SVGID_178_);}
.st189{fill:url(#SVGID_179_);}
.st190{fill:url(#SVGID_180_);}
.st191{fill:url(#SVGID_181_);}
.st192{fill:url(#SVGID_182_);}
.st193{fill:url(#SVGID_183_);}
.st194{fill:url(#SVGID_184_);}
.st195{fill:url(#SVGID_185_);}
.st196{fill:url(#SVGID_186_);}
.st197{fill:url(#SVGID_187_);}
.st198{fill:url(#SVGID_188_);}
.st199{fill:url(#SVGID_189_);}
.st200{fill:url(#SVGID_190_);}
.st201{opacity:0.4;fill:#F5F2FF;}
.st202{fill:url(#SVGID_191_);}
.st203{fill:url(#SVGID_192_);}
.st204{fill:url(#SVGID_193_);}
.st205{fill:url(#SVGID_194_);}
.st206{fill:url(#SVGID_195_);}
.st207{opacity:0.4;fill:#00912D;}
.st208{fill:#00912D;}
.st209{fill:url(#SVGID_196_);}
.st210{fill:url(#SVGID_197_);}
.st211{fill:url(#SVGID_198_);}
.st212{opacity:0.8;}
.st213{fill:url(#SVGID_199_);}
.st214{fill:url(#SVGID_200_);}
.st215{fill:url(#SVGID_201_);}
.st216{fill:url(#SVGID_202_);}
.st217{fill:url(#SVGID_203_);}
.st218{fill:url(#SVGID_204_);}
.st219{fill:url(#SVGID_205_);}
.st220{fill:url(#SVGID_206_);}
.st221{fill:url(#SVGID_207_);}
.st222{fill:url(#SVGID_208_);}
.st223{fill:url(#SVGID_209_);}
.st224{fill:url(#SVGID_210_);}
.st225{fill:url(#SVGID_211_);}
.st226{fill:url(#SVGID_212_);}
.st227{fill:url(#SVGID_213_);}
.st228{fill:url(#SVGID_214_);}
.st229{fill:url(#SVGID_215_);}
.st230{fill:url(#SVGID_216_);}
.st231{fill:url(#SVGID_217_);}
.st232{fill:url(#SVGID_218_);}
.st233{fill:url(#SVGID_219_);}
.st234{fill:url(#SVGID_220_);}
.st235{fill:url(#SVGID_221_);}
.st236{fill:url(#SVGID_222_);}
.st237{fill:url(#SVGID_223_);}
.st238{fill:url(#SVGID_224_);}
.st239{fill:url(#SVGID_225_);}
.st240{fill:url(#SVGID_226_);}
.st241{fill:url(#SVGID_227_);}
.st242{fill:url(#SVGID_228_);}
.st243{fill:url(#SVGID_229_);}
.st244{fill:url(#SVGID_230_);}
.st245{fill:url(#SVGID_231_);}
.st246{fill:url(#SVGID_232_);}
.st247{fill:url(#SVGID_233_);}
.st248{fill:url(#SVGID_234_);}
.st249{fill:url(#SVGID_235_);}
.st250{fill:url(#SVGID_236_);}
.st251{fill:url(#SVGID_237_);}
.st252{fill:url(#SVGID_238_);}
.st253{fill:url(#SVGID_239_);}
.st254{fill:url(#SVGID_240_);}
.st255{fill:url(#SVGID_241_);}
.st256{fill:url(#SVGID_242_);}
.st257{fill:#1F62C4;}
.st258{fill:url(#SVGID_243_);}
.st259{fill:url(#SVGID_244_);}
.st260{fill:url(#SVGID_245_);}
.st261{fill:url(#SVGID_246_);}
.st262{fill:url(#SVGID_247_);}
.st263{fill:url(#SVGID_248_);}
.st264{fill:url(#SVGID_249_);}
.st265{fill:#005F73;}
.st266{fill:url(#SVGID_250_);}
.st267{fill:url(#SVGID_251_);}
.st268{fill:url(#SVGID_252_);}
.st269{fill:url(#SVGID_253_);}
.st270{fill:url(#SVGID_254_);}
.st271{fill:url(#SVGID_255_);}
.st272{fill:url(#SVGID_256_);}
.st273{fill:url(#SVGID_257_);}
.st274{fill:url(#SVGID_258_);}
.st275{fill:url(#SVGID_259_);}
.st276{fill:url(#SVGID_260_);}
.st277{fill:url(#SVGID_261_);}
.st278{fill:url(#SVGID_262_);}
.st279{fill:url(#SVGID_263_);}
.st280{fill:url(#SVGID_264_);}
.st281{fill:url(#SVGID_265_);}
.st282{fill:url(#SVGID_266_);}
.st283{fill:url(#SVGID_267_);}
.st284{fill:url(#SVGID_268_);}
.st285{fill:url(#SVGID_269_);}
.st286{fill:url(#SVGID_270_);}
.st287{fill:url(#SVGID_271_);}
.st288{fill:url(#SVGID_272_);}
.st289{fill:url(#SVGID_273_);}
.st290{fill:url(#SVGID_274_);}
.st291{fill:url(#SVGID_275_);}
.st292{fill:url(#SVGID_276_);}
.st293{fill:url(#SVGID_277_);}
.st294{fill:url(#SVGID_278_);}
.st295{fill:url(#SVGID_279_);}
.st296{fill:url(#SVGID_280_);}
.st297{fill:url(#SVGID_281_);}
.st298{fill:url(#SVGID_282_);}
.st299{fill:url(#SVGID_283_);}
.st300{fill:url(#SVGID_284_);}
.st301{fill:url(#SVGID_285_);}
.st302{fill:url(#SVGID_286_);}
.st303{fill:url(#SVGID_287_);}
.st304{fill:url(#SVGID_288_);}
.st305{fill:url(#SVGID_289_);}
.st306{fill:url(#SVGID_290_);}
.st307{fill:url(#SVGID_291_);}
.st308{fill:url(#SVGID_292_);}
.st309{fill:url(#SVGID_293_);}
.st310{fill:url(#SVGID_294_);}
.st311{fill:url(#SVGID_295_);}
.st312{fill:#4181A3;}
.st313{fill:url(#SVGID_296_);}
.st314{fill:url(#SVGID_297_);}
.st315{fill:url(#SVGID_298_);}
.st316{fill:url(#SVGID_299_);}
.st317{fill:url(#SVGID_300_);}
.st318{fill:url(#SVGID_301_);}
.st319{fill:url(#SVGID_302_);}
.st320{fill:url(#SVGID_303_);}
.st321{fill:url(#SVGID_304_);}
.st322{opacity:0.4;fill:#FFFFFF;}
.st1{fill:#FFFFFF;}
.st2{fill:none;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
.st4{opacity:0.5;}
.st5{fill:#4791EA;}
.st6{fill:#76AEFF;}
.st7{fill:#A4CDFF;}
.st8{fill:#757575;}
.st9{fill:#5D5D5D;}

body {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: #d6d6d6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    margin: 0px;
    background: rgb(0, 74, 185);
}

body {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    background: #90caf9;
  }
  .cloud {
    width: 350px;
    height: 120px;
    background: #fff;
    border-radius: 100px;
    position: absolute;
    z-index: -50;
    box-shadow: 0 0 45px 10px rgba(0,0,0,0.161);
  }
  .cloud:before,
  .cloud:after {
    content: '';
    position: absolute;
    background: #fff;
    z-index: -1;
  }
  .cloud:before {
    width: 180px;
    height: 180px;
    top: -90px;
    right: 50px;
    border-radius: 200px;
  }
  .cloud:after {
    width: 100px;
    height: 100px;
    top: -50px;
    left: 50px;
    border-radius: 100px;
  }
  .ocean {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: transparent;
  }
  .fish-container {
    position: absolute;
    width: 100px;
    height: 100px;
  }
  .fish {
    position: absolute;
    width: 100px;
    height: 100px;
    font-weight: bold;
    background: #fff;
    border-radius: 70px 10px/70px 10px;
    transform: rotate(2deg);
    font-size: 26px;
  }
  .fish:before { 
    position: absolute;
    display: inline-block;
    content: attr(data-before);
    color: white;
    width: 100%;
    height: 50%;
    top: 100%;
    transform-origin: top right;
    transform: rotate(-45deg);
  }

  .fish-eyes {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 11%;
    left: 57%;
    background: #607d8b;
    border-radius: 100%;
  }
  .fish-tail {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .fish-tail:before,
  .fish-tail:after {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    top: 100%;
    left: -50%;
    border-radius: 70% 0%;
    background: #dcdcdc;
    transform-origin: top right;
  }
  .fish-tail:before {
    transform: rotate(-22deg);
  }
  .fish-tail:after {
    transform: rotate(22deg);
  }
  .fish,
  .fish-tail:before,
  .fish-tail:after {
    box-shadow: 8px 3px 17px 6px rgba(13,71,161,0.188);
  }
  .fish-1,
  .fish-1 .fish-tail:before,
  .fish-1 .fish-tail:after {
    background: #1CD8D2;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #93EDC7, #1CD8D2);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #93EDC7, #1CD8D2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
  }
  .fish-2,
  .fish-2 .fish-tail:before,
  .fish-2 .fish-tail:after {
    background: #56ab2f;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
  }
  .fish-3,
  .fish-3 .fish-tail:before,
  .fish-3 .fish-tail:after {
    background: #fc4a1a;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f7b733, #fc4a1a);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f7b733, #fc4a1a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
  }
  .fish-4,
  .fish-4 .fish-tail:before,
  .fish-4 .fish-tail:after {
    background: #00F260;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0575E6, #00F260);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0575E6, #00F260); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
  }
  .fish-5,
  .fish-5 .fish-tail:before,
  .fish-5 .fish-tail:after {
    background: #bc4e9c;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f80759, #bc4e9c);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f80759, #bc4e9c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
  }
  @-moz-keyframes swim {
    0% {
      left: -30%;
      transform: translate(0, 20px);
      opacity: 1;
    }
    10% {
      left: 20%;
      transform: translate(0, -20px);
    }
    20% {
      left: 40%;
      transform: translate(0, 20px);
    }
    30% {
      left: 60%;
      transform: translate(0, -20px);
    }
    40% {
      left: 80%;
      transform: translate(0, 20px);
    }
    45% {
      left: 100%;
      transform: translate(0, -20px);
      opacity: 1;
    }
    50% {
      left: 130%;
      transform: translate(0, 20px) scaleX(-1);
      opacity: 0;
    }
    60% {
      left: 90%;
      transform: translate(0, -20px) scaleX(-1);
      opacity: 0;
    }
    70% {
      left: 60%;
      transform: translate(0, 10px) scaleX(-1);
      opacity: 0;
    }
    80% {
      left: 20%;
      transform: translate(0, -50px) scaleX(-1);
      opacity: 0;
    }
    90% {
      left: -10%;
      transform: translate(0, 50px) scaleX(-1);
      opacity: 0;
    }
    100% {
      left: -30%;
      transform: translate(0, 0) scaleX(1);
      opacity: 1;
    }
  }
  @-webkit-keyframes swim {
    0% {
      left: -30%;
      transform: translate(0, 20px);
      opacity: 1;
    }
    10% {
      left: 20%;
      transform: translate(0, -20px);
    }
    20% {
      left: 40%;
      transform: translate(0, 20px);
    }
    30% {
      left: 60%;
      transform: translate(0, -20px);
    }
    40% {
      left: 80%;
      transform: translate(0, 20px);
    }
    45% {
      left: 100%;
      transform: translate(0, -20px);
      opacity: 1;
    }
    50% {
      left: 130%;
      transform: translate(0, 20px) scaleX(-1);
      opacity: 0;
    }
    60% {
      left: 90%;
      transform: translate(0, -20px) scaleX(-1);
      opacity: 0;
    }
    70% {
      left: 60%;
      transform: translate(0, 10px) scaleX(-1);
      opacity: 0;
    }
    80% {
      left: 20%;
      transform: translate(0, -50px) scaleX(-1);
      opacity: 0;
    }
    90% {
      left: -10%;
      transform: translate(0, 50px) scaleX(-1);
      opacity: 0;
    }
    100% {
      left: -30%;
      transform: translate(0, 0) scaleX(1);
      opacity: 1;
    }
  }
  @-o-keyframes swim {
    0% {
      left: -30%;
      transform: translate(0, 20px);
      opacity: 1;
    }
    10% {
      left: 20%;
      transform: translate(0, -20px);
    }
    20% {
      left: 40%;
      transform: translate(0, 20px);
    }
    30% {
      left: 60%;
      transform: translate(0, -20px);
    }
    40% {
      left: 80%;
      transform: translate(0, 20px);
    }
    45% {
      left: 100%;
      transform: translate(0, -20px);
      opacity: 1;
    }
    50% {
      left: 130%;
      transform: translate(0, 20px) scaleX(-1);
      opacity: 0;
    }
    60% {
      left: 90%;
      transform: translate(0, -20px) scaleX(-1);
      opacity: 0;
    }
    70% {
      left: 60%;
      transform: translate(0, 10px) scaleX(-1);
      opacity: 0;
    }
    80% {
      left: 20%;
      transform: translate(0, -50px) scaleX(-1);
      opacity: 0;
    }
    90% {
      left: -10%;
      transform: translate(0, 50px) scaleX(-1);
      opacity: 0;
    }
    100% {
      left: -30%;
      transform: translate(0, 0) scaleX(1);
      opacity: 1;
    }
  }
  @keyframes swim {
    0% {
      left: -30%;
      transform: translate(0, 20px);
      opacity: 1;
    }
    10% {
      left: 20%;
      transform: translate(0, -20px);
    }
    20% {
      left: 40%;
      transform: translate(0, 20px);
    }
    30% {
      left: 60%;
      transform: translate(0, -20px);
    }
    40% {
      left: 80%;
      transform: translate(0, 20px);
    }
    45% {
      left: 100%;
      transform: translate(0, -20px);
      opacity: 1;
    }
    50% {
      left: 130%;
      transform: translate(0, 20px) scaleX(-1);
      opacity: 0;
    }
    60% {
      left: 90%;
      transform: translate(0, -20px) scaleX(-1);
      opacity: 0;
    }
    70% {
      left: 60%;
      transform: translate(0, 10px) scaleX(-1);
      opacity: 0;
    }
    80% {
      left: 20%;
      transform: translate(0, -50px) scaleX(-1);
      opacity: 0;
    }
    90% {
      left: -10%;
      transform: translate(0, 50px) scaleX(-1);
      opacity: 0;
    }
    100% {
      left: -30%;
      transform: translate(0, 0) scaleX(1);
      opacity: 1;
    }
  }
  
  @keyframes plant1 {
    0% { 
        transform: skew(0deg, 2deg) ;
        -webkit-transform: skew(0deg, 2deg) ;
        -moz-transform: skew(0deg, 2deg) ;
        -o-transform: skew(0deg, 2deg) ;
        -ms-transform: skew(0deg, 2deg) ;
    } 
    50% { 
        transform: skew(0deg, 1deg) ;
        -webkit-transform: skew(0deg, 1deg) ;
        -moz-transform: skew(0deg, 1deg) ;
        -o-transform: skew(0deg, 1deg) ;
        -ms-transform: skew(0deg, 1deg) ;
    }
    100% { 
        transform: skew(0deg, 2deg) ;
        -webkit-transform: skew(0deg, 2deg) ;
        -moz-transform: skew(0deg, 2deg) ;
        -o-transform: skew(0deg, 2deg) ;
        -ms-transform: skew(0deg, 2deg) ;
    } 
}

.st27,.st28,.st105,.st93,.st94,.st82,.st83,.st84,.plant1,.st88,.st89{
    animation: plant1  8s ease infinite;
}

@keyframes plant4 {
    0% { 
        transform: skew(0deg, 2deg) ;
        -webkit-transform: skew(0deg, 2deg) ;
        -moz-transform: skew(0deg, 2deg) ;
        -o-transform: skew(0deg, 2deg) ;
        -ms-transform: skew(0deg, 2deg) ;
    } 
    50% { 
        transform: skew(0deg, 1deg) ;
        -webkit-transform: skew(0deg, 1deg) ;
        -moz-transform: skew(0deg, 1deg) ;
        -o-transform: skew(0deg, 1deg) ;
        -ms-transform: skew(0deg, 1deg) ;
    }
    100% { 
        transform: skew(0deg, 2deg);
        -webkit-transform: skew(0deg, 2deg) ;
        -moz-transform: skew(0deg, 2deg) ;
        -o-transform: skew(0deg, 2deg) ;
        -ms-transform: skew(0deg, 2deg) ;
    } 
}

.st25,.st26,.st22,.st86,.st87{
    animation: plant4  5s ease infinite;
}

@keyframes plant2 {
    0% { 
        transform: skew(0deg, 2deg) translateY(20px);
        -webkit-transform: skew(0deg, 2deg) ;
        -moz-transform: skew(0deg, 2deg) ;
        -o-transform: skew(0deg, 2deg) ;
        -ms-transform: skew(0deg, 2deg) ;
    } 
    50% { 
        transform: skew(0deg,1deg) translateY(20px);
        -webkit-transform: skew(0deg, 1deg) ;
        -moz-transform: skew(0deg, 1deg) ;
        -o-transform: skew(0deg, 1deg) ;
        -ms-transform: skew(0deg, 1deg) ;
    }
    100% { 
        transform: skew(0deg, 2deg) translateY(20px);
        -webkit-transform: skew(0deg, 2deg) ;
        -moz-transform: skew(0deg, 2deg) ;
        -o-transform: skew(0deg, 2deg) ;
        -ms-transform: skew(0deg, 2deg) ;
    } 
}

.st23,.st24.st31,.st32,.st63,.st97,.st98,.st80,.st81,.plant2,.st90,.st91{
    animation: plant2  6s ease infinite;
}


@keyframes plant3 {
    0% { 
        transform: skew(0deg, 2deg) translateY(20px) ;
        -webkit-transform: skew(0deg, 2deg) ;
        -moz-transform: skew(0deg, 2deg) ;
        -o-transform: skew(0deg, 2deg) ;
        -ms-transform: skew(0deg, 2deg) ;
    } 
    50% { 
        transform: skew(0deg,-1deg) translateY(20px);
        -webkit-transform: skew(0deg, 1deg) ;
        -moz-transform: skew(0deg, 1deg) ;
        -o-transform: skew(0deg, 1deg) ;
        -ms-transform: skew(0deg, 1deg) ;
    }
    100% { 
        transform: skew(0deg, 2deg) translateY(20px);
        -webkit-transform: skew(0deg, 2deg) ;
        -moz-transform: skew(0deg, 2deg) ;
        -o-transform: skew(0deg, 2deg) ;
        -ms-transform: skew(0deg, 2deg) ;
    } 
}

.st30,.st31,.st33,.st34,.st29,.st30,.st64,.st65,.st66,.st67,.st68,.st69,.st70,.st71,.st72,.st73,.st95,.st96,.st78,.st79,.plant3,.st92,.st93{
    animation: plant3  3s ease infinite;
}