.spin {
    transform-origin: center center;
    animation:spin 4s linear infinite;
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.growShrink {
    transform-origin: center center;
    animation:growShrink 6s linear infinite;
}
@keyframes growShrink { 
	0% { transform:scale(1); } 
	50% { transform:scale(1.1); } 
	100% { transform:scale(1); } 
}


/* animateGlow */
.animateGlow{
    animation:animateGlowMe 1s linear infinite;
}

@keyframes animateGlowMe { 
    0% { filter:filter: hue-rotate(0deg) saturate(1); } 
    50% { filter:filter: hue-rotate(100deg)  saturate(2); opacity: 0.6; } 
    100% { filter:filter: hue-rotate(0deg)  saturate(1); } 
}

.cloud-animate{
    animation: float 6s ease-in-out infinite;
}

.cloud-animate-sm{
    animation: float-sm 10s ease-in-out infinite;
}

.question-animate{
    animation: float 6s ease-in-out infinite;
}

#top-cloud-1{
    animation-delay: -2s;
}
#top-cloud-2{
    animation-delay: -4s;
}


.floating-down-arrow-animation{
    animation: float 6s ease-in-out infinite;
}

.floating-down-arrow-animation-2{
     animation: float2 6s ease-in-out infinite;
}

.water-sway-animation{
    animation: watersway 10s ease-in-out infinite;
}



@keyframes float {
    0% {
        transform: translatey(-10px);
    }
    50% {
        transform: translatey(10px);
    }
    100% {
        transform: translatey(-10px);
    }
}

@keyframes float-sm {
    0% {
        transform: translatey(-5px);
    }
    50% {
        transform: translatey(5px);
    }
    100% {
        transform: translatey(-5px);
    }
}

@keyframes float2 {
    0% {
        transform: translatey(-30px);
    }
    50% {
        transform: translatey(20px);
    }
    100% {
        transform: translatey(-30px);
    }
}

@keyframes watersway {
    0% {
        transform: translatex(-18px);
    }
    50% {
        transform: translatex(18px);
    }
    100% {
        transform: translatex(-18px);
    }
}

.intro-platy-animate{
    animation: anifloat 6s ease-in-out infinite;
}

@keyframes anifloat {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-20px);
        transform: scale(1.03);
    }
    100% {
        transform: translatey(0px);
    }
}




.level-1-shake, .level-2-shake, .level-3-shake, .level-4-shake{
    transform-origin: center center;
    animation: shakeL1 250ms normal forwards ease-in-out;
}


@keyframes shakeL1 { 
     0% { transform: rotate(0deg); }
      12.5% { transform: rotate(5deg); }
      25% { transform: rotate(0deg); }
      37.5% { transform: rotate(-5deg); }
      50% { transform: rotate(0deg); }
      62.5% { transform: rotate(5deg); }
      75% { transform: rotate(0deg); }
      87.5% { transform: rotate(-5deg); }
      100% { transform: rotate(0deg); }
}