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

/* 1. ESTILOS COMUNS */

body {background-color: #003333; color: #fff;}

a {color: #fff;}
#menumain a:hover, #menumain a:focus {color: #333; background-color:#fff;}
#menumain a.navbar-brand:hover, #menumain a.navbar-brand:focus {background-color: transparent;}

h2 {color: #ffff00;}

.btn-br-link {background-color: #ffff00; color: #333; border: 3px solid transparent;}
.btn-br-link:hover, .btn-br-link:focus {background-color: #fff ; color: #333; border: 3px solid #333333;}

a.btn-br {background-color: #ffff00; color: #333; border: 3px solid transparent;}
a.btn-br:hover, a.btn-br:focus {background-color: #fff ; color: #333; border: 3px solid #333333;}

a.btn-laranja {background-color: #ffff00; color: #333; }
a.btn-laranja:hover, a.btn-laranja:focus {background-color:  #fff; color: #333; }

a.btn-laranja2 {background-color: #003333; color: #fff; border: 3px solid #fff;}
a.btn-laranja2:hover, a.btn-laranja2:focus {background-color:  #003333; color: #ffff00; border: 3px solid #ffff00; }

a.btn-br-pt {background-color: #ffff00; color: #333333; border: 3px solid #333;}
a.btn-br-pt:hover, a.btn-br-pt:focus {background-color:  #ffffff; color: #333333; border: 3px solid #333333;}

#clientes .card { 
    border: 1px solid #cccccc;
    background-color: transparent;
}

/*  #clientes img {
    -webkit-filter: grayscale(100%) brightness(280%);  Safari 6.0 - 9.0 
    filter: grayscale(100%) brightness(280%);
  } */

 #clientes .logo-cn {display: none;}
 #clientes .logo-ac {display: block;}

.bg-light { background-color: #016161 !important; }

.mostrar-normal { display: none;}
.mostrar-contraste { display: inline-block;}

/* 2. BARRA DE ACESSIBILIDADE */

.quadro-acessibilidade {background-color: #222222; box-shadow: rgba(0, 0, 0, .760784) 0 7px 20px -12px, rgba(0, 0, 0, .317647) 0 4px 25px 0, rgba(0, 0, 0, .4) 0 8px 10px -5px; color: #ffffff; }

#acessibilidade .quadro-acessibilidade a { background-color: #40D0D0; color: #222222; border: 2px solid #40D0D0;  }
#acessibilidade .quadro-acessibilidade a:hover, #acessibilidade .quadro-acessibilidade a:focus { color: #EFEFEF; background-color:#000000; border: 2px solid #40D0D0; } 

#acessibilidade a.link-acessibilidade {background-color:#40D0D0; border: 2px solid #40D0D0;}
#acessibilidade a.link-acessibilidade:hover, #acessibilidade a.link-acessibilidade:focus {background-color:#000000; border: 2px solid #40D0D0; }

#acessibilidade .bg-cinza {background-color: #222222; }

#acessibilidade { background-color: #000000; color: #fff; border-bottom: 1px solid #4d9494;}
#acessibilidade a:hover, #acessibilidade a:focus {text-decoration: none; padding: 4px 10px; border: 2px solid #fff;}

#acessibilidade .quadro-acessibilidade a.contraste-normal {  border: 2px solid #fff;}
#acessibilidade .quadro-acessibilidade a.alto-contraste {  border: 2px solid #fff; }

#acessibilidade .quadro-acessibilidade a.contraste-normal { background-color: #eb6a30;}
#acessibilidade .quadro-acessibilidade a.alto-contraste { background-color:#003333;}

#acessibilidade .quadro-acessibilidade a.contraste-normal:hover, #acessibilidade .quadro-acessibilidade a.contraste-normal:focus, #acessibilidade .quadro-acessibilidade a.alto-contraste:hover, #acessibilidade .quadro-acessibilidade a.alto-contraste:focus {opacity: 1;  border: 2px solid #FFFF00;}


#acessibilidade button:hover, #acessibilidade button:focus {
    color: #333;
    background-color: #ffff00;
}


#acessibilidade button.fechar:hover, #acessibilidade button.fechar:focus {
    color: #fff;
    background-color: #333;
}

/* 3. HEADER */

header {
    color: #FFF;
    background-color:  #016161;
    /* height: 15vh; */
   }

#bannerhome {
    color: #FFF;
    background-color:  #016161;
    background: #016161 url("../imagens/bg-site-handtalk-v2-ac.png") repeat-x bottom;
}

#bannerinterno {
    background-color: #016161;
    background: #016161 url("../imagens/bg-site-handtalk-pages-ac.png") repeat-x left bottom;
}


@media only screen and (min-width: 768px) and (max-width: 1024px)  { 

    #bannerinterno {
        color: #FFF;
        background-color:  #016161;
        background: #016161 url("../imagens/textura-pag-erro-resp-ac.png") no-repeat left bottom;
    }

}

#menumain {
    color: #FFF;
    background-color:  #016161;

}
a.btn-header {background-color: #016161; color: #fff; border: 3px solid #fff;}

@media only screen and (max-width: 768px) {
    header {
        background-color:  #016161;
        background: #016161 url("../imagens/bg-site-handtalk-v2-ac.png") repeat-x bottom;
    }
}

/* 4. AJUDA DE ACESSIBILIDADE */

.quadro-dicasac { background-color: #016161; border: 1px solid #c4c4c4;}
.bg-dicasac {background: transparent url("../imagens/textura3ac.png") repeat-x top;}


/* 6. HOME */

.bg-cinza {background-color: #016161;}
#estatisticas .card p {color: #ffffff;}

#features .subtitulo {color: #fff;}

#features .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #fff;}
#features .nav-tabs .nav-item a { border-bottom: 4px solid #fff; }
#features .nav-tabs .nav-item a.active { border-bottom: 4px solid #ffff00; }
#features .nav-tabs .nav-item a { border-bottom: 4px solid #fff; }
#features a:hover {color: #ffff00;}

#features .nav-tabs .nav-item button, .nav-tabs .nav-item button.active { color: #fff;}
#features .nav-tabs .nav-item button { border-bottom: 4px solid #fff; }
#features .nav-tabs .nav-item button:hover, #features .nav-tabs .nav-item button:focus {
    border-bottom: 4px solid  #ffffff;
    background: transparent;
    color: #ffff00;
}

#features .nav-tabs .nav-item button.active { border-bottom: 4px solid #ffff00; }

@media only screen and (max-width: 780px) {
    #features .nav-tabs .nav-item a { border: 1px solid #fff;}
    #features .nav-tabs .nav-item a:hover, #features .nav-tabs .nav-item a:focus { border: 1px solid #ffff00; background-color: #000; color: #fff; }
    #features .nav-tabs .nav-item a.active { border: 1px solid #ffff00; background-color: #000; color: #fff; }
}

.banner-falecom { background: #016161 url("../imagens/textura-seloac.png") repeat-x bottom; }

#motivos .card, #depoimentos .card {background-color:  #016161;}
#motivos p.subtitulo {color: #ffffff;}
#motivos .card h3 {color: #ffff00; }
#motivos .fa {color: #ffffff;}
#motivos .fa.fa-gavel {color: #333;}

.lbi {background: #016161 url("../imagens/textura-lbiac.png") repeat-x bottom;}

.bg-depoimentos {background: transparent url("../imagens/textura3ac.png") repeat-x top;}
#depoimentos .quadro-depoimentos { background-color: #016161; border: 1px solid #c4c4c4;}

#depoimentos .card-title {color: #ffff00;}
#depoimentos .text-muted { color: #fff !important; }


/* 7. APLICATIVO */

.bg-video-intro {background: #333 url("../imagens/textura-contehugobac.png") repeat-x top;}
@media only screen and (min-width: 1024px) {.bg-video-intro {background: #003333 url("../imagens/textura-contehugoac.png") repeat-x top;}}

#video-app div.foco-video:hover,  #video-app div.foco-video:focus { border: 5px solid #fff; } 
#depoimentos-app .quadro-depoimentos { background-color: #016161; border: 1px solid #c4c4c4;}

#features-app .bg01 {background-color: #6B4C12;}
#features-app .bg02 {background-color: #6F3600;}
#features-app .bg03 {background-color: #0c5d49;}
#features-app .bg04 {background-color: #004A62;}
#features-app h3 {padding: 3px 5px; background-color: transparent; color: #fff; line-height: 1.8em;}
#features-app .bg-branco { background-color: #003333; padding: 4px;}

#depoimentos-app .quadro-depoimentos { background-color: #016161; border: 1px solid transparent;}
#depoimentos-app .card {background-color: #016161; }
#depoimentos-app h3 {color: #ffff00;}
#depoimentos-app .text-muted {color: #ffffff !important;}

/* 8. MATERIAIS GRATUITOS */

#materiaisgratuitos .txt-intro {color: #fff;}
#materiaisgratuitos div.card-title  {color: #fff;}

#materiaisgratuitos .card {
color: #FFF;
background-color: #016161; }

#materiaisgratuitos .categoria-mg {background-color:#003333; color: #ffff00; }


/* 9. BLOG */

#blog .txt-intro {color: #ffff00; }
#blog .icon-calendar, .icon-comments, .icon-tags {color: #ffff00; fill: currentColor;}
#posts a:hover, #posts a:focus, .quadro-perfil a:hover, .quadro-perfil a:focus {color: #ffff00;}
 #blog .data {color: #fff;}
 #blog .materia, #blog .quadro-comentarios { background-color: #016161; }
 #blog .card {background-color:  #003333; }
 #blog h3 {color: #fff;}
 #blog .info-post { background-color: #016161; color: #fff; }
 #blog figcaption {background-color: #016161; }

 .quadro-perfil {background-color: #016161; }

 a.site-handtalk {border: 1px solid #fff; background-color: #003333; }
 a.site-handtalk:hover, a.site-handtalk:focus {border: 1px solid #ffff00; background-color: #016161; color:#fff;}

.img-cn {display: none;}
.img-ac {display: block;}

#blog #postdetalhe a {color: #ffff00;}
#blog #postdetalhe a:hover, #blog #postdetalhe a:focus {background-color: #ffff00; color: #333;}

#blog #postsdetalhe a .icon-redes-sociais, #share2 a .icon-redes-sociais {
    background-color: #fff;
    border-radius: 3px;
    opacity: 1;
    padding: 3px;
}

#blog #postsdetalhe a:hover .icon-redes-sociais, #share2 a:hover .icon-redes-sociais, #blog #postsdetalhe a:focus .icon-redes-sociais, #share2 a:focus .icon-redes-sociais  {
    background-color: #ffff00;
    border-radius: 3px;
    opacity: 1;
    padding: 3px;
}

#blog .info-post a {
    background-color: transparent;
    padding: 2px 4px;
    text-decoration: underline;
}

#blog .info-post a:hover, #blog .info-post a:focus {
    background-color: #ffff00;
    color: #333;
    padding: 2px 4px;
    text-decoration: underline;
}


#comentarios h4, #mensagens h4 {color: #fff;}
#mensagens h5 {color: #ffff00;}
#mensagens hr {border-top: 1px solid #cccccc;}

#comentarios button.btn-primary {
    color: #333;
    background-color: #ffff00; 
    border: transparent;
}

#comentarios button.btn-primary:hover, #comentarios button.btn-primary:focus {
    color: #333;
    background-color: #fff; 
    border: transparent;

}

#mensagens .avatar {
    background-color: #fff;
    border-radius:45em;
}

.btn-outline-secondary {
    color: #fff;
    border-color: #fff;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    color: #ffff00;
    background-color: #003333;
    background-image: none;
    border-color: #ffff00;
}

.form-control {color: #fff;
    background-color: #003333;}

    .form-control:focus {
        color: #fff;
        background-color: #003333;
        border-color: #ffff00;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
      }

input, textarea {color: #fff;
        background-color: #003333;}

.quadro-comentarios label { color: #fff;}

#responder .modal-body { background-color: #003333;}

#responder .modal-content { border-color: #ffff00; border-width: 3px; }

#responder button.btn-primary {
    color: #fff;
    background-color:#003333;
    border: 2px solid #ffffff;
}

#responder button.btn-primary:hover, #responder button.btn-primary:focus {
    color: #fff;
    background-color: #003333;
    border: 2px solid #ffff00;

}
#responder .modal-footer { background-color: #003333;}
#responder .modal-footer .btn { border: 2px solid #ffff00;}
#responder .modal-footer .btn:hover, #responder  .modal-footer .btn:focus { background-color: #003333;; border: 2px solid #ffff00; color: #fff;}

.quadro-comentarios label span {color: #ffff00; }
.quadro-comentarios .form-control.invalido,  .quadro-comentarios .form-control.invalido:focus {border: 2px solid #ffff00 !important;}

.pagination > li > a, .pagination > li > span {
    color: #ffffff;
}

.page-link {
    color: #ffffff;
    background-color: #333333;
    border: 3px solid #ffffff;
}

.page-item.active .page-link {
    color: #333333;
    background-color: #ffff00;
    border-color: #ffff00;
}

.page-item.disabled .page-link {
    color: #cccccc;
    background-color: #003333;
    border-color: #016161;
  }


/* Núvem de tag */
 
.tagcloud01 ul li a {
   
    background-color: #016161;
    color: #fff;
}
.tagcloud01 ul li a:hover, .tagcloud01 ul li a:focus {
    background-color: #ffff00;
    color: #003333;
}

a:hover, a:focus {color: #ffff00;}

#blog h3.card-title {color: #fff;}
#blog a.figure-effect:hover h3, #blog a.figure-effect:focus h3 {color: #ffff00;} 

.ultimos-posts li {color: #ffffff; font-size:1.05em;}
.ultimos-posts a:hover, .ultimos-posts a:focus {color: #ffff00}

.ultimos-posts .list-group-item {
    background-color: #016161;
    color: #fff;
}

.ultimos-posts ul li a:hover, .ultimos-posts ul li a:focus {
    color: #ffff00;
}
/* 10. SOBRE */

#sobre .quadro-quote {background: #016161 url("../imagens/textura-sobreac.png") repeat-x bottom;}
.bg-premiomit {background: transparent url("../imagens/banner-mitac.png") no-repeat cover;}
.bg-namidia {background: transparent url("../imagens/textura7ac.png") repeat-x bottom;}

#namidia .quadro-namidia { background-color: #016161; color:#fff; border: 1px solid #c4c4c4;}
#curiosidades .card {background-color: #016161;}

#curiosidades .card p {color: #ffffff;}
#curiosidades .card { border: 1px solid #ffffff;}
#curiosidades a.laranja {color: #ffff00;}
#curiosidades a.laranja:hover, #curiosidades a.laranja:focus {color: #333; background-color:  #fff; }
#curiosidades .icon-curiosidades { background-color: #003333;}

#premios .card {background-color:  #003333; }
.bg-premiomit { min-height: 496px; background: transparent url("../imagens/banner-mitac.png") no-repeat left top; background-size: cover;}

#premios .logo-cn {display: none;}
#premios .logo-ac {display: block;}

#namidia .quadro-namidia { background-color: #003333; border: 1px solid #fff;}
#namidia .card { background-color: #003333; }

.bg-impacto {background: transparent url("../imagens/textura8ac.png") repeat-x top;}

#namidia .logo-cn {display: none;}
#namidia .logo-ac {display: block;}

/* 12. FOOTER */

#voltartop .fa-sort-asc {color: #333;}

#voltartop a.scrollTop { border: 1px solid transparent; background-color: #ffff00; color: #333; }
#voltartop a.scrollTop:hover, #voltartop a.scrollTop:focus { border: 1px solid transparent; background-color: #fff; color: #333;}

#rodape a {color: #fff;}
#rodape a:hover, #rodape a:focus {color: #ffff00; text-decoration: underline;}
#rodape a:visited {color: #ccc;}

#rodape a .icon-redes-sociais {
    background-color: #fff;
    border-radius: 45em;
    border: 2px solid #fff;
    opacity: 1.0;
}

#rodape a:hover .icon-redes-sociais, #rodape a:focus .icon-redes-sociais {
    background-color: #fff;
    border-radius: 45em;
    border: 2px solid #ffff00;
    opacity: 1.0;
}

#rodape .filter-logo {
    filter: grayscale(1) brightness(2.5);
}

#followUs .filter-logo {
    filter: grayscale(1) brightness(2.5);
}