/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 15/07/2016, 15:13:16
    Author     : Diego
*/

:root{
    --cor-predominante: #27408B;   /* cor para outubro rosa DB7093*/
    --cor-fonte: #fff; /* cor anterior branca #fff*/
}

#pagina { 
    overflow-y: scroll;
}
/********************* personalização do cabeçalho ********************/

/* personalização do menu de opções */

/*personalização do botão "Imprimir Boletos" */
.boleto {
    float: right;
    width: 10em;
    height: 100%;
    background: var(--cor-predominante);
    color: var(--cor-fonte);
    font-size: 20px;
    text-align: center;
    cursor: pointer;
}
@media only screen and (min-width: 72.001em) and (max-width: 90em) {
    .topo1 img {
        min-height: 16vw; 
    }
    .topo2 img{
        min-height: 16vw;
    }
}
@media only screen and (min-width: 50.001em) and (max-width: 72em) {
    .topo1 img {
        min-height: 20vw; 
    }
    .topo2 img{
        min-height: 20vw;
    }
}
@media only screen and (min-width:35.001em) and (max-width: 50em) {
    .topo1 {
        width: 35%;
        min-height: 25vw;
    }
    .topo1 img {
        min-height: 25vw;
    }
    .topo2{
        width: 65%;
        min-height: 25vw;
    }
    .topo2 img {
        min-height: 25vw;
    }
}
@media only screen and (max-width: 35em) {
    .topo1 img {
        min-height: 40vw; 
    }
    .topo2 img{
        min-height: 30vw;
    }
}
.title-area { /* faz alterações na barra do titulo do menu principal mobile */
    background: var(--cor-predominante)!important; /* define a cor de fundo da barra do menu principal mobile */
}
.top-bar { /* faz alterações na barra do menu */
    background: var(--cor-predominante)!important; /* define cor de fundo */
}
.top-bar li a { /* faz alterações no menu principal */
    background: var(--cor-predominante)!important; /* define cor de fundo */
    color: var(--cor-fonte)!important; /* define cor da letra */
    text-transform:uppercase!important; /* deixa todas as letras maiúsculas */
    font-weight: bold!important; /* deixa todas as letras em negrito */
    font-family: Verdana!important; /* define a fonte das letras */
    font-size: 90%!important; /* define o tamanho das letras */
    padding-left: 35px!important; /* define o espaçamento à esquerda entre os itens do menu */
    padding-right: 35px!important; /* define o espaçamento à direita entre os itens do menu */
    /* Observação: o '!important' indica que está sobrescrevendo a formatação padrão */
} 
.top-bar .dropdown li a { /* faz alterações nos submenus */
    /* background: #fff!important; *** se precisar, altera cor de fundo dos submenus */
    /* color: #1cc7ff!important; *** se precisar, altera cor da letra do submenus */
    text-transform: none!important; /* deixa todas as letras da forma como foi escrito */
    font-weight: normal!important; /* tira o negrito das letras */
    /* Observação: quando não há especificações os submenus herdam a 
    formatação do menu principal */
}
.top-bar-section li a { /* faz alterações no item do menu principal que está selecionado pelo mouse */
    color: var(--cor-fonte)!important; /* define cor da fonte */
    background: var(--cor-predominante)!important; /* define cor de fundo */
}
.top-bar-section li a:hover { /* faz alterações no item do menu principal que está selecionado pelo mouse */
    color: #008CBA!important; /* define cor da fonte - cor outubro rosa #000 */
    background: #1cc7ff!important; /* define cor de fundo - cor outubro rosa #FFB6C1*/
}

/*.sticky {
    z-index: 10000; /*sobrepõe os demais elementos da página */
/*} */
/*** se for preciso, faz alterações no item dos submenus que está 
 selecionado pelo mouse ****
.top-bar .dropdown li a:hover {
    color: #008CBA!important;
    background: #1cc7ff!important;
} */
.fixarmenu { /* fixa o menu no topo e permite que o mesmo acompanhe ao deslizar a pagina */
    width: 100%; /* define a largura no tamanho do elemento pai */
    max-width: 100%; /* define a largura máxima que o elemento pode ter */
    position:fixed; /* fixa o menu no topo */
    top: 0; /* coloca o menu no topo mesmo quando estiver deslizando pela página*/
    z-index: 10000; /*sobrepõe os demais elementos da página*/
} 
/* fim do menu */

/******************* fim personalização do cabeçalho ********************/

/****************** personalização da seção conteúdo ********************/

/* personalização das colunas do conteúdo */
.colconteudo { /* faz alterações nas colunas dos conteúdos */
    padding: 0px; /* define o espaçamento entre a coluna e o conteúdo em zero */
}
@media only screen and (min-width: 40.063em) { /* quando a tela do browzer for maior 
    define um espaço entre as colunas*/
    .colconteudo {
        padding-right: 5px; 
    }
}
.tituloQuadro { /* faz alterações no título do quadro */
    width: 100%;
    color: var(--cor-fonte); /* define a cor da fonte */
    background-color: var(--cor-predominante); /* define a cor de fundo */
    height: 40px; /* define a altura do fundo*/
    line-height: 40px; /* define o alinhamento vertical do texto do título */       
}

