/*=========== FONT SIZE ==========*/  
h3 {
    font-size: 1.2em;
}
p {
    font-size: 1em;
}


/* PÁGINA HOME */
.welcome {
    padding: 5% 4% 4% 4%;
}
.categorias {
    width: 96%;
    text-align: center;
    margin-bottom: 3%;
    margin-left: 2%;
    cursor: pointer;
}
.categorias {
    position:relative;
    filter:grayscale(50%);
}
.categorias:hover {
    top:-2px;
    box-shadow:0 3px 3px #666;
    filter:grayscale(5%);
    transition: 0s;
}
.cat {
    padding: 10%;
}
.cat h3 {
    text-align:center;
    background-color: white;
    padding: 2%;
    opacity: 0.8;
}

@media screen and (min-width: 720px) {
    .welcome {
        padding: 3% 2% 2% 2%;
    }
    .cat {
        padding: 20%;
    }
    .categorias {
        width: 49%;
        float: left;
        margin-right: 2%;
        margin-left: 0;
    }
    .categorias:nth-child(2){
        margin-right: 0;
    }
    .categorias:nth-child(4){
        margin-right: 0;
    }
    .categorias:nth-child(6){
        margin-right: 0;
    }
}

@media screen and (min-width: 960px) {
    .welcome {
        padding: 1% 0 0 0;
    }
    .categorias {
        width: 30%;
        font-size: 1em;
    }
    .categorias:nth-child(1){
        margin-right: 5%;
        padding: 2.2%;
    }
    .categorias:nth-child(2){
        margin-right: 5%;
        padding: 2.2%;
    }
    .categorias:nth-child(3){
        margin-right: 0;
        margin-left:0;
        padding: 2.2%;
    }
    .categorias:nth-child(4){
        margin-right: 5%;
    }
    .categorias:nth-child(5){
        margin-right: 5%;
        padding: 2.2%;
    }
    .categorias:nth-child(6){
        margin-right: 0;
        margin-left:0;
    }
    .cat {
        padding: 30% 20%;
    }
}


/* PÁGINAS DAS CATEGORIAS */
#cruelty-free {
    width: 100%;
    float: left;
    margin-bottom: 5%;
}
#ambientalismo {
    width: 100%;
    float: left;
}
.titulo h1 {
    width: 100%;
    font-size: 1.4em;
    margin: 2% 0 0 0;
}
.titulo2 h1 {
    width: 100%;
    font-size: 1.4em;
    margin: 2% 0 0 0;
}
#img-categoria, #img-categoria-i {
    width: 100%;
    margin-bottom:5%;
}
#img-categoria-i {
    margin-top: 2%;
}
#sobre-categoria, #sobre-categoria-i {
    width: 100%;
    height: 400px;
    overflow-y: scroll;
    padding: 3%;
    background-color: #D1EEE1;
}

#sobre-categoria-i {
    height: 320px;
}
#sobre-categoria h3, #sobre-categoria-i h3 {
    text-align: center;
}
#sobre-categoria p, #sobre-categoria-i p {
    text-align: justify;
    margin-top: 4%;
}
#impactos-categoria, #impactos-categoria-i {
    width: 100%;
    padding: 3%;
    height: auto;
    height: 400px;
    overflow-y: scroll;
    background-color: #D1EEE1;
    margin-top: 5%;
}
#impactos-categoria h3, #impactos-categoria-i h3 {
    text-align: center;
}
#impactos-categoria table, #impactos-categoria-i table {
    width: 100%;
    margin-top: 5%;
}
#impactos-categoria td:nth-child(1), #impactos-categoria-i td:nth-child(1){
    width: 35%;
}
#impactos-categoria td:nth-child(2), #impactos-categoria-i td:nth-child(2){
    width: 3%;
}
#impactos-categoria td:nth-child(3), #impactos-categoria-i td:nth-child(3){
    width: 72%;
}

@media screen and (min-width: 720px) {
    .titulo h1, .titulo2 h1 {
        font-size: 1.6em;
        margin-top: 3%;
    }
    #img-categoria, #img-categoria-i {
        width: 49%;
        float: left;
        margin-right: 2%;
        height: 350px;
    }
    #img-categoria-i {
        margin-top: 0;
    }
    #sobre-categoria {
        width: 49%;
        float: left;
        margin: 0;
    }
    #sobre-categoria-i {
        width: 49%;
        float: left;
        margin: 0;
        height: 400px;
    }
    #sobre-categoria p, #sobre-categoria-i p {
        margin-top: 5%;
    }
    #impactos-categoria, #impactos-categoria-i {
        width: 70%;
        float: left;
        margin: 3% 15% 0 15%;
    }
    #impactos-categoria table, #impactos-categoria-i table {
        margin-top: 5%;
    }
}

