@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

/* RESET
------------------------------------------------------------*/

html, body, div, span, iframe, h1, h2, p, a, img, ul, li, form, label, article, header, nav, section, footer {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

*, *::before, *::after {
  box-sizing: border-box;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
}

* {
	font-family: 'Open Sans', Arial, sans-serif;
}

h1, h2, span {
	font-family: Arial, Helvetica, sans-serif;
}

body {
	background: #EEEEEE;
	color: #000000;
}

img {
	display: block;
	max-width: 100%;
}

h1, h2, ul {
	font-size: 1em;
	font-weight: normal;
}

p {
	font-size: 1em;
	line-height: 1.500em;
	font-weight: normal;
}

a {
	text-decoration: none;
	color: #000000;
}

ol, ul {
	list-style: none;
}

/* GRID FLEX
------------------------------------------------------------*/
.flex {
	display: flex;
	max-width: 960px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.flex-row {
	display: flex;
	margin-left: -10px;
	margin-right: -10px;
	flex-wrap: wrap;
}

.flex-item-1, .flex-item-2, .flex-item-3, .flex-item-4, .flex-item-5, .flex-item-6,
.flex-item-7, .flex-item-8, .flex-item-9, .flex-item-10, .flex-item-11, .flex-item-12 {
	margin-left: 10px;
	margin-right: 10px;
	align-self: flex-start;
}

.flex-item-1  { flex: 0 0 calc( 08.333% - 20px ); max-width: calc( 08.333% - 20px ); /* IE */ flex-basis: calc( 08.333% - 20px ); }
.flex-item-2  { flex: 0 0 calc( 16.666% - 20px ); max-width: calc( 16.666% - 20px ); /* IE */ flex-basis: calc( 16.666% - 20px ); }
.flex-item-3  { flex: 0 0 calc( 25.000% - 20px ); max-width: calc( 25.000% - 20px ); /* IE */ flex-basis: calc( 25.000% - 20px ); }
.flex-item-4  { flex: 0 0 calc( 33.333% - 20px ); max-width: calc( 33.333% - 20px ); /* IE */ flex-basis: calc( 33.333% - 20px ); }
.flex-item-5  { flex: 0 0 calc( 41.666% - 20px ); max-width: calc( 41.666% - 20px ); /* IE */ flex-basis: calc( 41.666% - 20px ); }
.flex-item-6  { flex: 0 0 calc( 50.000% - 20px ); max-width: calc( 50.000% - 20px ); /* IE */ flex-basis: calc( 50.000% - 20px ); }
.flex-item-7  { flex: 0 0 calc( 58.333% - 20px ); max-width: calc( 58.333% - 20px ); /* IE */ flex-basis: calc( 58.333% - 20px ); }
.flex-item-8  { flex: 0 0 calc( 66.666% - 20px ); max-width: calc( 66.666% - 20px ); /* IE */ flex-basis: calc( 66.666% - 20px ); }
.flex-item-9  { flex: 0 0 calc( 75.000% - 20px ); max-width: calc( 75.000% - 20px ); /* IE */ flex-basis: calc( 75.000% - 20px ); }
.flex-item-10 { flex: 0 0 calc( 83.333% - 20px ); max-width: calc( 83.333% - 20px ); /* IE */ flex-basis: calc( 83.333% - 20px ); }
.flex-item-11 { flex: 0 0 calc( 91.666% - 20px ); max-width: calc( 91.666% - 20px ); /* IE */ flex-basis: calc( 91.666% - 20px ); }
.flex-item-12 { flex: 0 0 calc( 100.00% - 20px ); max-width: calc( 100.00% - 20px ); /* IE */ flex-basis: calc( 100.00% - 20px ); }

/* GRID FLEX - TABLET
------------------------------------------------------------*/
@media (min-width: 740px) and (max-width: 980px) {
	.flex {
		max-width: 720px;
		flex-direction: row;
	}
}

/* GRID FLEX - MOBILE
------------------------------------------------------------*/
@media (max-width: 739px) {
	.flex {
		max-width: 300px;
	}

	.flex-item-1, .flex-item-2, .flex-item-3, .flex-item-4, .flex-item-5, .flex-item-6,
	.flex-item-7, .flex-item-8, .flex-item-9, .flex-item-10, .flex-item-11, .flex-item-12 {
		margin-left: 0px;
		margin-right: 0px;
		max-width: 100%;
		align-self: auto;
		flex: 0 0 300px; /* IE */
	}
}

/* ESTILOS SITE
------------------------------------------------------------*/

/* TÍTULOS - (header.php)
------------------------------------------------------------*/

.blog-titulo {
	font-size: 1.5em;
	line-height: 1.875em;
	font-weight: 700;
	letter-spacing: 0.100em;
	text-transform: uppercase;
	margin: 0;
}

.blog-titulo:after {
	content: " ";
	display: block;
	width: 60px;
	height: 3px;
	background: #FFFFFF;
	margin: 0 auto 11px;
}

/* HEADER - (header.php)
------------------------------------------------------------*/
.header-system {
	display: none;
}

.header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	background: #EEEEEE;
	box-shadow: 0 0 1rem rgba(0,0,0,.6);
	border-bottom: 1px solid #000000;
}

.header-logo {
	margin: 0 10px;
	padding: 5px 0;
}

/* HEADER - RESPONSIVO - (header.php)
------------------------------------------------------------*/
@media (max-width: 739px) {
	.header-system {
		display: flex;
		justify-content: flex-end;
	}

	.header-system a {
		background: #B61D15;
		color: #EEEEEE;
		font-weight: 700;
		padding: 2px 3px 2px 5px;
		font-size: 0.75em;
		border-radius: 0px 0px 6px 6px;
	}	

	.header-logo {
		margin: 0 auto;
	}
}

/* HEADER SOCIAL - (header.php)
------------------------------------------------------------*/
.header-social {
	margin: 0 10px;
	flex: 1;
		flex-basis: auto; /* IE */
	align-self: center;
}

.header-social ul {
	display: flex;
	float: right;
}

.header-social ul li {
	display: flex;
	align-items: center;
}

.header-social ul li:last-child::before {
	content: '•';
	display: block;
	margin-right: 10px;
}

.header-social ul li a {
	padding: 0 10px 0 5px;
	font-size: 1.250em;
}

.header-social ul li:last-child a {
	padding: 0px;
}

.fa-1-5x {
	font-size: 1.5em;
}

.fa-facebook-official:hover {
	color: #FFFFFF;
	background: url(../img/bg-icon.png) no-repeat center;
}

/* HEADER SOCIAL - RESPONSIVO - (header.php)
------------------------------------------------------------*/
@media (max-width: 739px) {
	.header-social {
		margin: 0;
	}
	
	.header-social ul {
		justify-content: center;
		float: none;
	}

	.header-social ul li:last-child::before {
		margin-right: 5px;
	}

	.header-social ul li a {
		padding: 0 5px 0 3px;
		font-size: 0.875em;
	}
	
	.fa-facebook-official:hover {
		background: none;
		color: #000000;
	}
}

/* HEADER - MENU NAV - (header.php)
------------------------------------------------------------*/
.menu {
	background-image: linear-gradient(90deg,
											rgba(238,238,238,1) 0%,
											rgba(225,225,225,1) 30%,
											rgba(0,0,0,1) 80%
										);
}

.menu-nav {
	flex: 1;
		flex-basis: auto; /* IE */
	margin: 0 10px;
	align-self: center;
}

.menu-nav ul {
	display: flex;
	float: right;
}

.menu-nav ul li a {
	display: block;
	font-size: 1em;
	font-weight: 700;
	padding: 10px;
	text-transform: uppercase;
	color: #EEEEEE;
	transition: all .8s ease;
}

.menu-nav ul li a:hover, .menu-active, #menu-system-link {
	background: #B61D15;
}

