@charset "utf-8";
/* Este arquivo estiliza as páginas */

@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 espacamento 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 espacamento interno */
        list-style: none;/* oculta caracteres da lista */
        overflow: hidden;/* oculta os sub menus */
        max-height: 0;/* oculta os sub menus */
        background: #fefefe;/* define fundo 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' */
        padding-left: 1rem;/* define espacamento a esquerda */
        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 {/*espaco entre os menus*/
        padding-bottom: 4px;/* define espacamento na base */
    }
    p {/* estiliza a tag 'p' */
        font-size: 14px;/* define o tamanho da fonte */
        text-align: justify;/* define texto justificado */
    }

}

@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 espacamento interno */
        background: #b8cce4;/* 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 espacamento interno */
        list-style: none;/* oculta caracteres da lista */
        overflow: hidden;/* oculta os sub menus */
        max-height: 0;/* oculta os sub menus */
        background: #fefefe;/* define fundo 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' */
        padding-left: 10px;/* define espacamento a esquerda */
        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 {/*espaco entre os menus*/
        padding-bottom: 4px;/* define espacamento na base */
    }
    p {/* estiliza a tag 'p' */
        font-size: 12px;/* define o tamanho da fonte */
        text-align: justify;/* define texto justificado */
    }

}