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

/*=========== CONTAINER ==========*/
.container {width: 100%; float: left; padding: 2% 9% 2% 9%; text-align: center;}

/*=========== BG COLORS ==========*/
.bg-menu-bol {background-color: #f5f5f5; }
.bg-gradient {background: linear-gradient(to right,#F79320, #F79320);}
.bg-black {background-color: #130400; }
.bg-white {background-color: #fff;}
.bg-green {background-color: #6BA810;}
.bg-blue {background-color: #3C61AD;}

/*=========== HELPERS ==========*/
.radius {border-radius: 7px;}

/* CABEÇALHO */
.logo {	width: 60px;	height: 60px;	float: left;	font-size: 0;}
.btn-menu {width: 60px; height: 60px; float: right; text-align: center; color: #000; border-radius:60px; 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.2em; color: #fff; float: right; cursor: pointer; margin: 1% 2% 0 0;}
.menu ul {width: 100%; float: left; text-align: center; font-size: 1.0em; color: #666;}


.menu ul {width: 100%; float: left; text-align: center;}
.menu li {padding: 1.5%;}
.menu li a {font-size: 2em; color: #666; padding: 1.5% 3%;}
.menu li a:hover {border:1px solid 0066ff;}

/* BANNER */
.banner {background: url(../img/bg.png) no-repeat fixed; height:auto;}
.title {width: 100%;}
.title h1 {font-size: 2.5em; color: #F79320; text-align: left; alignment-adjust:lefth;}
.title h2 {font-size: 2.0em; color: #F79320; text-align: left; alignment-adjust:lefth;}
.title h3 {font-size: 1.5em; color: #fff; text-align: left; alignment-adjust:lefth;}
.buttons {width: 100%; margin-top: 2%; alignment-adjust:lefth;}
.buttons i {float: right;}
.btn {width: 100%; font-size: 1.5em; text-align: left; cursor: pointer; padding: 5%; }
.btn-cadastrar {color: #fff;}
.btn-sobre {color:#fff ; margin-top: 2%;}

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

/* PARCEIROS */
.parceiro {width: 100%;  text-align: left;  margin-bottom: 3%;}
.parceiro img {border-radius: 7px 7px 7px 7px;}
.parceiro {padding: 3% 10% 3% 10%;}
.parceiro h1 {font-size: 2.0em; color: #fff; }
.parceiro h2 {font-size: 1.5em; color: #fff; }
.parceiro h3 {font-size: 1.0em; color: #fff; }

/* CONTEUDO */
.conteudo {width: 100%;  text-align: left;  margin-bottom: 3%;}
.conteudo img {border-radius: 7px 7px 7px 7px;}
.conteudo {padding: 3% 10% 3% 10%;}
.conteudo h1 {font-size: 2.5em; color: #666; margin-top: 2%;}
.conteudo h2 {font-size: 1.5em; color: #666; margin-top: 2%;}
.conteudo h3 {font-size: 1.0em; color: #666; margin-top: 2%;}
.conteudo h4 {font-size: 1.2em; color: #666; margin-top: 2%; }
.conteudo p {margin-top: 3%; color: #666; line-height: 1.5em;}

/* TOP */
.top h1 {	font-size: 2.0em;	color: #fff; text-align:center; margin-top: 2%;}
.top h2 {	font-size: 1.5em;	color: #fff; text-align:center; margin-top: 2%;}
.top h3 {	font-size: 1.5em;	color: #fff;margin-top: 2%;}
.top p {	font-size: 1.0em;	color: #fff; line-height:0,5em;}
.top form {margin-top: 2%;}
.top input {width: 100%;  color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 5%; }
.top button {width: 100%;  color:#130400; padding: 5%; cursor: pointer; margin-top: 2%; }

/* CONTATO */
.contato {width: 100%;  text-align: left;  margin-bottom: 3%;}
.contato {padding: 3% 10% 3% 10%;}
.contato h1 {font-size: 2.5em; color: #00;  margin-top: 2%;}
.contato h2 {font-size: 1.5em; color: #00; }
.contato p {margin-top: 3%; color: #130400; line-height: 0.5em;}
.contato h3 {color: #000;}

/* MAPA */
.mapa { height:auto;}


/* NEWSLETTER */
.newsletter h1 {font-size: 2.5em; color: #fff;  margin-top: 2%;}
.newsletter h2 {font-size: 1.5em; color: #fff; }
.newsletter h3 {color: #fff;}
.newsletter form {margin-top: 2%;}
.newsletter input {width: 100%;  color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 5%; }
.newsletter button {width: 100%;  color:#130400; padding: 5%; cursor: pointer; margin-top: 2%; }

/* RODAPÉ */
.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 {color: rgba(255, 255, 255, 0.7); margin-top:2%;}
.rodape a {font-size: 1em; color: #fff; }
.rodape a:hover {border:1px solid #fff;}


/* ========== 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) {
.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 & 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: 35%;	float: left;	margin-top: 0;}
.servico {width: 32%; }
.servico:nth-child(2){margin-right: 2%;}
.servico:nth-child(3){margin-right: 0;}
.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: 60px;
	line-height: 56px;
	float: right;
	background-color: #f5f5f5;
	display: block !important;
	position: static;
}
.menu li {padding: 0; float: left;}
.menu li a {color:#130400; font-size: 1em; padding: 15px; }
.menu li a:hover {border: none; color:#0066ff; }

/* BANNER */
.banner {background: url(../img/bg.png) no-repeat fixed; height:auto;}
}