/* HEADER - MENU NAV - RESPONSIVO - (header.php)
------------------------------------------------------------*/
@media (max-width: 739px) {
	.menu {
		background: #000000;
	}

	.menu-nav {
		margin: 0px;
		align-self: auto;
	}
	
	.menu-nav ul {
		justify-content: space-between;
		float: none;
	}

	.menu-nav ul li a {
		font-size: 0.875em;
		padding: 10px 5px;
	}

	li a#menu-system-link {
		display: none;
	}
}

/* BLOG INTRO - (header.php)
------------------------------------------------------------*/
.blog-intro {
	height: 280px;
	background: url('img/blog-bg.jpg') no-repeat center;
	background-size: cover;
	margin-top: 122px;
	text-align: center;
	color: #FFFFFF;
	padding-top: 30px;
	box-shadow: 0 0 1rem rgba(0,0,0,.6);
}

.blog-intro a {
	color: #FFFFFF;
}

.blog-intro p {
	font-family: Georgia, 'Times New Roman', sans-serif;
	font-style: italic;
	font-size: 1em;
	line-height: 1.250em;
}

/* BLOG INTRO - RESPONSIVO (header.php)
------------------------------------------------------------*/
@media (max-width: 739px) {
	.blog-intro {
		margin-top: 147px;
	}
}

