.wrapper{
    display:inline-flex;
    list-style:none;
}
    .wrapper span a i {
        text-decoration: none;
        color: rgb(192,192,192);
    }
.wrapper .icon{
    position:relative;
    background:#fff;
    border-radius:50%;
    padding:3px;
    margin:3px;
    width:25px;
    height:25px;
    font-size:14px;
    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;
        font-size: 14px;
        background: #ffffff;
        color: #000000;
        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:10px;
        width:10px;
        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 .icon:hover span,
    .wrapper .icon:hover .tooltip{
        text-shadow:0px -1px 0px rgba(0,0,0,0.1); 
    }
    .wrapper .facebook:hover,
    .wrapper .facebook:hover .tooltip,
    .wrapper .facebook:hover .tooltip::before{
        background:#1877f2;
        color:#fff;
    }
    .wrapper .linkedin:hover,
    .wrapper .linkedin:hover .tooltip,
    .wrapper .linkedin:hover .tooltip::before {
        background: #0077b5;
        color: #fff;
    }
    .wrapper .youtube:hover,
    .wrapper .youtube:hover .tooltip,
    .wrapper .youtube:hover .tooltip::before {
        background: #Cd201F;
        color: #fff;
    }

    .wrapper .instgram:hover,
    .wrapper .instgram:hover .tooltip,
    .wrapper .instgram:hover .tooltip::before {
        background: linear-gradient(45deg, #ffde85 0%,#f7792a 30%,#f7504f 40%,#d82b81 60%,#d82b81 75%,#9536c2 100%);
        color: #fff;
    }
    .wrapper .twitter:hover,
    .wrapper .twitter:hover .tooltip,
    .wrapper .twitter:hover .tooltip::before {
        background: #000;
        color: #fff;
    }

    .wrapper .rss:hover,
    .wrapper .rss:hover .tooltip,
    .wrapper .rss:hover .tooltip::before {
        background: #ee802f;
        color: #fff;
    }
    .wrapper .threads:hover,
    .wrapper .threads:hover .tooltip,
    .wrapper .threads:hover .tooltip::before {
        background: #000;
        color: #fff;
    }