@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,300italic,400italic,600italic);


/* RESET */
* { margin:0; padding:0; list-style:none; border:0; vertical-align:baseline; font-family: 'Open Sans', sans-serif; -webkit-tap-highlight-color: rgba(0,0,0,0); } /* tap-hig... removendo quadro azul links mobile */
h1, h2, h3, h4, h5, h6 { font-weight:300; color:#333; }
img, picture, video, embed { max-width: 100%; } /* truque para deixar as imagens e outros elementos adaptáveis */
a { color:#007AFF; text-decoration:none; }
a:hover { text-decoration:underline; }
input:focus, button:focus, textarea:focus, select:focus { outline: none; }
input, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0px; } 

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type=number] { -moz-appearance:textfield; }
/* remover setas contador input tipo number */

.clearfix:before,.clearfix:after { content: " "; display: table; } 
.clearfix:after { clear: both; } 
.clearfix { *zoom: 1; }
/* fazer com que todos elementos fiquem dentro da div #conteudo por exemplo */

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* todos os elementos agora levarão em conta apenas a largura e altura determinada, sem somar a este valor a borda e o padding */

/* BASE */
html, body { height:100%; }
body { color:#4D4D4D; font-size:16px; background:#fff; }
#tudo { position:relative; float:left; width:100%; height:100%; min-width:320px;  }

/* CABEÇALHO */
#header { position:fixed; top:0; left:0; width:100%; background:#fff; z-index:9; transition: all 0.2s linear; }
#header a.logo-topo { float:left; width:250px; height:74px; margin:15px 0; }
#header a h1 { text-indent:-9999px; }

#header .idiomas { position:relative; float:left; width:50px; margin-top: 10px; z-index:5; }
#header .idiomas img { float:left; width:30px; margin:3px 0; opacity:.5; }
#header .idiomas img.selecionada { opacity:1; }
#header .idiomas img:hover { opacity:1; cursor:pointer; }

#header .menu { float:right; }
#header .menu .botao-acao { float:right; height:104px; color:#000; font-size:16px; padding:30px 40px 0 40px; background:#d5c256; }
#header .menu .botao-acao span { font-size:18px; font-weight:600; }
#header .menu .botao-acao span.whats { font-size:14px; }
#header .menu .botao-acao span.whats img { width:17px; }
#header .menu .botao-acao:hover { text-decoration:none; background:#f2f2f2; transition: all 0.2s linear; }
#header .menu ul { float:right; font-size:18px; }
#header .menu ul li { float:right; }
#header .menu ul li a { color:#4D4D4D; display:block; padding:0 15px; height:104px; line-height:104px; transition: all 0.2s linear; }
#header .menu ul li a:hover { text-decoration:none; background:#efe7d8; }

#header.fixo { box-shadow: 0px 2px 2px rgba(0,0,0,.1); }

/* MENU MOBILE */
nav { position:fixed; top:104px; left:0; width:100%; height:calc(100% - 104px); padding:10px 30px; background:rgba(255, 255, 255, 0.9); z-index:8; overflow:auto; }
nav ul { float:left; width:100%; font-size:18px; margin-bottom:15px; }
nav ul li { width:100%; border-bottom:1px solid; border-color: rgba(0, 0, 0,.2); }
nav ul li a { padding:15px 0; color:#000; display:block; text-indent:5px; }
nav ul li a:hover { color:#065aa0; text-decoration:none; }

nav { 
	-webkit-transform: translateY(-100%); 
	-moz-transform: translateY(-100%); 
	-ms-transform: translateY(-100%); 
	transform: translateY(-100%); 
	transition: all .25s linear;
}

.mapa { float:left; width:100%; height:600px; }

/* BANNER PRINCIPAL */
.banner-principal { position:relative; float:left; width:100%; height:calc(100% - 104px); min-height:530px; margin-top:104px; overflow:hidden; }
.banner-principal.interno { height:250px; min-height:inherit; }
.banner-principal.bg1 { background:#f2f2f2 url(imagens/vinhetas/banner-principal1.jpg) no-repeat center; background-size:cover; }
.banner-principal.bg2 { background:#f2f2f2 url(imagens/vinhetas/banner-principal2.jpg) no-repeat center; background-size:cover; }
.banner-principal.bg3 { background:#f2f2f2 url(imagens/vinhetas/banner-principal3.jpg) no-repeat center; background-size:cover; }

/*.banner-principal .chamada { float:left; width:520px; margin-top:5%; }*/
.banner-principal .chamada { float:left; width:550px; position:absolute; bottom:0; clear:both; margin-bottom:5%; font-size:30px; color:#fff; }
.banner-principal .chamada h2 { font-size:25px; color:#fff; }
.banner-principal h1 { float:left; width:100%; font-size:55px; color:#fff; }
.banner-principal h1.interno { position:absolute; bottom:0; clear:both; margin-bottom:3%; }
.banner-principal .descricao { float:left; width:100%; font-size:22px; color:#F8F8F8; margin:5% 0; }
.banner-principal .valor { float:left; width:100%; font-size:18px; color:#736357; margin-bottom:10px; }
.banner-principal .valor .texto { margin-top:-10px; }
.banner-principal .valor .cifra { font-size:36px; }
.banner-principal .valor .numero { font-size:60px; }

/* CONTEÚDO */
#container { float:left; width:100%; }
.meio-conteudo { width:1120px; margin:0 auto; }
.bloco-conteudo { float:left; width:100%; padding:40px 0; background:#fff; }
.bloco-conteudo.padding60 { margin:100px 0;  }
.bloco-conteudo.banner-esportacao { padding:0 0 80px 0; }
.bloco-conteudo.com-bg { background:#f2f2f2; }
.bloco-conteudo .bloco { float:left; width:48.4375%; }
.bloco-conteudo .bloco.direito { float:right; }
.bloco-conteudo .bloco.esquerda { float:left; }
.bloco-conteudo .bloco.imagem { text-align:center; }
.bloco-conteudo p { margin-bottom:20px; line-height:24px; }
.bloco-conteudo h2 { font-size:52px; margin-bottom:20px; color:#4D4D4D; }
.bloco-conteudo h3 { font-size:18px; font-weight:600; margin-bottom:5px; }
.bloco-conteudo.com-bg h2 { font-size:40px; }
.bloco-conteudo.com-bg h2.interno { font-size:30px; }
.bloco-conteudo.com-bg h2.preto { color:#000; }
.bloco-conteudo.com-bg .fone { font-size:22px; color:#065aa0; }

.bloco-conteudo ul { float:left; width:100%; }
.bloco-conteudo ul li { line-height:24px; margin-bottom:20px; }
.bloco-conteudo .subTitulo { color:#666; font-size:26px; font-weight:300; margin-bottom:40px; }


/* SERVIÇOS */
.servicos { float:left; width:25%; padding:40px 30px; text-align:center; transition:all linear .2s; overflow:hidden; }
.servicos.border-left { border-left:1px solid #e6e6e6; }
.servicos.border-top { border-top:1px solid #e6e6e6; }
.servicos .img { border-radius:50%; }
.servicos h3 { color:#000; font-size:18px; margin:20px 0; }
.servicos p { color:#808080; }
.servicos p.detalhes { color:#007AFF; margin-top:20px; }
.servicos:hover { text-decoration:none; background:#f2f2f2; cursor:pointer; }
.servicos.interno:hover { background:#fff; cursor:pointer; }
.servicos.interno h2 { color:#000; font-size:18px; margin:20px 0; font-weight:600; }

/* ORÇAMENTO */
.bloco-orcamento { float:left; width:30%; margin:20px 5% 30px 0; margin-right:5%; border:1px #dcdcdc solid; padding:12px 30px; }
.bloco-orcamento.margin0 { margin-right:0; }
.bloco-orcamento h3 { text-align:center;  margin:-25px 0 20px 0; }
.bloco-orcamento h3 span { background:#f2f2f2; padding:0 25px; }

/* ORÇAMENTO CONCLUIDO */
.orcamento-concluir { position:relative; float:left; width:100%; height:calc(100%); min-height:530px; overflow:hidden; background:#f2f2f2 url(imagens/vinhetas/banner-principal3.jpg) no-repeat center; background-size:cover; }
.orcamento-concluir.bg1 { background:#f2f2f2 url(imagens/vinhetas/banner-principal2.jpg) no-repeat center; background-size:cover; }
.orcamento-concluir .mensagem { float:left; width:550px; margin-top:5%; font-size:30px; color:#fff; }
.orcamento-concluir .mensagem .logo { width:250px; margin:15px 0; }
.orcamento-concluir .mensagem h1 { float:left; width:100%; font-size:55px; color:#fff; margin-top:5%; }
.orcamento-concluir .mensagem p { font-size:20px; color:#fff; font-weight:300; margin:5% 0; }




/* ATENDIMENTO */
.atendimento-canal { float:left; width:100%; border-top:1px solid #e6e6e6; border-left:1px solid #e6e6e6; }
.atendimento-canal .canais { float:left; width:33.33333334%; padding:30px 20px; text-align:center; border-bottom:1px solid #e6e6e6; border-right:1px solid #e6e6e6; transition: all 0.2s linear; }
.atendimento-canal .canais:hover { background:#d5c256; color:#FFF; cursor:pointer; }
.atendimento-canal .canais:hover i { color:#FFF; }
.atendimento-canal .canais:hover h2 { color:#FFF; }
.atendimento-canal .canais i { color:#d13035; font-size:55px; }
.atendimento-canal .canais h2 { color:#424242; font-size:22px; font-weight:600; line-height:1.2; letter-spacing:-1.6px; margin:10px 0; }
.atendimento-canal .canais p { line-height:1.2; }


/* ATENDIMENTO */
.link { float:left; margin-top:60px; }
.link li { margin-bottom:5px; }
.link li i { font-size:6px; margin-right:5px; vertical-align:2px; }



/* RODAPÉ */
#rodape { float:left; width:100%; padding:60px 0; font-size:14px; }
#rodape .blocos { float:left; width:25%; }
#rodape .blocos.atendimento { float:left; width:30%; }
#rodape .blocos .whats { width:17px; }
#rodape .blocos.orcamento { float:left; width:45%; }
#rodape .blocos .vaiMudar { float:left; width:100%; margin-top:-40px; }
#rodape .blocos .vaiMudar img { float:left; width:220px; }
#rodape .blocos .vaiMudar { float:left; }
#rodape .blocos .vaiMudar h4 { font-size:50px; color:#065aa0; margin-top:40px; line-height:45px; }
#rodape .blocos .vaiMudar p { font-size:20px; line-height:25px; }
#rodape .blocos p { margin-bottom:20px; line-height:21px; }
#rodape .blocos .fone { font-size:22px; color:#065aa0; font-weight:400; }
#rodape h4 { font-size:26px; margin-bottom:20px; }
#rodape h4.marginTop { margin-top:40px; }

#rodape .direitos { clear:both; float:left; width:100%; margin-top:30px; padding-top:30px; border-top:1px solid #ccc; text-align:center; color:#808080; }
#rodape .direitos .assinatura { color:#065aa0; }











/* PLANOS ASSINATURA */
.planos { float:left; width:33.33%; padding:20px; text-align:center; }
.planos .icon { width:150px; border:1px solid #ccc; border-radius:50%; }
.planos h4 { font-size:22px; font-weight:600; color:#F15A24; margin:10px 0; }
.planos .descricao { font-size:14px; }
.planos .valor { color:#333; }
.planos .valor .cifra { font-size:26px; }
.planos .valor .numero { font-size:44px; }
.planos .botao-link { padding:15px 40px; font-size:12px; background:#ffde00; }
.planos .botao-link:hover { background:#007AFF; }
.planos .exemplo { font-size:14px; color:#808080; margin:10px 0 0 0; }

.formas-pagamento { float:left; width:100%; text-align:center; color:#808080; margin-top:10px; }
.formas-pagamento img { margin-top:10px; }


/* PÁGINA CONCLUÍDO */
.concluido-topo { float:left; width:100%; padding:40px; color:#fff; text-align:center; font-size:60px; font-weight:300; background:#4FC3F7; }
.concluido-topo .logo { display:inline-block; width:170px; height:40px; margin-bottom:35px; }
.concluido-meio { float:left; width:100%; padding:40px; text-align:center; font-size:36px; font-weight:300; }
.concluido-meio a.link { margin-top:20px; display:inline-block; }

/* FORMULÁRIO */
.form-coluna { float:left; width:100%; padding:0 0 10px 0; }
.form-botao { color:#000; background:#FFEB33; font-size:14px; font-weight:600; border:0; cursor:pointer; }
.form-botao:hover { color:#fff; background:#065aa0; }



input, textarea { float:left; width:100%; padding:10px; font-size:14px; color:#999; border:1px solid #ccc; transition: all 0.2s linear; }
select { float:left; width:100%; padding:10px; font-size:14px; color:#999; border:1px solid #ccc; background:#fff url(imagens/vinhetas/iconSelect.png) no-repeat; background-position:98% 50%; background-size:16px 10px; transition: all 0.2s linear; }
input:focus, textarea:focus, select:focus { border:1px solid #00a0d8; }
.caixa-erro, .caixa-erro:focus { border:1px solid #ea3d4a; }

.botao-form { float:none; display:inline-block; width:auto; height:35px; line-height:35px; padding:0 20px; color:#fff; font-size:18px; border:0; cursor:pointer; background:#39B54A; transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; border-radius:17px; -webkit-border-radius:17px; -moz-border-radius:17px; }
.botao-form:hover { color:#fff; background:#007AFF; }

/* BOTÕES */
.botao-link { display:inline-block; padding:15px 40px; color:#000; font-size:14px; font-weight:600; background:#ffde00; transition: all 0.2s linear; border-radius:5px; }
.botao-link.tipo2 { color:#000; background:#FFEB33; }
.botao-link:hover { color:#065aa0; background:#fff; text-decoration:none; }
.botao-link.tipo2:hover { color:#fff; background:#065aa0; text-decoration:none; }

/* CAIXA MODAL */
.bloco-modal { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.8); z-index:999; display:none; transition: all 0.25s linear; }
.bloco-modal .modal { position:absolute; top:50%; left:50%; width:600px; height:300px; margin-top:-150px; margin-left:-300px; font-size:16px; text-align:center; padding:30px; background:#fff; -webkit-box-shadow: 0px 5px 15px rgba(0,0,0,.4); -moz-box-shadow: 0px 5px 15px rgba(0,0,0,.4); box-shadow: 0px 5px 15px rgba(0,0,0,.4); transition: all 0.25s linear; }
.bloco-modal .modal h2 { color:#000; font-size:24px; font-weight:600; margin-bottom:20px; }
.bloco-modal .modal .acoes { float:left; width:100%; margin-top:40px; }

.modal-active .bloco-modal { 
	display:block;
}


/* DIVERSOS */
.text-center { text-align:center; }
.fonte12 { font-size:12px; }
.fonte-cinza { color:#808080; }
.quebra-linha { clear:both; }

#header, #menu, #rodape, .meio-conteudo {
	transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-ms-transition: all 0.25s linear;
}

.borda-redonda {
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	overflow:hidden; 
}

/* ICONE MENU HAMBURGUER */
.hamburguer {
  float:right;
  width: 25px;
  height: 20px;
  display: none;
  position: relative;
  margin-top:32px;
}
.hamburguer:after, .hamburguer:before, .hamburguer span {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: #D91C24;
  left: 0;
  position: absolute;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.hamburguer:before {
  top: 2px;
}
.hamburguer:after {
  bottom: 2px;
}
.hamburguer:focus {
  outline: none;
}
.hamburguer label {
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1000;
  display: block;
  position: absolute;
  background:none;
}
.hamburguer span {
  top: 9px;
}

.menu-active .hamburguer:before, .menu-active .hamburguer:after {
  top: 10px;
  margin-top: -10%;
}
.menu-active .hamburguer:before {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-active .hamburguer:after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-active .hamburguer span {
  opacity: 0;
}

@media screen and (max-width: 1120px) {
	.meio-conteudo { width:100%; padding:0 20px; }
}

@media screen and (max-width: 900px) {
	#header .menu { display:none; }	
	.oculto-mobile { display:none; }
	.hamburguer { display:block; }
	
	.menu-active nav { 
		-webkit-transform: translateY(0); 
		-moz-transform: translateY(0); 
		-ms-transform: translateY(0); 
		transform: translateY(0); 
	}
}

@media screen and (max-width: 768px) {	
	.banner-principal h1 { font-size:38px; }
	.banner-principal h4 { font-size:38px; }
	.bloco-conteudo .bloco { width:100%; }
	.form-coluna, .form-coluna.coluna3 { width:100%; padding-right:0; }	
	
	.banner-principal .chamada { width:100%; }
	.bloco-conteudo .bloco.pessoas { display:none; }
	
	.orcamento-concluir .mensagem { width:100%; }
	
	.servicos { width:50%; padding:40px 30px; }
	
	.bloco-orcamento { width:100%; margin-right:0; }
	
	#rodape .blocos { width:50%; min-height:185px; margin-bottom:20px; }
	#rodape .blocos.atendimento { width:50%; }
	#rodape .blocos.orcamento { width:100%; }
	
	#rodape .blocos .vaiMudar { margin-top:20px; }
	#rodape .blocos .vaiMudar h4 { font-size:40px; }
	#rodape .blocos .vaiMudar p { font-size:18px; }

	
	.planos { width:100%; }
	.planos .icon { width:150px; border:1px solid #ccc; border-radius:50%; }
	.planos h4 { font-size:22px; font-weight:600; color:#F15A24; margin:10px 0; }
	.planos .descricao { font-size:14px; }
	.planos .valor { color:#333; }
	.planos .valor .cifra { font-size:26px; }
	.planos .valor .numero { font-size:44px; }
	.planos .botao-link { padding:15px 40px; font-size:12px; background:#39B54A; }
	.planos .botao-link:hover { background:#007AFF; }
	.planos .exemplo { font-size:14px; color:#808080; margin:10px 0 0 0; }
}

@media screen and (max-width: 480px) {	
	.banner-principal h1 { font-size:34px; }
	.banner-principal h1.interno { margin-bottom:5%; }
	.banner-principal h4 { font-size:34px; }
	.banner-principal .descricao { font-size:18px; }
	.banner-principal .valor { float:left; width:100%; font-size:18px; color:#736357; margin-bottom:10px; }
	.banner-principal .valor .texto { margin-top:-10px; }
	.banner-principal .valor .cifra { font-size:36px; }
	.banner-principal .valor .numero { font-size:60px; }
	
	.bloco-conteudo h2 { font-size:28px; }
	
	.concluido-topo { padding:20px; font-size:48px; }
	.concluido-topo .logo { margin-bottom:20px; }
	.concluido-meio { padding:20px; font-size:24px; }
	
	.servicos { width:100%; }
	
	#rodape .blocos { width:100%; text-align:center; }
	#rodape .blocos.atendimento { width:100%; }
	#rodape .blocos .vaiMudar img { width:80%; margin:0 10%; }
	
	#rodape .imagem { float:none; display:block; margin:0 auto; }
	#rodape .imagem.certificado, #rodape .imagem.sindicato {  width:60%; }

	
}

@media screen and (max-width: 320px) {
	.bloco-conteudo h2 { font-size:24px; }
	
}