/*********************************************************/
/*	STYLE CSS										 	 */
/*	DESENVOLVIDO POR: GLOBALWS							 */
/*	CEO: MICHAEL PICOLO									 */
/*********************************************************/
html, body {width:100%; height:100%; font-family: 'Roboto Condensed', sans-serif; }
/*********************************************************/
:root {
	--azul: #3C87C8;
	--azul-claro: #7DCFE4;
	--cinza: #444444;
	--laranja: #FF9933;
	--cinza-claro: #F0F0F0;
}

.esquerda {width: 47%; float: left;}
.direita {width: 47%; float: right;}

.bgcover {background-repeat: no-repeat; background-size: cover; background-position: center center;}
.bg100  {background-repeat: no-repeat; background-size: 100%; background-position: center center;}

h1 {font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 2.6em; line-height: 40px;}
p {font-weight: 300; line-height: 30px; color: var(--cinza);}

.fundo {width: 40%; position: absolute; left: 0; top: 0; height: 300px; background-image: url(../images/bg-topo.png); background-position: top;}
.barra {width: 100%; background-color: #E9E9E9; height: 20px; margin-bottom: 20px;}
.img-1 {width: 45%; position: absolute; right: 0; top: 0; height: 900px;}

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

.icon-1 {width: 100px; height: 110px; background-image: url(../images/icon-1.png); margin: 0 auto 40px auto;}

.bg-1 {background-color: #505E7C;}
.bg-2 {background-color: #B6A697;}
.bg-3 {background-color: #E97456;}
/*********************************************************/
/*	TOPO & RODAPE										 */
/*********************************************************/
header {width: 100%; display: table; padding: 15px 0; position: relative; z-index: 99;}
header .inicio {width: 100%; display: table; padding-bottom: 20px;}

header .dados {float: left;}
header .dados li {float: left; color: var(--azul); padding-right: 10px; font-size: 0.9em; font-weight: 300;}
header .dados .link {color: var(--cinza);}

header .logo {width: 220px; height: 60px; float: left;}

header .hd-menu_fixed{position:fixed; top:0; left:0; z-index:9999999; width: 100%; height: 60px; background-color: var(--cinza-claro); padding: 10px 0 55px 0; }

header .social {float: right;}
header .social li {float: left; color: var(--azul); padding-left: 10px; font-size: 0.9em; font-weight: 300;}
header .social i {color: var(--cinza); font-size: 1.3em;}
header .social i:hover {color: var(--azul);}

header .menu {width: 100%; background-color: var(--cinza-claro); display: table; text-align: center; height: 75px; padding-top: 15px;}

footer {width: 100%; display: table; padding-top: 30px; background-color: var(--cinza);}
footer .submenu li {float: left;  text-transform: uppercase; padding-right: 10px; font-weight: 500;}
footer .submenu a {color: #888;}
footer .submenu a:hover {color: var(--laranja);}

footer .subdados li {float: left; padding-right: 25px; color: #888;}

footer .social {float: right; width: 35%; text-align: center;}
footer .social p {color: #888; text-transform: uppercase; font-size: 0.9em; font-weight: 700;}
footer .social li {display: inline-block; color: #888; font-size: 1.4em; padding: 5px 10px;}
footer .social li:hover {color: var(--laranja);}

footer .fim {width: 100%; text-align: center; background-color: #2E2E2E; padding: 15px 0;}
footer .fim p {color: #888; font-size: 0.9em; font-weight: 300;}
footer .fim a {color: #888;}
footer .fim a:hover {color: var(--laranja);}

.instagram iframe {width: 100%; height: 200px;}
/*********************************************************/
.tela-1 {width: 100%; display: table; padding: 40px 0; position: relative;}
.tela-1 h1 {color: var(--laranja); padding: 20px 0 40px 0;}
/*********************************************************/
.tela-2 {width: 100%; padding: 80px 0; display: block;}
.tela-2 h1 {color: var(--laranja); padding-bottom: 40px;}
.tela-2 h2 {text-align: center; color: var(--laranja); font-family: 'Kanit', sans-serif; padding-bottom: 10px; font-size: 1.2em; font-weight: 500;}
.tela-2 h2:hover {color: var(--cinza);}
.tela-2 a:hover {text-decoration: none !important;}
.tela-2 .quadro {width: 80%; margin: auto;}
.tela-2 .imagem {width: 90%; height: 240px; background-position: center center; background-size: 80%; margin: auto;}
/*********************************************************/
.tela-3 {width: 100%; display: block; padding: 30px 0;}
.tela-3 h2 {color: var(--laranja); padding: 10px;}
.tela-3 p {font-style: italic; line-height: 25px;}

.tela-3 .quadro {width: 65%; margin: auto; text-align: center;}
/*********************************************************/
.tela-4 {width: 100%; display: table; padding: 40px 0;}
.tela-4 h1 {color: var(--laranja); padding-bottom: 40px;}
.tela-4 h2 {color: var(--laranja); font-size: 1.2em; padding-bottom: 5px;}
.tela-4 h2:hover {color: var(--azul); text-decoration: none !important;}

.tela-4 .quadro {width: 46%; float: left; margin: 0 2% 2% 2%; min-height: 450px;}
.tela-4 .imagem {width: 100%; height: 350px;}
.tela-4 .texto {width: 100%; background-color: #fff; padding: 15px; min-height: 180px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
/*********************************************************/
.sobre {width: 100%; display: table; padding: 60px 0;}
.sobre h1  {color: var(--laranja); padding-bottom: 40px;}
.sobre h3 {color: var(--cinza); text-transform: uppercase; padding-bottom: 10px; color: #fff;}
.sobre .direita {padding-top: 80px;}
.sobre .foto {width: 32%; float: left; margin: 0.5%; height: 140px; border-left: 5px solid var(--laranja); border-bottom: 5px solid var(--laranja);}

.sobre .quadrinho {width: 30%; padding: 15px; float: left; min-height: 240px; margin: 0 1.5% 30px 1.5%; box-shadow: 1px 1px 2.7px rgba(0, 0, 0, 0.022),	2.5px 2.5px 6.9px rgba(0, 0, 0, 0.031), 5.1px 5.1px 14.2px rgba(0, 0, 0, 0.039),	10.6px 10.6px 29.2px rgba(0, 0, 0, 0.048),	29px 29px 80px rgba(0, 0, 0, 0.07) ;}
.sobre .quadrinho i {color: var(--azul); float: left; width: 12%; font-size: 1.4em;}
.sobre .centro {float: right; width: 88%;}
.sobre .centro p {color: #fff;}
/*********************************************************/
.servicos {width: 100%; display: table; padding: 60px 0;}
.servicos  h1 {color: var(--laranja); padding-bottom: 40px;}
.servicos h2 {text-align: center; color: var(--azul); font-family: 'Kanit', sans-serif; padding-bottom: 10px; font-size: 1.2em; font-weight: 500;}
.servicos .quadro {width: 30%; margin: 0 1.5% 40px 1.5%; float: left; min-height: 450px;}
.servicos .imagem {width: 80%; height: 220px; background-position: center center; background-size: 80%; margin: auto;}
/*********************************************************/
.parceiros {width: 100%; display: table; padding: 60px 0;}
.parceiros  h1 {color: var(--laranja); padding-bottom: 40px; text-align: center;}
.parceiros .centro {width: 60%; margin: auto;}
.parceiros .partner {width: 18%; height: 120px; padding: 5px; margin: 1%; float: left;}
/*********************************************************/
.contato {width: 100%; display: table; padding: 60px 0;}
.contato  h1 {color: var(--laranja); padding-bottom: 40px;}

.contato .lateral {width: 30%; float: left;}
.contato .formulario {width: 60%; float: right; background-color: #fff; padding: 30px; border-radius: 10px;}

.contato li {width: 90%; background-color: #fff; padding: 20px; margin-bottom: 40px; color: var(--cinza); line-height: 30px; border-radius: 10px; }
.contato li i {color: var(--azul-claro); font-size: 1.6em; width: 15%; float: left; padding-top: 20px;}

.contato .input {width: 100%; padding: 15px; border: 1px solid #ccc; font-family: 'Roboto Condensed', sans-serif;}
.contato .inputtext {width: 100%; height: 120px; padding: 15px; border: 1px solid #ccc; font-family: 'Roboto Condensed', sans-serif; resize: none;}
/*********************************************************/
.post {width: 100%; display: table; padding: 60px 0;}
.post  h1 {color: var(--laranja); padding-bottom: 40px; text-align: center;}
.post .capa {width: 50%; margin: auto;}
.post .lateral {width: 20%; float: left; margin: 0 30px 30px 0;}