:root {
	--color:#555;
}
body {
	background-color: #f5f5f5;
	color:var(--color);
	font-family: "proxima-nova",sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin:0;
	padding:0;
}
h1 {color:#222; margin:0;}
h1 small {display: block; font-weight: 400; font-size: .6em; color:var(--color);}
hr {border:0;height:1px;background-color:#ccc;}
#container {
	max-width: 800px;
	display: flex;
	align-items: flex-start;
	padding:20px;
}
.logo { margin: 0 20px 0 0; height:300px; }
.text-center {text-align: center;}

ul.social{
	cursor: default;
	margin: 0;
	padding:0;
	text-align: center;
	display:flex;
	justify-content: center;
}

ul.social li{
	position: relative;
	display: inline-block;
	margin: 0.25em;
	top: 0;
	overflow: hidden;
	transition: background-color .2s ease-in-out, color .2s ease-in-out;
	border-radius: .5em;
}

ul.social li a {
	display: block;
	position: relative;
	width: 48px;
	height: 48px;
	outline: 0;
	color: currentColor;
	text-decoration: none;
	text-align: center;
	line-height: 48px;
	font-size: 24px;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.1);
}

ul.social li a span {
	display: block;
	text-indent: -9999px;
}

ul.social li:hover a					{ color: #fff; }
ul.social li.twitter:hover				{ background-color: #2DAAE4; }
ul.social li.facebook:hover				{ background-color: #3C5A98; }
ul.social li.linkedin:hover				{ background-color: #006599; }
ul.social li.googleplus:hover			{ background-color: #DA2713; }
ul.social li.github:hover				{ background-color: #24292e; }
ul.social li.rss:hover					{ background-color: #F2600B; }
ul.social li.instagram:hover			{ background-color: #d10869; }
ul.social li.foursquare:hover			{ background-color: #39A3D4; }
ul.social li.soundcloud:hover			{ background-color: #FE5419; }
ul.social li.spotify:hover				{ background-color: #1DB954; }
ul.social li.apple-music:hover			{ background-color: #fa263c; }

@media (max-width:640px){
	#container {
		flex-direction: column;
		text-align: center;
	}
	.logo {height:150px; margin:0 auto 20px;}
	ul.social{
		flex-wrap: wrap;
	}
	ul.social li{
		margin:.25em 1px;
	}
}