/** 
 * 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-iconos {
  max-width: 100%;
}

.iconos {
  display: inline-block;
  overflow: visible;
  position: relative;
  width: 31%;
  height: 0;
  margin: 2% 3.7%;
  padding-bottom: 19%;
}
@media all and (min-width: 640px) {
  .iconos {
    width: 9%;
    padding-bottom: 9%;
  }
}
.iconos:last-of-type {
  margin-right: 0;
}
.iconos 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;
}
.iconos a:hover {
  background-color: #222;
  background-size: 0%;
  -webkit-transition: all .2s ease-out;
          transition: all .2s ease-out;
}

.iconos__name {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -7px;
  color: #fff;
  font-size: 13px;
  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);
}
.iconos:hover .iconos__name {
  -webkit-transition: all .3s ease-out;
          transition: all .3s ease-out;
  opacity: 1;
  -webkit-filter: blur(0);
          filter: blur(0);
}

.iconos--twitter a {
  background-color: #00aced;
  background-image: url(iconos/twitter-128.png);
}

.iconos--google a {
  background-color: #d51007;
  background-image: url(iconos/google-128.png);
}

.iconos--instagram a {
  background-color: #5c3d2e;
  background-image: url(iconos/instagram-128.png);
}

.iconos--linkedin a {
  background-color: #007fb1;
  background-image: url(iconos/linkedin-128.png);
}

.iconos--youtube a {
  background-color: #d51007;
  background-image: url(iconos/youtube-128.png);
}

.iconos--kik a {
  background-color: #80b719;
  background-image: url(iconos/kik-128.png);
}

.iconos--flickr a {
  background-color: #c9317d;
  background-image: url(iconos/flickr-128.png);
}

.iconos--pinterest a {
  background-color: #efefef;
	border-style: solid;
    border-width: 1px;
	border-color:#000;
  background-image: url(iconos/pinterest-128.png);
}

.iconos--facebook a {
  background-color: #3b5998;
  background-image: url(iconos/facebook-128.png);
}