<?php
include("header.php");
?>
<!-- #header -->
<link rel="stylesheet" href="css/baguetteBox.min.css">

<style>
  .thumbnail img {
    width: 80%;
  }

  .gallery-container h1 {
    text-align: center;
    margin-top: 70px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
    color: #58595a;
  }

  .gallery-container p.page-description {
    text-align: center;
    margin: 30px auto;
    font-size: 18px;
    color: #85878c;
  }

  .tz-gallery {
    padding: 40px;
  }

  .tz-gallery .thumbnail {
    padding: 0;
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 4px;
    border: none;
    transition: 0.15s ease-in-out;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
    height: 300px;
  }

  .tz-gallery .thumbnail:hover {
    transform: translateY(-10px) scale(1.02);
  }

  .tz-gallery .lightbox img {
    border-radius: 4px 4px 0 0;
  }

  .tz-gallery .caption {
    padding: 26px 30px;
    text-align: center;
  }

  .tz-gallery .caption h3 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 0;
  }

  .tz-gallery .caption p {
    font-size: 12px;
    color: #7b7d7d;
    margin: 0;
  }

  .baguetteBox-button {
    background-color: transparent !important;
  }
</style>
<!--==========================
    Intro Section
  ============================-->

<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1600px;height:500px;overflow:hidden;visibility:hidden;">
  <!-- Loading Screen -->
  <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
    <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" />
  </div>
  <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1600px;height:500px;overflow:hidden;">
    <div>
      <img data-u="image" src="img/banner/b-gallery.png" />
    </div>

  </div>


</div>
<script type="text/javascript">
  jssor_1_slider_init();
</script>
<!-- #endregion Jssor Slider End -->
<!-- #intro -->

<main id="main">



  <!--==========================
      Services Section
    ============================-->
  <section id="services" class="bg-white">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <div class="about-content wow bounceInUp" data-wow-duration="1.4s">
            <center>
              <h2 class=""><b> Our <span> Medias</span> </b> </h2>
            </center>
          </div>
        </div>
      </div>
    </div>
  </section><!-- #services -->

  <div class="container gallery-container">
    <div class="tz-gallery">

      <div class="row">

        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/1-1.jpg">
              <img src="img/products/1-1.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/1-2.jpg">
              <img src="img/products/1-2.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/2-1.jpg">
              <img src="img/products/2-1.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/2-2.jpg">
              <img src="img/products/2-2.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/3-1.jpg">
              <img src="img/products/3-1.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/4-1.jpg">
              <img src="img/products/4-1.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/5-1.jpg">
              <img src="img/products/5-1.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/5-2.jpg">
              <img src="img/products/5-2.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/6-1.jpg">
              <img src="img/products/6-1.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/6-2.jpg">
              <img src="img/products/6-2.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/7-1.jpg">
              <img src="img/products/7-1.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/8-1.jpg">
              <img src="img/products/8-1.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/8-2.jpg">
              <img src="img/products/8-2.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/9-1.jpg">
              <img src="img/products/9-1.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/9-2.jpg">
              <img src="img/products/9-2.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/9-3.jpg">
              <img src="img/products/9-3.jpg" alt="">
            </a>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="img/products/10-1.jpg">
              <img src="img/products/10-1.jpg" alt="">
            </a>
          </div>
        </div>

        <!-- <div class="col-sm-6 col-md-4 m-auto">
          <div class="thumbnail">
            <a class="lightbox" href="../images/traffic.png">
              <img src="../images/traffic.png" alt="Traffic">
            </a>
            <div class="caption">
              <h3>Thumbnail label</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
            </div>
          </div>
        </div> -->


      </div>

    </div>

  </div>

  <script src="js/baguetteBox.min.js"></script>
  <script>
    baguetteBox.run('.tz-gallery');
  </script>


</main>

<!--==========================
    Footer
  ============================-->
<?php
include("footer.php");
?>