<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Kosta Grammatis</title>
        <meta name="description" content="Kosta Grammatis is a zero-to-one systems architect building complex hardware systems for emerging technologies.">
        <meta name="viewport" content="width=device-width">

        <!-- Google tag (gtag.js) for Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-HB4T4WRG5Y"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-HB4T4WRG5Y');
        </script>

        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://kosta.is" />
        <meta property="og:title" content="Kosta Grammatis" />
        <meta property="og:image" content="https://kosta.is/img/fb_logo.jpg" />
        <meta property="og:site_name" content="Kosta Grammatis" />
        <meta property="og:description" content="The personal website of Kosta Grammatis." />
        <meta property="og:locale" content="en_US" />
        <meta name="google-site-verification" content="hX8ZaSXX4fK-NfOSkRwclHVqJgocH8ermQuP5xrmtD0" />


        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/fonts/fonts.css">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/navbar.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>

        <div id="header">
          <div class="adaptive transparent-on-dark">
            <div id="logo"><a href="http://kosta.is/"><img src="img/spacer.gif" border="0" alt="Kosta Grammatis" /></a></div>
            <ul class="nav first">
              <li class="navtext menu-open"><a href="#">[Menu] <i class="icon-reorder"></i></a></li>
              <li class="navtext menu-close"><a href="#">[Close]</a></li>
              <li class="facebook"><a href="" target="_blank" rel="noopener"><img src="img/spacer.gif" alt="Facebook" /></a></li>
              <li class="twitter"><a href="" target="_blank" rel="noopener"><img src="img/spacer.gif" alt="Twitter" /></a></li>
              <li class="linkedin"><a href="" target="_blank" rel="noopener"><img src="img/spacer.gif" alt="LinkedIn" /></a></li>
            </ul>
            <ul class="nav collapsible">
              <li class="navtext active" data-section="home"><a href="#home">Home</a></li>
              <li class="navtext" data-section="about"><a href="#about">About</a></li>
              <li class="navtext" data-section="work"><a href="#work">Work</a></li>
              <li class="navtext" data-section="media"><a href="#media">Media</a></li>
              <li class="navtext" data-section="contact"><a href="#contact">Contact</a></li>
            </ul>
          </div>
        </div>
       

        <div id="home" class="sectionContainer">
          <div class="sectionBackground" data-stellar-background-ratio="0.5"></div>
          <div class="sectionContent autoMargin">
            <div class="heading" id="home-title"></div>
            <div class="text" id="home-body"></div>
          </div>
          <button class="scroll-cue" type="button" aria-label="Scroll down">
            <span class="scroll-cue__arrow"></span>
          </button>
        </div> <!-- END #home .sectionContainer -->


        <div id="about" class="sectionContainer scrollOffset">
          <div class="mobile-top-image" aria-hidden="true"></div>
          <div class="sectionBackground" data-stellar-background-ratio="0.5"></div>
          <div class="sectionContent autoMargin">
            <div class="heading" id="about-title"></div>
            <div class="text" id="about-body"></div>
            <ul class="honors clearfix" id="about-honors"></ul>
          </div>
        </div> <!-- END #about .sectionContainer -->


        <div id="work" class="sectionContainer scrollOffset scrollExact">
          <div class="sectionBackground" data-stellar-background-ratio="0.5"></div>
          <div class="sectionContent">
            <div id="workgrid" class="work-groups"></div>
          </div>
        </div> <!-- END #work .sectionContainer -->


        <div id="media" class="sectionContainer scrollOffset scrollExact">
          <div class="sectionBackground" data-stellar-background-ratio="0.5"></div>
          <div class="sectionContent">
            <div id="videos-tag">Videos<br><small>1 / 1</small></div>
            <div class="video-carousel">
              <button class="video-arrow left" type="button" aria-label="Previous video"></button>
              <div id="media-container" class="video-track"></div>
              <button class="video-arrow right" type="button" aria-label="Next video"></button>
            </div>
            <div class="selected-press-container">
              <div class="honors-text-header">Selected Press:</div>
              <div class="selected-press-logos" id="press-logos"></div>
            </div>
          </div>
        </div> <!-- END #media .sectionContainer -->


        <div id="contact" class="sectionContainer">
          <div class="sectionBackground" data-stellar-background-ratio="0.5"></div>
          <div class="sectionContent">
            <div class="contact-wrapper">
              <div class="heading" id="contact-title">Let's Do Something Amazing</div>
              <div class="contact-email" id="contact-email"></div>
              <div class="contact-status" id="contact-status" aria-live="polite"></div>
              <form id="contactForm">
                <div class="contact-columns">
                  <div class="left-column">
                    <div class="input_name">Name:*</div>
                    <input class="input_text" type="text" name="name" value="" id="input_name">
                    <div class="input_name">Email Address:*</div>
                    <input class="input_text" type="text" name="email" value="" id="input_email">
                    <div class="input_name">Subject:*</div>
                    <input class="input_text" type="text" name="subject" value="" id="input_subject">
                  </div>
                  <div class="right-column">
                    <div class="input_name">Message:</div>
                    <textarea name="message" value="" id="input_message"></textarea>
                    <div class="contact-submit"><input type="submit" name="submit" value="Send Message" id="submit"></div>
                  </div>
                </div>
              </form>
            </div><!-- END .contact-wrapper -->
          </div>
          <footer class="site-footer">
            <div class="site-footer__inner">
              © <span id="footer-year"></span> Kosta Grammatis. All rights reserved.
            </div>
          </footer>
        </div> <!-- END #contact .sectionContainer -->

        <div class="pong"><a href="pong/index.html" class="pong-launch" data-mobile-href="pong/index.html?return=1"><img src="img/pong.png" alt="Play Pong"></a></div>
        <div class="pong-modal" aria-hidden="true">
          <div class="pong-modal__backdrop"></div>
          <div class="pong-modal__panel" role="dialog" aria-label="Pong game">
            <button class="pong-modal__close" aria-label="Close Pong">×</button>
            <iframe title="Pong" src="" frameborder="0" allowfullscreen></iframe>
          </div>
        </div>


        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
        <script src="js/viewport.js"></script>
        <script src="js/navbar.js"></script>
        <script src="js/media.js"></script>
        <script src="js/contact.js"></script>
        <script src="js/work.js"></script>
        <script src="js/main.js"></script>
        <script src="js/pong-icon.js"></script>

    </body>
</html>
