@media screen and (max-width: 768px) {

    body {

        margin: 0px;
        padding: 0px;
        box-sizing: border-box;


    }

    .div-header-menu-telefone-e-redes-sociais {

        display: none;
    }

    .conteudo-banner-home {
        margin-right: 0px;
        height: 50%;
        width: 70%;
        /* display: flex; */
        align-items: center;
        /* justify-content: center; */
        /* align-items: flex-end; */
        flex-direction: column;
        margin-top: 0px;
    }

    .div-header-menu {

        grid-area: div-header-menu;
        height: auto;
        display: grid;
        grid-template-rows: 100%;
        grid-template-columns: 100%;
        grid-template-areas:
            "div-header-menu-lista";
    }

    .header {
        grid-area: header;
        display: flex;
        width: 100vw;
        position: fixed;
        align-items: center;
        justify-content: center;
        background-color: #000;
    }




    .conteudo-header {

        width: 100%;
        height: auto;
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 100%;
        grid-template-areas: "div-header-logo"
            "div-header-menu";
    }

    .botaoMenu {

        color: white;
    }

    .div-header-logo a {

        display: block;
    }


    .header-menu-mobile {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        align-items: center;
        padding-left: 15px;
        display: none;
    }



    .header-menu-mobile a {

        font-size: 25px;
        color: white;
    }

    .div-de-menu-para-toogle {

        list-style: none;
        display: flex;
        flex-direction: column;
        font-family: 'Quicksand', sans-serif;
    }

    .div-de-menu-para-toogle li {

        text-decoration: none;
        margin: 5px 0px;

    }


    .div-de-menu-para-toogle a {

        text-decoration: none;
        font-size: 17px;
    }



    .div-header-logo {

        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 15px;
    }

    .div-header-logo a {

        font-size: 30px;
        color: white;
        text-decoration: none;
    }

    .div-header-logo img {
        height: 40px;
        width: auto;
    }

    .conteudo-banner-home p {
        font-family: 'Quicksand', sans-serif;
        color: #1a3d6f;
        font-size: 20px;
        text-align: center;
        text-align-last: center;
    }


    .conteudo-banner-home h1 {
        font-family: 'Righteous', cursive;
        color: #1a3d6f;
        font-size: 24px;
        font-weight: lighter;
    }

    .div-header-menu-lista {

        display: none;
    }

    .div-header-menu-telefone-e-redes-sociais {

        display: none;

    }

    .banner-home {

        grid-area: banner-home;
        display: flex;
        background-image: url(../images/banner-audiosul-mobile.png);
        background-size: cover;
        height: 700px;
        background-size: cover;
        background-repeat: no-repeat;
        align-items: flex-end;
        justify-content: center;
        background-position: center;

    }


    .conteudo-banner-home a {
        color: #a4ee04;
        background: linear-gradient(to top, #022960, #033a89);
        height: 40px;
        font-family: 'Quicksand', sans-serif;
        width: 90%;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-style: none;
        margin-top: 20px;
        border-radius: 5px;
    }


    .grid-para-imagens-e-texto {

        width: 80%;
        min-width: 100vw;
        display: grid;
        height: auto;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-columns: 100%;
        grid-template-areas:

            "grid-um"
            "grid-dois"
            "grid-tres"
            "grid-quatro "
            "grid-cinco"
            "grid-seis";
    }

    .grid-tres {
        grid-area: grid-tres;
        justify-content: center;
        background-image: url(../images/fundo-blue-grid.png);
        background-size: cover;
        background-position: center;
        display: flex;
        height: 290px;
        align-items: center;
        justify-content: center;
    }

    .grid-um {
        grid-area: grid-um;
        justify-content: center;
        background-image: url(../images/fundo-blue-grid.png);
        background-size: cover;
        background-position: center;
        display: flex;
        height: 290px;
        align-items: center;
        justify-content: center;
    }

    .grid-cinco {
        grid-area: grid-cinco;
        justify-content: center;
        background-image: url(../images/fundo-blue-grid.png);
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 290px;
    }

    .grid-servicos {
        display: grid;
        height: 800px;
        width: 100%;
        grid-template-rows: auto auto;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-template-areas: "grid-servicos-titulo-e-conteudo";
    }


    .grid-servicos-titulo-e-conteudo-cards {

        grid-area: grid-servicos-titulo-e-conteudo-cards;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-wrap: wrap;
        height: auto;
        padding-bottom: 55px;
    }


    .grid-de-blog-card-grid-previa {
        grid-area: grid-de-blog-card-grid-previa;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }

    .servico-card-titulo h1 {
        font-family: 'Quicksand', sans-serif;
        margin: 10px 0px;
        color: #ffffff;
        font-size: 22px;
        margin-left: 10px;
    }


    .servico-card {

        display: grid;
        margin: 0px;
        margin-bottom: 25px;
        width: 95%;
        height: auto;
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        grid-template-areas: "servico-card-titulo"
            "servico-card-conteudo";
    }


    .servico-card-conteudo {
        grid-area: servico-card-conteudo;
        height: auto;
    }


    .servico-card-titulo {
        justify-content: center;
        grid-area: servico-card-titulo;
        display: flex;
        align-items: center;
        height: auto;
    }

    .grid-servicos-titulo-e-conteudo-titulo {
        grid-area: grid-servicos-titulo-e-conteudo-titulo;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .grid-servicos-titulo-e-conteudo-titulo p {
        font-family: 'Righteous', cursive;
        margin: 0px 0px 0px 0px;
        color: #022960;
        font-size: 35px;
        padding: 15px;
    }

    .produtos {
        grid-area: produtos;
        height: auto;
        background-image: url(./assets/images/nobo-fundo-produtos-editado.png) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        display: grid;
        padding-top: 60px;
        width: 100%;
        grid-template-rows: auto auto auto;
        grid-template-columns: 100%;
        grid-template-areas:
            "produtos-titulo"
            "produtos-cards"
            "produtos-parceria";
    }

    .grid-de-historia-conteudo {

        grid-area: grid-de-historia-conteudo;
        height: auto;
        padding: 17px;
    }

    .a-dra-patricia-div-foto img {
        height: 133%;
        width: 150%;
        margin-left: -31px;
        margin-top: 0px;
    }

    .a-dra-patricia-div-foto img {
        height: 103%;
        width: 150%;
        margin-left: -31px;
        margin-top: 0px;
    }

    .a-dra-patricia-div-historia {
        grid-area: a-dra-patricia-div-historia;
        height: 150px;
        /* background-color: royalblue; */
        transform: skewX(28deg);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 4;
    }

    .a-dra-patricia {
        grid-area: a-dra-patricia;
        height: 216px;
        display: grid;
        grid-template-columns: 77% 23%;
        grid-template-rows: auto;
        grid-template-areas: "a-dra-patricia-div-historia a-dra-patricia-div-foto";
    }

    .produto-card {
        display: grid;
        /* border: 1px solid black; */
        height: auto;
        margin-bottom: 30px;
        width: 45%;
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        grid-template-areas:
            "produto-card-imagem-do-produto"
            "produto-card-titulo-do-produto";
    }


    .history h3 {
        color: #022960;
        font-family: 'Quicksand', sans-serif;
        font-size: 18px;
        margin: 10px 0px;
    }

    .history p {
        color: #022960;
        font-family: 'Quicksand', sans-serif;
        font-size: 12px;
        text-align: justify;
    }


    .grid-de-historia {

        width: 100%;
        height: auto;
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 100%;
        grid-template-areas:
            "grid-de-historia-conteudo"
            "grid-de-historia-foto";
    }


    .fale-com-a-gente-redes-sociais i {
        font-size: 39px;
        border-radius: 100%;
        text-decoration: none;
    }

    .fale-com-a-gente {

        grid-area: fale-com-a-gente;
        height: auto;
        display: flex;
        justify-content: center;
        background: linear-gradient(to top, #0b1472, #060d52);
        align-items: center;

    }

    .grid-de-historia-foto {
        grid-area: grid-de-historia-foto;
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        padding: 60px;
    }

    .grid-de-historia-foto-img {
        width: 100%;

        height: 80%;
        display: flex;
        justify-content: center;
    }


    .grid-de-blog-cards {
        grid-area: grid-de-blog-cards;
        height: auto;

        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }


    .grid-de-blog-card-grid {


        display: grid;
        width: 100%;
        grid-template-rows: auto auto auto auto;
        grid-template-columns: 100%;
        margin-bottom: 25px;
        height: auto;
        grid-template-areas:

            "grid-de-blog-card-grid-imagem"
            "grid-de-blog-card-grid-titulo"
            "grid-de-blog-card-grid-previa"
            "grid-de-blog-card-grid-link-materia-completa";

    }


    .produtos-cards-div {

        height: auto;
        width: 85%;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: wrap;

    }

    .img-produtos-aparelhos-auditivos {
        height: 160px;
        width: 85%;
    }

    .img-produtos-baterias {
        height: 163px;
        width: 50%;
    }

    .img-produtos-acessorios {
        height: 128px;
        width: 75%;
    }


    .produtos {

        grid-area: produtos;
        height: auto;
        background-image: url(./assets/images/nobo-fundo-produtos-editado.png) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        display: grid;
        width: 100%;
        grid-template-rows: auto auto auto;
        grid-template-columns: 100%;
        grid-template-areas: "produtos-titulo"
            "produtos-cards"
            "produtos-parceria";

    }


    .produto-card {

        display: grid;
        height: auto;
        margin-bottom: 30px;
        width: 70%;
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        grid-template-areas:
            "produto-card-imagem-do-produto"
            "produto-card-titulo-do-produto"
    }



    .fale-com-a-gente {
        grid-area: fale-com-a-gente;

        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .fale-com-a-gente-div {
        height: auto;
        width: 80%;
        margin: 10px 0px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .fale-com-a-gente-div input {
        height: auto;
        border-style: none;
        background: none;
        margin: 20px;
        width: 95%;
        border-bottom: 2px solid wheat;
        font-family: 'Quicksand', sans-serif;
        color: #ffffff;
        font-size: 18px;
    }

    .rodape {
        grid-area: rodape;
        height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .fale-com-a-gente-div button {

        width: 93%;
        height: auto;
        border-radius: 10px;
        border-style: none;
        background-image: linear-gradient(to top, #87c304, #a5f004);
        font-family: 'Quicksand', sans-serif;
        color: #022960;
        padding: 10px 0px;
        font-size: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bolder;
    }


    .div-rodape-logo {

        height: 180px;
        margin: 20px 0px;
        border: 1px solid black;
        width: 80%;

    }

    .div-rodape-informacoes {

        height: 180px;
        margin: 20px 0px;
        border: 1px solid black;
        width: 80%;


    }


    .conteudo-geral-blog-div {

        width: 80%;
        height: auto;

        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        grid-template-areas:
            "conteudo-geral-blog-div-cards-lista";

    }

    .conteudo-geral-de-blog-card {

        display: grid;
        width: 100%;
        height: auto;
        margin: 0px 0px 60px 0px;
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        grid-template-areas: "conteudo-geral-de-blog-card-imagem"
            "conteudo-geral-de-blog-card-conteudo";

    }

    .grid-de-blog-card-grid-titulo {
        height: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }


    .fale-com-a-gente-div h3 {
        font-size: 25px;
        font-family: 'Righteous', cursive;
        color: white;
    }

    /* Blog */

    .conteudo-geral-blog-div-social {
        height: 0;
        display: none;

        align-items: center;
        justify-content: center;



    }

    .grid-de-blog-card-grid-titulo h3 {
        margin: 0px;
        font-family: 'Quicksand', sans-serif;
        font-size: 20px;
        text-align: center;
        margin-bottom: -5px;
    }

    .grid-de-blog-card-grid-previa p {
        font-weight: lighter;
        font-family: 'Quicksand', sans-serif;
        font-size: 18px;
        text-align: center;
    }

    .grid-de-blog-card-grid-link-materia-completa {
        grid-area: grid-de-blog-card-grid-link-materia-completa;
        display: block;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }

    /* Blog */


    /* Single Blog */


    .single-blog-div {

        width: 100%;
        height: auto;
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 100%;
        grid-template-areas:
            "single-blog-div-redes-cards"
            "single-blog-div-outros-textos";

    }

    .single-blog-div-redes-cards {
        grid-area: single-blog-div-redes-cards;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 15px;
        padding-top: 30px;
        justify-content: flex-start;
    }





    /* Página geral pra cada categoria de produto - Inicio */


    .conteudo-produto-geral-div {

        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-template-areas: "conteudo-produto-geral-div-pra-produtos";

    }

    .conteudo-produto-geral-redes-sociais {

        display: none;
    }


    .conteudo-produto-geral-div-pra-produtos-card {

        display: grid;
        margin: 20px 0px 50px 0px;
        border-radius: 5px;
        height: auto;
        grid-template-columns: 40% 60%;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "conteudo-produto-geral-div-pra-produtos-card-imagem conteudo-produto-geral-div-pra-produtos-card-titulo"
            "conteudo-produto-geral-div-pra-produtos-card-imagem conteudo-produto-geral-div-pra-produtos-card-descrição"
            "conteudo-produto-geral-div-pra-produtos-card-saber-mais-btn conteudo-produto-geral-div-pra-produtos-card-saber-mais-btn";

    }

    .conteudo-produto-geral-div-pra-produtos-card-imagem {
        grid-area: conteudo-produto-geral-div-pra-produtos-card-imagem;
        height: 200px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .conteudo-produto-geral-redes-sociais p {

        margin: 0;
    }

    .conteudo-produto-geral-div-pra-produtos-card-descrição {
        grid-area: conteudo-produto-geral-div-pra-produtos-card-descrição;
        height: auto;
        flex-wrap: wrap;
        display: flex;
        color: #022960;
        padding: 5px 10px;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .conteudo-produto-geral-div-pra-produtos-card-descrição p {
        font-size: 15px;
        font-family: 'Quicksand', sans-serif;
        margin: 0;
    }

    .conteudo-produto-geral-div-pra-produtos-card-imagem-img {
        height: 80%;
        width: 90%;
        border-radius: 8px;
        background-image: linear-gradient(to top, #87c304, #a5f004);
    }

    .conteudo-produto-geral-div-pra-produtos-card-titulo-categoria {
        grid-area: conteudo-produto-geral-div-pra-produtos-card-titulo-categoria;
        height: 100px;
        display: flex;
        padding-top: 50px;
        align-items: center;
        justify-content: center;
    }

    /* Página geral pra cada categoria de produto - fim */



    /* Single de produto */




    .single-produto-conteudo-geral {
        height: auto;
        padding-top: 50px;
        display: grid;
        width: 100%;
        grid-template-rows: auto auto auto auto auto;
        grid-template-columns: 100%;
        grid-template-areas:
            "single-produto-conteudo-geral-titulo "
            "single-conteudo-geral-imagem"
            "single-conteudo-geral-grid-de-imagens"
            "single-conteudo-geral-descricao"
            "single-conteudo-geral-entrar-em-contato";
    }

    .single-conteudo-geral-grid-de-imagens {
        grid-area: single-conteudo-geral-grid-de-imagens;
        height: 400px;
        display: grid;
        grid-template-rows: 50% 50%;
        grid-template-columns: 50% 50%;
        grid-template-areas:
            "single-conteudo-geral-grid-de-imagens-grid-um single-conteudo-geral-grid-de-imagens-grid-dois"
            "single-conteudo-geral-grid-de-imagens-grid-tres single-conteudo-geral-grid-de-imagens-grid-quantro";
    }


    .single-conteudo-geral-grid-de-imagens-grid-um-img {
        height: 95%;
        width: 85%;
        border-radius: 12px;
        background-image: linear-gradient(to top, #87c304, #a5f004);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .single-produto-conteudo-geral-titulo p {
        margin: 0;
        padding: 20px 0px;
        font-size: 35px;
        font-family: 'Quicksand', sans-serif;
        color: #022960;
        text-align: center;
    }



    .single-conteudo-geral-grid-de-imagens-grid-1 {

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .single-conteudo-geral-grid-de-imagens-grid-2 {

        display: flex;
        justify-content: center;
        align-items: center;

    }

    .single-conteudo-geral-grid-de-imagens-grid-3 {

        display: flex;
        justify-content: center;
        align-items: center;


    }


    .single-conteudo-geral-grid-de-imagens-grid-4 {


        display: flex;
        justify-content: center;
        align-items: center;


    }

    .single-conteudo-geral-grid-de-imagens-grid-um {

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .single-conteudo-geral-grid-de-imagens-grid-dois {

        display: flex;
        justify-content: center;
        align-items: center;

    }

    .single-conteudo-geral-grid-de-imagens-grid-tres {

        display: flex;
        justify-content: center;
        align-items: center;


    }

    .single-conteudo-geral-grid-de-imagens-grid-quantro {

        display: flex;
        justify-content: center;
        align-items: center;


    }




    .single-conteudo-geral-descricao {
        grid-area: single-conteudo-geral-descricao;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .single-conteudo-geral-descricao-div p {
        margin: 0;
        font-size: 21px;
        font-family: 'Quicksand', sans-serif;
        text-align: justify;
        text-align-last: center;
        color: #022960;
    }


    .single-conteudo-geral-entrar-em-contato-formulario {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 90%;
    }

    .formulario-de-produto button {
        height: 30px;
        width: 50%;
        color: #a4ee04;
        background: linear-gradient(to top, #022960, #033a89);
        font-family: 'Quicksand', sans-serif;
        font-size: 20px;
        font-weight: bold;
        border-style: none;
        border-radius: 5px;
        /* color: #ffffff; */
    }

    .formulario-de-produto textarea {
        border-radius: 15px;
        width: 90%;
        font-family: 'Quicksand', sans-serif;
        font-size: 13px;
        color: #022960;
    }

    .single-conteudo-geral-imagem-img {
        height: 95%;
        width: 95%;
        border-radius: 12px;
    }

    .single-conteudo-geral-imagem-img img {
        margin: 0;
        height: auto;
        width: 100%;
    }

    /* Responsivo da página de produto */




    .pagina-de-obrigado-adiosul {
        height: 100vh;
        width: 100vw;
        background-image: url(./assets/images/banner-audiosul\ mobile.png);
        display: flex;
        justify-content: center;
        align-items: flex-start;

    }





    .conteudo-de-obrigado {
        width: 80%;
        height: 40%;
        margin-right: 0%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
        margin-top: 65px;


    }

    .conteudo-de-obrigado {
        width: 80%;
        height: 40%;

        display: flex;
        flex-direction: column;
        align-items: center;

        margin-top: 65px;
    }

    .conteudo-de-obrigado h1 {
        color: #1a3d6f;
        text-align: center;
        font-family: 'Righteous', cursive;
        font-size: 35px;
        font-weight: lighter;
    }

    .conteudo-de-obrigado p {
        font-family: 'Quicksand', sans-serif;
        font-size: 30px;
        font-weight: bolder;
        color: #1a3d6f;
        text-align: center;
    }

    .conteudo-de-obrigado button {
        height: 50px;
        color: #a4ee04;
        background: linear-gradient(to top, #022960, #033a89);
        height: 45px;
        font-family: 'Quicksand', sans-serif;
        width: 35%;
        font-size: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-style: none;

        border-radius: 5px;
    }


    .grid-dois img {
        mix-blend-mode: darken;
        filter: saturate(0);
        height: auto;
        width: 100%;
    }

    .grid-quatro img {
        mix-blend-mode: darken;
        filter: saturate(0);
        height: auto;
        width: 100%;
    }


    .grid-seis img {
        mix-blend-mode: darken;
        filter: saturate(0);
        height: auto;
        width: 100%;
    }

    .single-blog-div-redes-cards h1{
        text-align: left;
        font-family: 'Quicksand', sans-serif;
        color: #022960;
        margin-bottom: 20px;
        font-size: 23px;
        margin-top: 50px;
    }

    .single-blog-div-redes-cards h1, h2, h3 {
        text-align: left;
        font-family: 'Quicksand', sans-serif;
        color: #022960;
        margin-bottom: 20px;
        font-size: 23px;
    }

    .single-blog-div-redes-sociais{
        display: none;
    }
}