@charset "utf-8";


.gif-animation {
  position: absolute; }

.butterfly-gif {
  top: 450px;
  left: 0;
  z-index: 1;
  -webkit-transform: rotate(80deg) translateZ(0);
          transform: rotate(80deg) translateZ(0);
  -webkit-animation: butterfly 10s linear infinite;
  animation: butterfly 6s linear infinite ease-in-out; }

.butterfly-gif--flip {
  bottom: -120px;
  right: 0;
  z-index: 1;
  -webkit-transform: rotate(-80deg) translateZ(0);
          transform: rotate(-80deg) translateZ(0);
  -webkit-animation: butterfly-flip 10s linear infinite ease-in-out;
  animation: butterfly-flip 6s linear infinite  ease-in-out; }


.bee-gif {
  top: 450px;
  right: -131px;
  z-index: 1;
  -webkit-transform: rotate(-50deg) translateZ(0);
          transform: rotate(-50deg) translateZ(0);
  -webkit-animation: bee 20s linear infinite;
  animation: bee 20s linear infinite ease-in-out; }

.bee-gif--flip {
  bottom: -90px;
  z-index: 1;
  -webkit-transform: rotate(50deg) translateZ(0);
          transform: rotate(50deg) translateZ(0);
  -webkit-animation: bee-flip 20s linear infinite ease-in-out;
  animation: bee-flip 20s linear infinite ease-in-out; }




  .flower-gif {
    top: 550px;
    right: 0px;
    z-index: 1;
    -webkit-transform: rotate(-50deg) translateZ(0);
            transform: rotate(-50deg) translateZ(0);
    -webkit-animation: flower 30s linear infinite;
    animation: flower 30s linear infinite ease-in-out; }
  
  .flower-gif--flip {
    bottom: -90px;
    z-index: 1;
    -webkit-transform: rotate(50deg) translateZ(0);
            transform: rotate(50deg) translateZ(0);
    -webkit-animation: flower-flip 30s linear infinite ease-in-out;
    animation: flower-flip 30s linear infinite ease-in-out; }
  
  
  
.flower-gif {
  bottom: 0;
  right: 30%;
  z-index: 1;
  -webkit-transform: rotate(-20deg) translateZ(0);
    transform: rotate(-20deg) translateZ(0);
  -webkit-animation: flower 8s linear infinite ease-in-out;
  animation: flower 8s linear infinite ease-in-out; }



@-webkit-keyframes butterfly {

  0% {
    left: 0;
    top: 450px; 
	animation-delay: 3s;
	}
  
  25% {
    left: 25%;
    top: 25%;
	-webkit-transform: rotate(50deg) translateZ(0);
	transform: rotate(50deg) translateZ(0); 
	animation-delay: 5s;
	}

  35% {
    left: 30%;
    top: 22%;
    -webkit-transform: rotate(45deg) translateZ(0);
      transform: rotate(40deg) translateZ(0); 
	animation-delay: 5s;
			}

   45% {
    left: 35%;
    top: 20%;
    -webkit-transform: rotate(40deg) translateZ(0);
      transform: rotate(40deg) translateZ(0); 
	animation-delay: 7s;
	}

  50% {
    left: 40%;
    top: 15%;
    -webkit-transform: rotate(35deg) translateZ(0);
      transform: rotate(35deg) translateZ(0);
	animation-delay: 6s;
	}


 70% {
    left: 55%;
    top: 10%;
    -webkit-transform: rotate(45deg) translateZ(0);
      transform: rotate(45deg) translateZ(0);
	animation-delay: 15s;
	}

  


  80% {
    left: 70%;
    top: 5%;
    -webkit-transform: rotate(40deg) translateZ(0);
      transform: rotate(40deg) translateZ(0); 
	animation-delay: 5s;
	}



  90% {
    left: 85%;
    top: 0%;
    -webkit-transform: rotate(25deg) translateZ(0);
            transform: rotate(25deg) translateZ(0); 
				animation-delay: 8s;		
			}

  100% {
    left: 90%;
    top: -70px;
    -webkit-transform: rotate(20deg) translateZ(0);
            transform: rotate(20deg) translateZ(0); 
				transition-duration: 5s;
	} 
			}




