/* CORES

cor de destaque         rgb(198, 1, 3)
cor de fundo escura     #1D1A19
cor do amarelo          rgb(198, 1, 3)

*/

/* GERAL */
body, html { margin: 0; padding: 0; font-family: 'Archivo Narrow', sans-serif;}
[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: normal;}
a { text-decoration: none; display: inline-block;}

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

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

/* TOPO */
#topo { background: rgb(14, 14, 14);}
#logo img { display: block; width: 95%; height: auto; max-width: 320px; margin: 0 auto; padding: 40px 0;} 

/* MENU */
#menu { padding: 0; margin: 0; list-style: none; border-top: 1px dotted rgba(0, 0, 0, .3);}
#menu li { flex-grow: 1;}
#menu li a { font: normal 16px "Archivo Narrow", sans-serif; display: block; padding: 30px 5px; text-transform: uppercase; text-align: center; color: white; transition: all 250ms;}
#menu li a:hover { background: rgb(198, 1, 3);}

/* Menu Responsivo */
#menu_responsivo #control-nav, #menu_responsivo .control-nav, #menu_responsivo .control-nav-close { display: none;}

/* BANNER */
#banner { justify-content: flex-end; width: 100%; min-height: 450px; background: url(imagens/banner.jpg) center no-repeat; background-size: cover;}
#banner h2 { width: 50%; max-width: 500px; margin: 0 50px 0 0; font-size: 40px; color: white; text-align: right;}
#banner h2 span { font-size: 45px; text-transform: uppercase; color: rgb(198, 1, 3);}

/* CONTEUDO */
.textos { width: 100%; padding: 80px 0; background: url(imagens/fundo-textos.jpg) no-repeat; background-attachment: fixed; background-size: cover; color: whitesmoke;}
.textos .titulo { font-size: 30px; color: #BEB9B9; text-transform: uppercase;}
.textos a { transition: all 250ms;}
.textos a:hover { color: rgb(198, 1, 3);}

/* UTILITARIOS */
#utilitarios { margin: 50px 0;}
#utilitarios .blocos { flex: 1; border-left: 45px solid rgb(198, 1, 3); background: #1D1D1D; padding: 10px; margin: 3px;}
#utilitarios .blocos_titulo { font-weight: 300; margin: 0;}
#utilitarios .blocos_titulo small { display: block; color: lightgray;}

/* CONTATO FAIXA */
#contato { padding: 70px 0;}
#contato h2 { font-size: 30px;}

/* OBRIGADO FAIXA */
#obrigado { text-align: center; padding: 50px 0; color: white; background: rgb(198, 1, 3); text-transform: uppercase;}

/* RODAPE */
#rodape { width: 100%; padding: 80px 0; background: black; color: lightgray; text-align: center;}
#rodape .blocos h2 { margin: 0;}
#rodape .blocos { flex: 1; margin: 5px; padding: 10px;}
#rodape .blocos:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .2);}
.sociais { margin: 15px 2px; padding: 5px;}


@media screen and (max-width:800px){
    #utilitarios .blocos { flex: 1 100%;}
    
    #rodape .blocos { border-right: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .2);}
    #rodape .blocos:last-child { flex: 1 100%;}
}
@media screen and (max-width:640px){
    #banner h2 { width: 80%;}
    #formcontato .flex { flex-direction: column;}
    
    /* 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 { color: white; border-top: 1px dotted rgba(0, 0, 0, .3);}
    #menu_responsivo .control-nav { display: block; padding: 30px; 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);}
}