@keyframes cloud-travel-right-to-left{
    0%{opacity:0;left:90%;}
    5%{opacity:1;}
    35%{opacity:1;}
    40%{opacity:0;left:0%;}
    50%{opacity:0;left:0%;}
    55%{opacity:1;}
    85%{opacity:1;}
    90%{opacity:0;left:90%};
    100%{opacity:0;left:90%};
}

@keyframes cloud-travel-left-to-right{
    0%{opacity:0;left:0%;}
    5%{opacity:1;}
    35%{opacity:1;}
    40%{opacity:0;left:90%;}
    50%{opacity:0;left:90%;}
    55%{opacity:1;}
    85%{opacity:1;}
    90%{opacity:0;left:0%};
    100%{opacity:0;left:0%};
}

@keyframes fish-animation-loop{
    0%{left:60%;transform:rotateY(0deg)}
    /* 24%{transform:rotateY(0deg) rotateZ(0deg);}
    30%{transform:rotateY(0deg) rotateZ(-15deg);}
    36%{transform:rotateY(0deg) rotateZ(0deg)} */
    47%{left:30%;transform:rotateY(0deg) rotateZ(0);}
    50%{left:30%;transform:rotateY(180deg);}
    /* 70%{transform:rotateY(180deg) rotateZ(0deg);}
    76%{transform:rotateY(180deg) rotateZ(20deg);}
    82%{transform:rotateY(180deg) rotateZ(0deg);} */
    97%{left:60%;transform:rotateY(180deg);}
    100%{left:60%;transform:rotateY(0deg);}
}

@keyframes sun-animation-loop{
    0%{transform:rotateZ(0deg)}
    50%{transform:rotateZ(180deg)}
    100%{transform:rotateZ(0deg)}
}

@keyframes bird-fly-right-to-left{
    0%{opacity:0;left:90%;}
    10%{opacity:0;left:90%;}
    15%{opacity:1;}
    35%{opacity:1;}
    40%{opacity:0;left:0%;}
    50%{opacity:0;left:0%;transform:scaleX(1);}
    51%{opacity:0;left:0%;transform:scaleX(-1);}
    55%{opacity:1;transform:scaleX(-1);}
    75%{opacity:1;transform:scaleX(-1);}
    90%{opacity:0;left:90%;transform:scaleX(-1);}
    100%{opacity:0;left:90%;transform:scaleX(1);}
}

@keyframes bird-flap-loop{
    0%{background-position: 300%;}
    49%{background-position: 300%;}
    50%{background-position: 100%;}
    99%{background-position: 100%;}
    100%{background-position: 300%;}
}

@keyframes leaf-sway{
    /* 0%{transform:rotateZ(15deg);} */
    50%{transform:rotateZ(80deg);}
    /* 100%{transform:rotateZ(15deg);} */
}

@keyframes kite-go-to-top{
    0%{top: 90%;opacity:0;}
    10%{opacity:.5}
    25%{opacity:.5;}
    50%{opacity:.5;};
    70%{opacity:.5;};
    90%{opacity:.5;}
    100%{top:0;opacity:.0}
}

@keyframes lantern-go-to-top{
    0%{top: 70%;opacity:0;}
    10%{opacity:.8}
    25%{opacity:.8;}
    50%{opacity:.8;};
    70%{opacity:.8;};
    90%{opacity:.8;}
    100%{top:0;opacity:.0}
}

@keyframes xs-bird1-fly{
    0%{
        top:360px;
        left:40px;
        opacity:0;
    }

    10%{
        top:350px;
        left:80px;
        opacity:1;
    }

    100%{
        top:350px;
        left:80px;
        opacity:1;
    }
}

@keyframes xs-bird2-fly{
    0%{
        top:330px;
        left:50%;
        transform:translate(-300%,0);
        opacity:0;
        width:10%;
    }

    5%{
        top:360px;
        left:50%;
        transform:translate(-450%,0);
        opacity:0;
        width:8%;
    }

    17%{
        top:300px;
        left:50%;
        transform:translate(-140%,0);
        opacity:1;
        width:12%;
    }

    100%{
        top:300px;
        left:50%;
        transform:translate(-140%,0);
        opacity:1;
        width:12%;
    }
}