@keyframes butterfly {
  0% {
    left: 0;
    top: 450px; 
	animation-delay: 3s;
	}
  
  25% {
    left: 25%;
    top: 25%;
	-webkit-transform: rotate(50deg) translateZ(0);
	transform: rotate(50deg) translateZ(0); 
	animation-delay: 5s;
	}

  35% {
    left: 30%;
    top: 22%;
    -webkit-transform: rotate(45deg) translateZ(0);
      transform: rotate(40deg) translateZ(0); 
	animation-delay: 5s;
			}

   45% {
    left: 35%;
    top: 20%;
    -webkit-transform: rotate(40deg) translateZ(0);
      transform: rotate(40deg) translateZ(0); 
	animation-delay: 7s;
	}

  50% {
    left: 40%;
    top: 15%;
    -webkit-transform: rotate(35deg) translateZ(0);
      transform: rotate(35deg) translateZ(0);
	animation-delay: 6s;
	}


 70% {
    left: 55%;
    top: 10%;
    -webkit-transform: rotate(45deg) translateZ(0);
      transform: rotate(45deg) translateZ(0);
	animation-delay: 15s;
	}

  


  80% {
    left: 70%;
    top: 5%;
    -webkit-transform: rotate(40deg) translateZ(0);
      transform: rotate(40deg) translateZ(0); 
	animation-delay: 5s;
	}



  90% {
    left: 85%;
    top: 0%;
    -webkit-transform: rotate(25deg) translateZ(0);
            transform: rotate(25deg) translateZ(0); 
				animation-delay: 8s;		
			}

  100% {
    left: 90%;
    top: -70px;
    -webkit-transform: rotate(20deg) translateZ(0);
            transform: rotate(20deg) translateZ(0); 
				transition-duration: 5s;
	} 
}






@-webkit-keyframes butterfly-flip {
  0% {
    right: -120px;
    bottom: 40%;
		animation-delay: 5s;
		}
  
  25% {
    right: 25%;
    bottom: 55%;
    -webkit-transform: rotate(-70deg) translateZ(0);
            transform: rotate(-70deg) translateZ(0); 
				animation-delay: 3s;
			}
  
  50% {
    right: 30%;
    bottom: 70%;
    -webkit-transform: rotate(-50deg) translateZ(0);
            transform: rotate(-50deg) translateZ(0); 
				transition-duration: 5s;
			
			}
  
  75% {
    right: 40%;
    bottom: 85%;
    -webkit-transform: rotate(-25deg) translateZ(0);
            transform: rotate(-25deg) translateZ(0);
				animation-delay: 3s;
			}
  
  100% {
    right: 50%;
    bottom: 100%;
    -webkit-transform: rotate(-20deg) translateZ(0);
            transform: rotate(-20deg) translateZ(0);
				animation-delay: 2s;
			}
			
	}




@keyframes butterfly-flip {
  0% {
    right: -120px;
    bottom: 40%;
	
				animation-delay: 2s;
	}
  
  25% {
    right: 25%;
    bottom: 55%;
    -webkit-transform: rotate(-70deg) translateZ(0);
            transform: rotate(-70deg) translateZ(0);
				animation-delay: 2s;
			}
  
  50% {
    right: 30%;
    bottom: 70%;
    -webkit-transform: rotate(-50deg) translateZ(0);
            transform: rotate(-50deg) translateZ(0);
				animation-delay: 3s;
				}
  
  75% {
    right: 40%;
    bottom: 85%;
    -webkit-transform: rotate(-25deg) translateZ(0);
            transform: rotate(-25deg) translateZ(0);
				animation-delay: 5s;
			}
  



  100% {
    right: 50%;
    bottom: 100%;
    -webkit-transform: rotate(-20deg) translateZ(0);
            transform: rotate(-20deg) translateZ(0);
				animation-delay: 3s;
			}
			
		
		
			}







@-webkit-keyframes bee {
  0% {
    right: 0;
    top: 450px; }
  
  25% {
    right: 10%;
    top: 300px;
    -webkit-transform: rotate(-60deg) translateZ(0);
            transform: rotate(-60deg) translateZ(0); }
  
  50% {
    right: 20%;
    top: 200px;
    -webkit-transform: rotate(-50deg) translateZ(0);
            transform: rotate(-50deg) translateZ(0); }
  
  75% {
    right: 30%;
    top: 100px;
    -webkit-transform: rotate(-30deg) translateZ(0);
            transform: rotate(-30deg) translateZ(0); }
  
  100% {
    right: 40%;
    top: -100px; } }

