*{
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.social {
    position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
    left: 0; /* Establecemos la barra en la izquierda */
    top: 415px; /* 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;
            font-size:15px;
            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 .fa-facebook {
            padding: 10px 17px;
            background: #3b5998;
        }
        /* Establecemos los colores de cada red social, aprovechando su class */
        .social ul li .fa-whatsapp {
            padding: 10px 15px;
            background: #00bb2d;
        }

        .social ul li .fa-instagram {
            padding: 10px 15px;
            background: #8134AF;
        }
        .social ul li .fa-envelope {
            background: #666666;
            padding: 10px 14px;
        }

        .social ul li a:hover {
            background: #428ECC; /* Cambiamos el fondo cuando el usuario pase el mouse */
            padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
        }