{AJAXCONTENT}

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAuDRRCyCRspmHnnquqBQwcxT-auLGv73iXERjF4pq02kojEUxMhSQ7jf_M1YhawcDGtHMyA_U50E34g" type="text/javascript"></script>
 <!-- Font awesome -->
    <link href="cart/css/font-awesome.css" rel="stylesheet">
    <link href="cart/css/jquery.smartmenus.bootstrap.css" rel="stylesheet">
    <!-- Product view slider -->
    <link rel="stylesheet" type="text/css" href="cart/css/jquery.simpleLens.css">
    <!-- slick slider -->
    <link rel="stylesheet" type="text/css" href="cart/css/slick.css">
    <!-- price picker slider -->
    <link rel="stylesheet" type="text/css" href="cart/css/nouislider.css">
    <!-- Theme color -->
    <link id="switcher" href="cart/css/theme-color/default-theme.css" rel="stylesheet">
    <!-- Top Slider CSS -->
    <link href="cart/css/sequence-theme.modern-slide-in.css" rel="stylesheet" media="all">

    <!-- Main style sheet -->
    <link href="cart/css/style.css" rel="stylesheet">

    <!-- Google Font -->
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

       <style>
.buttonlogin {
  display: inline-block;
  border-radius: 4px;
  background-color: #2a80b9;
  border: none;
  color: #fff;
  
  text-align: center;
  font-size: 20px;
  /*padding: 10px;*/
  width: 150px;
  transition: all 0.5s;
  cursor: pointer;
 /* margin: 5px;*/
}

.buttonlogin span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonlogin span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonlogin:hover span {
  padding-right: 25px;
}

.buttonlogin:hover span:after {
  opacity: 1;
  right: 0;
}
</style>

  </head>
  <!-- !Important notice -->
<header id="aa-header" class="aa-header-top">
  <div class="aa-header-top">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="aa-header-top-area">
            <div class="aa-header-top-left">
              <span class="sbreadcrumb"><a href="?index.php" class="fa fa-dashboard"> Home / </a>
              <a href="#">gallery </a></span><span><a href="{PREVIOUS_URL}" class="fa fa-arrow-left fa-2x" aria-hidden="true"></a></span>
            </div>
            <!-- / header top left -->
            <div class="aa-header-top-right" style="line-height: 0px;">
              <ul class="aa-head-top-nav-right">
                <!-- IF C_USERID != "" -->
                <!-- <li><a href="#">My Account</a></li> --><!-- ?module=p_marketplace&action=Account -->
                <!-- ENDIF -->
                <!-- <li class="hidden-xs"><a href="?module=p_marketplace&action=Wishlist">Wishlist</a></li>
                <li class="hidden-xs"><a href="?module=p_marketplace&action=Anim_cart">My Cart</a></li> -->
                <!-- IF C_USERID == "" -->
                <!-- <li class="hidden-xs"><a href="#quick-login-modal" data-toggle2="tooltip" data-placement="top" title="Login" data-toggle="modal" data-target="#quick-login-modal" class="open-LoginDialog">Login</a></li> -->
                <!-- ELSE -->
                <li class="hidden-xs"><a href="?module=main&action=logout" title="Log Out">Logout</a></li>
                <!-- ENDIF -->
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- / header top  -->
</header>
  <!-- / header section -->

<!-- ::::::::::::::::::::: start breadcrumb:::::::::::::::::::::::::: -->
<section class="page-title"  style="background-image: url('img/gallery-bg.jpg') !important">
	<div class="container">
		

		<div class="row">
			<div class="col-md-12">
				<!-- breadcrumb content -->
				<div class="page-breadcrumbd">
					<h2>Tumakuru Smart City Gallery</h2>
					<p><a href="index.php">Home</a>/ Gallery</p>
				</div><!-- end breadcrumb content -->
			</div>
		</div>
	</div>
</section><!-- end breadcrumb -->
<div id="farmer" class="android-section-title mdl-typography--display-1-color-contrast"style="font-size:77%;color:#9e9e9e; text-align: right; opacity: 1.54;margin-right: 60px;"><b>GPMS Transportal for TSCL</b></div>
<div class="container-fluid section-padding darker-bg" style="padding-top: 20px;">
	<!-- Images used to open the lightbox -->
	<div class="row">
	
			<div class="intro-title text-center"style="font-size:115%;background:#eceff1;text-align: center; opacity: 1.54;">
			
				<h2 style="font-size:135%;">Citizen Can Learn How to Avail About Various Citizen Services(National Level,State Level,Smart City Level,City Level)</h2> <!--rahul-->
			</div>
		
	</div>
	<div class="container">
		<div class="dropdown">
<!-- 			<div class="row searchFilter" >
				<div class="col-sm-12" >
					<div class="input-group" >
						<input id="table_filter" id="search_str" type="text" class="form-control" aria-label="Text input with segmented button dropdown" >
						<div class="input-group-btn" >
							<button id="searchBtn" type="button" class="btn btn-secondary btn-search" ><span class="glyphicon glyphicon-search" >&nbsp;</span> <span class="label-icon" >Search</span></button>
						</div>
					</div>
				</div>
			</div>
 -->		<div class="input-group">
			   <input type="text" autocomplete="false" id="search_str" class="input-field form-control" style="width: 96%; margin-bottom: 6px;" autocomplete="off">
			   <span class="input-group-btn">
			        <button style="align:right" class="btn btn-new" type="button" id="searchBtn" style="height:2%;width:10%; z-index: 3;"><small>Search</small></button>
			   </span>
			</div>
			<div id="products" class="row list-group">
				<div class="gallery-container col-xs-12">
				</div>
			</div>
			<div style="text-align:center; display: block; block; width: 100%; " class="loadmore-btn" data-offset="0" >
				<a href="#" id="loadMore">Load More</a>
			</div>
			<br>
		</div>
	</div>
</div>

<script type="text/javascript">
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {

  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  console.log(dropdownContent.style.display);
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}
</script>