/*TÓPICOS*/
.topicos { width: 100%; height: auto; position: relative; margin: 0px 0px 40px 0px; text-align: center; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.topicos .nome_padre { width: 100%; height: auto; position: relative; color: var(--cor-destaque); font-size: 24px; line-height: 28px; letter-spacing: -1px; font-family: var(--fonte-padrao); font-weight: 700; text-align: left; padding: 0px 0px 15px 0px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display:block; }
.topicos .nome_padre p { width: 100%; position: relative; height: auto; font-size: 14px; font-weight: 700; text-align: left; color: var(--cor-primaria); line-height: 20px; letter-spacing: 0px; }
.topicos .conteudo { width: 100%; display: inline-block; vertical-align: top; position: relative; height: auto; font-size: 14.5px; font-weight: 400; text-align: left; color: var(--sj-texto); line-height: 1.7; }
.topicos .conteudo .avatar { width: 175px; aspect-ratio: 1/1; float: left; position: relative; opacity: 1; background-color: #f4f6f8; margin: 0px 30px 20px 0px; overflow: hidden; border-radius: 15px; }
.topicos .conteudo .avatar:before { content:''; position:absolute; width:100%; height:100%; left:0px; top:0px; background: linear-gradient(130deg, rgba(255,255,255,0) 0%, rgba(15,42,95,.55) 100%); z-index:9; pointer-events:none; }
.topicos .conteudo .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: relative; transition: all .3s ease; }
.topicos .conteudo .avatar:hover img { transform: scale(1.04); }
.topicos .conteudo p { width: 100%; position: relative; height: auto; padding-bottom: 18px; font-size: 14.5px; font-weight: 400; text-align: left; color: var(--sj-texto); line-height: 1.7; }
.topicos .conteudo p a, .topicos .conteudo a { text-decoration: underline; text-underline-offset: 3px; color: var(--sj-azul); }
.topicos .conteudo p a:hover, .topicos .conteudo a:hover { color: var(--sj-azul-escuro); }
.topicos .conteudo .frase { width: 100%; height: auto; position: relative; color: var(--cor-destaque); font-size: 18px; line-height: 24px; font-family: var(--fonte-padrao); font-weight: 700; text-align: left; padding: 0px 0px 10px 0px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display:block; }

@media screen and (max-width: 1024px) {
	.topicos .conteudo .avatar { margin: 15px 0px 20px 0px; float: none; width:100%; aspect-ratio: 16/10; }
}