/*********************
    - Animations -
*********************/
.flex-fade-in, .flex-flip-in-x, .flex-flip-in-y, .flex-zoom-in {
	-webkit-animation-duration:1s;
			animation-duration:1s;
	-webkit-animation-fill-mode:both;
			animation-fill-mode:both;
}

@-webkit-keyframes fade-in {
  	0% {
    	opacity:0;
  	}

  	100% {
    	opacity:1;
  	}
}

@keyframes fade-in {
  	0% {
    	opacity:0;
  	}

  	100% {
    	opacity:1;
  	}
}

.flex-fade-in {
  	-webkit-animation-name:fade-in;
  			animation-name:fade-in;
}

@-webkit-keyframes flip-in-x {
  	0% {
    	-webkit-transform:perspective(400px) rotateX(90deg) scale(.3);
    			transform:perspective(400px) rotateX(90deg) scale(.3);
    	opacity:0;
  	}
  
  	100% {
    	-webkit-transform:perspective(400px) rotateX(0deg) scale(1);
    			transform:perspective(400px) rotateX(0deg) scale(1);
    	opacity:1;
  	}
}

@keyframes flip-in-x {
  	0% {
    	-webkit-transform:perspective(400px) rotateX(90deg) scale(.3);
    		-ms-transform:perspective(400px) rotateX(90deg) scale(.3);
    			transform:perspective(400px) rotateX(90deg) scale(.3);
    	opacity:0;
  	}

  	100% {
    	-webkit-transform:perspective(400px) rotateX(0deg) scale(1);
    		-ms-transform:perspective(400px) rotateX(0deg) scale(1);
    			transform:perspective(400px) rotateX(0deg) scale(1);
    	opacity:1;
  	}
}

.flex-flip-in-x {
  	-webkit-backface-visibility:visible !important;
  		-ms-backface-visibility:visible !important;
  	backface-visibility:visible !important;
  	-webkit-animation-name:flip-in-x;
  			animation-name:flip-in-x;
}

@-webkit-keyframes flip-in-y {
  	0% {
    	-webkit-transform:perspective(400px) rotateY(90deg) scale(.3);
    		transform:perspective(400px) rotateY(90deg) scale(.3);
    	opacity:0;
  	}

  	100% {
    	-webkit-transform:perspective(400px) rotateY(0deg) scale(1);
    		transform:perspective(400px) rotateY(0deg) scale(1);
    	opacity:1;
  	}
}

@keyframes flip-in-y {
	0% {
		-webkit-transform:perspective(400px) rotateY(90deg) scale(.3);
    		-ms-transform:perspective(400px) rotateY(90deg) scale(.3);
    			transform:perspective(400px) rotateY(90deg) scale(.3);
    	opacity:0;
  	}

  	100% {
   	 	-webkit-transform:perspective(400px) rotateY(0deg) scale(1);
    		-ms-transform:perspective(400px) rotateY(0deg) scale(1);
    			transform:perspective(400px) rotateY(0deg) scale(1);
    	opacity:1;
  	}
}

.flex-flip-in-y {
  	-webkit-backface-visibility:visible !important;
  		-ms-backface-visibility:visible !important;
  			backface-visibility:visible !important;
  	-webkit-animation-name:flip-in-y;
  			animation-name:flip-in-y;
}

@-webkit-keyframes zoom-in {
  	0% {
    	opacity:0;
    	-webkit-transform:scale(.3);
    			transform:scale(.3);
  	}

  	100% {
    	opacity:1;
    	-webkit-transform:scale(1);
    			transform:scale(1);
  	}
}

@keyframes zoom-in {
  	0% {
    	opacity:0;
    	-webkit-transform:scale(.3);
    		-ms-transform:scale(.3);
    			transform:scale(.3);
  	}

  	100% {
   	 	opacity:1;
    	-webkit-transform:scale(1);
    		-ms-transform:scale(1);
    			transform:scale(1);
  	}
}

.flex-zoom-in {
  	-webkit-animation-name:zoom-in;
  			animation-name:zoom-in;
}