@font-face{
    font-family:bookman;
    src: url('../fonts/bookmanos/bookosb.ttf');
}

body{
    margin: 0;
    padding: 0;
}   
.row{
    margin: 0 !important;
    padding: 0;
}
#site{
    max-width: 1300px;
    margin: 0 auto !important;
    padding: 0 !important;

}

#end-topo{
    background: #000;
    color: #fff;
    width: 100%;

}

#end-topo a{
    text-decoration: none;
    color: yellow;
    font-size: 13px;

}


#logo-topo{
   /* height: 100px;  -  Apaguei para aumentar o tamanho do logo no site */
    width: 100%;
}

#divlogo{
    /*width: 280px; -  Apaguei para aumentar o tamanho do logo no site */

}

#divlogo img{
    margin: 0 auto;
}

#bloco-menu{
    width: 100%; 
}
#menu{
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

#banner-blog{
    height: 350px;
    background: url('../img/comum/empiblog.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
}

/* Padding zero para tirar a borda que ja vinha do bootstrap */
.panel-heading{
    padding: 0 !important;
    
}
/* Inicio Nome da chamada do artigo */
.panel-title{
    height: 115px;
    border: 0;
}

/*  formata o texto e a área que se pode clicar para abrir o colapse*/
#temas h4 a{
    text-decoration: none;
    font-size: 24px;
    color: #FEF200;
    font-family: bookman; /* Fonte carregada no início do CSS e chamada para uso aqui*/
    font-weight: bolder;
    padding-left: 15px;
    position:absolute; /* Exibe como se fosse camada que é organizada pelo Z-index */
    z-index: 10;/* organiza a camada, quando maior o número o item ficará na frente*/
    width: 500px; /* colocado junto com o Height para aumentar a área clicável */
    height: 100px;
    float: left; /* referencia para que o "a" possa ter largura e algura clicável. */
    line-height: 115px;
   
    
    text-shadow:
       -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000; 
}



.panel-title img{
    position: absolute;
    z-index: 9;
}
/* Fim Nome da chamada do artigo */

/* Inicio formatação dos textos de dentro das faixas */

.panel-body h1{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    float: left;
    font-size: 20px;
    text-transform: uppercase; /*tudo maiúsculo*/
    color: #000;
    text-align: center;
    width: 100%;
}

.panel-body h2{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    float: left;
    font-size: 20px;
    color: #333;
    text-align: justify;
    width: 100%;
    margin-bottom: 25px;
}

.panel-body hr{
    border: 1px solid #ccc;
    width: 50%;
}

.panel-body h3{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    float: left;
    font-size: 18px;
    text-transform: uppercase; /*tudo maiúsculo*/
    color: #000;
    text-align: center;
    width: 100%;
}

.panel-body img{
    margin: 0 auto; /*zero pixel em cima e em baixo e o auto divida a horizontal centralizando */
}

.panel-body p{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    float: left;
    font-size: 18px;
    color: #333;
    text-align: justify;
    width: 100%;
    margin-bottom: 25px;
}

.corredor-h3{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    float: left;
    font-size: 18px;
    text-transform: uppercase; /*tudo maiúsculo*/
    color: #000;
    text-align: center;
    width: 100% !important;
   
}

.corredor-p{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    float: left;
    font-size: 18px;
    color: #333;
    text-align: justify;
    width: 100% !important;
    margin-bottom: 5px !important;
    
}


/* Fim formatação dos textos de dentro das faixas */



#rodape{
    width: 100%;
    float: left;
    background: #000;
    height: 80px;

}

#rodape p{
    text-align: center !important;
    color:#fff;
    width: 100% ;
    font-size: 14px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}
#rs-redessociais{
    width: 25%;
    margin: 0 auto ;
    height: 35px;

}

#rodape a{
    text-decoration: none;
}

.rs-rodape{
    width: 10% ;
    margin-left:15%;
    float: left;

}


.rs-rodape i{
    color:yellow;
    font-size: 21px;
    margin-left: 17%;

/* o comando abaixo cria um efeito de transição entre o estado normal e o estado focus, neste caso de 1 segundo, servindo para vários navegadores (webkit - Crome e safari, Moz - Mozila, MS - Microsoft, o - Opera) */
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;

}
.rs-rodape i:hover{
    color: red;
    font-size: 25px;


}


