.component {
  text-align: center;
}

/* =============================================================================
  ICONS - COMMON
============================================================================= */
/**
 * Icon common styles.
 *
 * Set it to block or inline block, whichever suits your needs. Overflow set to
 * hidden for precautions, and make sure to set the font size to 0 and the text
 * indent to -9999px. This allows us to actually include text in the markup
 * which will be good for screen readers and accessibility purposes.
 */
.icon {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  margin: 4px;
  width: 64px;
  height: 64px;
  font-size: 0;
  text-indent: -9999px;
}


/* =============================================================================
  ICONS - DEMO 4
============================================================================= */
/**
 * "icon-border" class name used to indicate an icon that has an animated border
 * effect.
 *
 * Example HTML:
 *
 * <a href="#" class="icon icon-border facebook">facebook</a>
 * <a href="#" class="icon icon-border twitter">twitter</a>
 * ...
 */
.icon-border {
  position: relative;
}

.icon-border::before,
.icon-border::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}

.icon-border::before {
  z-index: 1;
  -webkit-transition: box-shadow 0.3s;
          transition: box-shadow 0.3s;
}

.icon-border::after {
  z-index: 2;
}

/* facebook */
.icon-border.facebook::before {
  box-shadow: inset 0 0 0 48px #000;
}

.icon-border.facebook:hover::before {
  /*box-shadow: inset 0 0 0 4px #3b5998;*/
  box-shadow: inset 0 0 0 4px #94d600;
}

.icon-border.facebook::after {
  background: url("../images/facebook.png");
  background-position:center;
  background-size: 64px 64px;
}

/* twitter */
.icon-border.twitter::before {
  box-shadow: inset 0 0 0 48px #000;
}

.icon-border.twitter:hover::before {
  /*box-shadow: inset 0 0 0 4px #4099ff;*/
  box-shadow: inset 0 0 0 4px #94d600;
}

.icon-border.twitter::after {
  background: url("../images/twitter.png");
  background-position:center;
  background-size: 64px 64px;
}

/* google plus */
.icon-border.googleplus::before {
  box-shadow: inset 0 0 0 48px #000;
}

.icon-border.googleplus:hover::before {
  /*box-shadow: inset 0 0 0 4px #d34836;*/
  box-shadow: inset 0 0 0 4px #94d600;
}

.icon-border.googleplus::after {
  background: url("../images/gplus.png");
  background-position:center;
  background-size: 64px 64px;
}

/* linkedin */
.icon-border.linkedin::before {
  box-shadow: inset 0 0 0 48px #000;
}

.icon-border.linkedin:hover::before {
  /*box-shadow: inset 0 0 0 4px #007bb6;*/
  box-shadow: inset 0 0 0 4px #94d600;
}

.icon-border.linkedin::after {
  background: url("../images/linkedin.png");
  background-position:center;
  background-size: 64px 64px;
}

/* pinterest */
.icon-border.pinterest::before {
  box-shadow: inset 0 0 0 48px #000;
}

.icon-border.pinterest:hover::before {
  /*box-shadow: inset 0 0 0 4px #c92228;*/
  box-shadow: inset 0 0 0 4px #94d600;
}

.icon-border.pinterest::after {
  background: url("../images/pinterest.png");
  background-position:center;
  background-size: 64px 64px;
}

/* instagram */
.icon-border.instagram::before {
  box-shadow: inset 0 0 0 48px #000;
}

.icon-border.instagram:hover::before {
  /*box-shadow: inset 0 0 0 4px #3f729b;*/
  box-shadow: inset 0 0 0 4px #94d600;
}

.icon-border.instagram::after {
  background: url("../images/instagram.png");
  background-position:center;
  background-size: 64px 64px;
}

/* email */
.icon-border.email::before {
  box-shadow: inset 0 0 0 48px #000;
}

.icon-border.email:hover::before {
  /*box-shadow: inset 0 0 0 4px #F90;*/
  box-shadow: inset 0 0 0 4px #94d600;
}

.icon-border.email::after {
  background: url("../images/email.png");
  background-position:center;
  background-size: 64px 64px;
}