@keyframes bee {
   0% {
    top: 50%;
    left: 0%;
    transform: rotate(0deg);
  }
  25% {
    top: 25%;
    left: 50%;
    transform: rotate(90deg);
  }
  50% {
    top: 75%;
    left: 75%;
    transform: rotate(180deg);
  }
  75% {
    top: 50%;
    left: 50%;
    transform: rotate(270deg);
  }
  100% {
    top: 50%;
    left: 0%;
    transform: rotate(360deg);
  }
 }

@-webkit-keyframes bee-flip {
  0% {
    right: 50%;
    bottom: 0; }
  
  25% {
    right: 45%;
    bottom: 50px;
    -webkit-transform: rotate(60deg) translateZ(0);
            transform: rotate(60deg) translateZ(0); }
  
  50% {
    right: 20%;
    bottom: 100px;
    -webkit-transform: rotate(50deg) translateZ(0);
            transform: rotate(50deg) translateZ(0); }
  
  75% {
    right: 5%;
    bottom: 150px;
    -webkit-transform: rotate(30deg) translateZ(0);
            transform: rotate(30deg) translateZ(0); }
  
  100% {
    right: -25%;
    bottom: 200px; } }

@keyframes bee-flip {
  0% {
    right: 50%;
    bottom: 0; }
  
  25% {
    right: 45%;
    bottom: 50px;
    -webkit-transform: rotate(60deg) translateZ(0);
            transform: rotate(60deg) translateZ(0); }
  
  50% {
    right: 20%;
    bottom: 100px;
    -webkit-transform: rotate(50deg) translateZ(0);
            transform: rotate(50deg) translateZ(0); }
  
  75% {
    right: 5%;
    bottom: 150px;
    -webkit-transform: rotate(30deg) translateZ(0);
            transform: rotate(30deg) translateZ(0); }
  
  100% {
    right: -25%;
    bottom: 200px; } 
  
  }








    @-webkit-keyframes flower {
      0% {
        right: 0;
        top: 550px; }
      
      25% {
        right: 15%;
        top: 300px;
        -webkit-transform: rotate(-60deg) translateZ(0);
                transform: rotate(-60deg) translateZ(0); }
      
      50% {
        right: 25%;
        top: 200px;
        -webkit-transform: rotate(-50deg) translateZ(0);
                transform: rotate(-50deg) translateZ(0); }
      
      75% {
        right: 35%;
        top: 100px;
        -webkit-transform: rotate(-30deg) translateZ(0);
                transform: rotate(-30deg) translateZ(0); }
      
      100% {
        right: 45%;
        top: 0px; } }
    



    @keyframes flower {
      0% {
        top: 65%;
        right: 0%;
        transform: rotate(0deg);
      }
      25% {
        top: 25%;
        right: 50%;
        transform: rotate(90deg);
      }
      50% {
        top: 60%;
        right: 75%;
        transform: rotate(180deg);
      }
      75% {
        top: 50%;
        right: 50%;
        transform: rotate(270deg);
      }
      100% {
        top: 55%;
        right: 2%;
        transform: rotate(360deg);
      }
     }
    
    @-webkit-keyframes flower-flip {
      0% {
        right: 50%;
        bottom: 5%; }
      
      25% {
        right: 45%;
        bottom: 50px;
        -webkit-transform: rotate(60deg) translateZ(0);
                transform: rotate(60deg) translateZ(0); }
      
      50% {
        right: 20%;
        bottom: 100px;
        -webkit-transform: rotate(50deg) translateZ(0);
                transform: rotate(50deg) translateZ(0); }
      
      75% {
        right: 5%;
        bottom: 150px;
        -webkit-transform: rotate(30deg) translateZ(0);
                transform: rotate(30deg) translateZ(0); }
      
      100% {
        right: 5%;
        bottom: 200px; } }
    
    @keyframes flower-flip {
      0% {
        right: 50%;
        bottom: 5%; }
      
      25% {
        right: 45%;
        bottom: 50px;
        -webkit-transform: rotate(60deg) translateZ(0);
                transform: rotate(60deg) translateZ(0); }
      
      50% {
        right: 20%;
        bottom: 100px;
        -webkit-transform: rotate(50deg) translateZ(0);
                transform: rotate(50deg) translateZ(0); }
      
      75% {
        right: 5%;
        bottom: 150px;
        -webkit-transform: rotate(30deg) translateZ(0);
                transform: rotate(30deg) translateZ(0); }
      
      100% {
        right: 0%;
        bottom: 200px; }
      
      }