body {
	margin: 0;
	font: 12px "Helvetica Neue", helvetica, sans-serif;
	-webkit-perspective: 1200;
	background: #eee;
}

ul, li {
	margin: 0;
	padding: 0;
	list-style: none outside;
}

a {
	color: #142D82;
}

a.tel {
	color: #000;
	text-decoration: none;
}

h1 {
	font-size: 1em;
	margin: 0;
}

#card {
	position: absolute;
	left: 50%;
	margin: 0 0 0 -240px;
	width: 480px;
	height: 268px;
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 1s;
	cursor: pointer;
}

#card.flip {
	-webkit-transition-duration: 1s;
	-webkit-transform: rotateY(-180deg);
}

#card.tease {
	-webkit-transition-duration: 0.5s;
	-webkit-transform: rotateY(-20deg);
}

.side {
	position: absolute;
	left: 0;
	top: 0;
	width: 480px;
	height: 268px;
	background: #fff;
	-webkit-backface-visibility: hidden;
	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

#front {
	z-index: 2;
}

#back {
	-webkit-transform: rotateY(-180deg);
}

#logo {
	position: absolute;
	display: block;
	left: 40px;
	top: 90px;
	width: 175px;
	height: 75px;
	background: url(logo.png);
	text-indent: -9999px;
}

#front ul {
	position: absolute;
	left: 270px;
	top: 50px;
	width: 210px;
}

.qr {
	display: block;
	position: absolute;
	left: 60px;
	top: 60px;
}

#back ul {
	position: absolute;
	left: 270px;
	top: 63px;
	width: 210px;
}

.platform,
.city,
.realname,
.site {
	margin-bottom: 1em;
}

#send,
#twitter {
	display: none;
}

@media screen and (max-device-width: 480px) {
	
	body {
	  -webkit-text-size-adjust: none;
	}
	
	body.portrait #card {
		left: 10px;
		margin: 0;
		top: 100px;
	}
	
	body.landscape #card {
		left: 10px;
		top: 0;
		margin: 0;
	}
	
	a.tel {
		color: #142D82;
		text-decoration: underline;
	}
	
}