/*
/   name           Favourite
/   version        4.2
/   description    Responsive and customizable Joomla!3 template
/   demo           http://demo.favthemes.com/favourite
/   author         FavThemes
/   author URL     https://www.favthemes.com
/   copyright      Copyright (C) 2012-2018 FavThemes.com. All Rights Reserved.
/   license        Licensed under GNU/GPLv3 (http://www.gnu.org/licenses/gpl-3.0.html)
*/

/*//////////////////////////////////////////////////////////////////////////////
///
///  Geral
///
//////////////////////////////////////////////////////////////////////////////*/

/* Formata a tag h5, para deixar mais próxima entre linhas,
porém somente onde seja também usada a classe azn-h5 */
.azn-h5 h5 {
    border: 0 none;
    /* Removi porque quando entrava modo mobile sobrepunha as linhas e reduzia demais a a´rea de footer
	line-height: 0.1em;*/
    margin: 0!important;
}

/* Palavras em destaque na página de pesquisa */
.azn-palavra-destaque span.highlight {
    color: #A6D000;
    background-color: #303030;
}

/* Insere o ícone do Youtube na frente de links h4
   que se refiram à categoria de vídeos do site.
   Facilita para identificar na lista de pesquisa, por exemplo. */
h4 a[href*="/videos/"]:before {
    font-family: "Font Awesome 5 Brands";
    font-weight: 900;
    font-style: normal;
    padding-right: 7px;
	content:"\f167";
}

/* Se não quiser que o ícone apareça na frente do link,
   basta usar a classe azn-sem-logo-youtube, como foi
   no menu de Vídeos, onde seria redundante deixar o ícone
   aparecendo */
.azn-sem-logo-youtube a[href*="/videos/"]:before {
	content: none!important;
}

/* Insere o ícone da varinha mágica na frente de links h4
   que se refiram à categoria de tutoriais/dicas rápidas do site.
   Facilita para identificar na lista de pesquisa, por exemplo. */
h4 a[href*="/tutoriais/"]:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    padding-right: 7px;
	content:"\f0d0";
}

/* Se não quiser que o ícone apareça na frente do link,
   basta usar a classe azn-sem-logo-tutorial, como foi
   no menu de Tutoriais e Dicas, onde seria redundante 
   deixar o ícone aparecendo */
.azn-sem-logo-tutorial a[href*="/tutoriais/"]:before {
	content: none!important;
}


/* Coloca uma margem superior nas tags. Foi necessário fazer isso porque
quando tinha mais de uma linha de tags, a de baixo sobrepunha a de cima ligeiramente.
Apenas estética */
li[itemprop="keywords"] {
  margin-top: 15px!important;
}

/* Muda a cor de links já visitados em artigos para cinza escuro 
e deixa verde ao passar com o mouse em cima*/
div[itemprop="articleBody"] a:visited {
  color: #181818;
}

div[itemprop="articleBody"] a:visited:hover {
  color: #A6D000;
}

.azn-link-branco a {
  color: #FFFFFF !important;
}

.azn-link-branco a:visited:hover {
  color: #A6D000 !important;
}

/* Converte textos em letras maiúsculas */
.azn-maiusculo {    
text-transform: uppercase;
}


.azn-titulo-maiusculo h1, 
.azn-titulo-maiusculo h4 {    
text-transform: uppercase;
}

/* Mostra o titulo apenas nas páginas de blog (onde lista os artigos em formato
de blog. Em todas as outras páginas irá esconder o h1.
Abaixo, tem a classe que coloca um linha curta abaixo do título 
 */
.azn-titulo-linha .page-header h1 {
/* Este comando esconde o H1 em todas as páginas. Para mostrar é preciso usar display: block, por exemplo */
display: none;
} 

/* Formata o tamanho da fonte e mostra o título */
.azn-titulo-linha .blog h1 {
font-size: 24px !important;
display: block !important;
}

/* Quando mostra título de sub Categoria (Página de Artigos/Notícias, por exemplo) */
.azn-titulo-linha  .blog h2 .subheading-category {
font-size: 16px;
text-transform: uppercase;
display: block;
margin-top: -16px;
} 

