/*na próxima página, font-size e padding usar REM como unidade de medida*/
*{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';
    color: black;
    margin-left: 0%;
} /*asterisco engloba toda a página, com a fonte de escrita de Georgia e cor preta*/

body {
    background-color: white;
    width: 100%;
}  /*o corpo da página (body) ganha a cor de fundo rgb(124,122,128)*/

a:link{
    text-decoration: none;
    color: black;
} /*a:link (todo link da página) recebe decoração de texto vazia (sem sublinhagem e cor azul), cor do texto branco*/

a:visited{
    color: rgb(2, 2, 59);
} /*a:visited (todo link da página após ser visitado) permanecerá com a cor branca*/

a:hover{
    color: red;
} /*a:hover (todo link da página quando passar o mouse por cima) vai receber a cor vermelho pra chamar atenção*/

#main-navbar{
    background-color: white;
    width: 80%;
} /*#main-nav bar (na barra de navegação), recebe cor de fundo preta, margem automática, espaçamento ao centro, largura de 90% da página e texto alinhado ao centro*/

#main-navbar .botoes{
    position: absolute;
    left: 45%;
    padding: 0.1%;
    width: 50%;
    top: 5%;
}

.buttonn {
    background-color: white;
    font-family: Georgia, Times, 'Times New Roman', serif;
    font-size: 100%;
    text-decoration: none;
    color: black;
    padding: 1%;
    cursor: pointer;
    width: 10%;
} /*.buttonn (link para clicar como um botão) cor de fundo preta, fonte Georgia com o tamanho de 100% do HTML, com texto de decoração vazio (sem sublinhado e modelo de link html), cor do texto branca, espaçamento de 0.4% de um ao outro, margem inferior de 0.3%, cursor pointer (nesse caso por ser link não precisava, mas quando é botão e o mouse passa por cima faz o desenho de uma mãozinha insinuando que é possível clicar), largura de 10% da largura da página*/

.img1{
    width: 20%;
    padding: 1.5%;
} /*.img1 (imagem dentro da barra de navegação) recebe a largura de 10% da largura da página, espaçamento de 3% das bordas, bordas arrendadas em 10%*/

img.home{
    width: 100%;
    left: 0%;
} /*img.home (imagem a parte, de lado) com largura de 51% da página com margem a esquerda de 5.6% de distância e borda arredondada de 2%*/

aside{
    width: 100%;
    text-align: left;
    position: relative;
} /*aside (a parte, de lado abaixo da barra de navegação e área de cabeçalho), recebe uma largura de 90% da página e texto alinhado ao centro*/

aside div{
    position: absolute;
    left: 15%;
    top: 30%;
    font-weight: bold;
    color: black;
    text-align: left;
    font-size: 115%;
} /*aside div (área ao lado que corresponde a div) ganha cor rgb(63,58,58), com  espaçamento de 0.4% das bordas, texto alinhado a direita, tamanho da fonte 115% do tamanho padrão HTML, display (mostra essa área) em linha de bloco ao invés de abaixo da imagem img1, aparece ao lado dela*/

.nomeg3{
    position: absolute;
    left: 0%;
    top: 0%;
    font-size: 150%;
}

.buttonhome{
    background-color: rgb(63, 58, 58);
    font-family: Georgia, Times, 'Times New Roman', serif;
    font-size: 100%;
    text-decoration: none;
    color: white;
    padding: 2%;
    cursor: pointer;
} /*.buttonhome (botão na área div de aside) ganha o fundo com a cor rgb(63,58,58), sombra em volta de tamanho de (inferior) 5px (direita) 5px (tamanho do sombreamento) 10px de cor rgb(51,21,21), fonte georgia de tamanho de 100% do tamanho padrão do HTML, decoração de texto do botão vazia (sem decoração padrão do html), cor de texto branca, espaçamento de 0.9% das bordas, margem inferior de 0.3% de distância e cursor pointer (mostrando a mãozinha quando o mouse passa por cima)*/

.faleconosco {
    position: fixed;
    top: 85%;
    left: 85%;
    font-size: 100%;
    z-index: 1;
} /*.faleconosco (área para entrar em contato), posição fixa na página com a distância fixa do topo de 85% e da esquerda de 85%, tamanho da fonte 100% do padrão HTML, z-index (ordem de prioridade sobre outras partes) 1. (passa acima do mapa, as imagens, botões, etc)*/