@keyframes xs-bird3-fly{
    0%{
        width:20%;
        top:300px;
        left:50%;
        transform:translate(-150%,0);
        opacity:0;
    }

    10%{
        width:15%;
        top:340px;
        left:50%;
        transform:translate(-170%,0);
        opacity:0;
    }

    25%{
        width:20%;
        top:260px;
        left:50%;
        transform:translate(0%,0);
        opacity:1;
    }

    100%{
        width:20%;
        top:260px;
        left:50%;
        transform:translate(0%,0);
        opacity:1;
    }
}

@keyframes xs-bird4-fly{
    0%{
        width:20%;
        top:240px;
        right:20%;
        opacity:0;
    }

    20%{
        width:15%;
        top:260px;
        right:30%;
        opacity:0;
    }

    35%{
        width:20%;
        top:200px;
        right:15px;
        opacity:1;
    }

    100%{
        width:20%;
        top:200px;
        right:15px;
        opacity:1;
    }
}

@keyframes xs-swan1-fly{
    0%{
        top:350px;
        left:30px;
        opacity:0;
        width:54px;
    }

    10%{
        opacity:1;
        width:54px;
        top:350px;
        left:65px;
    }

    15%{
        opacity:1;
        left:85px;
        top:320px;
        width:60px;
    }

    100%{
        opacity:1;
        left:100%;
        top:200px;
        width:108px;
    }
}

@keyframes xs-swan1-inner{
    10%{
        transform:rotateZ(0);
    }

    15%{
        transform:rotateZ(-25deg);
    }

    100%{
        transform:rotateZ(-25deg);
    }
}


@keyframes xs-swan2-fly{
    0%{
        top:350px;
        left:30px;
        opacity:0;
        width:54px;
    }

    10%{
        opacity:1;
        width:54px;
        top:350px;
        left:65px;
    }

    15%{
        opacity:1;
        left:85px;
        top:320px;
        width:60px;
    }

    100%{
        opacity:1;
        left:100%;
        top:100px;
        width:108px;
    }
}

@keyframes xs-swan2-inner{
    10%{
        transform:rotateZ(0);
    }

    15%{
        transform:rotateZ(-35deg);
    }

    100%{
        transform:rotateZ(-35deg);
    }
}

@keyframes xs-swan3-fly{
    0%{
        top:350px;
        left:30px;
        opacity:0;
        width:54px;
    }

    10%{
        opacity:1;
        width:54px;
        top:350px;
        left:65px;
    }

    15%{
        opacity:1;
        left:85px;
        top:350px;
        width:60px;
    }

    100%{
        opacity:1;
        left:100%;
        top:300px;
        width:108px;
    }
}

@keyframes xs-swan3-inner{
    10%{
        transform:rotateZ(0);
    }

    15%{
        transform:rotateZ(-5deg);
    }

    100%{
        transform:rotateZ(-5deg);
    }
}

@keyframes xs-static-swan-appear{
    0%{
        opacity:0;
    }

    25%{
        opacity:0;
    }

    27%{
        opacity:1;
    }

    97%{
        opacity:1;
    }
}

@keyframes sm-bird1-fly{
    0%{
        top:360px;
        left:40px;
        opacity:0;
    }

    10%{
        top:350px;
        left:120px;
        opacity:1;
    }

    100%{
        top:350px;
        left:120px;
        opacity:1;
    }
}

@keyframes sm-bird2-fly{
    0%{
        top:350px;
        left:50%;
        transform:translate(-350%,0);
        opacity:0;
        width:8%;
    }

    5%{
        top:340px;
        transform:translate(-450%,0);
        width:8%;
        opacity:0;
    }

    17%{
        top:295px;
        transform:translate(-140%,0);
        opacity:1;
        width:10%;
    }

    100%{
        top:295px;
        left:50%;
        transform:translate(-140%,0);
        opacity:1;
        width:10%;
    }
}


