/* Animation reverse */

.reverse-ani {
	animation-direction: reverse;
}

/* fade in */

.fadeIn {
	animation:fadeIn .5s both ease;
	-webkit-animation:fadeIn .5s both ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* fade out */

.fadeOut {
	animation:fadeOut .5s both ease!important;
	-webkit-animation:fadeOut .5s both ease!important;
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

/* fade out */

.fadeOutDestroy {
	animation:fadeOutDestroy .5s both ease;
	-webkit-animation:fadeOutDestroy .5s both ease;
}

@keyframes fadeOutDestroy {
	from {
		opacity: 1;
	}

	99% {
		opacity: 0;
		visibility: visible
	}
	to{
		opacity:0;
		visibility: hidden;
	}
}

/* fade in top */

.fadeInTop {
	animation:fadeInTop .5s both ease;
	-webkit-animation:fadeInTop .5s both ease;
}

@keyframes fadeInTop {
	from {
		transform: translate(0, -20px);
		-webkit-transform: translate(0, -20px);
		-moz-transform: translate(0, -20px);
		-ms-transform: translate(0, -20px);
		-o-transform: translate(0, -20px);
		opacity: 0;
}

	to {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		opacity: 1;
	}
}

/* fade in btm */

.fadeInBtm {
	animation:fadeInBtm .5s both ease;
	-webkit-animation:fadeInBtm .5s both ease;
}

@keyframes fadeInBtm {
	from {
		transform: translate(0, 20px);
		-webkit-transform: translate(0, 20px);
		-moz-transform: translate(0, 20px);
		-ms-transform: translate(0, 20px);
		-o-transform: translate(0, 20px);
		opacity: 0;
}

	to {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		opacity: 1;
	}
}

/* fade in btm Hacky */

.fadeInBtmHack {
	animation:fadeInBtmHack .5s both ease;
	-webkit-animation:fadeInBtmHack .5s both ease;
}

@keyframes fadeInBtmHack {
	from {
		top:10px;
		opacity: 0;
}

	to {
		top:0;
		opacity: 1;
	}
}

/* Reveal in Left */

.revealInLeft {
	animation:revealInLeft .5s both ease;
	-webkit-animation:revealInLeft .5s both ease;
}

@keyframes revealInLeft {
	from {
		transform: translate(-100%, 0);
		-webkit-transform: translate(-100%, 0);
		-moz-transform: translate(-100%, 0);
		-ms-transform: translate(-100%, 0);
		-o-transform: translate(-100%, 0);
}

	to {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
	}
}


/* Reveal in Right */

.revealInRight {
	animation:revealInRight .5s both ease;
	-webkit-animation:revealInRight .5s both ease;
}

@keyframes revealInRight {
	from {
		transform: translate(100%, 0);
		-webkit-transform: translate(100%, 0);
		-moz-transform: translate(100%, 0);
		-ms-transform: translate(100%, 0);
		-o-transform: translate(100%, 0);
}

	to {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
	}
}


/* Reveal out Left */

.revealOutLeft {
	animation:revealOutLeft .5s both ease;
	-webkit-animation:revealOutLeft .5s both ease;
}

@keyframes revealOutLeft {
	from {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);  
}

	to {
		transform: translate(-100%, 0);
		-webkit-transform: translate(-100%, 0);
		-moz-transform: translate(-100%, 0);
		-ms-transform: translate(-100%, 0);
		-o-transform: translate(-100%, 0);
	}
}

/* Reveal out Right */

.revealOutRight {
	animation:revealOutRight .5s both ease;
	-webkit-animation:revealOutRight .5s both ease;
}

@keyframes revealOutRight {
	from {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);  
}

	to {
		transform: translate(100%, 0);
		-webkit-transform: translate(100%, 0);
		-moz-transform: translate(100%, 0);
		-ms-transform: translate(100%, 0);
		-o-transform: translate(100%, 0);
}
}


/* Reveal in Bottom */

.revealInBtm {
	animation:revealInBtm .5s both ease;
	-webkit-animation:revealInBtm .5s both ease;
}

@keyframes revealInBtm {
	from {
		transform:skewY(5deg) translate(0, 250%);
		-webkit-transform:skewY(5deg) translate(0, 250%);
		-moz-transform:skewY(5deg) translate(0, 250%);
		-ms-transform:skewY(5deg) translate(0, 250%);
		-o-transform:skewY(5deg) translate(0, 250%);
}

	to {
		transform:skewY(0deg) translate(0, 0);
		-webkit-transform:skewY(0deg) translate(0, 0);
		-moz-transform:skewY(0deg) translate(0, 0);
		-ms-transform:skewY(0deg) translate(0, 0);
		-o-transform:skewY(0deg) translate(0, 0);
}
}

/* Reveal out Bottom */

.revealOutBtm {
	animation:revealOutBtm .5s both ease!important;
	-webkit-animation:revealOutBtm .5s both ease!important;
}

@keyframes revealOutBtm {
	from {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
}

	to {
		transform: translate(0, 150%);
		-webkit-transform: translate(0, 150%);
		-moz-transform: translate(0, 150%);
		-ms-transform: translate(0, 150%);
		-o-transform: translate(0, 150%);
}
}

/* Reveal in Top */

.revealInTop {
	animation:revealInTop .5s both ease;
	-webkit-animation:revealInTop .5s both ease;
}

@keyframes revealInTop {
	from {
		transform: translate(0, -150%);
		-webkit-transform: translate(0, -150%);
		-moz-transform: translate(0, -150%);
		-ms-transform: translate(0, -150%);
		-o-transform: translate(0, -150%);
}

	to {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
}
}

/* Reveal out Top */

.revealOutTop {
	animation:revealOutTop .5s both ease;
	-webkit-animation:revealOutTop .5s both ease;
}

@keyframes revealOutTop {
	from {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
}

	to {
		transform: translate(0, -150%);
		-webkit-transform: translate(0, -150%);
		-moz-transform: translate(0, -150%);
		-ms-transform: translate(0, -150%);
		-o-transform: translate(0, -150%);
}
}


/* Bob */

.bob {
	animation:bob .5s both ease;
	-webkit-animation:bob .5s both ease;
}

@keyframes bob {
	from {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
	}

	50% {
		transform: translate(0, -10px);
		-webkit-transform: translate(0, -10px);
		-moz-transform: translate(0, -10px);
		-ms-transform: translate(0, -10px);
		-o-transform: translate(0, -10px);
	}
	to {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
	}
}

/* Bounce */
.bounce {
	-moz-animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	animation: bounce 3s infinite;
	animation-delay: 3s;
}

@keyframes bounce {
	0%, 30%, 65%, 90%, 100% {
		transform: translateY(0);
	}
	60% {
		transform: translateY(-7px);
	}
	70% {
		transform: translateY(-3px);
	}
}
/* Animation timings */

.a-both {
	animation-fill-mode: both !important;
}

.a-forwards {
	animation-fill-mode: forwards !important;
}

.a-backwards {
	animation-fill-mode: backwards !important;
}

.a-d-025 {
	animation-delay: 0.25s !important;
}

.a-d-05 {
	animation-delay: 0.5s !important;
}

.a-d-075 {
	animation-delay: 0.75s !important;
}

.a-d-1 {
	animation-delay: 1s !important;
}

.a-d-2 {
	animation-delay: 2s !important;
}

.a-d-3 {
	animation-delay: 3s !important;
}