/* Un poco de estilo personalizado */
#galeria .ui-listview li .ui-btn p {
	color: #c0c0c0;
}
#galeria .ui-listview li .ui-btn .ui-li-aside {
	color: #eee;
}
@media (min-width: 24em) and (max-width: 47em)  {
	#galeria li h2{
		display: none;
	}
	#galeria .ui-listview li {
		background: #929200;
		color: #000;
	}
}
/* Tamaño desde 16.5em hasta el primer punto de interrupción. Disposición de 1 columna. Azulejos 250x250 píxeles incl. margen en el punto de quiebre. */
@media ( min-width: 16.5em ) {
	#galeria .ui-content {
		padding: .4375em; /* 8px */
	}
	#galeria .ui-listview li {
		float: left;
		width: 95%; /* 33.3333% incl. 2 x 1.2% margin */
		height: 14.5em; /* 232p */
		margin: .437em 1.2%;
	}
	#galeria .ui-listview li > .ui-btn {
		-webkit-box-sizing: border-box; /* Incluye relleno y borde en altura para que podamos configurarlo al 100% */
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		height: 100%;
	}
	#galeria .ui-listview li.ui-li-has-thumb .ui-li-thumb {
		height: auto; /* Para mantener la relación de aspecto. */
		max-width: 100%;
		max-height: none;
	}
	/* Haga que todos los elementos de la lista y los anclajes hereden el radio del borde de la UL.
 */
	#galeria .ui-listview li,
	#galeria .ui-listview li .ui-btn,
	#galeria .ui-listview .ui-li-thumb {
		-webkit-border-radius: inherit;
		border-radius: inherit;
	}
	/* Ocultar el icono
 */
	#galeria .ui-listview .ui-btn-icon-right:after {
		display: none;
	}
	/* Make text wrap. */
	#galeria .ui-listview h2,
	#galeria .ui-listview p {
		white-space: normal;
		overflow: visible;
		position: absolute;
		left: 0;
		right: 0;
	}
	/* Text position */
	#galeria .ui-listview h2 {
		font-size: 1.25em;
		margin: 0;
		padding: .125em 1em;
		bottom: 50%;
	}
	#galeria .ui-listview p {
		font-size: 1em;
		margin: 0;
		padding: 0 1.25em;
		/* min-height: 50%; */
		bottom: 0;
	}
	/* Fondo semitransparente y posición diferente si hay una imagen. El botón tiene un desbordamiento oculto, por lo que no es necesario establecer el radio del borde.
 */
	.ui-listview .ui-li-has-thumb h2,
	.ui-listview .ui-li-has-thumb p {
		background: #111;
		background: rgba(0,0,0,.8);
	}
	.ui-listview .ui-li-has-thumb h2 {
		bottom: 35%;
	}
	.ui-listview .ui-li-has-thumb p {
		min-height: 35%;
	}
	/* ui-li-aside tiene clase .ui-li-desc también, así que tenemos que anular algunas cosas.
 */
	#galeria .ui-listview .ui-li-aside {
		padding: .125em .625em;
		width: auto;
		min-height: 0;
		top: 0;
		left: auto;
		bottom: auto;
		/* Estilo personalizado. */
		background: #002851;
		/* background: rgba(153,0,153,.85); */
		-webkit-border-top-right-radius: inherit;
		border-top-right-radius: inherit;
		-webkit-border-bottom-left-radius: inherit;
		border-bottom-left-radius: inherit;
		-webkit-border-bottom-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	/* Si quieres agregar sombra, no mates el estilo de focus. */
	#galeria .ui-listview li {
		-moz-box-shadow: 0px 0px 9px #111;
		-webkit-box-shadow: 0px 0px 9px #111;
		box-shadow: 0px 0px 9px #111;
	}
	/* Las imágenes enmascaran el color de hover bg por lo que les damos a los usuarios de escritorio comentarios al aplicar el estilo de focus en hover. */
	#galeria .ui-listview li > .ui-btn:hover {
		-moz-box-shadow: 0px 0px 12px #33ccff;
		-webkit-box-shadow: 0px 0px 12px #33ccff;
		box-shadow: 0px 0px 12px #33ccff;
	}
	/* Animar los estilos focus y hover, y cambio de tamaño. */
	#galeria .ui-listview li,
	#galeria .ui-listview .ui-btn {
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		transition: all 500ms ease;
	}
}

/* El primer punto de interrupción es 32.25em. Disposición de 2 columnas. Azulejos 250x250 píxeles incl. margen en el punto de quiebre. */
@media ( min-width: 32.25em ) {
	#galeria .ui-content {
		padding: .500em; /* 8px */
	}
	#galeria .ui-listview  {
		max-width: 50em;
		margin: 0 auto;
	}
	#galeria .ui-listview li {
		width: 47%; /* 33.3333% incl. 2 x 1.2% margin */
		height: 14.5em; /* 232p */
		margin: .500em 1.2%;
	}

	/* El segundo punto de ruptura es 48em (768px). Disposición de 3 columnas. Los azulejos serán de 250x250 píxeles incl. margen en el punto de quiebre. */
@media ( min-width: 48em ) {
	#galeria .ui-content {
		padding: .5625em; /* 9px */
	}
	/* Establezca un ancho máximo para el último punto de interrupción para evitar demasiado estiramiento en pantallas grandes. Al establecer el ancho máximo igual al ancho del punto de interrupción menos el relleno, mantenemos los azulejos cuadrados */
	#galeria .ui-listview {
		max-width: 56.25em;
		margin: 0 auto;
	}
	/* Debido al ancho máximo de 1000 píxeles, el ancho siempre será de 230 píxeles (y el margen izquierdo/derecho de 10 píxeles), pero nos atenemos a los valores de porcentaje para fines de demostración. */
	#galeria .ui-listview li {
		width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
		height: 14.5em; /* 232p */
		margin: .5625em 1.2%;
	}
}

/* El tercer punto de ruptura es 63.75em (1020px). Disposición de 4 columnas. Los azulejos serán de 250x250 píxeles incl. margen en el punto de quiebre. */
@media ( min-width: 63.75em ) {
	#galeria .ui-content {
		padding: .625em; /* 10px */
	}
	/* Establezca un ancho máximo para el último punto de interrupción para evitar demasiado estiramiento en pantallas grandes. Al establecer el ancho máximo igual al ancho del punto de interrupción menos el relleno, mantenemos los azulejos cuadrados */
	#galeria .ui-listview {
		max-width: 62.5em; /* 1000px */
		margin: 0 auto;
	}
	/* Debido al ancho máximo de 1000 píxeles, el ancho siempre será de 230 píxeles (y el margen izquierdo/derecho de 10 píxeles), pero nos atenemos a los valores de porcentaje para fines de demostración. */
	#galeria .ui-listview li {
		width: 23%;
		height: 230px;
		margin: .625em 1%;
	}
}

/* Para esta demostración utilizamos imágenes con un tamaño de 310x310 píxeles. Justo antes del segundo punto de ruptura, las imágenes alcanzan su ancho máximo: 1019px - 2 x 9px relleno = 1001px x 30.9333% = ~ 310px */