.social-icon {
  padding: 0;
  width: 100%;
  display: inline-block;
  list-style: none;
}
.social-icon .social-icon-item {
  padding: 0;
  overflow: hidden;
  margin-left: -1px;
  display: inline-block;
  text-align: center;
}
.social-icon .social-icon-item a {
  border: 1px solid;
  display: block;
  padding: 21px 0;
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
}
.social-icon .social-icon-item a .social-icon-name {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  display: block;
}
.social-icon .social-icon-item a .social-icon-img {
  position: absolute;
  display: block;
  margin: auto;
  padding: 16px 0;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: 0;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  opacity: 0;
}
.social-icon .social-icon-item a i {
  font-size: 26px;
  color: #fff;
  position: absolute;
  display: block;
  margin: auto;
  padding: 16px 0;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: 0;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  opacity: 0;
}
.social-icon .social-icon-item a img {
  height: 26px;
  width: 26px;
}
.social-icon .social-icon-item:first-child {
  margin-left: 0;
}
.social-icon.size-lg .social-icon-item a {
  padding: 26px 0;
}
.social-icon.size-lg .social-icon-item a .social-icon-img,
.social-icon.size-lg .social-icon-item a i {
  padding: 21px 0;
}
.social-icon.size-lg.style1 .social-icon-item .social-icon-name-hover {
  padding: 26px 0;
}
.social-icon.style1 .social-icon-item {
  background-color: transparent;
}
.social-icon.style1 .social-icon-item a {
  border-color: #ddd;
  background-color: transparent;
}
.social-icon.style1 .social-icon-item .social-icon-name-hover {
  position: absolute;
  display: block;
  margin: auto;
  padding: 21px 0;
  left: 0;
  right: 0;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  top: 0;
  opacity: 0;
}
.social-icon.style1 .social-icon-item:hover .social-icon-name {
  opacity: 0;
}
.social-icon.style1 .social-icon-item:hover .social-icon-name-hover {
  opacity: 1;
}
.social-icon.style2 .social-icon-item {
  background-color: transparent;
}
.social-icon.style2 .social-icon-item a {
  border-color: #ddd;
}
.social-icon.style2 .social-icon-item .social-icon-img {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.social-icon.style2 .social-icon-item i {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.social-icon.style2 .social-icon-item:hover {
  border-color: transparent;
}
.social-icon.style2 .social-icon-item:hover .social-icon-name {
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);
  opacity: 0;
}
.social-icon.style2 .social-icon-item:hover i {
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  -o-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
}
.social-icon.style2 .social-icon-item:hover .social-icon-img {
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  -o-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
}
.social-icon.style3 .social-icon-item {
  color: #fff;
  margin-left: 0;
}
.social-icon.style3 .social-icon-item i,
.social-icon.style3 .social-icon-item .social-icon-img {
  -webkit-transform: translateX(-50px);
  -moz-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  -o-transform: translateX(-50px);
  transform: translateX(-50px);
}
.social-icon.style3 .social-icon-item:hover .social-icon-name {
  -webkit-transform: translateX(50px);
  -moz-transform: translateX(50px);
  -ms-transform: translateX(50px);
  -o-transform: translateX(50px);
  transform: translateX(50px);
  opacity: 0;
}
.social-icon.style3 .social-icon-item:hover i {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
  opacity: 1;
}
.social-icon.style3 .social-icon-item:hover .social-icon-img {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
@media (min-width: 600px) and (max-width: 990px) {
  .social-icon .social-icon-item {
    width: 50% !important;
    margin-top: -1px;
  }
  .social-icon .social-icon-item:nth-of-type(odd) {
    margin-left: 0;
  }
}
@media (max-width: 599px) {
  .social-icon .social-icon-item {
    width: 100% !important;
    margin-top: -1px;
    margin-left: 0;
  }
  .social-icon .social-icon-item:first-child {
    margin-top: 0;
  }
}