/*
	He compartido contigo esto pero puedes hacer con el lo que desees, sin embargo si entre las cosas que desees es tener un gesto de agradecimeinto hacía mí
	recuerda nombrar mi sitio web www.johanpiña.com, mi cuenta en twitter @jopin172.  Y si es mucho pedir al menos uno de los dos.
	:)
*/
a.boton{
	padding:5px;
	background:#000;
	color:#FFF;
}
#galeria_johan{
	width:800px;    /* ancho del contenedor que va a ocupar la galeria */
	margin:0 auto;
}
#galeria_johan a{
	text-decoration:none;
	cursor:pointer;
}
#galeria_johan .photo-big {
	width: 800px;     /* ancho de la galeria */
}
#galeria_johan a.photo {
	float: left;
	width: 215px;     /* ancho del thumbnail */
	position: relative;
	border-bottom: 2px solid #ededed;  /* border bottom color del thumbnail */
	border-top: 1px solid #ededed;     /* border top color del thumbnail */
	box-shadow: 0 0 0 transparent inset;
	margin:3px;						  /* espacio entre cada thumbnail */
}
#galeria_johan a.photo img {
	float: left;
	position: relative; 
	z-index: 5;
	opacity: 0.6;                    /* lo que permite opacar los thumnails puedes jugar desde 0.1 a 1 */
}
#galeria_johan a.photo span {
	opacity: 0;
	position: absolute; 
	left: 50%; 
	top: 50%; 
	z-index: 10;
	width: 91px; 
	height: 91px;
	background: url(../images/lens.png) no-repeat;     /* aquí llamamos a la imagen lupa que aparece al hacer hove sobre el thumbnail debes tener cuidado si la cambias de carpeta */
	margin-left: -45px;                        
	margin-top: -45px;
}
#galeria_johan a.photo:hover  {
	box-shadow: 0 4px 0 #FB081C, 0 -4px 0 #FB081C;  /* shadow y color que aparece en el top y bottom cuando haces hover sobre el thumbnail  */
}
#galeria_johan a.photo:hover img {
	opacity: 1;
	-webkit-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-o-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
}
#galeria_johan a.photo:hover span {
	opacity: 1;
	-webkit-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-o-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
}
/* PAGINACION */
#galeria_johan .pagination {
	float: left;
	width: 100%;
	margin: 10px 0 60px 0;
	text-align: center; 
}
#galeria_johan .pagination a {
	padding: 5px 8px;
	text-decoration: none !important;
	font-style: normal !important;
	font-size: 0.688em;
	color: white;
	opacity:1;
}
#galeria_jo	han .pagination a:hover,
#galeria_johan .pagination a.current,
#galeria_johan .pagination a.prev:hover,
#galeria_johan .pagination a.next:hover {
	background-color: #CC0000;             /* color de fondo cuando pasas el cursor o cuando esta activa la página */
}
#galeria_johan .pagination a.current {
	font-weight: bold;
}
#galeria_johan .pagination a.prev {
	background: url(../images/arrow-nav.png) 8px -49px no-repeat;
	padding: 5px 9px;
}
#galeria_johan .pagination a.next {
	background: url(../images/arrow-nav.png) 8px -163px no-repeat;
	padding: 5px 9px;
}
#galeria_johan .pagination a,
#galeria_johan .pagination a.prev,
#galeria_johan .pagination a.next{
	background-color:#FC2A43;              /* color de fondo de cada enlace o link de paginación */
}
#galeria_johan .pagination span {
	font-size: 0.688em;
}
#galeria_johan .pagination a.prev:hover {
	background-position: 8px 8px;
}
#galeria_johan .pagination a.next:hover {
	background-position: 8px -106px;
}
/*
	Recuerdalo esto es tuyo, lo he compartido contigo puedes hacer con el lo que desees, sin embargo si entre las cosas que desees es tener un gesto de agradecimeinto hacía mí
	nombra mi sitio web www.johanpiña.com, mi cuenta en twitter @jopin172.  Y si es mucho pedir al menos uno de los dos.
	:)
*/