@keyframes sm-bird3-fly{
    0%{
        width:10%;
        top:300px;
        left:50%;
        transform:translate(-150%,0);
        opacity:0;
    }

    10%{
        width:15%;
        top:330px;
        left:50%;
        transform:translate(-180%,0);
        opacity:0;
    }

    25%{
        width:20%;
        top:260px;
        left:50%;
        transform:translate(0%,0);
        opacity:1;
    }

    100%{
        width:20%;
        top:260px;
        left:50%;
        transform:translate(0%,0);
        opacity:1;
    }
}


@keyframes sm-bird4-fly{
    0%{
        width:20%;
        top:240px;
        right:20%;
        opacity:0;
    }

    20%{
        width:15%;
        top:260px;
        right:35%;
        opacity:0;
    }

    35%{
        width:20%;
        top:200px;
        right:15px;
        opacity:1;
    }

    100%{
        width:20%;
        top:200px;
        right:15px;
        opacity:1;
    }
}


@keyframes sm-swan1-fly{
    0%{
        top:350px;
        left:30px;
        opacity:0;
        width:54px;
    }

    10%{
        opacity:1;
        top:350px;
        left:65px;
        width:54px;
    }

    20%{
        opacity:1;
        left:100px;
        top:320px;
        width:66px;
    }

    100%{
        opacity:1;
        left:100%;
        top:200px;
        width:120px;
    }
}

@keyframes sm-swan1-inner{
    10%{
        transform:rotateZ(0);
    }

    20%{
        transform:rotateZ(-25deg);
    }

    100%{
        transform:rotateZ(-25deg);
    }
}


@keyframes sm-swan2-fly{
    0%{
        top:350px;
        left:30px;
        opacity:0;
        width:54px;
    }

    10%{
        opacity:1;
        top:350px;
        left:65px;
        width:54px;
    }

    20%{
        opacity:1;
        left:100px;
        top:320px;
        width:66px;
    }

    100%{
        opacity:1;
        left:100%;
        top:100px;
        width:120px;
    }
}

@keyframes sm-swan2-inner{
    10%{
        transform:rotateZ(0);
    }

    20%{
        transform:rotateZ(-35deg);
    }

    100%{
        transform:rotateZ(-35deg);
    }
}

@keyframes sm-swan3-fly{
    0%{
        top:350px;
        left:30px;
        opacity:0;
        width:54px;
    }

    10%{
        opacity:1;
        top:350px;
        left:65px;
        width:54px;
    }

    20%{
        opacity:1;
        left:100px;
        top:350px;
        width:66px;
    }

    100%{
        opacity:1;
        left:100%;
        top:300px;
        width:120px;
    }
}

@keyframes sm-swan3-inner{
    10%{
        transform:rotateZ(0);
    }

    20%{
        transform:rotateZ(-5deg);
    }

    100%{
        transform:rotateZ(-5deg);
    }
}


@keyframes md-bird1-fly{
    0%{
        top:460px;
        left:40px;
        opacity:0;
    }

    10%{
        top:450px;
        left:150px;
        opacity:1;
    }

    100%{
        top:450px;
        left:150px;
        opacity:1;
    }
}

@keyframes md-bird2-fly{
    0%{
        top:350px;
        left:50%;
        transform:translate(-350%,0);
        opacity:0;
        width:8%;
    }

    5%{
        top:445px;
        transform:translate(-450%,0);
        width:8%;
        opacity:0;
    }

    17%{
        top:380px;
        transform:translate(-140%,0);
        opacity:1;
        width:10%;
    }

    100%{
        top:380px;
        left:50%;
        transform:translate(-140%,0);
        opacity:1;
        width:10%;
    }
}


@keyframes md-bird3-fly{
    0%{
        width:10%;
        top:300px;
        left:50%;
        transform:translate(-120%,0);
        opacity:0;
    }

    10%{
        width:15%;
        top:420px;
        left:50%;
        transform:translate(-180%,0);
        opacity:0;
    }

    25%{
        width:20%;
        top:335px;
        left:50%;
        transform:translate(0%,0);
        opacity:1;
    }

    100%{
        width:20%;
        top:335px;
        left:50%;
        transform:translate(0%,0);
        opacity:1;
    }
}


