/* CORES */
/*
marrom #BDA965
roxo #3E5481
roxo escuro #343A49
*/

/* GERAL */
body, html { margin: 0; padding: 0; font-family: 'Gentium Basic', serif; color: #777;}
[onClick] {cursor: pointer;}
* { box-sizing: border-box; font-family: inherit; color: inherit;}
h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', sans-serif; font-weight: 600; }
a { text-decoration: none; display: inline-block;}

button, .links_importantes li, .links_importantes li a { transition: all 350ms;}

input, textarea, button { font-family: "Fira Sans", sans-serif; outline: none; border: none; resize: none;}
input, textarea { width: 100%; border: 1px solid #e3e3e3; padding: 10px; margin-bottom: 3px;}

button { background: transparent; padding: 15px; border: 3px solid #3E5481; background: #3E5481; color: white; margin-top: 10px; font-family: "Fira Sans", sans-serif; text-transform: uppercase; cursor: pointer;}
button:hover { background: transparent; color: #3E5481 }

/* LARGURA DEFINIDA CORPO SITE */
.largura_site { max-width: 1200px; width: 94%; margin: 0 auto;}

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

/* INICIAL */
#inicial { width: 100%; height: 115%; min-height: 700px; background: url(imagens/banner01.jpg); background-size: cover; background-position: center;}

/* TOPO */
#topo #logo img { width: 100%; height: auto; max-width: 330px; display: block; margin: 5px auto;}
#topo #endereco { font-size: 15px; color: lightgray;}
#topo #endereco > div { padding: 5px;}
#topo #endereco p { margin: 0 auto;}
#topo #endereco i { margin: 10px 5px; color: #BDA965;}

/* MENU */
#menu { margin: 0 auto; padding: 0; list-style: none; background: #3E5481;}
#menu li { flex-grow: 1;}
#menu li:content { flex-grow: 1;}
#menu li a { font-family: "Fira Sans", sans-serif; font-weight: 500; display: block; padding: 20px 0; margin: 5px; text-transform: uppercase; text-align: center; color: transparent; position: relative; overflow: hidden;}
#menu li a:before { content: attr(data-menu); display: block; color: lightgray; position: absolute; top: 0; left: 0; width: 100%; padding: 20px 0; transition: all 400ms; }
#menu li a:after { content: attr(data-menu); display: block; /* transform: scale(1.1,1.1); */ color: white; position: absolute; top: 100%; left: 0; width: 100%; padding: 20px 0; transition: all 400ms; }
#menu li a:hover:before { top: -100%; opacity: 0;}
#menu li a:hover:after { top: 0%;}

/* Menu Responsivo */
#menu_responsivo { font-family: "Fira Sans", sans-serif; font-weight: 500; background: #3E5481; color: lightgray;}
#menu_responsivo #control-nav, #menu_responsivo .control-nav, #menu_responsivo .control-nav-close { display: none;}

/* SLOGAN */
#slogan { margin-top: 10%; width: 60%; text-align: center; color: white; font-size: 22px;}
#slogan h1 { width: 100%;}
#slogan small { display: block; font-weight: 300; font-size: 65%;}

/* UTILITARIOS */
#utilitarios { transform: translate(0,-50%); margin-bottom: -150px;}
#utilitarios .utilitarios { padding: 20px; background: #343A49;}
#utilitarios .blocos { flex: 1; padding: 50px 20px; color: white; text-align: center;}
#utilitarios .blocos:not(:last-child) { border-right: 1px solid rgba( 255, 255, 255, .1);}
#utilitarios .blocos:hover { }
#utilitarios .blocos i { color: #BDA965;}
#utilitarios .blocos p { margin: 0; color: lightgray;}

/* CONTEUDO */
.titulo { font-size: 30px;}
.titulo small { display: block; font-weight: 300;}

.textos { padding: 60px 0; justify-content: space-between;}
.textos .blocos { width: 48%;}

/* equipe */
.equipe-lista { padding: 30px;}
.equipe-lista:nth-child(even) { background: whitesmoke;}
.equipe-lista hr { border: none; border-top: 1px solid #ccc;}

/* CORPO JURIDICO */
#corpo_juridico { background: #F6F6EB;}
#corpo_juridico .titulo { text-align: center;}
#corpo_juridico .equipe { align-self: flex-start; margin: 60px 20px 20px; background: #E5E5D5; border: 1px solid lightgray;}
#corpo_juridico .equipe img { max-width: 290px; transform: translate(0,-60px); margin: 0 auto -60px; display: block; padding: 0 20px;}
/* #corpo_juridico .equipe img { max-width: 290px; display: block;} */
#corpo_juridico .equipe .descricao { background: white; padding: 20px 10px; text-align: center;}
#corpo_juridico .equipe .descricao * { margin: 0; }

/* LINKS E NOTICIAS */
#links_importantes { width: 30%; margin-right: 40px;}
#links_importantes .links_importantes { margin: 0; padding: 0; list-style: none; }
#links_importantes .links_importantes li { border-top: 1px solid #E5E5D5;}
#links_importantes .links_importantes li:last-child { border-bottom: 1px solid #E5E5D5;}
#links_importantes .links_importantes li a { display: block; padding: 8px 0; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 115%;}
#links_importantes .links_importantes li:hover { background: #F6F6EB;}
#links_importantes .links_importantes li a:hover { color: black;}
#links_importantes .links_importantes i { margin: 10px 20px; color: #3E5481;}
#noticias { flex: 1;}

/* FRASE */
#frase { width: 100%; padding: 20px; text-align: center; background: #3E5481; color: #BDA965;}
#frase i { margin: 0 10px;}

/* RODAPE */
#rodape { width: 100%; padding: 60px 0; background: #41464E; color: lightgray;}
#rodape .titulo { color: white;}
#rodape .blocos { flex: 1; margin: 0 5px;}
#rodape .blocos:last-child { max-width: 550px;}
#rodape .links_rodape { list-style: none; margin: 10px; padding: 0;}
#rodape .links_rodape a { display: block; padding: 5px; margin: 5px 0; transition: all 400ms;}
#rodape .links_rodape a:before { display: inline-block; font: 13px 'FontAwesome'; content: "\f054"; margin-right: 10px; color: #3E5481;}
#rodape .links_rodape a:hover { background: rgba(255, 255, 255, .04);}
#rodape .rodape_faixa { margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, .1); text-align: right;}

@media screen and (max-width:1000px){
    #topo .topo { flex-wrap: wrap;}
    #topo #logo { width: 100%;}
    #topo #endereco { margin: 0 auto;}
    #slogan { margin-top: 0; width: 90%;}
    #rodape .blocos { flex: 1 100%; flex-wrap: wrap;}
    #rodape .blocos:last-child { max-width: auto;}
}

@media screen and (max-width:800px){
    #topo #endereco { flex-wrap: wrap; justify-content: center;}
    
    #utilitarios { transform: translate(0,-50px); margin-bottom: -50px;}
    #utilitarios .blocos { flex: 1 100%; padding: 20px 0;}
    #utilitarios .blocos:not(:last-child) { border-right: 0; border-bottom: 1px solid rgba( 255, 255, 255, .1);}
    
    .textos .blocos { width: 100%; margin-bottom: 20px;}
    
    #links_importantes { width: 100%; margin-right: 0;}
    #noticias { margin-top: 30px;}
}

@media screen and (max-width: 700px){
    /* Menu Responsivo */
    #menu { width: 50%; flex-direction: column; position: relative; z-index: 999; background: none;}
    
    nav { width: 100%; height: 100%; position: fixed; z-index: 998; top: 0; right: 0; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, .9); transform: translate(100%, 0); transition: all 350ms;}

    #menu_responsivo .control-nav { display: block; padding: 25px; cursor: pointer;}
    #menu_responsivo .control-nav-close { width: 100%; height: 100%; padding: 20px; position: absolute; top: 0; left: 0; color: white; opacity: 0; transition: all 350ms;}
    #menu_responsivo #control-nav:checked ~ .control-nav { transform: translate(0, 0);}
    #menu_responsivo #control-nav:checked ~ nav .control-nav-close { display: block; opacity: 1; z-index: 998;}
    #menu_responsivo #control-nav:checked ~ nav{ transform: translate(0, 0);}
    
    #rodape .links_rodape { width: 100%;}
}

@media screen and (max-width: 500px){
    #slogan h1 { font-size: 32px;}
}