#widget{
    position: fixed;
    bottom: 6%;
    right: 3%;
    transition: .3s;
    transform: translateX(150px);
    padding: 6px;
    z-index: 100;
    background: #ffffff;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 1px solid #dedede;
}
#widget.showWidget{
transition: .3s;
transform: translateX(0px); 
}
#widget ul li{
   background: #dedede;
   border-radius: 50%;
   padding: 2px;
   width: 50px;
   height: 50px;
   margin-bottom: 8px;
   transition: .3s;
}
#widget ul li a i{
    font-size: 30px;
    padding: 8px;
    transition: .3s;
    transform: translateY(0);
} 
#widget ul li:nth-of-type(1){
   background-color: #cc0015;
}
#widget ul li:nth-of-type(2) {
   background-color: #074d00;
}
#widget ul li:nth-of-type(3){
   background-color: #005796;
}
#widget ul li:nth-of-type(4){
   background-color: #ff8300;
       margin: 0;
}
#widget ul li a i{
   color: #ffffff;
}
#widget ul li:hover {
   transition: .3s;
}
#widget ul li:nth-of-type(1):hover { 
    background-color: #73000c;
}
#widget ul li:nth-of-type(2):hover {
    background-color: #053200;
}
#widget ul li:nth-of-type(3):hover {
    background-color: #003963;
}
#widget ul li:nth-of-type(4):hover {
    background-color: #a22100;
}
#widget ul li:hover a i{
   transition: .3s;
    transform: translateY(-2.5px);
}
@media(max-width: 567px){
   #widget {
    right: 1.5%;
    padding: 4px;
   }
   #widget ul li {
    width: 45px;
    height: 45px;
   }
   #widget ul li a i {
    font-size: 25px;
   }
}