<?php get_header(); ?>

<div class="uk-cover-container uk-text-center banner uk-margin-large-bottom" uk-scrollspy="cls: uk-animation-fade; delay: 300">
    <canvas class="uk-visible@m" width="" height="400"></canvas>
    <canvas class="uk-hidden@m" width="" height="200"></canvas>

    <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/contact-us-hero-1.webp" data-width data-height uk-cover>


    <div uk-scrollspy="cls: uk-animation-fade; delay: 500" class="uk-position-cover uk-text-center uk-container uk-container-large uk-flex uk-flex-center uk-flex-middle">
        <div>
            <h1 class="white uk-margin-medium-top">Our Flyers</h1>
        </div>
    </div>
</div>


<div class="uk-container uk-container-large">
	<main role="main">
			<section >
				<div class="uk-child-width-1-4@m"  uk-lightbox  uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
					<?php get_template_part('loop-flyer'); ?>
				</div>
				<?php get_template_part('pagination'); ?>

			</section>
	</main>
</div>

<?php get_footer(); ?>
