<%- contentFor( 'body' ) %>
    <div id="main">

        <!--  formas do background  -->
        <div>
            <svg class="formas" id="forma-1" data-name="forma 1" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 1920 1080">
                <defs>
                    <style>
                        .cls-1 {
                            fill: #f5f5f5;
                        }
                    </style>
                </defs>
                <title>Forma 1</title>
                <path class="cls-1"
                    d="M.13,1022,0,0H1920c-.15,246.6,0,937.57,0,937.57s-18.23-2.84-35.43-4.05c-253.4-17.85-420.34-26-749.93,60.94-78.24,20.65-302.12,63.56-371.22,71.75-80.24,9.52-160.83,13.15-241.57,13.72-61.71.43-123.37-1-185-5-49.76-3.25-99.31-8.43-148.61-15.87C125,1049.46,62.62,1035.44.13,1022Z" />
            </svg>



            <svg class="formas" id="forma-2" data-name="forma 2" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 1920 1080">
                <defs>
                    <style>
                        .cls-1 {
                            fill: #f5f5f5;
                        }
                    </style>
                </defs>
                <title>Forma 2</title>
                <path class="cls-1"
                    d="M1442.47,39.8C1323.87,59.56,1201.24,80,960,80S596.13,59.56,477.53,39.8C360.14,20.23,238.76,0,0,0V1080H1920V0C1681.24,0,1559.86,20.23,1442.47,39.8Z" />
            </svg>

            <svg class="formas" id="forma-3" data-name="forma 3" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 1920 1080">
                <defs>
                    <style>
                        .cls-1 {
                            fill: #f5f5f5;
                        }
                    </style>
                </defs>
                <title>Forma 2</title>
                <path class="cls-1"
                    d="M1442.47,39.8C1323.87,59.56,1201.24,80,960,80S596.13,59.56,477.53,39.8C360.14,20.23,238.76,0,0,0V1080H1920V0C1681.24,0,1559.86,20.23,1442.47,39.8Z" />
            </svg>


            <svg class="formas" id="forma-4" data-name="forma 3" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 1920 1080">
                <defs>
                    <style>
                        .cls-1 {
                            fill: #f5f5f5;
                        }
                    </style>
                </defs>
                <title>Forma 3</title>
                <path class="cls-1"
                    d="M0,0V1080c117,0,173.94-23.73,234.23-48.85S357,980,480,980s185.41,26,245.77,51.15S843,1080,960,1080s173.94-23.73,234.23-48.85S1317,980,1440,980s185.41,26,245.77,51.15S1803,1080,1920,1080V0Z" />
            </svg>
        </div>



        <!--  foto cachorro estatico  -->
        <div class=" position-absolute d-flex" id="mainimage">
            <img src="/img/fotos/Estático - Cao.png" width="900" alt="">
        </div>

        <!--  apresentação da aplicação  -->
        <div id="bloco-main">
            <h1 class="col-9 pt-5 " id="titulo-main">
                Encontre<br>
                seu melhor amigo</h1>
            <h4 class="col-7 pt-3 " id="subtitulo-1-main">
                Existem cada vez mais animais abandonados e tudo que eles precisam é de alguém para amar.
            </h4>
            <h4 class="col-7 pt-3" id="subtitulo-1-main">
                Ao adotar você
                não ganha apenas um pet para lhe fazer companhia, você ganha um amigo para todos os momentos. Não
                compre, adote!
            </h4>

            <div class="col-12 pt-1 d-flex" id="button">
                <button type="button" class="btn btn-none  btn-lg " id="button_inicial">QUERO ADOTAR</button>
                <button type="button" class="btn btn-none  btn-lg " id="button_inicial">QUERO AJUDAR</button>
            </div>

        </div>

    </div>

    <!----------------------------------------------------------------------------->
    <!--  sobre nos  -->
    <div class="row-1 p-5">

        <svg id="equipe-img" height="800" viewBox="0 0 850 850" fill="none" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="pattern0" height="1" width="1">
                    <image height="110%" xlink:href="/img/Quem somos.png"></image>
                </pattern>
            </defs>
            <path
                d="M824.79,285.64c17.49-43.92,29.91-88.83,23.5-137-4-30.46-16.36-57-37.3-79.25-32.73-34.71-74.24-54.14-119.8-65.18-35.52-8.61-69.75-3.93-102.54,13-25.83,13.35-48.78,30.85-72.44,47.36-24.64,17.21-49.81,33.54-76.9,46.55a426.59,426.59,0,0,1-126.94,38.34c-36.53,5.07-73.15,8.28-109.41,9.87-12.54-1.32-24.38.88-36.29,1.18-43.33,1.1-86.67-.66-130,1.39-12.24.58-24.45,1.23-36.62,2.16V633.84q31.52,28.26,64.86,54.31a804.82,804.82,0,0,0,118.4,77.28c71.38,37.94,146.45,65,226.81,76.73A754.39,754.39,0,0,0,512.72,850c8.57.07,17.15-.9,25.71-1.54,15.19-1.15,30.48-1.59,45.52-3.79,45.45-6.66,89.72-18,131.95-36.41,52.43-22.88,90.56-59.52,109-114.67,8.69-26,11.15-52.74,10.3-80.15a277.45,277.45,0,0,0-9.27-63.14c-7-26.43-19.79-50.64-29.67-76-15.82-40.53-17.47-81-.71-121.48C804.9,330.28,815.76,308.33,824.79,285.64Z"
                fill="url(#pattern0)" />
        </svg>

    </div>

    <div class="col-8" id="abouts">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner" id="carrossel">
                <div class="carousel-item active">
                    <div class=" d-none d-md-block">
                        <h5>Quem Somos?</h5>
                        <p>O Animais Universitários é um projeto voluntário que dá assistência a animais em estado de
                            vulnerabilidade no Campus do Pici, nosso maior objetivo é encontrar um lar para cada animal
                            abandonado da faculdade. <br> <br>

                            Para isso, ao resgatarmos um animal vulnerável, primeiro damos todo o suporte necessário
                            para sua reabilitação. Assim que o animal estiver recuperado e saudável o disponibilizamos
                            para encontrar seu novo lar.
                        </p>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class=" d-none d-md-block">
                        <h5>Como o AU funciona?</h5>
                        <p>O Animais Universitários é um projeto voluntário que dá assistência a animais em estado de
                            vulnerabilidade no Campus do Pici, nosso maior objetivo é encontrar um lar para cada animal
                            abandonado da faculdade. <br> <br>

                            Para isso, ao resgatarmos um animal vulnerável, primeiro damos todo o suporte necessário
                            para sua reabilitação. Assim que o animal estiver recuperado e saudável o disponibilizamos
                            para encontrar seu novo lar.
                        </p>
                    </div>
                </div>
            </div>
            <div class="botao">
                <a href="#carouselExampleIndicators" role="button" data-slide="next">

                    <span id="dot">
                        <svg id="seta" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                            <title>Seta</title>
                            <path
                                d="M60.44,200a23.1,23.1,0,0,1-16.22-6.58,22.15,22.15,0,0,1,0-31.78L107.13,100,44.22,38.36a22.15,22.15,0,0,1,0-31.78,23.28,23.28,0,0,1,32.43,0l79.13,77.53a22.15,22.15,0,0,1,0,31.78L76.65,193.42A23.08,23.08,0,0,1,60.44,200Z" />
                        </svg>
                    </span>
                </a>
            </div>
        </div>
    </div>


    <!--  Filtro apresentação  -->

    <center class="pt-5" id="text-catalogo">
        <h1 class="text-center">Quero adotar!</h1>
        <h3 class="text-center">Aqui você pode encontrar seu novo melhor amigo.</h3>
    </center>


    <!--  Filtro para cães --------------------------------------------------->


    <div class="d-flex w-100" id="myBtnContainer">

        <div class="d-flex w-100" id="filtro-body"></div>

        <h4 class="col-6 px-5 pt-4" id="animal-titulo">Cachorros</h4>
        <h7 class="pt-5" id="filtro-custom">Filtros:</h7>


        <div class="floar-right d-flex" id="icones-filtro">


            <!--  Filtro para cães - macho -->

            <button class="btn " onclick="filterSelection('Macho')">
                <svg id="Camada_1" height="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Filtro - Macho</title>
                    <path
                        d="M175,36a10.18,10.18,0,0,0-2.1-6.58C170,25.9,166.09,25,162,25q-17.65,0-35.3.37c-8.1.15-13.83,7.7-12.23,15.79,1,5.26,6.47,11.86,14,10,1.26-.31,2.57-.42,4-.66a2.69,2.69,0,0,1-.36.69c-3.47,3.41-7,6.81-10.49,10.26A60.17,60.17,0,0,0,86.28,50C52.43,50,25,78,25,112.5S52.43,175,86.28,175s61.27-28,61.27-62.5A63,63,0,0,0,138,79l13.36-12.85a84.5,84.5,0,0,1,.49,8.91,11.59,11.59,0,0,0,11.48,11.09c5.92.08,11.37-4.47,11.5-10.53C175.12,62.43,175,49.22,175,36ZM86.28,152.5c-21.66,0-39.22-17.91-39.22-40s17.56-40,39.22-40,39.21,17.91,39.21,40S107.94,152.5,86.28,152.5Z" />
                </svg>
                <p>Macho</p>
            </button>

            <!--  Filtro para cães - femea -->

            <button class="btn active" onclick="filterSelection('Femea')">
                <svg id="Camada_1" height="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Filtro - Femea</title>
                    <path
                        d="M162.5,70.27a62.5,62.5,0,1,0-75.88,61.31c.08,4.36,0,10.27,0,14.49H84.39c-3.94,0-7.89-.09-11.82.05a12.15,12.15,0,0,0-11.18,15.82c1.6,5.26,6.08,8.52,12.09,8.64,4.27.09,8.55,0,13.38,0,0,3.85-.21,7.46,0,11A11.05,11.05,0,0,0,94,191.36,11.55,11.55,0,0,0,106.12,190a11.94,11.94,0,0,0,4.94-10.25c0-3,0-6,0-9.17h2.21c4.14,0,8.29.1,12.43,0A12.24,12.24,0,0,0,138,158.08c-.09-6.73-5.47-11.89-12.54-12-3.39-.05-6.77,0-10.16,0h-4.07V132A62.71,62.71,0,0,0,162.5,70.27ZM60,70.27a40,40,0,1,1,40,40.17A40.08,40.08,0,0,1,60,70.27Z" />
                </svg>
                <p>Femea</p>
            </button>

            <!--  Filtro para cães - meacho e femea -->

            <button class="btn " onclick="filterSelection('M e F')">
                <svg id="Camada_1" height="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Filtro - Macho e Femea</title>
                    <path
                        d="M143.11,36.88l11.56-11.07a3,3,0,0,0,.36-.68c-1.46.23-2.77.34-4,.64-7.52,1.83-13-4.68-14-9.85A12.84,12.84,0,0,1,149.25.36C161.07.13,172.89,0,184.71,0c4.1,0,8.06.89,10.89,4.37a9.93,9.93,0,0,1,2.1,6.48c0,13,.17,26-.12,39-.14,6-5.61,10.44-11.56,10.37a11.54,11.54,0,0,1-11.53-10.92,82,82,0,0,0-.49-8.78c-4.54,4.27-9.07,8.55-13.69,12.91a59.86,59.86,0,0,1,8.12,44.94,60.53,60.53,0,0,1-17.25,31.67c-18.75,18.44-44.47,21-62.36,14.35,3.9-2.33,8-4.59,11.89-7.17a62.34,62.34,0,0,0,13.62-12.73,4.59,4.59,0,0,1,2.4-1.5,37.31,37.31,0,0,0,28.72-33.82c1.26-23.1-16.9-41.18-40-39.84C88.06,50.36,73,64.8,71.19,82.07a37.37,37.37,0,0,0,6.29,25.68,12.25,12.25,0,0,1,.62,1.13,30.13,30.13,0,0,1-24.38,3.22,2.84,2.84,0,0,1-1.6-1.5c-7.93-19.68-6.61-38.72,4.71-56.69,9.43-15,23.21-24,40.64-27.12,15.79-2.83,30.45.42,43.91,9.1.34.22.67.44,1,.64C142.56,36.63,142.74,36.71,143.11,36.88Z" />
                    <path
                        d="M49.68,179.05c-4.64,0-8.75.06-12.86,0-5.77-.12-10.08-3.24-11.61-8.27A11.63,11.63,0,0,1,36,155.62c3.78-.14,7.57,0,11.35,0h2.19c0-4.44,0-8.67-.07-12.89,0-.47-1-1.17-1.56-1.32a57.94,57.94,0,0,1-24.54-12.6c-11.61-10-18.86-22.62-20.59-37.9C0,66.81,8.78,47.46,28.46,33.53,42.26,23.76,57.9,21,75,24.34c-.79.53-1.27.88-1.78,1.18A71.46,71.46,0,0,0,49.39,47.68a5.93,5.93,0,0,1-2.2,1.86C35.78,55.23,28.46,64.07,26.12,76.75a36.76,36.76,0,1,0,72.94,4.74,35.69,35.69,0,0,0-4.3-15.57c-.46-.87-.94-1.74-1.47-2.72a25.07,25.07,0,0,1,9.91-4,26.34,26.34,0,0,1,13.36.83,3.42,3.42,0,0,1,1.87,1.71,60,60,0,0,1-43.52,80c-.59.13-1.15.31-1.85.5v13.34H77c3.25,0,6.5,0,9.76,0,6.79.09,12,5,12,11.47A11.74,11.74,0,0,1,87,179c-4,.13-8,0-12,0H72.93c0,3,0,5.89,0,8.78a11.35,11.35,0,0,1-4.74,9.8,11.13,11.13,0,0,1-11.68,1.27,10.59,10.59,0,0,1-6.78-9.32C49.48,186.18,49.68,182.73,49.68,179.05Z" />
                </svg>
                <p>Todos</p>
            </button>

            <div class="vl d-flex"></div>

            <!--  Filtro para cães - pequenos -->

            <button class="btn" onclick="filterSelection('Tamanho P')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 231.57 200">
                    <title>Filtro - Tamanho P</title>
                    <path
                        d="M37.28,155.49V42.9c-5.31,5.24-9.75,9.65-14.23,14-6.63,6.45-14,7.12-19.33,1.8S-1.1,46,5.43,39.42Q22.58,22.16,39.82,5C46.5-1.66,53.37-1.67,60.08,5Q77.33,22.15,94.47,39.41c6.54,6.59,7.11,14,1.68,19.4C91,64,83.27,63.23,76.8,56.89q-6.42-6.28-12.87-12.55c-.1-.09-.4,0-1.09.12V157.37c5.72-5.86,10.22-10.65,14.92-15.24,5.72-5.59,13.45-5.92,18.38-1,5.1,5.08,5,12.61-.75,18.44q-18,18.31-36.27,36.3c-5.59,5.51-12.79,5.52-18.36,0Q22.25,177.64,4.05,159.07c-5.38-5.51-5.31-12.88-.33-17.84s12.27-4.92,17.84.45c4.93,4.75,9.42,9.95,14.1,14.94Z" />
                    <path
                        d="M226,94.12q-5.58,10.29-17.43,16.59T178.65,117H154.08v56.28h-29.4V26.71h54q17,0,29,5.88t18,16.17a45.5,45.5,0,0,1,6,23.31A45.75,45.75,0,0,1,226,94.12Zm-30.56-6.41q5.88-5.55,5.88-15.64,0-21.42-23.94-21.42H154.08V93.28h23.31Q189.57,93.28,195.45,87.71Z" />
                </svg>
                <p>Pequeno</p>
            </button>

            <!--  Filtro para cães - medios -->

            <button class="btn" onclick="filterSelection('Tamanho M')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 284.65 200">
                    <title>Filtro - Tamanho M</title>
                    <path
                        d="M37.28,155.49V42.9c-5.31,5.24-9.75,9.65-14.23,14-6.63,6.45-14,7.12-19.33,1.8S-1.1,46,5.43,39.42Q22.58,22.16,39.82,5C46.5-1.66,53.37-1.67,60.08,5Q77.33,22.15,94.47,39.41c6.54,6.59,7.11,14,1.68,19.4C91,64,83.27,63.23,76.8,56.89q-6.42-6.28-12.87-12.55c-.1-.09-.4,0-1.09.12V157.37c5.72-5.86,10.22-10.65,14.92-15.24,5.72-5.59,13.45-5.92,18.38-1,5.1,5.08,5,12.61-.75,18.44q-18,18.31-36.27,36.3c-5.59,5.51-12.79,5.52-18.36,0Q22.25,177.64,4.05,159.07c-5.38-5.51-5.31-12.88-.33-17.84s12.27-4.92,17.84.45c4.93,4.75,9.42,9.95,14.1,14.94Z" />
                    <path
                        d="M284.65,26.71V173.29h-29.4V78L216,173.29H193.72L154.24,78v95.34h-29.4V26.71h33.39l46.62,109,46.62-109Z" />
                </svg>
                <p>Medio</p>
            </button>

            <!--  Filtro para cães - grandes -->

            <button class="btn" onclick="filterSelection('Tamanho G')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 256.15 200">
                    <title>Filtro - Tamanho G</title>
                    <path
                        d="M37.28,155.49V42.9c-5.31,5.24-9.75,9.65-14.23,14-6.63,6.45-14,7.12-19.33,1.8S-1.1,46,5.43,39.42Q22.58,22.16,39.82,5C46.5-1.66,53.37-1.67,60.08,5Q77.33,22.15,94.47,39.41c6.54,6.59,7.11,14,1.68,19.4C91,64,83.27,63.23,76.8,56.89q-6.42-6.28-12.87-12.55c-.1-.09-.4,0-1.09.12V157.37c5.72-5.86,10.22-10.65,14.92-15.24,5.72-5.59,13.45-5.92,18.38-1,5.1,5.08,5,12.61-.75,18.44q-18,18.31-36.27,36.3c-5.59,5.51-12.79,5.52-18.36,0Q22.25,177.64,4.05,159.07c-5.38-5.51-5.31-12.88-.33-17.84s12.27-4.92,17.84.45c4.93,4.75,9.42,9.95,14.1,14.94Z" />
                    <path
                        d="M218.77,71.12a34.45,34.45,0,0,0-13.86-14.06,42.18,42.18,0,0,0-20.58-4.83,45.09,45.09,0,0,0-23.1,5.87,40.73,40.73,0,0,0-15.75,16.8q-5.67,10.93-5.67,25.2,0,14.72,5.77,25.63a40.81,40.81,0,0,0,16.07,16.79q10.29,5.89,23.94,5.88,16.8,0,27.51-8.92t14.07-24.88h-50.4V92.12h79.38v25.62a68.84,68.84,0,0,1-12.6,28.36A71.15,71.15,0,0,1,218.66,167a73.14,73.14,0,0,1-34.12,7.87q-21.21,0-38.33-9.55a69.47,69.47,0,0,1-26.88-26.57q-9.76-17-9.76-38.64t9.76-38.74a69.31,69.31,0,0,1,26.88-26.67,76.86,76.86,0,0,1,38.12-9.55q24.78,0,43,12.07t25.2,33.91Z" />
                </svg>
                <p>Grande</p>
            </button>

            <!--  Filtro para cães - todos PMG -->

            <button class="btn" onclick="filterSelection('Tamanho Todos')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Filtro - Tamanho</title>
                    <path
                        d="M37.28,155.49V42.9c-5.31,5.24-9.75,9.65-14.23,14-6.63,6.45-14,7.12-19.33,1.8S-1.1,46,5.43,39.42Q22.58,22.16,39.82,5C46.5-1.66,53.37-1.67,60.08,5Q77.33,22.15,94.47,39.41c6.54,6.59,7.11,14,1.68,19.4C91,64,83.27,63.23,76.8,56.89q-6.42-6.28-12.87-12.55c-.1-.09-.4,0-1.09.12V157.37c5.72-5.86,10.22-10.65,14.92-15.24,5.72-5.59,13.45-5.92,18.38-1,5.1,5.08,5,12.61-.75,18.44q-18,18.31-36.27,36.3c-5.59,5.51-12.79,5.52-18.36,0Q22.25,177.64,4.05,159.07c-5.38-5.51-5.31-12.88-.33-17.84s12.27-4.92,17.84.45c4.93,4.75,9.42,9.95,14.1,14.94Z" />
                    <path
                        d="M162.8,112.44c-9.46,0-18.92.08-28.38,0-5.13-.07-8.43-3.88-9.1-10-.9-8.31,2.58-14.72,8.55-14.78,19.07-.19,38.14-.16,57.21,0,5.33,0,9,5.65,8.92,12.66s-3.81,12.08-9.26,12.17C181.42,112.55,172.11,112.44,162.8,112.44Z" />
                    <path
                        d="M162.74,12.56c9.16,0,18.33,0,27.49,0,5.8,0,9.59,4.76,9.76,12s-3.59,12.69-9.3,12.74q-28.16.22-56.32,0c-6-.05-9.25-4.86-9.15-12.7.11-7.57,3.61-12,9.57-12.08C144.11,12.52,153.42,12.56,162.74,12.56Z" />
                    <path
                        d="M162.37,187.38c-9.32,0-18.63.05-27.94,0-5.6,0-9.07-4.64-9.2-12-.15-7.89,3.07-12.76,9.06-12.81q28.16-.22,56.32,0c5.74,0,9.5,5.43,9.38,12.63s-3.93,12.12-9.68,12.15C181,187.42,171.68,187.38,162.37,187.38Z" />
                </svg>
                <p>Todos</p>
            </button>


            <div class="vl d-flex"></div>

            <!--  Filtro para cães - disponivel -->

            <button class="btn" onclick="filterSelection('Disponivel')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 240 200">
                    <title>Filtro - Disponivel</title>
                    <path
                        d="M235.88,134.26,130.11,4.2a7.61,7.61,0,0,0-.9-.88,14.41,14.41,0,0,0-18.39,0,7.44,7.44,0,0,0-.93.89L4.12,134.26c-3.3,4.05-3.38,7.79-.22,10.5,3.32,2.84,6.93,2.09,10.45-2.2s7-8.56,10.47-12.84L33.66,119c1.37,7.72,2.57,14.45,3.76,21.18,3.35,18.92,6.73,37.83,10,56.76A4.83,4.83,0,0,0,48.83,200h29a9.38,9.38,0,0,0,0-1.52c-2.55-17.38-5-34.76-7.7-52.11-2.49-16.15,7.22-28.56,23.41-28.87,8.82-.17,44.14-.17,53,0,16.19.31,25.9,12.72,23.41,28.87-2.68,17.35-5.15,34.73-7.7,52.11a9.38,9.38,0,0,0,0,1.52h29a4.83,4.83,0,0,0,1.42-3.11c3.26-18.93,6.64-37.84,10-56.76,1.19-6.73,2.39-13.46,3.76-21.18l8.84,10.77q5.23,6.42,10.47,12.84c3.52,4.29,7.13,5,10.45,2.2C239.26,142.05,239.18,138.31,235.88,134.26Z" />
                </svg>
                <p>Disponivel</p>
            </button>

            <!--  Filtro para cães - adotado -->

            <button class="btn" onclick="filterSelection('Adotado')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 240 200">
                    <title>Filtro - Adotado</title>
                    <path
                        d="M119.78,141.72c2.42-1.64,4.66-3.24,7-4.71,6.89-4.37,14-4.66,20.91-.33,7.14,4.45,10.07,11.16,9.58,19.44-.5,8.44-4.65,15.08-10.63,20.69-7.81,7.32-15.78,14.49-23.62,21.79-2,1.88-3.81,1.84-5.78,0-8.2-7.57-16.53-15-24.6-22.7-5.21-5-9.06-10.93-9.78-18.33-.78-7.94,1.23-15,8-19.93,6.42-4.7,13.5-5.34,20.63-1.78C114.35,137.34,116.85,139.64,119.78,141.72Z" />
                    <path
                        d="M235.88,134.26,130.11,4.2a7.61,7.61,0,0,0-.9-.88,14.41,14.41,0,0,0-18.39,0,7.44,7.44,0,0,0-.93.89L4.12,134.26c-3.3,4.05-3.38,7.79-.22,10.5,3.32,2.84,6.93,2.09,10.45-2.2s7-8.56,10.47-12.84L33.66,119c1.37,7.72,2.57,14.45,3.76,21.18,3.35,18.92,6.73,37.83,10,56.76A4.83,4.83,0,0,0,48.83,200h29a9.38,9.38,0,0,0,0-1.52c-2.55-17.38-5-34.76-7.7-52.11-2.49-16.15,7.22-28.56,23.41-28.87,8.82-.17,44.14-.17,53,0,16.19.31,25.9,12.72,23.41,28.87-2.68,17.35-5.15,34.73-7.7,52.11a9.38,9.38,0,0,0,0,1.52h29a4.83,4.83,0,0,0,1.42-3.11c3.26-18.93,6.64-37.84,10-56.76,1.19-6.73,2.39-13.46,3.76-21.18l8.84,10.77q5.23,6.42,10.47,12.84c3.52,4.29,7.13,5,10.45,2.2C239.26,142.05,239.18,138.31,235.88,134.26Z" />
                </svg>
                <p>Adotado</p>
            </button>

            <!--  Filtro para cães - disponivel e adotado -->

            <button class="btn" onclick="filterSelection('Disp e Adot')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 240 200">
                    <title>Filtro - Disp e Adot</title>
                    <path
                        d="M121.82,166.08A13.08,13.08,0,0,1,132.59,171a90.69,90.69,0,0,1,12.07,17.15c3.22,6.14,0,11.45-7,11.81a15.58,15.58,0,0,1-8.2-1.88,16.89,16.89,0,0,0-16.15-.1,16,16,0,0,1-7.94,2.05c-7.52-.32-10.85-5.81-7.22-12.28a99.34,99.34,0,0,1,11.25-16.2A14.93,14.93,0,0,1,121.82,166.08Z" />
                    <path
                        d="M98.72,143.74a19.32,19.32,0,0,1,2.68-9.06c3.63-6.06,10-6.26,14-.47,4.16,6,3.94,16.28-.47,22.08-3.46,4.54-8.39,4.77-12.27.57C100.19,154.14,98.68,149.5,98.72,143.74Z" />
                    <path
                        d="M141.32,145c-.2,4.31-1,8.15-3.57,11.46-3.57,4.62-8.95,4.61-12.56,0-4.69-6-4.78-16.76-.2-22.78,3.65-4.79,9.14-4.82,12.87,0C140.53,137.05,141.17,141.09,141.32,145Z" />
                    <path
                        d="M103,167.23c-.15.92-.25,1.9-.49,2.83-1.09,4.15-4.8,5.91-8.75,4-4.67-2.26-7.07-6.27-8.31-11a12,12,0,0,1,0-6.58c1.27-4.14,5-5.78,8.88-3.71C100.15,155.84,102.38,161.06,103,167.23Z" />
                    <path
                        d="M137.15,167.32a16.82,16.82,0,0,1,6.1-13c2.37-2,5.07-3.4,8.19-1.89S155.12,157,155,160a17,17,0,0,1-6.24,12.56,11.21,11.21,0,0,1-2.31,1.48c-4.1,2-7.75.37-8.88-4A22.5,22.5,0,0,1,137.15,167.32Z" />
                    <path
                        d="M235.88,134.26,130.11,4.2a7.61,7.61,0,0,0-.9-.88,14.41,14.41,0,0,0-18.39,0,7.44,7.44,0,0,0-.93.89L4.12,134.26c-3.3,4.05-3.38,7.79-.22,10.5,3.32,2.84,6.93,2.09,10.45-2.2s7-8.56,10.47-12.84L33.66,119c1.37,7.72,2.57,14.45,3.76,21.18,3.35,18.92,6.73,37.83,10,56.76A4.83,4.83,0,0,0,48.83,200h29a9.38,9.38,0,0,0,0-1.52c-2.55-17.38-5-34.76-7.7-52.11-2.49-16.15,7.22-28.56,23.41-28.87,8.82-.17,44.14-.17,53,0,16.19.31,25.9,12.72,23.41,28.87-2.68,17.35-5.15,34.73-7.7,52.11a9.38,9.38,0,0,0,0,1.52h29a4.83,4.83,0,0,0,1.42-3.11c3.26-18.93,6.64-37.84,10-56.76,1.19-6.73,2.39-13.46,3.76-21.18l8.84,10.77q5.23,6.42,10.47,12.84c3.52,4.29,7.13,5,10.45,2.2C239.26,142.05,239.18,138.31,235.88,134.26Z" />
                </svg>
                <p>Todos</p>
            </button>
        </div>
    </div>



    <!--  Catalogo para cães ------------------------------------------------------>


    <div class="p-5 col-12">
        <div class="d-flex col-10">
            <!--
