/*************************
Folha de Estilo Mais Interativo 2016 - DevConTreinamentos
*************************/
/***Padrões***/
*{
	margin: 0px; padding: 0px; 
	color: #333;
	font-family: sans-serif;
}
img,embed,object,iframe,video {
  max-width: 100%;
}
.video{
	min-width:72%; height:0;
}
.clear{
	clear: both;
}
.container{
	width:72%; margin:auto;
	padding: 1em 0;
}
header{
}
h1{
	font-size:2em;
	font-family: 'Pavanam', sans-serif;
	border-bottom:1px dotted #ff0000;
	color:#ff0000; margin-bottom:0.5em;
}
#topo{
	background:#000; text-align:center;
}
#topo img{
	width:20%; margin:auto; 
	padding:1em 0;
}
nav{
	background:#FFF; text-align:center;
	padding:1em 0;
}
	nav ul{
		list-style: none;
	}
		nav ul li{
			display: inline;
			padding:0.5px 0.5em;
		}
		nav a{
			color:#FF0000; text-decoration:none;
		}
		nav a:hover{
			color:#b11516; text-decoration:underline;
		}
/*topos internos*/
.topoInterno img{
	width:100%; 
}
/*Fundos*/
.cinza{
	background:#f2f2f2;
}
.branco{
	background:#FFF;
}
.tituloVermelho{
	font-size:2em;
	font-family: 'Pavanam', sans-serif;
	border-bottom:1px dotted #ff0000;
	color:#ff0000; margin-bottom:0.5em;
}
footer{
	background:#000;
}
	.footerCaixas{
		width: 19%; float:left; margin:0 0 0 1%;
		color:#fff;
	}
		.footerCaixas h2{
			color:#e6731e; margin-bottom:1em;
		}
		.footerCaixas ul a{
			color:#fff; text-decoration:none;
			font-size:0.8em;
		}
		.footerCaixas ul a:hover{
			color:#ddd; text-decoration:underline;
		}
			.footerCaixas ul li{
				list-style: none;
			}
	.footerContato{
		width: 30%; float:right; color:#FFF;
		text-align:right; font-size:0.8em;
	}
	.footerContato b{
		color:#FFF;
	}
/***************menu celular ***********/
.menuBT{
	display: none;
	width: 100%; 
	cursor: pointer;
	background: #0084b6; color: #FFF;
	text-align: center;
	padding: 1em;
}
/*******************
******* Home ****
********************/
.homeDestaques{
	width:23%; float:left;
	margin-left:2%; text-align:center;
}
.homeDestaques:hover{
	opacity:0.8;
}
.homeDestaques img{
	width:94%; margin-bottom:1em;
	border:10px solid #CCC;
}
.homeDestaques a{
	text-decoration:none;
}
.homeDestaques a:hover{
	text-decoration:underline;
	color:#333;
}
.homeBemVindoFoto{
	width:35%; float:left;
}
.homeBemVindoTexto{
	width:60%; float:right; text-align: justify;
}
.homeFotos{
	width:12.5%; float:left;
	margin-bottom:0px; line-height:0;
}
.homeFotos:hover{
	opacity:0.8;
}
/*******************
******* contato ****
********************/
#contatoMapaMatriz{
	width:49.5%; float:left;
}
	#contatoMapaMatriz h1{
		text-align:center;
	}
#contatoMapaFilial{
	width:49.5%; float:right;
}
	#contatoMapaFilial h1{
		text-align:center;
	}
#contatoDados{
	width: 30%; float: left;
	margin-top: 2em;
	font-size: 0.8em;
}
	#contatoDados h1{
		font-size: 1.8em;
	}
#contatoForm{
	width: 68%; float: right;
	margin-top: 2em; 
}
/***** formulario *****/
.contatoFormGrupo{
		margin:1em 0em;
	}
		label{
		font-size: 1em;
		font-weight: bold;
		}
	.inputEstilos{
		width: 100%; ; margin-top: 5px;
		padding:10px;
	}
	.botao {
	display: inline-block;
	background-color: #0068B4;
	color: #FFF;
	padding: 10px 20px;
	text-decoration: none;
	border-radius: 5px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	border: 0px;
	}
/*******************
******* Videos ****
********************/
.videoTitulo{
	font:bold 2em 'Pavanam'; text-align:center;
	padding:0.1em; margin-bottom: 0.2em;
}
.videoVideo{
	border-bottom:2px dotted #CCC; text-align:center;
	padding:1em; margin-bottom:1em;
}
.videosOutrosCaixa{
width:19%; height: 150px; float:left; padding-bottom: 0.5em;
border-bottom:1px solid #CCC; margin:0.3em 0.3em 0.3em 0.3em;
}
	.videosOutrosImg{
	text-align: center; margin-bottom: 0.1em;
	}
	.videosOutrosImg img{
		max-width: 100%;
	}
	.videosOutrosTitulo{
	width:100%;  text-align:center;
	}
	.videosOutrosTitulo a{
	text-decoration:none; font:bold 0.8em 'Oswald';
	text-align:center;
	}
	.videosOutrosTitulo a:hover{
	text-decoration:underline; font:bold 0.8em 'Oswald';
	text-align:center;
	}
