.banner{
	width: 100%;
	background-color: #000;
}
.banner img{
	width: 100%;
	object-fit: contain;
}
.bn-d{
	display: flex;
}
.bn-m{
	display: none;
}

.blog{
	width: 100%;
	background-image: url('../imagens/blog/bg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 5% 0;
}
/* ----- COLUNA ----- */
.coluna{
	width: 24%;
	height: fit-content;
	border-radius: 20px;
	background-color: var(--verde);
	padding: 2%;
}
.coluna h2{
	color: #fff;
	font-size: 1.7vw;
	font-weight: 900;
	margin-bottom: 6%;
}
.coluna ul{
	width: 100%;
}
.coluna ul li{
	margin-bottom: 8%;
	display: flex;
	width: 100%;
    justify-content: space-between;
}
.coluna a{
	color: #fff;
	font-size: 0.85vw;
	font-weight: 500;
}
.coluna a span{
	color: #fff;
	font-size: 0.85vw;
	font-weight: 500;
}

.pesq{
	position: relative;
	width: 100%;
	margin-bottom: 7%;
	align-items: center;
}
.pesq input{
	width: 100%;
	height: 46px;
	border-radius: 10px;
	border: 1px solid #fff;
	background-color: transparent;
	color: #fff;
	font-size: 0.90vw;
	padding-left: 15%;
	font-weight: 500;
}
.pesq input::placeholder{
	color: #fff;
	font-size: 0.90vw;
	font-weight: 500;
}
.pesq input:-webkit-autofill,
.pesq input:-webkit-autofill:hover,
.pesq input:-webkit-autofill:focus,
.pesq input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
}
.pesq button{
	position: absolute;
	left: 5%;
	display: flex;
	background-color: transparent;
	border: none;
	cursor: pointer;
	width: 6%;
    height: 100%;
    align-items: center;
}
.pesq button img{
	width: 100%;
}
.categ, .tag{
	margin-bottom: 10%;
}
.categ, .tag, .arqui{
	padding: 8%;
	border: 1px solid #fff;
	border-radius: 10px;
	width: 100%;
}
.tag ul{
	justify-content: space-between;
}
.tag ul li{
	width: unset;
	margin-right: 5%;
}

/* ----- CONTEUDO ----- */
.conteudo{
	width: 72%;
	margin-left: auto;
	align-content: baseline;
}
.conteudo-cards{
	width: 100%;
}
.conteudo-box{
	width: 31%;
	margin: 0 1%;
	margin-bottom: 5%;
	align-content: baseline;
}
.box-img{
	width: 100%;
	margin-bottom: 7%;
}
.box-img img{
	width: 100%;
	object-fit: contain;
}
.box-text{
	width: 100%;
}
.box-text h2{
	color: #fff;
	font-size: 1vw;
	font-weight: 900;
	margin-bottom: 5%;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}
.box-text p{
	color: #fff;
	line-height: 1.5;
	font-size: 0.90vw;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}

.paginacao{
	border: 1px solid var(--verde);
	padding: 1% 1vw;
	border-radius: 50px;
}
.paginacao li{
	display: flex;
	width: 45px;
	height: 45px;
	align-self: center;
	margin: 0 0.3vw;
}
.li-active, .paginacao li:hover{
	border-radius: 50%;
	border: 1px solid var(--verde);
}
.paginacao li a{
	display: flex;
	width: 100%;
	color: var(--verde);
	font-weight: 500;
	font-size: 1.1vw;
	place-content: center;
	align-items: center;
}



/* MEDIA DESKTOP */
@media screen and (max-width: 1600px){
	.pesq input{
		height: 40px;
	}
	.paginacao li{
		width: 40px;
		height: 40px;
	}
}

@media screen and (max-width: 1440px){
	.pesq input{
		height: 35px;
	}
	.paginacao li{
		width: 35px;
		height: 35px;
	}
}

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

}

@media screen and (max-width: 1280px){
	.pesq input{
		height: 30px;
	}
	.paginacao li{
		width: 30px;
		height: 30px;
	}
}

@media screen and (max-width: 1024px){
	.pesq input{
		height: 25px;
	}
	.paginacao li{
		width: 25px;
		height: 25px;
	}
}

/* MOBILE */
@media screen and (max-width: 768px){

}

@media screen and (max-width: 480px){
	.bn-d{
		display: none;
	}
	.bn-m{
		display: flex;
	}
	.blog{
		padding: 10% 0;
	}
	.conteudo{
		width: 100%;
		order: 0;
		margin-bottom: 10%;
	}
	.conteudo-box{
		width: 100%;
		margin: 0 0 15%;
	}
	.box-text h2{
		font-size: 5vw;
	}
	.box-text p{
		font-size: 3.5vw;
	}
	.paginacao{
		padding: 1vh 1vw;
	}
	.paginacao li a{
		font-size: 5vw;
	}
	.paginacao li {
    	width: 45px;
    	height: 45px;
	}

	.coluna{
		width: 85%;
		margin: 0 auto;
		order: 1;
		padding: 5%;
	}
	.pesq input, .pesq input::placeholder {
    	height: 45px;
    	font-size: 3.5vw;
	}
	.coluna h2{
		font-size: 6vw;
	}
	.coluna a, .coluna a span{
		font-size: 3.5vw;
	}
}

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

}

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

}