<button id="slideLeft" type="button"> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
        fill="currentColor" class="bi bi-arrow-left-circle" viewBox="0 0 16 16">
        <path fill-rule="evenodd"
            d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z" />
    </svg></button>
-->
            <div class="d-flex">
                <div id="container3">



                    <div id="content" class="col-2 service-box pt-2 d-flex">
                        <div class="filterDiv Cachorro Femea  Tamanho M Adotado M e F Disp e Adot Tamanho Todos">
                            <a href="#">
                                <img src="https://i.imgur.com/oo67PIH.jpg" class="imagem-tamanho"></img>
                                <div class="d-block" id="info">
                                    <h3>Nome</h3>
                                    <div class="d-flex" id="info-nome">
                                        <ul id="P">
                                            P
                                        </ul>
                                        <ul id="M">
                                            M
                                        </ul>
                                        <ul id="G">
                                            G
                                        </ul>

                                        <spam id="circle"></spam>

                                        <div class="px-3">
                                            <div class="d-flex" id="genero-nome">
                                                <svg id="Camada_1" height="22px" data-name="Camada 1"
                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                                    <title>Filtro - Femea</title>
                                                    <path
                                                        d="M162.5,70.27a62.5,62.5,0,1,0-75.88,61.31c.08,4.36,0,10.27,0,14.49H84.39c-3.94,0-7.89-.09-11.82.05a12.15,12.15,0,0,0-11.18,15.82c1.6,5.26,6.08,8.52,12.09,8.64,4.27.09,8.55,0,13.38,0,0,3.85-.21,7.46,0,11A11.05,11.05,0,0,0,94,191.36,11.55,11.55,0,0,0,106.12,190a11.94,11.94,0,0,0,4.94-10.25c0-3,0-6,0-9.17h2.21c4.14,0,8.29.1,12.43,0A12.24,12.24,0,0,0,138,158.08c-.09-6.73-5.47-11.89-12.54-12-3.39-.05-6.77,0-10.16,0h-4.07V132A62.71,62.71,0,0,0,162.5,70.27ZM60,70.27a40,40,0,1,1,40,40.17A40.08,40.08,0,0,1,60,70.27Z" />
                                                </svg>

                                                <h5>Fêmea</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="filterDiv Cachorro Macho  Tamanho P Disponivel M e F Disp e Adot Tamanho Todos">
                            <a href="#">
                                <img src="https://static.standard.co.uk/2021/06/21/12/IMG_4368.jpg?width=968&auto=webp&quality=75&crop=968%3A645%2Csmart"
                                    class="imagem-tamanho"></img>
                                <div class="d-block" id="info">
                                    <h3>Nome</h3>
                                    <div class="d-flex" id="info-nome">
                                        <ul id="P">
                                            P
                                        </ul>
                                        <ul id="M">
                                            M
                                        </ul>
                                        <ul id="G">
                                            G
                                        </ul>

                                        <spam id="circle"></spam>

                                        <div class="px-3">
                                            <div class="d-flex" id="genero-nome">
                                                <svg id="Camada_1" height="22px" data-name="Camada 1"
                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                                    <title>Filtro - Femea</title>
                                                    <path
                                                        d="M162.5,70.27a62.5,62.5,0,1,0-75.88,61.31c.08,4.36,0,10.27,0,14.49H84.39c-3.94,0-7.89-.09-11.82.05a12.15,12.15,0,0,0-11.18,15.82c1.6,5.26,6.08,8.52,12.09,8.64,4.27.09,8.55,0,13.38,0,0,3.85-.21,7.46,0,11A11.05,11.05,0,0,0,94,191.36,11.55,11.55,0,0,0,106.12,190a11.94,11.94,0,0,0,4.94-10.25c0-3,0-6,0-9.17h2.21c4.14,0,8.29.1,12.43,0A12.24,12.24,0,0,0,138,158.08c-.09-6.73-5.47-11.89-12.54-12-3.39-.05-6.77,0-10.16,0h-4.07V132A62.71,62.71,0,0,0,162.5,70.27ZM60,70.27a40,40,0,1,1,40,40.17A40.08,40.08,0,0,1,60,70.27Z" />
                                                </svg>

                                                <h5>Fêmea</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="filterDiv Cachorro Femea  Tamanho M Adotado M e F Disp e Adot Tamanho Todos">
                            <a href="#">
                                <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHVwcHklMjBkb2d8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80"
                                    class="imagem-tamanho"></img>
                                <div class="d-block" id="info">
                                    <h3>Nome</h3>
                                    <div class="d-flex" id="info-nome">
                                        <ul id="P">
                                            P
                                        </ul>
                                        <ul id="M">
                                            M
                                        </ul>
                                        <ul id="G">
                                            G
                                        </ul>

                                        <spam id="circle"></spam>

                                        <div class="px-3">
                                            <div class="d-flex" id="genero-nome">
                                                <svg id="Camada_1" height="22px" data-name="Camada 1"
                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                                    <title>Filtro - Femea</title>
                                                    <path
                                                        d="M162.5,70.27a62.5,62.5,0,1,0-75.88,61.31c.08,4.36,0,10.27,0,14.49H84.39c-3.94,0-7.89-.09-11.82.05a12.15,12.15,0,0,0-11.18,15.82c1.6,5.26,6.08,8.52,12.09,8.64,4.27.09,8.55,0,13.38,0,0,3.85-.21,7.46,0,11A11.05,11.05,0,0,0,94,191.36,11.55,11.55,0,0,0,106.12,190a11.94,11.94,0,0,0,4.94-10.25c0-3,0-6,0-9.17h2.21c4.14,0,8.29.1,12.43,0A12.24,12.24,0,0,0,138,158.08c-.09-6.73-5.47-11.89-12.54-12-3.39-.05-6.77,0-10.16,0h-4.07V132A62.71,62.71,0,0,0,162.5,70.27ZM60,70.27a40,40,0,1,1,40,40.17A40.08,40.08,0,0,1,60,70.27Z" />
                                                </svg>

                                                <h5>Fêmea</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="filterDiv Cachorro Macho  Tamanho G Adotado M e F Disp e Adot Tamanho Todos">
                            <a href="#">
                                <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F47%2F2021%2F03%2F25%2Fdoberman-pinscher-red-collar-1100812121-2000.jpg"
                                    class="imagem-tamanho"></img>
                                <div class="d-block" id="info">
                                    <h3>Nome</h3>
                                    <div class="d-flex" id="info-nome">
                                        <ul id="P">
                                            P
                                        </ul>
                                        <ul id="M">
                                            M
                                        </ul>
                                        <ul id="G">
                                            G
                                        </ul>

                                        <spam id="circle"></spam>

                                        <div class="px-3">
                                            <div class="d-flex" id="genero-nome">
                                                <svg id="Camada_1" height="22px" data-name="Camada 1"
                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                                    <title>Filtro - Femea</title>
                                                    <path
                                                        d="M162.5,70.27a62.5,62.5,0,1,0-75.88,61.31c.08,4.36,0,10.27,0,14.49H84.39c-3.94,0-7.89-.09-11.82.05a12.15,12.15,0,0,0-11.18,15.82c1.6,5.26,6.08,8.52,12.09,8.64,4.27.09,8.55,0,13.38,0,0,3.85-.21,7.46,0,11A11.05,11.05,0,0,0,94,191.36,11.55,11.55,0,0,0,106.12,190a11.94,11.94,0,0,0,4.94-10.25c0-3,0-6,0-9.17h2.21c4.14,0,8.29.1,12.43,0A12.24,12.24,0,0,0,138,158.08c-.09-6.73-5.47-11.89-12.54-12-3.39-.05-6.77,0-10.16,0h-4.07V132A62.71,62.71,0,0,0,162.5,70.27ZM60,70.27a40,40,0,1,1,40,40.17A40.08,40.08,0,0,1,60,70.27Z" />
                                                </svg>

                                                <h5>Fêmea</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="filterDiv Cachorro Femea  Tamanho P Disponiel M e F Disp e Adot Tamanho Todos">
                            <a href="#">
                                <img src="https://www.thesprucepets.com/thmb/sfuyyLvyUx636_Oq3Fw5_mt-PIc=/3760x2820/smart/filters:no_upscale()/adorable-white-pomeranian-puppy-spitz-921029690-5c8be25d46e0fb000172effe.jpg"
                                    class="imagem-tamanho"></img>
                                <div class="d-block" id="info">
                                    <h3>Nome</h3>
                                    <div class="d-flex" id="info-nome">
                                        <ul id="P">
                                            P
                                        </ul>
                                        <ul id="M">
                                            M
                                        </ul>
                                        <ul id="G">
                                            G
                                        </ul>

                                        <spam id="circle"></spam>

                                        <div class="px-3">
                                            <div class="d-flex" id="genero-nome">
                                                <svg id="Camada_1" height="22px" data-name="Camada 1"
                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                                    <title>Filtro - Femea</title>
                                                    <path
                                                        d="M162.5,70.27a62.5,62.5,0,1,0-75.88,61.31c.08,4.36,0,10.27,0,14.49H84.39c-3.94,0-7.89-.09-11.82.05a12.15,12.15,0,0,0-11.18,15.82c1.6,5.26,6.08,8.52,12.09,8.64,4.27.09,8.55,0,13.38,0,0,3.85-.21,7.46,0,11A11.05,11.05,0,0,0,94,191.36,11.55,11.55,0,0,0,106.12,190a11.94,11.94,0,0,0,4.94-10.25c0-3,0-6,0-9.17h2.21c4.14,0,8.29.1,12.43,0A12.24,12.24,0,0,0,138,158.08c-.09-6.73-5.47-11.89-12.54-12-3.39-.05-6.77,0-10.16,0h-4.07V132A62.71,62.71,0,0,0,162.5,70.27ZM60,70.27a40,40,0,1,1,40,40.17A40.08,40.08,0,0,1,60,70.27Z" />
                                                </svg>

                                                <h5>Fêmea</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="filterDiv Cachorro Femea  Tamanho P Disponiel M e F Disp e Adot Tamanho Todos">
                            <a href="#">
                                <img src="https://media.newyorker.com/photos/5f6cd4dbe1656cfb9de92e71/master/pass/Gupta-DogTourofHouse.jpg"
                                    class="imagem-tamanho"></img>
                                <div class="d-block" id="info">
                                    <h3>Nome</h3>
                                    <div class="d-flex" id="info-nome">
                                        <ul id="P">
                                            P
                                        </ul>
                                        <ul id="M">
                                            M
                                        </ul>
                                        <ul id="G">
                                            G
                                        </ul>

                                        <spam id="circle"></spam>

                                        <div class="px-3">
                                            <div class="d-flex" id="genero-nome">
                                                <svg id="Camada_1" height="22px" data-name="Camada 1"
                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                                    <title>Filtro - Femea</title>
                                                    <path
                                                        d="M162.5,70.27a62.5,62.5,0,1,0-75.88,61.31c.08,4.36,0,10.27,0,14.49H84.39c-3.94,0-7.89-.09-11.82.05a12.15,12.15,0,0,0-11.18,15.82c1.6,5.26,6.08,8.52,12.09,8.64,4.27.09,8.55,0,13.38,0,0,3.85-.21,7.46,0,11A11.05,11.05,0,0,0,94,191.36,11.55,11.55,0,0,0,106.12,190a11.94,11.94,0,0,0,4.94-10.25c0-3,0-6,0-9.17h2.21c4.14,0,8.29.1,12.43,0A12.24,12.24,0,0,0,138,158.08c-.09-6.73-5.47-11.89-12.54-12-3.39-.05-6.77,0-10.16,0h-4.07V132A62.71,62.71,0,0,0,162.5,70.27ZM60,70.27a40,40,0,1,1,40,40.17A40.08,40.08,0,0,1,60,70.27Z" />
                                                </svg>

                                                <h5>Fêmea</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>



                    </div>



                </div>
            </div>
        </div>





        <!--   Botao de passar    --------------------------------------------->

        <div class="float-right">
            <button id="slideRight" type="button">
                <span id="dot">
                    <svg id="seta" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"
                        style="margin-left: 5px;">
                        <title>Seta</title>
                        <path
                            d="M60.44,200a23.1,23.1,0,0,1-16.22-6.58,22.15,22.15,0,0,1,0-31.78L107.13,100,44.22,38.36a22.15,22.15,0,0,1,0-31.78,23.28,23.28,0,0,1,32.43,0l79.13,77.53a22.15,22.15,0,0,1,0,31.78L76.65,193.42A23.08,23.08,0,0,1,60.44,200Z" />
                    </svg>
                </span>
            </button>
        </div>
    </div>


    <div class="margin-catalogo"></div>



    <!--  Filtro para gatos --------------------------------------------------->

    <div class="d-flex w-100" id="myBtnContainer">

        <div class="d-flex w-100" id="filtro-body"></div>

        <h4 class="col-6 px-5 pt-4" id="animal-titulo">Gatos</h4>
        <h7 class="pt-5" id="filtro-custom">Filtros:</h7>


        <div class="floar-right d-flex" id="icones-filtro">


            <!--  Filtro para gatos - macho -->

            <button class="btn " onclick="filterSelection2('Macho')">
                <svg id="Camada_1" height="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Filtro - Macho</title>
                    <path
                        d="M175,36a10.18,10.18,0,0,0-2.1-6.58C170,25.9,166.09,25,162,25q-17.65,0-35.3.37c-8.1.15-13.83,7.7-12.23,15.79,1,5.26,6.47,11.86,14,10,1.26-.31,2.57-.42,4-.66a2.69,2.69,0,0,1-.36.69c-3.47,3.41-7,6.81-10.49,10.26A60.17,60.17,0,0,0,86.28,50C52.43,50,25,78,25,112.5S52.43,175,86.28,175s61.27-28,61.27-62.5A63,63,0,0,0,138,79l13.36-12.85a84.5,84.5,0,0,1,.49,8.91,11.59,11.59,0,0,0,11.48,11.09c5.92.08,11.37-4.47,11.5-10.53C175.12,62.43,175,49.22,175,36ZM86.28,152.5c-21.66,0-39.22-17.91-39.22-40s17.56-40,39.22-40,39.21,17.91,39.21,40S107.94,152.5,86.28,152.5Z" />
                </svg>
                <p>Macho</p>
            </button>

            <!--  Filtro para cães - femea -->

            <button class="btn " onclick="filterSelection2('Femea')">
                <svg id="Camada_1" height="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Filtro - Femea</title>
                    <path
                        d="M162.5,70.27a62.5,62.5,0,1,0-75.88,61.31c.08,4.36,0,10.27,0,14.49H84.39c-3.94,0-7.89-.09-11.82.05a12.15,12.15,0,0,0-11.18,15.82c1.6,5.26,6.08,8.52,12.09,8.64,4.27.09,8.55,0,13.38,0,0,3.85-.21,7.46,0,11A11.05,11.05,0,0,0,94,191.36,11.55,11.55,0,0,0,106.12,190a11.94,11.94,0,0,0,4.94-10.25c0-3,0-6,0-9.17h2.21c4.14,0,8.29.1,12.43,0A12.24,12.24,0,0,0,138,158.08c-.09-6.73-5.47-11.89-12.54-12-3.39-.05-6.77,0-10.16,0h-4.07V132A62.71,62.71,0,0,0,162.5,70.27ZM60,70.27a40,40,0,1,1,40,40.17A40.08,40.08,0,0,1,60,70.27Z" />
                </svg>
                <p>Femea</p>
            </button>

            <!--  Filtro para cães - meacho e femea -->

            <button class="btn active" onclick="filterSelection2('M e F')">
                <svg id="Camada_1" height="35px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Filtro - Macho e Femea</title>
                    <path
                        d="M143.11,36.88l11.56-11.07a3,3,0,0,0,.36-.68c-1.46.23-2.77.34-4,.64-7.52,1.83-13-4.68-14-9.85A12.84,12.84,0,0,1,149.25.36C161.07.13,172.89,0,184.71,0c4.1,0,8.06.89,10.89,4.37a9.93,9.93,0,0,1,2.1,6.48c0,13,.17,26-.12,39-.14,6-5.61,10.44-11.56,10.37a11.54,11.54,0,0,1-11.53-10.92,82,82,0,0,0-.49-8.78c-4.54,4.27-9.07,8.55-13.69,12.91a59.86,59.86,0,0,1,8.12,44.94,60.53,60.53,0,0,1-17.25,31.67c-18.75,18.44-44.47,21-62.36,14.35,3.9-2.33,8-4.59,11.89-7.17a62.34,62.34,0,0,0,13.62-12.73,4.59,4.59,0,0,1,2.4-1.5,37.31,37.31,0,0,0,28.72-33.82c1.26-23.1-16.9-41.18-40-39.84C88.06,50.36,73,64.8,71.19,82.07a37.37,37.37,0,0,0,6.29,25.68,12.25,12.25,0,0,1,.62,1.13,30.13,30.13,0,0,1-24.38,3.22,2.84,2.84,0,0,1-1.6-1.5c-7.93-19.68-6.61-38.72,4.71-56.69,9.43-15,23.21-24,40.64-27.12,15.79-2.83,30.45.42,43.91,9.1.34.22.67.44,1,.64C142.56,36.63,142.74,36.71,143.11,36.88Z" />
                    <path
                        d="M49.68,179.05c-4.64,0-8.75.06-12.86,0-5.77-.12-10.08-3.24-11.61-8.27A11.63,11.63,0,0,1,36,155.62c3.78-.14,7.57,0,11.35,0h2.19c0-4.44,0-8.67-.07-12.89,0-.47-1-1.17-1.56-1.32a57.94,57.94,0,0,1-24.54-12.6c-11.61-10-18.86-22.62-20.59-37.9C0,66.81,8.78,47.46,28.46,33.53,42.26,23.76,57.9,21,75,24.34c-.79.53-1.27.88-1.78,1.18A71.46,71.46,0,0,0,49.39,47.68a5.93,5.93,0,0,1-2.2,1.86C35.78,55.23,28.46,64.07,26.12,76.75a36.76,36.76,0,1,0,72.94,4.74,35.69,35.69,0,0,0-4.3-15.57c-.46-.87-.94-1.74-1.47-2.72a25.07,25.07,0,0,1,9.91-4,26.34,26.34,0,0,1,13.36.83,3.42,3.42,0,0,1,1.87,1.71,60,60,0,0,1-43.52,80c-.59.13-1.15.31-1.85.5v13.34H77c3.25,0,6.5,0,9.76,0,6.79.09,12,5,12,11.47A11.74,11.74,0,0,1,87,179c-4,.13-8,0-12,0H72.93c0,3,0,5.89,0,8.78a11.35,11.35,0,0,1-4.74,9.8,11.13,11.13,0,0,1-11.68,1.27,10.59,10.59,0,0,1-6.78-9.32C49.48,186.18,49.68,182.73,49.68,179.05Z" />
                </svg>
                <p>Todos</p>
            </button>

            <div class="vl d-flex"></div>

            <!--  Filtro para cães - pequenos -->

            <button class="btn" onclick="filterSelection2('Tamanho P')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 231.57 200">
                    <title>Filtro - Tamanho P</title>
                    <path
                        d="M37.28,155.49V42.9c-5.31,5.24-9.75,9.65-14.23,14-6.63,6.45-14,7.12-19.33,1.8S-1.1,46,5.43,39.42Q22.58,22.16,39.82,5C46.5-1.66,53.37-1.67,60.08,5Q77.33,22.15,94.47,39.41c6.54,6.59,7.11,14,1.68,19.4C91,64,83.27,63.23,76.8,56.89q-6.42-6.28-12.87-12.55c-.1-.09-.4,0-1.09.12V157.37c5.72-5.86,10.22-10.65,14.92-15.24,5.72-5.59,13.45-5.92,18.38-1,5.1,5.08,5,12.61-.75,18.44q-18,18.31-36.27,36.3c-5.59,5.51-12.79,5.52-18.36,0Q22.25,177.64,4.05,159.07c-5.38-5.51-5.31-12.88-.33-17.84s12.27-4.92,17.84.45c4.93,4.75,9.42,9.95,14.1,14.94Z" />
                    <path
                        d="M226,94.12q-5.58,10.29-17.43,16.59T178.65,117H154.08v56.28h-29.4V26.71h54q17,0,29,5.88t18,16.17a45.5,45.5,0,0,1,6,23.31A45.75,45.75,0,0,1,226,94.12Zm-30.56-6.41q5.88-5.55,5.88-15.64,0-21.42-23.94-21.42H154.08V93.28h23.31Q189.57,93.28,195.45,87.71Z" />
                </svg>
                <p>Pequeno</p>
            </button>

            <!--  Filtro para cães - medios -->

            <button class="btn" onclick="filterSelection2('Tamanho M')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 284.65 200">
                    <title>Filtro - Tamanho M</title>
                    <path
                        d="M37.28,155.49V42.9c-5.31,5.24-9.75,9.65-14.23,14-6.63,6.45-14,7.12-19.33,1.8S-1.1,46,5.43,39.42Q22.58,22.16,39.82,5C46.5-1.66,53.37-1.67,60.08,5Q77.33,22.15,94.47,39.41c6.54,6.59,7.11,14,1.68,19.4C91,64,83.27,63.23,76.8,56.89q-6.42-6.28-12.87-12.55c-.1-.09-.4,0-1.09.12V157.37c5.72-5.86,10.22-10.65,14.92-15.24,5.72-5.59,13.45-5.92,18.38-1,5.1,5.08,5,12.61-.75,18.44q-18,18.31-36.27,36.3c-5.59,5.51-12.79,5.52-18.36,0Q22.25,177.64,4.05,159.07c-5.38-5.51-5.31-12.88-.33-17.84s12.27-4.92,17.84.45c4.93,4.75,9.42,9.95,14.1,14.94Z" />
                    <path
                        d="M284.65,26.71V173.29h-29.4V78L216,173.29H193.72L154.24,78v95.34h-29.4V26.71h33.39l46.62,109,46.62-109Z" />
                </svg>
                <p>Medio</p>
            </button>

            <!--  Filtro para cães - grandes -->

            <button class="btn" onclick="filterSelection2('Tamanho G')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 256.15 200">
                    <title>Filtro - Tamanho G</title>
                    <path
                        d="M37.28,155.49V42.9c-5.31,5.24-9.75,9.65-14.23,14-6.63,6.45-14,7.12-19.33,1.8S-1.1,46,5.43,39.42Q22.58,22.16,39.82,5C46.5-1.66,53.37-1.67,60.08,5Q77.33,22.15,94.47,39.41c6.54,6.59,7.11,14,1.68,19.4C91,64,83.27,63.23,76.8,56.89q-6.42-6.28-12.87-12.55c-.1-.09-.4,0-1.09.12V157.37c5.72-5.86,10.22-10.65,14.92-15.24,5.72-5.59,13.45-5.92,18.38-1,5.1,5.08,5,12.61-.75,18.44q-18,18.31-36.27,36.3c-5.59,5.51-12.79,5.52-18.36,0Q22.25,177.64,4.05,159.07c-5.38-5.51-5.31-12.88-.33-17.84s12.27-4.92,17.84.45c4.93,4.75,9.42,9.95,14.1,14.94Z" />
                    <path
                        d="M218.77,71.12a34.45,34.45,0,0,0-13.86-14.06,42.18,42.18,0,0,0-20.58-4.83,45.09,45.09,0,0,0-23.1,5.87,40.73,40.73,0,0,0-15.75,16.8q-5.67,10.93-5.67,25.2,0,14.72,5.77,25.63a40.81,40.81,0,0,0,16.07,16.79q10.29,5.89,23.94,5.88,16.8,0,27.51-8.92t14.07-24.88h-50.4V92.12h79.38v25.62a68.84,68.84,0,0,1-12.6,28.36A71.15,71.15,0,0,1,218.66,167a73.14,73.14,0,0,1-34.12,7.87q-21.21,0-38.33-9.55a69.47,69.47,0,0,1-26.88-26.57q-9.76-17-9.76-38.64t9.76-38.74a69.31,69.31,0,0,1,26.88-26.67,76.86,76.86,0,0,1,38.12-9.55q24.78,0,43,12.07t25.2,33.91Z" />
                </svg>
                <p>Grande</p>
            </button>

            <!--  Filtro para cães - todos PMG -->

            <button class="btn" onclick="filterSelection2('Tamanho Todos')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 200 200">
                    <title>Filtro - Tamanho</title>
                    <path
                        d="M37.28,155.49V42.9c-5.31,5.24-9.75,9.65-14.23,14-6.63,6.45-14,7.12-19.33,1.8S-1.1,46,5.43,39.42Q22.58,22.16,39.82,5C46.5-1.66,53.37-1.67,60.08,5Q77.33,22.15,94.47,39.41c6.54,6.59,7.11,14,1.68,19.4C91,64,83.27,63.23,76.8,56.89q-6.42-6.28-12.87-12.55c-.1-.09-.4,0-1.09.12V157.37c5.72-5.86,10.22-10.65,14.92-15.24,5.72-5.59,13.45-5.92,18.38-1,5.1,5.08,5,12.61-.75,18.44q-18,18.31-36.27,36.3c-5.59,5.51-12.79,5.52-18.36,0Q22.25,177.64,4.05,159.07c-5.38-5.51-5.31-12.88-.33-17.84s12.27-4.92,17.84.45c4.93,4.75,9.42,9.95,14.1,14.94Z" />
                    <path
                        d="M162.8,112.44c-9.46,0-18.92.08-28.38,0-5.13-.07-8.43-3.88-9.1-10-.9-8.31,2.58-14.72,8.55-14.78,19.07-.19,38.14-.16,57.21,0,5.33,0,9,5.65,8.92,12.66s-3.81,12.08-9.26,12.17C181.42,112.55,172.11,112.44,162.8,112.44Z" />
                    <path
                        d="M162.74,12.56c9.16,0,18.33,0,27.49,0,5.8,0,9.59,4.76,9.76,12s-3.59,12.69-9.3,12.74q-28.16.22-56.32,0c-6-.05-9.25-4.86-9.15-12.7.11-7.57,3.61-12,9.57-12.08C144.11,12.52,153.42,12.56,162.74,12.56Z" />
                    <path
                        d="M162.37,187.38c-9.32,0-18.63.05-27.94,0-5.6,0-9.07-4.64-9.2-12-.15-7.89,3.07-12.76,9.06-12.81q28.16-.22,56.32,0c5.74,0,9.5,5.43,9.38,12.63s-3.93,12.12-9.68,12.15C181,187.42,171.68,187.38,162.37,187.38Z" />
                </svg>
                <p>Todos</p>
            </button>


            <div class="vl d-flex"></div>

            <!--  Filtro para cães - disponivel -->

            <button class="btn" onclick="filterSelection2('Disponivel')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 240 200">
                    <title>Filtro - Disponivel</title>
                    <path
                        d="M235.88,134.26,130.11,4.2a7.61,7.61,0,0,0-.9-.88,14.41,14.41,0,0,0-18.39,0,7.44,7.44,0,0,0-.93.89L4.12,134.26c-3.3,4.05-3.38,7.79-.22,10.5,3.32,2.84,6.93,2.09,10.45-2.2s7-8.56,10.47-12.84L33.66,119c1.37,7.72,2.57,14.45,3.76,21.18,3.35,18.92,6.73,37.83,10,56.76A4.83,4.83,0,0,0,48.83,200h29a9.38,9.38,0,0,0,0-1.52c-2.55-17.38-5-34.76-7.7-52.11-2.49-16.15,7.22-28.56,23.41-28.87,8.82-.17,44.14-.17,53,0,16.19.31,25.9,12.72,23.41,28.87-2.68,17.35-5.15,34.73-7.7,52.11a9.38,9.38,0,0,0,0,1.52h29a4.83,4.83,0,0,0,1.42-3.11c3.26-18.93,6.64-37.84,10-56.76,1.19-6.73,2.39-13.46,3.76-21.18l8.84,10.77q5.23,6.42,10.47,12.84c3.52,4.29,7.13,5,10.45,2.2C239.26,142.05,239.18,138.31,235.88,134.26Z" />
                </svg>
                <p>Disponivel</p>
            </button>

            <!--  Filtro para cães - adotado -->

            <button class="btn" onclick="filterSelection2('Adotado')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 240 200">
                    <title>Filtro - Adotado</title>
                    <path
                        d="M119.78,141.72c2.42-1.64,4.66-3.24,7-4.71,6.89-4.37,14-4.66,20.91-.33,7.14,4.45,10.07,11.16,9.58,19.44-.5,8.44-4.65,15.08-10.63,20.69-7.81,7.32-15.78,14.49-23.62,21.79-2,1.88-3.81,1.84-5.78,0-8.2-7.57-16.53-15-24.6-22.7-5.21-5-9.06-10.93-9.78-18.33-.78-7.94,1.23-15,8-19.93,6.42-4.7,13.5-5.34,20.63-1.78C114.35,137.34,116.85,139.64,119.78,141.72Z" />
                    <path
                        d="M235.88,134.26,130.11,4.2a7.61,7.61,0,0,0-.9-.88,14.41,14.41,0,0,0-18.39,0,7.44,7.44,0,0,0-.93.89L4.12,134.26c-3.3,4.05-3.38,7.79-.22,10.5,3.32,2.84,6.93,2.09,10.45-2.2s7-8.56,10.47-12.84L33.66,119c1.37,7.72,2.57,14.45,3.76,21.18,3.35,18.92,6.73,37.83,10,56.76A4.83,4.83,0,0,0,48.83,200h29a9.38,9.38,0,0,0,0-1.52c-2.55-17.38-5-34.76-7.7-52.11-2.49-16.15,7.22-28.56,23.41-28.87,8.82-.17,44.14-.17,53,0,16.19.31,25.9,12.72,23.41,28.87-2.68,17.35-5.15,34.73-7.7,52.11a9.38,9.38,0,0,0,0,1.52h29a4.83,4.83,0,0,0,1.42-3.11c3.26-18.93,6.64-37.84,10-56.76,1.19-6.73,2.39-13.46,3.76-21.18l8.84,10.77q5.23,6.42,10.47,12.84c3.52,4.29,7.13,5,10.45,2.2C239.26,142.05,239.18,138.31,235.88,134.26Z" />
                </svg>
                <p>Adotado</p>
            </button>

            <!--  Filtro para cães - disponivel e adotado -->

            <button class="btn" onclick="filterSelection2('Disp e Adot')">
                <svg id="Camada_1" height="30px" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 240 200">
                    <title>Filtro - Disp e Adot</title>
                    <path
                        d="M121.82,166.08A13.08,13.08,0,0,1,132.59,171a90.69,90.69,0,0,1,12.07,17.15c3.22,6.14,0,11.45-7,11.81a15.58,15.58,0,0,1-8.2-1.88,16.89,16.89,0,0,0-16.15-.1,16,16,0,0,1-7.94,2.05c-7.52-.32-10.85-5.81-7.22-12.28a99.34,99.34,0,0,1,11.25-16.2A14.93,14.93,0,0,1,121.82,166.08Z" />
                    <path
                        d="M98.72,143.74a19.32,19.32,0,0,1,2.68-9.06c3.63-6.06,10-6.26,14-.47,4.16,6,3.94,16.28-.47,22.08-3.46,4.54-8.39,4.77-12.27.57C100.19,154.14,98.68,149.5,98.72,143.74Z" />
                    <path
                        d="M141.32,145c-.2,4.31-1,8.15-3.57,11.46-3.57,4.62-8.95,4.61-12.56,0-4.69-6-4.78-16.76-.2-22.78,3.65-4.79,9.14-4.82,12.87,0C140.53,137.05,141.17,141.09,141.32,145Z" />
                    <path
                        d="M103,167.23c-.15.92-.25,1.9-.49,2.83-1.09,4.15-4.8,5.91-8.75,4-4.67-2.26-7.07-6.27-8.31-11a12,12,0,0,1,0-6.58c1.27-4.14,5-5.78,8.88-3.71C100.15,155.84,102.38,161.06,103,167.23Z" />
                    <path
                        d="M137.15,167.32a16.82,16.82,0,0,1,6.1-13c2.37-2,5.07-3.4,8.19-1.89S155.12,157,155,160a17,17,0,0,1-6.24,12.56,11.21,11.21,0,0,1-2.31,1.48c-4.1,2-7.75.37-8.88-4A22.5,22.5,0,0,1,137.15,167.32Z" />
                    <path
                        d="M235.88,134.26,130.11,4.2a7.61,7.61,0,0,0-.9-.88,14.41,14.41,0,0,0-18.39,0,7.44,7.44,0,0,0-.93.89L4.12,134.26c-3.3,4.05-3.38,7.79-.22,10.5,3.32,2.84,6.93,2.09,10.45-2.2s7-8.56,10.47-12.84L33.66,119c1.37,7.72,2.57,14.45,3.76,21.18,3.35,18.92,6.73,37.83,10,56.76A4.83,4.83,0,0,0,48.83,200h29a9.38,9.38,0,0,0,0-1.52c-2.55-17.38-5-34.76-7.7-52.11-2.49-16.15,7.22-28.56,23.41-28.87,8.82-.17,44.14-.17,53,0,16.19.31,25.9,12.72,23.41,28.87-2.68,17.35-5.15,34.73-7.7,52.11a9.38,9.38,0,0,0,0,1.52h29a4.83,4.83,0,0,0,1.42-3.11c3.26-18.93,6.64-37.84,10-56.76,1.19-6.73,2.39-13.46,3.76-21.18l8.84,10.77q5.23,6.42,10.47,12.84c3.52,4.29,7.13,5,10.45,2.2C239.26,142.05,239.18,138.31,235.88,134.26Z" />
                </svg>
                <p>Todos</p>
            </button>
        </div>
    </div>



    <!--  Catalogo para gatos ------------------------------------------------------>


    <div class="p-5 col-12">
        <div class="d-flex col-10">
            <!--
