@charset "utf-8";
/* CSS Document */
/*========== RESET ==========*/
*{margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box; font-family: 'Lato', sans-serif; scroll-behavior: smooth;}
body{background-color: #F5F5F5;}
a{text-decoration: none;}
ul{list-style: none;}
img{max-width: 100%;}
h2{font-size: 1.5em; font-weight: 700; color: #FFF;}
h3{color: #FFF; font-weight: bolder;}
p{margin-top: 2%; color: #FFF; font-weight: bolder;}
/* Faixa-Top */
.faixa{witdh: 100%; height: 33px; padding: 0% 5% 0% 5%; background-color:#cecece;}
.faixa a{color: #ffffff; font-size: 11pt;font-weight: bold; background-color: #55BC31; float: right; margin-top: 2px; padding: 4px 2% 4px 2%; transition: background-color 1s;}
.faixa a:hover{background-color: #217700;}
header {border-bottom: 2px #cecece solid; background-color: #F5F5F5;}
/*========== CONTAINNER ==========*/
.containner {width: 100%; float: left; padding: 2% 4% 2% 4%; text-align: center;}
/*========== BG COLORS ==========*/
.bg-gradient{background: linear-gradient(to right,#66cc66,#99cc33);}
.bg-cor{background-color: #FFF;}
/*========== HELPERS ==========*/
.radius{border-radius: 7px;}
/* CABECALHO */
.logo{width: 250px; height: 61px; float: left; background: url("../img/logo-mobile.png") no-repeat; font-size: 0;}
.btn-menu{width: 56px; height: 56px; float: right; text-align: center; color: #FFF; border-radius: 56px; 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: #66cc66; font-weight: bold; padding: 1.5% 3%;}
.menu li a:hover{border: 1px solid #66cc66;}
/*Slider*/
.title{width: 100%; position: absolute; padding: 5%}
.title h2{font-size: 2.5em;}
.title h3{font-size: 1.5em; color: #FFF;}
.slides {position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0;}
.slides li {-webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0;}
.slides li:first-child {position: relative; display: block; float: left;}
.slides img {display: block; height: auto; float: left; width: 100%; border: 0;}
.containner.slides {z-index: -1;}
/* Quem Somos*/
.sobre p {text-align: justify; padding: 0px 10px 25px 10px; color: #555555; font-weight: bolder; font-size: 1.2em;}
.sobre h2 {padding-top: 1%; color: #555555;}
/* SERVIÇOS */
.servicos h2 {margin: -1.8% 0 0.5% 0; color: #555555; padding-bottom: 1.5%;}
.artigo {width: 100%; text-align: left; margin-bottom: 3%;}
.artigo img{border-radius: 7px 7px 0 0;}
.inner{padding: 7px;}
.inner a{font-size: 1.5em; color: #555555; font-weight: 700;}
.inner h3{font-size: 1.2em; color: #555555; margin-top: 2%;}
.inner p{color: #555555; line-height: 1.5em;}
/* PLANOS 
.planos {padding: 0; margin-top: -1.5%; margin-bottom: -1%;} */
/* ÁREA DE COBERTURA */
.area {background: url("../img/area.jpg") no-repeat;
-webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;}
/* RODAPÉ */
.rodape{background-color: #3A3A3A;}
.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 {margint-top: 2%; color: rgba(255,255,255,0.7);}
/* ========== 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){
	.artigo{width: 49%; float: left; margin-right: 2%;}
	.artigo:nth-child(3){margin-right: 0;}
	h2{font-size: 2em;}
	.area h3{font-size: 1.5em;}
}
/* MEDIUN DEVICES - TABLETS E DESKTOPS */
@media screen and (min-width: 960px){
	.title{width: 70%; float: left; text-align: left;}
	.title h2{font-size: 3em;}
	.title h3{font-size: 2em;}
	.buttons{width: 30%; float: right; margin-top: 0;}
	.artigo{width: 32%;}
	.artigo:nth-child(3){margin-right: 2%;}
	.artigo:nth-child(4){margin-right: 0;}
}
/* LARGE DEVICES - WIDE SCREEN */
@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;}
	.menu li{padding: 0; float: left;}
	.menu li a{color: #878787; font-size: 1em; padding: 15px; transition: background-color 1s}
	.menu li a:hover{border: none; color: #ffffff; background-color: #cecece;}
}