@charset "utf-8";
/* Este arquivo estiliza a página dos mapas */

/* estilo para tela maior */
@media (min-width: 321px){

    body {/* estiliza a tag body */
        font-family: Trebuchet MS;/* define estilo da fonte */
        margin: 0px;/* retira as margem do body */
        overflow: hidden;
    }
    nav {/* estiliza a tag nav */
        width: 100%;/*largura dos menus*/
    }
    .item label {/*estilo dos menus*/
        font-size: 14px;/* define o tamanho da fonte */
        color: #333;/* define cor da fonte cinza */
        height: 20px;/* altura */
        display: block;/* fixa */
        padding: 5px;/* define espaçamento interno */
        background: #E1E1E1;/* define fundo cinza claro */
        cursor: pointer;/* cursor do mouse tipo link*/
        border-radius: 5px;/* cantos arredondados */
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius:5px;
        -o-border-radius: 5px;
    }
    .item ul{/* estiliza os sub menus */
        margin: 0px;/* retira as margem */
        padding: 0px;/* define espaçamento interno */
        list-style:none;/* oculta caracteres da lista */
        overflow:hidden;/* oculta os sub menus */
        max-height:0;/* oculta os sub menus */
        background: #fefefe;/* background claro */
        border-radius: 5px;/* cantos arredondados */
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius:5px;
        -o-border-radius: 5px;
    }
    .item ul li a {/* estiliza os links dos menus na tag 'a' */
        font-size: 14px;/* define o tamanho da fonte */
        color: #333;/* define cor da fonte cinza */
        background:#fff;/* define fundo branco */
        text-decoration:none;/* link sem efeito */
    }
    .item label:hover,
    .item ul li a:hover {/* configura entrada do cursor do mouse na tag 'a' e sub menus */
        text-decoration:underline;/* efeito sublinhado */
    }
    .item input {
        display: none;/* oculta o RADIO da tag input */
    }
    .item input:checked ~ ul{/* estiliza o menu sanfona */
        height:auto;
        max-height:100%;
    }
    .item label:before {/* estiliza o menu antes de clicado */
        content: "\002B";/* sinal + */
        color: #444;/* define cor da fonte cinza */
        font-weight: bold;/* define a fonte em negrito */
        float: left;/* flutuacao a esquerda */
        margin-right: 5px;/* define margem a direita */
    }
    .item input:checked + label:before{/* estiliza o menu depois de clicado */
        content: "\2212";/* sinal - */
    }
    .space{/*espaço entre os menus*/
        padding-bottom: 4px;/* define espacamento na base */
    }


    /* estilizacao da tabela div */

    .table {/* define comportamento da div tabela */
        display: table;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 645px;
    }
    .tr {/* define comportamento da div linha da tabela */
        display:table-row;
    }
    .td {/* define comportamento da div celula da tabela */
		display:table-cell;
        text-align:center;
        /*width: 200px;
        max-width: 100%;*/
		width: 33%;
    }
    .td img:hover{/* configura entrada do cursor do mouse na tag 'img' */
        opacity: 0.75;
        transition: 0.3s;
    }
    .td img{/* configura saida do cursor do mouse na tag 'img' */
        transition-duration: 0.4s;                
    }
    .imagem{/* cnfigura icones responsivos nas tabelas */
        width: 100%;
        max-width: 200px;
    }
    .paragrafo{/* configura o texto nas tabelas */
        font-size: small;
        margin-top: -5px;
    }

}

/* estilo para tela menor */
@media (max-width: 320px){

    body {/* estiliza a tag body */
        font-family: Trebuchet MS;/* define estilo da fonte */
        margin: 0px;/* retira as margem do body */
        overflow: hidden;
    }
    nav {/* estiliza a tag nav */
        width: 100%;/*largura dos menus*/
    }
    .item label {/*estilo dos menus*/
        font-size: 12px;/* define o tamanho da fonte */
        color: #333;/* define cor da fonte cinza */
        height: 20px;/* altura */
        display: block;/* fixa */
        padding: 5px;/* define espaçamento interno */
        background: #e3f2e1;/* define fundo verde claro */
        cursor: pointer;/* cursor do mouse tipo link*/
        border-radius: 5px;/* cantos arredondados */
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius:5px;
        -o-border-radius: 5px;
    }
    .item ul{/* estiliza os sub menus */
        margin: 0px;/* retira as margem */
        padding: 0px;/* define espaçamento interno */
        list-style:none;/* oculta caracteres da lista */
        overflow: hidden;/* oculta os sub menus */
        max-height: 0;/* oculta os sub menus */
        background: #fefefe;/* background claro */
        border-radius: 5px;/* cantos arredondados */
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius:5px;
        -o-border-radius: 5px;
    }
    .item ul li a {/* estiliza os links dos menus na tag 'a' */
        font-size: 12px;/* define o tamanho da fonte */
        color: #333;/* define cor da fonte cinza */
        background:#fff;/* define fundo branco */
        text-decoration:none;/* link sem efeito */
    }
    .item label:hover,
    .item ul li a:hover {/* configura entrada do cursor do mouse na tag 'a' e sub menus */
        text-decoration:underline;/* efeito sublinhado */
    }
    .item input {
        display: none;/* oculta o RADIO da tag input */
    }
    .item input:checked ~ ul{/* estiliza o menu sanfona */
        height:auto;
        max-height:100%;
    }
    .item label:before {/* estiliza o menu antes de clicado */
        content: "\002B";/* sinal + */
        color: #444;/* define cor da fonte cinza */
        font-weight: bold;/* define a fonte em negrito */
        float: left;/* flutuacao a esquerda */
        margin-right: 5px;/* define margem a direita */
    }
    .item input:checked + label:before{/* estiliza o menu depois de clicado */
        content: "\2212";/* sinal - */
    }
    .space{/*espaço entre os menus*/
        padding-bottom: 4px;/* define espacamento na base */
    }


    /* estilizacao da tabela div */

    .table {/* define comportamento da div tabela */
        display: table;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 645px;
        max-width: 100%;
    }
    .tr {/* define comportamento da div linha da tabela */
        display:table-row;
    }
    .td {/* define comportamento da div celula da tabela */
        display:table-cell;
        text-align:center;
        /*width: 200px;
        max-width: 100%;*/
		width: 33%;
    }
    .td img:hover{/* configura entrada do cursor do mouse na tag 'img' */
        opacity: 0.75;
        transition: 0.3s;
    }
    .td img{/* configura saida do cursor do mouse na tag 'img' */
        transition-duration: 0.4s;                
    }
    .imagem{/* cnfigura icones responsivos nas tabelas */
        width: 100%;
        max-width: 200px;
    }
    .paragrafo{/* configura o texto nas tabelas */
        font-size: 11px;
        margin-top: -5px;
    }

}