@extends('layout.app')
@section('content')
<section class="conteudo-internas"><!-- Comodidade-->

  <header class="topo-fundador-chamada topo-internas">
    <div class="centraliza">
      <article class="box-descricao-fundador">
        <p>" A construção da nova sede é um marco importante e eu tenho certeza de que irá melhorar a vida de milhares de cidadãos brasileiros."</p>

        <a href="{{url('palavra-do-fundador')}}" class="link-palavra-do-fundador">
          <svg class="svg-seta-direita-dims">
            <use xlink:href="sprite-svg/sprite.svg#seta-direita"></use>
          </svg>
          VEJA A PALAVRA DO PRESIDENTE
        </a>
      </article>
    </div>
  </header>

  <div class="topo-conhecasede topo-internas">
    <div class="centraliza">
      <article class="box-descricao-sede">
        <h2>
          Comodidade
        </h2>
        <p>A nova sede conta com uma estrutura ampla e vai oferecer mais comodidade aos gestores públicos municipais.</p>
        <a href="#galeria" class="link-instalacoes scroll" >
          <svg class="svg-seta-direita-dims">
            <use xlink:href="sprite-svg/sprite.svg#seta-direita"></use>
          </svg>
          Ver Instalações
        </a>
      </article>
    </div>
  </div> <!-- final topo-conhecasede -->


  <section class="compensacao-ambiental"><!-- Compensão Ambiental-->
    <div class="centraliza">
      <div class="box-compensacao-ambiental">
      <article class="box-descricao"><!-- texto Compensão Ambiental-->
        <h2>
         COMPENSAÇÃO AMBIENTAL
        </h2>
        <p>A estrutura da nova sede também levou em conta a questão ambiental. Foram plantadas mais de 150 mudas nativas em substituição às árvores que foram retiradas com a construção do novo prédio. Além disso, a nova sede conta com tanques de reuso de águas.</p>
        <!--<a href="" class="link-instalacoes ">
          <svg class="svg-seta-direita-dims">
            <use xlink:href="sprite-svg/sprite.svg#seta-direita"></use>
          </svg>
          Saiba mais
        </a>-->
      </article><!--Fim texto Compensão Ambiental-->

      <div class="carousel-comp-amb  owl-carousel owl-theme"><!--carrousel Compensão Ambiental-->
        <figure class="item">
          <img src="assets/img/img-comp-ambiental.jpg" alt="" class="img-fluid">
        </figure>
        <figure class="item">
          <img src="assets/img/img-comp-ambiental-2.jpg" alt="" class="img-fluid" >

      </div><!--Fim carrousel Compensão Ambiental-->

      </div>
    </div>
  </section><!--Fim Compensão Ambiental-->


  <footer class="rodape-conforto">
    <div class="centraliza">
      <article class="box-descricao-conforto">
        <h2>
          Conforto
        </h2>
        <p>O novo prédio possui um salão nobre para 500 pessoas e quatro salas multimídias integradas. Para oferecer conforto aos colaboradores, prefeitos e visitantes, a nova sede terá dois andares de estacionamento e um restaurante. O novo espaço contará com um ambiente com mais luminosidade e conforto térmico. Também foram construídos um Museu do Municipalismo e uma praça cívica.</p>
      </article>
    </div>
  </footer>
