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

.social_new {
	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: 310px; /* 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 */
	/* animacion contenedor social_new */
	-webkit-animation: show 3s;
	-moz-animation: show 3s;
	-o-animation: show 3s;
	-ms-animation: show 3s;
	animation: show 3s;
}
	.social_new ul, .social_new li {
		list-style: none; /* quitar estilo default de lista */
		padding-left: 0em;  /* quitar padding de ul principal */
		padding-bottom: 10px; /* separar cuadros */
	}
 
	.social_new ul li a {
		display: inline-block;
		float: left; /* obliga quedar ala izq aun con el hover */
		color:#fff;
		background: #000;
		padding: 10px 15px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-moz-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		-ms-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}
 
	.social_new ul li .icon-facebook {background:#3b5998;  width: 43px;} /* Establecemos los colores de cada red social_new, aprovechando su class */
	.social_new ul li .icon-twitter {background: #00abf0;  width: 43px;}
	.social_new ul li .icon-google-plus {background: #d95232;  width: 43px;}
	.social_new ul li .icon-pinterest {background: #ae181f;  width: 43px;}
	.social_new ul li .icon-mail2 {background: #eac12d;  width: 43px;}
	.social_new ul li .icon-envelope-alt {background: #eac12d;  width: 43px;} /* obliga tamaño 43 */
 
	.social_new ul li a:hover {
		color: #fff; /* Cambiamos el color del texto cuando el usuario pase el mouse */
		background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}
	
	/* efecto animacion show */
	
	@-webkit-keyframes show {
		0%  { transform: translateX(-100%); }
		50% { transform: translateX(50%); }
		100%{ transform: translateX(0%); }
		}

	@-moz-keyframes show {
			0%  { transform: translateX(-100%); }
			50% { transform: translateX(50%); }
			100%{ transform: translateX(0%); }
			}

	@-o-keyframes show {
			0%  { transform: translateX(-100%); }
			50% { transform: translateX(50%); }
			100%{ transform: translateX(0%); }
			}

	@-ms-keyframes show {
			0%  { transform: translateX(-100%); }
			50% { transform: translateX(50%); }
			100%{ transform: translateX(0%); }
			}