.blink-me{
    will-change: background-image;
}

.source-hand-animation{
	animation-name: source_animation;
	animation-duration: 10s;
	animation-fill-mode: forwards;

}

.hoverover{
	background-color: #237387;
}

#intro_platypus{
    animation: hoverPlat 2s infinite  alternate;
}

#intro_thought_bubble{
    animation: hoverSpeech 3.5s infinite  alternate;
}

#intro_how_to_play a.btn{
    animation: playColour 5s infinite;
}



.sun-spin{
    animation: sun-spin 10s infinite  forwards;
}

#htp_thought_bubble{
    animation: hoverSpeech2 3.5s infinite  alternate;
}

.inviteFade{
    animation: inviteFade 3s infinite alternate;
}
.inviteMove{
    animation: inviteMove 5s infinite alternate;
}

.endBushesMove{
    animation: endBushesMove 5s infinite alternate;
}

.bee-hover{
    animation: bee-hover 3.5s infinite  alternate;
}

.watering-can-tip{
    animation: watering-can-tip 5s infinite alternate;
}

.treeMove{
    animation: treeMove 5s infinite forwards;
}

.rotate-sun-shine{
    animation: rotate-sun-shine 40s infinite forwards;
    animation-timing-function: linear;
}
.well-done-apple-hover{
    animation: well-done-apple-hover 2.5s forwards;
    animation-iteration-count: 2;
}
.welldone-h1-animation{
    animation: welldone-h1-animation 0.65s alternate;
    animation-iteration-count: 2;
}

.home-apple-animate{
    animation: home-apple-animate 15s infinite forwards;
}

.tag-swing{
    animation: tag-swing 0.65s forwards;
    animation-iteration-count: 1;
}
.tree-intro{
    animation: tree-intro 2s forwards;
    animation-iteration-count: 1;
}


@keyframes tree-intro{
    0% { transform: scale(1.1); animation-timing-function: ease-out;}
    100% { transform: scale(1); animation-timing-function: ease-out;}
}

@keyframes tag-swing{
    0% { transform: rotate(-10deg); animation-timing-function: ease-out;}
    10% { transform: rotate(8deg); animation-timing-function: ease-in;}
    20% { transform: rotate(-6deg); animation-timing-function: ease-out;}
    30% { transform: rotate(5deg); animation-timing-function: ease-in;}
    40% { transform: rotate(-4deg); animation-timing-function: ease-in;}
    50% { transform: rotate(3deg); animation-timing-function: ease-in;}
    60% { transform: rotate(-2deg); animation-timing-function: ease-in;}
    70% { transform: rotate(1deg); animation-timing-function: ease-in;}
    80% { transform: rotate(0deg); animation-timing-function: ease-in;}
}

@keyframes home-apple-animate {
    0% { transform: scale(1) rotate(0deg); animation-timing-function: ease-out;}
    25% { transform: scale(1.05)  rotate(-10deg); animation-timing-function: ease-in;}
    50% { transform: scale(1)  rotate(0deg); animation-timing-function: ease-out;}
    75% { transform: scale(1.03)  rotate(5deg); animation-timing-function: ease-in; }
    100% { transform: scale(1) rotate(0deg);  animation-timing-function: ease-out;}
}

@keyframes home-apple-animate {
    0% { transform: scale(1) rotate(0deg); animation-timing-function: ease-out;}
    25% { transform: scale(1.05)  rotate(-10deg); animation-timing-function: ease-in;}
    50% { transform: scale(1)  rotate(0deg); animation-timing-function: ease-out;}
    75% { transform: scale(1.03)  rotate(5deg); animation-timing-function: ease-in; }
    100% { transform: scale(1) rotate(0deg);  animation-timing-function: ease-out;}
}

@keyframes inviteMove {
    0% { transform: scale(1); }
    100% { transform: scale(1.06); }
}



@keyframes welldone-h1-animation {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

@keyframes well-done-apple-hover{
    
    0%{ transform: translateY(0)  rotate(0deg); animation-timing-function: ease-out; }
    25% { transform: translateY(-80px) rotate(-5deg); animation-timing-function: ease-in; }
    50% { transform: translateY(0)  rotate(0deg); animation-timing-function: ease-out; }
    75% { transform: translateY(-80px) rotate(5deg); animation-timing-function: ease-in; }
    100% { transform: translateY(0)  rotate(0deg); animation-timing-function: ease-out; }

}

@keyframes rotate-sun-shine{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(260deg); }
}

@keyframes rotate-sun-shine-2{
    0% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
    100% { transform: rotate(-15deg); }
}


@keyframes treeMove {
    0% { transform: rotate(0deg);  }
    25% { transform: rotate(-1deg); }
    50% { transform: rotate(0deg);  }
    75% { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}

@keyframes inviteFade {
    
    0% { color: #FFFFFF ; }
    92% { color: #FFFFFF ; }
    100% { color: #bbd864 ; }
}


@keyframes endBushesMove {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

@keyframes watering-can-tip {
    0% { transform: rotate(0deg) translateY(0);;  }
    70% { transform: rotate(0deg) translateY(-20px); }
    100% { transform: rotate(-40deg) translateY(-80px); }
}


@keyframes playColour {
    0% { color: #FFFFFF ; }
    80% { color: #fbc310 ; }
    90% { color: #FFFFFF; }
    100% { color: #fbc310 ; }
}


@keyframes hoverPlat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@keyframes bee-hover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-40px); }
}

@keyframes sun-spin {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(10px) rotate(80deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes hoverSpeech2 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@keyframes color-change {
  0% { color: red; }
  50% { color: blue; }
  100% { color: red; }
}


@keyframes source_animation {

  0% {top: 405px; left: 729px}
  5% {top: 405px; left: 729px}
  
  10% {top: 515px; left: 789px}
  15% {top: 515px; left: 789px}

  20% {top: 615px; left: 800px}
  25% {top: 615px; left: 800px}

  30% {top: 715px; left: 800px}
  35% {top: 715px; left: 800px}
  40% {top: 715px; left: 800px}




  50% {top: 847px; left: 915px}
  55% {top: 847px; left: 915px}


  60% {top: 615px; left: 1062px}
  65% {top: 615px; left: 1062px}

  70% {top: 715px; left: 1062px}
  75% {top: 715px; left: 1062px}






  95% {top: 715px; left: 1062px}
  100% {top: 715px; left: 1062px}


}

.bounce-me-in{
	animation-name: bounceMeIn;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}

.bounce-me-out{
	animation-name: bounceMeOut;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}


@keyframes bounceMeIn {

	0%{
		animation-timing-function: ease-out;
        transform: scale(0);
	}

    55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: scale(1);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: scale(1.15);
    }
    70% {
        animation-timing-function: ease-in;
        transform: scale(1.05);
    }
    90% { transform: scale(1.01) }
}

@keyframes bounceMeOut {

	0%{
		animation-timing-function: ease-out;
        transform: scale(1.01);
	}
	60%{
		animation-timing-function: ease-out;
        transform: scale(1.25);
        opacity: 1;
	}
    100% { transform: scale(0.5); opacity: 0; }
}