html {
  /*font-size: 100%;*/
}

.social-media{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.social-media ul {
  display: block;
  margin: 0;
  padding: 0;
}
.social-media li {
  display: block;
  margin: 0;
  padding: 0;
}
.social-media li a {
  background: #eee;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin: 20px 10px 0 0;
  padding: 0;
  position: relative;
  text-align: center;
  width: 36px;
}
.social-media li a i:before {
  text-shadow: 0 0 1px #888;
}
.social-media li a:hover:after, .social-media li a:hover:before {
  display: block;
  opacity: 1;
}
.social-media li a:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #444;
  content: "";
  height: 0;
  left: 8px;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  top: -15px;
  width: 0;
  transition: all 0.125s ease-in-out;
}
.social-media li a:after {
  background: #444;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 0.75rem;
  left: -22px;
  content: attr(aria-title);
  padding: 0.25rem;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  text-align: center;
  text-decoration: none;
  top: -35px;
  width: 80px;
  transition: all 0.125s ease-in-out;
}
.social-media li.behance a {
  background: #053eff;
  transition: all 0.125s ease-in-out;
}
.social-media li.behance a:hover, .social-media li.behance a:active, .social-media li.behance a:focus {
  background: #0030d1;
}
.social-media li.codepen a {
  background: #212121;
  transition: all 0.125s ease-in-out;
}
.social-media li.codepen a:hover, .social-media li.codepen a:active, .social-media li.codepen a:focus {
  background: #080808;
}
.social-media li.deviantart a {
  background: #4a5d4e;
  transition: all 0.125s ease-in-out;
}
.social-media li.deviantart a:hover, .social-media li.deviantart a:active, .social-media li.deviantart a:focus {
  background: #334136;
}
.social-media li.digg a {
  background: #005be2;
  transition: all 0.125s ease-in-out;
}
.social-media li.digg a:hover, .social-media li.digg a:active, .social-media li.digg a:focus {
  background: #0046af;
}
.social-media li.dribbble a {
  background: #ea4c89;
  transition: all 0.125s ease-in-out;
}
.social-media li.dribbble a:hover, .social-media li.dribbble a:active, .social-media li.dribbble a:focus {
  background: #e51e6b;
}
.social-media li.dropbox a {
  background: #007ee5;
  transition: all 0.125s ease-in-out;
}
.social-media li.dropbox a:hover, .social-media li.dropbox a:active, .social-media li.dropbox a:focus {
  background: #0062b2;
}
.social-media li.facebook-f a {
  background: #3b5998;
  transition: all 0.125s ease-in-out;
}
.social-media li.facebook-f a:hover, .social-media li.facebook-f a:active, .social-media li.facebook-f a:focus {
  background: #2d4373;
}
.social-media li.flickr a {
  background: #f40083;
  transition: all 0.125s ease-in-out;
}
.social-media li.flickr a:hover, .social-media li.flickr a:active, .social-media li.flickr a:focus {
  background: #c10068;
}
.social-media li.foursquare a {
  background: #fc4575;
  transition: all 0.125s ease-in-out;
}
.social-media li.foursquare a:hover, .social-media li.foursquare a:active, .social-media li.foursquare a:focus {
  background: #fb1350;
}
.social-media li.github a {
  background: #333333;
  transition: all 0.125s ease-in-out;
}
.social-media li.github a:hover, .social-media li.github a:active, .social-media li.github a:focus {
  background: #1a1a1a;
}
.social-media li.google-plus a {
  background: #df4a32;
  transition: all 0.125s ease-in-out;
}
.social-media li.google-plus a:hover, .social-media li.google-plus a:active, .social-media li.google-plus a:focus {
  background: #c0341e;
}
.social-media li.instagram a {
  background: #c32aa3;
  transition: all 0.125s ease-in-out;
}
.social-media li.instagram a:hover, .social-media li.instagram a:active, .social-media li.instagram a:focus {
  background: #992180;
}
.social-media li.linkedin a {
  background: #007bb6;
  transition: all 0.125s ease-in-out;
}
.social-media li.linkedin a:hover, .social-media li.linkedin a:active, .social-media li.linkedin a:focus {
  background: #005983;
}
.social-media li.medium a {
  background: #00ab6c;
  transition: all 0.125s ease-in-out;
}
.social-media li.medium a:hover, .social-media li.medium a:active, .social-media li.medium a:focus {
  background: #00784c;
}
.social-media li.pinterest-p a {
  background: #cb2027;
  transition: all 0.125s ease-in-out;
}
.social-media li.pinterest-p a:hover, .social-media li.pinterest-p a:active, .social-media li.pinterest-p a:focus {
  background: #9f191f;
}
.social-media li.get-pocket a {
  background: #ee4056;
  transition: all 0.125s ease-in-out;
}
.social-media li.get-pocket a:hover, .social-media li.get-pocket a:active, .social-media li.get-pocket a:focus {
  background: #e6152f;
}
.social-media li.reddit-alien a {
  background: #ff5700;
  transition: all 0.125s ease-in-out;
}
.social-media li.reddit-alien a:hover, .social-media li.reddit-alien a:active, .social-media li.reddit-alien a:focus {
  background: #cc4600;
}
.social-media li.skype a {
  background: #00aff0;
  transition: all 0.125s ease-in-out;
}
.social-media li.skype a:hover, .social-media li.skype a:active, .social-media li.skype a:focus {
  background: #008abd;
}
.social-media li.slideshare a {
  background: #f7941e;
  transition: all 0.125s ease-in-out;
}
.social-media li.slideshare a:hover, .social-media li.slideshare a:active, .social-media li.slideshare a:focus {
  background: #da7a08;
}
.social-media li.snapchat-ghost a {
  background: #fffc00;
  transition: all 0.125s ease-in-out;
}
.social-media li.snapchat-ghost a:hover, .social-media li.snapchat-ghost a:active, .social-media li.snapchat-ghost a:focus {
  background: #ccca00;
}
.social-media li.stumbleupon a {
  background: #eb4924;
  transition: all 0.125s ease-in-out;
}
.social-media li.stumbleupon a:hover, .social-media li.stumbleupon a:active, .social-media li.stumbleupon a:focus {
  background: #ca3412;
}
.social-media li.spotify a {
  background: #1ed760;
  transition: all 0.125s ease-in-out;
}
.social-media li.spotify a:hover, .social-media li.spotify a:active, .social-media li.spotify a:focus {
  background: #18aa4c;
}
.social-media li.soundcloud a {
  background: #ff5500;
  transition: all 0.125s ease-in-out;
}
.social-media li.soundcloud a:hover, .social-media li.soundcloud a:active, .social-media li.soundcloud a:focus {
  background: #cc4400;
}
.social-media li.tumblr a {
  background: #35465d;
  transition: all 0.125s ease-in-out;
}
.social-media li.tumblr a:hover, .social-media li.tumblr a:active, .social-media li.tumblr a:focus {
  background: #222e3d;
}
.social-media li.twitter a {
  background: #00b6f1;
  transition: all 0.125s ease-in-out;
}
.social-media li.twitter a:hover, .social-media li.twitter a:active, .social-media li.twitter a:focus {
  background: #008fbe;
}
.social-media li.twitch a {
  background: #6441A4;
  transition: all 0.125s ease-in-out;
}
.social-media li.twitch a:hover, .social-media li.twitch a:active, .social-media li.twitch a:focus {
  background: #4e337f;
}
.social-media li.vine a {
  background: #00b489;
  transition: all 0.125s ease-in-out;
}
.social-media li.vine a:hover, .social-media li.vine a:active, .social-media li.vine a:focus {
  background: #008162;
}
.social-media li.vimeo a {
  background: #aad450;
  transition: all 0.125s ease-in-out;
}
.social-media li.vimeo a:hover, .social-media li.vimeo a:active, .social-media li.vimeo a:focus {
  background: #93c130;
}
.social-media li.vk a {
  background: #4c75a3;
  transition: all 0.125s ease-in-out;
}
.social-media li.vk a:hover, .social-media li.vk a:active, .social-media li.vk a:focus {
  background: #3c5c80;
}
.social-media li.yelp a {
  background: #d32323;
  transition: all 0.125s ease-in-out;
}
.social-media li.yelp a:hover, .social-media li.yelp a:active, .social-media li.yelp a:focus {
  background: #a71c1c;
}
.social-media li.youtube a {
  background: #b31217;
  transition: all 0.125s ease-in-out;
}
.social-media li.youtube a:hover, .social-media li.youtube a:active, .social-media li.youtube a:focus {
  background: #850d11;
}
.social-media li.wordpress a {
  background: #21759b;
  transition: all 0.125s ease-in-out;
}
.social-media li.wordpress a:hover, .social-media li.wordpress a:active, .social-media li.wordpress a:focus {
  background: #185571;
}