/* BLOG POST - HOME (index.php)
------------------------------------------------------------*/
.post-conteudo, .post-last {
	word-wrap: break-word;
	word-break: normal;
}

.post-conteudo {
	flex-direction: column;
	min-height: 70vh;
	margin-top: -140px;
	padding: 20px 40px;
	background: #F9FBFD;
	border-radius: 6px;
	box-shadow: 0 0 1rem rgba(0,0,0,.6);
}

.post-conteudo p {
	font-size: 1em;
	line-height: 1.500em;
	margin: 10px 0;
	color: #484848;
}

.post-titulo {
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: 700;
	color: #000000;
	text-transform: uppercase;
	text-align: left;
	margin: 0;
	margin-bottom: 10px;
}

.post-titulo:after {
	content: " ";
	display: block;
	width: 100px;
	height: 3px;
	background: #000000;
	margin: 0;
}

.post-call {
	font-size: 1.250em;
	font-weight: 700;
	padding: 10px 0;
	color: #000000;
	border-bottom: 1px dashed #484848;
}

.post-conteudo > a {
	border-bottom: 1px dashed #484848;
}

/* BLOG POST - HOME - RESPONSIVO (index.php)
------------------------------------------------------------*/
@media (max-width: 739px) {	
	.post-conteudo {
		padding: 5px 10px;
	}
}

/* BLOG POST - HOME - CARD (index.php)
------------------------------------------------------------*/
.post-card {
	padding: 10px 5px;
	transition: all .8s ease;
}

.post-card:hover {
	background: #EEEEEE;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 0 1rem rgba(0,0,0,.6);
}

.post-card p:first-child {
	font-weight: 600;
	text-transform: uppercase;
	margin: 0;
}

.post-card-info {
	font-size: 0.750em;
	margin: 5px 0; 
}

.post-card p:last-child {
	margin: 10px 0 0;
}

/* BLOG POST - HOME - BTN-PREV-NEXT (index.php)
------------------------------------------------------------*/
.post-prev-next {
	margin: 10px 0 0;
}

.post-prev-next a {
	display: inline-block;
}

.post-prev-next span {
	font-size: 0.750em;
	color: #FFFFFF;
	font-weight: 600;
	margin-right: 5px; 
	padding: 5px;
	text-decoration: none; 
	border-radius: 4px;
	background: #B61D15;
	border: 1px solid #B61D15;
	display: inline-block;
	transition: all .8s ease;
}

.post-prev-next span:hover {
	color: #B61D15;
	background: #FFFFFF;
}

/* BLOG POST - PÁGINA DE POST - CONTEÚDO (single-post.php)
------------------------------------------------------------*/
.post-blog {
	padding: 15px 20px;
}

.post-blog .post-subtitulo {
	font-size: 0.875em;
	line-height: 1.250em;
	color: #484848;
	margin: 0;
}

.post-conteudo img {
	border-radius: 6px;
	margin: 10px 0;
}

/* BLOG POST - PÁGINA DE POST - INFO AUTOR (single-post.php)
------------------------------------------------------------*/
.post-info {
	margin: 20px 0 0;
	font-size: 0.875em;
	line-height: 1em;
}

