    <!-- spotlight -->
    <div class="tm-block-spotlight uk-block uk-block-primary" id="tm-spotlight">
      <div class="uk-container uk-container-center">
        <section class="tm-spotlight uk-grid" data-uk-grid-match="{target:'> div > .uk-panel'}">
          <div class="uk-width-1-1">
            <div class="uk-panel">
              <h1 class="uk-h2 uk-margin-remove">Elements</h1>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- breadcrumbs -->
    <div class="tm-breadcrumbs">
      <div class="uk-container uk-container-center">
        <div class="uk-hidden-small">
          <ul class="uk-breadcrumb">
            <li><a href="?page=home">Home</a></li>
            <li class="uk-active"><span>Elements</span></li>
          </ul>
        </div>
      </div>
    </div>

  <!-- main content -->
  <div id="tm-main" class="tm-block-main uk-block uk-block-default">
    <div class="uk-container uk-container-center">
      <div class="tm-middle uk-grid" data-uk-grid-match data-uk-grid-margin>
        <div class="tm-main uk-width-medium-1-1">
          <main id="tm-content" class="tm-content">
            <article class="uk-article tm-article">
              <div class="tm-article-wrapper">
                <div class="tm-article-content uk-margin-large-bottom uk-margin-top-remove">
                  <div class="tm-article">
                    <h2 class="uk-module-title" id="accordions">Accordions</h2>

                    <p>To hide or show text in a retractable panel, use the <code>tm-accordion uk-accordion</code> class. You can switch between having a single open item or multiple open items by setting the <code>collapse</code> attribute to true or false.</p><br>

                    <h3 class="uk-module-title">Single open item</h3>

                    <!-- accordion -->
                    <div class="tm-accordion uk-accordion" data-uk-accordion="{collapse:true}">

                      <h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>How can I find happiness?</h3>
                      <div class="uk-accordion-content">
                        Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
                      </div>

                      <h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>Are you available for freelance work?</h3>
                      <div class="uk-accordion-content">
                        Yes I am! just contact me using the contact form on the right and indicate your budget and a detailed scope of your work. For theme customization my hourly rate is $65.
                      </div>

                      <h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>Is there documentation available for this theme?</h3>
                      <div class="uk-accordion-content">
                        A. Yes, a full documentation is available! Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est At vero eos et accusam et justo duo dolores et ea rebum
                      </div>
                    </div>
                    <br>

                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div>
                    <pre>&lt;div class="tm-accordion uk-accordion" data-uk-accordion="{collapse:true}"&gt;

  &lt;h3 class="uk-accordion-title"&gt;&lt;i class="tm-toggle-button uk-float-right"&gt;&lt;/i&gt;Your title goes here&lt;/h3&gt;
  &lt;div class="uk-accordion-content"&gt;
    Your content here
  &lt;/div&gt;

  &lt;h3 class="uk-accordion-title"&gt;&lt;i class="tm-toggle-button uk-float-right"&gt;&lt;/i&gt;Your title goes here&lt;/h3&gt;
  &lt;div class="uk-accordion-content"&gt;
    Your content here
  &lt;/div&gt;
&lt;/div&gt;</pre>

                    <br>
                    <h3 class="uk-module-title">Multiple open items</h3>

                    <!-- accordion -->
                    <div class="tm-accordion uk-accordion" data-uk-accordion="{collapse:false}">

                      <h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>How can I find happiness?</h3>
                      <div class="uk-accordion-content">
                        Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
                      </div>

                      <h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>Are you available for freelance work?</h3>
                      <div class="uk-accordion-content">
                        Yes I am! just contact me using the contact form on the right and indicate your budget and a detailed scope of your work. For theme customization my hourly rate is $65.
                      </div>

                      <h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>Is there documentation available for this theme?</h3>
                      <div class="uk-accordion-content">
                        A. Yes, a full documentation is available! Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est At vero eos et accusam et justo duo dolores et ea rebum
                      </div>
                    </div><br>

                  <div class="uk-badge-note uk-margin-top uk-badge">markup</div>
                  <pre>&lt;div class="tm-accordion uk-accordion" data-uk-accordion="{collapse:false}"&gt;

&lt;h3 class="uk-accordion-title"&gt;&lt;i class="tm-toggle-button uk-float-right"&gt;&lt;/i&gt;Your title goes here&lt;/h3&gt;
&lt;div class="uk-accordion-content"&gt;
  Your content here
&lt;/div&gt;

&lt;h3 class="uk-accordion-title"&gt;&lt;i class="tm-toggle-button uk-float-right"&gt;&lt;/i&gt;Your title goes here&lt;/h3&gt;
&lt;div class="uk-accordion-content"&gt;
  Your content here
