.social {
    opacity: 0;
    position: relative;
    width: 40px;
    height: 40px;
    color: #FFF;
    font-size: 17px;
    text-align: center;
}

    .social i {
        color: #fff;
        padding-top: 12px;
    }

.twitter {
    background: #00aced;
}

.facebook {
    background: #3b5998;
}

.youtube {
    background: #bb0000;
}

.instagram {
    background: #f44f8c;
}

.linkedin {
    background: #0077b5;
}

.social:hover {
    background: #000;
}

.wrapper {display: inline-flex; list-style: none;}
.wrapper li i {font-size: 22px; padding-top: 6px;}
.wrapper .icon {position: relative; border-radius: 5px; padding: 2px; margin: 2px; width: 40px; height: 40px;  font-size: 18px; display: flex; justify-content: center; align-items: center; flex-direction: column; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.wrapper .tooltip { position: absolute; top: 0; padding: 5px 8px; border-radius: 5px;  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);  opacity: 0;  pointer-events: none;  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.wrapper .tooltip::before {position: absolute; content: ""; height: 8px; width: 8px; background: #ffffff; bottom: -3px; left: 50%; transform: translate(-50%) rotate(45deg); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);}

.wrapper .icon:hover .tooltip {top: -45px; opacity: 1; visibility: visible; pointer-events: auto;}
.wrapper li a {color: #fff;}
.wrapper .icon:hover span, .wrapper .icon:hover .tooltip { text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);  }
.wrapper .facebook {background: #1877F2; color: #ffffff; }
.wrapper .facebook:hover, .wrapper .facebook:hover .tooltip, .wrapper .facebook:hover .tooltip::before {  background: #1877F2;  color: #ffffff;}
.wrapper .twitter { background: #1DA1F2; color: #ffffff; }
.wrapper .twitter:hover, .wrapper .twitter:hover .tooltip, .wrapper .twitter:hover .tooltip::before { background: #1DA1F2; color: #ffffff; }
.wrapper .instagram { background: #E4405F; color: #ffffff;}
.wrapper .instagram:hover, .wrapper .instagram:hover .tooltip, .wrapper .instagram:hover .tooltip::before { background: #E4405F;  color: #ffffff;}
.wrapper .linkedin { background: #0077b5;  color: #ffffff;}
.wrapper .linkedin:hover, .wrapper .linkedin:hover .tooltip, .wrapper .linkedin:hover .tooltip::before { background: #0077b5;  color: #ffffff;}
.wrapper .youtube {background: #CD201F; color: #ffffff; }
.wrapper .youtube:hover, .wrapper .youtube:hover .tooltip, .wrapper .youtube:hover .tooltip::before { background: #CD201F; color: #ffffff;}