:nth-child(1) { --nth-child: 1 }
:nth-child(2) { --nth-child: 2 }
:nth-child(3) { --nth-child: 3 }
:nth-child(4) { --nth-child: 4 }
:nth-child(5) { --nth-child: 5 }
:nth-child(6) { --nth-child: 6 }
:nth-child(7) { --nth-child: 7 }
:nth-child(8) { --nth-child: 8 }
:nth-child(9) { --nth-child: 9 }
:nth-child(10) { --nth-child: 10 }
:nth-child(11) { --nth-child: 11 }

.fanim-content-fadein > *{
	opacity:0;
	-webkit-transform: translateY(150px);
    transform: translateY(150px);
}
.fanim-content-fadein.anim > *{
	-webkit-animation: fadein-bot 1.2s calc(0.5s * var(--nth-child)) 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	-o-animation:      fadein-bot 1.2s calc(0.5s * var(--nth-child)) 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	animation:         fadein-bot 1.2s calc(0.5s * var(--nth-child))  1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}


@-webkit-keyframes swing {
	 20%, 40%, 60%, 80%, 100% {
		-webkit-transform-origin: top center;
	 }
	 20% {
		-webkit-transform: rotate(15deg);
	 }
	 40% {
		-webkit-transform: rotate(-10deg);
	 }
	 60% {
		-webkit-transform: rotate(5deg);
	 }
	 80% {
		-webkit-transform: rotate(-5deg);
	 }
	 100% {
		-webkit-transform: rotate(0deg);
		opacity: 1;
	}
}
@keyframes swing {
	 20% {
		-webkit-transform: rotate(15deg);
		transform: rotate(15deg);
	 }
	 40% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	 }
	 60% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	 }
	 80% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	 }
	 100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		opacity: 1;
	 }
}

/* FADEIN TOP LEFT */
.fadein-topleft{
	opacity:0;
	-webkit-transform: translateY(150px);
    transform: translateY(150px);
    will-change: transform,opacity;
}
.fadein-topleft.anim{
	-webkit-animation: fadein-bot 1.2s 0.5s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	-o-animation:      fadein-bot 1.2s 0.5s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	animation:         fadein-bot 1.2s 0.5s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes fadein-bot{
	0% {
		-webkit-transform:translateY(-150px) translateX(-150px);
    	transform: translateY(-150px) translateX(-150px);
		opacity:0;
	}
	100% {
		-webkit-transform: translateY(0px) translateX(0px);;
		transform: translateY(0px) translateX(0px);;
		opacity: 1;
	}
}

/* FADEIN BOT */
.fadein-bot{
	opacity:0;
	-webkit-transform: translateY(150px);
    transform: translateY(150px);
    will-change: transform,opacity;
}
.fadein-bot.anim{
	-webkit-animation: fadein-bot 1.2s 0.5s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	-o-animation:      fadein-bot 1.2s 0.5s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
	animation:         fadein-bot 1.2s 0.5s 1 ALTERNATE cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes fadein-bot{
	0% {
		-webkit-transform:translateY(150px);
    	transform: translateY(150px);
		opacity:0;
	}
	100% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		opacity: 1;
	}
}

.fanim-float{
    -webkit-animation: float 6s ease-in-out infinite;
    -moz-animation:    float 6s ease-in-out infinite;
    -o-animation:      float 6s ease-in-out infinite;
    animation:         float 6s ease-in-out infinite;
}

@-webkit-keyframes float {
	0% {
        opacity: 1;
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
        opacity: 1;
		transform: translateY(0px);
	}
}
@keyframes float {
	0% {
        opacity: 1;
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
        opacity: 1;
		transform: translateY(0px);
	}
}

.slowpan{
	-webkit-animation: slowpan 20s infinite ALTERNATE linear forwards;
	-o-animation:      slowpan 20s infinite ALTERNATE linear forwards;
	animation:         slowpan 20s infinite ALTERNATE linear forwards;
}
@-webkit-keyframes slowpan {
	0% {
		left: 0;
		bottom:0;
        transform:translate(0,0);
	}
	100% {
		left: 100%;
		bottom:100%;
        transform:translate(-100%,100%);        
	}
}
@keyframes slowpan {
	0% {
		left: 0;
		bottom:0;
        transform:translate(0,0);
	}
	100% {
		left: 100%;
		bottom:100%;
        transform:translate(-100%,100%);        
	}
}