.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;
}

#htp_platypus{
    animation: hoverPlat2 2s infinite  alternate;
}

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

#cta{
    animation: ctaColour 2s infinite alternate;
}

@keyframes ctaColour {
    0% { color: #FFFFFF ; }
    70% { color: #FFFFFF ; }
    90% { color: #fbc310; }
    100% { color: #FFFFFF ; }
}


@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 hoverSpeech {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

@keyframes hoverPlat2 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

@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; }
}