<?php /*template name: Contact*/ get_header(); ?>
<div class="uk-cover-container uk-text-center banner white">
    <canvas class="uk-visible@m" width="" height="300"></canvas>
    <canvas class="uk-hidden@m" width="" height="300"></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 class="uk-position-cover uk-text-center uk-container uk-flex uk-flex-center uk-flex-middle">
        <div>
            <h1 class="white">Get in Touch with Us!</h1>


      </div>
    </div>
</div>

<div class="uk-container uk-container-large">
	<main role="main">
			<section >


				<?php if (have_posts()): while (have_posts()) : the_post(); ?>

					<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

            <h2 class="uk-text-center uk-margin-xlarge-top uk-margin-medium-bottom"><?php echo esc_html( get_field('header') ); ?></h2>


            <h2 class="small uk-text-center">If you need to get ahold of us right away please contact Mario at:</h2>

            <div class="uk-grid-large uk-margin-large-top uk-margin-large-bottom" uk-grid>
              <div class="uk-width-1-2@m">
                <div class="uk-flex uk-flex-right">
                  <div class="uk-grid-collapse uk-flex uk-flex-middle" uk-grid>
                    <div class="uk-width-auto">
                      <i class="fa-kit fa-jewel-house-leaf fa-2-5x red"></i>
                    </div>
                    <div class="uk-width-expand">
                      <P class="uk-margin-remove small ">Vancouver/Lower Mainland</P>
                      <h4 class="uk-margin-remove "><a class="blue yellow-hov" href="tel:604-341-9496">604-341-9496</a></h4>
                    </div>
                  </div>
                </div>
              </div>
              <div class="uk-width-1-2@m">
                <div class="uk-grid-collapse uk-flex uk-flex-middle" uk-grid>
                  <div class="uk-width-auto">
                    <i class="fa-kit fa-jewel-house-leaf fa-2-5x red"></i>
                  </div>
                  <div class="uk-width-expand">
                    <P class="uk-margin-remove small ">Canada-wide toll-free</P>
                    <h4 class="uk-margin-remove "><a class="blue yellow-hov" href="tel:1-866-341-9496">1-866-341-9496</a></h4>
                  </div>
                </div>
              </div>
            </div>

            <h4 class="blue uk-text-center">Jewelhouse Canada, <br>P.O. Box 20242, RPO Towne Centre, <br>Kelowna, BC <br>V1Y 9H2</h4>



            <h2 class="small uk-text-center uk-margin-large-top">Or send us a message using our contact form. Thank you.</h2>


            <div class="grey-bg uk-padding uk-margin-large-top uk-margin-large-bottom">
              <?php the_content(); ?>
            </div>
						<div class="uk-clearfix"></div>

						<p class="uk-text-right"><?php edit_post_link( __('Edit this page'), '', '', 0, 'post-edit-link uk-text-large uk-padding-small uk-button-large uk-button uk-button-primary' ); ?></p>

					</article>

			<?php endwhile; ?><?php endif; ?>

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


<?php get_footer(); ?>