@keyframes md-bird4-fly{
    0%{
        width:20%;
        top:240px;
        right:20%;
        opacity:0;
    }

    20%{
        width:10%;
        top:370px;
        right:40%;
        opacity:0;
    }

    35%{
        width:20%;
        top:250px;
        right:15px;
        opacity:1;
    }

    100%{
        width:20%;
        top:250px;
        right:15px;
        opacity:1;
    }
}


@keyframes md-swan1-fly{
    0%{
        top:490px;
        left:80px;
        opacity:0;
        width:60px;
    }

    10%{
        opacity:1;
        top:490px;
        left:150px;
        width:60px;
    }

    18%{
        opacity:1;
        left:200px;
        top:470px;
        width:72px;
    }

    100%{
        opacity:1;
        left:100%;
        top:230px;
        width:150px;
    }
}

@keyframes md-swan1-inner{
    10%{
        transform:rotateZ(0);
    }

    18%{
        transform:rotateZ(-25deg);
    }

    100%{
        transform:rotateZ(-25deg);
    }
}


@keyframes md-swan2-fly{
    0%{
        top:490px;
        left:80px;
        opacity:0;
        width:60px;
    }

    10%{
        opacity:1;
        top:490px;
        left:150px;
        width:60px;
    }

    18%{
        opacity:1;
        left:200px;
        top:470px;
        width:72px;
    }

    100%{
        opacity:1;
        left:100%;
        top:90px;
        width:150px;
    }
}

@keyframes md-swan2-inner{
    10%{
        transform:rotateZ(0);
    }

    18%{
        transform:rotateZ(-35deg);
    }

    100%{
        transform:rotateZ(-35deg);
    }
}

@keyframes md-swan3-fly{
    0%{
        top:490px;
        left:80px;
        opacity:0;
        width:60px;
    }

    10%{
        opacity:1;
        top:490px;
        left:150px;
        width:60px;
    }

    18%{
        opacity:1;
        left:200px;
        top:470px;
        width:72px;
    }

    100%{
        opacity:1;
        left:100%;
        top:360px;
        width:150px;
    }
}

@keyframes md-swan3-inner{
    10%{
        transform:rotateZ(0);
    }

    18%{
        transform:rotateZ(-5deg);
    }

    100%{
        transform:rotateZ(-5deg);
    }
}


@keyframes lg-bird1-fly{
    0%{
        width:4%;
        top:330px;
        left:350px;
        opacity:0;
    }

    10%{
        width:6%;
        top:280px;
        left:430px;
        opacity:1;
    }

    100%{
        width:6%;
        top:280px;
        left:430px;
        opacity:1;
    }
}

@keyframes lg-bird2-fly{
    0%{
        top:350px;
        left:50%;
        transform:translate(-350%,0);
        opacity:0;
        width:8%;
    }

    5%{
        top:280px;
        left:50%;
        transform:translate(-200%,0);
        width:6%;
        opacity:0;
    }

    17%{
        width:8%;
        top:200px;
        left:50%;
        transform:translate(20%,0);
        opacity:1;
    }

    100%{
        width:8%;
        top:200px;
        left:50%;
        transform:translate(20%,0);
        opacity:1;
    }
}


@keyframes lg-bird3-fly{
    0%{
        width:10%;
        top:300px;
        left:50%;
        transform:translate(-120%,0);
        opacity:0;
    }

    10%{
        width:8%;
        top:250px;
        left:50%;
        transform:translate(-20%,0);
        opacity:0;
    }

    25%{
        width:15%;
        top:125px;
        left:50%;
        transform:translate(80%,0);
        opacity:1;
    }

    100%{
        width:15%;
        top:125px;
        left:50%;
        transform:translate(80%,0);
        opacity:1;
    }
}


@keyframes lg-bird4-fly{
    0%{
        width:20%;
        top:240px;
        right:20%;
        opacity:0;
    }

    20%{
        width:10%;
        top:145px;
        right:25%;
        opacity:0;
    }

    35%{
        top:30px;
        width:15%;
        right:50px;
        opacity:1;
    }

    100%{
        top:30px;
        width:15%;
        right:50px;
        opacity:1;
    }
}




