﻿@charset "UTF-8";
/*
myAnimation.css
*/
body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
	-webkit-backface-visibility: hidden;
}
.animated {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}


@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(800px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(800px) rotateY(90deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInY {
    0% {
        -moz-transform: perspective(800px) rotateY(0deg);
        opacity: 1;
    }
    
    100% {
        -moz-transform: perspective(800px) rotateY(90deg);
        opacity: 1;
    }
}
@-o-keyframes flipInY {
    0% {
        -o-transform: perspective(800px) rotateY(0deg);
        opacity: 1;
    }
    
    100% {
        -o-transform: perspective(800px) rotateY(90deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(800px) rotateY(0deg);
        opacity: 1;
    }

    100% {
        transform: perspective(800px) rotateY(90deg);
        opacity: 1;
    }
}

.animated.flipInY {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInY;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInY;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInY;
	backface-visibility: visible !important;
	animation-name: flipInY;
}
@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(800px) rotateY(90deg);
        opacity: 1;
    }
	100% {
        -webkit-transform: perspective(800px) rotateY(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipOutY {
    0% {
        -moz-transform: perspective(800px) rotateY(90deg);
        opacity: 1;
    }
	100% {
        -moz-transform: perspective(800px) rotateY(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipOutY {
    0% {
        -o-transform: perspective(800px) rotateY(90deg);
        opacity: 1;
    }
	100% {
        -o-transform: perspective(800px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipOutY {
    0% {
        transform: perspective(800px) rotateY(90deg);
        opacity: 1;
    }
	100% {
        transform: perspective(800px) rotateY(0deg);
        opacity: 1;
    }
}

.animated.flipOutY {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipOutY;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipOutY;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipOutY;
	backface-visibility: visible !important;
	animation-name: flipOutY;
}