@charset "utf-8";
/* CSS Document */

/* CORES UTILIZADAS */
/*
    Cor1 (padrão do site)           #CE000B
    Cor2 (hover)                    #990008
    Cor3 (data, slogan e botoes)    #ff000d
*/

body, html { margin: 0; padding: 0; font-family: 'Archivo Narrow', sans-serif; font-size: 15px; 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: 300; text-align: left;}
a { text-decoration: none; display: inline-block;}

.botao { font-size: 13px; text-transform: uppercase; color: white; background: #ff000d; text-align: center; padding: 15px 40px; border-radius: 3px;}
.botao:hover { background: #990008;}

.titulo { font-weight: 400; color: #CE000B; text-transform: uppercase;}

/* PADRAO DOS FORMULÁRIOS */
form input, form textarea { width: 100%; font-size: 14px; background: rgba(255, 255, 255, .85); margin: 2px; padding: 15px; border-radius: 2px; outline: none; border: 1px solid #ddd; resize: none;}
form button { background: #777; padding: 15px; border: none; color: white; margin: 2px; cursor: pointer;}
form button:hover { background: black; }
form a.botao { padding: 15px; margin: 2px;}

/* ANIMATION */
#menu li a, #links_importantes li a, #utilitarios .utilitarios a, #programacoes .programacoes, .botao, form button, #conteudo a { transition: all 250ms;}

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

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

/* TOPO */
#sobe { display:none; position:fixed; bottom:0; right:10px; z-index:999; width:50px; height:50px; cursor:pointer; font:20px/50px 'FontAwesome'; color:#FFFFFF; background:#990008; text-align:center; }

#topo_menu { background: #CE000B; position: relative; z-index: 999;}
#menu { list-style: none; margin: 0; padding: 0;}
#menu li { flex-grow: 1;}
#menu li a { display: block; padding: 25px 5px; text-align: center; font: 300 16px 'Oswald', sans-serif; color: white;}
#menu li a:hover { background: #990008;}
#data { flex: 1; background: #ff000d; padding: 5px; text-align: center; color: white;}

/* Menu Responsivo */
#menu_responsivo { flex: 3; font: 300 16px 'Oswald', sans-serif;}
.icone_menu:before { content: "Menu Principal"; }
#menu_responsivo #control-nav, #menu_responsivo .control-nav, #menu_responsivo .control-nav-close { display: none;}

/* LOGO E SLOGAN */
#topo_logo { padding: 10px 0;}
#logo img { max-width: 420px;}
#slogan { border-left: 2px solid #ff000d; margin-left: 20px; padding-left: 20px;}
#slogan small { display: block; width: 100%; font: 400 25px 'Oswald', sans-serif; color: #ff000d;}

/* BANNER */
#banner { border-bottom: 4px solid #990008;}
#banner .fotos{ width: 100%; height: 400px; background-size: cover; background-position: center;}

/* ICONES NA HOME */
#home { padding: 50px 0;}
#home .blocos { flex: 1; margin: 0 10px;}
#home .blocos .titulo { text-align: center; border-bottom: 1px dotted #999;}
#home .blocos .imagem { width: 100%; height: 120px; background-size: cover; background-position: center; outline: 5px solid rgba(255, 255, 255, .8); outline-offset: -5px;}

/* LISTA LINKS IMPORTANTES */
#links_importantes { margin: 0; padding: 0; list-style: none;}
#links_importantes li a { display: block; padding: 2px 5px; margin: 2px 0;}
#links_importantes li a:hover { color: #990008; margin-left: 5px;}
#links_importantes li a:before { content: "»"; margin-right: 5px;}

/* ICONES UTILITARIOS */
#utilitarios { padding: 40px 0; background: whitesmoke;}
#utilitarios .utilitarios { background: white; padding: 10px;}
#utilitarios .utilitarios .blocos { flex: 1; padding: 10px 20px 20px; text-align: center; }
#utilitarios .utilitarios .icone_utilitarios { width: 120px; height: 120px; margin: 10px auto; background: #CE000B; border-radius: 50%;}
#utilitarios .utilitarios .icone_utilitarios i.fa { line-height: 120px; color: white; font-size: 50px;}
#utilitarios .utilitarios .titulo { text-align: center;}

/* PROGRAMACOES */
#programacoes { padding: 40px 0;}
#programacoes .titulo { text-align: center; }
#programacoes #restrito form input { flex: 1 250px; margin: 5px;}
#programacoes .programacoes { flex: 1; padding: 20px 10px; color: white; background: #CE000B; border-radius: 3px; text-align: center; margin: 20px 5px 0;}
#programacoes .programacoes:hover { background: #990008;}
#programacoes .programacoes .titulo { color: white; margin: 0;}
#programacoes .programacoes p { margin: 0;}

/* ICONES UTILITARIOS RODAPE */
#utilitarios_rodape { padding: 20px 0; background: whitesmoke;}
#utilitarios_rodape .utilitarios_rodape { flex: 1; text-align: center; margin: 10px; padding: 10px;}
#utilitarios_rodape .utilitarios_rodape img { width: 60%; max-width: 200px; height: auto; outline: 5px solid rgba(255, 255, 255, .8); outline-offset: -5px;}
#utilitarios_rodape .utilitarios_rodape .titulo { margin: 10px 0; text-align: center;}
#utilitarios_rodape .utilitarios_rodape p { margin: 0;}

#rodape { color: white; text-align: center; background: #CE000B; padding: 5px 0;}

/* CONTEUDO */
#conteudo { padding: 10px 0 40px; text-align: justify;}
#conteudo a:hover { color: #990008;}

#links_uteis { list-style: none; margin: 0; padding: 0; column-count: 4; -webkit-column-count: 4; -moz-column-count: 4;}
#links_uteis a { padding: 5px 15px; }
#links_uteis a:hover { background: whitesmoke; }

@media screen and (max-width: 900px){
    #home .blocos { flex: 1 46%;}
    #utilitarios .utilitarios .blocos { flex: 1 46%;}
    #utilitarios_rodape .utilitarios_rodape { flex: 1 45%;} 
    #links_uteis { column-count: 3; -webkit-column-count: 3; -moz-column-count: 3;}
}

@media screen and (max-width: 800px){
    /* Menu Responsivo */
    #menu_responsivo { flex: 1 100%;}
    #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; color: white; padding: 25px 5px; 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);}
    
    #topo_logo { flex-direction: column;}
    #slogan { text-align: center; border: none; margin-left: 0; padding-left: 0;}
    
    #banner .fotos { height: 250px;}
    
    #programacoes #restrito form > div { flex: 1 100%; margin: 0;}
    
    #links_uteis { column-count: 2; -webkit-column-count: 3; -moz-column-count: 2;}
}

@media screen and (max-width: 600px){
    #utilitarios .utilitarios .blocos { flex: 1 100%;}
    #programacoes .programacoes { flex: 1 100%;}
    #links_uteis { column-count: auto; -webkit-column-count: auto; -moz-column-count: auto;}
}