<!DOCTYPE html>
<html>
    <head>
        <title>Casey's New Buffalo</title>
        <base href='/'>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png">
        <link rel="manifest" href="/img/favicons/manifest.json">
        <link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
        <link rel="shortcut icon" href="/img/favicons/favicon.ico">
        <meta name="msapplication-config" content="/img/favicons/browserconfig.xml">
        <meta name="theme-color" content="#ffffff">
        <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Montserrat:100,200i,200,300,400|Open+Sans|Secular+One|Suez+One" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Expanded" rel="stylesheet">
        <link rel='stylesheet' type="text/css" href='/lib/bootstrap/css/bootstrap.min.css'>
        <link rel='stylesheet' href='/css/home.css'>
        <link rel='stylesheet' href='/css/desktop.css'>
        <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
          ga('create', 'UA-99774137-1', 'auto');
          ga('send', 'pageview');
        </script>
    </head>
    <body>
      <div id="overlay">
        <p id="close">Close X</p>
        <div id="contact-form" class="animated fadeInUp">
          <h1>Contact Us</h1>
          <form id="contact-fullscreen" class="col-md-6">
            <div id="contact-inputs">
              <input required class="form-control" id="first_name" type="text" placeholder="First Name"/>
              <input required class="form-control" id="last_name" type="text" placeholder="Last Name"/>
              <input required class="form-control" id="email" type="email" placeholder="Email"/>
              <input class="form-control" id="phone" type="tel" placeholder="Phone Number"/>
              <textarea required class="form-control" id="message" placeholder="message"></textarea>
              <button class="btn btn-primary">Send</button>
            </div>
          </form>
          <div id="contact-form-info" class="col-md-6">
            <div class="bar"></div>
            <p>caseysnb136@gmail.com</p>
            <p><a style="color: #333; font-weight: 400" href="tel:2694696400">(269) 469-6400</a></p>
            <br/>
            <p><span>Casey's Bar &amp Grill</span><span>136 N Whittaker St</span><span>New Buffalo, MI 49117</span>
            <div class="bar"></div>
            <img class="icon" src="/img/icons/fb-icon.svg"/>
            <img class="icon" src="/img/icons/twitter-icon.svg"/>
            <img class="icon" src="/img/icons/insta-icon.svg"/>
            <p style="margin-left: 10px; float: left;">@theharpandfiddle</p>
          </div>
        </div>

        <div id="job-form" class="animated fadeInUp">
          <h1>Job Application</h1>
          <form>
            <input required class="form-control form-50" id="job_first_name" type="text" placeholder="First Name"/>
            <input required class="form-control form-50" id="job_last_name" type="text" placeholder="Last Name"/>
            <input required class="form-control" id="job_email" type="email" placeholder="Email"/>
            <input required class="form-control" id="job_phone" type="tel" placeholder="Phone Number"/>
            <select required class="form-control" id="job_position">
              <option disabled selected>Please select a desired position</option>
              <option value="assistant manager">Assistant Manager</option>
              <option value="host/hostess">Host/Hostess</option>
              <option value="server">Server</option>
              <option value="busser">Busser</option>
              <option value="line cook">Line Cook</option>
              <option value="dishwasher">Dishwasher</option>
              <option value="expediter">Food expediter</option>
              <option value="no preference">No Preference</option>
            </select>
            <textarea class="form-control" id="job_message" placeholder="Message (optional)"></textarea>
            <button class="btn btn-primary" type="submit">Apply</button>
          </form>
        </div>

        <div id="tour-360">
          <iframe data-aos="zoom-in-up" src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sus!4v1493947522552!6m8!1m7!1s4h2ZxnzZZ9gAAAQfDpCpIA!2m2!1d41.79589168061158!2d-86.74534769800971!3f236.18051604391565!4f-13.172600226446676!5f0.7820865974627469" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>

        <div id="food"></div>
        <div id="brunch"></div>
        <div id="beer"></div>
        <div id="wine"></div>
        <div id="cocktails"></div>
        <div id="carryout"></div>
        <div id="tendollarlunch"></div>
        <div id="desserts"></div>



        <div id="events-pu">
          <div id="events-calendar"></div>
        </div>


        <img src="/img/icons/spin.svg" class="spinner"/>
      </div>
      <div class="offscreen-nav-wrapper">
        <div class="offscreen-nav">
          <ul>
            <li><a href="#events">Events</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#social">Social</a></li>
            <li><a href="#menus">Menus</a></li>
            <li id="contact" href="contact-form">Contact</li>
            <li><a href="/photo-gallery">Photos</a></li>
            <li class="jobs-trigger">Jobs</li>
          </ul>
        </div>
      </div>
      <nav>
        <div id="menu">
          <span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
      </nav>

      <img id="show-360" class="animated slideInDown" src="/img/icons/tour.svg"/>

      <div id="primary-container">
        <div class="top-nav">
          <ul>
            <li class="jobs-trigger nav-item">Jobs</li>
            <li><a href="/photo-gallery">Photos</a></li>
            <li id="contact-topnav" href="contact-form">Contact</li>
            <!-- <li><a href="https://www.yelp.com/reservations/the-harp-and-fiddle-park-ridge" target="_blank">Reserve</a></li> -->
            <li><a href="#social">Social</a></li>
            <li><a href="#menus">Menus</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#events">Events</a></li>
            <li class="nav-logo"><a href="/index"><img src="/img/logos/caseys.png"/></a></li>
          </ul>
        </div>

        <section id="intro">
          <h1>Casey's</h1>
          <h2 class="animated slideInLeft">Bar &amp Grill</h2>
          <a id="look" class="animated pulse" href="#events">Take a Look</a>
          <!-- <img class="popup-ll animated swing jobs-trigger" src="/img/backgrounds/hiring.png"/> -->
        </section>


        <section id="events">
          <h1>Upcoming Events</h1>
          <div id="featured-evs"></div>
        </section>

        <section id="about">
          <div id="location-map">
            <div class="map-overlay"></div>
            <iframe data-aos="zoom-in-up" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2974.504478030399!2d-86.74534769800971!3d41.79589168061158!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88110355c0b76a11%3A0x946a49054ddf47f!2sCasey&#39;s+Bar+%26+Grill!5e0!3m2!1sen!2sus!4v1493949288145" frameborder="0" style="border:0" allowfullscreen></iframe>
          </div>
          <div id="contact-info" data-aos="fade-left">
            <div class="contact-block">
              <h4>Casey's Bar &amp Grill</h4>
              <p>136 Whittaker St,<br/>New Buffalo, MI 49117<br/><a id="ph-num" href="tel:2694696400">(269) 469-6400</a></p>
              <p><a id="email-info">Send us an email</a></p>
            </div>
            <div class="contact-block">
              <table class="table">
                <thead>
                  <th>Hours</th>
                  <th style="font-size: 1em">Kitchen</th>
                  <th style="font-size: 1em">Bar</th>
                </thead>
                <tr>
                  <td>Mon-Sun</td>
                  <td>11am-10pm</td>
                  <td>11am-2am</td>
                </tr>
              </table>
            </div>
            <!-- <div id="reservation-block" class="contact-block">
              <h4>Reserve a Table</h4>
              <form id="reserve-table">
                <input id="reserve-date-block" type="date"/>
                <select id="reserve-time-block">
                </select>
                <input type="text" id="res-name" placeholder="Name" required/>
                <input type="text" id="res-email" placeholder="Email" required/>
                <input type="text" id="res-phnum" placeholder="Phone Number" required/>
                <input type="text" id="res-size" placeholder="Party Size" required/>
                <button type="submit">Reserve</button>
              </form>
            </div> -->
            <div id="contact-form-block" class="contact-block">
              <h4>Contact</h4>
              <form id="sendMessage">
                <input type="text" id="contact-name" placeholder="Name" required/>
                <input type="text" id="contact-email" placeholder="Email" required/>
                <input type="text" id="contact-phnum" placeholder="Phone Number"/>
                <textarea id="contact-msg" placeholder="Message" required></textarea>
                <button type="submit">Send</button>
              </form>
            </div>
          </div>

        </section>

        <section id="menus">
          <div class="col-80">
            <div class="menu-block food-block foodLink"><div class="block-overlay"><h5>Food</h5></div></div>
            <!-- <div class="menu-block brunch-block brunchLink"><div class="block-overlay"><h5>Brunch</h5></div></div> -->
            <div class="vertical-block">
              <div class="menu-block beer-block beerLink"><div class="block-overlay"><h5>Beer</h5></div></div>
              <!-- <div class="menu-block brunch-block brunchLink desktop-item"><div class="block-overlay"><h5>Brunch</h5></div></div> -->
            </div>
            <div class="menu-block dessert-block dessertsLink desktop-item"><div class="block-overlay"><h5>Dessert</h5></div></div>
            <div class="menu-block tendollarlunch-block tendollarlunchLink desktop-item"><div class="block-overlay"><h5>$10 Lunch</h5></div></div>
            <div class="col-50">
              <!-- <div class="menu-block brunch-block brunchLink mobile-item"><div class="block-overlay"><h5>Brunch</h5></div></div> -->
              <div class="menu-block carryout-block carryoutLink mobile-item"><div class="block-overlay"><h5>Carry Out</h5></div></div>
              <div class="menu-block cocktails-block cocktailsLink"><div class="block-overlay"><h5>Cocktails</h5></div></div>
            </div>
            <div class="col-50">
              <div class="menu-block wine-block wineLink mobile-item"><div class="block-overlay"><h5>Wine</h5></div></div>
            </div>
            <div class="menu-block tendollarlunch-block tendollarlunchLink mobile-item"><div class="block-overlay"><h5>$10 Lunch</h5></div></div>
            <div class="menu-block dessert-block dessertsLink mobile-item"><div class="block-overlay"><h5>Dessert</h5></div></div>
          </div>
          <div class="col-20 desktop-item">
            <div class="menu-block carryout-block carryoutLink"><div class="block-overlay"><h5>Carry Out</h5></div></div>
            <div class="menu-block wine-block wineLink"><div class="block-overlay"><h5>Wine</h5></div></div>
          </div>

        </section>

        <section id="social">
          <h2 style="margin-top: -10px; margin-bottom: 0; padding: 10px">#caseysnewbuffalo</h2>
          <div id="ig-links"></div>
        </section>

        <footer>
          <div class="tbl">
            <ul id="soc-links">
              <li><a href="https://www.facebook.com/caseysnewbuffalomichigan/" target="_blank"><img src="/img/icons/fb-icon-white.svg"></a></li>
              <li><a href="https://www.instagram.com/explore/locations/314368795/caseys-new-buffalo/" target="_blank"><img src="/img/icons/insta-icon-white.svg"></a></li>
              <li><a href="https://untappd.com/v/caseys-new-buffalo/82894" target="_blank"><img src="/img/icons/ut-logo-bottles.svg"></a></li>
            </ul>
          </div>
          <div class="tbl">
            <ul>
              <li><a href="#events">Events</a></li>
              <li><a href="#about">About</a></li>
              <!-- <li class="mobile-item-inline"><a href="#reservation-block">Reserve</a></li> -->
              <!-- <li class="desktop-item-inline"><a href="https://www.yelp.com/reservations/the-harp-and-fiddle-park-ridge" target="_blank">Reserve</a></li> -->
              <li><a href="#menus">Menu</a></li>
            </ul>
          </div>

          <p>Website by // Sean Stapleton</p>

        </footer>
      </div>
    </body>
