.social {
	position: absolute; /* 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: 120px; /* Bajamos la barra 200px de arriba a abajo */
	
}
 
	.social ul {
		list-style: none;
	}
 
	.social ul li a {
		display: inline-block;
		color:#fff;
		background: #252525;
		width:250px;
		max-height:50px;		
		font-size:0.5em;
		text-align:left;
		padding-left:50px;
		
		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 */
	}
	
@media only screen and (max-width: 768px) {
	.social ul li a {
		width:180px;
		padding-left:25px;
	}
}
 
	.social ul li .icon-facebook {background:#252525;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-instagram {background: #000;}
	.social ul li .icon-youtube {background: #252525;}
	.social ul li .icon-whatsapp {background: #252525;}
	.social ul li .icon-mail {background: #666666;}
 
	.social ul li a:hover {
		background: #363636; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding-right:30px;
		color: #f2f1f1;
	}