/* Coloca um linha curta abaixo da tag H? 
Exemplo de uso:
<h2><span class="azn-titulo-linha">Algum Título</span></h2>
Também funciona em módulos, basta inserir a tag que deseja usar como título "Tag do Cabeçalho" 
e inserir a classe azn-titulo-linha em Sufixo de Classe do Módulo
*/
h1 .azn-titulo-linha,
h2 .azn-titulo-linha,
h3 .azn-titulo-linha,
h4 .azn-titulo-linha,
h6 .azn-titulo-linha,
h1 .azn-titulo-linha  {
display: block!important;
} 

h1 .azn-titulo-linha::after,
h2 .azn-titulo-linha::after,
h3 .azn-titulo-linha::after,
h4 .azn-titulo-linha::after,
h5 .azn-titulo-linha::after,
h6 .azn-titulo-linha::after,
.azn-titulo-linha .blog .page-header h1:first-of-type::after  {
    content: ""!important;
    display: block!important;
    width: 70px!important;
    margin-top: 13px!important;
    position: absolute!important;
    border-bottom: 3px solid #A6D000 !important;	
}


/* Botões em geral, usando a classe favth-btn 
Transição para suavizar o efeito de pressão do botão */
.favth-btn,  
.favth-btn:hover, 
.favth-btn:active, 
.label-info[href], 
.label-info[href]:hover, 
.label-info[href]:active,
.badge-info[href], 
.badge-info[href]:hover, 
.badge-info[href]:active,
#favsliderpro-caption-readmore, 
#favsliderpro-caption-readmore:hover,
#favsliderpro-caption-readmore :active{
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

/* Efeito de sombra */  
.fav-container .btn,
.fav-container .pager .next a,
.fav-container .pager .previous a,
.favth-btn, 
#favsliderpro-caption-readmore, 
p.readmore a.btn {
box-shadow: 2px 2px 4px 0 rgb(0 0 0 / 40%)!important;
}

/* Remove a sombra quando passa o mouse sobre o botão ou clica */
p.readmore a.btn:hover,
p.readmore a.btn:active,
.favth-btn:hover, 
.favth-btn:active, 
.fav-container .btn:hover,
.fav-container .btn:active,
.fav-container .pager .next:hover,
.fav-container .pager .next:active,
.fav-container .pager .previous:hover,
.fav-container .pager .previous:active,
#favsliderpro-caption-readmore:hover,
#favsliderpro-caption-readmore:active {
box-shadow: none!important;
}

/* Centraliza o botão padrão */
.azn-centraliza-btn {
width: 55%; 
float: right;
margin: 5px;
clear: both;
}

/* TAGS */
/* Coloca sombra */
.label-info[href], 
.badge-info[href] {
box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 40%)!important;
background-color: #A6D000;
}

.label-info[href]:hover, 
.badge-info[href]:hover,
.label-info[href]:active, 
.badge-info[href]:active {
box-shadow: none!important;
background-color: #181818 !important;
}

/* BLOG */
/* Principalmente em menus onde será usado Módulo como conteúdo. 
Se não usar esta classe, o título definido em 
"Item de Menu -> Exibição de Página / Título da Página"
será exibido após o módulo, ou seja, na parte inferior da página. */
.azn-esconde-titulo-menu .page-header h1 {
display: none!important;
}

/* Preenche com o banner oficial do Canal do Youtube,
incluindo um degradê de transparente para preto (de cima para baixo)
sobre a imagem para melhorar a vsualização do texto de titulação. */
.azn-banner {
background-image: linear-gradient(rgba(17,17,17,0), rgba(17,17,17,1)), url("/images/headers/Banner_Canal_2021_1080p.jpg");
width: 100%;
max-width: 1150px;
height: 200px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
margin-bottom: 15px;
}	

/* Formata um texto, no momento usado como titulação do banner oficial.
Há um exemplo dele no Menu "Sobre Mim" */
.azn-titulo-banner {
position: absolute;
top: 50%;
left: 3%;
color: white;
/*text-shadow: 2px 2px 2px #000000;*/
}

