/* Animaçções de texto */
header ul {
	display: none;
}
header span, h3 span {
	opacity: 0;
	animation: fadein .5s ease-out;
	animation-fill-mode: forwards;
	margin: 0px;
	padding: 0px;
}

.animeletters, .animewords, .animephrase {
	opacity: 0;
}
.txtactive, .fadein {
	animation-name: fadein;
	animation-duration: 1s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
	display: inline-block;
	opacity: 0;
}
.animephrase.txtactive {
	display: block;
	animation-timing-function: ease-out;
}
.fromtop .txtactive, .fromtop.txtactive {
	animation-name: fromtop;
	animation-duration: 0.3s;
}
.frombottom .txtactive, .frombottom.txtactive {
	animation-name: frombottom;
	animation-duration: 0.3s;
}
.fromleft .txtactive, .fromleft.txtactive {
	animation-name: fromleft;
	animation-duration: 0.3s;
}
.fromright .txtactive, .fromright.txtactive {
	animation-name: fromright;
	animation-duration: 0.3s;
}
.twist .txtactive, .twist.txtactive {
	animation-name: twist;
	animation-duration: 0.6s;
}
.push .txtactive, .push.txtactive {
	animation-name: push;
	animation-duration: 0.5s;
}
.drop .txtactive, .drop.txtactive {
	animation-name: drop;
	animation-duration: 0.5s;
}
.rotateleft .txtactive, .rotateleft.txtactive {
	animation-name: rotateleft;
	animation-duration: 0.3s;
}
.rotateright .txtactive, .rotateright.txtactive {
	animation-name: rotateright;
	animation-duration: 0.3s;
}
.racefromright .txtactive, .racefromright.txtactive {
	animation-name: racefromright;
	animation-duration: 0.3s;
}
.racefromleft .txtactive, .racefromleft.txtactive {
	animation-name: racefromleft;
	animation-duration: 0.3s;
}
.wave .txtactive, .wave.txtactive {
	animation-name: wave;
	animation-duration: 0.6s;
}

/* Animação botoes */
header .button {
	padding-top: 40px;
	display: inline-block;
	vertical-align: top;
}

.button.fromtop {
	animation-name: fromtop;
	animation-duration: 1s;
}
.button.frombottom {
	animation-name: frombottom;
	animation-duration: 1s;
}
.button.fromleft {
	animation-name: fromleft;
	animation-duration: 1s;
}
.button.fromright {
	animation-name: fromright;
	animation-duration: 1s;
}
.button.twist {
	animation-name: twist;
	animation-duration: 1s;
}
.button.push {
	animation-name: push;
	animation-duration: 1s;
}
.button.drop {
	animation-name: drop;
	animation-duration: 1s;
}
.button.rotateleft {
	animation-name: rotateleft;
	animation-duration: 1s;
}
.button.rotateright {
	animation-name: rotateright;
	animation-duration: 1s;
}
.button.racefromright {
	animation-name: racefromright;
	animation-duration: 1s;
}
.button.racefromleft {
	animation-name: racefromleft;
	animation-duration: 1s;
}
.button.wave {
	animation-name: wave;
	animation-duration: .8s;
}

.word {
	display: inline-block;
	white-space: nowrap;
}

.reveal.active {
	animation: 1s reveal ease-out;
}

@keyframes reveal {
	0% {
		transform: translateY(100px);
		opacity: 0;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}
@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes fromtop {
	0% {
		/*transform: translateY(-100%);*/
		transform: translateY(-50px);
		opacity: 0;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}
@keyframes frombottom {
	0% {
		/*transform: translateY(100%);*/
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}

@keyframes fromleft {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}
@keyframes fromright {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}
@keyframes twist {
	0% {
		transform: scale(-2);
		opacity: 0;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}
@keyframes push {
	0% {
    	transform: scale(0.1,0.1);
		opacity: 0;
    }
    100% {
    	transform: none;
		opacity: 1;
    }
}
@keyframes drop {
	0% {
		transform: scale(2, 2);
		opacity: 0;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}
@keyframes rotateright {
	0% {
		transform: rotate(-180deg);
		opacity: 0;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}
@keyframes rotateleft {
	0% {
		transform: rotate(180deg);
		opacity: 0;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}
@keyframes wave {
	0% {
		transform: scale(0.1,0.1);
		opacity: 0;
	}
	75% {
		transform: scale(1.5,1.5);
	}
	100% {
		transform: none;
		opacity: 1;
	}
}
@keyframes racefromright {
	0% {
		transform: translateX(500%) skewX(-50deg);
		opacity: 0;
	}
	90% {
		transform: translateX(0) skewX(-50deg);
	}
	95% {
		transform: skewX(50deg);
	}
	100% {
		transform: none;
		opacity: 1;
	}
}
@keyframes racefromleft {
	0% {
		transform: translateX(-500%) skewX(50deg);
		opacity: 0;
	}
	90% {
		transform: translateX(0) skewX(50deg);
	}
	95% {
		transform: skewX(-50deg);
	}
	100% {
		transform: none;
		opacity: 1;
	}
}

@keyframes explode {
	0% {
		transform: none;
		opacity: 1;
	}
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}