j1_template 2019.4.8 → 2019.4.10

data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html

@@ -1,20 +1,20 @@
 ---
 layout:                                 page
 
-title:                                  Posts by date
-tagline:                                Check out all blog posts grouped by month
+title:                                  Date
+tagline:                                posts by date
 
 #permalink:                             /pages/private/blog/navigator/archive/dateview/
 noindex:                                true
-resource_options:
 
-  - masthead:
+regenerate:                             false
+
+resource_options:
+  - attic:
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/master_header/chuttersnap-1280x800.png
-          alt:                          chuttersnap-1200x800
-
-regenerate:                             false
+        - url:                          /assets/images/attics/library-1920x1280-bw.jpg
+          alt:                          library-1920x1280-bw
 ---
 
 {% comment %} Liquid procedures

data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html

@@ -1,22 +1,21 @@
 ---
 layout:                                 page
 
-title:                                  Posts by tag
-tagline:                                Check out all blog posts by tag
+title:                                  Tags
+tagline:                                blog posts by tag
 #permalink:                             /pages/private/blog/navigator/archive/tagview/
 
 skip_words:                             [ posts ]
 noindex:                                true
 
-resource_options:
+regenerate:                             false
 
-  - masthead:
+resource_options:
+  - attic:
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/master_header/chuttersnap-1280x800.png
-          alt:                          chuttersnap-1200x800
-
-regenerate:                             false
+        - url:                          /assets/images/attics/library-1920x1280-bw.jpg
+          alt:                          library-1920x1280-bw
 ---
 
 {% comment %} TODO: logic for "letter_group_written == false" to be fixed

data/lib/starter_web/pages/public/blog/navigator/index.html

@@ -1,8 +1,8 @@
 ---
 layout:                                 blog_archive
 
-title:                                  Blog Navigator
-tagline:                                Explore posts this site
+title:                                  Navigator
+tagline:                                explore posts
 description:                            Page Generator
 
 tags:                                   [ Blog, Navigator ]
@@ -14,17 +14,16 @@ pagination:
   enabled:                              true
   permalink:                            /page:num/
 
+regenerate:                             false
+
 resource_options:
   - toccer:
       collapseDepth:                    2
-
-  - masthead:
+  - attic:
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/master_header/chuttersnap-1280x800.png
-          alt:                          chuttersnap-1200x800
-
-regenerate:                             false
+        - url:                          /assets/images/attics/library-1920x1280-bw.jpg
+          alt:                          library-1920x1280-bw
 ---
 
 <pre>

data/lib/starter_web/pages/public/legal/de/300_privacy.adoc

@@ -83,7 +83,7 @@ all cookies left.
 ++++
 <div class="ml-0 mb-0">
   <button type="button" name="revokeCookieConsent" class="btn btn-primary btn-raised btn-flex mb-3">
-    <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-indigo-50 mr-1"></i>
+    <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
     Revoke Cookie Consent
   </button>
 </div>

data/lib/starter_web/pages/public/legal/en/300_privacy.adoc

@@ -111,7 +111,7 @@ all cookies left.
 ++++
 <div class="ml-0 mb-0">
   <button type="button" name="revokeCookieConsent" class="btn btn-primary btn-raised btn-flex mb-3">
-    <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-indigo-50 mr-1"></i>
+    <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
     Revoke Cookie Consent
   </button>
 </div>

data/lib/starter_web/pages/public/panels/service_panel/01_core.adoc

@@ -70,7 +70,7 @@ See examples for Bootstrap’s powerful, responsive navigation header, the
 navbar. Includes support for branding, navigation, and more, including
 support for the collapse plugin.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_navbar}[Bootstrap Docs, {window}].
 
 ==== Navbars
@@ -177,7 +177,7 @@ more with support for multiple sizes, states, and more. Bootstrap includes
 several predefined button styles, each serving its own semantic purpose,
 with a few extras thrown in for more control.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_buttons}[Bootstrap Docs, {window}].
 
 ++++

data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc

@@ -1,10 +1,19 @@
 ---
