/*========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======*/
.containner{width: 100%; float: left; padding: 3% 4%; text-align: center;}

/*====BG colors======*/
.bg-gradiente{background: linear-gradient(to right, #ce2e3c, #da6709);}
.bg-black{background-color: #130400;}
.bg-white{background-color: #fff;}

/*====Helpers======*/

.radius{border-radius: 7px;}

/*cabecalho*/
.logo{width: 56px; height: 56px; float: left; background: url(../imagens/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(../imagens/bg.jpg) no-repeat fixed;}
.title{width: 100%;}
.banner h2{font-size: 2.5em; color: #fff; font-weight: 700;}
.banner 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%; border-radius: 7px; }
.btn-cadastrar{color: #130400;}
.btn-sobre{color: #fff; margin-top: 2%;}

/*SERVIÇOS*/
.servico{width: 100%; text-align: left; margin-bottom: 3%;}
.servico img{border-radius: 7px 7px 0 0;}
.inner{padding: 7px;}
.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); 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%;}

 
/* ========== MOBILE FIRST ==========*/
/* SMALL DEVICES - SMARTPHONES */
@media screen and (min-width: 480px) {
    .logo {width: 214px; background: url(../imagens/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: 30%; float: right; 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: 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: 1em; padding: 15px; }
    .menu li a:hover {border: none; color:#da6709; }
    }