/* CSS Document */

body {
	min-height: 100%;
}

.social {
	float: left;
	margin: 2em 2em; width: 200px; height: 200px; 	
	display: block; text-align: center; line-height:103px; color: #fff;
	
	position: relative;
	transform:rotateY(0deg);
	transition:transform .25s ease-out;
	transform-style:preserve-3d;
}
.social > div {
	width: 200px; height: 200px; background: #000;
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.social >.front {
	transform:translateZ(80px);
}
.social >.back {
	background: #55ACEE; font-size: 1.5em; color: #fff;
	transform:rotateY(-90deg) translateZ(80px);
}


/*  Social Media Colors 
	Facebook #3B5998
	Flickr #FE0883
	Foursquare #8FD400
	Google+ #C63D2D
	Instagram #4E433C
	Linkedin #4875B4
	Tumblr #2B4964
	Twitter #33CCFF
	Vimeo #86B32D
	Youtube #FF3333
	Dribbble #ea4c89
*/
.social.social-twitter > .back { background: #55ACEE; }
.social.social-github > .back { background: #55ACEE;  }
.social.social-pinterest > .back { background: #55ACEE; }
.social.social-googleplus > .back { background: #55ACEE; }
.social.social-skype > .back { background: #55ACEE; }
.social.social-linkedin > .back { background: #55ACEE; }
.social.social-dribbble > .back { background: #55ACEE; }

/* Hover */
.social:hover {
	transform: rotateY(90deg);
}