/*=========== 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%;}
/*=========== CONTAINER ==========*/

/*=========== BG COLORS ==========*/

/*=========== HELPERS ==========*/

/* CABEÇALHO */
.cabecalho {width: 100%; float: left; text-align: center;}
.top { font-size: 	0.8em; width: 100%; background-color: rgb(38,38,38); height: 70px; display: flex; flex-direction: column; align-items: flex-start;justify-content: space-between; padding-top:1%; padding-bottom: 2%; }
.contato_top{width: 100%; text-align: right;	}
.entrada {width: 50%;}
.txt_top2 {  color: rgba(255,255,255,0.5); text-align: left; padding-left: 5%; }
.txt_top2 i {margin-right: 3%;}
.txt_top1 {color: #a9a9a9; text-align: left;padding-left: 9%;}

.logo {width: 114px; height: 100px; float: left; background: url(../img/logo-mobile.png) center center/114px no-repeat;
font-size: 0; padding: 3%; margin-left: 9%;}

.btn-menu {padding-top: 7%; padding-right: 9%; width: 56px; height: 56px; float: right; text-align: center; color: #696969; background-color: #f5f5f5; cursor: pointer;}

/* 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 #da6709;}
/* BANNER */
.banner { display:flex;flex-direction: row;text-align: center;justify-content:flex-start;   padding: 10%; width: 100%; height: 100%; background: url(../img/banner_servico.png);  float: left;  background-size: cover; background-position: 25% 75%;  background-repeat: no-repeat;}
.img_servico {width: 20%; margin-right: 2%;}
.title {width: 100%;}
.title h2 {text-align: left; font-size: 2.5em; color: #fff; font-weight: 700; }
.title h3 {font-size: 1.5em; color: #fff;}

/* ATUACAO */
.servicos {width: 100%; height: auto;  float: left;  padding:2%;}
.tit_servicos h2 {font-size: 2em; font-weight: 700; color: #030e10; padding: 5%;}
.seta	{width: 45px; height: 6px; border-radius: 15px; background-color: grey; float: left; margin-left: 5%;}
.conteudo { width: 100%; padding: 5%; line-height: 2em; }
.conteudo li i {margin-right: 2%; }
/* SERVIÇOS */
/*.servicos {width: 100%; float: left; padding: 3% 4%; text-align: center;}

.servico {border-radius: 7px; background-color: #fff; width: 100%;  text-align: left;  margin-bottom: 3%;}
.servico img {border-radius: 7px 7px 0 0;}
.inner {padding: 7%;}
.inner a {font-size: 1.5em; color: #130400; font-weight: 700; }
.inner h4 {font-size: 1.2em; color: #130400; margin-top: 2%; }
.inner p {margin-top: 6%; color: #130400; line-height: 1.5em;} */

/* RODAPÉ */
.rodape {background: rgb(38,38,38); width: 100%; float: left; padding: 3% 4%; text-align: center;}

.social-icons a {font-size: 1.2em; 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 {color: rgba(255, 255, 255, 0.7); margin-top:2%; font-size: 0.9em;}
/* ========== MOBILE FIRST ==========*/
/* SMALL DEVICES - SMARTPHONES */
@media screen and (min-width: 480px) {
.logo {width: 214px; background: url(../img/logo.png) center center/214px no-repeat;}
.btn {font-size: 2em;}

}
/* SMALL DEVICES - TABLETS*/
@media screen and (min-width: 768px) {

.top { font-size: 1em;	 width: 100%; background-color: rgb(38,38,38); height: 70px; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;	 padding-top:1%; padding-bottom: 2.5%; }
.txt_top2 {width: 100%; color: #a9a9a9; text-align: right; padding-right: 10%; }
.txt_top2 i {margin-right: 1%;}
.txt_top1 {color: #a9a9a9; text-align: left;padding-left: 15%;}

/*.servico {width: 49%; float: left; margin-right: 2%;}
.servico:nth-child(2){margin-right: 0;}*/

}
/* MEDIUM DEVICES - TABLETS & DESKTOPS*/
@media screen and (min-width: 960px) {
.title {width: 100%; float: left; text-align: left;}
.title h2 {font-size: 4em;}
.title h3 {font-size: 2em;}
.buttons {width: 30%; float: right; margin-top: 0; }
/*.servico {width: 32%; }
.servico:nth-child(2){margin-right: 2%;}
.servico:nth-child(3){margin-right: 0;}/*

/* 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 !important; position: static; padding-top: 2%;padding-right: 9%;  }
.menu li {padding: 0; float: left;}
.menu li a {color:#130400; font-size: 0.9em; padding: 15px; font-weight: 400;}
.menu li a:hover {border: none; color:#a9a9a9; font-weight: 400;}
.banner { display:flex;flex-direction: row;text-align: center;justify-content:flex-start;   padding: 5%; width: 100%; height: 100%; background: url(../img/banner_servico.png);  float: left;  background-size: cover; background-position: 25% 75%;  background-repeat: no-repeat;}
.img_servico {width: 10%; margin-right: 2%;}
.title {width: 100%;}

.servicos {width: 100%; height: auto;  float: left; display: flex; flex-direction: row; text-align: center; justify-content: center;}
.tit_servicos {width:80%; }
.tit_servicos h2 { font-size: 2em; padding:5%; font-weight: 700; color: #030e10; text-align: left;}
.seta	{width: 45px; height: 6px; border-radius: 15px; background-color: grey; float: left; margin-left: 5%; margin-top:-2%;}
.conteudo { line-height: 2em; text-align: left;}
}