/* CORES
Cor principal         #3E4095
Cor principal hover   #26265a
Cor 2                 #ED3237  
*/

/* GERAL */
body, html { margin: 0; padding: 0; font-family: 'Archivo Narrow', sans-serif; font-size: 16px; color: #444;}
[onClick] { cursor: pointer;}
* { box-sizing: border-box; font-family: inherit; color: inherit;}
h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', sans-serif; font-weight: 400;}
a { text-decoration: none; display: inline-block;}

input, textarea, button { outline: none; border: none; resize: none;}
input, textarea { padding: 15px 20px; min-width: 0;}
label { display: block;}

a.botao, button { font-size: 15px; font-weight: bold; padding: 7px 15px; background: #3E4095; color: #fff; cursor: pointer;}
a.botao:hover, button:hover { background: #26265a; color: #fff;}

.titulo { color: #ED3237; text-transform: uppercase;}

/* TRANSITION */
a.botao, button, #menu li a, #links_uteis .links a, a.links, .redes_sociais li a, .conteudo a { transition: all 350ms;}

/* LARGURA DEFINIDA CORPO SITE */
.largura_site { max-width: 1200px; width: 90%; margin: 0 auto; position: relative; z-index: 2;}

/* FLEX */
.flex { display: flex; }
.between { justify-content: space-between;}
.around { justify-content: space-around;}
.centerv { align-items: center;}
.centerh { justify-content: center;}
.wrap { flex-wrap: wrap;}

/* TOPO */
#topo { position: relative; width: 100%; min-height: 500px; padding: 30px 0;}
#topo .topo { align-self: flex-start; position: relative; z-index: 998; background: #3E4095; padding: 5px 10px;}
#topo #logo img { display: block; width: 98%; height: auto; max-width: 140px;}

/* BANNER */
#banner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
#banner .fotos { background-size: cover; background-position: center; width: 100%; height: 100%;}

/* SLOGAN */
#slogan { position: relative; z-index: 997;}
#slogan .frases { width: 100%;}
#slogan .frases .titulo { background: rgba(62, 64, 149, .7); padding: 20px; color: white; display: inline-block;}
#slogan .frases .titulo small { display: block; font-weight: 300;}

/* MENU */
#menu { margin: 0; padding: 10px 5px; list-style: none; z-index: 999;}
#menu li a { font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 19px; display: block; padding: 25px 15px; margin-left: 3px; color: #d7d7d7; border-top: 3px solid transparent;}
#menu li a:hover { border-top: 3px solid #ED3237; color: #fff;}
/* Menu responsivo */
.responsivo { display: none; margin-left: 5px;}
#responsivo_fundo { display: none; position: fixed; z-index: 10; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.7);}

/* BEM VINDO */
#bem_vindo { padding: 30px 0 10px;}
#bem_vindo .titulo { margin: 0;}
#bem_vindo .gbrasil img { display: block; margin: 10px 30px;}

/* HOME */
#home { margin: 20px auto; padding: 20px 0; border-top: 1px dotted #ccc;}
#home .blocos { flex: 1; margin: 20px 0; padding: 10px;}
#home .blocos .foto { display: block; margin: 0 auto; max-width: 600px; border-radius: 5px; box-shadow: 0 6px 6px -2px rgba(0, 0, 0, .3);}

/* LINKS HOME */
#links_uteis { padding: 30px 0 40px; background: #f1f1f1;}
#links_uteis .blocos { flex: 1; padding: 10px;}
#links_uteis .numero { font-size: 50px; color: #ED3237; margin: 0;}
#links_uteis h2 { margin: 0; border-bottom: 1px solid #ccc;}
#links_uteis p { margin: 0; font-weight: 300;}
#links_uteis .botao { min-width: 100%; text-align: center;}
#links_uteis .links { margin: 15px 0; padding: 0; list-style: none;}
#links_uteis .links a:before { content: "→"; display: inline; margin-right: 5px;}
#links_uteis .links a { padding: 2px 5px; display: block;}
#links_uteis .links a:hover { background: #e5e5e5; color: #ED3237;}

/* UTILITARIOS */
#utilitarios { padding: 30px 0;}
#utilitarios .blocos { flex: 0 1 275px; margin: 5px 0;}
#utilitarios .icones { align-self: flex-start; padding: 10px; margin: 10px; color: #3E4095; border-radius: 10px; box-shadow: 0 3px 6px -3px rgba(0, 0, 0, .8); background: linear-gradient(to bottom, #fafafa, #e6e6e6);}
#utilitarios .titulo_icones { color: #ED3237; margin: 0;}
#utilitarios .titulo_icones small { display: block; color: #555; font-weight: 300;}
#utilitarios .selo { display: block; margin: 20px;}

/* RODAPE */
#rodape { background: #3E4095; color: #d7d7d7; padding: 10px 0;}
#rodape .redes_sociais { margin: 0; padding: 0; list-style: none;}
#rodape .redes_sociais li { margin: 5px; background: #222; color: #d7d7d7;}
#rodape .redes_sociais li a { display: block; padding: 10px 8px;}
#rodape .redes_sociais li a:hover { color: #fff; transform: scale(1.1, 1.1);}
#rodape .redes_sociais li a.facebook:hover { background: #3a8ac7;}
#rodape .redes_sociais li a.twitter:hover { background: #00abf0;}
#rodape .redes_sociais li a.linkedin:hover { background: #1580ae;}

/* CONTEUDO */
.conteudo { padding: 50px 0 60px;}
.conteudo a:hover, a.links:hover { color: #ED3237;}

/* SITES UTEIS */
#sites_uteis ul { flex: 1 220px; margin: 0 0 0 10px; padding: 0;}

@media screen and (max-width:1000px){
    #links_uteis .blocos { flex: 1 45%;}   
}
@media screen and (max-width:800px){    
    /* Menu responsivo */
    .responsivo { display: block;}
    #menu { flex-direction: column; position: fixed; top: 0; right: -100%; width: 40%; max-width: 400px; min-width: 300px; height: 100%; background: #3E4095; border-left: 4px solid #26265a; overflow-y: auto;}
    #menu li a { margin: 5px 0; padding: 5px 0; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, .1);}
    #menu li a:hover { background: #26265a;}
    #responsivo_fecha { float: right; margin-bottom: 30px;}  
    
    #home .blocos { flex: 1 100%; max-width: 500px;}
}

@media screen and (max-width:600px){
    #links_uteis .blocos { flex: 1 100%;}
}

@media screen and (max-width:500px){
    #responsivo_abre span { display: none;}
    #utilitarios { flex-wrap: wrap;}
    #utilitarios .col { flex: 1 100%;}
}