/*Common Attribute within CSS flipping*/

.flip {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.flip.out {
	-webkit-transform: rotateY(180deg) scale(1);
	-moz-transform: rotateY(180deg) scale(1);
	-webkit-animation-name: flipouttoleft;
	-moz-animation-name: flipouttoleft;
	-moz-animation-duration: 900ms;
	-webkit-animation-duration: 900ms;
}

.flip.in {
	-webkit-animation-name: flipintoright;
	-moz-animation-name: flipintoright;
	-moz-animation-duration: 600ms;
	-webkit-animation-duration: 600ms;
}

.flip.out.reverse {
	-webkit-transform: rotateY(90deg) scale(1);
	-moz-transform: rotateY(90deg) scale(1);
	-webkit-animation-name: flipouttoright;
	-moz-animation-name: flipouttoright;
}

.flip.in.reverse {
	-webkit-animation-name: flipintoleft;
	-moz-animation-name: flipintoleft;
}





/*Animation Styling*/

@-webkit-keyframes flipouttoleft {
	from {
		-webkit-transform: rotateY(180deg);
	}
	to {
		-webkit-transform: rotateY(0deg) scale(1);
	}
}

@-moz-keyframes flipouttoleft {
	from {
		-moz-transform: rotateY(180deg);
	}
	to {
		-moz-transform: rotateY(0) scale(1);
	}
}

@-webkit-keyframes flipouttoright {
	from {
		-webkit-transform: rotateY(180deg);
	}
	to {
		-webkit-transform: rotateY(0deg) scale(1);
	}
}

@-moz-keyframes flipouttoright {
	from {
		-moz-transform: rotateY(180deg);
	}
	to {
		-moz-transform: rotateY(0deg) scale(1);
	}
}

@-webkit-keyframes flipintoleft {
	from {
		-webkit-transform: rotateY(180deg) scale(1);
	}
	to {
		-webkit-transform: rotateY(0);
	}
}

@-moz-keyframes flipintoleft {
	from {
		-moz-transform: rotateY(180deg) scale(1);
	}
	to {
		-moz-transform: rotateY(0);
	}
}

@-webkit-keyframes flipintoright {
	from {
		-webkit-transform: rotateY(180deg) scale(1);
	}
	to {
		-webkit-transform: rotateY(0deg);
	}
}

@-moz-keyframes flipintoright {
	from {
		-moz-transform: rotateY(180deg) scale(1);
	}
	to {
		-moz-transform: rotateY(0deg);
	}
}




/*Microsoft Based Styling*/
@supports (-ms-ime-align:auto) {
	.flip {
		transform-style: preserve-3d;
	}
	.flip.out {
		transform: rotateY(90deg) scale(1);
		animation-name: flipouttoleft;
		animation-duration: 900ms;
	}
	.flip.in {
		animation-name: flipintoright;
		animation-duration: 600ms;
	}
	@keyframes flipintoright {
		from {
			transform: rotateY(90deg) scale(1);
		}
		to {
			transform: rotateY(0deg);
		}
	}
	@keyframes flipouttoleft {
		from {
			transform: rotateY(90deg);
		}
		to {
			transform: rotateY(0) scale(1);
		}
	}
}