.container h1 {
    font-size: 200%;
} /*.container h1 (área da seção com o título 1), recebe texto alinhado ao centro e tamanho da fonte de 130% do tamanho padrão HTML*/

.container{
    text-align: center;
    font-size: 100%;
    width: 100%;
} /*.container (na seção serviços) o texto é alinhado ao centro com o tamanho de 100% do html, largura de 90% da página e margem a esquerda de 5.5% de distância*/

.container-2{
    margin-left: auto;
    margin-right: auto; 
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
} /*.container-2 (seção portifólio) recebe a margem a esquerda e a direita automática, texto alinhado ao centro, fonte arial com o tamnho de 130% do html e posição relativa*/

.container-2 h1{
    font-size: 200%;
} /*.container-2 h1 (na seção portifólio o título) recebe um tamanho da fonte de 120% do HTML*/

.container-2 img{
    height: 20%;
    width: 20%;
    max-width: 20%;
    padding: 2%;
    object-fit: cover;
    border-radius: 2%;
    -webkit-transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
}/*.container-2 img (na seção portifólio as imagens) recebe uma largura de 35% da página, borda arredondada em 2%, transição de imagem para transformar ela em meio segundo modo fácil*/

.container-2 img:hover{
    -webkit-transform: scale(1.1);
    transform: scale(1.2);
}/*.container-2 img:hover (na seção portifólio quando passar o mouse sobre as imagens) vai receber uma transformação de escala, aumentando pra 10% o tamanho*/

.container-3{
    position: relative;
    line-height: 190%;
} /*#container-3 (na seção sobre) texto alinhado ao centro, margem de 0.1% e uma altura máxima de 190% de acordo com o tamanho da página */

.frase1{
    position: absolute;
    font-size: 100%;
    left: 15%;
    top: 5%;
    text-align: left;
}

.frase2{
    position: absolute;
    font-size: 200%;
    font-weight: bold;
    left: 15%;
    top: 8%;
    text-align: left;
}

.frase3{
    text-align: justify;
    margin-left: 50%;
    width: 40%;
    font-size: 130%;
    font-family: Arial, Helvetica, sans-serif;
} /*#container-3 p (na seção sobre o parágrafo) recebe texto justificado, margem a esquerda de 24% de distância, largura de 55% da largura da página, fonte arial com tamanho de 130% do padrão html*/

#container-4{
    font-family: Georgia, Times, 'Times New Roman', serif;
    text-align: center;
} /*#container-4 (seção fale conosco) fonte georgia, tamanho de 110% do html, texto alinhado ao centro, sem decoração de texto (nas áreas de link, sem sublinhagem e sem cor de texto azul como o padrão html), cor de texto branca, margem automática*/

.form{
    margin-left: 30%;
    display: flex;
    width: 40%;
    flex-direction: column;
}

.field{
    padding: 2%;
    margin-bottom: 5%;
    border: 2px solid black;
    border-radius: 1%;
    font-family: arial;
    font-size: 100%;
}

.field1{
    width: 50%;
    margin-left: 25%;
}

textarea{
    height: 25%;
}

footer{
    text-align: justify;
    position: relative;
    width: 100%;
    padding-bottom: 20%;
} 

.esquerda{
    position: absolute;
    text-align: left;
    margin-left: 5%;
}

.centro{
    position: absolute;
    margin-left: 33%;
}

footer iframe{
    position: absolute;
    margin-left: 65%;
    width: 30%;
}

.rodape{
    font-size: 70%;
    text-align: left;
} 










@media (max-width: 1339px ){
    .buttonn {
        font-size: 75%;
        width: 30%;
        
    }

    .container-2 img{
        width: 95%;
    }

    .faleconosco{
        left: 80%;
        top: 80%;
    }

    footer iframe{
        position: absolute;
        width: 30%;
        margin-left: 65%;
    }

    .rodape{
        text-align: center;
    }
    
} /*@media (max-width: 1339px) {quando o site tiver a máxima largura de 1339px} ele vai modificar as larguras e alguns textos.*/

