body { 	background-image: url("background.png");
    				background-repeat: repeat;
			}

			div,p,h1 {		font-family: ‘Courier New’, Courier, monospace, "Ubuntu", Arial, serif; color:#480000; 
							font-size: 1.3em;
							text-align: center;
			}
			h2 {font-style: italic;
				font-size: 1em;
			}
			
			.cartolina { width:400px; height:350px;
			}

			.flip3D { width:400px; height:350px; margin:10px; float:left; }
			.flip3D > .front{
				position:absolute;
				-webkit-transform: perspective( 600px ) rotateY( 0deg );
				transform: perspective( 600px ) rotateY( 0deg );
				background: linear-gradient(#CCFFFF, #75FFFF);
				/* background:#FC0; */ 
				width:400px; height:350px; border-radius: 7px;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				transition: -webkit-transform .5s linear 0s;
				transition: transform .5s linear 0s;
			}
			.flip3D > .back{
				position:absolute;
				-webkit-transform: perspective( 600px ) rotateY( 180deg );
				transform: perspective( 600px ) rotateY( 180deg );
				background: #80BFFF; width:400px; height:350px; border-radius: 7px;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				transition: -webkit-transform .5s linear 0s;
				transition: transform .5s linear 0s;
			}
			.flip3D:hover > .front{
				-webkit-transform: perspective( 600px ) rotateY( -180deg );
				transform: perspective( 600px ) rotateY( -180deg );
			}
			.flip3D:hover > .back{
				-webkit-transform: perspective( 600px ) rotateY( 0deg );
				transform: perspective( 600px ) rotateY( 0deg );
			}
		</style>