/*******************
******* Fotos ****
********************/
.fotosCaixa{
	width: 13%; float: left;
	margin: 1% 0% 1% 1%;
}
.fotosTitulos{
	height: 3em; text-align: center;
	margin: 1em 0 1em 0;
}
	.fotosTitulos a{
		color: #ff0000;
	}
	.fotosTitulos a:hover{
		color: #333; text-decoration: underline;
		font-family:bold 2em;
	}
.fotosDatas{
	font-size: 0.7em;
	text-align: center;
	padding-bottom: 1em;
}
.fotosCaixa img:hover{
	opacity: 0.8;
}
.fotosMais{
	width: 98%; text-align: right; margin-top:1em;
	padding: 1%; background: #eee; font:bold 1em 'Pavanam';
}
	.fotosMais a{
		color: #333;  
	}
	.fotosMais a:hover{
		color: #666; text-decoration: underline;
	}
/*************************************************************
**************************************************************
                         Breakpoint     1024    
**************************************************************
**************************************************************/
@media only screen and (max-width: 1024px){
	.container{
	width:90%; 
	}
	.homeDestaques img{
	width:94%; margin-bottom:1em;
	border:5px solid #CCC;
	}
	.homeBemVindoFoto{
	width:45%; 
	}
	.homeBemVindoTexto{
	width:50%;
	}
	/******* video *******/
	.videosOutrosCaixa{
	width:18%; height: 150px; float:left; padding-bottom: 0.5em;
	border-bottom:1px solid #CCC; margin:0.3em 0.3em 0.3em 0.3em;
	}
}
/*************************************************************
**************************************************************
                         Breakpoint     768    
**************************************************************
**************************************************************/
@media only screen and (max-width: 768px){
	.container{
	width:90%; 
	}
	#topo img{
	width:50%; margin:auto; padding-bottom:1em; 
	}
	.footerCaixas{
	width: 25%;
	}
	.footerContato{
	width: 45%; 
	}
	.homeDestaques{
	width:50%;
	margin:0 auto 1em auto;
	}
	.homeBemVindoFoto{
	width:80%; float:none; margin:auto; 
	}
	.homeBemVindoTexto{
	width:95%; float:none; margin:1em auto;
	}
	.homeFotos{
	width:25%; float:left;
	}
	/******* Contato *******/
	#contatoDados{
		width: 100%; float: none;
	}
	/******* Fotos *******/
	.fotosCaixa{
	width: 23%; float: left;
	margin: 1% 0% 1% 1%;
	}
	/******* video *******/
	.videosOutrosCaixa{
	width:22%;
	}
	/*************** menu celular ***********/
	.menuBT{
	display: none;
	width: 100%; 
	cursor: pointer;
	background: #333;
	text-align: center;
	padding:1em 0em 1em 0em ; 
	float: right;
	margin:auto; margin-bottom:1em;
	}
	/* menu */
	#menu ul li{
		margin: 0px; padding: 0px;
		margin-top:1em;
	}
	#menu a{
	display: block;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	background: #000; color:#fff;
	margin-bottom: 0.2em; padding:0.5em;
	}
	#menu a:hover{
	border-bottom: 0;
	background: #666;
	margin-bottom: 0.2em; padding:0.5em;
	}
	.menuBT{
	display: block;
	}
	nav{
	display: none;
	}
}
/*************************************************************
**************************************************************
                         Breakpoint     500    
**************************************************************
**************************************************************/
@media only screen and (max-width: 500px){
	.footerCaixas{
	width: 100%; float:none; margin:auto;
	text-align:center;
	}
		.footerCaixas h2{
		margin:0.5em;
		}
	.footerContato{
	width: 100%; float:none; text-align:center;
	margin-top:2em;
	}
		.footerContato b{
		color:#e6731e; font-size:2em; padding-bottom:1em;
		}
	h1{
	font-size:1.8em; margin-bottom:0.2em;
	}
	.homeDestaques{
	width:100%; float:none;
	margin:0 auto 1em auto;
	}
	.homeDestaques img{
		border:5px solid #CCC;
	}
	.homeBemVindoFoto{
	width:100%; float:none; margin:auto; 
	}
	.homeFotos{
	width:33,33333333333333%; float:left;
	}
	/******* Contato *******/
	#contatoDados{
		width: 100%; float: none;
	}
	#contatoForm{
		width: 95%; float: none;
	}
	#contatoMapaMatriz{
	width:100%; float:none;
	}
	#contatoMapaFilial{
	width:100%; float:none;
	}
	/******* Fotos *******/
	.fotosCaixa{
	width: 30%; float: left;
	margin: 1% 0% 1% 1%;
	}
	/******* video *******/
	.videosOutrosCaixa{
	width:45%;
	}
	

}