-title:                                  Theme Previewer
-tagline:                                Check common components for a selected Theme
-description:                            Themes Previewer for J1 Template
-
-tags:                                   [ Bootstrap, Preview]
-index:                                  []
+title:                                  Theme previewer
+tagline:                                common components
+description:                            Themes Previewer for common components of a selected theme.
+
+tags:                                   [ Theme, Previewer]
+
+index:                                   [ 
+                                          Bootstrap, Theme, Preview, Common, 
+                                          Component, Navbars, Buttons, Typography,
+                                          Tables, Forms, Navs, Pills, Breadcrumbs,
+                                          Pagination, Indicators, Alerts, Badges,
+                                          Progress, Container, Jumbotron, List,
+                                          Groups, Cards, Dialogs, Modals,
+                                          Popovers, Tooltips
+                                        ]
 categories:                             [ pages ]
 
 flowtext:                               false
@@ -14,14 +23,15 @@ regenerate:                             false
 
 resources:                              [ tocbot ]
 resource_options:
-  - masthead:
+  - attic:
       opacity:                          0.5
       slides:
-        - url:                          /assets/images/pages/roundtrip/theme-1920.jpg
+        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
           alt:                          Photo by Clem Onojeghuo on Unsplash
-          caption:                      Photo by Clem Onojeghuo on Unsplash
-          caption_href:                 https://unsplash.com/@clemono2
-          caption_color:                rgba_lighten_800
+#         badge:
+#           type:                       unsplash
+#           author:                     Clem Onojeghuo
+#           href:                       https://unsplash.com/@clemono
 ---
 
 // Enable the Liquid Preprocessor
@@ -84,7 +94,7 @@ See examples for Bootstrap’s powerful, responsive navigation header, the
 navbar. Includes support for branding, navigation, and more, including
 support for the collapse plugin.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_navbar}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -189,7 +199,7 @@ more with support for multiple sizes, states, and more. Bootstrap includes
 several predefined button styles, each serving its own semantic purpose,
 with a few extras thrown in for more control.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_buttons}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -351,7 +361,7 @@ For a more inclusive and accessible type scale, it is assuemed that
 the browser default root font-size (typically 16px) so visitors can
 customize their browser defaults as needed.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -439,7 +449,7 @@ Using the most basic table markup, here’s how .table-based tables look in
 Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested
 tables will be styled in the same manner as the parent.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_content_tables}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -524,7 +534,7 @@ of newer input controls like email verification, number selection, and more.
 Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading
 for documentation on required classes, form layout, and more.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_forms}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -671,7 +681,7 @@ for building all types of navigation components. It includes some style
 overrides (for working with lists), some link padding for larger hit areas,
 and basic disabled styling.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_navs}[Bootstrap Docs, window="_blank"].
 
 === Tabs
@@ -942,7 +952,7 @@ button. For proper styling, use one of the eight required contextual classes
 (e.g., .alert-success). For inline dismissal, use the alerts
 https://getbootstrap.com/docs/4.0/components/alerts/#dismissing[jQuery plugin].
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -1001,7 +1011,7 @@ be presented with the content of the badge. Depending on the specific
 situation, these badges may seem like random additional words or numbers
 at the end of a sentence, link, or button.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_badges}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -1043,7 +1053,7 @@ elements, some CSS to set the width, and a few attributes. We don’t use the
 HTML5 <progress> element, ensuring you can stack progress bars, animate them,
 and place text labels over them.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
 
 === Basic
@@ -1179,7 +1189,7 @@ lorem:sentences[2]
 
 Lightweight, flexible component for showcasing hero unit style content.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -1209,7 +1219,7 @@ Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
 List groups are a flexible and powerful component for displaying a series of
 content. Modify and extend them to support just about any content within.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -1294,7 +1304,7 @@ manage to deliver a ton of control and customization. Built with flexbox,
 they offer easy alignment and mix well with other Bootstrap components.
 They have no margin by default, so use spacing utilities as needed.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -1478,7 +1488,7 @@ built with HTML, CSS, and JavaScript. They’re positioned over everything
 else in the document and remove scroll from the <body> so that modal
 content scrolls instead.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_modal}[Bootstrap Docs, window="_blank"].
 
 ==== Base Modal
@@ -1783,7 +1793,7 @@ bootstrap.bundle.js which contains Popper.js in order for popovers to work.
 Note: Popovers require the tooltip plugin as a dependency.
 
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_popovers}[Bootstrap Docs, window="_blank"].
 
 ++++
@@ -1815,7 +1825,7 @@ bootstrap.bundle.js which contains Popper.js in order for tooltips to work.
 Note: Tooltips are opt-in for performance reasons, so you must initialize
 them yourself.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
+pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_tooltips}[Bootstrap Docs, window="_blank"].
 
 ++++

data/lib/starter_web/pages/public/start/_unused/_roundtrip/000_includes/attributes.asciidoc

