/*==========RESET==========*/
* { margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box; font-family: 'Lato', sans-serif; }
body { background-color: #f5f5f5; }
a { text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; }

/* ADMINISTRATIVOS */
.administrativos { width: 100%; height: 22px; background: linear-gradient(to right,#666,#0098da); }
.telefone { color: #fff; margin-left: 4%; }
.btn-webmail { width: 150px; background: #fff; color: #0098da; margin-left: 4%; border-radius: 10px; cursor: pointer; text-align: center; }

/* CABECALHO */
.cabecalho { width: 100%; float: left; padding: 3% 4%; }
.logo { width: 56px; height: 56px; float: left; background: url(../img/logo-smartphone.png) center center/56px no-repeat; font-size: 0; }
.btn-menu { width:56px; height: 56px; float: right; text-align: center; color: #fff; border-radius: 56px; cursor: pointer;
background: #0098da; }

/* MENU */
.menu { display: none; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,0.9); top: 0; left: 0; }
.btn-close { font-size: 1.5em; color: #fff; float: right; cursor: pointer; margin: 2% 3% 0 0; }
.menu ul { width: 100%; float: left; text-align: center; }
.menu li { padding: 1.5%; }
.menu li a { font-size: 2em; color: #fff; padding: 1.5% 3%; }
.menu li a:hover { border: 1px solid #0098da; }

/* BANNER */
.banner { width: 100%; float: left; text-align: center; padding: 3% 4%; background: url(../img/bg.jpg) no-repeat fixed; }
.title { width: 100%; }
.title h2 { font-size: 2.5em; color: #0098da; font-weight: 700; }
.title h3 { font-size: 1.5em; color: #666; margin-top: 2%; }
.buttons { width: 100%; margin-top: 2%; }
.buttons i { float: center; }
.btn-cotacao { width: 100%; font-size: 1.5em; text-align: center; cursor: pointer; padding: 5%; border-radius: 10px; background-color: #0098da; color: #fff; }
.btn-sobre { width: 100%; font-size: 1.5em; text-align: left; cursor: pointer; padding: 5%; border-radius: 10px; background-color: #f89a20; color: #fff; margin-top: 2%; }

/* APRESENTAÇÃO */
.apresentacao { width: 100%; float: left; padding: 3% 4%; }
.apresenta { width: 100%; background-color: #fff; text-align: left; border-radius: 7px; margin-bottom: 3%; }
.apresenta img { border-radius: 7px 7px 0 0; margin-top: 2%; }
.configura { padding: 7%; }
.configura a { font-size: 1.5em; color: #8031ca; font-weight: 700; }
.configura h3 { font-size: 1.5em; color: #666; font-weight: 700; text-align: center; }
.configura h4 { font-size: 1.2em; color: #666; margin-top: 2%; text-align: center; }
.configura p { margin-top: 6%; color: #130400; line-height: 1.5em; text-align: center; }

/* SERVICOS */
.pergunta h3 { font-size: 2em; color: #0098da; text-align: center; font-weight: 600; }
.servicos { width: 100%; float: left; padding: 3% 4%; }
.servico{ width: 100%; background-color: #fff; text-align: left; border-radius: 7px; margin-bottom: 3%; }
.servico img { border-radius: 7px 7px 7px 7px; margin-top: 2%; }
.inner { padding: 7%; }
.inner a { font-size: 1.5em; color: #0098da; font-weight: 700; }
.inner h4 { font-size: 1.2em; color: #8031ca; margin-top: 2%; }
.inner p { margin-top: 6%; color: #130400; line-height: 1.5em; }

/* TRABALHE CONOSCO */
.trabalhe-conosco { width: 100%; float: left; padding: 3% 4%; text-align: center; background: url(../img/trabalhe_conosco.jpg) no-repeat fixed; }
.acao { width: 100%; }
.acao h2 { font-size: 2em; color: #0098da; font-weight: 500; }
.acao h3 { font-size: 1.5em; color: #666; margin-top: 2%; }
.buttons { width: 100%; margin-top: 2%; }
.buttons i { float: center; }
.btn-curriculo { width: 100%; font-size: 1.5em; text-align: center; cursor: pointer; padding: 5%; border-radius: 10px; background-color: #0098da; color: #fff; }

/* RODAPÉ */
.rodape { width: 100%; float: left; padding: 3% 4%; text-align: center; background: linear-gradient(to right,#666,#0098da); margin-top: 4%; }
.social-icons a { font-size: 1.5em; color: rgba(255,255,255,0.7); margin-right: 3%;	}
.social-icons a:last-child { margin-right: 0; } 
.social-icons a:hover { color: rgb(255,255,255); }
.copyright { margin-top: 2%; color: rgba(255,255,255,0.7); }

/* MEDIA TYPES
screen
Para monitores ou dispositivos com telas coloridas e resolução adequada.
print
Para impressoras. Muito usado para dar um versão de impressão do site.
*/

/* EXEMPLO PARA IMPRESSORAS */

@media print { }
/* EXEMPLO PARA DISPOSITIVOS MOBILE E DESKTOPS */

@media screen { }

/* ========== MOBILE FIRST ========== */
/* SMALL DEVICES - SMARTPHONES */
@media screen and (min-width: 480px) {
.logo { width: 214px; background: url(../img/logo-desktop.png) center center/214px no-repeat; }
.btn { font-size: 2em; }	
}

/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px) {
.servico { width: 49%; float: left; margin-right: 2%; }	
.servico:nth-child(2){ margin-right: 0; }
.newsletter h2 { font-size: 2em; }
.newsletter h3 { font-size: 1.5em; }
.newsletter input { width: 70%; padding: 2%; float: left; margin-right: 1%; }
.newsletter button { width: 29%; padding: 2%; float: right; margin-top: 0; }
}

/* MEDIUM DEVICES - TABLETS E DESKTOPS */
@media screen and (min-width: 960px) {
.btn-webmail { margin-left: 10px; }
.title { width: 70%; float: center; text-align: center; }
.title h2 { font-size: 2em; width: 670px; background: #666; color: #fff; }
.title h3 { font-size: 1.7em; width: 700px; background: #0098da; color: #fff; }
.buttons { width: 25%; float: center; margin-top: 6%; }
.pergunta h3 { font-size: 2.5em; }
.servico { width: 32%; }
.servico:nth-child(2){ margin-right: 2%; }
.servico:nth-child(3){ margin-right: 0; }
.configura h3 { font-size: 2.5em;  color: #0098da; }
.configura h4 { font-size: 1.5em; color: #171D88; font-weight: 400; }
.configura p { font-size: 1em; }
.acao h3 { color: #171D88; font-weight: 400; }
.newsletter input { width: 60%; float: none; }
.newsletter button { width: 20%; float: none; }	
}

/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px) {
.btn-menu { display: none; }
.btn-close { display: none; }
.menu { width: auto; height: 56px; line-height: 56px; float: right; background-color: #f5f5f5; display: block; position: static; }
.menu li { padding: 0; float: left; }
.menu li a { color: #000; font-size: 1em; padding: 15px; }
.menu li a:hover { background-color: #0098da;  color: #fff; border-radius: 10px; }	
}