<header id="header">
  <!--<div class="bg"></div>-->

  <div id="logo" class="jumbotron" data-parallax="scroll" data-image-src="img/headerpic2.jpg">
    <div id="logo_text">

      <!-- class="logo_colour", allows you to change the colour of the text -->
      <h1 class="title"><a href="/"><span class="logo_colour"> Workshop on<br/> Groups, Geometry and Dynamics</span></a></h1>

      <h2 class="subtitle">
        <strong>With a homage to Ricardo Mañé</strong><br>
      </h2>

      <h2 id="when" class="subtitle">
        <strong>23 &#8211; 27, July 2018</strong>
      </h2>
      <h2 id="where" class="subtitle">
        <strong>Montevideo, Uruguay</strong>
      </h2>
    </div>
  </div>

  <nav class="navbar navbar-inverse " id="menubar">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menucollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
         <a class="navbar-brand visible-xs" href="#">GGDWorkshop</a>
      </div>
      <div class="navbar-collapse collapse" id="menucollapse">
        <div class="container">
        <ul class="nav navbar-nav" id="menu">
          <!--<li id="home" class="selected"><a href="/">Home</a></li>-->
          <li id="program"><a href="program">Program</a></li>
          <li id="committees"><a href="committees">Committees</a></li>
          <li id="invitedspeakers"><a href="invitedspeakers">Speakers</a></li>
          <li id="registration"><a href="registration">Registration</a></li>
          <li id="participants"><a href="participants">Participants</a></li>
          <li id="practicalinfo"><a href="practicalinfo">Practical Info.</a></li>
          <li id="videos" class="selected"><a href="videos">Videos</a></li>
          <li id="gallery" class="selected"><a href="gallery">Gallery</a></li>
        </ul>
      </div>
      </div>
    </div>
  </nav>

</header>