@charset "utf-8";
/* Galeria Demo */

* {margin: 0; padding: 0; box-sizing: border-box; font-family:  'Quicksand', sans-serif;}

/*grid*/
.colum_00g {width: 100%;} .colum_00 img {width: 100%;}
.colum_01g {width: 96%; margin: 30px auto; display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 10px; }
.colum_02g {width: 96%; margin: 30px auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; }
.colum_03g {width: 96%; margin: 30px auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }

.ajuste_h300g figure {height: 300px !important; overflow: hidden;}

.ajuste_img { width: 100%;  height: 100% ; object-fit: cover;}

@media (min-width:1920px) {
	.colum_03g {width: 96%; margin: 30px auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; }	
}
@media (max-width:820px) {
	.colum_03g {width: 96%; margin: 30px auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; }	
}
@media (max-width:431px) {
	.colum_03g {width: 96%; margin: 30px auto; display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 20px; }	
}


/*estilos para grid de galeria*/
.galeria {width: 100%; margin: 10px auto; z-index: 999;}
.galeria .gal_sec div { position: relative; width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid lightgray;}
.galeria .gal_sec h2 { margin-top: 10px;}
.galeria .gal_sec span { color: gray; font-size: 0.8em; font-weight: normal;}
.galeria .gal_sec figure {width: 100%; overflow: hidden;}
.galeria .gal_sec figure img {width: 100%; transition: 0.5s;}
.galeria .gal_sec figure img:hover { transform: scale(1.2); filter: opacity(0.8); cursor: pointer;}


/*modal*/


.overlay {
	position: fixed;
	padding: 2.5%;
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	top: 0px;
	background-color: rgba(0,0,0,0.50);
	z-index: 99;
	transition: all 0.7s ease;
	display: none;
	z-index: 99999;
}

.overlay .slideshow {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.50);
	color: white;
	position: relative;
	display: grid;
	place-items: center;
}
.overlay .slideshow img { height: 70vh; width: 70vw; object-fit: contain;}
.copy {font-weight: 100; text-align: center; color: white;}
.btn-cerrar {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 10px;
	right: 10px;
	border-radius: 30%;
	display: grid;
	place-items: center;
	font-size: 30px;
	color: white;
	background-color: red;
	transition: all 0.3s ease;
}
.btn-cerrar:hover { cursor: pointer; background-color: red;}
.botones {
	width: 100%;
	color: white;
	display: grid;
	place-items: center;
	font-size: 40px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 1.5;
	background-color: black;}
.botones:hover > i{ transform: scale(1.8); transition: all 0.2s ease; opacity: 1.0; color: red;}

.atras { right: 5px; width: 40px; height: 100px; border-radius: 10px; }
.adelante { left: 5px; width: 40px; height: 100px; border-radius: 10px; }

.mdi {pointer-events: none;}