text: <!doctype html>
  <html lang="en">
  
    <head>
      <meta charset="utf-8">
      <title>Leap Bootstrap Theme and HTML Template</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="A corporate Bootstrap theme by Medium Rare">
      <link href="../assets/css/theme.css" rel="stylesheet" type="text/css" media="all" />
      <link rel="preload" as="font" href="../assets/fonts/Inter-UI-upright.var.woff2" type="font/woff2" crossorigin="anonymous">
      <link rel="preload" as="font" href="../assets/fonts/Inter-UI.var.woff2" type="font/woff2" crossorigin="anonymous">
    </head>
  
    <body data-smooth-scroll-offset="120">
  
      <div class="navbar-container ">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary-3" data-sticky="top">
          <div class="container-fluid">
            <a class="navbar-brand fade-page" href="../index.html">
              <img src="../assets/img/logo-white.svg" alt="Leap">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
              <img class="icon navbar-toggler-open" src="../assets/img/icons/interface/menu.svg" alt="menu interface icon" data-inject-svg />
              <img class="icon navbar-toggler-close" src="../assets/img/icons/interface/cross.svg" alt="cross interface icon" data-inject-svg />
            </button>
            <div class="collapse navbar-collapse justify-content-end">
              <div class="py-2 py-lg-0">
                <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Demos</a>
                    <div class="dropdown-menu row">
                      <div class="col-auto" data-dropdown-content>
                        <div class="dropdown-grid-menu"><a href="../home-course.html" class="dropdown-item fade-page">Course</a><a href="../home-coworking.html" class="dropdown-item fade-page">Coworking<span class="badge badge-primary ml-2">New</span></a><a href="../home-cryptocurrency.html"
                          class="dropdown-item fade-page">Cryptocurrency</a><a href="../home-desktop-app.html" class="dropdown-item fade-page">Desktop App</a><a href="../home-event.html" class="dropdown-item fade-page">Event</a><a href="../home-mobile-app.html"
                          class="dropdown-item fade-page">Mobile App</a><a href="../home-portfolio.html" class="dropdown-item fade-page">Portfolio</a><a href="../home-saas.html" class="dropdown-item fade-page">SaaS</a><a href="../home-saas-trend.html" class="dropdown-item fade-page">SaaS - Trend</a>
                          <a
                          href="../home-software-library.html" class="dropdown-item fade-page">Software Library</a>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Pages</a>
                    <div class="dropdown-menu row">
                      <div class="col-auto" data-dropdown-content>
                        <div class="dropdown-grid-menu"><a href="../about-company.html" class="dropdown-item fade-page">About Company</a>
                          <div class="dropdown">
                            <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
                              <span>Careers</span>
                              <img class="icon bg-dark opacity-20" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
                            </a>
                            <div class="dropdown-menu row">
                              <div class="col-auto" data-dropdown-content>
                                <div class="dropdown-grid-menu"><a href="../careers.html" class="dropdown-item fade-page">Careers</a><a href="../career-single.html" class="dropdown-item fade-page">Career Single</a>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="dropdown">
                            <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
                              <span>Contact</span>
                              <img class="icon bg-dark opacity-20" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
                            </a>
                            <div class="dropdown-menu row">
                              <div class="col-auto" data-dropdown-content>
                                <div class="dropdown-grid-menu"><a href="../contact.html" class="dropdown-item fade-page">Contact</a><a href="../contact-multiple-locations.html" class="dropdown-item fade-page">Contact - Multiple Locations</a>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="dropdown">
                            <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
                              <span>Customers</span>
                              <img class="icon bg-dark opacity-20" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
                            </a>
                            <div class="dropdown-menu row">
                              <div class="col-auto" data-dropdown-content>
                                <div class="dropdown-grid-menu"><a href="../customer-stories.html" class="dropdown-item fade-page">Customer Stories</a><a href="../customer-story.html" class="dropdown-item fade-page">Customer Story</a>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="dropdown">
                            <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
                              <span>Knowledgebase</span>
                              <img class="icon bg-dark opacity-20" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
                            </a>
                            <div class="dropdown-menu row">
                              <div class="col-auto" data-dropdown-content>
                                <div class="dropdown-grid-menu"><a href="../knowledgebase.html" class="dropdown-item fade-page">Knowledgebase</a><a href="../knowledgebase-category.html" class="dropdown-item fade-page">Knowledgebase Category</a><a href="../knowledgebase-article.html" class="dropdown-item fade-page">Knowledgebase Article</a>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="dropdown">
                            <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
                              <span>Pricing</span>
                              <img class="icon bg-dark opacity-20" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
                            </a>
                            <div class="dropdown-menu row">
                              <div class="col-auto" data-dropdown-content>
                                <div class="dropdown-grid-menu"><a href="../pricing-plans.html" class="dropdown-item fade-page">Pricing Plans</a><a href="../pricing-plans-table.html" class="dropdown-item fade-page">Pricing Plans Table</a><a href="../pricing-slider.html" class="dropdown-item fade-page">Pricing Slider</a>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="dropdown">
                            <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
                              <span>Utility</span>
                              <img class="icon bg-dark opacity-20" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
                            </a>
                            <div class="dropdown-menu row">
                              <div class="col-auto" data-dropdown-content>
                                <div class="dropdown-grid-menu"><a href="../404.html" class="dropdown-item fade-page">404</a><a href="../utility-coming-soon-subscribe.html" class="dropdown-item fade-page">Coming Soon - Subscribe</a><a href="../utility-coming-soon.html" class="dropdown-item fade-page">Coming Soon</a>
                                  <a
                                  href="../utility-confirmation-download.html" class="dropdown-item fade-page">Confirmation - Download</a><a href="../utility-confirmation-subscription.html" class="dropdown-item fade-page">Confirmation - Subscription</a><a href="../utility-legal.html" class="dropdown-item fade-page">Legal</a>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="dropdown">
                            <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
                              <span>Account</span>
                              <img class="icon bg-dark opacity-20" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
                            </a>
                            <div class="dropdown-menu row">
                              <div class="col-auto" data-dropdown-content>
                                <div class="dropdown-grid-menu"><a href="../account-onboarding.html" class="dropdown-item fade-page">Onboarding</a><a href="../account-sign-in.html" class="dropdown-item fade-page">Sign In</a><a href="../account-sign-up.html" class="dropdown-item fade-page">Sign Up</a>
                                  <a
                                  href="../account-sign-up-image.html" class="dropdown-item fade-page">Sign Up Image</a><a href="../account-forgot-password.html" class="dropdown-item fade-page">Forgot Password</a>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Blog</a>
                    <div class="dropdown-menu row">
                      <div class="col-auto" data-dropdown-content>
                        <div class="dropdown-grid-menu">
                          <div class="dropdown">
                            <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
                              <span>Blog Layouts</span>
                              <img class="icon bg-dark opacity-20" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
                            </a>
                            <div class="dropdown-menu row">
                              <div class="col-auto" data-dropdown-content>
                                <div class="dropdown-grid-menu"><a href="../blog-cards.html" class="dropdown-item fade-page">Blog Cards</a><a href="../blog-masonry.html" class="dropdown-item fade-page">Blog Masonry</a><a href="../blog-sidebar.html" class="dropdown-item fade-page">Blog Sidebar</a>
                                  <a
                                  href="../blog-magazine.html" class="dropdown-item fade-page">Blog Magazine</a>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="dropdown">
                            <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
                              <span>Article Layouts</span>
                              <img class="icon bg-dark opacity-20" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
                            </a>
                            <div class="dropdown-menu row">
                              <div class="col-auto" data-dropdown-content>
                                <div class="dropdown-grid-menu"><a href="../blog-article.html" class="dropdown-item fade-page">Article Basic</a><a href="../blog-article-video.html" class="dropdown-item fade-page">Article Video</a><a href="../blog-article-image-header.html" class="dropdown-item fade-page">Article Image Header</a>
                                  <a
                                  href="../blog-article-image-header-parallax.html" class="dropdown-item fade-page">Article Image Parallax</a>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Portfolio</a>
                    <div class="dropdown-menu row">
                      <div class="col-auto" data-dropdown-content>
                        <div class="dropdown-grid-menu">
                          <div class="dropdown">
                            <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
                              <span>Grid Layouts</span>
                              <img class="icon bg-dark opacity-20" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
                            </a>
                            <div class="dropdown-menu row">
                              <div class="col-auto" data-dropdown-content>
                                <div class="dropdown-grid-menu"><a href="../portfolio-2-columns.html" class="dropdown-item fade-page">2 Columns</a><a href="../portfolio-3-columns.html" class="dropdown-item fade-page">3 Columns</a><a href="../portfolio-4-columns.html" class="dropdown-item fade-page">4 Columns</a>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="dropdown">
                            <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">
                              <span>Project Layouts</span>
                              <img class="icon bg-dark opacity-20" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg />
                            </a>
                            <div class="dropdown-menu row">
                              <div class="col-auto" data-dropdown-content>
                                <div class="dropdown-grid-menu"><a href="../portfolio-case-study.html" class="dropdown-item fade-page">Case Study</a><a href="../portfolio-single-sidebar.html" class="dropdown-item fade-page">Sidebar</a><a href="../portfolio-single-slider.html" class="dropdown-item fade-page">Slider</a>
                                  <a
                                  href="../portfolio-single-parallax.html" class="dropdown-item fade-page">Parallax</a>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Elements</a>
                    <div class="dropdown-menu bg-primary-3 text-light border-bottom">
                      <div class="container py-4" data-dropdown-content>
                        <div class="row">
                          <div class="col-lg col-md-4 mb-3 mb-lg-0">
                            <h5>Base</h5>
                            <div><a class="dropdown-item fade-page" href="../elements-grid.html">Grid</a><a class="dropdown-item fade-page" href="../elements-forms.html">Forms</a><a class="dropdown-item fade-page" href="../elements-tables.html">Tables</a>
                              <a
                              class="dropdown-item fade-page" href="../elements-typography.html">Typography</a>
                            </div>
                          </div>
                          <div class="col-lg col-md-4 mb-3 mb-lg-0">
                            <h5>General</h5>
                            <div><a class="dropdown-item fade-page" href="../elements-alerts.html">Alerts</a><a class="dropdown-item fade-page" href="../elements-avatars.html">Avatars</a><a class="dropdown-item fade-page" href="../elements-badges.html">Badges</a>
                              <a
                              class="dropdown-item fade-page" href="../elements-breadcrumbs.html">Breadcrumbs</a><a class="dropdown-item fade-page" href="../elements-buttons.html">Buttons</a><a class="dropdown-item fade-page" href="../elements-cards.html">Cards</a><a class="dropdown-item fade-page" href="../elements-dropdowns-bootstrap.html">Dropdowns Bootstrap</a>
                                <a
                                class="dropdown-item fade-page" href="../elements-dropdowns-grid.html">Dropdowns Grid</a><a class="dropdown-item fade-page" href="../elements-footers.html">Footers</a><a class="dropdown-item fade-page" href="../elements-navbars.html">Navigation</a><a class="dropdown-item fade-page" href="../elements-tooltips.html">Tooltips</a>
                                  <a
                                  class="dropdown-item fade-page" href="../elements-toasts.html">Toasts</a><a class="dropdown-item fade-page" href="../elements-widgets.html">Widgets</a>
                            </div>
                          </div>
                          <div class="col-lg col-md-4 mb-3 mb-lg-0">
                            <h5>Graphic</h5>
                            <div><a class="dropdown-item fade-page" href="../elements-decorations.html">Decorations</a><a class="dropdown-item fade-page" href="../elements-dividers.html">Dividers</a><a class="dropdown-item fade-page" href="../elements-icons.html">Icons</a>
                              <a
                              class="dropdown-item fade-page" href="../elements-icons-reference.html">Icons Reference</a><a class="dropdown-item fade-page" href="../elements-processes.html">Processes</a><a class="dropdown-item fade-page" href="../elements-progress.html">Progress</a><a class="dropdown-item fade-page" href="../elements-pricing.html">Pricing</a>
                            </div>
                          </div>
                          <div class="col-lg col-md-4 mb-3 mb-lg-0">
                            <h5>Media</h5>
                            <div><a class="dropdown-item fade-page" href="../elements-fancybox.html">Fancybox</a><a class="dropdown-item fade-page" href="../elements-isotope.html">Isotope</a><a class="dropdown-item fade-page" href="../elements-maps.html">Maps</a>
                              <a
                              class="dropdown-item fade-page" href="../elements-flickity.html">Slider Flickity</a><a class="dropdown-item fade-page" href="../elements-twitter.html">Twitter Feeds</a><a class="dropdown-item fade-page" href="../elements-video-players.html">Video Players</a><a class="dropdown-item fade-page"
                                href="../elements-video-backgrounds.html">Video Backgrounds</a>
                            </div>
                          </div>
                          <div class="col-lg col-md-4 mb-3 mb-lg-0">
                            <h5>Interactive</h5>
                            <div><a class="dropdown-item fade-page" href="../elements-animations.html">Animations</a><a class="dropdown-item fade-page" href="../elements-accordions.html">Accordion</a><a class="dropdown-item fade-page" href="../elements-counters.html">Counters</a>
                              <a
                              class="dropdown-item fade-page" href="../elements-countdown.html">Countdown</a><a class="dropdown-item fade-page" href="../elements-date-picker.html">Date Picker</a><a class="dropdown-item fade-page" href="../elements-modals.html">Modals</a><a class="dropdown-item fade-page" href="../elements-navs.html">Tabs (Nav)</a>
                                <a
                                class="dropdown-item fade-page" href="../elements-typed-text.html">Typed Text</a><a class="dropdown-item fade-page" href="../elements-parallax.html">Parallax</a><a class="dropdown-item fade-page" href="../elements-popovers.html">Popovers</a><a class="dropdown-item fade-page" href="../elements-wizards.html">Wizards</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown-grid" aria-expanded="false" aria-haspopup="true">Support</a>
                    <div class="dropdown-menu row">
                      <div class="col-auto px-0" data-dropdown-content>
                        <div class="bg-white rounded border shadow-lg o-hidden">
                          <div class="p-3">
                            <h6 class="mb-0">Product Support</h6>
                          </div>
                          <div class="list-group list-group-flush">
                            <a href="../documentation/index.html" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-3">
                              <img class="icon icon-md" src="../assets/img/icons/theme/files/selected-file.svg" alt="selected-file icon" data-inject-svg />
                              <div class="text-body ml-3">
                                <span>Documentation</span>
                                <div class="text-small text-muted">Get all the information you need</div>
                              </div>
                            </a>
                            <a href="https://themes.zendesk.com/hc/en-us/articles/360000006291-How-do-I-get-help-with-the-theme-I-purchased-" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-3">
                              <img class="icon icon-md" src="../assets/img/icons/theme/communication/chat-4.svg" alt="chat-4 icon" data-inject-svg />
                              <div class="text-body ml-3">
                                <span>Looking for answers?</span>
                                <div class="text-small text-muted">Get support</div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div><a href="#" class="btn btn-primary ml-lg-3">Purchase Now</a>
  
            </div>
          </div>
        </nav>
      </div>
  
      <button class="btn btn-lg btn-primary btn-block rounded-0 d-md-none" type="button" data-toggle="collapse" data-target="#docs-index" aria-expanded="false" aria-controls="docs-index">
        <img class="icon" src="../assets/img/icons/interface/menu.svg" alt="menu interface icon" data-inject-svg />
        <span>Toggle Docs Index</span>
      </button>
      <section class="container-fluid py-0">
        <div class="row">
          <div class="col-12 col-md-3 col-lg-2 border-right pt-3 pt-md-5 docs-sidebar">
            <div id="docs-index" class="collapse">
  
              <div class="mb-3 mb-md-4">
                <h6 class="mb-2">Getting Started</h6>
                <ul class="nav flex-column">
  
                  <li class="nav-item">
                    <a href="index.html" class="nav-link text-small">Introduction </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="file-structure.html" class="nav-link text-small">File Structure </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="gulp.html" class="nav-link text-small">Gulp </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="changelog.html" class="nav-link text-small">Changelog </a>
  
                  </li>
  
                </ul>
              </div>
  
              <div class="mb-3 mb-md-4">
                <h6 class="mb-2">How To</h6>
                <ul class="nav flex-column">
  
                  <li class="nav-item">
                    <a href="how-to-edit-color-scheme.html" class="nav-link text-small">Edit Color Scheme </a>
  
                  </li>
  
                </ul>
              </div>
  
              <div class="mb-3 mb-md-4">
                <h6 class="mb-2">Graphics</h6>
                <ul class="nav flex-column">
  
                  <li class="nav-item">
                    <a href="graphics-svg.html" class="nav-link text-small">Using SVGs </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="graphics-decorations.html" class="nav-link text-small">Decorations </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="graphics-dividers.html" class="nav-link text-small">Dividers </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="graphics-icons.html" class="nav-link text-small">Icons </a>
  
                  </li>
  
                </ul>
              </div>
  
              <div class="mb-3 mb-md-4">
                <h6 class="mb-2">CSS</h6>
                <ul class="nav flex-column">
  
                  <li class="nav-item">
                    <a href="css-avatars.html" class="nav-link text-small">Avatars </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="css-decorations.html" class="nav-link text-small">Decorations </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="css-dividers.html" class="nav-link text-small">Dividers </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="css-icons.html" class="nav-link text-small">Icons </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="css-image-backgrounds.html" class="nav-link text-small">Image Backgrounds </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="css-utility-classes.html" class="nav-link text-small">Utility Classes </a>
  
                  </li>
  
                </ul>
              </div>
  
              <div class="mb-3 mb-md-4">
                <h6 class="mb-2">Javascript</h6>
                <ul class="nav flex-column">
  
                  <li class="nav-item">
                    <a href="js-aos.html" class="nav-link text-small">Animate On Scroll </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-countdown.html" class="nav-link text-small">Countdowns </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-countup.html" class="nav-link text-small">Counters </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-prism.html" class="nav-link text-small">Code Highlighting </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-dropdown-grid.html" class="nav-link text-small">Dropdowns (Grid) </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-fancybox.html" class="nav-link text-small">Fancybox (Lightbox) </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-flatpickr.html" class="nav-link text-small">Flatpickr </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-flickity.html" class="nav-link text-small">Flickity (Slider) </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="#forms-collapse" class="nav-link text-small" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="forms-collapse">Forms <img class="bg-dark icon" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg /></a>
  
                    <ul class="nav flex-column collapse pl-3" id="forms-collapse">
  
                      <li class="nav-item">
                        <a href="js-form-email.html" class="nav-link text-small">Client Side</a>
                      </li>
  
                      <li class="nav-item">
                        <a href="js-form-swiftmailer.html" class="nav-link text-small">Send to Email</a>
                      </li>
  
                      <li class="nav-item">
                        <a href="js-form-mailchimp.html" class="nav-link text-small">Send to MailChimp</a>
                      </li>
  
                      <li class="nav-item">
                        <a href="js-recaptcha-v2.html" class="nav-link text-small">reCAPTCHA</a>
                      </li>
  
                    </ul>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-maps.html" class="nav-link text-small">Google Maps </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-isotope.html" class="nav-link text-small">Isotope (Masonry Layout) </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="#navs-bars-collapse" class="nav-link text-small" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="navs-bars-collapse">Navs Bars <img class="bg-dark icon" src="../assets/img/icons/interface/arrow-caret.svg" alt="arrow-caret interface icon" data-inject-svg /></a>
  
                    <ul class="nav flex-column collapse pl-3" id="navs-bars-collapse">
  
                      <li class="nav-item">
                        <a href="js-overlay-nav.html" class="nav-link text-small">Overlay</a>
                      </li>
  
                      <li class="nav-item">
                        <a href="js-sticky.html" class="nav-link text-small">Sticky</a>
                      </li>
  
                    </ul>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-jarallax.html" class="nav-link text-small">Parallax </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-loading-animations.html" class="nav-link text-small">Page Load Animations </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-fade-page.html" class="nav-link text-small">Page Transitions </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-ion-rangeslider.html" class="nav-link text-small">Range Sliders </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-reading-position.html" class="nav-link text-small">Scroll Progress Bar </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-smooth-scroll.html" class="nav-link text-small">Smooth Scroll </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-svg-injector.html" class="nav-link text-small">SVGInjector </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-twitter-fetcher.html" class="nav-link text-small">Twitter Feeds </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-typed-text.html" class="nav-link text-small">Typed Text </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-plyr.html" class="nav-link text-small">Video Players </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="js-wizard.html" class="nav-link text-small">Wizards </a>
  
                  </li>
  
                </ul>
              </div>
  
              <div class="mb-3 mb-md-4">
                <h6 class="mb-2">PHP</h6>
                <ul class="nav flex-column">
  
                  <li class="nav-item">
                    <a href="php-mailchimp.html" class="nav-link text-small">Mailchimp Form Handler </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="php-swiftmailer.html" class="nav-link text-small">Email Form Handler </a>
  
                  </li>
  
                </ul>
              </div>
  
              <div class="mb-3 mb-md-4">
                <h6 class="mb-2">Bootstrap</h6>
                <ul class="nav flex-column">
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/alerts/" class="nav-link text-small" target="_blank">Alerts </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/badge/" class="nav-link text-small" target="_blank">Badges </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/breadcrumb/" class="nav-link text-small" target="_blank">Breadcrumbs </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/buttons/" class="nav-link text-small" target="_blank">Buttons </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/card/" class="nav-link text-small" target="_blank">Cards </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/dropdowns/" class="nav-link text-small" target="_blank">Dropdowns </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/forms/" class="nav-link text-small" target="_blank">Forms </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/layout/grid/" class="nav-link text-small" target="_blank">Grid System </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/modal/" class="nav-link text-small" target="_blank">Modals </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/navbar/" class="nav-link text-small" target="_blank">Navbars </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/navs/" class="nav-link text-small" target="_blank">Navs </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/popovers/" class="nav-link text-small" target="_blank">Popovers </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/progress/" class="nav-link text-small" target="_blank">Progress </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/content/tables/" class="nav-link text-small" target="_blank">Tables </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/toasts/" class="nav-link text-small" target="_blank">Toasts </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/components/tooltips/" class="nav-link text-small" target="_blank">Tooltips </a>
  
                  </li>
  
                  <li class="nav-item">
                    <a href="http://getbootstrap.com/docs/4.3/content/typography/" class="nav-link text-small" target="_blank">Typography </a>
  
                  </li>
  
                </ul>
              </div>
  
            </div>
          </div>
          <div class="col-md-9 col-lg-10">
            <div class="row">
              <div class="col-xl-10 col-lg-9 px-xl-6 px-lg-4 px-md-3 py-md-5">
                <div class="card card-body card-lg shadow-3d rounded-sm mb-4 mb-md-5">
                  <h1>Sticky</h1>
                  <div class="lead">
                    <p>Stick elements to the top of the viewport or directly below a sticky nav. Mainly used for sticking nav bars to the top of the viewport.</p>
                  </div>
                </div>
  
                <article id="initializing" class="mb-4 mb-md-6">
                  <h3> <p>Initializing</p>
   </h3>
                  <div class="alert alert-info">
                    <p>The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.</p>
  
                  </div>
                  <div>
                    <p><strong>mrSticky</strong> relies on the <strong>ScrollMonitor</strong> plugin.</p>
                    <ol>
                      <li>
                        <h6>Include the library in your page</h6>
                        <ul>
                          <li>
                            <p>Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted <em>after</em>  <code>jquery.js</code> and <em>before</em>  <code>theme.js</code>.</p>
                            <pre><code class="language-html">&lt;!-- ScrollMonitor (manages events for elements scrolling in and out of view) --&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;assets/js/scrollMonitor.js&quot;&gt;&lt;/script&gt;</code></pre>
                            <p>Alternatively you may wish to load this resource from a CDN to potentially improve page load times.</p>
                            <pre><code class="language-html">&lt;!-- ScrollMonitor (manages events for elements scrolling in and out of view) --&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;https://unpkg.com/scrollmonitor@~1.2.4&quot;&gt;&lt;/script&gt;</code></pre>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <h6>Load the initializer code in <code>index.js</code></h6>
                        <ul>
                          <li>
                            <p>Declare the following import statement in <code>js/mrare/index.js</code>. This ensures that the initializer code is included in the <code>theme.js</code> bundle.</p>
                            <pre><code class="language-javascript">import mrSticky from &#39;./sticky&#39;;</code></pre>
                          </li>
                          <li>
                            <p>Ensure the following line appears in the <code>export</code> object:</p>
                            <pre><code class="language-javascript">export {
  mrSticky,
  };</code></pre>
                          </li>
                        </ul>
                      </li>
                    </ol>
  
                  </div>
                </article>
  
                <article id="basic-usage" class="mb-4 mb-md-6">
                  <h3> <p>Basic Usage</p>
   </h3>
                  <div>
                    <p>Elements such as <code>&lt;nav&gt;</code>s can stick to viewport top with the addition of the <code>data-sticky=&quot;top&quot;</code> attribute.</p>
                    <p>To stick a <code>&lt;nav&gt;</code> to the top of the window, it must be wrapped in a <code>div.navbar-container</code>.</p>
                    <pre><code class="language-html">&lt;div class=&quot;navbar-container&quot;&gt;
    &lt;nav class=&quot;navbar&quot; data-sticky=&quot;top&quot;&gt;
      ...
    &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
                    <p>To make other elements <strong>sticky</strong>, add <code>data-sticky=&quot;below-nav&quot;</code>. The element will then scroll with the page, and stick below the main nav. If the sticky element has a <code>&lt;section&gt;</code> ancestor
                      the element will un-stick and scroll out of view with the ancestor.</p>
  
                  </div>
                  <div class="alert alert-info">
                    <p><strong>See Also:</strong> This functionality works well with our <a href="js-overlay-nav.html" target="_blank">Overlay Nav</a> plugin.</p>
  
                  </div>
                </article>
  
              </div>
              <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-5 docs-sidebar">
                <ul class="nav flex-column">
  
                  <li class="nav-item">
                    <a href="#initializing" class="nav-link text-small" data-smooth-scroll>Initializing</a>
                  </li>
  
                  <li class="nav-item">
                    <a href="#basic-usage" class="nav-link text-small" data-smooth-scroll>Basic Usage</a>
                  </li>
  
                </ul>
              </div>
            </div>
  
          </div>
        </div>
      </section>
  
      <!-- Required vendor scripts (Do not remove) -->
      <script type="text/javascript" src="../assets/js/jquery.min.js"></script>
      <script type="text/javascript" src="../assets/js/popper.min.js"></script>
      <script type="text/javascript" src="../assets/js/bootstrap.js"></script>
  
      <!-- Optional Vendor Scripts (Remove the plugin script here and comment initializer script out of index.js if site does not use that feature) -->
  
      <!-- AOS (Animate On Scroll - animates elements into view while scrolling down) -->
      <script type="text/javascript" src="../assets/js/aos.js"></script>
      <!-- Clipboard (copies content from browser into OS clipboard) -->
      <script type="text/javascript" src="../assets/js/clipboard.js"></script>
      <!-- Fancybox (handles image and video lightbox and galleries) -->
      <script type="text/javascript" src="../assets/js/jquery.fancybox.min.js"></script>
      <!-- Flatpickr (calendar/date/time picker UI) -->
      <script type="text/javascript" src="../assets/js/flatpickr.min.js"></script>
      <!-- Flickity (handles touch enabled carousels and sliders) -->
      <script type="text/javascript" src="../assets/js/flickity.pkgd.min.js"></script>
      <!-- Ion rangeSlider (flexible and pretty range slider elements) -->
      <script type="text/javascript" src="../assets/js/ion.rangeSlider.min.js"></script>
      <!-- Isotope (masonry layouts and filtering) -->
      <script type="text/javascript" src="../assets/js/isotope.pkgd.min.js"></script>
      <!-- jarallax (parallax effect and video backgrounds) -->
      <script type="text/javascript" src="../assets/js/jarallax.min.js"></script>
      <script type="text/javascript" src="../assets/js/jarallax-video.min.js"></script>
      <script type="text/javascript" src="../assets/js/jarallax-element.min.js"></script>
      <!-- jQuery Countdown (displays countdown text to a specified date) -->
      <script type="text/javascript" src="../assets/js/jquery.countdown.min.js"></script>
      <!-- jQuery smartWizard facilitates steppable wizard content -->
      <script type="text/javascript" src="../assets/js/jquery.smartWizard.min.js"></script>
      <!-- Plyr (unified player for Video, Audio, Vimeo and Youtube) -->
      <script type="text/javascript" src="../assets/js/plyr.polyfilled.min.js"></script>
      <!-- Prism (displays formatted code boxes) -->
      <script type="text/javascript" src="../assets/js/prism.js"></script>
      <!-- ScrollMonitor (manages events for elements scrolling in and out of view) -->
      <script type="text/javascript" src="../assets/js/scrollMonitor.js"></script>
      <!-- Smooth scroll (animation to links in-page)-->
      <script type="text/javascript" src="../assets/js/smooth-scroll.polyfills.min.js"></script>
      <!-- SVGInjector (replaces img tags with SVG code to allow easy inclusion of SVGs with the benefit of inheriting colors and styles)-->
      <script type="text/javascript" src="../assets/js/svg-injector.umd.production.js"></script>
      <!-- TwitterFetcher (displays a feed of tweets from a specified account)-->
      <script type="text/javascript" src="../assets/js/twitterFetcher_min.js"></script>
      <!-- Typed text (animated typing effect)-->
      <script type="text/javascript" src="../assets/js/typed.min.js"></script>
      <!-- Required theme scripts (Do not remove) -->
      <script type="text/javascript" src="../assets/js/theme.js"></script>
      <!-- This script appears only on pages with code examples to provide a copy-to-clipboard functionality. -->
      <script type="text/javascript">
        jQuery("pre.language-html, pre.language-javascript").each(function() {
            var e = '<button class="btn btn-sm btn-primary btn-clipboard" type="button" title="Copy To Clipboard">Copy</button>';
            var wrap = '<div class="code-snippet">';
            jQuery(this).wrap(wrap).before(e);
        });
        jQuery(".btn-clipboard").tooltip().on("mouseleave", function() {
            jQuery(this).tooltip("hide")
        });
        var e = new ClipboardJS(".btn-clipboard",{target:function(e){return e.nextElementSibling}});e.on("success",function(e){jQuery(e.trigger).attr("title","Copied!").tooltip("_fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("_fixTitle");e.clearSelection()});e.on("error",function(e){var t=/Mac/i.test(navigator.userAgent)?"⌘":"Ctrl-";var n="Press "+t+"C to copy";jQuery(e.trigger).attr("title",n).tooltip("_fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("_fixTitle")});
      </script>
  
    </body>
  
  </html>
  