@keyframes lg-swan1-fly{
    0%{
        top:300px;
        left:370px;
        opacity:0;
        width:60px;
    }

    10%{
        opacity:1;
        top:300px;
        left:420px;
        width:60px;
    }

    18%{
        opacity:1;
        left:450px;
        top:280px;
        width:72px;
    }

    100%{
        opacity:1;
        left:86%;
        top:50px;
        width:120px;
    }
}

@keyframes lg-swan1-inner{
    10%{
        transform:rotateZ(0);
    }

    18%{
        transform:rotateZ(-25deg);
    }

    100%{
        transform:rotateZ(-25deg);
    }
}


@keyframes lg-swan2-fly{
    0%{
        top:300px;
        left:370px;
        opacity:0;
        width:60px;
    }

    10%{
        opacity:1;
        top:300px;
        left:420px;
        width:60px;
    }

    18%{
        opacity:1;
        left:450px;
        top:280px;
        width:72px;
    }

    100%{
        opacity:1;
        left:85%;
        top:10px;
        width:120px;
    }
}

@keyframes lg-swan2-inner{
    10%{
        transform:rotateZ(0);
    }

    18%{
        transform:rotateZ(-35deg);
    }

    100%{
        transform:rotateZ(-35deg);
    }
}

@keyframes lg-swan3-fly{
    0%{
        top:300px;
        left:370px;
        opacity:0;
        width:60px;
    }

    10%{
        opacity:1;
        top:300px;
        left:420px;
        width:60px;
    }

    18%{
        opacity:1;
        left:450px;
        top:280px;
        width:72px;
    }

    100%{
        opacity:1;
        left:86%;
        top:250px;
        width:120px;
    }
}

@keyframes lg-swan3-inner{
    10%{
        transform:rotateZ(0);
    }

    18%{
        transform:rotateZ(-5deg);
    }

    100%{
        transform:rotateZ(-5deg);
    }
}




@keyframes xl-bird1-fly{
    0%{
        width:4%;
        top:310px;
        left:380px;
        opacity:0;
    }

    10%{
        width:6%;
        top:280px;
        left:530px;
        opacity:1;
    }

    100%{
        width:6%;
        top:280px;
        left:530px;
        opacity:1;
    }
}

@keyframes xl-bird2-fly{
    0%{
        top:350px;
        left:50%;
        transform:translate(-350%,0);
        opacity:0;
        width:8%;
    }

    5%{
        top:280px;
        left:50%;
        transform:translate(-240%,0);
        width:6%;
        opacity:0;
    }

    17%{
        width:8%;
        top:210px;
        left:50%;
        transform:translate(-50%,0);
        opacity:1;
    }

    100%{
        width:8%;
        top:210px;
        left:50%;
        transform:translate(-50%,0);
        opacity:1;
    }
}


@keyframes xl-bird3-fly{
    0%{
        width:10%;
        top:300px;
        left:50%;
        transform:translate(-120%,0);
        opacity:0;
    }

    10%{
        width:6%;
        top:280px;
        left:50%;
        transform:translate(-75%,0);
        opacity:0;
    }

    25%{
        width:15%;
        top:130px;
        left:50%;
        transform:translate(40%,0);
        opacity:1;
    }

    100%{
        width:15%;
        top:130px;
        left:50%;
        transform:translate(40%,0);
        opacity:1;
    }
}


@keyframes xl-bird4-fly{
    0%{
        width:20%;
        top:240px;
        right:20%;
        opacity:0;
    }

    20%{
        width:10%;
        top:150px;
        right:30%;
        opacity:0;
    }

    35%{
        top:10px;
        width:15%;
        right:150px;
        opacity:1;
    }

    100%{
        top:10px;
        width:15%;
        right:150px;
        opacity:1;
    }
}


@keyframes xl-swan1-fly{
    0%{
        top:300px;
        left:410px;
        opacity:0;
        width:60px;
    }

    10%{
        opacity:1;
        top:300px;
        left:500px;
        width:60px;
    }

    18%{
        opacity:1;
        left:550px;
        top:280px;
        width:72px;
    }

    100%{
        opacity:1;
        left:88%;
        top:50px;
        width:120px;
    }
}