@media (max-width: 1100px){
    .faleconosco {
        display: none;
    }

    .buttonn {
        font-size: 80%;
    } 

    #main-navbar .botoes{
        width: 75%;
        left: 25%;
        top: 5%;
    }
    
    .container-2 img{
        width: 100%;
        padding: 1%;
    }


    footer{
        text-align: justify;
        position: relative;
        width: 100%;
        padding-bottom: 0%;
        text-align: center;
    } 

    .esquerda{
        position: relative;
        margin-bottom: 0%;
        text-align: center;
        margin-left: 0%;
        padding-bottom: 0%;
    }

    .centro{
        position: relative;
        margin-bottom: 0%;
        margin-left: 0%;
        text-align: center;
        padding-bottom: 0%;
    }
    
    footer iframe{
        position: relative;
        margin-left: 0%;
        margin-bottom: 0%;
        width: 100%;
        padding-bottom: 0%;
    }
    
    .rodape{
        font-size: 70%;
        text-align: center;
    } 
    
}

@media (max-width: 859px){
    body, html{
        overflow-x: hidden !important;
    }

    .faleconosco {
        display: none;
    }
    
    #main-navbar{
        width: 100%;
        text-align: left;
    } 

    #main-navbar img{
        position: relative;
        left: 5%;
        margin: 0%;
        top: 0%;
        width: 25%;
    }

    #main-navbar .botoes{
        position: absolute;
        top: 3%;
        left: 35%;
        padding: 0%;
        width: 65%;
        
    }

    .buttonn {
        font-size: 70%;
        padding: 1%;
    }

    .nomeg3{
        font-size: 100%;
        width: 100%;
    }
    
    aside div{
        position: absolute;
        width: 30%;
        margin-left: 0%;
        top: 30%;
        font-size: 80%;
    } 

    aside img{
        position: relative;
        left: 0%;
        top: 0%;
        width: 100%;
    }

    .container h1 {
        font-size: 150%;
    } /*.container h1 (área da seção com o título 1), recebe texto alinhado ao centro e tamanho da fonte de 130% do tamanho padrão HTML*/

    .container-2 h1{
        font-size: 150%;
    } 

    .container-3 div{
        position: relative;
    }

    .frase1{
        position: absolute;
        margin-left: 0%;
        margin-top: 0%;
        font-size: 100%;
        width: 100%;
    }

    .frase2{
        position: absolute;
        margin-left: 0%;
        margin-top: 0%;
        font-size: 200%;
        width: 100%;
    }

    .frase3{
        position: absolute;
        margin-left: 20%;
        margin-top: 0%;
        font-size: 100%;
        width: 60%;
    }
    
    footer{
        text-align: center;
        width: 100%;
    } 

    .esquerda{
        position: relative;
        text-align: center;
    }

    .centro{
        position: relative;
        text-align: center;
    }
    
    footer iframe{
        position: relative;
        width: 100%;
    }
 
}

@media (max-width: 740px){
    body, html{
        overflow-x: hidden !important;
    }

    .faleconosco {
        display: none;
    }

    .buttonn{
        font-size: 65%;
        padding: 0.5%;
    }

    #main-navbar .botoes{
        position: absolute;
        left: 35%;
        top: 2%;
        width: 80%;
    }
    aside div {
        margin-left: 0%;
        font-size: 60%;
    }

    .container-3{
        position: relative;
        width: 100%;
        margin-left: 0%;
        margin-top: 0%;
        text-align: justify;
    }

    .container-3 p{
        text-align: justify;
        margin: auto;
        width: 80%;
        font-size: 90%;
        padding: 10px;
    }

    .img2{
        width: 50%;
    }

    .faleconosco{
        font-size: 70%;
    }

    .container-2 img{
        width: 80%;
    }
}/*@media (max-width: 717px) {quando o site tiver a máxima largura de 717px} ele vai modificar as larguras e alguns textos.*/