@media screen and (min-width: 960px) {
    .titulo h1, .titulo2 h1 {
        margin-top:0;
        font-size: 1.8em;
    }
    #img-categoria {
        width: 32%;
        height: 350px;
        float: left;
        margin-right: 3%;
    }
    #img-categoria-i {
        width: 32%;
        height: 350px;
        float: left;
        margin: 0 3% 0 0;
    }
    #sobre-categoria {
        width: 31%;
        padding: 2.5%;
        float: left;
        margin: 0 3% 0 0;
    }
    #sobre-categoria-i p, #sobre-categoria p {
        margin-top: 8%;
    }
    #sobre-categoria-i {
        width: 31%; 
        padding: 2.5%;
        float: left;
        margin: 0 3% 0 0;
    }
    #impactos-categoria {
        width: 31%;
        padding: 2.5%;
        float: left;
        margin: 0;
    }
    #impactos-categoria table, #impactos-categoria-i table {
        margin-top: 8%;
    }
    #impactos-categoria-i {
        width: 31%;
        padding: 2.5%;
        float: left;
        margin: 0;
    }
}


/* PÁGINA RESTAURANTES E MERCADOS */
#mapa iframe {
    width: 100%;
    height: 450px;
}
.info-map {
    width: 100%;
    margin-top: 4%;
    padding: 5%;
    background-color: #D1EEE1;
    border-radius: 7px;
}
.info-map h3 {
    font-size: 1.6em;
}
.info-map p {
    margin-top: 7%;
    font-size: 1.1em;
}
.icones-rm {
    width: 100%;
    margin-top: 7%;
    word-spacing: 10px;
}
.icones-rm p {
    width: 65%;
    margin-left: 17.5%;
}

@media screen and (min-width: 720px) {
    #mapa iframe {
        height: 450px;
    }
    .info-map {
        padding: 5% 12%;
    }
    .info-map h3 {
        font-size: 1.8em;
    }
    .info-map p {
        margin-top: 8%;
        font-size: 1.2em;
    }
    .icones-rm p {
        width: 100%;
        margin: 8% 0 0 0;
    }
}

@media screen and (min-width: 960px) {
    #mapa iframe {
        width: 58%;
        height: 550px;
        margin: 0;
        float: right;
    }
    .info-map {
        width: 40%;
        padding: 5% 3%;
        margin: 0 2% 0 0;
        float: left;
    }
    .info-map p {
        margin-top: 15%;
    }
    .icones-rm p {
        width: 100%;
        margin: 15% 0 0 0;
    }
}


/* PÁGINA SOBRE */
.img-sobre {
    width: 100%;
    height: auto;
    padding: 0 1% 1% 1%;
    animation: mudarbg2 20s infinite;
    background-image: url('../img/sobre.png');
    background-repeat: no-repeat;
    background-size:contain;
}
@keyframes mudarbg2 {
    50%  {background-image: url('../img/sobre2.png');}
}
.sobre-nos {
    width: 100%;
    padding: 8% 5%;
    margin-top: 5%;
    background-color: #D1EEE1;
}
.sobre-nos h3 {
    text-align: center;
    font-size: 1.5em;
}
.sobre-nos p {
    text-align: center;
    margin-top: 3%;
    font-size: 1em;
}

@media screen and (min-width: 720px) {
    .img-sobre {
        width: 44%;
        margin-right: 2%;
        float: left;
    }
    .sobre-nos {
        width: 54%;
        padding: 5% 3%;
        margin: 0;
        float: left;
    }
    .sobre-nos h3 {
        font-size: 1.7em;
    }
    .sobre-nos p {
        font-size: 1.1em;
        margin-top: 2.5%;
    }
}

@media screen and (min-width: 960px) {
    .img-sobre {
        width: 48%;
        margin-right: 2%;
    }
    .sobre-nos {
        width: 50%;
        padding: 3.5% 2.5%;
    }
}


