/* Desenvolvido por behance.com/joshuaaliaga */
/* CSS Resetado */

@charset "utf-8";

/*Barra de Progresso*/
.pace {-webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;}
.pace-inactive {display: none;}
.pace .pace-progress {background: #d58500; position: fixed; z-index: 200; top: 0px; right: 100%; width: 100%; height: 5px;}
.bx-pager-item {display: none;}

body {-webkit-font-smoothing: antialiased;}
.container {position: absolute; width: 100%; min-height: 100%; top: 0;}
.section-pag {width: 100%; padding: 100px 0}
.conteudo-pag {width: 1280px; display: block; margin: 0 auto;}
.coluna-conteudo, .coluna-form { width: 615px; float: left; }
.right {float: right;}
.section-1, .section-3 {background: #101927}
.section-5, .section-8 {background: #333}
.section-7 {background: #EFEFEF}
.section-1 {background: url(../imagens/bg-pag1.jpg) no-repeat top; margin-top: 90px;}
.section-3 {background: url(../imagens/bg-pag3.jpg) no-repeat top;}
.section-5 {background: url(../imagens/bg-pag5.jpg) no-repeat top;}
.section-7 {background: url(../imagens/bg-pag7.jpg) no-repeat top;}
.section-8 {background: #333 url(../imagens/bg-pag8.jpg) no-repeat top;}
.section-2, .section-4, .section-6, .section-9 {background: url(../imagens/marca.jpg) no-repeat bottom;}
.section-9 {margin-bottom: 296px;}
.texto-pagina {display: block;}
.texto-pagina h3, .titulo-beneficios, .titulo-cronograma, .titulo-valores, .titulo-form {display: block; text-transform: uppercase; font-size: 25px; font-family: 'Seravek-Bold', sans-serif; line-height: 30px; color: #d58500; margin-bottom: 20px; text-align: center;}
.texto-pagina p, .txt-cronograma{display: block; font-size: 18px; text-align: center; line-height: 25px; margin-bottom: 10px;}
.texto-pagina strong {font-size: 18px}
.texto-pagina p i {font-size: 20px; text-align: center; display: block; font-family: 'Seravek-Bold', sans-serif;}
.titulo-beneficios, .titulo-cronograma, .txt-cronograma {text-align: center;}
.box-beneficios {width: 360px; margin-right: 100px; float: left; margin-top: 50px;}
.box-beneficios:nth-child(4){ margin-right: 0 }
.box-beneficios h3 {display: block; text-transform: uppercase; font-size: 20px; font-family: 'Seravek-Bold', sans-serif; color: #d58500; margin-bottom: 20px;}
.box-beneficios ul li {font-size: 18px; margin-bottom: 10px; line-height: 25px; list-style: disc; margin-left: 20px; color: #FFF}
.texto-pagina ul li {font-size: 18px; margin-bottom: 20px; line-height: 30px; list-style: disc; margin-left: 20px; color: #FFF}
.box-cronograma {width: 232px; margin-right: 30px; float: left; margin-top: 20px; height: 430px; transition: all .3s; cursor: pointer; overflow: hidden;}
.box-cronograma:nth-child(7){ margin-right: 0 }
.box-cronograma:hover {transform: scale(1.1);}
.box-cronograma:hover ul {background: #d58500; }
.box-cronograma:hover ul li {color: #FFF}
.box-cronograma:hover h3 {color: #333; background: url(../imagens/seta-cronograma-hover.png) right no-repeat}
.box-cronograma h3{transition: all .3s; display: block; text-transform: uppercase; font-size: 20px; font-family: 'Seravek-Bold', sans-serif; color: #FFF; margin-bottom: 10px; padding: 10px; background: url(../imagens/seta-cronograma.png) right no-repeat; text-align: center; border-radius: 10px}
.box-cronograma ul {padding: 20px; height: 340px; width: 173px; transition: all .3s; background: #EFEFEF; border-radius: 10px}
.box-cronograma ul li {transition: all .3s; font-size: 18px; margin-bottom: 10px; line-height: 20px; list-style: disc; margin-left: 20px; color: #333}
.saber-mais {display: block; padding: 10px 0; width: 500px; border: 2px solid #d58500; text-align: center; font-family: 'Seravek-Bold', sans-serif; color: #d58500; margin: 0 auto; border-radius: 10px; transition: all .3s; position: relative; bottom: 0}
.saber-mais:hover{background: #d58500; color: #FFF; transform: scale(1.1)}
.text-branco {color: #FFF}
.box-valores {width: 360px; height: 378px; margin-right: 100px; float: left;}
.box-valores:nth-child(3){ margin-right: 0 }
.titulo-valores, .titulo-form {text-align: center;}
.box-valores h3 {display: block; text-transform: uppercase; font-size: 20px; font-family: 'Seravek-Bold', sans-serif; color: #d58500; margin-bottom: 30px; text-align: center;}
.box-valores p{display: block; font-size: 18px; text-align: center; line-height: 25px; margin-bottom: 10px; color: #FFF}
.box-valores ul li {font-size: 18px; margin-bottom: 10px; color: #FFF; text-align: center;}
.box-valores img {display: block; width: 100px; height: 100px; margin: 0 auto 30px auto}
.divisao {height: 1px; border-bottom: 1px solid #FFF; margin: 100px 0}
.topo {width: 100%; padding: 20px 0; position: fixed; background: #FFF; top: 0; z-index: 100; box-shadow: 0px 1px 5px -1px rgba(0,0,0,0.47);}
.menu {width: 1280px; margin: 0 auto}
.menu-topo {float: right;}
.menu-topo li {float: left;}
.menu-topo li a {font-size: 16px; font-family: 'Seravek-Bold', sans-serif; color: #333; display: block; padding: 17px 10px; transition: all .2s;}
.menu-topo li a:hover {color: #d58500;  transform: scale(1.1)}
.logo-topo {display: block; float: left; height: 50px;}
.titulo-form {margin-bottom: 40px;}
input[name="nome"], 
input[name="telefone"], 
input[name="email"], 
input[name="empresa"],
input[name="outros"] {padding: 10px; border: 2px solid #d58500; font-size: 20px; color: #333; display: block; border-radius: 10px; width: 591px; margin-bottom: 40px;}
select {padding: 10px; border: 2px solid #d58500; font-size: 20px; color: #333; display: block; border-radius: 10px; width: 614px; margin-bottom: 40px;}
option {font-size: 20px; color: #FFF; background: #d58500;}
.form-pagina label {display: block; font-size: 20px; font-family: 'Seravek-Bold', sans-serif; margin-bottom: 30px;}
button {width: 400px; margin: 0 auto; display: block; padding: 15px 0; font-size: 20px; font-family: 'Seravek-Bold', sans-serif; border-radius: 10px; background: #d58500; color: #FFF; cursor: pointer; transition: all .3s;}
button:hover {background: #333; transform: scale(1.1)}
.img-pag {width: 615px; display: block;}
.rodape {position: absolute; bottom: 0; background-color: #EFEFEF; width: 100%; height: 296px}
.conteudo-rodape {width: 1280px; padding: 50px 0; margin: 0 auto;}
.logo-rodape {height: 70px; display: block; margin: 0 auto 40px auto;}
.conteudo-rodape p {display: block; font-size: 16px; font-family: 'Seravek-Bold', sans-serif; color: #d58500; text-align: center;}
.conteudo-rodape p a {font-size: 16px; font-family: 'Seravek-Bold', sans-serif; color: #333; text-align: center; margin-top: 10px; display: block;}


.desenvolvido {background: #333; padding: 20px 0;}
.desenvolvido a {display: block; height: 30px; width: 180px; margin: 0 auto;}
.desenvolvido a img {height: 30px;}
.section-space {margin-top: 50px}
.titulo-cronograma {margin-bottom: 0}
.txt-cronograma {font-family: 'Seravek-Bold', sans-serif;}
.base-outros {display: none;}
.alerta {width: 300px; padding: 15px 30px 15px 50px; position: fixed; top: 100px;color: #FFF; text-align: center; font-size: 17px; display: none; line-height: 23px; border-radius: 30px;}
.alerta{-webkit-box-shadow: 0px 0px 35px -12px rgba(0,0,0,0.52);-moz-box-shadow: 0px 0px 35px -12px rgba(0,0,0,0.52); box-shadow: 0px 0px 35px -12px rgba(0,0,0,0.52);}
#sucesso {background: #29B74E  url('../imagens/enviado.png') no-repeat; background-position: 13px center}
#erro {background: #A81F00  url('../imagens/erro.png') no-repeat; background-position: 13px center}
#enviando {background: #d58500 url('../imagens/enviando.gif') no-repeat; background-position: 13px center}
.section-2 span h3 { margin-bottom: 50px; }

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

	.conteudo-pag, .menu, .conteudo-rodape {width: 1024px;}
	.coluna-conteudo, .coluna-form, .img-pag { width: 462px }
	.box-beneficios, .box-valores {width: 274px}
	.box-cronograma {width: 180px; height: 508px}
	.box-cronograma ul {width: 122px; height: 417px}
	.box-cronograma ul li {list-style: none; margin-left: 0}
	input[name="nome"], input[name="telefone"], input[name="email"], 
	input[name="empresa"], input[name="outros"] {width: 438px}
	select { width: 462px }
	.section-pag {padding: 60px 0}

}

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

	.conteudo-pag, .menu, .conteudo-rodape {width: 800px;}
	.coluna-conteudo, .coluna-form, .img-pag { width: 350px }
	.box-beneficios, .box-valores {width: 200px}
	.box-cronograma {width: 136px; height: 508px}
	.box-cronograma ul {width: 95px; height: 417px}
	.box-cronograma ul li {list-style: none; margin-left: 0; font-size: 15px;}
	input[name="nome"], input[name="telefone"], input[name="email"], 
	input[name="empresa"], input[name="outros"] {width: 325px}
	select { width: 350px }
	.section-pag {padding: 50px 0}
	.logo-topo {height: 30px; margin: 10px 0}
	.menu-topo li a {font-size: 14px; padding: 17px 5px}
	.saber-mais {width: 308px}
	.box-cronograma h3 {font-size: 15px}

}

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

	.conteudo-pag, .menu, .conteudo-rodape {width: 300px;}
	.coluna-conteudo, .coluna-form{ width: 300px; float: none; }
	.box-beneficios, .box-valores {width: 300px; float: none;}
	.box-cronograma {width: 300px; float: none; margin: 0 auto 20px auto; height: auto}
	.box-cronograma ul {width: auto; height: auto}
	.box-cronograma ul li {list-style: none; margin-left: 0; font-size: 15px;}
	input[name="nome"], input[name="telefone"], input[name="email"], 
	input[name="empresa"], input[name="outros"] {width: 275px; text-align: center;}
	select { width: 300px }
	.section-pag {padding: 50px 0}
	.logo-topo {height: 30px; margin: 10px auto; float: none;}
	.topo {padding: 0; height: 50px}
	.saber-mais {width: 308px}
	.box-cronograma h3 {font-size: 15px;}
	.menu-topo {display: none;}
	.img-pag {margin:0 auto 30px auto; width: 280px; }
	.section-1 span {padding-top: 50px}
	.section-1 {margin-top: 50px; height: 242px;}
	button {width: 300px}
	.section-1 span {padding: 0}
	.section-1 {background: url(../imagens/bg-pag1_m.jpg)}
	.section-3 {background: url(../imagens/bg-pag3_m.jpg)}
	.section-5 {background: url(../imagens/bg-pag5_m.jpg)}
	.section-7 {background: url(../imagens/bg-pag7_m.jpg)}
	.section-8 {background: url(../imagens/bg-pag8_m.jpg)}
	.section-2, .section-4, .section-6, .section-9 {background: url(../imagens/marca_m.jpg)}
	.section-7 span p, .section-7 span p strong {color: #FFF}
	.logo-rodape {height: 40px;}
	.rodape {height: 282px}
	.section-9 {margin-bottom: 282px;}
	.form-pagina label{text-align: center;}

}