/* HOME *****************************************************************************/

.banner{
	float: left;
	margin: 145px 0 0 0;
	width: 100%;
	}
	
.artigos-destaque{
	max-width: 1400px;
	margin: 0 auto;
	}
	
.balao{
	float: left;
	width: 29%;
	margin: 0 2%;
	padding: 30px;
	text-decoration: none;
	color: #000;
	background: #f2f2f2;
	}
	
.balao:hover{
	background: #fff;
	box-shadow: 0 0 10px #666;
	}
	
.tarja{
	float: left;
	margin-bottom: 30px;
	width: 100%;
	padding: 50px 0;
	}
	
.noticias{
	float: left;
	margin: 0 1.5% 20px 1.5%;
	border-top: 2px solid #0b3b78;
	width: 69%;
	padding-right: 20px;
	text-align: left;
	background: #e6e7e8;
	}
	
.noticias img{
	width: 200px;
	margin: 0 20px 0 0;
	}
	
.video{
	float: right;
	margin: 0 1.5% 40px 1.5%;
	width: 25%;
	padding-bottom: 10px;
	}
	
.video2{
	float: left;
	display: none;
	margin: 0 2%;
	width: 96%;
	padding-bottom: 10px;
	}
	
a.video-link{
	margin: 10px 0 0 0;
	padding: 10px 20px;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: -1px;
	background: #cc0000;
	}
	
a.video-link:hover{
	background: #0b3b78;
	}
	
.video-iframe{
	width: 100%;
	height: 300px;
	}
	
.associada{
	float: left;
	width: 100%;
	padding: 15px 30px;
	text-align: center;
	background: url(../imagens/fd-associada.jpg);
	background-size: cover;
	}
	
.associada img{
	width: 160px;
	margin: 0 40px;
	}
	



/***********************************************************************************/
/* MÍDIA QUERIES */
/***********************************************************************************/


/* 1200px – Desktops, notebooks com monitores widescreen --------------------------*/

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

}


/* 960px – Tablets no formato paisagem e alguns monitores mais antigos ------------*/

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

.banner{
	margin: 128px 0 0 0;
	}
	
.tarja{
	padding: 30px 0;
	}
	
.balao{
	width: 31%;
	margin: 0 1%;
	padding: 20px;
	}
	
a.video-link{
	padding: 10px 10px 15px 10px;
	}

}


/* 768px – Tablets no formato retrato, como o iPad --------------------------------*/

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

.banner{
	margin: 120px 0 0 0;
	}
	
.tarja{
	padding: 10px 0;
	margin-bottom: 15px;
	}
	
.balao{
	width: 96%;
	margin: 10px 2%;
	padding: 20px 10px 10px 10px;
	}
	
.balao img{
	display: none;
	}
	
.noticias{
	float: left;
	margin: 0 1% 10px 1%;
	width: 98%;
	}
	
.video{
	display: none;
	}
	
}



/* 480px – Smartphones no formato paisagem com tela pequena -----------------------*/

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

.banner{
	margin: 110px 0 0 0;
	}
	
.noticias{
	margin: 0 1% 10px 1%;
	width: 98%;
	padding-right: 20px;
	}
	
.noticias img{
	width: 150px;
	margin: 0 10px 0 0;
	}
	
.chamada{
	display: none;
	}
	
.video2{
	display: block;
	}
	
.video-iframe{
	height: 150px;
	}
	
.associada{
	padding: 10px;
	}
	
.associada img{
	width: 120px;
	margin: 0 20px;
	}

}


/* 320px – Smartphones no formato retrato com tela pequena ------------------------*/

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

.banner{
	margin: 130px 0 0 0;
	}
	
.tarja{
	padding: 0;
	}
	
.balao{
	width: 96%;
	padding: 10px;
	}
	
.noticias{
	padding: 10px 20px;
	}
	
.noticias img{
	display: none;
	}
	
.associada{
	padding: 5px;
	}
	
.associada img{
	width: 80px;
	margin: 0 5px;
	}

}