/* o LARG-INPUT foi desabilitado*/
/*.larg_input{  estamos formatando os campos de formularios com excessão da TEXTAREA para isso usamos uma CLASS, neste caso denominada larg_input*/
/*width: 380px; 
height: 35px;
margin: 0 0 10px 10px;
border: 0;*/ /* o comando informa qual a borda do objeto deve ser aplicada, neste caso 0 remove a borda padrão*/
/*background: #ccc;

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 18px;
color: #333;
text-indent: 5px;*/

/* o comando abaixo cria um efeito de transição entre o estado normal e o estado focus, neste caso de 1 segundo, servindo para vários navegadores (webkit - Crome e safari, Moz - Mozila, MS - Microsoft, o - Opera) */
/* -webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}*/

/*// programação MEDIA QUERIES - os comandos abaixo são motificações para cada tamanho de tela (varia de acordo com a tela), os comandoa acima são padronizados independente o tamanho da tela (não varia de acordo com a tela) )*/



/*para telas  até 767px de largura ( pequenos smart fones e outros smart fones mais comuns)*/
@media only screen and (max-width: 767px) {
body{
    background: #fff;
}
}

/*para telas de 768 até 991px de largura ( tablets e fablet)*/
@media (min-width:768px) and (max-width: 991px) {
body{
    background: #fff;
}
#end-topo{
    /*    height: 35px; */
        margin-bottom: 0;
    }
    #end-topo address{
        float: left;
        margin-left: 20px;
        font-weight: bold;
        font-size: 10px;
        line-height: 35px; /* deixa o texto alinhado na vertical no meio do valor especificado*/
        margin-bottom: 0;
    }
    .email-fone{
        float: right;
        margin-left: 30px;
        margin-right: 20px;
        font-weight: bold;
        font-size: 10px;
        line-height: 35px;
        margin-bottom: 0;
    } 

#redessociais{
    width: 40% ;
    margin: 0 auto;
    background: red;

}

#redessociais i{
    color:yellow;
    font-size: 21px;
    margin-left: 15%;
}

/* Inicio Nome da chamada do artigo */
.panel-title{
    height: 150px;
    background: #000;
}

/*  formata o texto e a área que se pode clicar para abrir o colapse*/
#temas h4 a{
    font-size: 35px;
    width: 500px; /* colocado junto com o Height para aumentar a área clicável */
    height: 150px;
    line-height: 150px; /* baixando a altura da linha para centralizar */
}

/* Fim Nome da chamada do artigo */

    
}

/*para telas a partir de 992 ( computadores e TVs)*/

@media (min-width: 992px) {
body{
    background: #fff;
}

#end-topo{
    margin-bottom: 0;
}
#end-topo address{
    float: left;
    margin-left: 20px;
    font-weight: bold;
    line-height: 35px; /* deixa o texto alinhado na vertical no meio do valor especificado*/
    margin-bottom: 0;
}
.email-fone{
    float: right;
    margin-left: 30px;
    margin-right: 20px;
    font-weight: bold;
    line-height: 35px;
    margin-bottom: 0;
}
    
/* Inicio Nome da chamada do artigo */
.panel-title{
    height: 200px;
}

/*  formata o texto e a área que se pode clicar para abrir o colapse*/
#temas h4 a{
    font-size: 35px;
    width: 500px; /* colocado junto com o Height para aumentar a área clicável */
    height: 200px;
    line-height: 200px; /* baixando a altura da linha para centralizar */
    text-align: center;
}

/* Fim Nome da chamada do artigo */  
    
/* início formatação dos textos de dentro das faixas */
    
.panel-body hr{
    width: 80%;
    
}
    
.panel-body h3{
    width: 50%;
    font-size: 22px;
    margin-top: 40px;
    
}

.panel-body img{
    float: right;
    width: 50%;
}

.panel-body p{

    width: 50%;
    margin-top: 35px;
    font-size: 20px;
    
}
    


.corredor-p-50{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    float: left;
    font-size: 18px;
    color: #333;
    text-align: justify;
    width: 50% !important;
    margin-bottom: 5px !important;
    
}
    
.corredor-p-48{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    float: left;
    font-size: 18px;
    color: #333;
    text-align: justify;
    width: 48% !important;
    margin-bottom: 5px !important;
    margin-right: 2% !important;
}
    

/* Fim formatação dos textos de dentro das faixas */

#redessociais{
    width: 20% ;
    margin: 0 auto;
    background: red;

}

#redessociais i{
    color:yellow;
    font-size: 21px;
    margin-left: 15%;
}
}