/*
	Por Maiquel Melo
	
	A SEQUENCIA NUMÉRICA DAS CLASSES DEFINE A ORDEM DO DELAY. EXEMPLO:
		A classe 'fade1' faz o objeto aparecer um pouco antes da 'fade2' que aparece um pouco antes da 'fade3'...
*/


/*========================================================
                   	    MOVIMENTO
=========================================================*/
@keyframes movUp1 {
	0% { opacity:0;position:relative;top:100px;}
	100% { opacity:1;top:0;}
}
.movUp1{
	position:relative;
	top:0;
	animation: movUp1 1.8s ease-in-out;
}

@keyframes movUp2 {
	0% { opacity:0;position:relative;top:100px;}
	100% { opacity:1;top:0;}
}
.movUp2 {
	position:relative;
	top:0;
	animation: movUp2 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:0.5s;
	opacity:0;
}
@keyframes movUp3 {
	0% { opacity:0;position:relative;top:100px;}
	100% { opacity:1;top:0;}
}
.movUp3 {
	position:relative;
	top:0;
	animation: movUp3 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:1s;
	opacity:0;
}
@keyframes movUp4 {
	0% { opacity:0;position:relative;top:100px;}
	100% { opacity:1;top:0;}
}
.movUp4 {
	position:relative;
	top:0;
	animation: movUp4 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:1.5s;
	opacity:0;
}

@keyframes movDown1 {
	0% { opacity:0;position:relative;top:-50px;}
	100% { opacity:1;top:0;}
}
.movDown1{
	position:relative;
	top:0;
	animation: movDown1 1.8s ease-in-out;
}

@keyframes movDown2 {
	0% { opacity:0;position:relative;top:-50px;}
	100% { opacity:1;top:0;}
}
.movDown2 {
	position:relative;
	top:0;
	animation: movDown2 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:0.5s;
	opacity:0;
}
@keyframes movDown3 {
	0% { opacity:0;position:relative;top:-50px;}
	100% { opacity:1;top:0;}
}
.movDown3 {
	position:relative;
	top:0;
	animation: movDown3 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:1s;
	opacity:0;
}
@keyframes movDown4 {
	0% { opacity:0;position:relative;top:-50px;}
	100% { opacity:1;top:0;}
}
.movDown4 {
	position:relative;
	top:0;
	animation: movDown4 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:1.5s;
	opacity:0;
}
@keyframes movDown5 {
	0% { opacity:0;position:relative;top:-50px;}
	100% { opacity:1;top:0;}
}
.movDown5 {
	position:relative;
	top:0;
	animation: movDown5 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:2s;
	opacity:0;
}
@keyframes movDown6 {
	0% { opacity:0;position:relative;top:-50px;}
	100% { opacity:1;top:0;}
}
.movDown6 {
	position:relative;
	top:0;
	animation: movDown6 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:2.5s;
	opacity:0;
}

@keyframes movDown7 {
	0% { opacity:0;position:relative;top:-50px;}
	100% { opacity:1;top:0;}
}
.movDown7 {
	position:relative;
	top:0;
	animation: movDown7 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:3s;
	opacity:0;
}

@keyframes movDown8 {
	0% { opacity:0;position:relative;top:-50px;}
	100% { opacity:1;top:0;}
}
.movDown8 {
	position:relative;
	top:0;
	animation: movDown6 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:3.5s;
	opacity:0;
}

@keyframes movLeft1 {
	0% { opacity:0;position:relative;left:100px;}
	100% { opacity:1;left:0;}
}
.movLeft1{
	position:relative;
	left:0;
	animation: movLeft1 1.8s ease-in-out;
}

@keyframes movLeft2 {
	0% { opacity:0;position:relative;left:100px;}
	100% { opacity:1;left:0;}
}
.movLeft2{
	position:relative;
	left:0;
	animation: movLeft2 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:0.5s;
	opacity:0;
}
@keyframes movLeft3 {
	0% { opacity:0;position:relative;left:100px;}
	100% { opacity:1;left:0;}
}
.movLeft3{
	position:relative;
	left:0;
	animation: movLeft3 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:1s;
	opacity:0;
}
@keyframes movLeft4 {
	0% { opacity:0;position:relative;left:100px;}
	100% { opacity:1;left:0;}
}
.movLeft4{
	position:relative;
	left:0;
	animation: movLeft4 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:1.5s;
	opacity:0;
}



/*========================================================
                   		FADE
=========================================================*/
@keyframes fade1 {
	0% { opacity:0;}
	100% { opacity: 1;}
}
@keyframes fade1a {
	0% { opacity:0;}
	100% { opacity: 1;}
}
@keyframes fade1b {
	0% { opacity:0;}
	100% { opacity: 1;}
}
@keyframes fade1c {
	0% { opacity:0;}
	100% { opacity: 1;}
}
.fade1 {
	animation: fade1 1.8s ease-in-out;
}
.fade1a {
	animation: fade1a 1.8s ease-in-out;
}
.fade1b {
	animation: fade1b 1.8s ease-in-out;
}
.fade1c {
	animation: fade1c 1.8s ease-in-out;
}

@keyframes fade2 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.fade2 {
	opacity:0;
	animation: fade2 1.8s ease-in-out; 
	animation-fill-mode:forwards;
	animation-delay:0.5s;
}

@keyframes fade3 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.fade3 {
	opacity:0;
	animation: fade3 1.8s ease-in-out; 
	animation-fill-mode:forwards;
	animation-delay:1s;
}


@keyframes fade4 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.fade4 {
	opacity:0;
	animation: fade4 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:1.5s;
}

@keyframes fade5 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.fade5 {
	opacity:0;
	animation: fade5 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:2s;
}


@keyframes fade6 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.fade6 {
	opacity:0;
	animation: fade6 1.8s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:2.5s;
}