@@ -0,0 +1,95 @@
+// ~/document_base_folder/000_includes
+//  Asciidoc attribute includes:                 attributes.asciidoc
+// -----------------------------------------------------------------------------
+
+
+// URLs - Internal references and/or sources on the Internet
+// -----------------------------------------------------------------------------
+tag::urls[]
+
+:fontawesome-home:                                https://fontawesome.com/
+:fontawesome-icons:                               https://fontawesome.com/icons?d=gallery
+:fontawesome-get-started:                         https://fontawesome.com/get-started
+
+:jekyll-one-core-doc-color-scheme:                https://support.jekyll-one.com/user_guide/core/color_scheme
+
+:light-gallery-license:                           http://sachinchoolur.github.io/lightGallery/docs/license.html
+
+:asciidoctor-extensions-lab:                      https://github.com/asciidoctor/asciidoctor-extensions-lab
+:asciidoctor-extensions-use-extension:            https://github.com/asciidoctor/asciidoctor-extensions-lab#using-an-extension
+:asciidoctor-user-manual-extensions:              http://asciidoctor.org/docs/user-manual/#extensions
+
+:roundtrip_data_slider_picker:                    /pages/public/start/roundtrip/data_slider_picker
+:roundtrip_image_headers:                         /pages/public/start/roundtrip/image_header
+:roundtrip_image_headers:                         /pages/public/start/roundtrip/image_header
+
+:roundtrip-readme-first:                          /pages/public/start/read_me_first/
+:roundtrip-present-images:                        /pages/public/start/roundtrip/present_images/
+:roundtrip-present-videos:                        /pages/public/start/roundtrip/present_videos/
+:roundtrip-cards:                                 /pages/public/start/roundtrip/cards/
+:roundtrip-typography:                            /pages/public/start/roundtrip/typography/
+:roundtrip-asciidoc-extensions:                   /pages/public/start/roundtrip/asciidoc_extensions/
+:roundtrip-extended-modals:                       /pages/public/start/roundtrip/modals/
+:roundtrip-icon-fonts:                            /pages/public/start/roundtrip/mdi_icon_font/
+:roundtrip-responsive-tables:                     /pages/public/start/roundtrip/responsive_tables/
+:roundtrip-themes:                                /pages/public/start/roundtrip/themes/
+:roundtrip-search-engine:                         /pages/public/start/roundtrip/search_engine/
+
+:github-gist-home:                                https://gist.github.com/
+:asciidoc-extensions-gist-example:                https://gist.github.com/mojavelinux/5546622
+
+:previewer-emoji:                                 /pages/private/previewer/twitter_emoji/
+:previewer-theme:                                 /pages/public/previewer/theme/
+:previewer-mdi:                                   /pages/private/previewer/mdi_font/
+
+:kickstarter-web-in-a-day:                        /pages/public/start/kickstarter/web_in_a_day/intro/
+end::urls[]
+
+// Tags - Asciidoc attributes used internally
+// -----------------------------------------------------------------------------
+tag::tags[]
+
+:window:                                          window="_blank"
+:no-clipboard:                                    noclip
+:figure-caption:                                  Figure
+:images-dir:                                      pages/roundtrip
+:y:                                               icon:check[role="green"]
+:n:                                               icon:times[role="red"]
+:c:                                               icon:file-alt[role="blue"]
+:beginner:                                        icon:battery-quarter[role="md-blue"]
+:inter:                                           icon:battery-half[role="md-blue"]
+:advanced:                                        icon:battery-full[role="md-blue"]
+:emdash:                                          —
+:bullet:                                          •
+:bigbullet:                                       ●
+:bigbigbullet:                                    ⬤
+:dot:                                             .
+:dotdot:                                          ..
+:middot:                                          ·
+
+end::tags[] 
+
+// Data - Data elements for Asciidoctor extensions
+// -----------------------------------------------------------------------------
+tag::data[]
+
+:data-images-standalone:                          "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+:data-images-group:                               "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
+
+end::data[]
+
+
+// Product - Document (e.g release) information
+// -----------------------------------------------------------------------------
+tag::product_info[]
+:license:                                         MIT License
+:revdate:                                         2018
+:revnumber:                                       1.0.0
+end::product_info[]
+
+
+// Author - Author information
+// -----------------------------------------------------------------------------
+tag::authors[]
+:uri-author-juergen-adams                         https://jekyll.one
+end::authors[]

