@charset "utf-8";
/* CSS Document */

.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: 100px; /* Bajamos la barra 200px de arriba a abajo */
z-index: 20000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}

.social ul {
list-style: none;
-webkit-padding-start: 0;
}


.social ul li a {
display: inline-block;
color:#fff;
background: #000;
padding: 15px 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 .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-youtube {background: #CC181E;}
.social ul li .icon-googleplus {background: #d95232;}
.social ul li .icon-pinterest {background: #ae181f;}
.social ul li .icon-mail {background: #666666;}


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


/* social footer */

.social2 {
}

.social2 ul {
list-style: none;
-webkit-padding-start: 0;
}


.social2 ul li a {
display: inline;
color:#fff;
padding: 12px 12px;
text-decoration: none;
float:left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0 0 0 5px;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
}

.social2 ul li .icon-facebook {background:#3b5998;}
 /* Establecemos los colores de cada red social, aprovechando su class */
.social2 ul li .icon-twitter {background: #00abf0;}
.social2 ul li .icon-youtube {background: #CC181E;}
.social2 ul li .icon-googleplus {background: #d95232;}
.social2 ul li .icon-pinterest {background: #ae181f;}
.social2 ul li .icon-mail {background: #666666;}


.social2 ul li a:hover {
/* Cambiamos el fondo cuando el usuario pase el mouse */
padding: 16px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}