<!-- BEGIN TOPBAR -->
<div class="topbar">
  <!-- BEGIN HEADER LEFT -->
  <div class="header-left">
    <div class="topnav">
      <a class="menutoggle" href="#" data-toggle="sidebar-collapsed"><span class="menu__handle"><span>Menu</span></span></a>
      <!-- BEGIN MEGA MENU -->
      <ul class="nav nav-horizontal mmenu">
        <li class="dropdown mmenu-fw">
          <a href="#" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" data-delay="100" class="dropdown-toggle">Full Medias <b class="caret"></b></a>
          <ul class="dropdown-menu fullwidth">
            <li class="mmenu-content">
              <div class="row">
                <div class="col-sm-4">
                  <h3 class="title"><strong>Video</strong> Widget</h3>
                  <iframe src="http://player.vimeo.com/video/41286259?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>
                </div>
                <div class="col-sm-4">
                  <h3 class="title"><strong>Media</strong> Elements</h3>
                  <div class="row">
                    <div class="col-md-4 m-b-10">
                      <img src="assets/images/gallery/1.jpg" alt="1" class="img-thumbnail img-responsive">
                    </div>
                    <div class="col-md-4 m-b-10">
                      <img src="assets/images/gallery/2.jpg" alt="2" class="img-thumbnail img-responsive">
                    </div>
                    <div class="col-md-4 m-b-10">
                      <img src="assets/images/gallery/3.jpg" alt="3" class="img-thumbnail img-responsive">
                    </div>
                    <div class="col-md-4 m-b-10">
                      <img src="assets/images/gallery/4.jpg" alt="4" class="img-thumbnail img-responsive">
                    </div>
                    <div class="col-md-4 m-b-10">
                      <img src="assets/images/gallery/5.jpg" alt="5" class="img-thumbnail img-responsive">
                    </div>
                    <div class="col-md-4 m-b-10">
                      <img src="assets/images/gallery/6.jpg" alt="6" class="img-thumbnail img-responsive">
                    </div>
                  </div>
                </div>
                <div class="col-sm-4">
                  <h3 class="title"><strong>Article</strong> Element</h3>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five..</p>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <li class="dropdown mmenu-fw">
          <a href="#" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" data-delay="100" class="dropdown-toggle">Full Menu <b class="caret"></b></a>
          <ul class="dropdown-menu fullwidth">
            <li class="mmenu-content withdesc">
              <div class="row">
                <div class="col-sm-2">
                  <h3 class="title"><strong>Support</strong></h3>
                  <ul>
                    <li><a data-description="A Short Description" href="#">Contact Form</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Knowledgebase</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Friendly Questions</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Support Forum</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Changelogs</a>
                    </li>
                  </ul>
                </div>
                <div class="col-sm-2">
                  <h3 class="title"><strong>Marketplace</strong></h3>
                  <ul>
                    <li><a data-description="A Short Description" href="#">ThemeForest</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">CodeCanyon</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">GraphicRiver</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">VideoHive</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">ActiveDen</a>
                    </li>
                  </ul>
                </div>
                <div class="col-sm-2">
                  <h3 class="title"><strong>Tuts+ Sites</strong></h3>
                  <ul>
                    <li><a data-description="A Short Description" href="#">PSD Tuts+</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Code Tuts+</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Vector Tuts+</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">App Tuts+</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">WP Tuts+</a>
                    </li>
                  </ul>
                </div>
                <div class="col-sm-2">
                  <h3 class="title"><strong>Envato Sites</strong></h3>
                  <ul>
                    <li><a data-description="A Short Description" href="#">Marketplaces</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Microlancer</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Creattica</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">AppStorm</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Tutsplus</a>
                    </li>
                  </ul>
                </div>
                <div class="col-sm-2">
                  <h3 class="title"><strong>Engage</strong></h3>
                  <ul>
                    <li><a data-description="A Short Description" href="#">We Build Envato</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Flickr Stream</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Youtube</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Inside Envato</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Vimeo Stream</a>
                    </li>
                  </ul>
                </div>
                <div class="col-sm-2">
                  <h3 class="title"><strong>Social</strong></h3>
                  <ul>
                    <li><a data-description="A Short Description" href="#">Google Plus</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Facebook</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Twitter</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Linkedin</a>
                    </li>
                    <li><a data-description="A Short Description" href="#">Pinterest</a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <li class="dropdown mmenu-fw">
          <a href="#" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" data-delay="100" class="dropdown-toggle">Half Menu <b class="caret"></b></a>
          <ul class="dropdown-menu half">
            <li class="mmenu-content withoutdesc">
              <div class="row">
                <div class="col-sm-4">
                  <ul>
                    <li><a href="#"><i class="fa fa-laptop"></i> Laptop icon</a>
                    </li>
                    <li><a href="#"><i class="fa fa-desktop"></i> Desktop icon</a>
                    </li>
                    <li><a href="#"><i class="fa fa-android"></i> Android icon</a>
                    </li>
                    <li><a href="#"><i class="fa fa-apple"></i> Apple icon</a>
                    </li>
                    <li><a href="#"><i class="fa fa-windows"></i> Windows icon</a>
                    </li>
                  </ul>
                </div>
                <div class="col-sm-4">
                  <ul>
                    <li><a href="#"><i class="fa fa-leaf"></i> Leaf icon</a>
                    </li>
                    <li><a href="#"><i class="fa fa-heart-o"></i> Heart icon</a>
                    </li>
                    <li><a href="#"><i class="fa fa-gear"></i> Gear icon</a>
                    </li>
                    <li><a href="#"><i class="fa fa-camera-retro"></i> Camera icon</a>
                    </li>
                    <li><a href="#"><i class="fa fa-bars"></i> Bars icon</a>
                    </li>
                  </ul>
                </div>
                <div class="col-sm-4">
                  <ul>
                    <li><a href="#"><i class="fa fa-beer"></i> Beer icon</a>
                    </li>
                    <li><a href="#"><i class="fa fa-code"></i> Code icon</a>
                    </li>
                    <li><a href="#"><i class="fa fa-envelope-o"></i> Envelope icon</a>
                    </li>
                    <li><a href="#"><i class="fa fa-flag-o"></i> Flag icon</a>
                    </li>
                    <li><a href="#"><i class="fa fa-key"></i> Key icon</a>
                    </li>
                  </ul>
                </div>
              </div>
              <hr>
              <div class="row">
                <div class="col-sm-12">
                  <p>Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.</p>
                  <p>Font Awesome font licensed under <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a> Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a> Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown"  data-hover="dropdown" data-close-others="true" data-delay="100" class="dropdown-toggle">Submenus <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">ThemeForest</a>
            </li>
            <li><a href="#">GraphicRiver</a>
            </li>
            <li><a href="#">PhotoDune</a>
            </li>
            <li class="dropdown-submenu">
              <a href="#">Envato Sites</a>
              <ul class="dropdown-menu">
                <li class="dropdown-submenu">
                  <a href="#">Tuts+</a>
                  <ul class="dropdown-menu">
                    <li><a href="#">PSD Tuts</a>
                    </li>
                    <li><a href="#">CODE Tuts</a>
                    </li>
                  </ul>
                </li>
                <li><a href="#">We are Envato</a>
                </li>
                <li><a href="#">Support Center</a>
                </li>
              </ul>
            </li>
            <li><a href="#">Creattica</a>
            </li>
            <li><a href="#">Microlancer</a>
            </li>
            <li><a href="#">ActiveDen</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" data-delay="100" class="dropdown-toggle">Contact<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li>
              <form id="" action="#" name="contactform" method="post" style="max-width:600px">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  <input type="text" name="name" id="name1" class="form-control" placeholder="Name">
                  <input type="text" name="email" id="email1" class="form-control" placeholder="Email"> 
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  <input type="text" name="phone" id="phone1" class="form-control" placeholder="Phone">
                  <input type="text" name="subject" id="subject1" class="form-control" placeholder="Subject"> 
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <textarea class="form-control" name="comments" id="comments1" rows="6" placeholder="Your Message ..."></textarea>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <div class="pull-right">
                    <input type="submit" value="Send my Message" id="submit1" class="btn btn-primary btn-embossed"> 
                  </div>
                </div>
              </form>
            </li>
          </ul>
        </li>
      </ul>
      <!-- END MEGA MENU -->
    </div>
  </div>
  <!-- END HEADER LEFT -->
  <!-- BEGIN HEADER RIGHT -->
  <div class="header-right">
    <ul class="header-menu nav navbar-nav">
      <!-- BEGIN USER DROPDOWN -->
      <li class="dropdown" id="language-header">
        <a href="#" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
        <i class="icon-globe"></i>
        <span>Language</span>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#" data-lang="en"><img src="assets/images/flags/usa.png" alt="flag-english"> <span>English</span></a>
          </li>
          <li>
            <a href="#" data-lang="es"><img src="assets/images/flags/spanish.png" alt="flag-english"> <span>Español</span></a>
          </li>
          <li>
            <a href="#" data-lang="fr"><img src="assets/images/flags/french.png" alt="flag-english"> <span>Français</span></a>
          </li>
        </ul>
      </li>
      <!-- END USER DROPDOWN -->
      <!-- BEGIN NOTIFICATION DROPDOWN -->
      <li class="dropdown" id="notifications-header">
        <a href="#" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
        <i class="icon-bell"></i>
        <span class="badge badge-danger badge-header">6</span>
        </a>
        <ul class="dropdown-menu">
          <li class="dropdown-header clearfix">
            <p class="pull-left">12 Pending Notifications</p>
          </li>
          <li>
            <ul class="dropdown-menu-list withScroll" data-height="220">
              <li>
                <a href="#">
                <i class="fa fa-star p-r-10 f-18 c-orange"></i>
                Steve have rated your photo
                <span class="dropdown-time">Just now</span>
                </a>
              </li>
              <li>
                <a href="#">
                <i class="fa fa-heart p-r-10 f-18 c-red"></i>
                John added you to his favs
                <span class="dropdown-time">15 mins</span>
                </a>
              </li>
              <li>
                <a href="#">
                <i class="fa fa-file-text p-r-10 f-18"></i>
                New document available
                <span class="dropdown-time">22 mins</span>
                </a>
              </li>
              <li>
                <a href="#">
                <i class="fa fa-picture-o p-r-10 f-18 c-blue"></i>
                New picture added
                <span class="dropdown-time">40 mins</span>
                </a>
              </li>
              <li>
                <a href="#">
                <i class="fa fa-bell p-r-10 f-18 c-orange"></i>
                Meeting in 1 hour
                <span class="dropdown-time">1 hour</span>
                </a>
              </li>
              <li>
                <a href="#">
                <i class="fa fa-bell p-r-10 f-18"></i>
                Server 5 overloaded
                <span class="dropdown-time">2 hours</span>
                </a>
              </li>
              <li>
                <a href="#">
                <i class="fa fa-comment p-r-10 f-18 c-gray"></i>
                Bill comment your post
                <span class="dropdown-time">3 hours</span>
                </a>
              </li>
              <li>
                <a href="#">
                <i class="fa fa-picture-o p-r-10 f-18 c-blue"></i>
                New picture added
                <span class="dropdown-time">2 days</span>
                </a>
              </li>
            </ul>
          </li>
          <li class="dropdown-footer clearfix">
            <a href="#" class="pull-left">See all notifications</a>
            <a href="#" class="pull-right">
            <i class="icon-settings"></i>
            </a>
          </li>
        </ul>
      </li>
      <!-- END NOTIFICATION DROPDOWN -->
      <!-- BEGIN MESSAGES DROPDOWN -->
      <li class="dropdown" id="messages-header">
        <a href="#" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
        <i class="icon-paper-plane"></i>
        <span class="badge badge-primary badge-header">
        8
        </span>
        </a>
        <ul class="dropdown-menu">
          <li class="dropdown-header clearfix">
            <p class="pull-left">
              You have 8 Messages
            </p>
          </li>
          <li class="dropdown-body">
            <ul class="dropdown-menu-list withScroll" data-height="220">
              <li class="clearfix">
                <span class="pull-left p-r-5">
                <img src="assets/images/avatars/avatar3.png" alt="avatar 3">
                </span>
                <div class="clearfix">
                  <div>
                    <strong>Alexa Johnson</strong> 
                    <small class="pull-right text-muted">
                    <span class="glyphicon glyphicon-time p-r-5"></span>12 mins ago
                    </small>
                  </div>
                  <p>Lorem ipsum dolor sit amet, consectetur...</p>
                </div>
              </li>
              <li class="clearfix">
                <span class="pull-left p-r-5">
                <img src="assets/images/avatars/avatar4.png" alt="avatar 4">
                </span>
                <div class="clearfix">
                  <div>
                    <strong>John Smith</strong> 
                    <small class="pull-right text-muted">
                    <span class="glyphicon glyphicon-time p-r-5"></span>47 mins ago
                    </small>
                  </div>
                  <p>Lorem ipsum dolor sit amet, consectetur...</p>
                </div>
              </li>
              <li class="clearfix">
                <span class="pull-left p-r-5">
                <img src="assets/images/avatars/avatar5.png" alt="avatar 5">
                </span>
                <div class="clearfix">
                  <div>
                    <strong>Bobby Brown</strong>  
                    <small class="pull-right text-muted">
                    <span class="glyphicon glyphicon-time p-r-5"></span>1 hour ago
                    </small>
                  </div>
                  <p>Lorem ipsum dolor sit amet, consectetur...</p>
                </div>
              </li>
              <li class="clearfix">
                <span class="pull-left p-r-5">
                <img src="assets/images/avatars/avatar6.png" alt="avatar 6">
                </span>
                <div class="clearfix">
                  <div>
                    <strong>James Miller</strong> 
                    <small class="pull-right text-muted">
                    <span class="glyphicon glyphicon-time p-r-5"></span>2 days ago
                    </small>
                  </div>
                  <p>Lorem ipsum dolor sit amet, consectetur...</p>
                </div>
              </li>
            </ul>
          </li>
          <li class="dropdown-footer clearfix">
            <a href="mailbox.html" class="pull-left">See all messages</a>
            <a href="#" class="pull-right">
            <i class="icon-settings"></i>
            </a>
          </li>
        </ul>
      </li>
      <!-- END MESSAGES DROPDOWN -->
      <!-- BEGIN USER DROPDOWN -->
      <li class="dropdown" id="user-header">
        <a href="#" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
        <img src="assets/images/avatars/user1.png" alt="user image">
        <span class="username">Hi, John Doe</span>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#"><i class="icon-user"></i> <span>My Profile</span></a>
          </li>
          <li>
            <a href="#"><i class="icon-calendar"></i> <span>My Calendar</span></a>
          </li>
          <li>
            <a href="#"><i class="icon-settings"></i> <span>Account Settings</span></a>
          </li>
          <li>
            <a href="#"><i class="icon-logout"></i> <span>Logout</span></a>
          </li>
        </ul>
      </li>
      <!-- END USER DROPDOWN -->
      <!-- CHAT BAR ICON -->
      <li id="quickview-toggle"><a href="#"><i class="icon-bubbles"></i></a></li>
    </ul>
  </div>
  <!-- END HEADER RIGHT -->
</div>
<!-- END TOPBAR -->
