/*********************************************************/
/*	STYLE CSS										 	 */
/*	DESENVOLVIDO POR: GLOBALWS							 */
/*	CEO: MICHAEL PICOLO									 */
/*********************************************************/
html, body {width:100%; height:100%; font-family: 'Rubik', sans-serif;}
/*********************************************************/
:root {
	--vermelho: #A61B14;
}
/*********************************************************/
.esquerda {width: 47%; float: left;}
.esquerda-full {width: 50%; float: left;}
.esquerda-min {width: 30%; float: left;}
.direita {width: 47%; float: right;}
.direita-full {width: 50%; float: right;}
.direita-max {width: 60%; float: right;}
.centro {width: 60%; margin: auto;}

.botao-vermelho {padding: 10px 30px; background-color: var(--vermelho); color: #fff; font-family: 'Rubik', sans-serif; text-transform: uppercase; font-weight: 500; cursor: pointer;}
.botao-vermelho:hover {background-color: #000;}

h1 {text-transform: uppercase; font-weight: 300; font-size: 2.6em; padding-bottom: 40px;}
h1 span {font-weight: 700; color: var(--vermelho);}

p {color: #222; line-height: 30px;}
/*********************************************************/
/*	TOPO & RODAPE										 */
/*********************************************************/
header {width: 100%; display: table; background-color: #000; padding: 5px 0;}
header .logo {width: 235px; height: 120px; float: left; background-repeat: no-repeat; background-size: 100%;}
header .inicio {width: 70%; float: right;}

header .dados {float: right;}
header .dados li {float: left; padding: 10px; margin-left: 10px; color: #fff;}
header .dados i {color: var(--vermelho); padding-right: 10px;}
header .bt {background-color: var(--vermelho); border-radius: 5px;}
header .bt i {color: #fff !important;}

header .menu {float: right; padding-top: 10px;}

footer {width: 100%; display: table; padding-top: 20px; background-color: #000; color: #fff; border-top: 10px solid var(--vermelho);}
footer h2 {font-size: 1.2em; text-transform: uppercase; padding-bottom: 15px; font-weight: 600;}

footer .logo {width: 25%; height: 160px; float: left; background-repeat: no-repeat; background-size: 100%;}

footer .rodape_menu {float: left; width: 15%; padding-left: 5%;}
footer .rodape_menu li {width: 100%; padding: 2px 0; font-size: 0.9em;}
footer .rodape_menu a {color: #fff; text-transform: uppercase; font-weight: 300;}
footer .rodape_menu a:hover {color: var(--vermelho);}

footer .social {float: left; width: 20%; padding: 0 30px; text-align: center;}
footer .social li {color: #fff; display: inline-block; font-size: 1.8em;}
footer .social li:hover {color: var(--vermelho);}

footer .rodape_dados {float: left; width: 40%; padding: 0 30px;}
footer .rodape_dados li {width: 100%; display: table; margin-bottom: 10px;}
footer .rodape_dados i {width: 35px; float: left; padding-top: 5px;}
footer .rodape_dados p {float: left; color: #fff;}

.fim {width: 100%; padding: 20px 0; text-align: center; background-color: #25272A;}
.fim p {color: #fff; font-weight: 300; font-size: 0.8em; letter-spacing: 1px;;}
.fim a {color: #fff;}
.fim a:hover {color: var(--vermelho);}
/*********************************************************/
.banner {position: relative;}
.banner .texto {position: absolute; z-index: 999999; width: 25%; top: 30%; left: 15%;}
.banner .texto h1 {color: #fff; font-weight: 900; text-transform: none;}
.banner .texto h1 span {color: var(--vermelho); font-weight: 900;}
.banner .texto p {color: #fff; font-size: 1.1em;}
/*********************************************************/
.tela-1 {width: 100%; display: table; padding: 80px 0; background-image: url(../images/bg-home.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.tela-1 h1 {padding-top: 40px;}
/*********************************************************/
.clientes {width: 100%; text-align: center; padding: 60px 0;}
.clientes .quadro {width: 90%; height: 140px; margin: auto; background-repeat: no-repeat; background-size: 100%;}
/*********************************************************/
.tela-2 {width: 100%;}
.tela-2 h1 {font-size: 2em;}
.tela-2 h2 {text-transform: uppercase; font-size: 1.2em; font-weight: 400;}
.tela-2 p {color: #fff;}
.tela-2 .esquerda-full {background-color: var(--vermelho); color: #fff; text-align: center; min-height: 650px;}
.tela-2 .direita-full {min-height: 650px; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.tela-2 .quadro {width: 100%; padding: 80px 80px 20px 80px;}

.tela-2 .serv {width: 95%; margin: auto; background-color: #333; color: #fff; text-align: center; min-height: 200px; padding: 30px; border-radius: 5px;}
.tela-2 .serv:hover {background-color: #000;}
.tela-2 i {font-size: 6em;}
.tela-2 a:hover {text-decoration: none !important;}
/*********************************************************/
.tela-3 {width: 100%; text-align: center; padding: 60px 0;}
.tela-3 h1 {text-align: right;}
.tela-3 h2 {font-size: 1.2em; color: #333; font-weight: 400; text-transform: uppercase; padding-bottom: 15px;}
.tela-3 h2:hover { color: var(--vermelho);}
.tela-3 a:hover {text-decoration: none !important;}

.tela-3 .quadro {width: 95%; margin: auto;}
.tela-3 .imagem {width: 100%; height: 240px; background-repeat: no-repeat; background-size: 100%; border-radius: 5px; background-position: center center; margin-bottom: 20px; -webkit-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in;}
.tela-3 .imagem:hover {background-size: 120%;}
/*********************************************************/
.navegacao {display: table; padding: 20px 0; width: 100%;}
.navegacao ul {float: right;}
.navegacao li {float: left; padding: 0 5px;}
/*********************************************************/
.interna {width: 100%; display: table; padding: 60px 0; min-height: 450px;}
.interna h1 {color: var(--vermelho); text-transform: uppercase;  padding-bottom: 40px;}
.interna h2 {color: #25272A; text-transform: uppercase; font-size: 1.4em; font-weight: 500; padding-bottom: 20px;}
/*********************************************************/
.paralaxx {width: 100%; height: 500px; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;}
/*********************************************************/
.sobre .quadro {width: 28%; float: left; margin: 0 2.5%; border-top: 20px solid #f1f1f1; padding-top: 20px;}
.sobre .quadro:hover {border-top: 20px solid var(--vermelho);}
.sobre i {text-align: center; font-size: 3em; width: 100%; padding-bottom: 20px; color: var(--vermelho);}
.sobre h2 {text-align: center;}
.sobre h3 {text-transform: uppercase; font-size: 1.4em; font-weight: 500; padding-bottom: 20px;}

.sobre .barra {background-color: var(--vermelho); color: #fff; width: 55%; margin: auto; padding: 30px; text-align: center; border-radius: 10px;}
.sobre .barra p {color: #fff;}
.sobre .metade {width: 60%; margin: 0 20%;}

.sobre .bases li {width: 40%; float: left; margin: 0 5%;}
.sobre .bases img {border: 5px solid var(--vermelho); border-radius: 10px;}
/*********************************************************/
.cliente .chamada {width: 30%; float: left; padding: 30px; background-color: #f6f6f6;}
.cliente .logos {width: 65%; float: right; text-align: center;}
.cliente .quadro {width: 22%; height: 120px; margin: 0 1% 25px 1%; display: inline-block; background-repeat: no-repeat; background-size: 100%; background-position: center center;}
/*********************************************************/
.news .quadro {width: 30%; float: left; margin: 0 1.5% 30px 1.5%; min-height: 450px;}
.news .imagem {width: 100%; height: 240px; background-repeat: no-repeat; background-size: 100%; border-radius: 5px; background-position: center center; margin-bottom: 20px; -webkit-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in;}
.news .imagem:hover {background-size: 120%;}
.news h2 {text-align: center; font-weight: 400;}
.news h2:hover { color: var(--vermelho);}
/*********************************************************/
.diferencial {padding-bottom: 0;}
.diferencial .barra {background-color: var(--vermelho); color: #fff; width: 55%; margin: auto; padding: 30px; text-align: center; border-radius: 10px;}
.diferencial .fundo {width: 100%; padding: 40px 0; background-color: #f9f9f9; display: table;}
.diferencial .tecnologia {width: 100%; display: table; padding: 80px 0; text-align: center;}
.diferencial .rastreamento li {width: 33%; float: left;}
/*********************************************************/
.servico .chamada {width: 30%; float: left; padding: 30px; background-color: #f6f6f6;}
.servico .servicos  {width: 65%; float: right; text-align: center;}
.servico .serv {width: 28%; float: left; margin: 0 2.5% 20px 2.5%; border-top: 20px solid #f1f1f1; padding-top: 20px;}
.servico .serv:hover {border-top: 20px solid var(--vermelho);}
.servico .serv i {font-size: 3em; width: 100%; padding-bottom: 20px; color: var(--vermelho);}

.servico .barra {background-color: var(--vermelho); color: #fff; width: 100%; display: table; padding: 30px; text-align: center; border-radius: 10px; color: #fff;}
.servico .barra h1 {color: #fff;}
.servico .barra h2 {color: #fff; font-size: 1.2em;}
.servico .barra p {color: #fff;}
.servico .quadro {width: 25%; float: left; padding: 0 20px;}
.servico .centro h1 {text-align: center;}
.servico .foto {width: 20%; height: 140px; float: left; background-repeat: no-repeat; background-size: 100%; background-position: center center;  -webkit-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in;}
.servico .foto:hover {background-size: 120%;}
/*********************************************************/
.contato .input {width: 100%; padding: 20px; border: 1px solid #f1f1f1; background-color: #f9f9f9; font-family: 'Rubik', sans-serif;}
.contato .inputtext {width: 100%; height: 140px; resize: none; padding: 20px; border: 1px solid #f1f1f1; background-color: #f9f9f9; font-family: 'Rubik', sans-serif;}

.contato .dados li {width: 100%; display: table; margin-bottom: 10px;}
.contato .dados i {width: 35px; float: left; padding-top: 5px; color: var(--vermelho);}
.contato .dados p {float: left; color: #888;}