.textoComum {
/*    color: #00008B; /* cor outubro rosa #C71585*/ 
}

/* configura a borda da imagem da foto da diretoria */
.bordaImagem {
    width: 100%; 
    border: 2px solid #74bfdd; /* cor outubro rosa #C71585*/
    border-radius: 5px;
}

.fundoNoticias {
    margin: 0px; 
    margin-top: 5px; 
    text-align: justify; 
    float: left; 
    padding: 0px; 
    background-color: #EEEEEE; /* cor outubro rosa #FFF5EE */
}

/*.imagemNoticias {
    background-image: url("../../img/grupowhats.jpg"); Colocar uma imagem de fundo numa div
    background-size: 120px 80px; 
    background-position: left center;
}*/

/* Cores do texto comum de links*/
a {
/*    color: #C71585!important; cor do outubro rosa */
}
a:hover, a:focus {
/*    color: #FF69B4!important; cor do outubro rosa*/
}

/*cor do brilho ao redor das fotos que servem de link*/
.th:hover,.th:focus{box-shadow:0 0 6px 1px rgba(0,140,186,0.5)} /* cor para outubro rosa 255,182,193*/

/*cor da fonte que lista todas as categorias e funções representadas pelo sindicato na página historico.html*/
.categoria {
    color: #00008B; /*cor outubro rosa #C71585*/
}

/*configurações do botão continuar da tela que aparece quando o usuário clica em imprimir boletos*/
button, .button {
    background-color: var(--cor-predominante);
    border-color: var(--cor-predominante);
    color: #fff!important;
}
button:hover, button:focus, .button:hover, .button:focus {
    background-color: #1cc7ff; color: #00008B!important
    /*outubro rosa background-color: #FFB6C1; color: #C71585!important*/}

.tituloDuvidas {
    color: #00008B; /*cor outubro rosa #C71585*/
}
.detalhe {
    color: #007ba4 /* cor outubro rosa #FF69B4*/;
}

/* fim */

/***************** fim personalização da seção conteúdo ****************/

/******************* personalização da seção footer **********************/
.footer {
    background-color: var(--cor-predominante);
    padding-top: 1rem; 
    text-align: center;
    color: var(--cor-fonte); 
    height: auto;
    width: 100%;
}
.footer i {
    font-size: 30px;    
}
.footer h4 {
    color: #fff;
    font-size: 1em;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 2.5rem;
    margin-bottom: 10px;
}
.footer p {
    font-weight: 600;
    font-size: .8em;
    color: #fff;
}
.footer a {
    font-size: .8em;
    color: var(--cor-fonte)!important;
}
/* @media only screen and (min-width: 40em) {
    .footer .columns:nth-child(n+2) {
        border-left: 1px solid #b3b3b3;
        min-height: 200px;
        max-height: 500px;
    }
}*/
.footer-links a:hover {
    text-decoration: underline;
}
.footer-links {
    list-style-type: none;
    text-align: left;
    display: table; /*essa linha e a seguinte centralizam a div dentro da outra div*/
    margin: 0 auto;
}
.footer-links li {
    margin-top: .5em;
}
.contact {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: none;    
    margin-left: -15px;
}
.contact td {
    background-color: var(--cor-predominante);
    vertical-align: middle;
    font-weight: 600;
    font-size: .8em;
    color: var(--cor-fonte);
    border: none;
}
.contact i {
    background-color: var(--cor-predominante); /* cor anterior #00008B;*/
    padding: .15em .35em;
    border-radius: 30%;
    color: var(--cor-fonte);
}
@media only screen { /*se o texto passar do tamanho da coluna, aparece o scroll*/
    .footer1 {
        overflow-x:auto;
    }
    .footer2 {
        overflow-x:auto;
    }
    .footer3 {
        overflow-x:auto;
    }
}
@media only screen and (min-width: 40.063em) and (max-width: 60em) {
    .footer1 {
        width: 50%;
        overflow-x:auto;
    }
    .footer2 {
        width: 50%;
    }
    .footer3 {
        width: 100%;
    }
}

/******************* fim presonalização da seção footer ****************/
.piscar {

    animation: opacity 2s ease infinite;
    opacity: 1;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;    
    color: #FFFF00; 
    font-weight: 900;
    font-size: 100%;
}
@media only screen and (min-width: 30.0625em) and (max-width: 60em) {
    .piscar {
        font-size: 100%;
    }
}
@media only screen and (max-width: 30em) {
    .piscar {
        font-size: 100%;
        color: #FFFFFF; 
        font-weight: 100;
    }
}

@keyframes opacity {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1;
    }
}