.i{
    cursor: pointer;
    width: 20px;
    height: 20px;
    color: white !important;
    position: absolute;   
    top: 50%;   
    left: 50%;
    transform: translate(-40%,-40%);
    
  }
  .fb{
    transform: translate(60%,-40%);
  }
  .change-color{
    font-family:FontAwesome;
    color: white;
  }
 
.bg-icon{
    cursor: pointer;
    color: white;
    width: 50px;
    height: 50px;
    padding: 20px;
    padding: 10px;
    border-radius: 50%;
    position: relative;
  
}

.share-drop{
    color: white;
    background-color: #2a9e55;
    position: absolute;
    z-index: 1000;
}
.facebook-drop{
    color: white;
    background-color: #4267B2;
    position: absolute;
    z-index: 999;
    transition: all 1s ease-in;
}
.twitter-drop{
    background-color: #00acee;
    position: absolute;
    z-index: 998;
}
.linked-drop{
    background-color: #0e76a8;
    position: absolute;
    z-index: 997;
}
.google-drop{
    background-color: #db4a39;
    position: absolute;
    z-index: 996;
}


.share-drop-active{
    color: white;
    top: 0px;
}
.facebook-drop-active{
    top: 70px;
    
}
.twitter-drop-active{
    top: 140px;
}
.linked-drop-active{
    top: 210px;
}
.google-drop-active{
    top: 280px;
}