/*=============== 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 =================*/
.container {width: 100%; float: left; text-align: center; padding: 3% 4%;}
/*=============== HELPERS =================*/
.radius {border-radius: 7px;}
/*=============== BG COLORS =================*/
.bg-gradient {background: linear-gradient(to right, #ce2e3c, #da6709);}
.bg-black {background-color: #130400;}
.bg-white {background-color: #fff;}
/*=============== CABEÇALHO =================*/
.logo {width: 56px; height: 56px; float: left; background: url(../img/logo-mobile.png) center center/56px 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: #fff; padding: 1.5% 3%;}
.menu li a:hover {border: 1px solid #da6709;}
/*=============== BANNER =================*/
.banner {background: url(../img/bg.jpg) no-repeat fixed;}
.title {width: 100%;}
.title h2 {font-size: 2.5em; color: #fff; font-weight: 700;}
.title h3 {font-size: 1.5em; color: #fff;}
.buttons {width: 100%; margin-top: 2%;}
.buttons i {float: right;}
.btn {width: 100%; font-size: 1.5em; text-align: left; cursor: pointer; padding: 5%;}
.btn-cadastrar {color: #130400;}
.btn-sobre {color: #fff; margin-top: 2%;}
/*=============== SERVICOS =================*/
.servico {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;}
/*=============== NEWSLETTER =================*/
.newsletter h2 {font-size: 1.5em; color: #fff; font-weight: 700;}
.newsletter h3 {color: #fff; }
.newsletter form {margin-top: 2%; }
.newsletter input {width: 100%; color: #fff; border: 1px solid rgba(255,255,255,0.3);}
.newsletter button {width: 100%; color: #130400; padding: 5%; }
/*=============== RODAPE =================*/
.social-icons a {font-size: 1.5em; color: rgba(255,255,255,0.7);}
.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%;}
/* ============ MOBILE FIRTS ============= */
/* ============ SMALL DEVICES - SMARTPHONES ============ */

@media screen and (min-width: 480px) {
.logo {width: 214px; background: url(../img/logo-acae.png) center center/214px no-repeat ; font-size: 0;}
.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;}
.button {width: 30%; float: right; margin-top: 0;}
.servico {width: 32%;}
.servico:nth-child(2) { margin-right: 2%;}
.servico:nth-child(3) { margin-right: 0;}
.buttons {width: 30%; float: right; margin-top: 0;}
.newsletter input {width: 60% float: none;}
.newsletter button {width: 20% float: none;}
}

/* == MEDIUM DEVICES - TABLETS  & DESKTOPS == */

@media screen and (min-width: 1280px) {
.title {width: 70%; float: left; text-align: left;}	
.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: #130400; font-size: 13m; padding: 15px; }
.menu li a:hover {border: none; color: #da6709; }
}