
    <!-- 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">Slider</h2>
                    <p> To create a slideset of panels with filters, use the <code>uk-slideset</code> class. The attributes can be used configure the parameters of the slider. See <a href="http://getuikit.com/docs/slideset.html#javascript-options" target="_blank">this table</a> for all the available settings options.</p>
                    <br>
                    <p>You can create filters using the data-uk-filter attribute.</p>
                    <div class="uk-badge-note uk-badge">markup</div> 
                    <pre>&lt;ul class="uk-subnav uk-flex-center"&gt;
  &lt;li class="uk-active" data-uk-filter=""&gt;&lt;a href="#"&gt;All&lt;/a&gt;&lt;/li&gt;
  &lt;li data-uk-filter="design"&gt;&lt;a href="#"&gt;design&lt;/a&gt;&lt;/li&gt;
  &lt;li data-uk-filter="mockup"&gt;&lt;a href="#"&gt;mockup&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
                    <br>
                    <div class="tm-slideset-sandal" data-uk-slideset="{default: 1,small: 2,medium: 2,large: 3, xlarge: 3, animation: 'slide-horizontal'}">
                      <ul class="uk-subnav uk-flex-center">
                        <li data-uk-filter="" class="uk-active"><a href="#">All</a></li>
                        <li data-uk-filter="design"><a href="#">design</a></li>
                        <li data-uk-filter="mockup"><a href="#">mockup</a></li>
                        <li data-uk-filter="illustration"><a href="#">illustration</a></li>
                        <li data-uk-filter="brochure"><a href="#">brochure</a></li>
                        <li data-uk-filter="architecture"><a href="#">architecture</a></li>
                      </ul>
                      <div class="uk-slidenav-position uk-margin">
                        <ul class="uk-grid uk-slideset uk-grid-match uk-flex-center">
                          
                        <!-- slideset panel -->
                          <li data-uk-filter="brochure">
                            <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
                              <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/1.jpg"></a>
                              <div class="uk-text-center uk-panel-teaser">
                                <div class="uk-overlay "> <img src="images/demo/gallery/1.jpg" class="uk-overlay-scale" alt="image" width="605" height="605" url="#">
                                  <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
                                  <div class="tm-overlay-box"></div>
                                </div>
                              </div>
                              <h3 class="uk-panel-title">Your title here</h3> 
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
                          </li>
                          
                          <!-- slideset panel -->
                          <li data-uk-filter="illustration">
                            <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
                              <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/2.jpg"></a>
                              <div class="uk-text-center uk-panel-teaser">
                                <div class="uk-overlay "> <img src="images/demo/gallery/2.jpg" class="uk-overlay-scale" alt="image" width="605" height="605" url="#">
                                  <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
                                  <div class="tm-overlay-box"></div>
                                </div>
                              </div>
                              <h3 class="uk-panel-title">Your title here</h3> 
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
                          </li>
                          
                          <!-- slideset panel -->
                          <li data-uk-filter="mockup">
                            <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
                              <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/3.jpg"></a>
                              <div class="uk-text-center uk-panel-teaser">
                                <div class="uk-overlay "> <img src="images/demo/gallery/3.jpg" class="uk-overlay-scale" alt="image" width="605" height="605" url="#">
                                  <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
                                  <div class="tm-overlay-box"></div>
                                </div>
                              </div>
                              <h3 class="uk-panel-title">Your title here</h3> 
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
                          </li>
                          
                          <!-- slideset panel -->
                          <li data-uk-filter="architecture,illustration">
                            <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
                              <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/4.jpg"></a>
                              <div class="uk-text-center uk-panel-teaser">
                                <div class="uk-overlay "> <img src="images/demo/gallery/4.jpg" class="uk-overlay-scale" alt="image" width="605" height="605" url="#">
                                  <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
                                  <div class="tm-overlay-box"></div>
                                </div>
                              </div>
                              <h3 class="uk-panel-title">Your title here</h3> 
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
                          </li>
                          
                          <!-- slideset panel -->
                          <li data-uk-filter="design">
                            <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
                              <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/5.jpg"></a>
                              <div class="uk-text-center uk-panel-teaser">
                                <div class="uk-overlay "> <img src="images/demo/gallery/5.jpg" class="uk-overlay-scale" alt="image" width="605" height="605" url="#">
                                  <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
                                  <div class="tm-overlay-box"></div>
                                </div>
                              </div>
                              <h3 class="uk-panel-title">Your title here</h3> 
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
                          </li>
                          
                          <!-- slideset panel -->
                          <li data-uk-filter="design">
                            <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
                              <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/6.jpg"></a>
                              <div class="uk-text-center uk-panel-teaser">
                                <div class="uk-overlay "> <img src="images/demo/gallery/6.jpg" class="uk-overlay-scale" alt="image" width="605" height="605" url="#">
                                  <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
                                  <div class="tm-overlay-box"></div>
                                </div>
                              </div>
                              <h3 class="uk-panel-title">Your title here</h3> 
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
                          </li>
                          
                          <!-- slideset panel -->
                          <li data-uk-filter="brochure">
                            <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left">
                              <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/7.jpg"></a>
                              <div class="uk-text-center uk-panel-teaser">
                                <div class="uk-overlay "> <img src="images/demo/gallery/7.jpg" class="uk-overlay-scale" alt="image" width="605" height="605" url="#">
                                  <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div>
                                  <div class="tm-overlay-box"></div>
                                </div>
                              </div>
                              <h3 class="uk-panel-title">Your title here</h3> 
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit </div>
                          </li>
                        </ul>
                        <a href="" class="uk-slidenav uk-slidenav-previous uk-hidden-touch" data-uk-slideset-item="previous"></a>
                        <a href="" class="uk-slidenav uk-slidenav-next uk-hidden-touch" data-uk-slideset-item="next"></a>
                      </div>
                      <ul class="uk-slideset-nav uk-dotnav uk-flex-center uk-margin-bottom-remove">
                        <li data-uk-slideset-item="0">
                          <a></a>
                        </li>
                      </ul>
                    </div>
                    <br>
                    <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;div class="tm-slideset-sandal" data-uk-slideset="{default: 1,small: 2,medium: 2,large: 3, xlarge: 3, animation: 'slide-horizontal'}"&gt;
  &lt;ul class="uk-subnav uk-flex-center"&gt;
    &lt;li class="uk-active" data-uk-filter=""&gt;&lt;a href="#"&gt;All&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-filter="design"&gt;&lt;a href="#"&gt;design&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-filter="mockup"&gt;&lt;a href="#"&gt;mockup&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-filter="illustration"&gt;&lt;a href="#"&gt;illustration&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-filter="brochure"&gt;&lt;a href="#"&gt;brochure&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-filter="architecture"&gt;&lt;a href="#"&gt;architecture&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="uk-slidenav-position uk-margin"&gt;
    &lt;ul class="uk-grid uk-slideset uk-grid-match uk-flex-center"&gt;
      
    &lt;!-- slideset panel --&gt;
      &lt;li data-uk-filter="brochure"&gt;
        &lt;div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"&gt;
          &lt;a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/1.jpg"&gt;&lt;/a&gt;
          &lt;div class="uk-text-center uk-panel-teaser"&gt;
            &lt;div class="uk-overlay "&gt; &lt;img src="images/demo/gallery/1.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"&gt;
              &lt;div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"&gt;&lt;/div&gt;
              &lt;div class="tm-overlay-box"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;h3 class="uk-panel-title"&gt;Butternut ravioli&lt;/h3&gt; 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit &lt;/div&gt;
      &lt;/li&gt;
      
      &lt;!-- slideset panel --&gt;
      &lt;li data-uk-filter="illustration"&gt;
        &lt;div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"&gt;
          &lt;a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/2.jpg"&gt;&lt;/a&gt;
          &lt;div class="uk-text-center uk-panel-teaser"&gt;
            &lt;div class="uk-overlay "&gt; &lt;img src="images/demo/gallery/2.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"&gt;
              &lt;div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"&gt;&lt;/div&gt;
              &lt;div class="tm-overlay-box"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;h3 class="uk-panel-title"&gt;Grilled snapper&lt;/h3&gt; 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit &lt;/div&gt;
      &lt;/li&gt;
      
      &lt;!-- slideset panel --&gt;
      &lt;li data-uk-filter="mockup"&gt;
        &lt;div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"&gt;
          &lt;a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/3.jpg"&gt;&lt;/a&gt;
          &lt;div class="uk-text-center uk-panel-teaser"&gt;
            &lt;div class="uk-overlay "&gt; &lt;img src="images/demo/gallery/3.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"&gt;
              &lt;div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"&gt;&lt;/div&gt;
              &lt;div class="tm-overlay-box"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;h3 class="uk-panel-title"&gt;Roasted mockup&lt;/h3&gt; 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit &lt;/div&gt;
      &lt;/li&gt;
      
      &lt;!-- slideset panel --&gt;
      &lt;li data-uk-filter="architecture,illustration"&gt;
        &lt;div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"&gt;
          &lt;a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/4.jpg"&gt;&lt;/a&gt;
          &lt;div class="uk-text-center uk-panel-teaser"&gt;
            &lt;div class="uk-overlay "&gt; &lt;img src="images/demo/gallery/4.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"&gt;
              &lt;div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"&gt;&lt;/div&gt;
              &lt;div class="tm-overlay-box"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;h3 class="uk-panel-title"&gt;Golden Prawns&lt;/h3&gt; 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit &lt;/div&gt;
      &lt;/li&gt;
      
      &lt;!-- slideset panel --&gt;
      &lt;li data-uk-filter="design"&gt;
        &lt;div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"&gt;
          &lt;a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/5.jpg"&gt;&lt;/a&gt;
          &lt;div class="uk-text-center uk-panel-teaser"&gt;
            &lt;div class="uk-overlay "&gt; &lt;img src="images/demo/gallery/5.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"&gt;
              &lt;div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"&gt;&lt;/div&gt;
              &lt;div class="tm-overlay-box"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;h3 class="uk-panel-title"&gt;French Salad&lt;/h3&gt; 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit &lt;/div&gt;
      &lt;/li&gt;
      
      &lt;!-- slideset panel --&gt;
      &lt;li data-uk-filter="design"&gt;
        &lt;div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"&gt;
          &lt;a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/6.jpg"&gt;&lt;/a&gt;
          &lt;div class="uk-text-center uk-panel-teaser"&gt;
            &lt;div class="uk-overlay "&gt; &lt;img src="images/demo/gallery/6.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"&gt;
              &lt;div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"&gt;&lt;/div&gt;
              &lt;div class="tm-overlay-box"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;h3 class="uk-panel-title"&gt;Focaccia Bread&lt;/h3&gt; 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit &lt;/div&gt;
      &lt;/li&gt;
      
      &lt;!-- slideset panel --&gt;
      &lt;li data-uk-filter="brochure"&gt;
        &lt;div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"&gt;
          &lt;a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/7.jpg"&gt;&lt;/a&gt;
          &lt;div class="uk-text-center uk-panel-teaser"&gt;
            &lt;div class="uk-overlay "&gt; &lt;img src="images/demo/gallery/7.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"&gt;
              &lt;div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"&gt;&lt;/div&gt;
              &lt;div class="tm-overlay-box"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;h3 class="uk-panel-title"&gt;Spaghetti Bolognese&lt;/h3&gt; 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;a href="" class="uk-slidenav uk-slidenav-previous uk-hidden-touch" data-uk-slideset-item="previous"&gt;&lt;/a&gt;
    &lt;a href="" class="uk-slidenav uk-slidenav-next uk-hidden-touch" data-uk-slideset-item="next"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;ul class="uk-slideset-nav uk-dotnav uk-flex-center uk-margin-bottom-remove"&gt;
    &lt;li data-uk-slideset-item="0"&gt;
      &lt;a&gt;&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code>
                      </div>
                    </div>
                  </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>