/* ---------------------------------------------------------------------------
   Acréscimos do Capacitool ao tema do site de referência. O tema (style.css e
   responsive.css) fica intocado, para poder ser comparado com o original.
   --------------------------------------------------------------------------- */

/* Fundo da marca, RGB 0,39,87, no lugar do cinza do tema (#2e2e2e e o degradê até #4d4d4d):
   abertura da home, faixa de título das páginas e as seções escuras de Sobre, Contato,
   "em breve" e erro */
.home_banner_area { background-image: none; background-color: #002757; }
.banner_area .banner_inner { background: #002757; }
.fundo_capacitool { background: #002757; }

/* Bandeiras de idioma no menu: o original fazia isso com style inline */
.bandeira { padding: 5px 5px 5px 0; }
.bandeira.ultima { padding-right: 0; }

/* As duas chamadas para os aplicativos, no lugar do antigo botão Download */
.capacitool_apps { margin-top: 20px; text-align: center; }
.capacitool_apps .banner_btn2 { margin-top: 10px; width: auto; min-width: 220px; padding: 0 22px; }
/* o tema dá margem à direita ao botão da abertura, o que o tiraria do centro */
.home_banner_area .banner_content .capacitool_apps .banner_btn2 { margin-right: 0; }
.capacitool_apps .banner_btn2 img { width: 24px; height: 24px; margin-right: 8px; vertical-align: middle; }
.capacitool_apps .app_texto { margin: 6px 0 14px; font-size: 14px; line-height: 1.5; }

/* Na página Sobre, sobre fundo escuro */
.aplicativos_sobre .app_texto { color: #c9c9c9; }
.abertura_sobre { max-width: 460px; padding-top: 30px; }

/* Contato e "em breve": o e-mail no lugar do formulário */
.contato_email h3 { color: #fff; margin-bottom: 12px; }
.contato_email p { color: #c9c9c9; font-size: 16px; }
.contato_email .main_btn { margin-top: 10px; }  /* "em breve" e erro */

.email_rodape { color: #0099FF; }
.email_rodape:hover { color: #33adff; }

/* O selo Capacitool no lugar da imagem de abertura: o selo é quadrado e a abertura era
   larga, então sem limite ele ocuparia a primeira tela inteira */
.abertura_selo { display: block; max-width: 220px; margin: 0 auto; }

/* O menu fica por cima da abertura (position: absolute no tema). No original, quem empurrava
   o texto para baixo dele era a imagem do notebook; sem ela, a abertura subia para trás do
   menu. Abaixo de 1200px o próprio tema já dá recuo à faixa, e basta um respiro */
.home_banner_area .banner_inner .banner_content { padding-top: 30px; padding-bottom: 40px; }
@media (min-width: 1200px) {
    .home_banner_area .banner_inner .banner_content { padding-top: 120px; }
}