.azn-titulo-banner h2 {
font-size: 20px; 
text-transform: uppercase;
}

.azn-titulo-banner h6 {
margin-top: -15px;
}

/*//////////////////////////////////////////////////////////////////////////////
///
///  Favstyle (na página de seleção de qualidade das screenshots)
///
//////////////////////////////////////////////////////////////////////////////*/

/* Coloca borda verde na imagem */
div[id^="favpromote-image"] img, 
div[id*=" favpromote-image"] img {
border: solid 2px #A6D000 !important;
}

/* Coloca borda branca na imagem quando passa o mouse por cima */
.favstyle div[id^="favpromote-box"]:hover img, 
.favstyle div[id*=" favpromote-box"]:hover img {
border: solid 2px #FFFFFF !important;
}

/*//////////////////////////////////////////////////////////////////////////////
///
///  Slideshow Pro
///
//////////////////////////////////////////////////////////////////////////////*/

/* Botão de Readmore do banner 
Efeito de sombra */
.favsliderpro-carousel div[id^="favsliderpro-caption-readmore"] a.btn, 
.favsliderpro-carousel div[id*=" favsliderpro-caption-readmore"] a.btn {
box-shadow: 2px 2px 4px 0 rgb(0 0 0 / 40%) !important;
}

/* Remove a sombra quando passa o mous em cima ou clica */
.favsliderpro-carousel div[id^="favsliderpro-caption-readmore"] a.btn:hover, 
.favsliderpro-carousel div[id^="favsliderpro-caption-readmore"] a.btn:active, 
.favsliderpro-carousel div[id*=" favsliderpro-caption-readmore"] a.btn :hover ,
.favsliderpro-carousel div[id*=" favsliderpro-caption-readmore"] a.btn :active {
box-shadow: none !important;
}

/* Thumbnails abaixo do banner */
#favsliderpro-thumbnails.favsliderpro-thumbnails.favth-carousel-indicators li.favth-active {
box-shadow: none !important;
}

#favsliderpro-thumbnails.favsliderpro-thumbnails.favth-carousel-indicators li  img {
border: solid 2px #A6D000;
}

#favsliderpro-thumbnails.favsliderpro-thumbnails.favth-carousel-indicators li.favth-active img {
border: solid 4px #A6D000;
}

 /* Converte a miniatura em tons de cinza quando passa o mouse em cima */
#favsliderpro-thumbnails.favsliderpro-thumbnails.favth-carousel-indicators li > img   {
    filter:  none!important;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  -o-transition: all 0.9s ease-out 0s;
  transition: all 0.9s ease-out 0s;	
} 
 
#favsliderpro-thumbnails.favsliderpro-thumbnails.favth-carousel-indicators li:hover  > img  {
    filter:  grayscale(100%)!important;
    -webkit-filter: grayscale(100%)!important;
    -moz-filter:    grayscale(100%)!important;
    -ms-filter:     grayscale(100%)!important;
    -o-filter:      grayscale(100%)!important;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  -o-transition: all 0.9s ease-out 0s;
  transition: all 0.9s ease-out 0s;	
}

/*//////////////////////////////////////////////////////////////////////////////
///
///  Plugin Easy Image Caption
///
//////////////////////////////////////////////////////////////////////////////*/

/* A ideia era fazer com que o primeiro "p" ficasse com a imagem e pudesse ser 
manipulado, porém apresentou mais desafios que soluções, como por exemplo o texto
não conseguir preencher toda a altura da imagem e ficar mal formatado, obrigando 
a colocar ENTER até passar da altura da imagem, dentre outros problmeas 
Deixei apenas como referência futura 
.azn-formata-imagem-dir-esq p:nth-child(1) {
float: left;
margin-right: 15px;
}*/

.easy_img_caption {
    display: inline-table;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: top;
    background-color: #F2F2F2;
    padding: 6px 6px 0px 6px;
}

.easy_img_caption_inner {
    color: #000000;
    font-size: 13px;
    line-height: 1.3;
    font-weight: normal;
    font-style: italic;
    text-align: left;
    padding: 4px 0px 4px 0px;
    margin: 0px;
}

