/* MATERIA */
.materiais { width: 100%; height: auto; position: relative; clear: both; overflow: hidden; }
.materiais ul { width: 100%; height: auto; padding: 20px 0px 30px 0px; position: relative; clear: both; overflow: hidden; text-align: left; display: flex; justify-content: flex-start; flex-wrap: wrap; gap:20px; }
.materiais ul li { width:23%; box-sizing: border-box; height: auto; margin: 10px 0px 12px 0px; display: inline-block; vertical-align: top; overflow: hidden; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; overflow: hidden;  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: center; }
.materiais ul li:hover { background-color: #f4f6f8; text-decoration: none; }
.materiais ul li:hover .avatar img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
.materiais ul li .avatar .categoria { width: auto; margin: 5px; color: #ffffff; font-size: 10px; font-family: var(--fonte-padrao); text-align: center; height: auto; padding: 8px 15px; line-height: 10px; background-color: var(--cor-destaque); position: absolute; z-index: 10; letter-spacing: 0px; font-weight: 600; right: 0px;  -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.materiais ul li .avatar { width: 100%; height: auto; position: relative; overflow: hidden; vertical-align: top; display: inline-block; -moz-transition: all .5s ease; -o-transition: all .5s ease; -webkit-transition: all .5s ease; transition: all .5s ease; overflow: hidden; background-color: #f4f6f8;  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow: hidden; }
.materiais ul li .avatar img { width: 100%; height: auto; display: block; -moz-transition: all .5s ease; -o-transition: all .5s ease; -webkit-transition: all .5s ease; transition: all .5s ease; overflow: hidden; -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); transform: scale(1.0); }
.materiais ul li .infos { width: 100%; height: auto; margin: 0px; padding: 0px 0px 20px 0px; }
.materiais ul li .infos .tituloo { width: 240px; padding: 15px 10px 15px 10px; height: auto; line-height: 22px; color: var(--cor-primaria); font-size: 15px; min-height: 44px; font-family: var(--fonte-destaque); text-align: center; font-weight: 600; }
.materiais ul li .infos .introducao { width: 240px; padding: 15px 10px 10px 10px; height: auto; font-weight: 400; color: var(--cor-texto-default); font-size: 13px; line-height: 20px; font-family: var(--fonte-padrao); text-align: center; border-top: #eaeaea 1px solid; }
.materiais ul li .infos .cta { cursor: pointer; width: auto; display: inline-block; vertical-align: top; margin-top: 10px; padding: 10px 20px; height: auto; font-family: var(--fonte-destaque); color: #ffffff; font-size: 12px; font-weight: 600; text-align: center; background: var(--cor-secundaria); -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; overflow: hidden; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.materiais ul li:hover .cta { padding: 10px 25px; }

.chama_materiais { width: 100%; height: auto; position: relative; clear: both; text-align: right; }
.categorias_filtros { width: 100%; height:auto; position: relative; margin: 20px 0px 10px 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: 600; width: auto; margin: 0px 0px 0px 5px; color: var(--cor-primaria); font-size: 13px; font-family: var(--fonte-destaque); text-align: center; height: auto; padding: 7px 20px; line-height: 15px; 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: 15px; -moz-border-radius: 15px; border-radius: 15px; overflow: hidden; }
.categorias_filtros ul li.ativo,.categorias_filtros ul li:hover { color: #ffffff; background: var(--cor-destaque); }

.cadastre_se { display: none; width: 350px; height: auto; position: fixed; text-align: left; padding: 30px 50px; background-color: #ffffff; left: 50%; top: 50%; z-index: 90000; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; transform: translate(-50%, -50%); -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }
.cadastre_se .fechar_cadastro { position: absolute; cursor: pointer; z-index:100002; left: 50%; margin-left: -45px; top: -10px; background-color: var(--cor-primaria); color: #ffffff; font-size: 13px; font-family: var(--fonte-padrao); padding: 2px 10px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; font-weight: 600; }
.cadastre_se .form { width: 320px; height: auto; display: inline-block; position: relative; text-align: center; vertical-align: top; margin: 0 15px; }
.cadastre_se .form .intro { width: 100%; height: auto;font-family: var(--fonte-padrao), sans-serif; font-size: 24px; line-height: 26px; font-weight: 700; color: var(--cor-texto-default); text-align: center; margin-bottom: 10px; padding: 0px 0px 10px 0px; }
.cadastre_se .form input[type="text"] { -webkit-appearance: none; -moz-appearance: none; letter-spacing: 0px; padding: 10px; font-size: 14px; line-height: 20px; font-weight: 300; background-color: #ffffff; color: #545454; font-family: var(--fonte-padrao); height: auto; width: 300px; margin-bottom: 6px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 2px solid var(--cor-primaria); }
.cadastre_se .form input[type="submit"] { cursor: pointer; width: auto; display: inline-block; vertical-align: top; margin-top: 10px; padding: 10px 20px; height: auto; font-family: var(--fonte-padrao); color: #ffffff; font-size: 14px; font-weight: 600; text-align: center; background: var(--cor-primaria); -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; overflow: hidden; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.cadastre_se .form input[type="submit"] { padding: 10px 25px; }

@media screen and (max-width: 1100px) {
	.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; }

	.materiais { width: 96%; padding: 0px 2%; }
	.materiais ul { text-align: center; }
	.materiais ul li { width: 600px; height: auto; display: inline-block; float: none; padding-bottom: 30px; margin: 5px 5px 35px 5px; position: relative; }
	.materiais ul li .avatar,
	.materiais ul li .avatar img { width: 100%; height: auto; }

	.materiais ul li .infos .tituloo,
	.materiais ul li .infos .introducao { width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -o-calc(100% - 20px); width: calc(100% - 20px); }
}
@media screen and (max-width: 600px) {
	.materiais ul li { width: -moz-calc(100% - 10px); width: -webkit-calc(100% - 10px); width: -o-calc(100% - 10px); width: calc(100% - 10px); height: auto; display: inline-block; float: none; padding-bottom: 30px; margin: 5px 5px 35px 5px; position: relative; }
	.materiais ul li .avatar,
	.materiais ul li .avatar img { width: 100%; height: auto; }
}