@import url("bootstrap.css");

.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 */
    right: 0;
    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: 20px 20px;
            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;
            border-radius: 180px;
        }
        /* Establecemos los colores de cada red social, aprovechando su class */
        .social ul li .icon-videos {
            background: #006A96;
            border-radius: 180px;
        }

        .social ul li .icon-twitter {
            background: #00abf0;
            border-radius: 180px;
        }

        .social ul li .icon-googleplus {
            background: #d95232;
            border-radius: 180px;
        }

        .social ul li .icon-pinterest {
            background: #ae181f;
            border-radius: 180px;
        }

        .social ul li .icon-instagram {
            background: #E0516C;
            border-radius: 180px;
        }

        .social ul li .icon-phone {
            background: #CA242E;
            border-radius: 180px;
        }

        .social ul li .icon-whatsapp {
            background: #25D366;
            border-radius: 180px;
        }

        .social ul li .icon-mail {
            background: #008000;
            border-radius: 180px;
        }

        .social ul li .icon-us {
            background: #E94A2E;
            border-radius: 180px;
        }

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