.easy_img_caption_inner small {
    color: #999999;
    font-size: 11px;
    line-height: 1.3;
    font-weight: normal;
    font-style: italic;
    text-align: right;
    padding: 0px 0px 4px 0px;
    margin: 0px;
}

/* Não força formatação da imagem */
.azn-nao-formata-imagem {
}

/* Formata automaticamente o span e a imagem */
.azn-formata-imagem span[class*="easy_img_caption"], 
.azn-formata-imagem span[class*="easy_img_caption"] img {
/*width: 100%!important;*/
max-width: 1067px!important;
}

/* No menu de Dicas Rápidas, formata automaticamente o
posicionamento das imagens para que intercalem uma à esquerda 
e a do Arqtigo seguinte à direira */
.azn-formata-imagem-dir-esq  span[class*="easy_img_caption"] img {
float: none!important;
}

.azn-formata-imagem-dir-esq div[class*=" row-0 "] span[class*="easy_img_caption"] {
float: left!important;
margin-right: 15px!important;
width: 550px!important;
}

.azn-formata-imagem-dir-esq div[class*=" row-1 "] span[class*="easy_img_caption"] {
float: right!important;
margin-left: 15px!important;
width: 550px!important;
}

.azn-formata-imagem-dir-esq div[class*=" row-2 "] span[class*="easy_img_caption"] {
float: left!important;
margin-right: 15px!important;
width: 550px!important;
}

.azn-formata-imagem-dir-esq div[class*=" row-3 "] span[class*="easy_img_caption"] {
float: right!important;
margin-left: 15px!important;
width: 550px!important;
}

.azn-formata-imagem-dir-esq div[class*=" row-4 "] span[class*="easy_img_caption"] {
float: left!important;
margin-right: 15px!important;
width: 550px!important;
}

.azn-formata-imagem-dir-esq div[class*=" row-5 "] span[class*="easy_img_caption"] {
float: right!important;
margin-left: 15px!important;
width: 550px!important;
}

.azn-formata-imagem-dir-esq div[class*=" row-6 "] span[class*="easy_img_caption"] {
float: left!important;
margin-right: 15px!important;
width: 550px!important;
}

.azn-formata-imagem-dir-esq div[class*=" row-7 "] span[class*="easy_img_caption"] {
float: right!important;
margin-left: 15px!important;
width: 550px!important;
}

.azn-formata-imagem-dir-esq div[class*=" row-8 "] span[class*="easy_img_caption"] {
float: left!important;
margin-right: 15px!important;
width: 550px!important;
}

.azn-formata-imagem-dir-esq div[class*=" row-9 "] span[class*="easy_img_caption"] {
float: right!important;
margin-left: 15px!important;
width: 550px!important;
}

/*//////////////////////////////////////////////////////////////////////////////
///
///  SigPlus (fotos e galerias)
///
//////////////////////////////////////////////////////////////////////////////*/

/* Suaviza a exibição das miniaturas com modo fade */
.sigplus-gallery > ul > li {
animation:fade-in 3s!important;
}

.sigplus-gallery > ul > li.sigplus-hidden {
transition:opacity 3s linear!important;
}

/* Tira o efeito que suaviza a exibição das miniaturas para 
não dar conflito com algum outro módulo */
.azn-sem-fade .sigplus-gallery > ul > li {
animation:none!important;
}

.azn-sem-fade .sigplus-gallery > ul > li.sigplus-hidden {
transition:none!important;
}

/* Coloca uma moldura verde em volta de miniaturas */
.azn-img-green > #sigplus_1001 a.sigplus-image > img  {
border: solid 2px #A6D000 !important;
}

