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

/* estilo para tela maior */
@media (min-width: 321px){
    body {
        font-family: Trebuchet MS;
        margin: 0px;
    }
    nav {/*largura dos menus*/
        width: 100%;
    }
    .item label {/*estilo dos menus*/
        font-size: 14px;
        color: #333;
        height: 20px;
        display: block;
        padding: 5px;
        background: #b8cce4;
        cursor: pointer;
        border-radius: 5px;/* cantos arredondados */
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius:5px;
        -o-border-radius: 5px;
    }
    .item ul{
        margin: 0px;
        padding: 0px;
        list-style:none;
        overflow:hidden;
        max-height:0;
        background: #fefefe;
        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 {
        /*padding-left: 10px;*/
        font-size: 12px;
        color: #333;
        background:#fff;
        text-decoration:none;
    }
    .item label:hover,
    .item ul li a:hover {
        text-decoration:underline;
    }
    .item input {
        display: none;
    }
    .item input:checked ~ ul{
        height:auto;
        max-height:100%;
    }
    .item label:before {
        content: "\002B";
        color: #444;
        font-weight: bold;
        float: left;
        margin-right: 5px;
    }
    .item input:checked + label:before{
        content: "\2212";
    }
    .space{/*espaço entre os menus*/
        padding-bottom: 4px;
    }
    
     /* estilizacao da tabela div */
     
    .table {
        display:table;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 645px;/*645px*/
        max-width: 100%;/*linha incluida*/
    }
    .tr {
        display:table-row;
    }
    .td {
        display:table-cell;
        text-align:center;
        /*width: 200px;
        max-width: 100%;*/
		width: 33%;
    }
    .td img:hover{
        opacity: 0.75;
        transition: 0.3s;
    }
    .td img{
        transition-duration: 0.4s;                
    }
    .imagem{
        width: 100%;/*200px*/
        max-width: 200px;/*linha incluida*/
    }
    .paragrafo{
        font-size: small;
        margin-top: -5px;
    }
}

/* estilo para tela menor */
@media (max-width: 320px){
    body {
        font-family: Trebuchet MS;
        margin: 0px;
    }
    nav {/*largura dos menus*/
        width: 100%;
    }
    .item label {/*estilo dos menus*/
        font-size: 14px;
        color: #333;
        height: 20px;
        display: block;
        padding: 5px;
        background: #b8cce4;
        cursor: pointer;
        border-radius: 5px;/* cantos arredondados */
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius:5px;
        -o-border-radius: 5px;
    }
    .item ul{
        margin: 0px;
        padding: 0px;
        list-style:none;
        overflow:hidden;
        max-height:0;
        background: #fefefe;
        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 {
        /*padding-left: 10px;*/
        font-size: 14px;
        color: #333;
        background:#fff;
        text-decoration:none;
    }
    .item label:hover,
    .item ul li a:hover {
        text-decoration:underline;
    }
    .item input {
        display: none;
    }
    .item input:checked ~ ul{
        height:auto;
        max-height:100%;
    }
    .item label:before {
        content: "\002B";
        color: #444;
        font-weight: bold;
        float: left;
        margin-right: 5px;
    }
    .item input:checked + label:before{
        content: "\2212";
    }
    .space{/*espaço entre os menus*/
        padding-bottom: 4px;
    }
    
     /* estilizacao da tabela div */
     
    .table {
        display:table;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;/*645px*/
        max-width: 645px;/*linha incluida*/
    }
    .tr {
        display:table-row;
    }
    .td {
        display:table-cell;
        text-align:center;
        /*width: 200px;
        max-width: 100%;*/
		width: 33%;
    }
    .td img:hover{
        opacity: 0.75;
        transition: 0.3s;
    }
    .td img{
        transition-duration: 0.4s;                
    }
    .imagem{
        width: 100%;/*200px*/
        max-width: 200px;/*linha incluida*/
    }
    .paragrafo{
        font-size: 11px;
        margin-top: -5px;
    }
}