.social-media-variant-v11 {
  text-align: center;
  position: relative;
  overflow: hidden;
}

ul.social-media-list {
    position: relative;
    display: table;
    margin: 0 auto 60px;
    padding: 0;
}
ul.social-media-list li {
    position: relative;
    display: inline-block;
    list-style: none;
    margin-left: 15px;
    margin-right: 15px;
    cursor: pointer;
}
@media (min-width: 992px){
  .social-media-variant-v11 {
    text-align: left;
  }
  .social-media-variant-v11:after {
    display: block;
  }
  ul.social-media-list {
      margin: 0;
  }
  ul.social-media-list li {
    margin-left: 0;
    margin-right: 40px
  }
}

ul.social-media-list li a {
    text-decoration: none;
    position: relative;
    display: block;
    text-align: center;
    width: 42px;
}
ul.social-media-list li a .fa {
    font-size: 3.5em;
    color: #ccc;
}
@media (min-width: 768px){
  ul.social-media-list li a .fa {
      font-size: 6em;
      color: #ccc;
  }
  ul.social-media-list li a {
    width: 84px;
  }
}
ul.social-media-list li a .hover-icon {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    overflow: hidden;
    transition: 0.5s ease-in-out;
}

ul.social-media-list li a .h-insta {
    background-image: linear-gradient(45deg, 
      #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,
      #bc1888 100%);
    -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
    border-bottom: 4px solid #dc2743;
}
ul.social-media-list li a .h-whatsapp {
    content: "\f232";
    color: #25D366;
    border-bottom: 4px solid #25D366;
}
ul.social-media-list li a .h-twitter{
    content: "\f099";
    color: #1DA1F2;
    border-bottom: 4px solid #1DA1F2;
}
ul.social-media-list li a .h-fb {
    content: "\f09a";
    color: #4063CC;
    width: 100%;
    border-bottom: 4px solid #4063CC;
}
ul.social-media-list li a .h-pinterest {
    content: "\f0d2";
    color: #cc2229;
    /* width: 100%; */
    border-bottom: 4px solid #cc2229;
}

@media (max-width: 991px) {
    ul.social-media-list li a .h-insta,
    ul.social-media-list li a .h-whatsapp,
    ul.social-media-list li a .h-twitter,
    ul.social-media-list li a .h-fb,
    ul.social-media-list li a .h-pinterest
    {
        border-bottom: 0;
    }
}

ul.social-media-list li.social-hover a .hover-icon {
  height: 100%;
}

.img-holder {
  border-radius: 60px;
  border: 1px solid #CC2229;
  overflow: hidden;
  box-shadow: 0 10px 10px rgba(0,0,0,0.3);
  position: relative;
}
.img-social {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  transition: all 0.7s ease-out;
}
.show-social-img {
  opacity: 1;
  visibility: visible;
}