@extends('frontend.layouts.app')

@section('title','Aura | Event')

@section('content')
	<!-- Page sub-header -->
		<div id="page_header" class="page-subheader uh_flat_dark_blue">
			<div class="bgback"></div>     

			<!-- Animated Sparkles -->
			<div class="th-sparkles"></div>
			<!--/ Animated Sparkles -->

			<!-- Sub-Header content wrapper -->
            <div class="ph-content-wrap">
				<div class="ph-content-v-center">
					<div class="container">
						<div class="row">
							<div class="col-sm-6">
								<!-- Breadcrumbs -->
								<ul class="breadcrumbs fixclear">
									<li><a href="index.php">Home</a></li>
									<li>ELEMENTS – GRID PHOTO GALLERY</li>
								</ul>
								<!--/ Breadcrumbs -->

								<!-- Current date -->
								<span id="current-date" class="subheader-currentdate">August 25, 2016</span>
								<!--/ Current date -->
								<div class="clearfix"></div>
							</div>
							<!--/ col-sm-6 -->

							<div class="col-sm-6">
								<!-- Sub-header titles -->
								<div class="subheader-titles">
									<h2 class="subheader-maintitle">GRID PHOTO GALLERY</h2>
									<h4 class="subheader-subtitle">SHOW THEM PHOTOS</h4>
								</div>
								<!--/ Sub-header titles -->
							</div>
							<!--/ col-sm-6 -->
						</div>
						<!-- end row -->
					</div>
					<!--/ container -->
				</div>
				<!--/ .ph-content-v-center -->
			</div>
			<!--/ Sub-Header content wrapper -->

			<!-- Bottom mask style shadow 2 -->
            <div class="kl-bottommask kl-bottommask--shadow_ud"></div>
            <!--/ Bottom mask style shadow 2 -->
        </div>
        <!--/ Page sub-header -->


		<!-- GRID PHOTO GALLERY - Square Ratio style section -->
        <section class="hg_section ptop-80 pbottom-80">
			<div class="container">
				<div class="row">
					<div class="col-md-12 col-sm-12">
						<!-- Title -->
						<div class="kl-title-block clearfix text-center tbk-symbol--line tbk-icon-pos--after-title">
							<h3 class="tbk__title ">Square Ratio</h3>
							<div class="tbk__symbol ">
								<span></span>
							</div>
						</div>
						<!--/ Title -->

						<!-- Grid Photo Gallery square ratio element container -->
						<div class="gridPhotoGallery-container">
							<div class="gridPhotoGallery mfp-gallery misc gridPhotoGallery--ratio-square gridPhotoGallery--cols-4" data-cols="4">
								<!-- Grid photo gallery size helper -->
								<div class="gridPhotoGallery__item gridPhotoGallery__item--sizer">
								</div>
								<!--/ Grid photo gallery size helper -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w2 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="Girl Smiling" class="gridPhotoGalleryItem--h2 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg1.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg1.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w1 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="Morning Coffee" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg2.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg2.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w1 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="Stone Arch" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg4.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg4.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w2 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="A bunch of grapes" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg5.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg5.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w1 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="" class="gridPhotoGalleryItem--h2 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg6.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg6.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w2 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg7.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg7.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w1 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg8.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg8.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w1 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg10.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg10.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w2 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg9.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg9.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->
							</div>
							<!--/ .gridPhotoGallery ratio-square cols-4 -->
						</div>
						<!--/ Grid Photo Gallery square ratio element container -->
					</div>
					<!--/ col-md-12 col-sm-12 -->
				</div>
				<!--/ row -->
			</div>
			<!--/ container -->
		</section>
		<!--/ GRID PHOTO GALLERY - Square Ratio style section -->

		<!-- GRID PHOTO GALLERY - Shorter Ratio style section -->
		<section class="hg_section pbottom-80">
			<div class="container">
				<div class="row">
					<div class="col-md-12 col-sm-12">
						<!-- Title -->
						<div class="kl-title-block clearfix text-center tbk-symbol--line tbk-icon-pos--after-title">
							<h3 class="tbk__title ">Shorter Ratio</h3>
							<div class="tbk__symbol ">
								<span></span>
							</div>
						</div>
						<!--/ Title -->

						<!-- Grid Photo Gallery short ratio element container -->
						<div class="gridPhotoGallery-container">
							<div class="gridPhotoGallery mfp-gallery misc gridPhotoGallery--ratio-short gridPhotoGallery--cols-4" data-cols="4">
								<!-- Grid photo gallery size helper -->
								<div class="gridPhotoGallery__item gridPhotoGallery__item--sizer">
								</div>
								<!--/ Grid photo gallery size helper -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w2 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="Girl Smiling" class="gridPhotoGalleryItem--h2 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg1.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg1.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w1 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="Morning Coffee" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg2.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg2.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w1 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="Stone Arch" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg4.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg4.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w2 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="A bunch of grapes" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg5.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg5.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w1 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="" class="gridPhotoGalleryItem--h2 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg6.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg6.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w2 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg7.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg7.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w1 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg8.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg8.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w1 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg10.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg10.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->

								<!-- Photo gallery item -->
								<div class="gridPhotoGallery__item gridPhotoGalleryItem--w2 ">
									<!-- Pop-up image + Link & Background image -->
									<a title="" class="gridPhotoGalleryItem--h1 gridPhotoGallery__link hoverBorder" data-lightbox="mfp" data-mfp="image" href="images/gpg9.jpg">
										<!-- Background image -->
										<div class="gridPhotoGallery__img" style="background-image:url(http://kallyas.themeforest.netdna-cdn.com/images/gpg9.jpg)">
										</div>
										<!--/ Background image -->

										<!-- Icon -->
										<i class="kl-icon glyphicon glyphicon-search circled-icon ci-large"></i>
										<!--/ Icon -->
									</a>
									<!--/ Pop-up image + Link & Background image -->
								</div>
								<!--/ Photo gallery item -->
							</div>
							<!--/ .gridPhotoGallery ratio-short cols-4 -->
						</div>
						<!--/ Grid Photo Gallery short ratio element container -->
					</div>
					<!--/ col-md-12 col-sm-12 -->
				</div>
				<!--/ row -->
			</div>
			<!--/ container -->
		</section>
		<!--/ GRID PHOTO GALLERY - Shorter Ratio style section -->
@endsection