</html>
<link rel="stylesheet" href="/lib/fullcalendar/jquery-ui.min.css"/>
<link rel="stylesheet" href="/lib/fullcalendar/fullcalendar.min.css"/>
<link rel="stylesheet" href="/lib/fullcalendar/fullcalendar.print.css" media="print"/>
<link href='/lib/animate.css/animate.min.css' rel='stylesheet'>
<link href='/lib/aos/dist/aos.css' rel='stylesheet'>
<link href="/lib/slick/slick.css" rel="stylesheet">
<link href="/lib/slick/slick-theme.css" rel="stylesheet">
<link href="/lib/sweetalert/sweetalert.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css">

<!-- <script type="text/javascript">
  !function(e,n){var t=document.createElement("script"),a=document.getElementsByTagName("script")[0];t.async=1,a.parentNode.insertBefore(t,a),t.onload=t.onreadystatechange=function(e,a){(a||!t.readyState||/loaded|complete/.test(t.readyState))&&(t.onload=t.onreadystatechange=null,t=void 0,a||n&&n())},t.src=e}("https://embed-menu-preloader.untappdapi.com/embed-menu-preloader.min.js",function(){PreloadEmbedMenu("menu-container",6484,22214)});
</script> -->
<script type='text/javascript' src='/lib/jquery/jquery.min.js'></script>
<script type="text/javascript">
  $(document).ready(function() {
    var intro_img = $("<img>");
    intro_img.load(function(){
     $("#intro").css("background-image", "linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)), url('"+$(this).attr("src")+"')");
    });
    intro_img.attr("src", "/img/backgrounds/caseysoutside.jpg");
  });
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="/lib/fullcalendar/moment.min.js"></script>
<script src="/lib/moment/moment-timezone.min.js"></script>
<script src="/lib/fullcalendar/fullcalendar.min.js"></script>
<script src="/lib/pdfjs/build/pdf.js"></script>
<script src="/lib/stickyjs/sticky.min.js"></script>
<script src="/lib/bootstrap/js/bootstrap.min.js"></script>
<script src='/lib/aos/dist/aos.js'></script>
<script type="text/javascript" src="/lib/slick/slick.min.js"></script>
<script type="text/javascript" src="/lib/sweetalert/sweetalert.min.js"></script>
<script type="text/javascript" src="/js/home.js"></script>
