.social {
    position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
    right : 0; /* Establecemos la barra en la izquierda */
    top: 200px; /* Bajamos la barra 200px de arriba a abajo */
    z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
    .social ul {
        list-style: none;
    }
 
    .social ul li a {
        display: inline-block;
        color:#fff;
        background: #000;
        padding: 12px 17px;
        text-decoration: none;
        -webkit-transition:all 500ms ease;
        -o-transition:all 500ms ease;
        transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
    }
 
    .social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
    .social ul li .icon-twitter {background: #00abf0;}
    .social ul li .icon-whatsapp {background: #25d366;}
    .social ul li .icon-bubbles {background: #34b7f1;}
    .social ul li .icon-mail {background: #666666;}
 
    .social ul li a:hover {
        background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
        padding: 12px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
    }