<button id="slideLeft" type="button"> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
        fill="currentColor" class="bi bi-arrow-left-circle" viewBox="0 0 16 16">
        <path fill-rule="evenodd"
            d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z" />
    </svg></button>
-->
            <div class="d-flex">
                <div id="container">
                    <div id="content col-10">
                        <div class="col-2 service-box pt-2 d-flex ">



                            <div class="filterDiv Gato Femea  Tamanho M Adotado M e F Disp e Adot Tamanho Todos">
                                <a href="#">
                                    <img src="https://aliancatraducoes.com/wp-content/uploads/2019/10/o-que-sao-cat-tools.jpg"
                                        class="imagem-tamanho"></img>
                                    <div class="d-block" id="info">
                                        <h3>Nome</h3>
                                        <div class="d-flex" id="info-nome">
                                            <ul id="P">
                                                P
                                            </ul>
                                            <ul id="M">
                                                M
                                            </ul>
                                            <ul id="G">
                                                G
                                            </ul>

                                            <spam id="circle"></spam>

                                            <div class="px-3">
                                                <div class="d-flex" id="genero-nome">
                                                    <svg id="Camada_1" height="22px" data-name="Camada 1"
                                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                                        <title>Filtro - Femea</title>
                                                        <path
                                                            d="M162.5,70.27a62.5,62.5,0,1,0-75.88,61.31c.08,4.36,0,10.27,0,14.49H84.39c-3.94,0-7.89-.09-11.82.05a12.15,12.15,0,0,0-11.18,15.82c1.6,5.26,6.08,8.52,12.09,8.64,4.27.09,8.55,0,13.38,0,0,3.85-.21,7.46,0,11A11.05,11.05,0,0,0,94,191.36,11.55,11.55,0,0,0,106.12,190a11.94,11.94,0,0,0,4.94-10.25c0-3,0-6,0-9.17h2.21c4.14,0,8.29.1,12.43,0A12.24,12.24,0,0,0,138,158.08c-.09-6.73-5.47-11.89-12.54-12-3.39-.05-6.77,0-10.16,0h-4.07V132A62.71,62.71,0,0,0,162.5,70.27ZM60,70.27a40,40,0,1,1,40,40.17A40.08,40.08,0,0,1,60,70.27Z" />
                                                    </svg>

                                                    <h5>Fêmea</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="filterDiv Gato Macho  Tamanho G Disponivel M e F Disp e Adot Tamanho Todos">
                                <a href="#">
                                    <img src="https://www.petz.com.br/blog/wp-content/uploads/2020/08/cat-sitter-felino-1280x720.jpg"
                                        class="imagem-tamanho"></img>
                                    <div class="d-block" id="info">
                                        <h3>Nome</h3>
                                        <div class="d-flex" id="info-nome">
                                            <ul id="P">
                                                P
                                            </ul>
                                            <ul id="M">
                                                M
                                            </ul>
                                            <ul id="G">
                                                G
                                            </ul>

                                            <spam id="circle"></spam>

                                            <div class="px-3">
                                                <div class="d-flex" id="genero-nome">
                                                    <svg id="Camada_1" height="22px" data-name="Camada 1"
                                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                                        <title>Filtro - Femea</title>
                                                        <path
                                                            d="M162.5,70.27a62.5,62.5,0,1,0-75.88,61.31c.08,4.36,0,10.27,0,14.49H84.39c-3.94,0-7.89-.09-11.82.05a12.15,12.15,0,0,0-11.18,15.82c1.6,5.26,6.08,8.52,12.09,8.64,4.27.09,8.55,0,13.38,0,0,3.85-.21,7.46,0,11A11.05,11.05,0,0,0,94,191.36,11.55,11.55,0,0,0,106.12,190a11.94,11.94,0,0,0,4.94-10.25c0-3,0-6,0-9.17h2.21c4.14,0,8.29.1,12.43,0A12.24,12.24,0,0,0,138,158.08c-.09-6.73-5.47-11.89-12.54-12-3.39-.05-6.77,0-10.16,0h-4.07V132A62.71,62.71,0,0,0,162.5,70.27ZM60,70.27a40,40,0,1,1,40,40.17A40.08,40.08,0,0,1,60,70.27Z" />
                                                    </svg>

                                                    <h5>Fêmea</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="filterDiv Gato Femea  Tamanho G Adotado M e F Disp e Adot Tamanho Todos">
                                <a href="#">
                                    <img src="https://i.pinimg.com/564x/ac/03/98/ac03988834695cc2f6eb623a74143355--green-eyes-bengal-cats.jpg"
                                        class="imagem-tamanho"></img>
                                    <div class="d-block" id="info">
                                        <h3>Nome</h3>
                                        <div class="d-flex" id="info-nome">
                                            <ul id="P">
                                                P
                                            </ul>
                                            <ul id="M">
                                                M
                                            </ul>
                                            <ul id="G">
                                                G
                                            </ul>

                                            <spam id="circle"></spam>

                                            <div class="px-3">
                                                <div class="d-flex" id="genero-nome">
                                                    <svg id="Camada_1" height="22px" data-name="Camada 1"
                                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                                        <title>Filtro - Femea</title>
                                                        <path
                                                            d="M162.5,70.27a62.5,62.5,0,1,0-75.88,61.31c.08,4.36,0,10.27,0,14.49H84.39c-3.94,0-7.89-.09-11.82.05a12.15,12.15,0,0,0-11.18,15.82c1.6,5.26,6.08,8.52,12.09,8.64,4.27.09,8.55,0,13.38,0,0,3.85-.21,7.46,0,11A11.05,11.05,0,0,0,94,191.36,11.55,11.55,0,0,0,106.12,190a11.94,11.94,0,0,0,4.94-10.25c0-3,0-6,0-9.17h2.21c4.14,0,8.29.1,12.43,0A12.24,12.24,0,0,0,138,158.08c-.09-6.73-5.47-11.89-12.54-12-3.39-.05-6.77,0-10.16,0h-4.07V132A62.71,62.71,0,0,0,162.5,70.27ZM60,70.27a40,40,0,1,1,40,40.17A40.08,40.08,0,0,1,60,70.27Z" />
                                                    </svg>

                                                    <h5>Fêmea</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="filterDiv Gato Macho  Tamanho P Disponivel M e F Disp e Adot Tamanho Todos">
                                <a href="#">
                                    <img src="https://www.dicaspetz.com.br/wp-content/uploads/2020/02/cat-sitting.jpg"
                                        class="imagem-tamanho"></img>
                                    <div class="d-block" id="info">
                                        <h3>Nome</h3>
                                        <div class="d-flex" id="info-nome">
                                            <ul id="P">
                                                P
                                            </ul>
                                            <ul id="M">
                                                M
                                            </ul>
                                            <ul id="G">
                                                G
                                            </ul>

                                            <spam id="circle"></spam>

                                            <div class="px-3">
                                                <div class="d-flex" id="genero-nome">
                                                    <svg id="Camada_1" height="22px" data-name="Camada 1"
                                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                                                        <title>Filtro - Femea</title>
                                                        <path
                                                            d="M162.5,70.27a62.5,62.5,0,1,0-75.88,61.31c.08,4.36,0,10.27,0,14.49H84.39c-3.94,0-7.89-.09-11.82.05a12.15,12.15,0,0,0-11.18,15.82c1.6,5.26,6.08,8.52,12.09,8.64,4.27.09,8.55,0,13.38,0,0,3.85-.21,7.46,0,11A11.05,11.05,0,0,0,94,191.36,11.55,11.55,0,0,0,106.12,190a11.94,11.94,0,0,0,4.94-10.25c0-3,0-6,0-9.17h2.21c4.14,0,8.29.1,12.43,0A12.24,12.24,0,0,0,138,158.08c-.09-6.73-5.47-11.89-12.54-12-3.39-.05-6.77,0-10.16,0h-4.07V132A62.71,62.71,0,0,0,162.5,70.27ZM60,70.27a40,40,0,1,1,40,40.17A40.08,40.08,0,0,1,60,70.27Z" />
                                                    </svg>

                                                    <h5>Fêmea</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>



                        </div>
                    </div>
                </div>
            </div>
        </div>





        <!--   Botao de passar    --------------------------------------------->

        <div class="float-right">
            <button id="slideRight" type="button">
                <span id="dot">
                    <svg id="seta" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"
                        style="margin-left: 5px;">
                        <title>Seta</title>
                        <path
                            d="M60.44,200a23.1,23.1,0,0,1-16.22-6.58,22.15,22.15,0,0,1,0-31.78L107.13,100,44.22,38.36a22.15,22.15,0,0,1,0-31.78,23.28,23.28,0,0,1,32.43,0l79.13,77.53a22.15,22.15,0,0,1,0,31.78L76.65,193.42A23.08,23.08,0,0,1,60.44,200Z" />
                    </svg>
                </span>
            </button>
        </div>
    </div>


    <div class="margin-catalogo"></div>