@charset "UTF-8";
.flip{
    backface-visibility: hidden;
    transform:translateX(0px);
}
.in {
    -moz-animation-duration:200ms;
    -moz-animation-timing-function: ease-out;
    -webkit-animation-duration:200ms;
    -webkit-animation-timing-function: ease-out;
    -o-animation-duration:200ms;
    -o-animation-timing-function: ease-out;
    animation-duration:200ms;
    animation-timing-function: ease-out;
}
.out {
    -moz-animation-duration:150ms;
    -moz-animation-timing-function: ease-in;
    -webkit-animation-duration:150ms;
    -webkit-animation-timing-function: ease-in;
    -o-animation-duration:150ms;
    -o-animation-timing-function: ease-in;
    animation-duration:150ms;
    animation-timing-function: ease-in;
}
.flip.out {
    -moz-animation-duration:350ms;
    -moz-animation-name: changetoleft;
    -moz-transform: rotateY(-90deg) scale(0.9);
    -webkit-animation-duration:350ms;
    -webkit-animation-name: changetoleft;
    -webkit-transform: rotateY(-90deg) scale(0.9);
    -o-animation-duration:350ms;
    -o-animation-name: changetoleft;
    -o-transform: rotateY(-90deg) scale(0.9);
    animation-duration:350ms;
    animation-name: changetoleft;
    transform: rotateY(-90deg) scale(0.9);
}
.flip.in {
    -moz-animation-duration:400ms;
    -moz-animation-name: changetoright;
    -webkit-animation-duration:400ms;
    -webkit-animation-name: changetoright;
    animation-duration:400ms;
    animation-name: changetoright;
    -o-animation-duration:400ms;
    -o-animation-name: changetoright;
}
@keyframes changetoleft {
	0% {
	    transform: rotateY(0deg);
	}
	100% {
	    transform: rotateY(-90deg) scale(0.9);
	}
}
@-moz-keyframes changetoleft {
	0% {
	    transform: rotateY(0deg);
	}
	100% {
	    transform: rotateY(-90deg) scale(0.9);
	}
}
@-webkit-keyframes changetoleft {
	0% {
	    transform: rotateY(0deg);
	}
	100% {
	    transform: rotateY(-90deg) scale(0.9);
	}
}
@-o-keyframes changetoleft {
	0% {
	    transform: rotateY(0deg);
	}
	100% {
	    transform: rotateY(-90deg) scale(0.9);
	}
}
@keyframes fchangetoright {
	0% {
	    transform: rotateY(0deg);
	}
	100% {
	    transform: rotateY(90deg) scale(0.9);
	}
}
@-moz-keyframes fchangetoright {
	0% {
	    transform: rotateY(0deg);
	}
	100% {
	    transform: rotateY(90deg) scale(0.9);
	}
}
@-webkit-keyframes fchangetoright {
	0% {
	    transform: rotateY(0deg);
	}
	100% {
	    transform: rotateY(90deg) scale(0.9);
	}
}
@-o-keyframes fchangetoright {
	0% {
	    transform: rotateY(0deg);
	}
	100% {
	    transform: rotateY(90deg) scale(0.9);
	}
}