&lt;/div&gt;
&lt;/div&gt;</pre>

                  <br>
                  <hr>
                  <br>

                  <h2 class="uk-module-title" id="toggles">Toggles</h2>

                  <p>To hide or show text in a retractable panel, use the <code>tm-toggle uk-accordion</code> class. A good example of how the toggles can be used is in createing a Frequently Asked Question section by using multiple toggles. To have the toggle open on page load, set the 'showfirst' option to <code>true</code>; To have the toggle closed by default, set the 'showfirst' option to <code>false</code></p>

                  <h3 class="uk-module-title">open toggle</h3>

                  <!-- toggle -->
                  <div class="tm-toggle uk-accordion" data-uk-accordion="{showfirst:true,duration:300}">
                    <h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>How can I find happiness?</h3>
                    <div class="uk-accordion-content">Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.</div>
                  </div>

                  <br>

                  <div class="uk-badge-note uk-margin-top uk-badge">markup</div>
                  <pre>&lt;div class="tm-toggle uk-accordion" data-uk-accordion="{showfirst:true,duration:300}"&gt;
  &lt;h3 class="uk-accordion-title"&gt;&lt;i class="tm-toggle-button uk-float-right"&gt;&lt;/i&gt;Your title goes here&lt;/h3&gt;
  &lt;div class="uk-accordion-content"&gt;your content goes here&lt;/div&gt;
&lt;/div&gt;</pre>

                  <br>

                  <h3 class="uk-module-title">closed toggle</h3>

                  <!-- toggle -->
                  <div class="tm-toggle uk-accordion" data-uk-accordion="{showfirst:false,duration:300}">
                    <h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>How can I find happiness?</h3>
                    <div class="uk-accordion-content">Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.</div>
                  </div>

                  <br>

                  <div class="uk-badge-note uk-margin-top uk-badge">markup</div>
                  <pre>&lt;div class="tm-toggle uk-accordion" data-uk-accordion="{showfirst:false,duration:300}"&gt;
  &lt;h3 class="uk-accordion-title"&gt;&lt;i class="tm-toggle-button uk-float-right"&gt;&lt;/i&gt;Your title goes here&lt;/h3&gt;
  &lt;div class="uk-accordion-content"&gt;your content goes here&lt;/div&gt;
&lt;/div&gt;</pre>

                  <br>

                  <h3 class="uk-module-title">Toggle with code</h3>
                  <p>You can also use the toggles to show/hide code snippets by using the <code>tm-toggle-code</code> class and wrapping the content with <code>&lt;code&gt;</code> element</p>

                  <div class="tm-toggle tm-toggle-code uk-accordion" data-uk-accordion="{showfirst:false,duration:300}">
                    <h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>show code</h3>
                    <div class="uk-accordion-content">
                      <code>&lt;ul&gt; &lt;li class="uk-nav-header uk-navbar-nav-subtitle"&gt;Menu Heading&lt;div&gt;Subtitle possible&lt;/div&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;<i>[</i>icon style="icon-envelope-o"/] Menu Icon&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;<i>[</i>icon style="icon-heart-o"/] Another Menu item&lt;/a&gt;&lt;/li&gt; &lt;li class="uk-nav-divider"&gt;&lt;/li&gt; &lt;/ul&gt;</code>
                    </div>
                  </div>

                  <div class="uk-badge-note uk-margin-top uk-badge">markup</div>
                  <pre>&lt;div class="tm-toggle tm-toggle-code uk-accordion" data-uk-accordion="{showfirst:false,duration:300}"&gt;
  &lt;h3 class="uk-accordion-title"&gt;&lt;i class="tm-toggle-button uk-float-right"&gt;&lt;/i&gt;Show code&lt;/h3&gt;
  &lt;div class="uk-accordion-content"&gt;
    &lt;code&gt;your toggle code goes here&lt;/code&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

                  <br>
                  </div>
                </div>
              </div>
            </article>
          </main>
        </div>
      </div>
    </div>
  </div>

    <!-- bottom-d -->
    <div class="tm-block-bottom-d uk-block uk-block-secondary tm-overlay-6" id="tm-bottom-d">
      <div class="uk-container uk-container-center">
        <section class="tm-bottom-d uk-grid" data-uk-grid-margin="" data-uk-grid-match="{target:'> div > .uk-panel'}">
          
          <!-- block -->
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <img alt="logo" height="40" src="images/demo/general/logo-small-white.svg" width="140">
              <p>Sandal LLC.<br>
              Hamburg, Germany<br>
              One Street | Two Drive,<br>
              10th Floor, Site Wing<br>
              <br>
              +49 555 000 000<br>
              hello@sandal.com<br>
              support@sandal.com</p>
            </div>
          </div>

          <!-- block -->
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <h3 class="uk-h3 uk-module-title uk-margin-bottom">Recent Posts</h3>
              <div class="tm-item-block">
                <ul>
                  <li>
                    <a href="?page=news-item">Have faith in your abilities</a> 
                    <div class="uk-margin-small-top">
                      Believe in yourself! Have faith in your abilities! Without a...
                    </div>
                  </li>
                  <li>
                    <a href="?page=news-item">Live in the only moment</a> 
                    <div class="uk-margin-small-top">
                      Always continue the climb. It is possible for you to...
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- block -->
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <h3 class="uk-h3 uk-module-title uk-margin-bottom">Our Work</h3>
              <ul class="uk-list list-icons">
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Gaucho Cafe</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Fontaine Corp</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Saffron Magazine</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Celsius gallery</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Fidelity business</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Lighthouse Church</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Sauna Spa</a></li>
              </ul>
            </div>
          </div>
          
          <!-- block -->
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <h3 class="uk-h3 uk-module-title uk-margin-bottom">Our Values</h3>
              <p>Do not dwell in the past, do not dream of the future, concentrate the mind on now.</p>
              <p>Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.</p>
            </div>
          </div>
        </section>
      </div>
    </div>