<?php
/**
 * Template Name: Bark & Brew
 *
 * This is the template that displays full width page without sidebar
 *
 * @package sparkling
 */

get_header(); ?>
<?php
		while ( have_posts() ) :
			the_post();
?>
  <div id="primary" class="content-area">

	<main id="main" class="site-main" role="main">

        <div id="event-date">October 26, 2019</div>
        <div id="event-title">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" viewBox="0 0 667.858 76.563" enable-background="new 0 0 667.858 76.563"
	 xml:space="preserve">
<text transform="matrix(1 0 0 1 2.0874 71.875)" fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" font-family="Bangers" font-size="88">BARK &amp; BREW PUB RUN</text>
</svg>
        </div>
        <div id="subheading">A dog-friendly pub run for a good cause!</div>
        <!-- <div id="call-to-action"><button>Contact Us</button><button style="background-color: rgba(255,255,255,0.3)">Register</button></div> -->

        <div id="page-content" style="text-align: left;"><?php the_content(); ?></div>
		
        <div id="countdown-timer"></div>

	</main><!-- #main -->

  </div><!-- #primary -->

</div><!-- close .main-content-inner -->
<style>
    #bg {
        background-image: url('http://northaustinrun.club/wp-content/uploads/2019/08/city-backdrop-1.jpg');
        position: fixed;
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: cover;
    }
    #bg-overlay {
        background: rgba(0,0,0,0.3);
        position: fixed;
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: cover;
    }
    #page {
        z-index: 1000;
        position: relative;
    }
    #event-date {
        font-family: 'Gudea', san-serif;
        font-size: 36px;
        font-style: italic;
        font-weight: bold;
        color: #FFF;
        text-shadow: 3px 3px 3px #000;
    }
    #event-title {
        font-family: 'Bangers', cursive;
    }
    #subheading {
        font-family: 'Gudea', san-serif;
        font-size: 30px;
        color: #FFF;
    }
    #call-to-action {
        width: 80%;
        max-width: 600px;
        display: flex;
        justify-content: space-around;
        margin: 50px auto;
    }
    #main {
        text-align: center;
    }
    #main button {
        background-color: #EEC942;
        border-color: #98812b;
        font-size: 14px;
        padding: 15px 30px;
        font-weight: 700;
        border: 2px #efefef solid;
        border-radius: 8px;
    }
    #page-content {
        background: rgba(255,255,255,0.9);
        padding: 15px;
        border: 2px solid #EEC942;
        margin-top: 45px;
    }
</style>
<?php endwhile; // end of the loop. ?>
<?php get_footer(); ?>
<div id="bg"></div>
<div id="bg-overlay"></div>