@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('img/icones_fa/fontawesome.css');

/* reset */
* { margin:0; padding:0; border:0 none; outline:0; vertical-align:baseline; background:transparent; text-decoration:none; font:inherit; list-style:none; quotes:none; border-collapse:collapse; border-spacing:0; resize:none; box-sizing:border-box; letter-spacing:inherit; color:inherit; text-align:inherit; left:auto; top:auto; }
@-ms-viewport { width:extend-to-zoom; zoom:1.0; }
a { cursor:pointer; }
:focus { outline:0; }
::-ms-clear { display: none;}

/* geral */
html { height:100%; --destaque:#044687; --brilho:#0dd; --toph:105px; --sombra:-2px 2px 10px rgba(0,0,0,0.1); scroll-behavior:smooth; }
body { color:#606060; background:#f0f2f6; min-height:100%; height:100px; width:100%; position:absolute; font:16px/1.3 'Roboto', Arial, Helvetica, sans-serif; }
.menuTop { position:fixed; top:0; background:#fff; box-shadow:var(--sombra); width:100%; height:var(--toph); padding:30px; z-index:10; }
	.menuTop img { height:calc(100% + 2em); margin:-1em 0; float:left; }
		.menuTop form { padding:0; width:calc(50% + 30px); margin:auto; }
			.menuTop input { background:#f0efef; outline:none !important; }
			.menuTop nav { float:right; }
				.menuTop nav a { float:right; width:2em; height:2em; line-height:2em; font-size:1.5em; border-radius:50%; background:#f0f2f6; color:#044687; margin-left:1em; text-align:center; }
	.perfil {}
		.perfil img { width:4em; height:4em; object-fit:cover; border-radius:50%; float:left; margin:0 1em 1em 0; }
		.perfil img+p { display:table-cell; vertical-align:middle; height:5em; padding-bottom:1em; }
.menuEsq { position:fixed; top:var(--toph); left:0; width:25%; max-width:320px; padding:30px; }
	.menuEsq a { display:block; margin-bottom:0.5em; border-radius:6px; padding:10px; }
	.menuEsq a.ativo, .menuEsq a:hover { background:var(--destaque); color:#fff; }
	.menuEsq a.ativo { pointer-events:none; }
		.menuEsq a i { width:1.25em; margin-right:0.25em; text-align:center; }
		.menuEsq a em { display:none; float:right; font-size:0.9em; width:2em; margin:-0.25em 0 0; line-height:2em; height:2em; text-align:center; border-radius:50%; background:rgba(0,0,0,0.1); }
		.menuEsq a.ativo em, .menuEsq a:hover em { background:rgba(255,255,255,0.2); }
.menuDir { position:fixed; top:var(--toph); right:0; width:25%; max-width:320px; padding:30px; }
	.menuDir div { background:#fff; box-shadow:var(--sombra); padding:1em; border-radius:6px; }
		.menuDir div a.bt { background:#f0f2f6; color:#044687; margin-top:1em; }
		.menuDir div p { padding-bottom:0.25em; }
			.menuDir p strong { padding:0 0.3em 0.3em 0; float:left; clear:left; }
		.menuDir div xp:last-of-type { border-bottom:1px solid #cecfd1; padding-bottom:0.75em; }
	.menuDir a.bt { display:block; }
.meio { padding:var(--toph) 0 30px; width:50%; max-width:756px; margin:auto; }
	article { background:#fff; margin-top:30px; width:100%; overflow:hidden; padding:1em 30px; min-height:5em; box-shadow:var(--sombra); border-radius:12px; }	
		article header { color:#999; margin-bottom:1em; }
		article>img:first-child { width:calc(100% + 60px); max-height:300px; height:auto; object-fit:cover; margin:-1em -30px 1em; }
		article>img { width:25%; height:100px; margin:0; }
		article p { text-align:justify; }
		article footer { border-top:1px solid #ccc; color:#aaa; padding:1em 0 0; margin:1em 0 0;}
			article footer a { margin:0 1em 0 0;}
			article footer a:not(.bt).ativo, article footer a:not(.bt):hover { color:var(--brilho); }
			article footer select { float:right; width:auto; padding: }
h1 { font-size:2em; margin:0 0 0.5em; }
h1.destaque { background:var(--destaque); color:#fff; padding:1em 1em 0.5em; margin:-1em -1em 0.5em; }
h1 a.bt { float:right; width:1em; height:1em; text-align:center; line-height:1; padding:0; margin-right:-0.5em; }
.padrao p { margin-bottom:1em; text-align:justify; }
.padrao a { color:var(--destaque); text-decoration:underline; }
.padrao a:hover { filter:saturate(3); }
 .padrao a i { text-decoration:inherit; }
.padrao strong { font-weight:bold; }
.padrao em { font-style:italic; }
.padrao s { text-decoration:line-through; }
.padrao mark { background:var(--medio); color:#fff; padding:0 0.25em; }
.padrao blockquote { font-style:italic; color:var(--medio); padding-left:1em; border-left:0.2em solid var(--claro); }
.padrao ul, .padrao ol { padding-bottom:1em; counter-reset:li; }
	.padrao li { padding:0 0 0.5em 1em; position:relative; overflow:hidden; text-align:justify; }
	.padrao ul>li:before { content:''; width:0.25em; height:0.25em; display:inline-block; margin:0 0.5em 0 -1em; border:0.2em solid var(--claro); }
	.padrao ol>li:before { content:counters(li,'.')' '; counter-increment:li;font-weight:bold; color:var(--claro); text-align:right; position:absolute; right:calc(100% - 0.75em); }
	.cor ul li:before, .cor ol li:before { border-color:#fff; }
		.padrao li>ol, .padrao li>ul { margin:0.5em 0 0; padding-left:1em; border-left:2px solid var(--claro); }
			.padrao li>ol>li:before, .padrao li>ul>li:before { position:static; margin-left:-1em; }
form {}
	input, select, textarea, form .tox-tinymce { outline:1px solid #ccc; border:none; border-radius:6px; padding:10px; width:100%; margin-bottom:10px; }
	input:focus, select:focus, textarea:focus { outline:1px solid #666; }
	i+input { padding-left:2.25em; margin-left:-2.25em; }
	form i { width:2.25em; text-align:center; position:relative; }
	select { padding-left:0.3em; border-right:0.5em solid transparent; }
	::placeholder, select:invalid, select option[value=""], .placeholder { color:#999; font-style:italic;}
	textarea { height:10em; overflow:auto; }
	input[type=checkbox], input[type=radio] { width:0.75em; height:0.75em; }
	input[disabled],input[readonly] { opacity:0.5; font-style:italic; }
	input.col2, select.col2, .col2+input, .col2+select { width:calc(50% - 5px); }
	input.col2, select.col2 { margin-right:6px; }
	input[type=file] { position:absolute; opacity:0; width:1px; height:1px; }
	.novousuario i.fa-images { background:#ccc; cursor:pointer; color:#fff; padding:2em; width:6em; line-height:2em; margin-right:10px; float:left; border-radius:50%; }
	.novapostagem a.btImagens { float:left; margin-right:10px; }
a.bt { background:var(--destaque); color:#fff; border-radius:6px; padding:10px; padding-right:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
a.btI { padding-right:10px; }
a.bt:first-letter { text-indent:9px; }
a.bt:hover { filter:saturate(3); }
footer a.bt { float:right; margin:0 0 0 10px; }
	a.bt i { margin:0 0.25em 0 0; width:1.25em; text-align:center; }
	a.btI i { margin:0; }
	
/* popup */
	.modalMascara { background:rgba(0,0,0,0.5); position:fixed; z-index:100; left:0; top:0; width:100%; height:100%; overflow-y:auto; overflow-x:hidden; display:none; }
		.modal { margin:0 auto; top:50%; width:60%; position:relative; transform: translateY(-50%); overflow:hidden; padding:30px; background:#fff; box-shadow:5px 5px 10px 0 rgba(0,0,0,0.25); border-radius:10px; }
		.modal h1 a { float:right; width:1em; height:1em; text-align:center; line-height:1; padding:0; }
			
/* responsivo */
@media (max-width:1200px)  { 
	.menuDir, .menuEsq { display:none; }
	.meio { width:calc(100% - 60px); }
	form.meio { display:none; }
}