</section><!-- final conteudo-internas -->

 <section id="galeria" > <!--Fim Compensão Ambiental class="filtr-container"-->
    <div class="">
      <div class="box-galeria" >
        <h2 class="titulo-padrao">
          <span>GALERIA DE FOTOS</span>
        </h2>

        <div class="box-filtro-galeria"><!--Filtros galeria-->
        <button type="button" class="btn ativo" data-filter="1">Todos</button>
        <button type="button" class="btn" data-filter="2">Estrutura Externa</button>
        <button type="button" class="btn " data-filter="3">Salão Nobre</button>
        <button type="button" class="btn" data-filter="4">Salas Multiuso</button>
        <button type="button" class="btn" data-filter="5">Louge Municipalista</button>
        <button type="button" class="btn" data-filter="6">Biblioteca</button>
        <button type="button" class="btn" data-filter="7">Museu</button>
        <button type="button" class="btn" data-filter="8">Praça Cívica</button>
        <button type="button" class="btn" data-filter="9">Área de Trabalho</button>
        <button type="button" class="btn" data-filter="10">Estúdio TV/Rádio</button>
        <button type="button" class="btn" data-filter="11">Restaurante</button>
        </div><!--Fim Filtros galeria-->

          <div class="row galeria-imagens filtr-container" id="galeria-fotos"> <!--Galeria de Imagens-->

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 2"> <!--EXTRUTURA EXTERNA-->
                <figure>
                  <img src="assets/img/galeria_fotos/estrutura_externa.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Extrutura Externa</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/estrutura_externa.jpg" data-lightbox="roadtrip" data-title="Extrutura Externa">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 2"><!--EXTRUTURA EXTERNA-->
                <figure>
                  <img src="assets/img/galeria_fotos/estrutura_externa-2.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Extrutura Externa</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/estrutura_externa-2.jpg" data-lightbox="roadtrip" data-title="Extrutura Externa">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 2"><!--EXTRUTURA EXTERNA-->
                <figure>
                  <img src="assets/img/galeria_fotos/estrutura_externa-3.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Extrutura Externa</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/estrutura_externa-3.jpg" data-lightbox="roadtrip" data-title="Extrutura Externa">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 2"><!--EXTRUTURA EXTERNA-->
                <figure>
                  <img src="assets/img/galeria_fotos/estrutura_externa-4.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Extrutura Externa</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/estrutura_externa-4.jpg" data-lightbox="roadtrip" data-title="Extrutura Externa">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 2"><!--EXTRUTURA EXTERNA-->
                <figure>
                  <img src="assets/img/galeria_fotos/estrutura_externa-5.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Extrutura Externa</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/estrutura_externa-5.jpg" data-lightbox="roadtrip" data-title="Extrutura Externa">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <!--FIM EXTRUTURA EXTERNA-->

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 3"><!--SALÃO NOBRE-->
                <figure>
                  <img src="assets/img/galeria_fotos/salao_nobre.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Salão Nobre</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/salao_nobre.jpg" data-lightbox="roadtrip" data-title="Salão Nobre">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 3"><!--SALÃO NOBRE-->
                <figure>
                  <img src="assets/img/galeria_fotos/salao_nobre-2.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Salão Nobre</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/salao_nobre-2.jpg" data-lightbox="roadtrip" data-title="Salão Nobre">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 3"><!--SALÃO NOBRE-->
                <figure>
                  <img src="assets/img/galeria_fotos/salao_nobre-3.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Salão Nobre</h1>
                <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/salao_nobre-3.jpg" data-lightbox="roadtrip" data-title="Salão Nobre">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>
            <!--FIM SALÃO NOBRE-->

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 4"><!--SALA MULTISUSO-->
                <figure>
                  <img src="assets/img/galeria_fotos/sala_multiuso.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Sala Multiuso</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/sala_multiuso.jpg" data-lightbox="roadtrip" data-title="Sala Multiuso">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 4"><!--SALA MULTISUSO-->
                <figure>
                  <img src="assets/img/galeria_fotos/sala_multiuso-2.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Sala Multiuso</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/sala_multiuso-2.jpg" data-lightbox="roadtrip" data-title="Sala Multiuso">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 4"><!--SALA MULTISUSO-->
                <figure>
                  <img src="assets/img/galeria_fotos/sala_multiuso-3.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Sala Multiuso</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/sala_multiuso-3.jpg" data-lightbox="roadtrip" data-title="Sala Multiuso">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <!--FIM SALA MULTISUSO-->

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 5"><!--LOUGE MUNICIPALISTA-->
                <figure>
                  <img src="assets/img/galeria_fotos/louge_municipalista.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Louge Municipalista</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/louge_municipalista.jpg" data-lightbox="roadtrip" data-title="Louge Municipalista">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 5"><!--LOUGE MUNICIPALISTA-->
                <figure>
                  <img src="assets/img/galeria_fotos/louge_municipalista-2.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Louge Municipalista</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/louge_municipalista-2.jpg" data-lightbox="roadtrip" data-title="Louge Municipalista">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 5"><!--LOUGE MUNICIPALISTA-->
                <figure>
                  <img src="assets/img/galeria_fotos/louge_municipalista-3.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Louge Municipalista</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/louge_municipalista-3.jpg" data-lightbox="roadtrip" data-title="Louge Municipalista">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>




            <!--FIM LOUGE MUNICIPALISTA-->

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 6"><!--BIBLIOTECA-->
                <figure>
                  <img src="assets/img/galeria_fotos/biblioteca.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Biblioteca</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/biblioteca.jpg" data-lightbox="roadtrip" data-title="Biblioteca">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 6"><!--BIBLIOTECA-->
                <figure>
                  <img src="assets/img/galeria_fotos/biblioteca-2.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Biblioteca</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/biblioteca-2.jpg" data-lightbox="roadtrip" data-title="Biblioteca">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <!--FIM BIBLIOTECA-->

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 7"><!--MUSEU-->
                <figure>
                  <img src="assets/img/galeria_fotos/museu.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Museu</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/museu.jpg" data-lightbox="roadtrip" data-title="Museu">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 7"><!--MUSEU-->
                <figure>
                  <img src="assets/img/galeria_fotos/museu-2.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Museu</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/museu-2.jpg" data-lightbox="roadtrip" data-title="Museu">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>
            <!--FIM MUSEU-->

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 8"><!--PRAÇA CÍVICA-->
                <figure>
                  <img src="assets/img/galeria_fotos/praca_civica.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Praça Cívica</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/praca_civica.jpg" data-lightbox="roadtrip" data-title="Praça Cívica">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 8"><!--PRAÇA CÍVICA-->
                <figure>
                  <img src="assets/img/galeria_fotos/praca_civica-2.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Praça Cívica</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/praca_civica-2.jpg" data-lightbox="roadtrip" data-title="Praça Cívica">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>
            <!--FIM PRAÇA CÍVICA-->

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 9"><!--ÁREA DE TRABALHO-->
                <figure>
                  <img src="assets/img/galeria_fotos/area_de_trabalho.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Área de trabalho</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/area_de_trabalho.jpg" data-lightbox="roadtrip" data-title="Área de Trabalho">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 9"><!--ÁREA DE TRABALHO-->
                <figure>
                  <img src="assets/img/galeria_fotos/area_de_trabalho-2.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Área de trabalho</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/area_de_trabalho-2.jpg" data-lightbox="roadtrip" data-title="Área de Trabalho">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 9"><!--ÁREA DE TRABALHO-->
                <figure>
                  <img src="assets/img/galeria_fotos/area_de_trabalho-3.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Área de trabalho</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/area_de_trabalho-3.jpg" data-lightbox="roadtrip" data-title="Área de Trabalho">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 9"><!--ÁREA DE TRABALHO-->
                <figure>
                  <img src="assets/img/galeria_fotos/area_de_trabalho-4.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Área de trabalho</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/area_de_trabalho-4.jpg" data-lightbox="roadtrip" data-title="Área de Trabalho">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 9"><!--ÁREA DE TRABALHO-->
                <figure>
                  <img src="assets/img/galeria_fotos/area_de_trabalho-5.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Área de trabalho</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/area_de_trabalho-5.jpg" data-lightbox="roadtrip" data-title="Área de Trabalho">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 9"><!--ÁREA DE TRABALHO-->
                <figure>
                  <img src="assets/img/galeria_fotos/area_de_trabalho-6.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Área de trabalho</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/area_de_trabalho-6.jpg" data-lightbox="roadtrip" data-title="Área de Trabalho">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 9"><!--ÁREA DE TRABALHO-->
                <figure>
                  <img src="assets/img/galeria_fotos/area_de_trabalho-7.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Área de trabalho</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/area_de_trabalho-7.jpg" data-lightbox="roadtrip" data-title="Área de Trabalho">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>
            <!--FIM ÁREA DE TRABALHO-->

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 10"><!--ESTUDIO TV E RÁDIO-->
                <figure>
                  <img src="assets/img/galeria_fotos/estudio_tv_radio.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Estúdio TV/Rádio</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/estudio_tv_radio.jpg" data-lightbox="roadtrip" data-title="Estúdio TV/Rádio">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 10"><!--ESTUDIO TV E RÁDIO-->
                <figure>
                  <img src="assets/img/galeria_fotos/estudio_tv_radio-2.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Estúdio TV/Rádio</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/estudio_tv_radio-2.jpg" data-lightbox="roadtrip" data-title="Estúdio TV/Rádio">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 10"><!--ESTUDIO TV E RÁDIO-->
                <figure>
                  <img src="assets/img/galeria_fotos/estudio_tv_radio-3.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Estúdio TV/Rádio</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/estudio_tv_radio-3.jpg" data-lightbox="roadtrip" data-title="Estúdio TV/Rádio">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>
            <!--FIM ESTUDIO TV E RÁDIO-->

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 11"><!--RESTAURANTE-->
                <figure>
                  <img src="assets/img/galeria_fotos/restaurante.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Restaurante</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/restaurante.jpg" data-lightbox="roadtrip" data-title="Restaurante">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>

            <div class="col-12 col-lg-3 col-md-4 col-sm-6 filtr-item reset" data-category = "1, 11"><!--RESTAURANTE-->
                <figure>
                  <img src="assets/img/galeria_fotos/restaurante-2.jpg" class="img-fluid" alt="">
                  <div class="box-texto">
                  <h1>Restaurante</h1>
                  <!--<p>LOREM IPSUM DOLOR IPSUM</p>-->
                  <a href="assets/img/galeria_fotos/restaurante-2.jpg" data-lightbox="roadtrip" data-title="Restaurante">
                    <svg class="svg-zoom-dims">
                      <use xlink:href="sprite-svg/sprite.svg#zoom"></use>
                    </svg>
                    Zoom
                  </a>
                </div>
                </figure>
            </div>







        <!-- Fim Galeria de Imagens-->

    </div>
  </section>
@endsection
@section('scripts')
<script>
   var filterizd = $('.filtr-container').filterizr({
        // objeto de opções
      });
</script>
@endsection