a {
	color: #000;
	text-decoration: none;
}
body {
	font-size: 1.2em;
	font-family: 'Josefin Sans', serif;
	font-weight: 400;
}
div#logo {
	width: 100%;
	text-align: center;
}
div.testo {
	line-height: 1.4em;
	margin: 20px;
}
div.testo div {
	clear: both;
}
div#ragsoc {
	font-size: 1.4em;
	font-weight: 700;
}
.front, .back {
	background: #f9f9f9;
}

/* flipper */
/* https://davidwalsh.name/css-flip */
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
	/*-moz-transform: perspective(1000px);
    -webkit-transform: perspective(1000px);*/
}
/* flip the pane when hovered */
.flip-container.flipped .flipper {
	transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	/*-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;*/

	position: relative;
}
/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}
/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

@media only screen 
	and (min-device-width: 736px) {
	#bg-image {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    opacity: 0;
	    z-index: -100;
	    -webkit-transition: 0.8s opacity ease-in;
		-moz-transition: 0.8s opacity ease-in;
		transition: 0.8s all opacity ease-in;
	}
	.flip-container {
		perspective: 1000px;
		width: 680px;
		height: 440px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -340px;
		margin-top: -220px;
	}
	.flip-container, .front, .back {
		width: 680px;
		height: 440px;
	}
	.flip-button {
		position: absolute;
		bottom: 20px;
		right: 20px;
		color: #c5c5c5;
		cursor: pointer;
	}
	div#biglietto {
		width: 680px;
		height: 440px;
		border: 3px solid #f9f9f9;
		border-radius: 3px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
		-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	}
	div.credits {
		line-height: 1.4em;
		font-size: .8em;
		color: #c5c5c5;
		position: absolute;
		bottom: 20px;
		left: 20px;
	}
	div#map iframe {
		border:0;
		margin: 20px;
	}

	/* Stacks CSS ----------------------------------------------------------------------------------------------------------- */
	/* Stacks creted by the use of generated content */
	.stack:before, .stack:after { 
		content: "";
		border-radius: 3px;
		width: 100%;
		height: 100%;
		position: absolute;
		border: 10px solid #f9f9f9;
		left: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
		-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
		-webkit-transition: 0.3s all ease-out;
		-moz-transition: 0.3s all ease-out;
		transition: 0.3s all ease-out;
	}
	/* 1st element in stack (behind image) */
	.stack:before {
		top: 4px;
		z-index: -10;
		background-color: #f9f9f9;
	}
	/* 2nd element in stack (behind image) */
	.stack:after {
		top: 8px;
		z-index: -20;
		background-color: #f9f9f9;
	}
	
	/* stack rotated left */
	.stack.rotated-left:before {
		-webkit-transform-origin: bottom left;
		-moz-transform-origin: bottom left;
		transform-origin: bottom left;
		-webkit-transform: rotate(-2deg);
		-moz-transform: rotate(-2deg);
		transform: rotate(-2deg);
	}
	.stack.rotated-left:after {
		-webkit-transform-origin: bottom left;
		-moz-transform-origin: bottom left;
		transform-origin: bottom left;
		-webkit-transform: rotate(-4deg);
		-moz-transform: rotate(-4deg);
		transform: rotate(-4deg);
	}
	
	/* Reset all rotations on hover */
	.stack:hover:before, .stack:hover:after {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
@media only screen 
	and (max-device-width: 736px) {
		body {
			margin: 0;
			border: 0;
			padding: 0;
			background: #f9f9f9;
		}
		#bg-image {
			display: none;
		}
		.flip-container, .front, .back {
			width: 100%;
		}
		.flip-button {
			margin: 20px;
			color: #c5c5c5;
			cursor: pointer;
		}
		div.credits {
			line-height: 1.4em;
			font-size: .8em;
			color: #c5c5c5;
			margin: 20px 0px 0px 20px;
		}
		div#map iframe {
			border:0;
			margin: 0px;
		}
	}