/*Animation css*/



.animated {

    animation-duration: 1s;

	-webkit-animation-duration: 1s;

    animation-fill-mode: both;

    -webkit-animation-fill-mode: both;

}

.animated.hinge {

    animation-duration: 2s;

	-webkit-animation-duration: 2s;

}

/*.....................fadeIn....................*/



@keyframes fadeIn {

0% {

    opacity: 0;

}

100% {

    opacity: 1;

}

}



@-webkit-keyframes fadeIn {

0% {

    opacity: 0;

}

100% {

    opacity: 1;

}

}

.animated.fadeIn {

    animation-name: fadeIn;

	-webkit-animation-name: fadeIn;

}







/*.....................slideInLeft....................*/

@keyframes slideInLeft {

0% {

    opacity: 0;

    transform: translateX(-2000px);

}

100% {

    transform: translateX(0px);

}

}



@-webkit-keyframes slideInLeft {

0% {

    opacity: 0;

    -webkit-transform: translateX(-2000px);

	-0-transform: translateX(-2000px);

}

100% {

    -webkit-transform: translateX(0px);

	-o-transform: translateX(0px);

	}

}



.animated.slideInLeft {

    animation-name: slideInLeft;

	-webkit-animation-name:slideInLeft;

}







/*.....................slideInRight....................*/

@keyframes slideInRight {

0% {

    opacity: 0;

    transform: translateX(2000px);

}

100% {

    transform: translateX(0px);

}

}

@-webkit-keyframes slideInRight {

0% {

    opacity: 0;

    -webkit-transform: translateX(2000px);

    -o-transform: translateX(2000px);

	

}

100% {

    -webkit-transform: translateX(0px);

    -o-transform: translateX(0px);	

}

}

.animated.slideInRight {

    animation-name: slideInRight;

    -webkit-animation-name: slideInRight;

    -o-animation-name: slideInRight;	



}







/*.....................pulseUp....................*/

@keyframes pulseUp {

0% {

    transform: scale(1);

}

50% {

    transform: scale(1.1);

}

100% {

    transform: scale(1.1);

}

}

@-webkit-keyframes pulseUp {

0% {

    -webkit-transform: scale(1);

    -0-transform: scale(1);	

}

50% {

    -webkit-transform: scale(1.1);

    -o-transform: scale(1.1);	

}

100% {

    -webkit-transform: scale(1.1);

    -o-transform: scale(1.1);	

}

}

.animated.pulseUp {

    animation-name: pulseUp;

   -webkit-animation-name: pulseUp;

   -o-animation-name: pulseUp;   

}







/*.....................fadeInUp....................*/

@keyframes fadeInUp {

0% {

    opacity: 0;

    transform: translateY(50px);

}

100% {

    opacity: 1;

    transform: translateY(0px);

}

}

@-webkit-keyframes fadeInUp {

0% {

    opacity: 0;

    -webkit-transform: translateY(50px);

    -o-transform: translateY(50px);	

}

100% {

    opacity: 1;

   -webkit-transform: translateY(0px);

   -o-transform: translateY(0px);   

}

}

.animated.fadeInUp  {

    animation-name:fadeInUp;

	-webkit-animation-name:fadeInUp;

	-o-animation-name:fadeInUp;	

	 animation-duration: 1s;

	-webkit-animation-duration: 1s;

    animation-fill-mode: both;

    -webkit-animation-fill-mode: both;

}







/*.....................flipInX....................*/

@keyframes flipInX {

0% {

    opacity: 0;

    transform: perspective(400px) rotateX(90deg);

}

40% {

    transform: perspective(400px) rotateX(-10deg);

}

70% {

    transform: perspective(400px) rotateX(10deg);

}

100% {

    opacity: 1;

    transform: perspective(400px) rotateX(0deg);

}

}

