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

/* --- banner --- */
   .avatar-img{
      padding: 0px !important;
      border-radius: 50%;
   }

   .avatar-img img{
      border-radius: 50%;
   }

	#banner{
		background: url(../imagens/banners/banner-blog.jpg)no-repeat center center;
		background-size: cover;
		height: 347px;
		overflow: hidden;
	}
	#banner h1{
		font-size: 278px;
		color: #c412dc;
		opacity: .6;
		line-height: 1;
		text-align: left;
		position: relative;
		top: 110px;
		left: 610px;
	}
	#banner .bg-white{
		width: 220px;
		height: 168px;
		border-radius: 15px;
		position: relative;
		top: -45px;
		left: 440px;
	}
	#banner p{
		font-size: 60px;
		color: var(--new-purple);
		line-height: 1.8;
		text-align: center;
	}

/* --- conteudo --- */
	#conteudo{
		overflow: hidden;
	}
	#conteudo .container{
		margin-top: 40px;
		padding-left: 20px;
		padding-right: 20px;
	}
	#conteudo h3.font-black-italic{
		font-size: 510px;
		color: #F6F6F6;
		line-height: .1;
		position: relative;
		top: -120px;
		margin-left: -310px;
		z-index: -1;
		margin-bottom: -20px;
	}

/* --- artigos --- */
	#artigos{
		max-width: 730px;
		width: 100%;
		float: left;
	}
	#artigos article{
		margin-bottom: 15px;
	}
	#artigos p.bg-purple{
		font-size: 12px;
		width: 150px;
		height: 27px;
		border-radius: 20px;
		margin-left: auto;
		text-align: center;
		padding-top: 4px;
		margin-bottom: 10px;
	}
	#artigos p.comentarios{
		font-size: 15px;
	}
	#artigos p.autor{
		margin-top: 8px;
		font-size: 12px;
		color: var(--new-purple);
		margin-bottom: 45px;
	}
	#artigos .descricao h3{
		font-size: 26px;
		margin-bottom: 15px;
	}
	#artigos .descricao p.text-gray{
		font-size: 15px;
		line-height: 20px;
		margin-bottom: 10px;
		opacity: 1;
		color: #707070!important;
		margin-bottom: 30px;
	}
	#artigos .descricao img.img-1{
		margin-right: 30px;
		margin-bottom: 30px;
	}
	#artigos .descricao img.w-100{
		object-fit: cover;
		border-radius: 11px;
		margin-bottom: 30px;
	}
	
	#artigos #comentarios{
		margin-top: 75px;
	}
	#artigos #comentarios .clearfix{
		margin-bottom: 15px;
	}
	#artigos #comentarios h2{
		font-size: 26px;
		margin-bottom: 30px;
	}
	#artigos #comentarios p.compartilhe{
		font-size: 15px;
		position: relative;
		right: 30px;
		top: 0px;
	}
	#artigos #comentarios p.compartilhe img{
		margin-top: -8px;
	}
	#artigos #comentarios .avatar{
		width: 88px;
		height: 88px;
		border: 1px solid var(--new-purple);
		border-radius: 50%;
		padding-top: 18px;
		padding-left: 20px;
		margin-right: 20px;
	}
	#artigos #comentarios h3.nome,
	#artigos #comentarios h3.email,
	#artigos #comentarios p.data,
	#artigos #comentarios p.comentario{
		font-size: 15px;
		color: #707070;
	}
	#artigos #comentarios p.data{
		color: var(--new-purple);
	}
	#artigos #comentarios p.comentario{
		font-size: 15px;
		line-height: 20px;
		margin-top: 10px;
		margin-right: 90px;
		margin-bottom: 20px;
	}
	#artigos #comentarios p.responder{
		font-size: 15px;
		display: inline;
		padding-bottom: 5px;
		border-bottom: 1px solid var(--new-purple);
		cursor: pointer;
	}
	#conteudo #comentarios .form-row{
		max-width: 658px;
		width: 100%;
		margin-left: -3px;
	}
	#conteudo #comentarios input{
		border-radius: 8px;
		padding-top: 10px;
		padding-left: 15px;
		font-size: 13px;
		border-color: #C4C4C4!important;
	}
	#conteudo #comentarios textarea{
		max-width: 649px;
		width: 100%;
		height: 86px;
		border-radius: 10px;
		padding-top: 10px;
		padding-left: 15px;
		font-size: 13px;
		border-color: #C4C4C4!important;
		margin-top: 0px;
		margin-bottom: 15px;
	}
	#conteudo #comentarios a.btn{
		width: 195px;
		height: 37px;
		border-radius: 20px;
		border: 1px solid var(--new-purple);
		font-size: 14px;
		color: var(--new-purple);
		padding-top: 8px;
		text-align: center;
		text-transform: uppercase;
	}
	#conteudo #comentarios a.btn:hover{
		background-color: var(--new-purple);
		color: white;
	}

