View file Structura/Template/pages/gallery.html

File size: 90.33Kb
<!DOCTYPE html>
<!--[if lt IE 10]> <html  lang="en" class="iex"> <![endif]-->
<!--[if (gt IE 10)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gallery | Structura</title>
    <meta name="description" content="Structura and business HTML template.">
    <link rel="stylesheet" href="../HTWF/scripts/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../HTWF/style.css">
    <link rel="stylesheet" href="../HTWF/css/animations.css">
    <link rel="stylesheet" href="../HTWF/css/components.css">
    <link rel="stylesheet" href="../HTWF/css/image-box.css">
    <link rel="stylesheet" href="../HTWF/scripts/flexslider/flexslider.css">
    <link rel="stylesheet" href="../HTWF/scripts/magnific-popup.css">
    <link rel="icon" href="../images/favicon.png">
    <link rel="stylesheet" href="../skin.css">
</head>
<body>
    <div id="preloader"></div>
    <div class="footer-parallax-container">
        <header class="fixed-top scroll-change" data-menu-anima="fade-in">
            <div class="navbar navbar-default mega-menu-fullwidth navbar-fixed-top" role="navigation">
                <div class="navbar navbar-main">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle">
                                <i class="fa fa-bars"></i>
                            </button>
                            <a class="navbar-brand" href="index.html">
                                <img class="logo-default" src="../images/logo.png" alt="logo" />
                                <img class="logo-retina" src="../images/logo-retina.png" alt="logo" />
                            </a>
                        </div>
                        <div class="collapse navbar-collapse">
                            <div class="nav navbar-nav navbar-right">
                                <ul class="nav navbar-nav">
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Home <span class="caret"></span></a>
                                        <ul class="dropdown-menu multi-level">
                                            <li><a href="index-square.html">Square</a></li>
                                            <li><a href="index-cube.html">Cube</a></li>
                                            <li><a href="index-parallelogram.html">Parallelogram</a></li>
                                            <li><a href="index-ellipse.html">Ellipse</a></li>
                                            <li><a href="index-rectangle.html">Rectangle</a></li>
                                            <li><a href="index-circle.html">Circle</a></li>
                                            <li><a href="index-triangle.html">Triangle</a></li>
                                            <li><a href="index-hexagon.html">Hexagon</a></li>
                                            <li><a href="index-pentagon.html">Pentagon</a></li>
                                            <li><a href="index-line.html">Line</a></li>
                                            <li><a href="index-fullpage.html">Fullpage</a></li>
                                            <li><a href="index.html">Intro</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown active">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Pages <span class="caret"></span></a>
                                        <ul class="dropdown-menu multi-level">
                                            <li class="dropdown dropdown-submenu">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Niche</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="pricing.html">Pricing</a></li>
                                                    <li><a href="gallery.html">Photo & video</a></li>
                                                    <li><a href="faq.html">Faq</a></li>
                                                    <li><a href="history.html">History</a></li>
                                                    <li><a href="team.html">Team</a></li>
                                                    <li><a href="coming-soon.html">Coming soon</a></li>
                                                    <li><a href="404.html">404</a></li>
                                                </ul>
                                            </li>
                                            <li class="dropdown dropdown-submenu">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">About</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="about-us-1.html">About us one</a></li>
                                                    <li><a href="about-us-2.html">About us two</a></li>
                                                    <li><a href="about-us-3.html">About us three</a></li>
                                                    <li><a href="about-us-4.html">About us four</a></li>
                                                </ul>
                                            </li>
                                            <li class="dropdown dropdown-submenu">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contacts</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="contacts-1.html">Contacts one</a></li>
                                                    <li><a href="contacts-2.html">Contacts two</a></li>
                                                    <li><a href="contacts-3.html">Contacts three</a></li>
                                                    <li><a href="contacts-4.html">Contacts four</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Portfolio <span class="caret"></span></a>
                                        <ul class="dropdown-menu multi-level">
                                            <li><a href="portfolio-1.html">Portfolio one</a></li>
                                            <li><a href="portfolio-2.html">Portfolio two</a></li>
                                            <li><a href="portfolio-3.html">Portfolio three</a></li>
                                            <li><a href="portfolio-4.html">Portfolio four</a></li>
                                            <li><a href="portfolio-5.html">Portfolio five</a></li>
                                            <li class="dropdown dropdown-submenu">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Single item</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="portfolio-single-1.html">Single one</a></li>
                                                    <li><a href="portfolio-single-2.html">Single two</a></li>
                                                    <li><a href="portfolio-single-3.html">Single three</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Blog <span class="caret"></span></a>
                                        <ul class="dropdown-menu multi-level">
                                            <li><a href="blog-grid.html">Grid</a></li>
                                            <li><a href="blog-masonry.html">Masonry</a></li>
                                            <li><a href="blog-classic.html">Classic</a></li>
                                            <li class="dropdown dropdown-submenu">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Single post</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="blog-single-1.html">Single one</a></li>
                                                    <li><a href="blog-single-2.html">Single two</a></li>
                                                    <li><a href="blog-single-3.html">Single three</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="dropdown mega-dropdown mega-tabs">
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Elements <span class="caret"></span></a>
                                        <div class="mega-menu dropdown-menu multi-level row bg-menu">
                                            <div class="tab-box" data-tab-anima="fade-in">
                                                <ul class="nav nav-tabs">
                                                    <li class="active"><a href="#">Components</a></li>
                                                    <li><a href="#">Headers</a></li>
                                                    <li><a href="#">Titles</a></li>
                                                </ul>
                                                <div class="panel active">
                                                    <div class="col">
                                                        <ul class="fa-ul text-s">
                                                            <li><i class="fa-li im-posterous"></i> <a href="features/components/icons.html">Icons</a></li>
                                                            <li><i class="fa-li im-secound"></i> <a href="features/components/counters-countdown.html">Counters</a></li>
                                                            <li><i class="fa-li im-clock-back"></i> <a href="features/components/counters-countdown.html">Countdowns</a></li>
                                                            <li><i class="fa-li im-libra"></i> <a href="features/components/progress-bars.html">Progress bars</a></li>
                                                            <li><i class="fa-li im-arrow-refresh2"></i> <a href="features/components/progress-bars.html">Circle progress bars</a></li>
                                                            <li><i class="fa-li im-calendar-4"></i> <a href="features/components/timeline.html">Timeline</a></li>
                                                            <li><i class="fa-li im-arrow-outside"></i> <a href="features/containers/section-slider.html">Slider</a></li>
                                                            <li><i class="fa-li im-speach-bubbles"></i> <a href="features/components/php-contact-form.html">Contact form</a></li>
                                                        </ul>
                                                    </div>
                                                    <div class="col">
                                                        <ul class="fa-ul text-s">
                                                            <li><i class="fa-li im-hand-touch"></i> <a href="features/components/buttons.html">Buttons</a></li>
                                                            <li><i class="fa-li im-old-camera"></i> <a href="features/components/image-boxes.html">Image boxes</a></li>
                                                            <li><i class="fa-li im-old-camera"></i> <a href="features/components/image-boxes-advanced.html">Advanced image boxes</a></li>
                                                            <li><i class="fa-li im-id-2"></i> <a href="features/components/content-box.html">Content boxes</a></li>
                                                            <li><i class="fa-li im-facebook"></i> <a href="features/components/social-media.html">Social media</a></li>
                                                            <li><i class="fa-li im-numbering-list"></i> <a href="features/components/lists.html">Lists</a></li>
                                                            <li><i class="fa-li im-map2"></i> <a href="features/components/maps.html">Google maps</a></li>
                                                            <li><i class="fa-li im-bold-text"></i> <a href="features/components/typography.html">Typography</a></li>
                                                        </ul>
                                                    </div>
                                                    <div class="col">
                                                        <ul class="fa-ul text-s">
                                                            <li><i class="fa-li im-split-horizontal2window"></i> <a href="features/components/tables.html">Advanced table</a></li>
                                                            <li><i class="fa-li im-maximize"></i> <a href="features/containers/lightbox.html">Lightbox and popups</a></li>
                                                            <li><i class="fa-li im-arrow-outside"></i> <a href="features/containers/sliders.html">Sliders and carousels</a></li>
                                                            <li><i class="fa-li im-scroll-fast"></i> <a href="features/containers/scroll-box-collapse.html">Scroll box</a></li>
                                                            <li><i class="fa-li im-download-2"></i> <a href="features/containers/scroll-box-collapse.html">Collapse box</a></li>
                                                            <li><i class="fa-li im-new-tab"></i> <a href="features/containers/tabs.html">Tabs</a></li>
                                                            <li><i class="fa-li im-new-tab"></i> <a href="features/containers/accordions.html">Accordions</a></li>
                                                            <li><i class="fa-li im-split-foursquarewindow"></i> <a href="features/containers/list-grid.html">Grid</a></li>
                                                        </ul>
                                                    </div>
                                                    <div class="col">
                                                        <ul class="fa-ul text-s">
                                                            <li><i class="fa-li im-split-foursquarewindow"></i> <a href="features/containers/list-masonry.html">Masonry</a></li>
                                                            <li><i class="fa-li im-panorama"></i> <a href="features/containers/section-background-image.html">Background image</a></li>
                                                            <li><i class="fa-li im-panorama"></i> <a href="features/containers/section-background-image-parallax.html">Background parallax</a></li>
                                                            <li><i class="fa-li im-film-strip"></i> <a href="features/containers/section-background-video.html">Background video</a></li>
                                                            <li><i class="fa-li im-clouds"></i> <a href="features/containers/section-animations.html">Bg animations</a></li>
                                                            <li><i class="fa-li im-go-bottom"></i> <a href="features/footers/parallax.html">Footer parallax</a></li>
                                                            <li><i class="fa-li im-go-bottom"></i> <a href="features/footers/minimal.html">Footer minimal</a></li>
                                                            <li><i class="fa-li im-go-bottom"></i> <a href="features/footers/base.html">Footer base</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="panel">
                                                    <div class="col">
                                                        <ul class="fa-ul text-s">
                                                            <li><i class="fa-li im-road"></i> <a href="features/menus/classic.html">Menu classic</a></li>
                                                            <li><i class="fa-li im-road"></i> <a href="features/menus/classic-transparent.html">Menu classic transparent</a></li>
                                                            <li><i class="fa-li im-road"></i> <a href="features/menus/big-logo.html">Menu big logo</a></li>
                                                            <li><i class="fa-li im-road"></i> <a href="features/menus/subline.html">Menu subline</a></li>
                                                            <li><i class="fa-li im-road"></i> <a href="features/menus/subtitle.html">Menu subtitle</a></li>
                                                        </ul>
                                                    </div>
                                                    <div class="col">
                                                        <ul class="fa-ul text-s">
                                                            <li><i class="fa-li im-road"></i> <a href="features/menus/middle-logo.html">Menu middle logo</a></li>
                                                            <li><i class="fa-li im-road"></i> <a href="features/menus/middle-logo-top.html">Menu middle logo top</a></li>
                                                            <li><i class="fa-li im-road"></i> <a href="features/menus/middle-box.html">Menu middle box</a></li>
                                                            <li><i class="fa-li im-road"></i> <a href="features/menus/icons.html">Menu icons</a></li>
                                                            <li><i class="fa-li im-road"></i> <a href="features/menus/icons-top.html">Menu icons top</a></li>
                                                        </ul>
                                                    </div>
                                                    <div class="col">
                                                        <ul class="fa-ul text-s">
                                                            <li><i class="fa-li im-road-2"></i> <a href="features/menus/side.html">Side classic</a></li>
                                                            <li><i class="fa-li im-road-2"></i> <a href="features/menus/side-lateral.html">Side lateral</a></li>
                                                            <li><i class="fa-li im-road-2"></i> <a href="features/menus/side-simple.html">Side simple</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="panel">
                                                    <div class="col">
                                                        <ul class="fa-ul text-s">
                                                            <li><i class="fa-li im-old-camera"></i> <a href="features/titles/image.html">Image background</a></li>
                                                            <li><i class="fa-li im-old-camera"></i> <a href="features/titles/image-fullscreen.html">Image full-screen</a></li>
                                                            <li><i class="fa-li im-old-camera"></i> <a href="features/titles/image-fullscreen-parallax.html">Image full-screen parallax</a></li>
                                                            <li><i class="fa-li im-old-camera"></i> <a href="features/titles/image-parallax.html">Image parallax</a></li>
                                                            <li><i class="fa-li im-old-camera"></i> <a href="features/titles/image-parallax-ken-burn.html">Image parallax ken-burn</a></li>
                                                        </ul>
                                                    </div>
                                                    <div class="col">
                                                        <ul class="fa-ul text-s">
                                                            <li><i class="fa-li im-film-board"></i> <a href="features/titles/video-mp4.html">Video background MP4</a></li>
                                                            <li><i class="fa-li im-film-board"></i> <a href="features/titles/video-youtube.html">Video background Youtube</a></li>
                                                            <li><i class="fa-li im-film-board"></i> <a href="features/titles/video-fullscreen.html">Video full-screen</a></li>
                                                            <li><i class="fa-li im-film-board"></i> <a href="features/titles/video-fullscreen-parallax.html">Video full-screen parallax</a></li>
                                                            <li><i class="fa-li im-film-board"></i> <a href="features/titles/video-parallax.html">Video parallax</a></li>
                                                        </ul>
                                                    </div>
                                                    <div class="col">
                                                        <ul class="fa-ul text-s">
                                                            <li><i class="fa-li im-panorama"></i> <a href="features/titles/base-1.html">Title base 1</a></li>
                                                            <li><i class="fa-li im-panorama"></i> <a href="features/titles/base-2.html">Title base 2</a></li>
                                                            
                                                            <li><i class="fa-li im-clouds"></i> <a href="features/titles/animation.html">Animation background</a></li>
                                                            <li><i class="fa-li im-clouds"></i> <a href="features/titles/animation-parallax.html">Animation parallax</a></li>
                                                        </ul>
                                                    </div>
                                                    <div class="col">
                                                        <ul class="fa-ul text-s">
                                                            <li><i class="fa-li im-arrow-outside"></i> <a href="features/titles/slider.html">Slider background</a></li>
                                                            <li><i class="fa-li im-arrow-outside"></i> <a href="features/titles/slider-fullscreen.html">Slider full-screen</a></li>
                                                            <li><i class="fa-li im-arrow-outside"></i> <a href="features/titles/slider-fullscreen-parallax.html">Slider full-screen parallax</a></li>
                                                            <li><i class="fa-li im-arrow-outside"></i> <a href="features/titles/slider-parallax.html">Slider parallax</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <div class="header-title" style="background-image:url('http://via.placeholder.com/1920x900');">
            <div class="container">
                <div class="title-base">
                    <hr class="anima" />
                    <h1>Photos and videos</h1>
                    <p>We must let go of the life we have planned, so as to accept the one that is waiting for us to be freedom and happy like the heart.</p>
                </div>
            </div>
        </div>
        <div class="section-empty background-lines">
            <div class="container content">
                <div class="album-main" data-album-anima="fade-bottom">
                    <div class="album-list row">
                        <div class="album-box col-md-4">
                            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                                <a href="#" class="img-box anima-scale-up anima">
                                    <img alt="" src="http://via.placeholder.com/800x600">
                                </a>
                                <div class="caption">
                                    <h2 class="album-name">Album one</h2>
                                </div>
                            </div>
                        </div>
                        <div class="album-box col-md-4">
                            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                                <a href="#" class="img-box anima-scale-up anima">
                                    <img alt="" src="http://via.placeholder.com/800x600">
                                </a>
                                <div class="caption">
                                    <h2 class="album-name">Album two</h2>
                                </div>
                            </div>
                        </div>
                        <div class="album-box col-md-4" data-album-id="album-3">
                            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                                <a href="#" class="img-box anima-scale-up anima">
                                    <img alt="" src="http://via.placeholder.com/800x600">
                                </a>
                                <div class="caption">
                                    <h2 class="album-name">Album three</h2>
                                </div>
                            </div>
                        </div>
                        <div class="album-box col-md-4">
                            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                                <a href="#" class="img-box anima-scale-up anima">
                                    <img alt="" src="http://via.placeholder.com/800x600">
                                </a>
                                <div class="caption">
                                    <h2 class="album-name">Album four</h2>
                                </div>
                            </div>
                        </div>
                        <div class="album-box col-md-4">
                            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                                <a href="#" class="img-box anima-scale-up anima">
                                    <img alt="" src="http://via.placeholder.com/800x600">
                                </a>
                                <div class="caption">
                                    <h2 class="album-name">Album five</h2>
                                </div>
                            </div>
                        </div>
                        <div class="album-box col-md-4" data-album-id="album-3">
                            <div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
                                <a href="#" class="img-box anima-scale-up anima">
                                    <img alt="" src="http://via.placeholder.com/800x600">
                                </a>
                                <div class="caption">
                                    <h2 class="album-name">Album six</h2>
                                </div>
                            </div>
                        </div>
                        <!-- INSERT OTHERS ALBUMS MENU ITEMS HERE -->
                    </div>
                    <div class="cont-album-box">
                        <p class="album-title">
                            <span>...</span>
                            <a class="button-list btn btn-default btn-sm">
                                <i class="fa fa-arrow-left"></i> Albums list
                            </a>
                        </p>
                        <div class="album-item">
                            <div class="maso-list gallery no-margins" data-trigger="manual">
                                <div class="navbar navbar-inner">
                                    <div class="navbar-toggle"><i class="fa fa-bars"></i><span>MENU</span><i class="fa fa-angle-down"></i></div>
                                    <div class="collapse navbar-collapse">
                                        <ul class="nav navbar-nav over inner ms-minimal  maso-filters">
                                            <li class="current-active active"><a data-filter="maso-item">All</a></li>
                                            <li><a data-filter="cat1">Cities</a></li>
                                            <li><a data-filter="cat2" href="#">Nature</a></li>
                                            <li><a data-filter="cat3" href="#">People</a></li>
                                            <li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="maso-box row" data-options="anima:fade-in">
                                    <div data-sort="1" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="../images/gallery/image-1.jpg" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="../images/gallery/image-1.jpg" />
                                        </a>
                                    </div>
                                    <div data-sort="2" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="3" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="4" class="maso-item col-md-4 row-15 cat2">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="5" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="6" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="7" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="8" class="maso-item col-md-4 row-15 cat2">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="9" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="10" class="maso-item col-md-4 row-15 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="11" class="maso-item col-md-4 row-15 cat2 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="12" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="13" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="14" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="15" class="maso-item col-md-4 row-15 cat2 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="list-nav">
                                    <a href="#" class="btn btn-sm load-more-maso" data-page-items="9">Load More</a>
                                </div>
                            </div>
                        </div>
                        <div class="album-item">
                            <div class="maso-list gallery no-margins" data-trigger="manual">
                                <div class="navbar navbar-inner">
                                    <div class="navbar-toggle"><i class="fa fa-bars"></i><span>MENU</span><i class="fa fa-angle-down"></i></div>
                                    <div class="collapse navbar-collapse">
                                        <ul class="nav navbar-nav over inner ms-minimal  maso-filters">
                                            <li class="current-active active"><a data-filter="maso-item">All</a></li>
                                            <li><a data-filter="cat1">Cities</a></li>
                                            <li><a data-filter="cat2" href="#">Nature</a></li>
                                            <li><a data-filter="cat3" href="#">People</a></li>
                                            <li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="maso-box row no-margins" data-options="anima:fade-in">
                                    <div data-sort="1" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="../images/gallery/image-1.jpg" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="../images/gallery/image-1.jpg" />
                                        </a>
                                    </div>
                                    <div data-sort="2" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="3" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="4" class="maso-item col-md-4 row-15 cat2">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="5" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="6" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="7" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="8" class="maso-item col-md-4 row-15 cat2">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="9" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="10" class="maso-item col-md-4 row-15 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="11" class="maso-item col-md-4 row-15 cat2 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="12" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="13" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="14" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="15" class="maso-item col-md-4 row-15 cat2 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="list-nav">
                                    <a href="#" class="btn btn-sm load-more-maso" data-page-items="9">Load More</a>
                                </div>
                            </div>
                        </div>
                        <div class="album-item">
                            <div class="maso-list gallery no-margins" data-trigger="manual">
                                <div class="navbar navbar-inner">
                                    <div class="navbar-toggle"><i class="fa fa-bars"></i><span>MENU</span><i class="fa fa-angle-down"></i></div>
                                    <div class="collapse navbar-collapse">
                                        <ul class="nav navbar-nav over inner ms-minimal  maso-filters">
                                            <li class="current-active active"><a data-filter="maso-item">All</a></li>
                                            <li><a data-filter="cat1">Cities</a></li>
                                            <li><a data-filter="cat2" href="#">Nature</a></li>
                                            <li><a data-filter="cat3" href="#">People</a></li>
                                            <li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="maso-box row no-margins" data-options="anima:fade-in">
                                    <div data-sort="1" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="../images/gallery/image-1.jpg" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="../images/gallery/image-1.jpg" />
                                        </a>
                                    </div>
                                    <div data-sort="2" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="3" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="4" class="maso-item col-md-4 row-15 cat2">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="5" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="6" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="7" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="8" class="maso-item col-md-4 row-15 cat2">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="9" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="10" class="maso-item col-md-4 row-15 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="11" class="maso-item col-md-4 row-15 cat2 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="12" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="13" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="14" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="15" class="maso-item col-md-4 row-15 cat2 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="list-nav">
                                    <a href="#" class="btn btn-sm load-more-maso" data-page-items="9">Load More</a>
                                </div>
                            </div>
                        </div>
                        <div class="album-item">
                            <div class="maso-list gallery no-margins" data-trigger="manual">
                                <div class="navbar navbar-inner">
                                    <div class="navbar-toggle"><i class="fa fa-bars"></i><span>MENU</span><i class="fa fa-angle-down"></i></div>
                                    <div class="collapse navbar-collapse">
                                        <ul class="nav navbar-nav over inner ms-minimal  maso-filters">
                                            <li class="current-active active"><a data-filter="maso-item">All</a></li>
                                            <li><a data-filter="cat1">Cities</a></li>
                                            <li><a data-filter="cat2" href="#">Nature</a></li>
                                            <li><a data-filter="cat3" href="#">People</a></li>
                                            <li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="maso-box row no-margins" data-options="anima:fade-in">
                                    <div data-sort="1" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="../images/gallery/image-1.jpg" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="../images/gallery/image-1.jpg" />
                                        </a>
                                    </div>
                                    <div data-sort="2" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="3" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="4" class="maso-item col-md-4 row-15 cat2">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="5" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="6" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="7" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="8" class="maso-item col-md-4 row-15 cat2">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="9" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="10" class="maso-item col-md-4 row-15 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="11" class="maso-item col-md-4 row-15 cat2 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="12" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="13" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="14" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="15" class="maso-item col-md-4 row-15 cat2 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="list-nav">
                                    <a href="#" class="btn btn-sm load-more-maso" data-page-items="9">Load More</a>
                                </div>
                            </div>
                        </div>
                        <div class="album-item">
                            <div class="maso-list gallery no-margins" data-trigger="manual">
                                <div class="navbar navbar-inner">
                                    <div class="navbar-toggle"><i class="fa fa-bars"></i><span>MENU</span><i class="fa fa-angle-down"></i></div>
                                    <div class="collapse navbar-collapse">
                                        <ul class="nav navbar-nav over inner ms-minimal  maso-filters">
                                            <li class="current-active active"><a data-filter="maso-item">All</a></li>
                                            <li><a data-filter="cat1">Cities</a></li>
                                            <li><a data-filter="cat2" href="#">Nature</a></li>
                                            <li><a data-filter="cat3" href="#">People</a></li>
                                            <li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="maso-box row no-margins" data-options="anima:fade-in">
                                    <div data-sort="1" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="../images/gallery/image-1.jpg" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="../images/gallery/image-1.jpg" />
                                        </a>
                                    </div>
                                    <div data-sort="2" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="3" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="4" class="maso-item col-md-4 row-15 cat2">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="5" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="6" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="7" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="8" class="maso-item col-md-4 row-15 cat2">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="9" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="10" class="maso-item col-md-4 row-15 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="11" class="maso-item col-md-4 row-15 cat2 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="12" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="13" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="14" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="15" class="maso-item col-md-4 row-15 cat2 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="list-nav">
                                    <a href="#" class="btn btn-sm load-more-maso" data-page-items="9">Load More</a>
                                </div>
                            </div>
                        </div>
                        <div class="album-item">
                            <div class="maso-list gallery no-margins" data-trigger="manual">
                                <div class="navbar navbar-inner">
                                    <div class="navbar-toggle"><i class="fa fa-bars"></i><span>MENU</span><i class="fa fa-angle-down"></i></div>
                                    <div class="collapse navbar-collapse">
                                        <ul class="nav navbar-nav over inner ms-minimal ms-minimal  maso-filters">
                                            <li class="current-active active"><a data-filter="maso-item">All</a></li>
                                            <li><a data-filter="cat1">Cities</a></li>
                                            <li><a data-filter="cat2" href="#">Nature</a></li>
                                            <li><a data-filter="cat3" href="#">People</a></li>
                                            <li><a class="maso-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="maso-box row no-margins" data-options="anima:fade-in">
                                    <div data-sort="1" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="../images/gallery/image-1.jpg" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="../images/gallery/image-1.jpg" />
                                        </a>
                                    </div>
                                    <div data-sort="2" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="3" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="4" class="maso-item col-md-4 row-15 cat2">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="5" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="6" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="7" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="8" class="maso-item col-md-4 row-15 cat2">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="9" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="10" class="maso-item col-md-4 row-15 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="11" class="maso-item col-md-4 row-15 cat2 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="12" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="13" class="maso-item col-md-4 row-15 cat1">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="14" class="maso-item col-md-4 row-15 cat1 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div data-sort="15" class="maso-item col-md-4 row-15 cat2 cat3">
                                        <a class="img-box i-center" href="http://via.placeholder.com/800x600" data-anima="show-scale" data-trigger="hover" data-anima-out="hide">
                                            <i class="fa fa-photo anima"></i>
                                            <img alt="" src="http://via.placeholder.com/800x600" />
                                        </a>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="list-nav">
                                    <a href="#" class="btn btn-sm load-more-maso" data-page-items="9">Load More</a>
                                </div>
                            </div>
                        </div>
                        <!-- INSERT OTHERS ALBUMS HERE -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <i class="scroll-top scroll-top-mobile show fa fa-sort-asc"></i>
    <footer class="footer-parallax">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="tag-row icon-row icon-row-square">
                            <span><a>About</a></span>
                            <span><a>Services</a></span>
                            <span><a>Support</a></span>
                            <span><a>Contacts</a></span>
                        </div>
                    </div>
                    <div class="col-md-6 text-right text-center-sm">
                        <div class="btn-group social-group btn-group-icons">
                            <a target="_blank" href="#" data-social="share-facebook" data-toggle="tooltip" data-placement="top" title="Facebook">
                                <i class="fa fa-facebook text-s"></i>
                            </a>
                            <a target="_blank" href="#" data-social="share-twitter" data-toggle="tooltip" data-placement="top" title="Twitter">
                                <i class="fa fa-twitter text-s"></i>
                            </a>
                            <a target="_blank" href="#" data-social="share-google" data-toggle="tooltip" data-placement="top" title="Google+">
                                <i class="fa fa-google-plus text-s"></i>
                            </a>
                            <a target="_blank" href="#" data-social="share-linkedin" data-toggle="tooltip" data-placement="top" title="LinkedIn">
                                <i class="fa fa-linkedin text-s"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row copy-row">
                    <div class="col-md-12 copy-text">
                        © 2018 Structura - One page minimal template <span>Handmade by <a href="http://schiocco.com/">schiocco.com</a></span>
                    </div>
                </div>
            </div>
        </div>
        <script src="../HTWF/scripts/jquery.min.js"></script>
        <script src="../HTWF/scripts/script.js"></script>
        <link rel="stylesheet" href="../HTWF/scripts/iconsmind/line-icons.min.css">
        <script src="../HTWF/scripts/bootstrap/js/bootstrap.min.js"></script>
        <script src="../HTWF/scripts/imagesloaded.min.js"></script>
        <script src="../HTWF/scripts/jquery.tab-accordion.js"></script>
        <script src="../HTWF/scripts/smooth.scroll.min.js"></script>
        <script src="../HTWF/scripts/jquery.twbsPagination.min.js"></script>
        <script src="../HTWF/scripts/jquery.magnific-popup.min.js"></script>
        <script src="../HTWF/scripts/isotope.min.js"></script>
    </footer>
</body>
</html>