.post-info span {
	display: block;
	margin: 3px 0;
}

.post-info span a:hover {
	font-weight: 700;
}

/* BLOG POST - PÁGINA DE POST - TAGS (single-post.php)
------------------------------------------------------------*/
.post-tags:before, .post-tags:after {
	content: "";
	display: block;
	width: auto;
	height: 1px;
	background: #484848;
	margin: 20px 0 8px;
}

.post-tags:after {
	margin: 8px 0 20px;
}

.post-tags .post-tags-title {
	font-size: .85em;
	font-weight: 700;
	color: #000000;
}

.post-categories li, .post-tags-list li {
	display: inline-block;
}

.post-tags ul {
	margin: 5px;
}

.post-tags ul li a {
	display: inline-block;
	font-size: 0.750em;
	line-height: 1.250em;
	padding: 0.500em;
	background-color: #B61D15;
	border-radius: 6px;
	color: #FFFFFF;
	border: 1px solid #B61D15;
	transition: all .8s ease;
}

.post-tags a:hover {
	color: #B61D15;
	background: #FFFFFF
}

.post-tags-list li {
	margin: 0 5px 5px 0;
}

/* BLOG POST - PÁGINA DE POST - COMENTÁRIOS (single-post.php)
------------------------------------------------------------*/
p.post-titulo-comment {
	font-size: 1.250em;
	color: #000000;
}

/* BLOG POST - PÁGINA DE POST - COMENTÁRIOS (comments.php)
------------------------------------------------------------*/
.comment-body, fieldset {
	padding: 10px;
	background: #EEEEEE;
	border: none;
	border-radius: 6px; 
	box-shadow: 0 0 1rem rgba(0,0,0,.6);
}

fieldset p a {
	color: #000000;
	font-weight: 600;
}

fieldset p a:hover {
	border-bottom: 1px solid #000000;
}

.comment-author img {
	display: inline;
	height: 48px;
	width: 48px;
	margin: 0;
}

cite.fn {
	font-size: 0.875em;
	line-height: 1em;
	font-weight: 600;
}

span.says {
	font-size: 0.750em;
	line-height: 1em;
}

.commentmetadata a {
	font-size: 0.750em;
	line-height: 1em;
	color: #000000;
}

p.cancel {
	float: left;
	margin: 0;
}

.reply {
	margin: 20px 0 10px;
}

.reply a, .cancel a {
	font-size: 0.750em;
	line-height: 1.250em;
	font-weight: 400;
	padding: 0.500em;
	background-color: #B61D15;
	border-radius: 6px;
	color: #FFFFFF;
	border: 1px solid #B61D15;
	margin: 0 5px 10px 0;
}

a#cancel-comment-reply-link {
	display: inline-block;
	border-bottom: 1px solid #B61D15;
}

.reply a, .cancel a, #respond input.commentsubmit {
	transition: .8s all ease;
	cursor: pointer;
}

.reply a:hover, .cancel a:hover, #respond input.commentsubmit:hover {
	color: #B61D15;
	background: #FFFFFF;
}

#respond input.commentsubmit {
	width: auto;
	font-size: 0.750em;
	line-height: 1.250em;
	padding: 6px 10px;
	background-color: #B61D15;
	border-radius: 6px;
	color: #FFFFFF;
	border: 1px solid #B61D15;
	margin: 0 5px 10px 0;
}

#respond h3 {
	font-size: 1.75em;
	line-height: 1.75em;
	font-weight: 700;
	color: #000000;
	text-transform: uppercase;
	text-align: left;
	margin: 0;
	margin-bottom: 10px;
}

#respond h3:after {
	content: "";
	display: block;
	width: 100px;
	height: 3px;
	background: #000000;
	margin: 0;
}

/* BLOG POST - PÁGINA DE POST - COMENTÁRIOS DEFAULT (comments.php)
------------------------------------------------------------*/

#comments {
	min-width: 100%;
}
 
#comments cite {
	font-style: normal;
}

#comments h3 {
	margin: 10px 0 20px 0;
	font-size: 0.875em;
	font-weight: 600;
	color: #000000;
}
 