@media (max-width: 656px){
    body, html{
        overflow-x: hidden !important;
    }

    .faleconosco {
        display: none;
    }

    aside{
        margin-top: 15px;
    }

    .buttonhome{
        margin: 0.1%;
        padding: 0.1%;
        width: 80%;
    }

    .buttonn{
        display: none;
    }

    nav hr{
        opacity: 0;
    }

    .img1{
        width: 30%;
        position: absolute;
        left: 5%;
        top: 1.25%;
    }

    #main-navbar{
        padding: 4%;
    }

    .one, 
    .two, 
    .three{
        background-color: black;
        height: 4px;
        width: 90%;
        margin: 6px auto;
    }

    .menu-toggle {
  
        width: 40px;
        height: 30px;
        position: absolute;
        left: 80%;
        top: 3%;
        cursor: pointer;
    }

    .menu-section.on {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: white;
        z-index: 2;
    }

    .menu-section.on #main-navbar .botoes{
        position: absolute;
        left: 5%;
        top: 7%;
        padding: 5px;
        width: 50%;
    }

    .menu-section.on nav{   
        position: absolute;
        left: 3%;
        top: 5.5%;
        background-color: black;
    }

    .menu-section.on nav .buttonn{
        display: block;
        width: 80%;
        text-decoration: none;
        padding: 5%;
        font-size: 100%;
        text-align: left;
        margin-left: 0;
    }

    .menu-section.on nav .img1{
        visibility: hidden;
    }

    .menu-section.on .menu-toggle{
        z-index: 1;
        top: 1%;
    }

    .img2{
        width: 40%;
    }

    .faleconosco{
        font-size: 80%;
        left: 65%;
        top: 85%;
    }

    .container-2{
        width: 80%;
    }

    .container-2 img{
        max-width: 100%;
        width: 80%;
    }

    .container-3{
        position: relative;
        width: 100%;
        margin-left: 0%;
        margin-top: 0%;
        text-align: justify;
    }

}/*@media (max-width: 656px) {quando o site tiver a máxima largura de 656px} ele vai modificar as larguras e alguns textos. E na área de navegação .nome vai ficar invisível, junto aos links(buttonn), e no local será adicionado um menu composto por 3 linhas horizontais, das quais quando for clicada, a imagem da barra de navegação (img1) ficará invisível, aparecerá um menu de cor de fundo preta sobre a tela e os links(buttonn) voltarão a ser visíveis porém ocupando uma largura de 100% da página e texto alinhado a direita, nesse menu a rolagem ficará impossibilitada a menos que o usuário feche o menu ou clique em algum botão dele*/

@media (max-width: 520px){
    body, html{
        overflow-x: hidden !important;
    }

    .contato{
        width: 96%;
        text-align: center;
    }

    #container-4 h3{
        font-size: 90%;
    }

    .field1{
        width: 50%;
    }

    .form{
        width: 100%;
        margin-left: 0%;
    }

    .faleconosco {
        display: none;
    }

    .buttonn{
        display: none;
    }

    .img1{
        left: 5%;
        top: 2%;
    }

    #main-navbar{
        padding: 2%;
    }

    .one, 
    .two, 
    .three{
        background-color: black;
        height: 4px;
        width: 50%;
        margin: 6px auto;
    }

    .menu-toggle {
        width: 20%;
        height: 30%;
        position: absolute;
        left: 80%;
        top: 3%;
        cursor: pointer;
    }

    .menu-section.on {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: white;
        z-index: 10;
    }

    .menu-section.on nav{   
        position: absolute;
        left: 3%;
        top: 5.5%;
        background-color: black;
    }

    .menu-section.on nav .buttonn{
        display: block;
        width: 100%;
        padding: 5%;
        font-size: 100%;
        border-radius: 5px;
        text-align: left;
    }

    .menu-section.on nav .img1{
        visibility: hidden;
    }

    .menu-section.on .menu-toggle{
        z-index: 1;
        top: 1%;
    }

    .buttonhome{
        width: 75%;
    }

    .img2{
        width: 40%;
    }

    .faleconosco{
        font-size: 80%;
        left: 65%;
        top: 85%;
    }

    .container div{
        width: 100%;
    }

    .container-2{
        width: 80%;
    }

}/*@media (max-width: 520px) {quando o site tiver a máxima largura de 520px} ele vai modificar as larguras e alguns textos. E na área de navegação .nome vai ficar invisível, junto aos links(buttonn), e no local será adicionado um menu composto por 3 linhas horizontais, das quais quando for clicada, a imagem da barra de navegação (img1) ficará invisível, aparecerá um menu de cor de fundo preta sobre a tela e os links(buttonn) voltarão a ser visíveis porém ocupando uma largura de 100% da página e texto alinhado a direita, nesse menu a rolagem ficará impossibilitada a menos que o usuário feche o menu ou clique em algum botão dele*/

