.social {
    position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
    left: -30px; /* Establecemos la barra en la izquierda */
    top: 100px; /* 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 {
            width: 44px;
            height: 34px;
            display: inline-block;
            color: #fff;
            background: #ae181f;
            padding: 10px 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 span{
            background-color:#C12C33;
            color:white; 
            padding:7px !important; 
            border-radius:0px 20px 20px 0px !important;
            transition: all 500ms ease; /* Establecemos una transición a todas las propiedades */
        } 

        .social ul li .fa-facebook {
            background: #3b5998;
        }
        /* Establecemos los colores de cada red social, aprovechando su class */
        .social ul li .fa-twitter {
            background: #00abf0;
        }

        .social ul li .fa-linkedin {
            background: #0177b5;
        }

        .social ul li .icon-googleplus {
            background: #d95232;
        }

        .social ul li .fa-envelope-o {
            background: #ae181f;
        }

        .social ul li .icon-pinterest {
            background: #ae181f;
        }

        .social ul li .icon-mail {
            background: #666666;
        }

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