/* --- aside --- */
	aside{
		max-width: 256px;
		width: 100%;
		margin-left: auto;
		margin-right: 8px;
		margin-top: 25px;
		float: right;
	}
	aside .border{
		border: 1px solid #C4C4C4!important;
		border-radius: 12px;
		padding: 22px 30px 20px;
		margin-bottom: 20px;
	}

	aside .form-control{
		background-color: transparent!important;
		font-size: 12px;
		color: var(--new-gray-dark);
		max-height: 34px;
		border-radius: 20px!important;
		padding-left: 20px;
		border: 1px solid #B0B0AF!important; 
	}
	aside ::placeholder{
		color: #707070!important;
	}
	aside input.customDropdown{
		background : url(../imagens/logos/loupe.png) no-repeat 92% #eeeeee;
		-webkit-appearance: none;
		   -moz-appearance: none;
		    -ms-appearance: none;
		     -o-appearance: none;
	}
	aside .form-control:focus{
		box-shadow: none;
	}
	aside h3{
		font-size: 26px;
	}
	aside hr{
		width: 58px;
		margin-left: 0;
	}
	aside ul.lista{
		list-style: none;
	}
	aside ul.lista li{
		margin-bottom: 16px;
	}
	aside ul.lista a{
		font-size: 16px;
		font-family: "Montserrat-SemiBold";
		color: #707070;
	}
	aside .lista a:hover{
		color: var(--new-purple)!important;
	}
	aside .mais-lidas hr{
		margin-bottom: 40px;
	}
	aside .mais-lidas p.font-bold{
		margin-bottom: 5px;
		font-size: 15px;
	}
	aside .mais-lidas p.font-light{
		margin-bottom: 5px;
		font-size: 15px;
		margin-bottom: 15px;
	}
	aside .mais-lidas .lista li{
		border-bottom: 1px solid var(--new-gray-dark);
	}
	aside .mais-lidas .lista li:last-child{
		border-bottom: none;
	}

	aside .arquivos ul li{
		margin-bottom: 12px;
	}
	aside .arquivos ul li a{
		color: var(--gray-dark);
		font-size: 15px;
	}

	aside .cadastro{
		padding: 32px 32px;
	}
	aside .cadastro h3{
		font-size: 16px;
		margin-bottom: 20px;
	}
	aside .cadastro input.form-control{
		max-height: 35px;
		border: 1px solid #707070;
		border-radius: 20px;
		font-size: 13px;
		padding-left: 20px;
		margin-bottom: 10px;
	}
	aside .cadastro a.btn{
		margin-top: 30px;
		height: 37px;
		border: 1px solid #670E73;
		border-radius: 20px;
		color: #670E73;
		padding-top: 9px;
		font-size: 14px;
	}
	aside .cadastro a.btn:hover{
		background-color: #670E73;
		color: white;
	}

@media screen and (max-width: 1660px) {
	/* --- banner --- */
		#banner h1{
			left: 410px;
		}
		#banner .bg-white{
			left: 300px;
		}
}

@media screen and (max-width: 1440px) {
	/* --- banner --- */
		#banner h1{
			left: 415px;
		}
		#banner .bg-white{
			left: 160px;
		}
}

@media screen and (max-width: 1200px) {
	/* --- banner --- */
		#banner .bg-white{
			left: 10px;
		}

	/* --- conteudo --- */
		#conteudo .container{
			padding-left: 15px;
			padding-right: 15px;
		}

	/* --- aside --- */
		aside{
			margin-right: 0px;
		}
}

@media screen and (max-width: 992px) {
	/* --- banner --- */
		#banner h1{
			font-size: 154px;
			top: initial;
			bottom: -212px;
			right: -100px;
		}
		#banner .bg-white{
			width: 224px;
			height: 97px;
			top: initial;
			bottom: -110px;
			left: 10px;
			padding-top: 5px;
		}
		#banner p{
			font-size: 40px;
		}

	/* --- aside --- */
		aside{
			display: none;
		}
}

@media screen and (max-width: 480px) {
	/* --- banner --- */
		#banner{
			background: url(../imagens/banners/banner-blog.jpg)no-repeat 60% center;
		}
		#banner h1{
			right: 100px;
		}
		#banner .bg-white{			
			left: 0px;
		}

	/* --- conteudo ---*/
		#conteudo h3.font-black-italic{
			display: none;
		}

	/* --- artigos --- */
		#artigos{
			margin-bottom: 80px;
		}
		#artigos p.bg-purple{
			font-size: 10px;
			width: 124px;
			height: 23px;
			margin-left: 0;
			padding-top: 4px;
		}
		#artigos p.comentarios{
			font-size: 16px;
			margin-bottom: 40px;
		}
		#artigos p.autor{
			margin-top: 8px;
			font-size: 10px;
			margin-bottom: 30px;
		}
		
		#artigos #comentarios{
			margin-top: 50px;
		}
		#artigos #comentarios .clearfix{
			margin-bottom: 15px;
		}
		#artigos #comentarios h2{
			font-size: 26px;
			margin-bottom: 30px;
		}
		#artigos #comentarios p.compartilhe{
			display: none;
		}
		#artigos #comentarios .avatar{
			width: 62px;
			height: 62px;
			padding-top: 12px;
			padding-left: 14px;
			margin-right: 15px;
		}
		#artigos #comentarios .avatar img{
			max-width: 70%;
		}
		#artigos #comentarios p.comentario{
			margin-right: 0px;
		}
		#artigos #comentarios p.responder{
			font-size: 14px;
		}
		#artigos #comentarios .form-row{
			margin-left: auto;
			margin-right: auto;
		}
		#artigos #comentarios .form-group{
			padding-left: 0;
			padding-right: 0;
		}
		#conteudo #comentarios textarea{
			margin-top: 0px;
			margin-bottom: 15px;
		}
}