data/lib/starter_web/pages/public/start/_unused/_roundtrip/000_includes/documents/100_gistblock.asciidoc

@@ -0,0 +1,27 @@
+== Github Gist
+
+Code snippets may helpful to support your readers for existing code examples.
+An excellent place for code snippets is Gist at Github. To embed an existing
+gist into your documents, the Asciidoc extention *Gist block* provides the
+block macro `gist::` to do so.
+
+The following gist snippet is taken from {asciidoc-extensions-gist-example}[this example, window="_blank"]:
+
+//[source, adoc]
+----
+.Gist title
+gist::git_address[] <1>
+----
+<1> For `git_address`, {github-gist-home}[, window="_blank"] is prepended automatically
+
+.Example of a gist block
+----
+.Guard setup to live preview AsciiDoc output
+gist::mojavelinux/5546622[]
+----
+
+[.result]
+====
+.Guard setup to live preview AsciiDoc output
+gist::mojavelinux/5546622[]
+====

data/lib/starter_web/pages/public/start/_unused/_roundtrip/000_includes/documents/410_extended_modals_html.asciidoc

@@ -0,0 +1,928 @@
+++++
+<!-- Modal Contact Form -->
+<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
+  <div class="modal-dialog modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Contact Form</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body mb-0">
+        <div class="md-form form-sm">
+          <i class="mdi mdi-dark mdi-email"></i>
+          <input type="text" id="form19" class="form-control">
+          <label for="form19">Your name</label>
+        </div>
+        <div class="md-form form-sm">
+          <i class="mdi mdi-dark mdi-lock"></i>
+          <input type="password" id="form20" class="form-control">
+          <label for="form20">Your email</label>
+        </div>
+        <div class="md-form form-sm">
+          <i class="mdi mdi-dark mdi-tag"></i>
+          <input type="text" id="form21" class="form-control">
+          <label for="form21">Subject</label>
+        </div>
+        <div class="md-form form-sm">
+          <i class="mdi mdi-dark mdi-pencil"></i>
+          <textarea type="text" id="form8" class="md-textarea form-control mb-0"></textarea>
+          <label for="form8">Your message</label>
+        </div>
+        <!-- Footer -->
+        <div class="modal-footer mt-5">
+          <a type="button" class="btn btn-primary-modal btn-text">Send<i class="mdi mdi-dark mdi-send ml-1"></i></a>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Contact Form -->
+
+<!-- Modal Full Height Right Success-->
+<div class="modal fade right" id="fluidModalRightSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Full Height Modal Right Success -->
+
+<!-- Modal Top Info -->
+<div class="modal fade top" id="frameModalTopInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row px-4">
+          <p class="pt-1 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p>
+        </div>
+        <div class="row px-4">
+          <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Top Info -->
+
+<!-- Modal Bottom Success-->
+<div class="modal fade bottom" id="frameModalBottomSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-frame modal-bottom modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!-- Body -->
+      <div class="modal-body">
+        <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">          
+          <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Bottom Success -->
+
+<!-- Side Modal Top Right Success -->
+<div class="modal fade right" id="sideModalTRSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-top-right modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Top Right Success -->
+
+<!-- Side Modal Top Left Info -->
+<div class="modal fade left" id="sideModalTLInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-top-left modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Info</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <img src="/assets/images/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <div class="text-center">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Top Left Info -->
+
+<!-- Side Modal Bottom Right Danger -->
+<div class="modal fade right" id="sideModalBRDangerDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Danger</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3">
+            <p></p>
+            <p class="text-center"><i class="mdi mdi-cart fa-4x"></i></p>
+          </div>
+          <div class="col-9">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
+            <h2 class="notoc"><span class="badge">v52gs1</span></h2>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Bottom Right Danger -->
+
+<!-- Side Modal Bottom Left Warning -->
+<div class="modal fade left" id="sideModalBLWarningDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-bottom-left modal-notify modal-warning" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Warning</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3 text-center">
+            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap" class="img-fluid z-depth-1-half rounded-circle">
+            <div style="height: 10px"></div>
+            <p class="title mb-0">Jane</p>
+            <p class="text-muted " style="font-size: 13px">Consultant</p>
+          </div>
+          <div class="col-9">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
+            <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Bottom Left Warning -->
+
+<!-- Modal Form Login with Avatar Demo -->
+<div class="modal fade" id="modalLoginAvatarDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" class="rounded-circle img-responsive">
+      </div>
+      <!-- Body -->
+      <div class="modal-body text-center mb-1">
+        <h5 class="mt-1 mb-2 notoc">Maria Doe</h5>
+        <div class="md-form ml-0 mr-0">
+          <input type="password" type="text" id="form1" class="form-control ml-0">
+          <label for="form1" class="ml-0">Enter password</label>
+        </div>
+        <div class="text-center">
+          <button class="btn btn-cyan mt-1">Login <i class="mdi mdi-login ml-1"></i></button>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!--END Modal Form Login with Avatar Demo -->
+
+<!--Modal Login-Register Form Demo -->
+<div class="modal fade" id="modalLRFormDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog cascading-modal" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!-- Modal cascading tabs -->
+      <div class="modal-c-tabs">
+        <!-- Nav tabs -->
+        <ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
+          <li class="nav-item">
+            <a class="nav-link active" data-toggle="tab" href="#panel17" role="tab"><i class="mdi mdi-account mr-1"></i> Login</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" data-toggle="tab" href="#panel18" role="tab"><i class="mdi mdi-account-plus mr-1"></i> Register</a>
+          </li>
+        </ul>
+        <!-- Tab panels -->
+        <div class="tab-content">
+          <!--Panel 17-->
+          <div class="tab-pane fade in show active" id="panel17" role="tabpanel">
+            <!-- Body -->
+            <div class="modal-body mb-1">
+              <div class="md-form form-sm">
+                <i class="mdi mdi-email"></i>
+                <input type="text" id="form2" class="form-control">
+                <label for="form2">Your email</label>
+              </div>
+              <div class="md-form form-sm">
+                <i class="mdi mdi-lock"></i>
+                <input type="password" id="form3" class="form-control">
+                <label for="form3">Your password</label>
+              </div>
+              <div class="text-center mt-2">
+                <button class="btn btn-info">Log in <i class="mdi mdi-login ml-1"></i></button>
+              </div>
+            </div>
+            <!-- Footer -->
+            <div class="modal-footer">
+              <div class="options text-center text-md-right mt-1">
+                <p>Not a member? <a href="#" class="blue-text">Sign Up</a></p>
+                <p>Forgot <a href="#" class="blue-text">Password?</a></p>
+              </div>
+              <button type="button" class="btn btn-outline-info ml-auto" data-dismiss="modal">Close <i class="mdi mdi-close ml-1"></i></button>
+            </div>
+          </div>
+          <!--/.Panel 7-->
+          <!--Panel 18-->
+          <div class="tab-pane fade" id="panel18" role="tabpanel">
+            <!-- Body -->
+            <div class="modal-body">
+              <div class="md-form form-sm">
+                <i class="mdi mdi-email"></i>
+                <input type="text" id="form14" class="form-control">
+                <label for="form14">Your email</label>
+              </div>
+              <div class="md-form form-sm">
+                <i class="mdi mdi-lock"></i>
+                <input type="password" id="form5" class="form-control">
+                <label for="form5">Your password</label>
+              </div>
+              <div class="md-form form-sm">
+                <i class="mdi mdi-lock"></i>
+                <input type="password" id="form6" class="form-control">
+                <label for="form6">Repeat password</label>
+              </div>
+              <div class="text-center form-sm mt-2">
+                <button class="btn btn-info">Sign up <i class="mdi mdi-login ml-1"></i></button>
+              </div>
+              <fieldset class="additional-option">
+                <input type="checkbox" id="checkbox1">
+                <label for="checkbox1">Subscribe me to the newsletter</label>
+              </fieldset>
+            </div>
+            <!-- Footer -->
+            <div class="modal-footer">
+              <div class="options text-right">
+                <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
+              </div>
+              <button type="button" class="btn btn-outline-info ml-auto" data-dismiss="modal">Close <i class="mdi mdi-close ml-1"></i></button>
+            </div>
+          </div>
+          <!--/.Panel 8-->
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Login-Register Form Demo -->
+
+<!-- Modal Central Large Info -->
+<div class="modal fade" id="centralModalLGInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Info</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+        <img src="/assets/images/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Central Large Info -->
+
+<!-- Modal Central Fluid Success -->
+<div class="modal fade" id="centralModalFluidSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fluid modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Central Fluid Success -->
+
+<!-- Modal Full Height Right Success Demo -->
+<div class="modal fade right" id="fluidModalRightSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Full Height Right Success Demo -->
+
+<!-- Modal Full Height Left Info Demo -->
+<div class="modal fade left" id="fluidModalLeftInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-full-height modal-left modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Full Height Left Info Demo -->
+
+<!-- Modal Full Height Top Warning Demo -->
+<div class="modal fade top" id="fluidModalTopWarningDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-full-height modal-top modal-notify modal-warning" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Warning</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Full Height Top Warning Demo -->
+
+<!-- Modal Full Height Bottom Danger Demo -->
+<div class="modal fade bottom" id="fluidModalBottomDangerDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-full-height modal-bottom modal-notify modal-danger" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Danger</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Full Height Bottom Danger Demo -->
+
+<!-- Modal Central Success Demo -->
+<div class="modal fade" id="centralModalSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Central Success Demo -->
+
+<!-- Modal Central Info Demo -->
+<div class="modal fade" id="centralModalInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Info</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <img src="/assets/images/attics/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
+        <div class="text-center">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Central Info Demo -->
+
+<!-- Modal Central Danger Demo -->
+<div class="modal fade" id="centralModalDangerDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-notify modal-danger" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Danger</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3">
+            <p></p>
+            <p class="text-center"><i class="mdi mdi-cart fa-4x"></i></p>
+          </div>
+          <div class="col-9">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
+            <h2 class="notoc"><span class="badge">v52gs1</span></h2>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Central Danger Demo -->
+
+<!-- Modal Central Warning Demo -->
+<div class="modal fade" id="centralModalWarningDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-notify modal-warning" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Warning</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3 text-center">
+            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap" class="img-fluid z-depth-1-half rounded-circle">
+            <div style="height: 10px"></div>
+            <p class="title mb-0">Jane</p>
+            <p class="text-muted " style="font-size: 13px">Consultant</p>
+          </div>
+          <div class="col-9">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
+            <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Central Warning Demo -->
+
+<!--Modal New User -->
+<div class="modal fade right" id="modalBFDemoNewUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Welcome to MDBootstrap!</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true" class="white-text">×</span>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3 text-center">
+            <img src="https://mdbootstrap.com/img/Others/Modals/michal.jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap" class="img-fluid z-depth-1-half rounded-circle">
+            <div style="height: 10px"></div>
+            <p class="title mb-0">Michal</p>
+            <p class="text-muted " style="font-size: 13px">MDB Founder</p>
+          </div>
+          <div class="col-9">
+            <p><strong>Hey there!</strong></p>
+            <p>We're happy to see that you're getting involved.</p>
+            <p>How about <strong>we help you in getting more</strong> out of all this awesomeness?</p>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-primary-modal">Start tutorial <i class="mdi mdi-code-tags ml-1"></i></a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal New User -->
+
+<!--Modal 10% Discount -->
+<div class="modal fade right" id="modalBFDemoDiscount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Discount offer: <strong>10% off</strong></p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3">
+            <p></p>
+            <p class="text-center"><i class="mdi mdi-gift mdi-4x"></i></p>
+          </div>
+          <div class="col-9">
+            <p>Sharing is caring. Therefore, from time to time we like to give our visitors small gifts. Today is one of those days.</p>
+            <p><strong>Copy the following code and use it at the checkout. It's valid for <u>one day</u>.</strong></p>
+            <h2 class="notoc"><span class="badge">v52gs1</span></h2>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-primary-modal">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!--END Modal 10% Discount -->
+
+<!--Modal Subscription -->
+<div class="modal fade" id="modalBFDemoSubscription" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog cascading-modal z-depth-1" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header light-blue darken-3 white-text">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">×</span>
+        </button>
+        <h4 class="title notoc"><i class="mdi mdi-newspaper"></i> Don’t miss important updates</h4>
+      </div>
+      <!-- Body -->
+      <div class="modal-body mb-0">
+        <p class="lead text-center">Subscribe to our newsletter</p>
+        <div class="md-form form-sm">
+          <i class="mdi mdi-lock"></i>
+          <input type="password" id="form16" class="form-control">
+          <label for="form16">Your name</label>
+        </div>
+        <div class="md-form form-sm">
+          <i class="mdi mdi-email"></i>
+          <input type="text" id="form17" class="form-control">
+          <label for="form17">Your email</label>
+        </div>
+        <div class="text-center mt-1-half">
+          <button class="btn btn-info">Submit <i class="mdi mdi-check ml-1"></i></button>
+          <button class="btn btn-outline-info" data-dismiss="modal">No, thanks</button>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!--END Modal Subscription -->
+++++