/*imagenes pequeñas que funcionan como boton*/
.galeria{
	margin: 0px 1px;
	padding-bottom: 30px;
	padding-top: 15px;
}

.galslider .container-fluid{
	background-color: #eee;
	margin-bottom: 0;
}
.galeria .wide, .galeria .tall{
	 /*hacer calculo segun proporcion de la imagen*/
	background-size: 100%;
	background-repeat: no-repeat;
	border: 6px #eee solid;
	visibility: hidden;
	opacity: 0.9;
	border-radius: 0 0 20% 0;
}


/*expanOpen en main.css*/
.galeria .imggal:hover{
	cursor: pointer;
	/*background-size: 120%;*/
	border: 0 #eee solid;
	opacity: 1;
}
@media screen and (max-width: 768px){
.galeria .tall{
	background-size: 50%;
	background-position: center;
}
.galeria .wide{
	border-radius: 0;
}
.galeria .imggal{
	opacity: 1;
	width: 100%;
	margin-left: 0%;
}
.galeria .imggal:hover{
	border: 6px #eee solid;
	cursor: auto;
}
}

/*Slider de la galería que funcionan como boton*/
.galslider .ventana{
	display: none; /*aparecerá con la funcion js "mostrarfoto"*/
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	position: fixed;
	left: 0;
	top: 0;
	padding-top: 0px;
	z-index: 5;



}


@media screen and (max-width: 768px) and (orientation: portrait){
.galslider .ventana{
	z-index: -99;
}	
.galslider .slider .visor .tall, .galslider .slider .visor .wide{
	width: 100%;
}
}
.galslider .cerrar{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	cursor: -webkit-zoom-out;
}
.galslider .cerrar2{
	position: absolute;
	top: 0px;
	right: 10px;
	width: 20px;
	height: 20px;
	background-image: url(../img/galeria/cerrar.png); 
	background-repeat: no-repeat;
	background-size: 20px;
	cursor: -webkit-zoom-out;
}

.galslider .cerrar2:hover{

	height: 20px;
	background-image: url(../img/galeria/cerrar2.png); 
	}
.galslider .slider{
	width: 80%;
	margin: auto;
	overflow: hidden;
	max-width: 1200px; /*Maximo tamaño foto*/
	max-height: 766px;
	margin-top: 5px;
	height: 100%;
		 display: flex;
   justify-content: center;
   align-items: center;

}
.galslider .slider .visor{
	position: relative;
	left:0;
	top: 30;
	width: 100%;
	margin: auto;
}

.galslider .slider .visor ul{
	width: 100%;
}

.galslider .slider .visor li{
	width: 100%;
}

.galslider .slider .visor .li{
	width: 100%;
	text-align: center;


}


.galslider .slider .visor .imggal{
	cursor: pointer;
	display: block; /*para que pueda aparecer con jquery fadeIn*/
}

.galslider .slider .visor .wide{
	display: none; /*para que pueda aparecer con jquery fadeIn*/
	width: 100%;
	margin: auto;
	max-width: 900px;

}

.galslider .slider .visor .tall{
	display: none; /*para que pueda aparecer con jquery fadeIn*/
	width: 100%;
	width: 45%;
	margin: auto;
	max-width: 405px;
	text-align: center;
}



.galslider .slider .visor .contador{
	display: none; /*para que pueda aparecer con jquery fadeIn*/
	text-align: center;
	padding-bottom: 5px;
	color:#fff;
	font-family: "montserrat-thin", sans-serif;
	width: 100%;
	margin: auto;
	max-width: 900px;
}




@media screen and (-webkit-max-device-pixel-ratio: 1.7){
	.galslider .slider .visor .wide{
	max-width: 800px;
}

.galslider .slider .visor .tall{
	max-width: 360px;
}



.galslider .slider .visor .contador{
	max-width: 800px;
}
}

@media screen and (min-width: 1700px){
	.galslider .slider .visor .wide{
	max-width: 950px;
}

.galslider .slider .visor .tall{
	max-width: 427px;
}



.galslider .slider .visor .contador{
	max-width: 950px;
}
}

/*
@media screen and (min-width: 1200px){
	.galslider .slider .visor .imggal{
	width: 90%;
	margin: auto 5%;
	cursor: pointer;
	display: none; para que pueda aparecer con jquery fadeIn
}
}*/
.btn{
	width: 40px;
	height: 40px;
	text-indent:-9999px;
	position: absolute;
	top: 57%;
	margin-top: -20px;
	background-size: 40px;
	background-repeat: no-repeat;
	z-index: 3;
	cursor: pointer;
} 



.izquierdabtn{
	left: 4%;
	background-image: url(../img/galeria/flechaizquierda.png); 
}
.izquierdabtn:hover{
	background-image: url(../img/galeria/flechaizquierdafull.png); 
}

.derechabtn{
	right: 4%;
	background-image: url(../img/galeria/flechaderecha.png); 
}
.derechabtn:hover{
	background-image: url(../img/galeria/flechaderechafull.png); 
}


@media screen and (min-width: 1500px){
	.izquierdabtn{
		left: 10%;
	}

	.derechabtn{
		right: 10%;
	}
}




@media screen and (max-width: 1000px){
	.izquierdabtn{
		top: 52%;
	}

	.derechabtn{
		top: 52%;
	}
@media screen and (max-width: 850px){
	.izquierdabtn{
		top: 45%;
	}

	.derechabtn{
		top: 45%;
	}
}