/*FOTOS*/
.albuns { width: 100%; height: auto; position: relative; clear: both; padding: 0px 0px 50px 0px; }
.albuns ul { width: 100%; height: auto; position: relative; list-style-type: none; padding: 10px 0px 0px 0px; text-align: left; }
.albuns ul li { overflow: hidden; width: 345px; max-width: 100%; height: auto; position: relative; display: inline-block; vertical-align: top; margin: 0px 15px 40px 15px; }
.albuns ul li img { width: 100%; text-align: center; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; position: relative; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; overflow: hidden ;}
.albuns ul li .qual { width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -o-calc(100% - 20px); width: calc(100% - 20px); height: auto; position: relative; color: var(--cor-primaria); font-size: 16px; line-height: 20px; font-family: var(--fonte-padrao); font-weight: 800; letter-spacing: -0.5px; text-align: center; padding: 10px; min-height: 40px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.albuns ul li .qual span { font-size: 12px; font-weight: 500; color: var(--cor-texto); padding: 0px 0px 0px 10px; line-height: 22px;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; letter-spacing:0px; }
.albuns ul li:hover img { opacity: 0.7 }
.albuns ul li:hover .qual { color: var(--cor-primaria); }

/*GALERIA*/
.galeria { width: 100%; height: auto; position: relative; padding: 10px 0px 35px 0px; }
.galeria .dataevento { width: 100%; height:auto; text-align:left; }
.galeria .dataevento span { width: auto; cursor: pointer; height: 30px; line-height: 30px; margin: 5px 0px; color: #394045; font-size: 14px; font-family: var(--fonte-padrao); font-weight: 600; vertical-align: top; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position:relative; display: inline-block; padding: 5px 15px; letter-spacing:0px; line-height: 30px; color: #394045; border: 2px solid var(--cor-primaria); padding: 7px 15px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;  }
.galeria .descricaoevento { width: 100%; height: auto; position: relative; padding: 20px 0px 50px 0px; border-bottom: #f4f6f8 1px solid; font-size: 16px; font-family: var(--fonte-padrao); color: var(--cor-texto); text-align: left; line-height: 24px; font-weight: 400; }
.galeria ul { width: 100%; height: auto; position: relative; list-style-type: none; text-align: left; }
.galeria ul li { overflow: hidden; width: 210px; height: auto; position: relative; display: inline-block; vertical-align: top; margin: 0px 10px 20px 10px; }
.galeria ul li img { width: 100%; text-align: center; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; position: relative; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; overflow: hidden ;}
.galeria ul li:hover img { opacity: 0.7 }
.galeria ul li.vazio { width: 100%; color: #000000; font-size: 12px; background-color: transparent !important; font-weight: 400; border: none; text-align: center; padding: 100px 0px;margin:0px; }
.galeria ul li.vazio:hover { margin:0px; }
.galeria ul li.vazio p { width: 100%; height: auto; text-align: center; color: #000000; text-transform: none; padding-bottom: 10px; line-height: 30px; font-weight: 500; font-size: 32px; font-family: var(--fonte-padrao); }
.galeria ul li.vazio p i { display: inline; float: none; text-align: left; color: var(--cor-primaria); font-size: 32px; text-align: center; width: 30px; line-height: 30px; padding: 0px 10px 0px 0px; }

.chama_materiais { width: 100%; height: auto; position: relative; clear: both; text-align: right; }
.categorias_filtros { width: 100%; height:auto; position: relative; margin: 15px 0px 40px 0px; }
.categorias_filtros ul { width: 100%; height: auto; position: relative; list-style-type: none; text-align: left; }
.categorias_filtros ul li { position: relative; display: inline-block; vertical-align: top; font-weight: 500; width: auto; margin: 0px 0px 0px 10px; color: var(--cor-primaria); font-size: 15px; font-family: var(--fonte-padrao); text-align: center; height: auto; padding: 10px 25px; line-height: 25px; background-color: #eaeaea; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; overflow: hidden; }
.categorias_filtros ul li.ativo,.categorias_filtros ul li:hover { background: var(--cor-secundaria); color: #ffffff; font-weight: 700; }

@media screen and (max-width: 1100px) {
	section { padding-top: 80px; }

	.categorias_filtros { width: 100%; height:auto; position: relative; margin: 20px 0px 10px 0px; }
	.categorias_filtros ul { text-align: center; }
	.categorias_filtros ul li { margin: 3px; }

	.galeria, .galeria ul, .albuns { text-align: center; }

	/* gutter lateral para os itens nao colarem nas bordas da tela */
	.albuns ul, .galeria ul { box-sizing: border-box; padding-left: 12px; padding-right: 12px; }

	/* ALBUNS: cards fluidos (a largura fixa de 345px + margens estourava telas estreitas) */
	.albuns ul li { width: 300px; max-width: 100%; box-sizing: border-box; margin: 0px 10px 32px 10px; }

	/* GALERIA: miniaturas em grade fluida */
	.galeria ul li { width: 160px; box-sizing: border-box; margin: 0px 6px 12px 6px; }
}

@media screen and (max-width: 600px) {
	/* ALBUNS: 1 coluna ocupando a largura util (sem estourar) */
	.albuns ul li { width: 100%; max-width: 100%; margin: 0px 0px 26px 0px; }

	/* GALERIA: 2 colunas fluidas */
	.galeria ul li { width: 46%; max-width: 46%; margin: 0px 2% 10px 2%; }
}