@media (max-width: 404px) {
    body, html {
        overflow-x: hidden !important;
    }

    .field1{
        width: 50%;
    }

    .form{
        width: 100%;
        margin-left: 2%;
    }

    #main-navbar {
        height: 20%;
        width: 100%;
        padding: 1%;
    }


    #main-navbar hr{
        opacity: 0;
    }

    .buttonn{
        display: none;
    }

    #main-navbar img{
        width: 40%;
        left: 2%;
        top: 3%;
    }

    .one, 
    .two, 
    .three{
        background-color: black;
        height: 1%;
        width: 50%;
        margin: 6px auto;
    }

    .menu-toggle {
        width: 20%;
        height: 30%;
        position: absolute;
        left: 80%;
        top: 3%;
        cursor: pointer;
    }

    .menu-section.on {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: white;
        z-index: 1;
    }

    .menu-section.on nav{   
        position: absolute;
        left: 3%;
        top: 5.5%;
        background-color: black;
    }

    .menu-section.on nav .buttonn{
        display: block;
        width: 100%;
        padding: 5%;
        font-size: 100%;
        border-radius: 5px;
        text-align: left;
    }

    .menu-section.on nav .img1{
        visibility: hidden;
    }

    .menu-section.on .menu-toggle{
        z-index: 1;
        top: 1%;
    }

    .faleconosco {
        display: none;
    }
    aside img{
        width: 100%;
    } 

    aside{
        width: 100%;
        text-align: left;
        position: relative;
    } 

    .nomeg3{
        position: absolute;
        left: 0%;
        top: 0%;
        font-size: 100%;
    }
    
    aside div{
        position: absolute;
        left: 3%;
        top: 20%;
        font-weight: bold;
        color: black;
        padding: 0.4%;
        text-align: left;
        font-size: 58%;
        display: inline-block;
        width: 45%;
    } 

    .buttonhome{
        width: 60%;
        padding: 0.5%;
    }

    .img2{
        width: 30%;
    }

    .container div{
        width: 100%;
        font-size: 90%;
        margin-left: 0%;
        padding-left: 0%;
    }

    .container h1{
        font-size: 125%;
        text-align: center;
    }

    .container-2 img{
        width: 80%;
        margin-left: 0%;
    }

    .container-2 h1{
        font-size: 125%;
        left: 0%;
        margin-left: 0%;
        padding: 0%;
        
    }

    .container-2{
        width: 100%;
        left: 0%;
        text-align: center;
    }

    .container-3 div{
        width: 100%;
        margin-left: 0%;
    }

    .frase1, .frase2{
        left: 0%;
    }
 
    #container-4 h1{
        font-size: 75%;
    }

    #container-4 p{
        font-size: 85%;
    }

    #container-4 h3{
        font-size: 75%;
    }

    footer h2{
        font-size: 85%;
    }

    footer p{
        font-size: 75%;
    }
}/*@media (max-width: 404px) {quando o site tiver a máxima largura de 404px} ele vai modificar as larguras e alguns textos. E na área de navegação .nome vai ficar invisível, junto aos links(buttonn), e no local será adicionado um menu composto por 3 linhas horizontais, das quais quando for clicada, a imagem da barra de navegação (img1) ficará invisível, aparecerá um menu de cor de fundo preta sobre a tela e os links(buttonn) voltarão a ser visíveis porém ocupando uma largura de 100% da página e texto alinhado a direita, nesse menu a rolagem ficará impossibilitada a menos que o usuário feche o menu ou clique em algum botão dele*/

@media (max-width: 300px){
    aside div{
        position: absolute;
        left: 3%;
        top: 0%;
        padding: 0.1%;
        text-align: left;
        font-size: 58%;
        display: inline-block;
        width: 50%;
    } 

    .buttonhome{
        margin-top: 0%;
    }

}
@media (max-width: 250px){
    aside div{
        display: none;
    } 
}