@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap');

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

.descripcion { width: 100%; color: white; position: absolute; z-index: -2;}

.espacio {margin-top: 0px;}


.colum_00 {width: 100%; background-color: #000;} 
.colum_01 {width: 90%; max-width: 1800px; margin: 80px auto; display: grid; grid-template-columns: 1fr }
.colum_02 {width: 90%; max-width: 1800px; margin: 80px auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px; }
.colum_03 {width: 90%; max-width: 1800px; margin: 80px auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 40px; }
.colum_04 {width: 90%; max-width: 1800px; margin: 80px auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; }
.colum_05 {width: 90%; max-width: 1800px; margin: 80px auto; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 40px; }
.colum_06 {width: 90%; max-width: 1800px; margin: 80px auto; display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 40px; }
.colum_07 {width: 90%; max-width: 1800px; margin: 80px auto; display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 40px; }

.colum_01f {width: 100%; margin: 80px auto; display: grid; grid-template-columns: 1fr}
.colum_02f {width: 100%; margin: 80px auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px; }
.colum_03f {width: 100%; margin: 80px auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 40px; }
.colum_04f {width: 100%; margin: 80px auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; }
.colum_05f {width: 100%; margin: 80px auto; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 40px; }

.img {width: 600px; margin: auto; padding: 30px 0; box-sizing: border-box; }
.img img { width: 100%;}

/* terracotta */
.sub_terracotta { width: 100%; padding-bottom: 30px; }

.sub_terracotta div {
	width: 80%;
	margin: auto;
	display: grid; 
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	height: 40px;
	overflow: hidden;
	background-color: black;
	color: #EB8137;
}
.sub_terracotta a {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	text-decoration: none;
	transition: 0.5s;
	border-radius: 10px;
	overflow: hidden;
	background-color: #EB8137;
	color: white;
}
.sub_terracotta span {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	text-decoration: none;
	transition: 0.5s;
	border-radius: 10px;
	overflow: hidden;
	background-color: gray;
	color: white;
}
.sub_terracotta a:hover { background-color: gray;}
/* terracotta */

@media (min-width:1181px) {
	.sub_terracotta div { width: 40%;}
}
@media (max-width:1180px) {
	.colum_03 { grid-template-columns: repeat(2, 1fr);}
	.img {width: 50%;}
	.sub_terracotta {width: 100%;}
	.sub_terracotta div { width: 90%;}
}
@media (max-width:860px) {
	.colum_02 { grid-template-columns: 1fr;}
}
@media (max-width:431px) {
	.colum_03 { margin: 50px auto; grid-template-columns: 1fr;}
	.colum_02f { grid-template-columns: 1fr;}
	
	.img {width: 70%;}
}


/* menu */
.imagotipo {
	display: block;
	margin: auto;
	width: 300px;
	padding-top: 3%;
}
b { color: red; }
header label { display: none; }
#btn-menu { display: none; }
.menu {
	width: 100%;
	padding: 50px 20px;
	box-sizing: border-box;
	z-index: 99999 !important;
}
.menu ul {
	margin: auto;
	display: flex;
	justify-content: center;
	list-style: none;
	text-align: center;
}
.menu ul ul { display: none; }
.menu ul li { border-top: 1px solid #b2b2b2; border-bottom: 1px solid #b2b2b2; }
.menu a {
	display: block;
	text-decoration: none;
	color: black;
	padding: 25px 20px;
	transition: 1s;
}
.menu a:hover { background: rgba(0,0,0,0.8); color: white; }
.menu ul li:hover ul { display: block; position: absolute; }
.menu li li {
	width: 175px;
	background-color: white;
	border: none;
	border-bottom: 1px solid #b2b2b2;
}

@media (max-width:1368px) {
	.menu ul {width: 100%; max-width: 96%; font-size: 0.8em;}
}
@media (max-width:1180px) {	
	.espacio {display: block; height: 95px;}
	.imagotipo {
		display: block;
		position: absolute;
		width: 150px;
		top: 1px;
		left: 5%;
	}
	.imagotipo img { width: 100%; }
	header label {
		display: block;
		position: absolute;
		border: 1px solid #b2b2b2;
		border-radius: 5px;
		padding: 5px;
		box-sizing: border-box;
		right: 20px;
		top: 25px;
	}
	.menu {
		position: absolute;
		padding: 0;
		top: 89px;
		right: -25px;
		width: 65%;
		transform: translateX(-170%);
		transition: all 0.3s;
	}
	.menu ul { display: block; background: white; }
	.menu ul li { border: none; border-bottom: 1px solid #b2b2b2; }
	.menu a {
		padding: 20px 20px;
	}
	#btn-menu:checked ~ .menu { transform: translateX(0%); }
}
/* menu */
/* galeria */
.galeria1 {
	width: 100%;
	height: 500px;
	margin: auto;
	display: flex;
	padding-bottom: 60px;
}
.selector1 { width: 25%; }
.selector1 figure { width: 100%; height: 100%; }
.selector1 img {  width: 100%; height: 100%; object-fit: cover;}
.selector1:hover { width: 100%; transition: all 0.6s; }
.selector1 figcaption {
	width: 100%;
	display: block;
	z-index: 999;
	background-color: rgba(0,0,0,0.7);
	border-right: 1px solid white;
	padding: 20px;
	box-sizing: border-box;
	color: white;
}
.galeria2 { display: none; }
@media (max-width:1180px) {
	.galeria1 { margin-top: 90px; }
}
@media (max-width: 835px){
}
@media (max-width:431px) {
	.galeria1 { display: none; }
	.galeria2 {
		display: block;
		width: 100%;
		flex-wrap: wrap;
		margin-top: 90px;
		border: none;
	}
	.selector2 { width: 90%; height: auto; margin: auto; 	}
	.selector2 figure { width: 100%; }
	.selector2 img { width: 100%; }
	.selector2 figcaption {
		width: 100%;
		background-color: rgba(0,0,0,0.7);
		padding: 20px;
		box-sizing: border-box;
		color: white;
		margin-top: -4px;
		margin-bottom: 5px;
	}
}
/* galeria */

/* index */
.ind { width: 100%;}
.ind01 {width: 70%; margin: 80px auto 0;}
.ind01 p { 
    font-size: 3.5em; 
    font-weight: normal; 
    text-align: center;
    color: #555;
    border: 1px solid gray;
    padding: 10px 50px;
    box-sizing: border-box;
}

.ind02 {
    width: 80%;
    margin: 80px auto 0;
    display: grid; 
    grid-template-columns: 1fr 3fr;
    gap: 0 30px;
    place-items: center;
    text-align: right;
}
.ind02 h1 { width: 100%; font-size: 3.5em; font-weight: 100; color: #555;}
.ind02 h2 { width: 100%; font-size: 2em; font-weight: 100; padding: 30px 0; box-sizing: border-box;}
.ind02 p { width: 100%; font-size: 1.3em; padding: 30px 0; box-sizing: border-box; }
.ind02 img { width: 100%; border-radius: 20px; border: 1px solid #b2b2b2; }

.ind03 { width: 80%; margin-top: 80px;}
.ind03 article { width: 100%; border: 1px solid lightgray; border-radius: 10px; overflow: hidden; box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);}
.ind03 h1 { width: 90%; margin: auto; font-size: 1.5em; font-weight: 100; text-align: center; padding: 10px 0; box-sizing: border-box; border-bottom: 2px solid #6f492d;}
.ind03 figure {width: 100%; height: 350px; overflow: hidden; position: relative;}
.ind03 img { width: 100%; height: 350px; transition: 0.5s;} .ajimg { object-fit: cover;}
.ind03 img:hover { transform: scale(1.5);}
.ind03 figcaption { width: 90%; height: 250px; margin: auto; padding: 15px 0; box-sizing: border-box; text-align: justify;}
.ind03 a { color: red; text-decoration: none;}

.ind04 { width: 100%;}

.artindex { 
	width: 90%; 
	margin: 0 auto 30px; 
}
.artindex article { position: relative; border-radius: 10px; border: 1px solid lightgray; box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);}
.artindex h1 { font-size: 2em; font-weight: 100; margin: 10px 10px 0 10px;}
.artindex h2 { font-size: 1em; font-weight: 100; padding: 10px; box-sizing: border-box;}
.artindex a { display: flex; width: 100%; height: 100%; text-decoration: none; color: gray; border-bottom: 1px solid gray;}
.artindex a:hover { border-bottom: 1px solid darkred; color: darkred}
.artindex figure { overflow: hidden; height: 300px;}
.artindex img { width: 100%;}
.artindex p { padding: 20px 10px; box-sizing: border-box; text-align: justify;}

@media (max-width:1368px) {
	.ind01 { width: 90%;}

}
@media (max-width:1180px) {
	.ind01 p { font-size: 2.5em;}
	.ind02 { width: 90%; grid-template-columns: 1fr; }
	.ind02 h1 { font-size: 2.8em; }
	.ind03 { width: 90%;}
}
@media (max-width:860px) {
	.ind01 p { font-size: 2em;}
	.ind02 { grid-template-columns: 1fr;}
}
@media (max-width:431px) {
	.ind01 p { font-size: 1em;}
}

/* index */
/* footer */
footer { width: 100%; background-color: #555; z-index: 0; }
.foo { width: 90%; margin: auto; padding: 20px 0; box-sizing: border-box; display: grid; grid-template-columns: 1fr 3fr; gap: 20px;}

.foo01 figure { width: 100%; text-align: center; padding: 20px 0; box-sizing: border-box;}
.foo01 img { width: 80%;}
.foo01 figcaption { text-align: center; color: white; padding: 0 20px; box-sizing: border-box;}
.foo01 p { width: 60%; height: 40px; margin: 15px auto; border: 1px solid white; position: relative;}
.foo01 p a { width: 100%; height: 100%; position: absolute; color: white; text-decoration: none;  display: flex; align-items: center; justify-content: center;} 
.foo01 p a:hover { color: yellow;}

.foo02 { width: 65%; margin: 15px auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; place-items: center;}
.foo02  figure { width: 100%;}
.foo02 img { width: 50px; transition: 0.3s;}
.foo02 img:hover {transform: scale(1.2);}
.foo02 a { position: relative; }

.foo03 { margin: 20px 0 100px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.foo03 h2 { padding: 15px; box-sizing: border-box; font-weight: 100; color: white; border-bottom: 1px solid yellow;}
.foo03 ul { padding: 15px 15px 0 25px; list-style: none;}
.foo03 a { color: white; text-decoration: none;}
.foo03 a:hover { color: yellow; }

@media (max-width:1180px) {
	.foo01 figcaption { width: 100%; padding: 0 10px; }
	.foo01 p { width: 80%;}
	.foo02 { width: 80%;}
}
@media (max-width:860px) {
	.foo01 img { width: 100%;}
	.foo01 p { width: 100%;}
	.foo02 { width: 100%;}
}
@media (max-width:431px) {
	.foo { grid-template-columns: 1fr;}
	.foo img { width: 80%;}
	.foo01 figcaption { padding: 20px 0;}
	.foo01 p { width: 80%;}
	.foo02 { width: 80%;}
	.foo02 img { width: 80%;}
	.foo03 { grid-template-columns: 1fr;}
}
/* footer */




/*--contacto--*/
.wt {
	position: fixed;
	bottom: 20px;
	right: 50px;
	width: 222px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	place-content: center;
	gap: 10px;
	z-index: 999;
}
.wt div {
	width: 74px;
	height: 74px;
	padding: 12px 12px;
	box-sizing: border-box;
	border-radius: 50%;
	box-shadow: 0 0 5px 3px rgba(0,0,0,0.15);
}
.wt_telefono { background: #bf360c;  background: linear-gradient(20deg, #bf360c  45%, #ff6f00 100%); }
.wt_mail { background: rgb(255,165,0); background: linear-gradient(45deg, rgba(158,112,64) 45%, rgba(255,165,0) 100%); }
.wt_whatsapp { background: rgb(9,121,44); background: linear-gradient(340deg, rgba(9,121,44) 45%, rgba(0,182,54,1) 100%); }

@media (max-width:431px) { 
	.wt {right: 25px;}
}

.form { margin: 50px 0;}
.form section:nth-child(1) { width: 100%; height: 600px; overflow: hidden; position: relative;}
.form section:nth-child(1) figure { width: 100%; height: 100%;}
.form section:nth-child(1) img { width: 100%; height: 100%; object-fit: fill; }
.form section:nth-child(1) figcaption { position: absolute; bottom: 10px; left: 10px; color: white;}

.formulario { width: 100%; padding: 1px; box-sizing: border-box; border-left: 1px solid gray; }
.formulario h2 { margin: 20px 0 0 0; text-align: center; font-size: 2.5em; font-weight: 100; padding: 0 0 30px 0; box-sizing: border-box;}
.formulario p { width: 70%; margin: auto; text-align: center;}
.formulario form { width: 70%; margin: 50px auto 0 auto;}
.formulario input { width: 100%; padding: 10px; box-sizing: border-box; margin-bottom: 10px;}
.formulario textarea { width: 100%; padding: 10px; box-sizing: border-box; height: 150px; margin-bottom: 10px;}
.formulario button { width: 50%; padding: 10px; box-sizing: border-box; } 

@media (max-width:431px) {
	.form { margin: 90px 0 50px 0;}
	.form section:nth-child(1) { height: 300px;}
}
/*--contacto--*/

/* bajar-subir */
.bajar {
	margin: auto 3% auto auto;
	width: 180px;
	height: 30px;
	background-color: #704E2C;
	color: white;
	text-align: center;
	padding: 6px;
	box-sizing: border-box;
	cursor: pointer;
	border-radius:  10px 10px 0 0;
}
.bajar:hover {
	background-color: rgba(0,0,0,0.5);
}
.subir {
	position: fixed;
	right: 0px;
	bottom: 400px;
	width: 80px;
	height: 40px;
	background-color: #704E2C;
	color: white;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	cursor: pointer;	
	border-radius:  10px 0 0 10px;	
	z-index: 999999;
}

@media (max-width:1180px) {
	.bajar { margin: 90px 3% auto auto;}
}
/* bajar-subir */



/*---- contenido ----*/

.img00 { width: 100%; position: relative; display: grid; place-items: center;}
.img00 figure { width: 100%; height: 450px; overflow: hidden; display: flex; justify-content: center; align-items: center ;}
.img00 img {width: 100%; height: 100%;}
.img00 figcaption { 
	width: 50%;
	position: absolute;
	border-radius: 15px;
	font-size: 2.5em;
	font-weight: 100;
	text-align: center;
	color: white;
	padding: 20px 30px;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.4);
	border: 1px solid white;
}
.tit_sec { width: 100%;}
.tit_sec h1 {
	width: 100%;
    margin: auto;
    text-align: center;
    font-size: 2.2em;
    font-weight: normal;
    padding: 25px;
    box-sizing: border-box;
    color: white;
}
.tit_sec h2 {
	width: 90%;
	margin: auto;
	padding: 10px 0;
	box-sizing: border-box;
	font-weight: 100;
	text-align: center;
	border-radius: 10px;
}
.tit_sec h3 {
	width: 90%;
	margin: auto;
	font-size: 2em;
	padding: 10px 0;
	box-sizing: border-box;
	font-weight: 100;
	border-bottom: 1px solid gray;
	margin-bottom: -40px;
}

.tit_sec_pietra { width: 100%; margin: 30px auto -40px auto;}
.tit_sec_pietra h3 { 
	width: 90%; 
	margin: auto; 
	padding: 20px 0 5px 0; 
	box-sizing: border-box; 
	border-bottom: 1px solid gray;
	font-size: 2em;
	text-align: center;
}

.int_con { 
	width: 70%; 
	height: 300px;
	margin: 50px auto; 
	display: grid; 
	grid-template-columns: 2fr 1fr; 
	gap: 20px; 
	place-items: center; 
	text-align: right;
	overflow: hidden;
}

.int_con figure { height: 100%; height: 300px; border-radius: 15px; overflow: hidden; border: 1px solid lightgray;}
.int_con img { width: auto; height: 100%; object-fit: cover; }
.int_con h1 { font-size: 2.5em; font-weight: 100; color: gray;}
.int_con p { font-size: 1.2em; padding: 30px 0; box-sizing: border-box; }
.int_con div { width: 100%; padding: 15px 0; box-sizing: border-box; }
.int_con a { 
	padding: 15px 25px;
	box-sizing: border-box;	
	text-decoration: none; 
	color: white;
	background-color: #8a0e09;
	border-radius: 10px;
	transition: 0.5s;
}
.int_con a:hover { background-color: #c84411;}


@media (max-width:1919px) {
	.int_con { width: 85%;}
	.int_con h1 { font-size: 2em;}
}
@media (max-width:1368px) {
	.int_con h1 { font-weight: bold;}
}
@media (max-width:1180px) {
	.img00 figcaption { width: 70%;}
	.tit_sec h2 { font-size: 1.3em; padding: 20px; box-sizing: border-box;}
	.int_con { height: 250px; width: 90%;}
	.int_con figure { height: 250px;}
	.int_con img { width: 100%;}
	.int_con p { padding: 15px 0; font-size: 1em;}
	.int_con h1 { font-size: 1.8em;}
}
@media (max-width:860px) {
	.img00 figcaption { width: 80%;}
	.int_con { grid-template-columns: 1fr; height: auto; width: 90%;}
	.int_con figure { height: 300px; display: grid; place-items: stretch;}
	.int_con img { display: grid; place-items: stretch;}
	.int_con h1 { font-size: 1.5em;}
}
@media (max-width:431px) {
	.img00 figure { height: 300px;}
	.img00 figcaption { font-size: 1.5em;}
	.tit_sec h1 { font-size: 1.9em;}
	.tit_sec h2 { font-size: 1em; padding: 20px; box-sizing: border-box;}
}




/* productos */
.pro_fach article { 
	border: 1px solid lightgray; 
	padding: 15px; 
	box-sizing: border-box; 
	border-radius: 10px; 
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2); 
	position: relative;
}
.pro_fach .span { 
	border: 1px solid lightgray; 
	padding: 15px; 
	box-sizing: border-box; 
	border-radius: 10px; 
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2); 
	position: relative;
}
.pro_fach span h2 { font-size: 2em !important;}
.pro_fach span a { font-size: 1.5em !important;}

.pro_fach figure { border-radius: 10px 10px 0px 0px; overflow: hidden;}
.pro_fach figure img { width: 100%; height: 100%; }
.pro_fach h2 { font-weight: 100; margin-top: 10px; padding: 10px 0; line-height: 20px; border-top: 1px solid lightgray;} 
.pro_fach span { font-size: 0.7em;}
.pro_fach i { font-size: 0.7em; color: red;}
.pro_fach p { height: 150px; padding: 10px 0; box-sizing: border-box; border-top: 3px solid #133E5B; text-align: justify;}
.pro_fach a { 
	width: 100%; 
	border-radius: 10px; 
	display: grid; 
	transition: 0.5s; 
	padding: 10px; 
	box-sizing: border-box;
	text-decoration: none;
	text-align: left;
}
.pro_fach a:hover { background-color: #c84411;}
.pro_fach div { 
	width: 100px; 
	height: 100px; 
	overflow: hidden; 
	border-radius: 50%; 
	background-color: white; 
	position: absolute; 
	bottom: -20px; 
	right: 10px;
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);
}
.pro_fach__hover:has( :hover ){ --scala: scale(1.3); }
.pro_fach__img { width: 100%; height: 100%; object-fit: contain; transition: 0.5s; transform: var(--scala, 1.0);}


.line { width: 90%; margin: auto; background-color: lightgray; height: 1px;}
.ladrillos__colum01 div div {  border: 1px solid lightgray; border-radius: 10px;}
.ladrillos__colum01 p { 
	height: 50px; 
	margin-bottom: 15px; 
	display: flex; 
	align-items: center; 
	padding: 0 15px; 
	box-sizing: border-box; 
	font-size: 1.2em; 
	border-radius: 10px;
}
.ladrillos__colum01 figure { display: grid; place-items: center;}
.ladrillos__colum01 img { width: 70%; padding: 10px 0; border-bottom: 1px solid lightgray;}
.ladrillos__colum01 figcaption { text-align: center; padding: 17px 0; box-sizing: border-box;}
.ladrillos__colum01 .ladrillos__grid01 { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}

.ladrillos__colum02 p { 
	height: 50px; 
	margin-bottom: 15px; 
	display: flex; 
	align-items: center; 
	padding: 0 15px; 
	box-sizing: border-box; 
	font-size: 1.2em; 
	border-radius: 10px;
}
.ladrillos__colum02 .ladrillos__grid02 { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;  }

.ladrillos { width: 90%; margin: 80px auto;}
.ladrillos .ladrillos__grid03 { display: grid; grid-template-columns: 1fr 2fr; gap: 20px;}
.ladrillos p { 
	height: 50px; 
	margin-bottom: 15px; 
	display: flex; 
	align-items: center; 
	padding: 0 15px; 
	box-sizing: border-box; 
	font-size: 1.2em; 
	border-radius: 10px;
}
.ladrillos figure { overflow: hidden; border-radius: 10px;}
.ladrillos img { height: 100% !important; object-fit: cover;}

.ladrillos .teja_03 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.pisos { width: 90%; margin: 80px auto;}
.ladrillos .pisos_grid03 { margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 20px;}

.ladrillos section { 
	width: 100%;
	height: 50px;
	margin-top: 15px;
	border-radius: 10px;
	overflow: hidden;
}
.ladrillos .pisos_fich_tec a {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	color: white;
	text-decoration: none;
	background-color: #b6622d;
}
.ladrillos .pisos_fich_tec a:hover { background-color: #c84411;}

@media (max-width:431px) {
	.ladrillos__colum02 .ladrillos__grid02 { grid-template-columns: 1fr; }
	.ladrillos .ladrillos__grid03 { grid-template-columns: 1fr; }
	.ladrillos .ladrillos__grid03 .figure__ladrillos { height: 300px;}
	.ladrillos .ladrillos__grid03 .figure__ladrillos img { height: 300px; }
	.ladrillos .pisos_grid03 { grid-template-columns: 1fr;}
	.pro_fach h2 {font-size: 18px;}
	.pro_fach div {width: 60px; height: 60px; bottom: 1px;}
	.pro_fach .ph { height: 100px;}

	.pro_fach span h2 { font-size: 18px;}
}
/* galeria */

.ajuste_img { width: 100%; height: 100%; object-fit: cover !important; object-position: center;}
.ajuste_h300g figure {height: 300px !important; overflow: hidden;}
.ajuste_h300g figure img { border-radius: 0px !important;}

.msec { width: 100%; margin-top: 30px;}
.msec ul {
	width: 90%;
	margin: auto;
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
	list-style: none;
}
.msec li {
	width: 30%;
	margin: auto;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
}
.msec .secc a {
	display: grid;
	width: 100%;
	height: 100%;
	text-decoration: none;
	padding: 5px 50px;
	box-sizing: border-box;
	color: white;
	border-radius: 10px;
	transition: 0.5s;
}
.msec .secc a:hover {
	background-color: #c84411;
	cursor: pointer;
}
 .green__msec {background-color: #5C6A47;}
 .red__msec {background-color: #8a0e09;}

.galeria_contenedor {
	width: 90%;
	margin: 30px auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
}
.galeria_contenedor div {
	padding: 10px;
	box-sizing: border-box;
	border:  1px solid gray;
	border-radius: 10px;
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);
}
.galeria_contenedor h2 {margin-top: 15px;}
.galeria_contenedor span { color: gray; font-size: 0.8em; font-weight: normal;}
.galeria_contenedor figure { border-radius: 10px 10px 0 0; overflow: hidden;}
.galeria_contenedor a {color: deepskyblue; text-decoration: none;}
.galeria_contenedor a:hover {color: red;}



/*modal*/

.modalDialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
	border: 0px !important;
}
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}
.modalDialog > div {
	position: relative;
	width: auto;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	border-radius: 5px;
	background: rgba(0,0,0,0.7);
  -webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
	border: 0px !important;
}
.modalDialog div figcaption {
	position: absolute;
	width: auto;
	margin: auto;
	bottom: 10px;
	text-align: center;
	color: white;
	padding: 10px;
	box-sizing: border-box;
	border-bottom: 1px solid white;
}
.modalDialog-img {
	width: auto;
	height: 92%;
}
.close {
	background-color: rgba(0,0,0,0.5);
	color: #FFFFFF !important;
	width: 80px;
	height: 30px;
	text-align: center;
	padding-top: 3px;
	box-sizing: border-box;
	position: absolute;
	right: 30px;
	top: 30px;
	text-decoration: none;
	border-radius: 5px;
	border: 1px solid white;
}
.close:hover { background: red;}
/*modal*/

@media (max-width:431px){
	.msec ul { flex-direction: column; }
	.msec li { width: 90%;}
	.galeria_contenedor { grid-template-columns: repeat(1, 1fr);}
	
	.modalDialog > div { width: 96%; height: 100%; margin: auto !important;}
	.modalDialog div figcaption {bottom: 50px;}
	.modalDialog-img { width: 100%; height: auto;}
	.close {top: 25px;}
}

/* secciones cc */
.moderna { background-color: #7499aa; color: white; }
.premium { background: linear-gradient(90deg, #CC9900 1%, #996633 30%, #CC9900 50%, #996633 70%, #CC9900 99%); color: white; }
.rustica { background-color: #9e7344; color: white; }
.stone { background-color: #000; color: white;}
.pietra { background: linear-gradient(360deg, #450410 40%, #BF0811 100%); color: white;}
.ladrillo01 { background-color: #9e7344; color: white;}
.ladrillo02 { background-color: #5B400C; color: white;}
.ladrillo03 { background-color: #3C2C17; color: white;}
.terracotta { background-color: #b6622d; color: white;}
.hidro { background-color: #133E5B; color: white;}
.adhesivos { background-color: #5B5A5E; color: white;}
.gale { background-color: #5c6a47; color: white;}
.it { background-color: #880505; color: white;}

.moderna__bor { border: 5px solid #7499aa;}
.premium__bor { border: 5px solid #ca9703;}

.moderna__a { background-color: #7499aa; color: white; }
.premium__a { background-color: #ca9703; color: white; }
.rustica__a { background-color: #9e7344; color: white; }
.stone__a { background-color: #000; color: white; }
.pietra__a { background-color: #8a0e09; color: white; }
.ladrillos01__a { background-color: #9e7344; color: white; }
.ladrillos02__a { background-color: #5B400C; color: white; }
.ladrillos03__a { background-color: #3C2C17; color: white; }
.terracotta__a { background-color: #b6622d; color: white;}
.hidro__a { background-color: #133E5B; color: white; }
.adhesivos__a { background-color: #5B5A5E; color: white; }
.it__a { background-color: #880505; color: white; }

/* productos */