#flecha{
	transition: 1.5s ease;
 	-moz-transition: 1.5s ease; /* Firefox */
 	-webkit-transition: 1.5s ease; /* Chrome - Safari */
 	-o-transition: 1.5s ease; /* Opera */
	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: 400px; /* 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 */
}
 
#flecha:hover{
	transform : rotate(180deg);
	-moz-transform : rotate(180deg); /* Firefox */
	-webkit-transform : rotate(180deg); /* Chrome - Safari */
	-o-transform : rotate(180deg); /* Opera */
}
.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 */
	top: 230px; /* 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;
		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: #8a6d3b;}
	.social ul li .icon-googleplus {background: #2f8ebd;}
	.social ul li .icon-pinterest {background: #34ce37;}
	.social ul li .icon-mail {background: #666666;}
 
	.social ul li a:hover {
		background: rgba(0, 0, 0, 0.09); /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 5px 10px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}
	
/***************************CANDADO DE ACCESO************************************/
.social2 {
	position: absolute;
	right: 0; /* Establecemos la barra en la izquierda */
	top:10px;/* 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 */
}
	.social2 ul {
		list-style: none;
	}
 
	.social2 ul li a {
		display: inline-block;
		color:#fff;
		background: #000;
		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 */
	}
 
	.social2 ul li .icon-facebook2 {background:rgba(196, 160, 0, 0.02);} /* Establecemos los colores de cada red social, aprovechando su class */
	
 
	.social2 ul li a:hover {
		background: rgba(132, 184, 74, 0.52); /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 5px 10px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}
@media screen and (max-width: 480px) and (orientation: portrait){
.social2{
	width:0px;
}
.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 */
	/* Bajamos la barra 200px de arriba a abajo */
	/* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}

}