#wrapper {
	margin:0 auto;
	width:960px;
}

.flippable, .hover, img {
	-webkit-user-select: none;
	-webkit-touch-callout: none;	
}

body {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:300;
}

.event {
	margin:10px;
	width:220px;
	height:360px;
	float:left;

		text-align:center;
	-webkit-transition:all 0.5s ease-in-out;
	position: relative;
	z-index: 1;
	-webkit-perspective: 1000;
	cursor:pointer;
}

.event h1 {
	margin-top:0;
	font-weight:300;
}

.event img:not(.map) {
	width:126px;
}

.face.back {
	display: none;
}

.card {
	position:relative;
	width: 100%;
	height: 100%;
	border:1px #aaa solid;

	-webkit-border-radius:15px;
	-webkit-box-shadow:0 0 5px rgba(0,0,0,0.3);	
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 1.0s linear;
}

.event.flipped .card {
	-webkit-transform: rotateY(180deg);
	-webkit-box-shadow:2px 2px 15px rgba(0,0,0,0.7);		
}

.event.faded {
	opacity:0.3;
}

.face {
	position: absolute;
	height: 100%;
	width:200px;
	padding:10px;
	-webkit-backface-visibility: hidden;
}
.face.back {
	display: block;
	width:220px;
	-webkit-transform: rotateY(180deg);
	-webkit-box-sizing: border-box;
}

#leftarrow, #rightarrow {
	-webkit-border-radius:15px;
	-webkit-box-shadow:0 0 5px rgba(0,0,0,0.3);	
	margin:10px;
	width:220px;
	height:360px;
	float:left;	
}

#leftarrow p, #rightarrow p {
	padding:10px;
}

#leftarrow {
	background-color:red;
}

#leftarrow:active {
	background-color:green;
}

#rightarrow {
	background-color:blue;	
}

#rightarrow:active {
	background-color:green;
}