.fire {
font-size: 8px;
filter: blur(0.02em);
-webkit-filter: blur(0.02em);
margin: 2em auto 0 auto;
position: relative;
width: 7px;
height: 9px;
position: absolute;
z-index: 999;
top: 310px;
right: 159px;
}

.particle {
  animation: rise 1s ease-in infinite;
  background-image: radial-gradient(#ff5000 20%, rgba(255, 80, 0, 0) 70%);
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  position: absolute;
  bottom: 0;
  width: 5em;
  height: 5em;
}
.particle:nth-of-type(1) {
  animation-delay: 0.022422257s;
  left: calc((100% - 5em) * 0);
}
.particle:nth-of-type(2) {
  animation-delay: 0.4516165093s;
  left: calc((100% - 5em) * 0.02);
}
.particle:nth-of-type(3) {
  animation-delay: 0.1479228712s;
  left: calc((100% - 5em) * 0.04);
}
.particle:nth-of-type(4) {
  animation-delay: 0.2277078237s;
  left: calc((100% - 5em) * 0.06);
}
.particle:nth-of-type(5) {
  animation-delay: 0.5973639865s;
  left: calc((100% - 5em) * 0.08);
}
.particle:nth-of-type(6) {
  animation-delay: 0.4775874936s;
  left: calc((100% - 5em) * 0.1);
}
.particle:nth-of-type(7) {
  animation-delay: 0.1443654778s;
  left: calc((100% - 5em) * 0.12);
}
.particle:nth-of-type(8) {
  animation-delay: 0.1015691333s;
  left: calc((100% - 5em) * 0.14);
}
.particle:nth-of-type(9) {
  animation-delay: 0.3558801479s;
  left: calc((100% - 5em) * 0.16);
}
.particle:nth-of-type(10) {
  animation-delay: 0.8387381142s;
  left: calc((100% - 5em) * 0.18);
}
.particle:nth-of-type(11) {
  animation-delay: 0.134655856s;
  left: calc((100% - 5em) * 0.2);
}
.particle:nth-of-type(12) {
  animation-delay: 0.0752070152s;
  left: calc((100% - 5em) * 0.22);
}
.particle:nth-of-type(13) {
  animation-delay: 0.5462536761s;
  left: calc((100% - 5em) * 0.24);
}
.particle:nth-of-type(14) {
  animation-delay: 0.9930814908s;
  left: calc((100% - 5em) * 0.26);
}
.particle:nth-of-type(15) {
  animation-delay: 0.9744705506s;
  left: calc((100% - 5em) * 0.28);
}
.particle:nth-of-type(16) {
  animation-delay: 0.3188902978s;
  left: calc((100% - 5em) * 0.3);
}
.particle:nth-of-type(17) {
  animation-delay: 0.9854478988s;
  left: calc((100% - 5em) * 0.32);
}
.particle:nth-of-type(18) {
  animation-delay: 0.786446334s;
  left: calc((100% - 5em) * 0.34);
}
.particle:nth-of-type(19) {
  animation-delay: 0.4482237869s;
  left: calc((100% - 5em) * 0.36);
}
.particle:nth-of-type(20) {
  animation-delay: 0.3100112987s;
  left: calc((100% - 5em) * 0.38);
}
.particle:nth-of-type(21) {
  animation-delay: 0.9646850557s;
  left: calc((100% - 5em) * 0.4);
}
.particle:nth-of-type(22) {
  animation-delay: 0.518687104s;
  left: calc((100% - 5em) * 0.42);
}
.particle:nth-of-type(23) {
  animation-delay: 0.8564709113s;
  left: calc((100% - 5em) * 0.44);
}
.particle:nth-of-type(24) {
  animation-delay: 0.9790492984s;
  left: calc((100% - 5em) * 0.46);
}
.particle:nth-of-type(25) {
  animation-delay: 0.3196233165s;
  left: calc((100% - 5em) * 0.48);
}
.particle:nth-of-type(26) {
  animation-delay: 0.3782960418s;
  left: calc((100% - 5em) * 0.5);
}
.particle:nth-of-type(27) {
  animation-delay: 0.2471071199s;
  left: calc((100% - 5em) * 0.52);
}
.particle:nth-of-type(28) {
  animation-delay: 0.3720757355s;
  left: calc((100% - 5em) * 0.54);
}
.particle:nth-of-type(29) {
  animation-delay: 0.6514303371s;
  left: calc((100% - 5em) * 0.56);
}
.particle:nth-of-type(30) {
  animation-delay: 0.7515360855s;
  left: calc((100% - 5em) * 0.58);
}
.particle:nth-of-type(31) {
  animation-delay: 0.7822972882s;
  left: calc((100% - 5em) * 0.6);
}
.particle:nth-of-type(32) {
  animation-delay: 0.3119262584s;
  left: calc((100% - 5em) * 0.62);
}
.particle:nth-of-type(33) {
  animation-delay: 0.1532971762s;
  left: calc((100% - 5em) * 0.64);
}
.particle:nth-of-type(34) {
  animation-delay: 0.0440002214s;
  left: calc((100% - 5em) * 0.66);
}
.particle:nth-of-type(35) {
  animation-delay: 0.4739344304s;
  left: calc((100% - 5em) * 0.68);
}
.particle:nth-of-type(36) {
  animation-delay: 0.730339978s;
  left: calc((100% - 5em) * 0.7);
}
.particle:nth-of-type(37) {
  animation-delay: 0.0431398604s;
  left: calc((100% - 5em) * 0.72);
}
.particle:nth-of-type(38) {
  animation-delay: 0.726692628s;
  left: calc((100% - 5em) * 0.74);
}
.particle:nth-of-type(39) {
  animation-delay: 0.4111289234s;
  left: calc((100% - 5em) * 0.76);
}
.particle:nth-of-type(40) {
  animation-delay: 0.1775913272s;
  left: calc((100% - 5em) * 0.78);
}
.particle:nth-of-type(41) {
  animation-delay: 0.9982314784s;
  left: calc((100% - 5em) * 0.8);
}
.particle:nth-of-type(42) {
  animation-delay: 0.5133900692s;
  left: calc((100% - 5em) * 0.82);
}
.particle:nth-of-type(43) {
  animation-delay: 0.8254717149s;
  left: calc((100% - 5em) * 0.84);
}
.particle:nth-of-type(44) {
  animation-delay: 0.9186815766s;
  left: calc((100% - 5em) * 0.86);
}
.particle:nth-of-type(45) {
  animation-delay: 0.7702564473s;
  left: calc((100% - 5em) * 0.88);
}
.particle:nth-of-type(46) {
  animation-delay: 0.8406326637s;
  left: calc((100% - 5em) * 0.9);
}
.particle:nth-of-type(47) {
  animation-delay: 0.7554624974s;
  left: calc((100% - 5em) * 0.92);
}
.particle:nth-of-type(48) {
  animation-delay: 0.8431651873s;
  left: calc((100% - 5em) * 0.94);
}
.particle:nth-of-type(49) {
  animation-delay: 0.8991043036s;
  left: calc((100% - 5em) * 0.96);
}
.particle:nth-of-type(50) {
  animation-delay: 0.1063074097s;
  left: calc((100% - 5em) * 0.98);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-10em) scale(0);
  }
}
























