/* Static state */
		#container 	{ 
			width: 400px; 
			height: 533px; 
			position: relative; 
			margin: 0 auto;
			border: 1px solid #ccc; 
			background: url(../img/1.jpg) 0 0 no-repeat;
		}
		.parent1 	{ 
			/* overall animation container */
			height: 0; 
			overflow: hidden;

			-webkit-transition-property: height;
			-webkit-transition-duration: .5s; 
			-webkit-perspective: 1000px; 
			-webkit-transform-style: preserve-3d; 

			-moz-transition-property:height; 
			-moz-transition-duration: .5s; 
			-moz-perspective: 1000px; 
			-moz-transform-style: preserve-3d; 

			-o-transition-property:height; 
			-o-transition-duration: .5s; 
			-o-perspective: 1000px; 
			-o-transform-style: preserve-3d;

			transition-property: height;
			transition-duration: .5s;
			perspective: 1000px;
			transform-style: preserve-3d;
		}
		.parent2	{ 
			/* full content during animation *can* go here */ 
		}
		.parent3	{ 
			/* animated, "folded" block */
			height: 56px; 

			-webkit-transition-property: all; 
			-webkit-transition-duration: .5s;
			-webkit-transform: rotateX(-90deg);
			-webkit-transform-origin: top; 

			-moz-transition-property: all; 
			-moz-transition-duration: .5s;
			-moz-transform: rotateX(-90deg);
			-moz-transform-origin: top; 

			-o-transition-property: all; 
			-o-transition-duration: .5s;
			-o-transform: rotateX(-90deg);
			-o-transform-origin: top;

			transition-property: all; 
			transition-duration: .5s;
			transform: rotateX(-90deg);
			transform-origin: top; 
		}

		/* Hover states to trigger animations */
		#container:hover .parent1	{ height: 111px; }
		#container:hover .parent3	{ 
			-webkit-transform: rotateX(0deg); 
			-moz-transform: rotateX(0deg); 
			-o-transform: rotateX(0deg); 
			transform: rotateX(0deg); 
			height: 111px; 
		}


		/* Static state */
		#text-container 	{ 
			width: 400px; 
			height: 533px; 
			position: relative; 
			margin: 0 auto;
			border: 1px solid #ccc; 
			background: url(../img/3.jpg) 0 0 no-repeat;
		}
		.text-parent1 	{ 
			/* overall animation container */
			height: 0; 
			overflow: hidden;

			-webkit-transition-property: height;
			-webkit-transition-duration: .5s; 
			-webkit-perspective: 1000px; 
			-webkit-transform-style: preserve-3d; 

			-moz-transition-property:height; 
			-moz-transition-duration: .5s; 
			-moz-perspective: 1000px; 
			-moz-transform-style: preserve-3d; 

			-o-transition-property: all; 
			-o-transition-duration: .5s;
			-o-transform: rotateX(-90deg);
			-o-transform-origin: top;

			transition-property: height;
			transition-duration: .5s;
			perspective: 1000px;
			transform-style: preserve-3d;
		}
		.text-parent2	{ 
			/* full content during animation *can* go here */ 
		}
		.text-parent3	{ 
			/* animated, "folded" block */
			height: 56px; 

			-webkit-transition-property: all; 
			-webkit-transition-duration: .5s;
			-webkit-transform: rotateX(-90deg);
			-webkit-transform-origin: top; 

			-moz-transition-property: all; 
			-moz-transition-duration: .5s;
			-moz-transform: rotateX(-90deg);
			-moz-transform-origin: top; 

			-o-transition-property: all; 
			-o-transition-duration: .5s;
			-o-transform: rotateX(-90deg);
			-o-transform-origin: top;

			transition-property: all; 
			transition-duration: .5s;
			transform: rotateX(-90deg);
			transform-origin: top; 
		}

		/* Hover states to trigger animations */
		#text-container:hover .text-parent1	{ height: 111px; }
		#text-container:hover .text-parent3	{ 
			-webkit-transform: rotateX(0deg); 
			-moz-transform: rotateX(0deg); 
			-o-transform: rotateX(0deg); 
			transform: rotateX(0deg); 
			height: 111px; 
		}



		/* Static state */
		#slow-container 	{ width: 400px; height: 400px; position: relative;margin: 0 auto; border: 1px solid #ccc; }
		.slow-parent1 	{ 
			/* overall animation container */
			height: 0; 
			overflow: hidden;

			-webkit-transition-property: height;
			-webkit-transition-duration: .5s; 
			-webkit-perspective: 1000px; 
			-webkit-transform-style: preserve-3d; 

			-moz-transition-property:height; 
			-moz-transition-duration: .5s; 
			-moz-perspective: 1000px; 
			-moz-transform-style: preserve-3d; 

			-o-transition-property: all; 
			-o-transition-duration: .5s;
			-o-transform: rotateX(-90deg);
			-o-transform-origin: top;

			transition-property: height;
			transition-duration: .5s;
			perspective: 1000px;
			transform-style: preserve-3d;

			background: lightgreen;
		}
		.slow-parent2	{ 
			/* full content during animation *can* go here */ 
			background: lightblue;
		}
		.slow-parent3	{ 
			/* animated, "folded" block */
			height: 56px; 
			background: pink;

			-webkit-transition-property: all; 
			-webkit-transition-duration: .5s;
			-webkit-transform: rotateX(-90deg);
			-webkit-transform-origin: top; 

			-moz-transition-property: all; 
			-moz-transition-duration: .5s;
			-moz-transform: rotateX(-90deg);
			-moz-transform-origin: top; 

			-o-transition-property: all; 
			-o-transition-duration: .5s;
			-o-transform: rotateX(-90deg);
			-o-transform-origin: top;

			transition-property: all; 
			transition-duration: .5s;
			transform: rotateX(-90deg);
			transform-origin: top; 
		}

		/* Hover states to trigger animations */
		#slow-container:hover .slow-parent1	{ height: 111px; }
		#slow-container:hover .slow-parent3	{ 
			-webkit-transform: rotateX(0deg); 
			-moz-transform: rotateX(0deg); 
			-o-transform: rotateX(0deg); 
			transform: rotateX(0deg); 
			height: 111px;
		}