/** 
 * Note: The icon images used here are
 * hotlink protected and will not work
 * outside of Codepen.
 *
 * You can get the icons to host yourself 
 * here: http://simpleicons.org/
 */


.social-icons {
  max-width: 980px;
  
  
}

.icon {
  float: left;
  position: relative;
  width: 19%;
  height: 0;
  margin: 10% 1%;
  padding-bottom: 19%;
}
@media all and (min-width: 640px) {
  .icon {
    width: 12%;
    padding-bottom: 12%;
	margin-left:1%;
  }
}
.icon:last-of-type {
  margin-right: 0;
}
.icon a {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  background-color: #fff;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
.icon a:hover {
  background-color: #222;
  background-size: 0%;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.icon__name {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -7px;
  color: #fff;
  font-size: 10px;
  text-align: center;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  opacity: 0;
  -webkit-filter: blur(25px);
          filter: blur(25px);
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
.icon:hover .icon__name {
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  opacity: 1;
  -webkit-filter: blur(0);
          filter: blur(0);
}

.icon--facebook a {
  background-color: #3b5998;
  background-image: url(../img/widgets/fb.png);
  
}

.icon--twitter a {
  background-color: #00aced;
  background-image: url(../img/widgets/twitter.png);
}

.icon--linkedin a {
  background-color: #007fb1;
  background-image: url(../img/widgets/linkedin.png);
}

.icon--instagram a {
  background-color: #5c3d2e;
  background-image: url(../img/widgets/instagram.png);
}

.icon--flickr a {
  background-color: #c9317d;
  background-image: url("http://benhodgson.net/codepen/social/flickr-128.png");
}

.icon--spotify a {
  background-color: #80b719;
  background-image: url("http://benhodgson.net/codepen/social/spotify-128.png");
}

.icon--soundcloud a {
  background-color: #f60;
  background-image: url("http://benhodgson.net/codepen/social/soundcloud-128.png");
}

.icon--lastfm a {
  background-color: #d51007;
  background-image: url("http://benhodgson.net/codepen/social/lastfm-128.png");
}

.icon--kickstarter a {
  background-color: #87c442;
  background-image: url("http://benhodgson.net/codepen/social/kickstarter-128.png");
}

.icon--github a {
  background-color: #4183c4;
  background-image: url("http://benhodgson.net/codepen/social/github-128.png");
}

li{ font-size:0px;
}