body {
	background:url(fundo_livros.jpg) no-repeat;
	background-size:cover;
	color:#333;
	font:12px/1.5 "Trebuchet MS", sans-serif;
	margin:0;
	padding:0;
}

#wrapper {
	/*-moz-perspective:600px;*/
	-o-perspective:600px;
	-webkit-perspective:600px;
	height:390px;
	left:50%;
	margin:-190px 0 0 -130px;
	perspective:600px;
	position:absolute;
	top:50%;
	width:260px;
}

section {
	/*-moz-backface-visibility:hidden;
	-moz-transform-style:preserve-3d;
	-moz-transition:all .4s ease-in-out;*/
	-o-backface-visibility:hidden;
	-o-transform-style:preserve-3d;
	-o-transition:all .4s ease-in-out;
	-webkit-backface-visibility:hidden;
	-webkit-transform-style:preserve-3d;
	-webkit-transition:all .4s ease-in-out;
	backface-visibility:hidden;
	background:#fff;
	border-radius:5px;
	box-shadow:2px 4px 12px rgba(0, 0, 0, .3);
	left:0;
	position:absolute;
	top:0;
	transform-style:preserve-3d;
	transition:all .4s ease-in-out;
	width:240px;
}

#front {
	/*-moz-transform:rotateY(0);*/
	-o-transform:rotateY(0);
	-webkit-transform:rotateY(0);
	height:320px;
	padding:20px 10px;
	text-align:center;
	transform:rotateY(0);
	z-index:2;
}

#back {
	/*-moz-transform:rotateY(180deg);*/
	-o-transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	height:340px;
	padding:0 10px 10px;
	transform:rotateY(180deg);
	z-index:1;      
}

.flip #front {
	/*-moz-transform:rotateY(-180deg);*/
	-o-transform:rotateY(-180deg);
	-webkit-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}

.flip #back {
	/*-moz-transform:rotateY(0);*/
	-o-transform:rotateY(0);
	-webkit-transform:rotateY(0);
	transform:rotateY(0);
	z-index:3;
}

#switch {
	bottom:0;
	color:#fff;
	font-size:13px;
	font-weight:700;
	left:50%;
	margin-left:-12px;
	position:absolute;
	text-decoration:underline;
	width:24px;
}

#switch:hover {
	text-decoration:none;
}

a[href*="flickr.com"] {
	color:#ff0084;
}

a[href*="github.com"] {
	color:#4183c4;
}

a[href*="twitter.com"] {
	color:#3acbf4;
}

h1, h2 {
	margin:15px 0;
}

h1 {
	border-bottom:3px solid #98a99d;
	font-size:24px;
	padding:0 0 2px;
}

h2 {
	font-size:18px;
}

a {
	/*-moz-transition:color .2s linear;*/
	-o-transition:color .2s linear;
	-webkit-transition:color .2s linear;
	color:#55a2d8;
	text-decoration:none;
	transition:color .2s linear;
}

a:hover {
	color:#333;
}

@media only screen and (max-width: 480px) {
	#wrapper {
		margin:15px auto;
		position:static;
	}

	#switch {
		font-size:16px;
	}
}

@media only screen and (max-width: 1024px) and (orientation: portrait) {
	body {
		background-size:auto;
	}
}


@media only screen and (max-width: 1024px) {
	body {
		background-size:auto;
	}