/* Barras de rolagem */

::-webkit-scrollbar{ width: 15px; }
::-webkit-scrollbar-track:enabled{ background-color: #EEE; }
::-webkit-scrollbar-thumb:vertical{ background-color: #09855C; }
::-webkit-scrollbar-thumb:horizontal{ background-color: #09855C; }



:hover { -webkit-transition: 0.1s ease-in; -moz-transition: 0.1s ease-in; -o-transition: 0.1s ease-in }

::selection { background: #09855C; color: #FFF; } ::-moz-selection { background: #09855C; color: #FFF; }

*{ font-family: 'Montserrat', sans-serif; line-height: 110%; }



/* Margens e distribuição de elementos */

main{
    width: 100%;
}

.content{
    width: 85%;
    margin: 0 auto;
    max-width: 1500px;
}

.d_flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.d_flex_center{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Estilo de galeria de Imagens */

.gallery img{
    opacity: 0.75;
    padding: 7px;
}

.gallery img:hover{
    opacity: 1;
}

.galeria{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 25px;
}

.galeria article{
    flex-basis: 18%;
}


/* Botões TOPO e VOLTAR PÁGINA */

.area_botoes{
    margin-bottom: -12px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.area_botoes span{
    margin: 0 2px;
    color: #FFF;
    font-size: 12px;
    cursor: pointer;
    padding: 7px 10px;
    background: #CCC;
    border-radius: 10px;
    font-weight: bold;
}

.area_botoes span:hover{
    background: #09855C;
}


/* Paginação */

.paginacao{
    width: 100%;
}

.paginacao span a{
    background: #FFF;
    color: #999;
    margin: 5px 2px;
    border: 1px solid #EEE;
}

.paginacao span a:hover{
    background: #999;
    color: #FFF;
}

.exibindo{
    width: 100%;
    text-align: center;
    color: #999;
    margin-bottom: 35px;
    font-size: 14px;
    margin-bottom: 35px;
}


/* Tamanhos dos títulos */

h1{
    font-size: 40px;
    font-weight: normal;
}

h2{
    width: 100%;
    font-size: 30px;
    color: #2D3447;
    font-weight: 700;
    letter-spacing: -2px;
}

h3,
h3 a{
    color: #09855C;
    font-size: 22px;
    letter-spacing: -1px;
    display: block;
}

h3 a:hover{
    color: #094F38;
}

h4{
    color: #555;
    font-size: 16px;
}

p{
    font-size: 18px;
    color: #000;
    margin-bottom: 10px;
}

p a{
    color: #4D3E2D;
    font-weight: bold;
}

p a:hover{
    color: #FFCC29;
}

.line{
    width: 100%;
    overflow: hidden;
}

span a{
    display: block;
    padding: 12px;
    padding-bottom: 10px;
    background: #09855C;
    border-radius: 5px;
    color: #FFF;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
}

span:hover a{
    background: #04704C;
}

.cke_reset_all:hover span a {
    background: #EEE;
}


/* Página de Erro */

.erro404,
.sem-registro{
    overflow: hidden;
    max-width: 600px;
    margin: 50px 0;
}

.erro404 h2,
.sem-registro h2{
    font-size: 100px;
    font-weight: bold;
    color: #CF2C37;
    letter-spacing: -7px;
    margin: 0;
    line-height: 75%;
}

.erro404 h3,
.sem-registro h3{
    text-transform: uppercase;
    font-size: 30px;
    margin: 0;
    margin-top: 35px;
    color: #4D4D4D;
    letter-spacing: -1px;
    font-weight: 400;
}

.erro404 p,
.sem-registro p{
    margin: 0;
    margin-top: 20px;
    color: #4D4D4D;
    font-weight: 400;
    text-align: left;
    max-width: 500px;
}



/* Estilo de Formulário */

.invalid{ 
    width: 100%;
    display: block;
    font-size: 14px; 
    color: #DD4B39; 
    margin-top: 10px;
    font-weight: 600;
}

form{
    overflow: hidden;
}


form .informacao{
    background: #EEE;
    padding: 25px;
    padding-left: 0;
    border-left: 3px solid #09855C;
    margin-bottom: 35px;
}

form .informacao .icone{
    flex-basis: 17.5%;
    text-align: center;
}

form .informacao .icone img{
    max-width: 70px;
}

form .informacao .texto{
    flex-basis: 82.5%;
}

form .informacao .texto p{
    font-size: 15px;
    margin: 0;
}


.campos-obrigatorios{
    width: 100%;
    margin-bottom: 25px;
    padding-left: 10px;
    border-left: 5px solid #09855C;
    font-weight: 500;
}


form input:required,
form select:required,
form textarea:required{
    border-left: 5px solid #09855C;
}

form input:disabled,
form select:disabled,
form textarea:disabled{
    background: #EEE;
    cursor: no-drop;
}

form .linha{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

form .linha .dois{
    flex-basis: 48.5%;
}

form .linha .tres{
    flex-basis: 31.33%;
}

form .linha .quatro{
    flex-basis: 23%;
}

form .linha .dez{
    flex-basis: 8.5%;
}

form .linha .vinte{
    flex-basis: 18.5%;
}

form .linha .trinta{
    flex-basis: 28.5%;
}

form .linha .quarenta{
    flex-basis: 38.5%;
}

form .linha .cinquenta{
    flex-basis: 48.5%;
}

form .linha .sessenta{
    flex-basis: 58.5%;
}

form .linha .setenta{
    flex-basis: 68.5%;
}

form section{
    margin-bottom: 35px;
}

form article{
    margin-top: 15px;
    width: 100%;
}

form article label{
    padding-bottom: 5px;
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
}

form article label font{
    font-weight: bold;
    color: #CF2C37;
    cursor: help;
}

form input, textarea{
    width: 100%;
    padding: 15px;
    background: #FFF;
    border: 1px solid #CCC;
    font-size: 15px;
    color: #000;
    border-bottom: 5px solid #CCC;
    border-radius: 10px;
}

form select{
    width: 100%;
    height: 55px;
    background: #FFF;
    border: 1px solid #999;
    font-size: 15px;
    padding: 15px;
    color: #000;
    border: 1px solid #CCC;
    border-bottom: 5px solid #CCC;
    border-radius: 5px 10px 5px 10px;
}

form textarea{
    height: 150px;
}

form input[type=submit]{
    width: auto;
    padding: 15px 25px;
    margin-top: 25px;
    display: block;
    float: right;
    background: #999;
    color: #FFF;
    cursor: pointer;
    font-size: 15px;
    border: 0;
    font-weight: bold;
}

form input[type=submit]:hover{
    background: #4D4D4D;
}

form .aceite-termos{
    flex-basis: 50%;
    font-size: 14px;
    padding: 0;
    margin: 0;
    margin-top: 25px;
}

form .aceite-termos a{
    color: #000;
    font-weight: bold;
}

form .aceite-termos a:hover{
    color: #09855C;
}


/* Tooltip container */

.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #09855C;
    text-align: center;
    color: #FFF;
    padding: 10px;
    font-size: 12px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    top: 100%;
    margin-top: 7px;
    left: 50%;
    margin-left: -100px;
    font-weight: normal;
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #09855C transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}



/* Menu Mobile */

.fundo_modal{
    position:fixed !important; 
    position:absolute;
    top:0px; 
    z-index:10; 
    width:100%; 
    height:100%; 
    opacity:0.5; 
    background-color:#000; 
    right:0;
}

.menu_mobile{
    position: fixed !important; 
    position: absolute; 
    top: 0px; 
    z-index: 20; 
    width: 90%; 
    max-width: 400px;
    height: 100%; 
    left: -100%;
    border-right: 5px solid #EEE;
    background: #FFF;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden; 
    overflow-y: auto;
    text-align: center;
}

.menu_mobile .close{
    padding: 10px 15px 20px 25px;
    font-size: 20px;
    font-weight: bold;
    right: 0;
    top: 0;
    background: #09855C;
    color: #FFF;
    cursor: pointer;
    position: absolute;
    border-radius: 0 0 0 50px;
}

.menu_mobile .close:hover{
    background: #EEE;
    color: #09855C;
}

.menu_mobile img{
    width: 250px;
    max-width: 80%;
    margin: 50px 0;
}

.menu_mobile nav{
    flex-basis: 100%;
    list-style: none;
    margin:0;
    text-align: center;
    margin-bottom: 25px;
}

.menu_mobile nav li a{
    padding: 15px;
    text-align: left;
    color: #000;
    display: block;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px dotted #CCC;
}

.menu_mobile nav li a:hover{
    background: #09855C;
    color: #FFF;
}



/* Avisos */

.erro{
    background: #CF2C37;
    width: 100%;
    padding: 15px;
    color: #FFF;
    text-align: center;
}

.sucesso{
    background: #09855C;
    width: 100%;
    padding: 15px;
    color: #FFF;
    text-align: center;
}

.atencao{
    background: #FF9933;
    width: 100%;
    padding: 15px;
    color: #000;
    text-align: center;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */



/* Header */


section.superior{
    border-bottom: 1px solid #CCC;
    color: #555;
    font-size: 12px;
    padding: 7px 0;
}

section.superior span.associado a{
    display: block;
    padding: 10px 25px;
    font-size: 18px;
    background: #2D3447;
    color: #FFF;
    border-radius: 10px;
}

section.superior span.associado a:hover{
    background: #09855C;
}

section.superior .contact{
    font-size: 16px;
    margin-left: 25px;
}

.abrir_mobile{
    display: none;
}

span.bt_pesquisa_associados{
    width: 180px;
    border-radius: 0 0 10px 10px;
    padding: 13px 0 15px 0;
    background: #09855C;
    text-align: center;
    display: block;
    font-size: 14px;
    color: #FFF;
    font-weight: bold;
    cursor: pointer;
}

span.bt_login{
    margin-left: 5px;
    width: 80px;
    border-radius: 0 0 10px 10px;
    padding: 13px 0 15px 0;
    background: #09855C;
    text-align: center;
    display: block;
    font-size: 14px;
    color: #FFF;
    font-weight: bold;
    cursor: pointer;
}


header{
    width: 100%;
}

header .logo img{
    width: 250px;
}

header .d_flex{
    align-items: center;
    padding: 25px 0 0 0;
}

header form{
    flex-basis: 420px;
    margin: 0;
    margin-top: 13px;
}

header form input{
    flex-basis: 355px;
    padding: 30px 20px;
    font-size: 15px;
    color: #333;
    background: #EEE;
    border-radius: 10px 0 0 10px;
}

header form input:required{
    border: 0;
}

header form input[type=submit]{
    flex-basis: 50px;
    padding: 30px 25px;
    text-align: center;
    background: #999;
    color: #FFF;
    cursor: pointer;
    font-size: 15px;
    border: 0;
    font-weight: bold;
    margin: 0;
    border-radius: 0 10px 10px 0;
}

header form input[type=submit]:hover{
    background: #555;
}

header form span.todos a{
    width: 100%;
    font-weight: 600;
    font-size: 12px;
    background: #FFF;
    color: #999;
    padding: 0;
    margin: 0;
    padding-top: 7px;
    border: 0;
}

header form span.todos a:hover{
    color: #555;
}

header .acesso_portais{
    flex-basis: 340px;
    padding: 0;
    margin: 0
}

header .acesso_portais .portal{
    flex-basis: 165px;
    padding: 0;
}

header .acesso_portais .portal:hover{
    transform: scale(1.15);
}

header .acesso_portais .portal .informacoes{
    margin-left: 10px;
}

header .acesso_portais .portal .informacoes .nome{
    font-size: 15px;
    color: #2D3447;
    font-weight: 700;
}

header .acesso_portais .portal .informacoes p{
    margin: 0;
    margin-top: 5px;
    font-size: 12px;
    color: #999;
}

header .acesso_portais .portal .informacoes span a{
    width: 80px;
    padding: 10px;
    font-size: 12px;
    border: 0;
    margin-top: 5px;
}

header .logado{
    flex-basis: 325px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    border: 1px solid #CCC;
    border-bottom: 5px solid #EEE;
    padding: 25px 15px;
    border-radius: 10px;
}

header .logado .foto{
    flex-basis: 100px;
    border-right: 10px solid #04704C;
    margin-left: -40px;
}

header .logado .detalhes{
    flex-basis: 225px;
    padding: 0 10px;
    font-weight: normal;
}

header .logado .tempo{
    color: #999;
    font-size: 14px;
    font-weight: normal;
}

header .logado ul{
    margin: 10px 0;
}

header .logado ul li a{
    background: #CCC;
    color: #FFF;
    display: block;
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 500px;
    margin: 0 2px;
}

header .logado ul li a:hover{
    background: #04704C;
}


/* Navegação */

nav.menu{
    background: #FFF;
    border-top: 2px solid #EEE;
    padding: 0;
    bottom: -25px;
    position: relative;
    z-index: 10;
    border-radius: 15px;
}

nav.menu ul li a{
    color: #555;
    display: block;
    font-size: 16px;
    font-weight: 500;
    padding: 25px 20px;
}

nav.menu ul li a:hover{
    background: #09855C;
    color: #FFF;
}

.abre_menu_mobile{
    width: 110px;
    text-align: center;
    color: #555;
    display: none;
    font-size: 18px;
    font-weight: 500;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    background: #EEE;
    margin-left: 25px;
}

.abre_menu_mobile:hover{
    background: #999;
    color: #FFF;
}


.idtitulo, .idarea, .idcaminho{
    display: none;
}

section.identificacao{
    background: #2D3447;
    padding: 50px 0 25px 0;
    color: #FFF;
    z-index: 0;
    text-transform: uppercase;
}

section.identificacao-oktober{
    background: linear-gradient(to right, #000, #D61515, #FFE500);
    padding: 55px 0 30px 0;
    color: #FFF;
    z-index: 0;
    text-transform: uppercase;
}

section.identificacao .idarea{
    font-size: 15px;
}

section.navegacao{
    background: #EEE;
    padding: 10px 0;
    font-size: 14px;
    text-transform: uppercase;
}

section.navegacao-menu{
    background: #09855C;
    padding: 10px 0;
    font-size: 14px;
    text-transform: uppercase;
}

ul.submenu{
    width: 650px;
    padding: 0;
    margin: 0
}

ul.submenu .chamada{
    color: #094F38;
    display: block;
    font-size: 13px;
    font-weight: bold;
    padding: 11px 10px 11px 0;
}

ul.submenu li a{
    color: #FFF;
    display: block;
    font-size: 15px;
    font-weight: 500;
    padding: 10px;
    border-radius: 10px;
}

ul.submenu li.selecionado a{
    background: #04704C;
}

ul.submenu li a:hover{
    background: #FFF;
    color: #09855C;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */



/* Rodapé */

.gatilho{
    flex-basis: 100%;
    padding: 50px 0;
    background: #EEE;
}

.gatilho h2{
    text-align: center;
}

.gatilho p{
    max-width: 500px;
    margin: 5px auto 25px auto;
    color: #555;
    text-align: center;
    font-size: 16px;
}

.gatilho form{
    width: 750px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}

.gatilho input{
    border: 1px solid #CCC;
    background: #FFF;
    color: #555;
    padding: 18px;
    font-size: 14px;
    flex-basis: 300px;
    margin-right: 10px;
}

.gatilho input[type=submit]{
    flex-basis: 100px;
    background: #09855C;
    border-bottom: 5px solid #04704C;
    color: #FFF;
    cursor: pointer;
    font-size: 15px;
    margin: 0;
}

.gatilho input[type=submit]:hover{
    background: #04704C;
    border-bottom: 5px solid #09855C;
}



footer{
    padding: 50px 0 45px 0;
    font-size: 15px;
    align-items: center;
}

footer .about{
    flex-basis: 24%;
}

footer .about img{
    width: 200px;
    margin-bottom: 20px;
}

footer ul{
    flex-basis: 190px;
}

footer ul h3{
    color: #09855C;
    margin-bottom: 7px;
}

footer ul h3.inscreva-se{
    margin-top: 20px;
}

footer ul li a{
    list-style-type: none;
    font-size: 15px;
    color: #555;
    padding: 7px;
    display: block;
    font-weight: 500;
}

footer ul li a:hover{
    background: #EEE;
    padding: 7px;
}

.copyright{
    padding: 25px 0;
    background: #2D3447;
    color: #FFF;
    font-size: 13px;
    text-align: center;
    border-top: 5px solid #EEE;
}

.copyright .criacao{
    margin-top: 5px;
}

.copyright .criacao a{
    font-weight: bold;
    color: #FFF;
}

.copyright .criacao a:hover{
    color: #09855C;
}