@-webkit-keyframes flipInX {

0% {

    opacity: 0;

    -webkit-transform: perspective(400px) rotateX(90deg);

    -o-transform: perspective(400px) rotateX(90deg);	

}

40% {

    -webkit-transform: perspective(400px) rotateX(-10deg);

    -o-transform: perspective(400px) rotateX(-10deg);	

}

70% {

   -webkit-transform: perspective(400px) rotateX(10deg);

   -0-transform: perspective(400px) rotateX(10deg);   

}

100% {

    opacity: 1;

   -webkit-transform: perspective(400px) rotateX(0deg);

   -o-transform: perspective(400px) rotateX(0deg);

}

}

.animated.flipInX {

    animation-name: flipInX;

   -webkit-animation-name: flipInX;	

   -o-animation-name: flipInX;	   

    backface-visibility: visible !important;

}







/*.....................flip....................*/



@keyframes  flip {

0% {

    animation-timing-function: ease-out;

    transform: perspective(400px) translateZ(0px) rotateY(0deg) scale(1);

}

40% {

    animation-timing-function: ease-out;

    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);

}

50% {

    animation-timing-function: ease-in;

    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);

}

80% {

    animation-timing-function: ease-in;

    transform: perspective(400px) translateZ(0px) rotateY(360deg) scale(0.95);

}

100% {

    animation-timing-function: ease-in;

    transform: perspective(400px) translateZ(0px) rotateY(360deg) scale(1);

}

}

@-webkit-keyframes flip {

0% {

    -webkit-animation-timing-function: ease-out;

    -webkit-transform: perspective(400px) translateZ(0px) rotateY(0deg) scale(1);

	

	-o-animation-timing-function: ease-out;

    -o-transform: perspective(400px) translateZ(0px) rotateY(0deg) scale(1);

}

40% {

   -webkit-animation-timing-function: ease-out;

   -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);



   -o-animation-timing-function: ease-out;

   -o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);



}

50% {

   -webkit-animation-timing-function: ease-in;

   -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);

   -o-animation-timing-function: ease-in;

   -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);



}

80% {

   -webkit-animation-timing-function: ease-in;

   -webkit-transform: perspective(400px) translateZ(0px) rotateY(360deg) scale(0.95);

   -o-animation-timing-function: ease-in;

   -o-transform: perspective(400px) translateZ(0px) rotateY(360deg) scale(0.95);

}

100% {

   -webkit-animation-timing-function: ease-in;

   -webkit-transform: perspective(400px) translateZ(0px) rotateY(360deg) scale(1);

   

   -o-animation-timing-function: ease-in;

   -o-transform: perspective(400px) translateZ(0px) rotateY(360deg) scale(1);

}

}



/*.....................flip....................*/



/* Scroll to effect */

.animate.start {

    -webkit-animation-fill-mode:both;

    -moz-animation-fill-mode:both;

    -ms-animation-fill-mode:both;

    -o-animation-fill-mode:both;

    animation-fill-mode:both;

    -webkit-animation-duration:1s;

    -moz-animation-duration:1s;

    -ms-animation-duration:1s;

    -o-animation-duration:1s;

    animation-duration:1s;

}

@-webkit-keyframes slideInUp {

    0% {

        opacity:0;

        -webkit-transform:translateY(2000px);

    }



    100% {

        -webkit-transform:translateY(0);

    }



}

@-moz-keyframes slideInUp {

    0% {

        opacity:0;

        -moz-transform:translateY(2000px);

    }



    100% {

        -moz-transform:translateY(0);

    }



}

@-o-keyframes slideInUp {

    0% {

        opacity:0;

        -o-transform:translateY(2000px);

    }



    100% {

        -o-transform:translateY(0);

    }



}

@keyframes slideInUp {

    0% {

        opacity:0;

        transform:translateY(2000px);

    }



    100% {

        transform:translateY(0);

    }



}



.animated.slideInUp {

    -webkit-animation-name:slideInUp;

    -moz-animation-name:slideInUp;

    -o-animation-name:slideInUp;

    animation-name:slideInUp;

		

}





.ani-activate {visibility:hidden;}

.animated {visibility:visible !important;}





/*.................................................................*/