.bird {
    background-image:url(../../images/bird-cells.svg);
    background-size: auto 100%;
    width: 88px;
    height: 125px;
    will-change: background-position;
    -webkit-animation-name: fly-cycle;
    animation-name: fly-cycle;
    -webkit-animation-timing-function: steps(10);
    animation-timing-function: steps(10);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.bird--one {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.bird--two {
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-delay: -0.75s;
    animation-delay: -0.75s;
}
.bird--three {
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
}
.bird--four {
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.bird-container {
    position: absolute;
    top: 10%;
    left: -7.5vw;
    -webkit-transform: scale(0);
    transform: scale(0);
    will-change: transform;
    -webkit-animation-name: fly-right-one;
    animation-name: fly-right-one;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.bird-container--one {
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}
.bird-container--two {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.bird-container--three {
    -webkit-animation-duration: 14.6s;
    animation-duration: 14.6s;
    -webkit-animation-delay: 9.5s;
    animation-delay: 9.5s;
}
.bird-container--four {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    -webkit-animation-delay: 10.25s;
    animation-delay: 10.25s;
}
 @-webkit-keyframes fly-cycle {
 100% {
 background-position: -900px 0;
}
}
 @keyframes fly-cycle {
 100% {
 background-position: -900px 0;
}
}
@-webkit-keyframes fly-right-one {
 0% {
 left: -10%;
 -webkit-transform: scale(0.3);
 transform: scale(0.3);
}
 10% {
 left: 10%;
 -webkit-transform: translateY(2vh) scale(0.4);
 transform: translateY(2vh) scale(0.4);
}
 20% {
 left: 30%;
 -webkit-transform: translateY(0vh) scale(0.5);
 transform: translateY(0vh) scale(0.5);
}
 30% {
 left: 50%;
 -webkit-transform: translateY(4vh) scale(0.6);
 transform: translateY(4vh) scale(0.6);
}
 40% {
 left: 70%;
 -webkit-transform: translateY(2vh) scale(0.6);
 transform: translateY(2vh) scale(0.6);
}
 50% {
 left: 90%;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
 60% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
 100% {
 left: 110%;
 opacity: 1;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
}
@keyframes fly-right-one {
 0% {
 left: -10%;
 -webkit-transform: scale(0.3);
 transform: scale(0.3);
}
 10% {
 left: 10%;
 -webkit-transform: translateY(2vh) scale(0.4);
 transform: translateY(2vh) scale(0.4);
}
 20% {
 left: 30%;
 -webkit-transform: translateY(0vh) scale(0.5);
 transform: translateY(0vh) scale(0.5);
}
 30% {
 left: 50%;
 -webkit-transform: translateY(4vh) scale(0.6);
 transform: translateY(4vh) scale(0.6);
}
 40% {
 left: 70%;
 -webkit-transform: translateY(2vh) scale(0.6);
 transform: translateY(2vh) scale(0.6);
}
 50% {
 left: 90%;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
 60% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
 100% {
 left: 110%;
 opacity: 1;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
}
@-webkit-keyframes fly-right-two {
 0% {
 left: -10%;
 opacity: 1;
 -webkit-transform: translateY(-2vh) scale(0.5);
 transform: translateY(-2vh) scale(0.5);
}
 10% {
 left: 10%;
 -webkit-transform: translateY(0vh) scale(0.4);
 transform: translateY(0vh) scale(0.4);
}
 20% {
 left: 30%;
 -webkit-transform: translateY(-4vh) scale(0.6);
 transform: translateY(-4vh) scale(0.6);
}
 30% {
 left: 50%;
 -webkit-transform: translateY(1vh) scale(0.45);
 transform: translateY(1vh) scale(0.45);
}
 40% {
 left: 70%;
 -webkit-transform: translateY(-2.5vh) scale(0.5);
 transform: translateY(-2.5vh) scale(0.5);
}
 50% {
 left: 90%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
 51% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
 100% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
}
@keyframes fly-right-two {
 0% {
 left: -10%;
 opacity: 1;
 -webkit-transform: translateY(-2vh) scale(0.5);
 transform: translateY(-2vh) scale(0.5);
}
 10% {
 left: 10%;
 -webkit-transform: translateY(0vh) scale(0.4);
 transform: translateY(0vh) scale(0.4);
}
 20% {
 left: 30%;
 -webkit-transform: translateY(-4vh) scale(0.6);
 transform: translateY(-4vh) scale(0.6);
}
 30% {
 left: 50%;
 -webkit-transform: translateY(1vh) scale(0.45);
 transform: translateY(1vh) scale(0.45);
}
 40% {
 left: 70%;
 -webkit-transform: translateY(-2.5vh) scale(0.5);
 transform: translateY(-2.5vh) scale(0.5);
}
 50% {
 left: 90%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
 51% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
 100% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
}