/*========= 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: #cecece;}

 a {text-decoration: none;}
 
 ul {list-style: none;}

 img {max-width: 100%;}
 /* ========== CONTAINER ========= */
 .container {width: 100%; float: left; padding: 3% 4%; text-align: center;}

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

 /*.bg-gradient {background: linear-gradient(to right, #ce2e3c,#da6709);}*/
 .bg-gradient {background: linear-gradient(to right,  #2980B9,#6DD5FA);}
 .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/logoP.png) center center/56px no-repeat;
 	font-size: 0;}

.btn-menu {width: 56px; height: 56px; float: right; text-align: center; color: #130400;
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/bg1.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;}

.logado {
    width: 450px;
    color: #fff;
    float: right;
    box-sizing: border-box;
    padding: 15px 10px;
}
.logado p{
    margin: 0;
    padding: 0;
    font-size: 2.5em;
    font-weight: bolder;
}



/* SERVICOS */
.noticia {width: 100%; text-align: left; margin-bottom: 3%;}
.noticia img {border-radius: 7px 7px 0 0; border}
.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); padding: 5%;}
.newsletter button {width: 100%; color: #130400; padding: 5%; cursor: pointer; margin-top: 2%;}

/* RODAPE */
.copyright {color: white; margin-top: 2%;}

/* MEDIA TYPES 
screen 
Para monitores ou dispositivos com telas coloridas e resolução adequada.
print
Para impressoras. Muito usado para dar uma versão de impressão do site. 
*/

/* ========== MOBILE FIRST ========= */

/* SMALL DEVICES - SMARTPHONES */
@media  screen and (min-width: 480px) {
.logo {width: 302px; height: 189px; background: url(../imagens/logoG.png) center center/302px no-repeat;}
.btn {font-size: 2em;}
}

/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px){
.noticia {width: 49%; float: left; margin-right: 2%}
.noticia:nth-child(2) {margin-right: 0;}
.noticia:nth-child(4) {margin-right: 0;}
.noticia:nth-child(6) {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;}
.noticia {width: 32%;}
.noticia:nth-child(2) {margin-right: 2%;}
.noticia:nth-child(3) {margin-right: 0;}
.noticia:nth-child(4) {margin-right: 2%;}
.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: linear-gradient(to right,  #2980B9,#6DD5FA);; 
display: block !important; position: static; border-radius: 7px;}
.menu li {padding: 0; float: left;}
.menu li a {color: white; font-size: 2em; padding: 15px;}
.menu li a:hover {border: none; color: black;}
}