body {
	background-color:#f0efef;
	margin: 0px;
	font-family: sans-serif;
}
#container {
	width: 720px;
	margin: auto;
}
#header {
	height: 82px;
	background: url('img/idiofonts.png') bottom left no-repeat;
	border-bottom: 1px solid black;
}
p, h2 {
	margin-left: 30px;
	margin-right: 30px;
}
h2 {
	font-size: 24px;
	margin-top: 20px;
}
p {
	font-size: 15px;
	line-height: 22px;
}
.font {
	margin-top: 20px;
	height: 360px;
	width: 720px;
	background-repeat: no-repeat;
	top: 360px;
	overflow: hidden;
    -webkit-transition-duration: 0.3s; /* Safari */
	transition-duration: 0.3s;
}
.font:hover {
		background-position: 0px -360px;
	    -webkit-transition-duration: 0.3s; /* Safari */
		transition-duration: 0.3s;
}
.font-content {
	position: relative;
	top: 360px;
    -webkit-transition-duration: 0.3s; /* Safari */
	transition-duration: 0.3s;
}
.font:hover .font-content {
	top: 0px;
    -webkit-transition-duration: 0.3s; /* Safari */
	transition-duration: 0.3s;
}
#sd {
	background-image: url('img/sd1.png');
}
#sg {
	background-image: url('img/sg1.png');
}
#nc {
	background-image: url('img/nc1.png');
}
#gpc {
	background-image: url('img/gpc.png');
}
#em {
	background-image: url('img/em.png');
}