ol.commentlist {
	list-style: none;
	padding: 0;
}
 
ol.commentlist li {
	margin-bottom: 30px;
}
 
ol.commentlist ul {
	margin: 0px;
}
 
ol.commentlist ul li {
	margin: 20px 0 20px 40px;
}
 
#respond {
	margin: 0 0 10px 0;
	clear: both;
}

#respond form label {
	width: 100%;
	font-size: 0.875em;
	font-weight: 600;
	color: #000000;
	float: left;
	clear: left;
	margin-bottom: 5px;
}
 
#commentform input, #commentform textarea, #respond form input {
	font-size: 0.875em;
	width: 60%;
	padding: 3px;
	margin-bottom: 10px;
	float: left;
	border-radius: 6px;
	border: 2px solid #969593;
}

#respond form textarea {
	float: left;
	width: 100%;
	height: 120px;
	margin-bottom: 10px;
}


/* BLOG POST - PÁGINA DE POST - ÚLTIMOS POSTS (single-post.php)
------------------------------------------------------------*/
.post-last {
	margin-top: -140px;
	padding-top: 10px;
	background: #F9FBFD;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 0 1rem rgba(0,0,0,.6);
}

.post-last input {
	margin: 0 5%;
	padding: 3px;
	padding-left: 30px;
	width: 90%;
	font-size: 1em;
	border: 2px solid #969593;
	border-radius: 6px;
	background: url('img/search.png') no-repeat;
}

.post-last input:focus {
	background-color: #EEEEEE;
}

.post-last h2 {
	font-size: 1.4em;
	line-height: 2em;
	background: #000000;
	color: #FFFFFF;
	margin: 10px 0 0;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}

.post-last ul a {
	display: block;
	border-bottom: 1px dotted #9A9A9A;
	transition: all .8s ease;
}

.post-last ul a:last-child {
	border: none;
}

.post-last ul a:hover {
	background: #9A9A9A;
}

.post-last ul li {
	padding: 15px 10px;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.250em;
}

/* BLOG POST - PÁGINA DE POST - ÚLTIMOS POSTS - RESPONSIVO - (single-post.php)
------------------------------------------------------------*/
@media (max-width: 739px) {
	.post-last {
		margin-top: 40px;
	}
}

/* BLOG POST - RESULTADO BUSCA - (search.php)
------------------------------------------------------------*/
.post-titulo-search {
	margin-bottom: 0;
	padding-bottom: 20px;
	border-bottom: 1px dashed #484848;
}

/* FOOTER (footer.php)
------------------------------------------------------------*/

.footer {
	margin-top: 40px;
	font-size: 0.875em;
	padding: 9px 0;
	color: #FFFFFF;
	border-top: 1px solid #000000;
	box-shadow: 0 0 1rem rgba(0,0,0,.6);
	background-image: linear-gradient(90deg,
											rgba(238,238,238,1) 0%,
											rgba(225,225,225,1) 30%,
											rgba(0,0,0,1) 80%
										);
}

.copy {
	flex: 1;
		flex-basis: auto; /* IE */
	text-align: left;
	color: #000000;
}

.footer p {
	margin: 0 10px;
}

.footer p a {
	text-transform: uppercase;
	font-weight: 700;
	color: #FFFFFF;
}

/* FOOTER - RESPONSIVO
------------------------------------------------------------*/
@media (max-width: 739px) {
	.footer {
		background: #000000;
		border: none;
	}
	.footer p, .copy {
		text-align: center;
		margin: 0;
		color: #FFFFFF;
	}	
}

/* BOTÃO VOLTAR AO TOPO
------------------------------------------------------------*/
.voltar-ao-topo {
	position: fixed;
	font-size: 0.750em;
	bottom: 2em;
	right: 1em;
	padding: 0.750em;
	color: #F9F9F9;
	text-decoration: none;
	border-radius: 6px;
	background-color: rgba(0, 0, 0, 0.3);
	display: none;
	z-index: 999;
}

.voltar-ao-topo:hover {
	background-color: rgba(0, 0, 0, 0.8);
	box-shadow: 0 0 1rem rgba(0,0,0,.6);
}