/* PÁGINA DE CONFIGURAÇÕES */
#slide-configuracoes {
    width: 100%;
    text-align: left;
}
.topo-perfil {
    width: 100%;
    text-align: center;
}
#config-foto {
    width: 50%;
    height: 0;
    padding-bottom: 46%;
    background-color: white;
    cursor: pointer;
    margin-bottom: 2%;
}
/**************************/
#menuFoto {
    background-color:lightgrey;
    margin: 2% 1% 1% 1%;
    display: fixed;
    padding: 2%;
    cursor: pointer;
}
#myFoto {
    width:0;
    margin-top:-5%;
    left:0;
    position: absolute;
    float: left;
    background-color: lightgrey;
    z-index:5;
}
#closeFoto {
    color:black;
    font-size: 2em;
    margin:2% 2% 0 0;
    float: right;
    visibility: hidden;
}
#myFoto a:hover {
    color:#D1EEE1;
    text-decoration: none;
}
.imagemAvatar {
    text-align:center;
}
.imagemAvatar li {
    padding: 10% 3%;
}
.imagemAvatar img {
    width:90%;
}
/**************************/
.meio-perfil {
    width: 100%;
    text-align: left;
}
#config-nome, #config-usuario, #config-email, #config-senha {
    width: 80%;
    height: 10%;
    padding: 3% 3%;
    margin: 0 0 2% 10%;
}
#config-genero, #config-nascimento {
    width: 80%;
    padding: 3% 2%;
    margin: 0 0 2% 10%;
}
.final-perfil {
    width: 100%;
    text-align: left;
}
#config-email, #config-senha {
    width: 80%;
    margin: 0 0 2% 10%;
    float: left;
}
.config-salvar {
    float: right;
    margin: 7% 0 0 65%;
    padding: 2%;
    width: 35%;
    margin-right: 12.5%;
    cursor: pointer;
}
.label-nome, .label-usuario, .label-genero, .label-nascimento, .label-email, .label-senha {
    margin-left: 11%;
}
#formSenha {
    float: left;
    width: 100%;
    left: 0;
    margin-top: 4%;
}
.bnt-msenha {
    padding: 1%2%; cursor: pointer;
}
.excluir {
    text-align:left;
    position: absolute;
    margin-top: 15%;
    margin-left: 10%;
}
.btn-excluir {
    padding: 5%;
    cursor: pointer;
    background-color: rgb(255, 164, 148);
}

@media screen and (min-width: 720px) {
    #myFoto {
        max-width:80%;
        height: auto;
        margin-top:-4%;
        margin-left: 10%;
    }
    #config-foto {
        width: 35%; 
        padding-bottom: 32%;
    }
    #config-nome, #config-usuario, #config-genero, #config-nascimento {
        width: 87%;
        margin-left: 6.5%;
    }
    .config-salvar {
        width: 30%;
        margin-right: 10%;
    }
    .label-nome, .label-usuario, .label-genero, .label-nascimento {
        margin-left: 7%;
    }
}

@media screen and (min-width: 960px) {
    #myFoto {
        max-width:60%;
        height: auto;
        margin-left: 20%;
        margin-top:-3%;
    }
    #config-foto {
        width: 28%;
        padding-bottom: 26%;
    }
    .meio-perfil {
        margin-bottom: 15%;
    }
    #nome-usuario {
        width: 59%;
        margin-right: 1%;
        float: left;
    }
    #genero-nascimento {
        width: 40%;
        float: right;
    }
    #config-nome, #config-usuario {
        width: 100%;
        margin: 0 0 2% 0;
        padding: 3%
    }
    #config-genero, #config-nascimento {
        width: 100%;
        margin: 0 0 4% 0;
        padding: 4%
    }
    #config-email, #config-senha {
        width: 75%;
        margin-left: 12.5%;
        padding: 1%
    }
    .config-salvar {
        width: 22%;
        margin-right: 0%;
    }
    .label-nome, .label-usuario {
        margin-left: 0.5%;
    }
    .label-genero, .label-nascimento {
        margin-left: 0.5%;
    }
    .label-email, .label-senha {
        margin-left: 13%;
    }
    .excluir {
        margin-top: 15%;
        margin-left: 1%;
    }
}


/* PÁGINA DE SUPORTE E DUVIDAS */
#formulario-duvidas {
    width: 100%;
}
#suporte {
    width: 100%;
    background-color: #E7F6F0;
    padding: 8% 3% 4.5% 3%;
    border-style: solid;
    border-width: 2px;
    border-color:black;
}
#suporte h3 {
    margin-bottom: 4%;
    font-size: 1.55em;
}
#suporte p {
    margin-bottom: 3%;
    font-size: 1em;
    text-align: center;
    padding: 2.5%;
}
.duvidas-nome, .duvidas-usuario, .duvidas-email {
    width: 100%;
    padding: 3% 2%;
    margin-bottom: 2%;
}
#suporte-duvida {
    width: 100%;
    margin-top: 8%;
}
.duvidas-assunto, .duvidas-mensagem {
    width: 100%;
    padding: 3% 2%;
    margin-bottom: 2%;
    resize: none;
}
.btn_suporte {
    width: 40%;
    padding: 1.5%;
    margin-top: 3%;
    float: right;
}

@media screen and (min-width: 720px) {
    #suporte {
        padding: 5% 3% 3% 3%;
    }
    #suporte h3 {
        margin-bottom: 2%;
        font-size: 1.7em;
    }
    #suporte p {
        margin-bottom: 2%;
        font-size: 1.2em;
        padding: 2%;
    }
    .duvidas-nome, .duvidas-usuario, .duvidas-email {
        padding: 2.5% 2%;
    }
    #suporte-duvida {
        margin-top: 5%;
    }
    .duvidas-assunto, .duvidas-mensagem {
        padding: 2.5% 2%;
    }
    .btn_suporte {
        width: 32%;
        padding: 1.5%;
        margin-top: 2%;
    }
}

