@import url('https://fonts.googleapis.com/css?family=Lato');

* {
	box-sizing: border-box;
}




.social-media-container {
	position: fixed;
	top: 50%;
	left: calc(100% - 60px);
	list-style-type: none;
	padding: 0;
	transform: translateY(-50%);
	min-width: 250px;
}

.social-media {
	align-items: center;
	display: flex;
	transition: transform .3s ease-in-out;
}

.social-media:hover {
	transform: translateX(calc(-100% + 60px));
}

.social-media.blog {
	background-color: #e17b77;
}

.social-media.facebook {
	background-color: #3b5998;
}

.social-media.twitter {
	background-color: #00aced;
}

.social-media.github {
	background-color: #333;
}

.social-media.linkedin {
	background-color: #007bb6;
}

.social-media i {
	color: #fff;
	font-size: 20px;
	padding: 15px;
	text-align: center;
	width: 60px;
}

.social-media a {
	color: #fff;
	padding: 0 10px;
}