Social Font-Face CSS

style.css

@font-face{ 
	font-family:'WebFont';
	src: url('websymbols-regular-webfont.eot');
	src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('websymbols-regular-webfont.woff') format('woff'),
	     url('websymbols-regular-webfont.ttf') format('truetype'),
	     url('websymbols-regular-webfont.svg#webfont') format('svg');
}

body {
	width:600px;
	margin:0px auto;
	background-color:#fefefe;
}

.WebFont {
	font-family: 'WebFont', arial, sans-serif;
	font-size:35px;
	color:#9E9E9E;
	text-align: center;
}

.Red {
	color:#FF6E6E;
}

.Green {
	color:#6EFFC3;
}

.Blue {
	color:#6EC7FF;
}

h1 {
	font-family:arial, sans-serif;
	color:#9E9E9E;
	font-size:30px;
}

p {
	font-family:arial, sans-serif;
	font-size:18px;
	font-weight:400;
}

.transition {
	float:left;
	margin-right:10px;
	transition:All 0.3s ease;
	-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
	transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
	-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
	-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
	-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
	-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}

.transition:hover {
	transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-webkit-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-moz-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-o-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-ms-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
}

.transition a {
	color:#9e9e9e;
	text-decoration:none;
}

.transition2 a {
	color:#9e9e9e;
	text-decoration:none;
	transition:All 0.4s ease;
	-webkit-transition:All 0.4s ease;
	-moz-transition:All 0.4s ease;
	-o-transition:All 0.4s ease;
}

.transition2 a:hover {
	color:#FF6E6E;
}

.transition2 {
	float:left;
	margin-right:10px;
	transition:All 0.2s ease;
	-webkit-transition:All 0.2s ease;
	-moz-transition:All 0.2s ease;
	-o-transition:All 0.2s ease;
	transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
	-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
	-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
	-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
	-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}

.transition2:hover {
	margin-top:10px;
}