/*** BASE STYLES ***/


.js:not(.ie9) .animated:not(.visible) {
    visibility: hidden;
}

html.js:not(.ie9) body .animated.on-screen-passed:not(.visible) { /* I'll be honest I'm not sure why I added this ... */
	visibility: visible;
}

.animated {
    animation-duration: 1s;

}

.animated[class*="on-screen"] {
    animation-fill-mode: both;
}
.animated.animated-x05 {
    animation-duration: 0.5s;
}

.animated.animated-x2 {
    animation-duration: 2s;
}

.animated.animated-delay-01 { animation-delay: 0.1s; }
.animated.animated-delay-02 { animation-delay: 0.2s; }
.animated.animated-delay-03 { animation-delay: 0.3s; }
.animated.animated-delay-04 { animation-delay: 0.4s; }
.animated.animated-delay-05 { animation-delay: 0.5s; }
.animated.animated-delay-06 { animation-delay: 0.6s; }
.animated.animated-delay-07 { animation-delay: 0.7s; }
.animated.animated-delay-08 { animation-delay: 0.8s; }
.animated.animated-delay-09 { animation-delay: 0.9s; }
.animated.animated-delay-1 { animation-delay: 1s; }

.animated.infinite { animation-iteration-count: infinite; }

html.no-js body .animated {visibility: visible!important;} 



/*** ANIMATIONS ***/

/* Available Animations : fade-in slade-out-right fade-in-up spin */

/* Fade In */
@-webkit-keyframes fade-in {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes fade-in {
	0% {opacity: 0;} 100% {opacity: 1;}
}
@-o-keyframes fade-in {
	0% {opacity: 0;} 100% {opacity: 1;}
}
@keyframes fade-in {
	0% {opacity: 0;} 100% {opacity: 1;}
}
.animated[class*="on-screen"].fade-in {
	-webkit-animation-name: fade-in; -moz-animation-name: fade-in; -o-animation-name: fade-in; animation-name: fade-in;
}

/* Fade In Up */
@-webkit-keyframes fade-in-up {
	0% {opacity: 0; -webkit-transform: translateY(20px);}
	100% {opacity: 1; -webkit-transform: translateY(0);}
}
@-moz-keyframes fade-in-up {
	0% {opacity: 0;	-moz-transform: translateY(20px);} 100% {opacity: 1; -moz-transform: translateY(0);}
}
@-o-keyframes fade-in-up {
	0% {opacity: 0;	-o-transform: translateY(20px);} 100% {opacity: 1; -o-transform: translateY(0);}
}
@keyframes fade-in-up {
	0% {opacity: 0;	transform: translateY(20px);} 100% {opacity: 1; transform: translateY(0);}
}
.animated[class*="on-screen"].fade-in-up {
	-webkit-animation-name: fade-in-up; -moz-animation-name: fade-in-up; -o-animation-name: fade-in-up; animation-name: fade-in-up;
}


/* Slide In Left */
@-webkit-keyframes slide-in-left {
	0% { -webkit-transform: translateX(-101%);}
	100% { -webkit-transform: translateX(0%);}
}
@-moz-keyframes slide-in-left {
	0% {-moz-transform: translateX(-101%);} 100% { -moz-transform: translateX(0%);}
}
@-o-keyframes slide-in-left {
	0% {-o-transform: translateX(-101%);} 100% { -o-transform: translateX(0%);}
}
@keyframes slide-in-left {
	0% {	transform: translateX(-101%);} 100% { transform: translateX(0%);}
}
.animated[class*="on-screen"].slide-in-left {
	-webkit-animation-name: slide-in-left; -moz-animation-name: slide-in-left; -o-animation-name: slide-in-left; animation-name: slide-in-left;
}


/* Slide Out Right */
@-webkit-keyframes slide-out-right {
	0% { -webkit-transform: translateX(0%);}
	100% { -webkit-transform: translateX(101%);}
}
@-moz-keyframes slide-out-right {
	0% {-moz-transform: translateX(0%);} 100% { -moz-transform: translateX(101%);}
}
@-o-keyframes slide-out-right {
	0% {-o-transform: translateX(0%);} 100% { -o-transform: translateX(101%);}
}
@keyframes slide-out-right {
	0% {	transform: translateX(0%);} 100% { transform: translateX(101%);}
}
.animated[class*="on-screen"].slide-out-right {
	-webkit-animation-name: slide-out-right; -moz-animation-name: slide-out-right; -o-animation-name: slide-out-right; animation-name: slide-out-right;
}



/* Spin */

@-moz-keyframes spin { 0% {-moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg); } }

.animated[class*="on-screen"].spin {
	-webkit-animation-name: spin; -moz-animation-name: spin; -o-animation-name: spin; animation-name: spin;
}