@keyframes xl-swan1-inner{
    10%{
        transform:rotateZ(0);
    }

    18%{
        transform:rotateZ(-25deg);
    }

    100%{
        transform:rotateZ(-25deg);
    }
}


@keyframes xl-swan2-fly{
    0%{
        top:300px;
        left:410px;
        opacity:0;
        width:60px;
    }

    10%{
        opacity:1;
        top:300px;
        left:500px;
        width:60px;
    }

    18%{
        opacity:1;
        left:550px;
        top:280px;
        width:72px;
    }

    100%{
        opacity:1;
        left:88%;
        top:10px;
        width:120px;
    }
}

@keyframes xl-swan2-inner{
    10%{
        transform:rotateZ(0);
    }

    18%{
        transform:rotateZ(-35deg);
    }

    100%{
        transform:rotateZ(-35deg);
    }
}

@keyframes xl-swan3-fly{
    0%{
        top:300px;
        left:410px;
        opacity:0;
        width:60px;
    }

    10%{
        opacity:1;
        top:300px;
        left:500px;
        width:60px;
    }

    18%{
        opacity:1;
        left:550px;
        top:280px;
        width:72px;
    }

    100%{
        opacity:1;
        left:88%;
        top:250px;
        width:120px;
    }
}

@keyframes xl-swan3-inner{
    10%{
        transform:rotateZ(0);
    }

    18%{
        transform:rotateZ(-5deg);
    }

    100%{
        transform:rotateZ(-5deg);
    }
}


@keyframes chakra-rotate{
    100%{
        transform:rotateZ(360deg);
    }
}

@keyframes heart-beat{
    40%{
        transform:translate(0,0) scale(1,1);
    }
    50%{
        transform:translate(0,0) scale(1.5,1.5);
    }
    60%{
        transform:translate(0,0) scale(1,1);
    }
}

@keyframes heart-outline-1{
   
    49%{
        transform:translate(0,0) scale(1.5,1.5);
        opacity:0;
    }
    50%{
        transform:translate(0,0) scale(1.5,1.5);
        opacity:1;
    }
    70%{
        transform:translate(0,0) scale(2.5,2.5);
        opacity:0;
    }
    100%{
        transform:translate(0,0) scale(2.5,2.5);
        opacity:0;
    }
}

@keyframes heart-outline-2{
   
    59%{
        transform:translate(0,0) scale(1.5,1.5);
        opacity:0;
    }
    60%{
        transform:translate(0,0) scale(1.5,1.5);
        opacity:1;
    }
    80%{
        transform:translate(0,0) scale(3.0,3.0);
        opacity:0;
    }

    100%{
        transform:translate(0,0) scale(3.0,3.0);
        opacity:0;
    }
}

@keyframes heart-outline-3{
   
    69%{
        transform:translate(0,0) scale(1.5,1.5);
        opacity:0;
    }
    70%{
        transform:translate(0,0) scale(1.5,1.5);
        opacity:1;
    }
    90%{
        transform:translate(0,0) scale(4.5,4.5);
        opacity:0;
    }

    100%{
        transform:translate(0,0) scale(4.5,4.5);
        opacity:0;
    }
}

@keyframes rotate-clockwise-break{
    70%{
        transform:rotateZ(360deg);
    }

    100%{
        transform:rotateZ(360deg);
    }
}

@keyframes rotate-anticlockwise-break{
    70%{
        transform:rotateZ(-360deg);
    }

    100%{
        transform:rotateZ(-360deg);
    }
}

@keyframes osscilate{
    20%{transform:rotateZ(45deg)}

    40%{
        transform:rotateZ(0deg);
    }

    60%{
        transform:rotateZ(-45deg);
    }

    80%{
        transform:rotateZ(0deg);
    }
}

@keyframes twinkle{
    0%{
        opacity:0;
    }

    5%{
        opacity:1;
    }

    10%{
        opacity:0;
    }

    15%{
        opacity:1;
    }

    20%{
        opacity:0;
    }

    25%{
        opacity:1;
    }

    100%{
        opacity:1;
    }
}