/*import*/
@import url("global.css");
@import url("header-footer.css");

/*a[href*="blog"] {
	color: var(--new-red)!important;
}*/

/* --- banner --- */
	#banner{
		background: url(../imagens/banners/banner-blog.png)no-repeat center top;
		/*background-size: cover;*/
		height: 497px;
		background-attachment: fixed;
	}
	#banner .ml-auto{
		width: 42%;
		background-attachment: fixed;
	}
	#banner h1{
		font-size: 45px;
		height: 100%;
		margin-top: 70px;
		padding-top: 13px;
		padding-bottom: 12px;
		padding-left: 15px;
	}

/* --- artigos --- */
	.artigos{
		margin-top: 60px;
		max-width: 710px;
		margin-left: 20px;
	}

	/* --- */

	.artigos .box{
		margin-bottom: 70px;
	}
	.artigos .coments{
		padding-bottom: 18px;
		border-bottom: 1px solid #70707040;
	}
	.artigos .coments p{
		font-size: 15px;
	}
	.artigos .coments a img{
		max-width: 24px;
	}

	.artigos .coments .d-none p{
		font-size: 13px;
		color: var(--new-red);
		border: 1px solid var(--new-red);
		display: inline-block;
		width: 150px;
		height: 27px;
		border-radius: 25px;
		text-align: center;
		padding-top: 3px;
	}
	
	.artigos .art{
		padding-top: 20px;
	}
	.artigos .art img.img-fluid{
		margin-right: 30px;
		width: 306px;
		height: 200px;
		object-fit: cover;
		border-radius: 15px;
		transition: .3s;
	}
	.artigos .art .imagem{
		position: relative;
	}
	.artigos .art .bg-red{
		/*background-color: #C10E1A!important;*/
		max-width: 259px;
		width: 100%;
		position: absolute;
		top: 50px;
		right: 30px;
		padding: 6px 12px;
	}
	.artigos .art .bg-red p{
		font-size: 13px;
		color: white;
		margin-bottom: 0;
	}

	.artigos .art .media-body h2{
		font-size: 26px;
		margin-top: 10px;
		margin-bottom: 20px;
	}
	.artigos .art .media-body p{
		font-size: 15px;
		line-height: 20px;
	}
	.artigos .art .media-body a{
		height: 29px;
		font-size: 11px;
		border-radius: 25px;
		padding-top: 5px;
	}
	.artigos .art .media-body a img{
		margin-left: 5px;
		max-width: 15px;
		margin-top: -1px;
	}

	.artigos .art:hover img.img-fluid{
		transform: scale(1.03);
		transition: .3s;
	}
	.artigos .por p{
		margin-top: 15px;
		font-size: 13px;
		color: #707070;
	}

	/* --- */

	.artigos #paginacao{
		margin-top: -30px;
		margin-bottom: 145px;
	}
	.artigos #paginacao li{
		width: 39px;
		height: 39px;
		border-radius: 50%;
		text-align: center;
		padding-top: 5px;
		border: 1px solid var(--new-red);
		background-color: transparent;
		font-size: 18px;
		transition: .3s;
	}
	.artigos #paginacao li a{
		color: #707070;
		transition: .3s;
	}
	.artigos #paginacao li:hover,
	.artigos #paginacao li.active{
		background-color: var(--new-red);
		transition: .3s;
	}
	.artigos #paginacao li:hover a,
	.artigos #paginacao li.active a{
		font-weight: bold;
		color: white;
		transition: .3s;
	}

@media screen and (max-width: 1660px) {
	/* --- banner --- */
		#banner .ml-auto{
			width: 41%;
		}
}

@media screen and (max-width: 1440px) {
	/* --- banner --- */
		#banner .ml-auto{
			width: 39%;
		}
}

@media screen and (max-width: 1200px) {
	/* --- artigos --- */
		.artigos{
			margin-left: 0px;
		}
}

@media screen and (max-width: 992px) {
	/* --- banner --- */
		#banner .ml-auto{
			width: 95%;
			margin-top: auto;
			margin-bottom: -30px;
		}

	/* --- artigos --- */
		.artigos{
			max-width: 100%;
			margin-left: 20px;
		}
}

@media screen and (max-width: 480px) {
	/* --- banner --- */
		#banner{
			background: url(../imagens/banners/banner-blog.png)no-repeat 38% top;
			background-attachment: fixed;
		}
		#banner .ml-auto{
			margin-bottom: -30px;
		}
		#banner h1{
			text-align: center;
			font-size: 35px;
			margin-top: 70px;
			padding-top: 20px;
		}

	/* --- artigos --- */
		.artigos{
			margin-left: 0px;
		}

		/* --- */

		.artigos .coments p{
			font-size: 12px;
		}
		.artigos .art{
			padding-top: 10px;
		}
		.artigos .art .media{
			display: block;
		}
		.artigos .art img.img-fluid{
			width: 100%;
			margin-right: 0px;
			margin-top: 10px;
		}
		.artigos .art .bg-red{
			top: 0px;
			right: 0px;
			padding: 6px 12px;
		}
		.artigos .art .bg-red p{
			font-size: 14px;
		}
		.artigos .por p{
			margin-top: 10px;
			/*font-size: 13px;*/
			margin-bottom: 20px!important;
		}
		.artigos .art .media-body h2{
			/*font-size: 26px;*/
			/*margin-bottom: 20px;*/
		}
		.artigos .art .media-body p{
			font-size: 15px;
			/*line-height: 20px;*/
		}
		.artigos .art .media-body a{
			/*font-size: 11px;*/
		}
}

@media screen and (max-width: 400px) {
	
}