/** esto son css generales de la página **/ 
#pagina{
	max-width: 100%;
	padding: 0;
	margin: 0;
}
h1,h2{
	position: absolute;
	color: #FFF;
	z-index: 1;
	display: block;
	width: 100%;
	text-align: center;
	margin: 1em 0 0 0;
	text-shadow: 0 1px 1px #333;
	opacity: 0;
}
h2{
	margin-top: 3em;
}
/** CSS para el SLIDESHOW **/
.galeria{
	-webkit-transition: max-height .5s ease 0s;
	-moz-transition: max-height .5s ease 0s;
	-ms-transition: max-height .5s ease 0s;
	-o-transition: max-height .5s ease 0s;
	transition: max-height .5s ease 0s;	
	position: relative;
	max-width: 100%;
	height: 100%;
	max-height: 700px;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	box-shadow: 0 .5em .5em -.3em #555;
	border: 5px solid #FFF;
	z-index: 0;
}
.galeria ul{
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.galeria li{
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	z-index: 0;
}
.galeria li:before,
.galeria li:after{
	-webkit-transition: opacity .5s ease 0s,left .5s ease 0s;
	-moz-transition: opacity .5s ease 0s,left .5s ease 0s;	
	-ms-transition: opacity .5s ease 0s,left .5s ease 0s;
	-o-transition: opacity .5s ease 0s,left .5s ease 0s;
	transition: opacity .5s ease 0s,left .5s ease 0s;
	position: absolute;	
	left: 0;
	display: block;
	width: 100%;
	margin: 0;
	text-align: center;
	z-index: 13;
	color: #FFF;
	text-shadow: 1px 1px 2px #000;
	text-transform: uppercase;
	font-family:"Yanone Kaffeesatz bold", Impact, Helvetica;	
	opacity: 0;
}
.galeria li:after{
	font-size: 3.5em;
	content: attr(title);	
	left: -10em;
	bottom: 50%;
}
.galeria li:before{
	content: attr(data-subtitulo);	
	font-size: 2em;
	bottom: 45%;
	left: 10em;
}
.galeria .visible:before,
.galeria .visible:after{
	-webkit-transition: opacity .5s ease .5s,left .5s ease .5s;
	-moz-transition: opacity .5s ease 0s, left .5s ease .5s;
	-ms-transition: opacity .5s ease .5s,left .5s ease .5s;
	-o-transition: opacity .5s ease .5s,left .5s ease .5s;	
	transition: opacity .5s ease .5s,left .5s ease .5s;	
	opacity: .8;
	left: 0;
}
.galeria li img{
	position: relative;
	z-index: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	display: block;
	opacity: 1;
}
.IE8 .galeria li{z-index: 10;}
.IE8 .galeria li img{z-index: -1;}
.IE8 .galeria li img{width: auto; height: auto; max-height: 100%;}
.IE8 .galeria li:before, .IE8 .galeria li:after{left: 0;}
.botones{	
	-webkit-transition: opacity .5s ease 0s;
	-moz-transition: opacity .5s ease 0s;
	-ms-transition: opacity .5s ease 0s;
	-o-transition: opacity .5s ease 0s;
	transition: opacity .5s ease 0s;
	position: absolute;
	display: block;
	width: 100%;
	bottom: 25%;
	z-index: 10;
	opacity: .3;
	overflow: hidden;
}
.botones .boton{
	position: relative;
	font-size: 1em;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	padding: .2em .7em;
	margin: 0 0 0 1%;
	display: inline;	
	background: rgba(0,0,0,.5);
	box-shadow: 0 0 .5em #555;
	float: left;	
}
.botones .boton:nth-child(2n){
	float: right;
}
.IE8 .botones .boton{
	background: #000;
	opacity: .5;
}
#right.boton{
	margin: 0 1% 0 0;
}
.galeria:hover .botones{
	opacity: 1;
}
/** indicadores num imagenes **/
#indicadores{
	position: absolute;
	display: block;
	width: 100%;
	text-align: center;
	z-index: 13;
	bottom: 7%;
	height: 1%;
}
.boton-redondo{
	display: inline-block;
	height: .5em;
	width: .5em;
	border-radius: .5em;
	border: 2px solid #FFF;
	margin: 0 .8em 0 0;
}
.IE8 .boton-redondo{display: inline; width: 0; height: 0; padding: 0 .5em;}
.boton-redondo.selected{
	background: #FFF;
}
/* animacion por css */
#lista-galeria{
	left: 0;
	-moz-transition: left .3s ease .3s;
	-webkit-transition: left .3s ease .3s;
	-o-transition: left .3s ease .3s;
	-ms-transition: left .3s ease .3s;
	transition: left .3s ease .3s;
}
#pie{
	position: relative;
	bottom: 0;
	margin-top: 1.9em;
}
@media screen and (max-width:1024px){
	.galeria li:before{bottom: 40%;}
}
@media screen and (max-width:900px){}
@media screen and (max-width:800px){
	.galeria li:after{font-size: 2.5em;}
	.galeria li:before{font-size: 1.5em;}
}
@media screen and (max-width:600px){}
@media screen and (max-width:480px){
	.galeria li:after{font-size: 1.5em;}
	.galeria li:before{font-size: 1em; bottom: 38%;}
}
@media screen and (max-width:320px){
	#indicadores{bottom: 12%;}
}