/* Suaviza as trasições de efeitos de sombra nos thumbnails */
a.sigplus-image {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

/* Suaviza o surgimento do rótulo na miniatura
por enquanto apenas funciona se o acesso vier pela parte
de baixo da imagem, que é onde fica o caption escondido. Se vier
pela parte de cima da imagem, identifica a imagem como link
e as propridades abaixo não são ativadas */
.captionplus-overlay:hover  {
    -webkit-animation: fadein 3s!important; /* Safari, Chrome e Opera > 12.1 */
       -moz-animation: fadein 3s!important; /* Firefox < 16 */
        -ms-animation: fadein 3s!important; /* Internet Explorer */
         -o-animation: fadein 3s!important; /* Opera < 12.1 */
            animation: fadein 3s!important;
}

/* Está desativado porque o SIGPlus já definiu estes parâmetros
se deixar aqui tb, caba dando conflito 
Fica como exemplo, caso em algum momento precise.
Sem estes parâmetros em um dos CSS aninhados, o efeito de fade não funciona 
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer 
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
*/

 /* Converte a miniatura em tons de cinza quando passa o mouse em cima */
a.sigplus-image > img   {
    filter:  none!important;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  -o-transition: all 0.9s ease-out 0s;
  transition: all 0.9s ease-out 0s;	
} 
 
a.sigplus-image:hover > img   {
    filter:  grayscale(100%)!important;
    -webkit-filter: grayscale(100%)!important;
    -moz-filter:    grayscale(100%)!important;
    -ms-filter:     grayscale(100%)!important;
    -o-filter:      grayscale(100%)!important;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  -o-transition: all 0.9s ease-out 0s;
  transition: all 0.9s ease-out 0s;	
}

/* sombra nos thumbnails */
a.sigplus-image {
box-shadow: 2px 2px 4px 0 rgb(0 0 0 / 40%)!important;
}

a.sigplus-image:hover,
a.sigplus-image:active {
box-shadow: none!important;
}

/* Aumenta a altura da área de informações da janela de pop de imagens */
.boxplusx-caption {
    max-height: 150px;
}

/*//////////////////////////////////////////////////////////////////////////////
///
///  Minifrontpage (Manchete de artigos e notícias)
///  O CSS também pode ser controlado no próprio módulo, na aba CSS Adjustments
///
//////////////////////////////////////////////////////////////////////////////*/

/* Altera o tamanho da fonte de título apenas
para o módulo ID 95 (Outros Artigos) */
.mfp_mid_95 .mfp_default_title {
font-size: 14px !important;
}

/* Suaviza a transição de efeitos, como sombra, por exemplo */
.mfp-grid .mfp_cat a , 
.mfp-grid .mfp_cat a {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

/* Muda o link da categoria (botão na parte superior da imagem) 
para fundo verde padrão do site e coloca uma sombra para indicar botão */  
.mfp-grid .mfp_cat a {
background: #A6D000!important;
box-shadow: 2px 2px 3px 0 rgb(0 0 0 / 50%)!important;}

/* Quando a Categoria do artigo for "Dicas Rápidas", 
muda o link (botão na parte superior da imagem) para fundo vermelho */
.mfp-grid span > a[href*="dicas-rapidas"] {
background: red!important;
}

/* Tira a sombra da imagem/botão quando clica ou passa o mouse
e muda o fundo do botão para cinza escuro */
.mfp-grid:hover .mfp_cat a:hover, 
.mfp-grid:active .mfp_cat a:active, 
.mfp-grid:hover .mfp_cat a:hover, 
.mfp-grid:active  .mfp_cat a:active {
box-shadow: none!important;
background-color: #181818!important;
}

 /* Converte a miniatura em tons de cinza quando passa o mouse em cima */
.azn-dessatura-link-imagem a.mfp_thumb_pos_top img  {
    filter:  none!important;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  -o-transition: all 0.9s ease-out 0s;
  transition: all 0.9s ease-out 0s;	
} 
 
.azn-dessatura-link-imagem a.mfp_thumb_pos_top:hover img  {
    filter:  grayscale(100%)!important;
    -webkit-filter: grayscale(100%)!important;
    -moz-filter:    grayscale(100%)!important;
    -ms-filter:     grayscale(100%)!important;
    -o-filter:      grayscale(100%)!important;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  -o-transition: all 0.9s ease-out 0s;
  transition: all 0.9s ease-out 0s;	
}

/*//////////////////////////////////////////////////////////////////////////////
///
///  CComments - Componente de comentários
///
//////////////////////////////////////////////////////////////////////////////*/

.ccomment-comments-list ul {
margin-left: 25px;
}