.flipper {

			width: 278px;
			height: 486px;

			position: absolute;
			left: 33%;
			top: 10%;


			font-size: .8em;
			
			-webkit-perspective: 600px;
			-moz-perspective: 600px;
		}
		/* -- make sure to declare a default for every property that you want animated -- */
		/* -- general styles, including Y axis rotation -- */
		.flipper .front, .flipper .back {
			float: none;
			position: absolute;
			top: 0;
			left: 0;
			width: inherit;
			height: inherit;
			text-align: center;

			
			/* -- transition is the magic sauce for animation -- */
			-o-transition: all .4s ease-in-out;
			-ms-transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;

		}
		
		.flipper .front {
			z-index: 900;
			background: url(front.png) 0 0 no-repeat;

			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			-moz-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;

			-webkit-filter: drop-shadow(1px 1px 20px #333);
		}
		.flipper:hover .front, .flipper.flip .front {
			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
		}
		
		.flipper .back {
			z-index: 800;
			background: url(back.png) 0 0 no-repeat;
			
			-webkit-transform: rotateY(-180deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			-moz-transform: rotateY(-180deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;

		}
		
		.flipper:hover .back, .flipper.flip .back {
			z-index: 1000;

			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform: rotateX(0deg) rotateY(0deg);
		}


		.flipper .front p, .flipper .back p {
			position: relative;
			padding: 30px;
			font-size: 20px;
			font-family: 'Amatic SC', cursive;
			color: #393939;
		
		}

		.flipper .front p {
			top: 355px;
			margin-left: 10px;
			line-height: 33px;
		}

		.flipper .back p {
			top: 214px;
			line-height: 25px;
		}


		.flipper .back p button {
			padding: 11px 35px;
			display: block;
			margin: 4px auto;
			background-color: #ddd;
			border: solid 1px #aaa;
			cursor: pointer;

			-webkit-border-radius: 8px;
			-moz-border-radius: 8px;
			border-radius: 8px;			

			-webkit-box-shadow: 0px 1px 7px #000;
			-moz-box-shadow: 0px 1px 7px #000;
			-ms-box-shadow: 0px 1px 7px #000;
			-o-box-shadow: 0px 1px 7px #000;
			box-shadow: 0px 1px 7px #000;

		}










/** *************************** ************  ******************************* **/
/** *************************** ANIMATED.CSS  ******************************* **/
/** *************************** ************  ******************************* **/




.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes hinge {
	0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
	40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
	80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
	100% { -webkit-transform: translateY(700px); opacity: 0; }
}

@-moz-keyframes hinge {
	0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
	20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
	40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
	80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
	100% { -moz-transform: translateY(700px); opacity: 0; }
}

@-o-keyframes hinge {
	0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
	20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
	40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
	80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }	
	100% { -o-transform: translateY(700px); opacity: 0; }
}

@keyframes hinge {
	0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }	
	20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }	
	40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }	
	80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }	
	100% { transform: translateY(700px); opacity: 0; }
}

.hinge {
	-webkit-animation-name: hinge;
	-moz-animation-name: hinge;
	-o-animation-name: hinge;
	animation-name: hinge;
}