@media screen and (min-width: 960px) {
    #suporte {
        padding: 5% 3% 3% 3%;
    }
    #suporte h3 {
        margin-bottom: -1%;
        font-size: 1.9em;
    }
    #suporte p {
        margin-bottom: 0;
        padding: 5%;
    }
    #suporte-duvida {
        margin-top: 5%;
    }
    .duvidas-nome, .duvidas-usuario, .duvidas-email {
        width: 49.5%;
        margin-bottom: 1.5%;
        padding: 2%;
    }
    .duvidas-nome {
        margin-right: 0.25%;
    }
    .duvidas-email {
        float: left;
        margin-bottom: 5%;
    }
    .duvidas-assunto, .duvidas-mensagem {
        margin-bottom: 1%;
        padding: 2%;
    }
    .btn_suporte {
        width: 25%;
    }
}

@media screen and (min-width: 1280px) {
    #suporte {
        padding: 4% 3% 3% 3%;
    }
    #suporte h3 {
        margin-bottom: -2%;
        font-size: 2em;
    }
    #suporte p {
        margin-bottom: -2;
        padding: 8%;
        font-size: 1.4;
    }
    #suporte-duvida {
        margin-top: 4%;
    }
    .duvidas-nome, .duvidas-usuario, .duvidas-email {
        margin-bottom: 1%;
        padding: 1.5% 2%;
    }
    .duvidas-nome {
        margin-right: 0.5%;
    }
    .duvidas-email {
        margin-bottom: 4%;
    }
    .duvidas-assunto, .duvidas-mensagem {
        margin-bottom: 1%;
        padding: 1.5% 2%;
    }
    .btn_suporte {
        width: 20%;
    }
}


/* PÁGINA DE EMPRESAS */
#empresas {
    width: 100%;
    max-height: 80%;
    background-color: #E7F6F0;
    padding: 4% 2%;
    border-style: solid;
    border-width: 2px;
    border-color:black;
}
.pesquisa {
    width: 100%;
    margin: 0 0 7% 0;
}
.pesquisa h3 {
    width: 100%;
    margin: 4% 0 0 0;
    font-size: 1em;
}
#busca {
    width: 75%;
    background-color: white;
    padding: 2%;
}
#btn_buscar {
    padding: 2%;
}
#empresa {
    width: 90%;
    background-color: white;
    margin: 7% 0 2% 5%;
    padding: 6% 4%;
    border-style: solid;
    border-width: 1px;
    border-color:black;
    text-align: right;
}
#empresa h3 {
    width: 100%;
    margin-bottom: 6%;
    text-align: center;
    font-size: 1.4em;
}
.img-empresa {
    width: 25%;
    margin: 0 2% 12% 0;
    float:left;
}
.img-empresa img {
    width: 100%;
}
.info-empresa {
    width: 72%;
    float:left;
    margin-bottom: 2%;
    text-align: left;
    padding: 2%;
}
.info-empresa p {
    width: 100%;
}
#categoria-empresa {
    width: 100%;
}
.empresa-categoria {
    background-color: lightgreen;
    text-align: center;
    padding: 2%;
}

@media screen and (min-width: 720px) {
    #empresas {
        max-height: 70%;
    }
    .pesquisa {
        margin: 0 0 5% 0;
    }
    .pesquisa h3 {
        margin: 2% 0 0 0;
        padding: 4%;
    }
    #empresa {
        margin: 2% 0 2% 5%;
        padding: 4%;
    }
    #empresa h3 {
        font-size: 1.7em;
        margin-bottom: 5%;
    }
    .img-empresa {
        width: 22%;
        margin: 0 2% 12% 0;
    }
    .info-empresa {
        width: 75%;
        font-size: 1.1em;
    }
    .info-empresa p {
        width: 100%;
    }
    .empresa-categoria {
        padding: 1.5% 2.5%;
    }
}

@media screen and (min-width: 960px) {
    #empresas {
        max-height: 60%;
    }
    .pesquisa {
        margin: 0 0 3% 0;
    }
    .pesquisa h3 {
        font-size: 1.8em;
        margin: 0;
    }
    #busca {
        padding: 1.5% 2%;
    }
    #btn_buscar {
        padding: 1.5% 2%;
    }
    #empresa h3 {
        font-size: 1.8em;
        margin-bottom: 4%;
    }
    .img-empresa {
        width: 15%;
        margin: 0 2% 12% 0;
    }
    .info-empresa {
        width: 78%;
        font-size: 1.3em;
    }
    .info-empresa p {
        width: 100%;
    }
    .empresa-categoria {
        padding: 1% 2.5%;
    }
}