You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by zr...@apache.org on 2019/08/15 08:58:50 UTC

[camel-website] 01/05: chore: redesign and css consolidation

This is an automated email from the ASF dual-hosted git repository.

zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git

commit 3352d32f6e8299fa78c31ae393ac247ceeb01c84
Author: Zoran Regvart <zr...@apache.org>
AuthorDate: Fri Aug 2 21:32:22 2019 +0200

    chore: redesign and css consolidation
    
    Redesigns the front page to use consistent type and adds a few whirls to
    make the page look more interesting.
    
    Also consolidates the CSS used between Antora and the Hugo built parts
    very much a work in progress. The end result would be same exact styling
    that we have in the Antora bits in the Hugo built bits and also
    integration of only the used bits in Bootstrap into the CSS we have.
    
    For this markup also needed to change and some visual differences will
    be noticed between current and the proposed changes here.
    
    A lot of the repeating layouts were removed so that the default layout
    is used instead, thus reducing some of the repetition and easing future
    maintenance.
---
 antora-ui-camel/src/css/base.css                |    8 +
 antora-ui-camel/src/css/doc.css                 |    5 +
 antora-ui-camel/src/css/footer.css              |   54 +-
 antora-ui-camel/src/css/frontpage.css           |  175 +
 antora-ui-camel/src/css/nav.css                 |   20 +
 antora-ui-camel/src/css/responsive.css          | 5102 -----------------------
 antora-ui-camel/src/css/site.css                |    3 +-
 antora-ui-camel/src/css/static.css              |   19 +
 antora-ui-camel/src/css/vars.css                |   11 +-
 antora-ui-camel/src/partials/footer-content.hbs |   85 +-
 content/_index.md                               |  114 +-
 content/community/irc-room.md                   |    4 +-
 content/community/mailing-list.md               |    4 +-
 content/community/team.md                       |    8 +-
 content/community/user-stories.md               |   12 +-
 content/download/_index.md                      |    4 +-
 layouts/_default/single.html                    |   12 +-
 layouts/community/single.html                   |    9 -
 layouts/docs/single.html                        |    9 -
 layouts/download/download.html                  |  227 +-
 layouts/index.html                              |  169 +-
 layouts/news-entry/single.html                  |   26 +-
 layouts/news/list.html                          |   64 +-
 layouts/partials/footer.html                    |   84 +-
 layouts/partials/header.html                    |   60 +-
 layouts/projects/single.html                    |    9 -
 layouts/release-note/single.html                |  132 +-
 layouts/releases/list.html                      |   38 +-
 layouts/security-advisory/single.html           |   56 +-
 layouts/security/list.html                      |   66 +-
 layouts/shortcodes/bootstrap-table.html         |    9 -
 layouts/shortcodes/div.html                     |    4 +
 layouts/shortcodes/section.html                 |    4 +
 layouts/shortcodes/table.html                   |    3 +
 static/img/apache-20.png                        |  Bin 0 -> 53611 bytes
 35 files changed, 882 insertions(+), 5727 deletions(-)

diff --git a/antora-ui-camel/src/css/base.css b/antora-ui-camel/src/css/base.css
index 26fd71e..2fe1eb9 100644
--- a/antora-ui-camel/src/css/base.css
+++ b/antora-ui-camel/src/css/base.css
@@ -71,3 +71,11 @@ button::-moz-focus-inner {
   border: none;
   padding: 0;
 }
+
+mark {
+  background: var(--color-highlight);
+}
+
+.text-center {
+  text-align: center;
+}
diff --git a/antora-ui-camel/src/css/doc.css b/antora-ui-camel/src/css/doc.css
index c6b6ad5..1ba701c 100644
--- a/antora-ui-camel/src/css/doc.css
+++ b/antora-ui-camel/src/css/doc.css
@@ -28,6 +28,7 @@
   text-transform: uppercase;
 }
 
+.static > h1:first-child,
 .doc > h1.page:first-child {
   font-size: calc(36 / var(--rem-base) * 1rem);
   margin: 1.5rem 0;
@@ -616,3 +617,7 @@ kbd,
   font-weight: var(--body-font-weight-bold);
   line-height: calc(1 / 1.1);
 }
+
+.stretch {
+  width: 100%;
+}
diff --git a/antora-ui-camel/src/css/footer.css b/antora-ui-camel/src/css/footer.css
index 6521947..f195247 100644
--- a/antora-ui-camel/src/css/footer.css
+++ b/antora-ui-camel/src/css/footer.css
@@ -1,4 +1,6 @@
-footer.footer {
+footer {
+  display: flex;
+  justify-content: center;
   background-color: var(--footer-background);
   color: var(--footer-font-color);
   font-size: calc(15 / var(--rem-base) * 1rem);
@@ -6,10 +8,56 @@ footer.footer {
   padding: 1.5rem;
 }
 
-.footer p {
+footer .footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: var(--static-max-width--desktop);
+}
+
+footer .footer p {
+  flex-basis: 100%;
   margin: 0.5rem 0;
+  padding: 0 1rem;
 }
 
-.footer a {
+footer .footer a {
   color: var(--footer-link-font-color);
 }
+
+footer .footer figure.logo {
+  flex-direction: row;
+  flex-grow: 1;
+  align-items: flex-start;
+  justify-content: center;
+  text-align: center;
+}
+
+footer .footer figure.logo img {
+  width: 6rem;
+  height: 100%;
+}
+
+footer .footer dl {
+  flex-direction: row;
+  flex-grow: 1;
+  align-items: flex-start;
+  justify-content: center;
+  margin-left: 1rem;
+}
+
+footer .footer dl dt {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+footer .footer dl dd {
+  margin: 0;
+}
+
+@media screen and (max-width: 1023px) {
+  footer .footer figure.logo {
+    display: none;
+  }
+}
diff --git a/antora-ui-camel/src/css/frontpage.css b/antora-ui-camel/src/css/frontpage.css
new file mode 100644
index 0000000..09345e8
--- /dev/null
+++ b/antora-ui-camel/src/css/frontpage.css
@@ -0,0 +1,175 @@
+header.frontpage {
+  font-size: 1.5rem;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  margin: 0 auto;
+  max-width: 60rem;
+}
+
+header.frontpage h1 {
+  font-size: 5rem;
+  font-weight: bolder;
+  color: var(--heading-font-color);
+  margin-top: 5rem;
+  text-align: center;
+  text-transform: none;
+  text-shadow: -1px -1px 1px #fff5, 1px -1px 1px #fff5, -1px 1px 1px #fff5, 1px 1px 1px #fff5;
+}
+
+header.frontpage p {
+  hyphens: none;
+  margin-top: 3rem;
+  text-align: center;
+  line-height: 1.5;
+  color: var(--body-font-color);
+}
+
+.frontpage a:hover {
+  color: var(--color-white);
+}
+
+.frontpage a:active {
+  color: var(--color-white);
+}
+
+.frontpage a.significant {
+  margin: 1rem;
+  padding: 0.7rem 1.5rem;
+  background: var(--color-camel-orange);
+  color: var(--color-white);
+  border-radius: 8px;
+  font-size: 1.2rem;
+  font-weight: bold;
+  outline: none;
+  border: 1px solid var(--color-white);
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.frontpage a.significant:hover {
+  color: var(--color-white);
+}
+
+.frontpage a.significant:active {
+  color: var(--color-white);
+}
+
+header.frontpage svg {
+  position: absolute;
+  top: 4rem;
+  left: 0;
+  width: 100%;
+  height: 14rem;
+  z-index: -1;
+}
+
+section.frontpage {
+  color: var(--doc-font-color);
+  font-size: var(--doc-font-size);
+  line-height: var(--doc-line-height);
+  margin: 0 auto;
+  margin-top: 4rem;
+  max-width: var(--frontpage-max-width);
+}
+
+section.frontpage.columns {
+  display: flex;
+  flex-wrap: wrap;
+  border-top: 1px solid var(--color-smoke-50);
+}
+
+section.frontpage.projects {
+  display: flex;
+  border-top: 1px solid var(--color-smoke-50);
+}
+
+section.frontpage.projects h1 {
+  white-space: nowrap;
+  padding: 1rem 0;
+}
+
+section.frontpage.integrations {
+  display: flex;
+  border-top: 1px solid var(--color-smoke-50);
+}
+
+section.frontpage.integrations h1 {
+  white-space: nowrap;
+  padding: 1rem 0;
+  text-align: left;
+}
+
+section.frontpage.integrations div {
+  padding: 1rem;
+}
+
+section.frontpage.integrations a {
+  color: var(--heading-font-color);
+  font-size: 1.4rem;
+}
+
+section.frontpage h1,
+section.frontpage h2,
+section.frontpage h3,
+section.frontpage h4,
+section.frontpage h5,
+section.frontpage h6 {
+  font-weight: var(--heading-font-weight);
+  color: var(--heading-font-color);
+  line-height: 1.3;
+  margin: 1rem 0 0;
+  text-transform: uppercase;
+}
+
+section.frontpage a {
+  color: var(--link-font-color);
+}
+
+section.frontpage a:hover {
+  color: var(--link_hover-font-color);
+}
+
+section.frontpage h1 {
+  width: 100%;
+  text-align: center;
+}
+
+.box {
+  flex: 50%;
+  padding: 1rem 0;
+}
+
+.box div {
+  padding: 1rem;
+  margin: 1rem;
+  border: 1px solid var(--color-smoke-50);
+  height: 100%;
+}
+
+.box div img {
+  width: 27rem;
+}
+
+.split {
+  flex: 50%;
+  padding: 1rem 0;
+}
+
+.split img {
+  max-width: 100%;
+}
+
+@media screen and (max-width: 1023px) {
+  header.frontpage h1 {
+    font-size: 15vw;
+  }
+
+  header.frontpage svg {
+    display: none;
+  }
+
+  .box {
+    min-width: 51vw;
+  }
+}
diff --git a/antora-ui-camel/src/css/nav.css b/antora-ui-camel/src/css/nav.css
index 8ecf7b5..f1ea431 100644
--- a/antora-ui-camel/src/css/nav.css
+++ b/antora-ui-camel/src/css/nav.css
@@ -267,3 +267,23 @@ html.is-clipped--nav {
   content: " (latest)";
 }
 */
+
+.nav-logo {
+  background-image: url('../img/logo-camel-medium.png');
+  background-repeat: no-repeat;
+  background-size: 160px;
+  background-position-x: 10px;
+  background-position-y: 10px;
+  width: 180px;
+}
+
+.nav-logo span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
diff --git a/antora-ui-camel/src/css/responsive.css b/antora-ui-camel/src/css/responsive.css
deleted file mode 100644
index 724d317..0000000
--- a/antora-ui-camel/src/css/responsive.css
+++ /dev/null
@@ -1,5102 +0,0 @@
-.nav-logo {
-  background-image: url('../img/logo-camel-medium.png');
-  background-repeat: no-repeat;
-  background-size: contain;
-  width: 10rem;
-  margin: 10px 1rem 0.9rem 10px;
-  padding: 0;
-  align-items: flex-start;
-}
-
-.nav-logo span {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-.full-height {
-  min-height: 100vh;
-}
-
-.bg-grey {
-  background-color: #fbfbfb;
-}
-
-.bg-orange {
-  background-color: #ed8225;
-}
-
-.bg-brown {
-  background-color: #6c5d53;
-}
-
-.text-white {
-  color: #fff;
-}
-
-.text-orange {
-  color: #ed8225;
-}
-
-.text-brown {
-  color: #6c5d53;
-}
-
-.logo-big {
-  width: 200px;
-  height: 200px;
-}
-
-.logo-small {
-  width: 100px;
-  height: 100px;
-}
-
-.divider {
-  height: 3px;
-  border-radius: 50px;
-  background: #ed8225;
-  width: 60px;
-}
-
-.primary-btn {
-  outline: 0;
-  border-color: #ed8225;
-  background-color: #ed8225;
-  color: #fff;
-  transition: all 0.5s;
-  border-radius: 500px;
-  font-family: "Open Sans", sans-serif;
-  font-size: 1rem;
-  font-weight: 600;
-  padding: 16px 40px;
-}
-
-.primary-btn a {
-  color: white;
-  text-decoration: none;
-}
-
-.primary-btn a:hover {
-  text-decoration: none;
-}
-
-.button {
-  height: 48px;
-}
-
-img {
-  vertical-align: middle;
-  border-style: none;
-}
-
-svg {
-  overflow: hidden;
-  vertical-align: middle;
-}
-
-button {
-  border-radius: 0;
-}
-
-button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-button,
-input {
-  overflow: visible;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-button,
-html [type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
-  -webkit-appearance: listbox;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
-  margin-bottom: 0.5rem;
-  font-family: inherit;
-  font-weight: bold;
-  line-height: 1.2;
-  color: inherit;
-}
-
-h1,
-.h1 {
-  font-size: 2.5rem;
-}
-
-h2,
-.h2 {
-  font-size: 2rem;
-}
-
-h3,
-.h3 {
-  font-size: 1.75rem;
-}
-
-h4,
-.h4 {
-  font-size: 1.5rem;
-}
-
-h5,
-.h5 {
-  font-size: 1.25rem;
-}
-
-h6,
-.h6 {
-  font-size: 1rem;
-}
-
-.lead {
-  font-size: 1.25rem;
-  font-weight: 300;
-}
-
-.display-1 {
-  font-size: 6rem;
-  font-weight: 300;
-  line-height: 1.2;
-}
-
-.display-2 {
-  font-size: 5.5rem;
-  font-weight: 300;
-  line-height: 1.2;
-}
-
-.display-3 {
-  font-size: 4.5rem;
-  font-weight: 300;
-  line-height: 1.2;
-}
-
-.display-4 {
-  font-size: 3.5rem;
-  font-weight: 300;
-  line-height: 1.2;
-}
-
-hr {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  border: 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-small,
-.small {
-  font-size: 80%;
-  font-weight: 400;
-}
-
-mark,
-.mark {
-  padding: 0.2em;
-  background-color: #fcf8e3;
-}
-
-.list-unstyled {
-  padding-left: 0;
-  list-style: none;
-}
-
-.list-inline {
-  padding-left: 0;
-  list-style: none;
-}
-
-.list-inline-item {
-  display: inline-block;
-}
-
-.list-inline-item:not(:last-child) {
-  margin-right: 0.5rem;
-}
-
-.img-fluid {
-  max-width: 100%;
-  height: auto;
-}
-
-.img-thumbnail {
-  padding: 0.25rem;
-  background-color: #fff;
-  border: 1px solid #dee2e6;
-  border-radius: 0.25rem;
-  max-width: 100%;
-  height: auto;
-}
-
-.container {
-  width: 100%;
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-@media (min-width: 576px) {
-  .container {
-    max-width: 540px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 720px;
-  }
-}
-
-@media (min-width: 992px) {
-  .container {
-    max-width: 960px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .container {
-    max-width: 1140px;
-  }
-}
-
-.container-fluid {
-  width: 100%;
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.row {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -15px;
-  margin-left: -15px;
-}
-
-.no-gutters {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.no-gutters > .col,
-.no-gutters > [class*="col-"] {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.col-1,
-.col-2,
-.col-3,
-.col-4,
-.col-5,
-.col-6,
-.col-7,
-.col-8,
-.col-9,
-.col-10,
-.col-11,
-.col-12,
-.col,
-.col-auto,
-.col-sm-1,
-.col-sm-2,
-.col-sm-3,
-.col-sm-4,
-.col-sm-5,
-.col-sm-6,
-.col-sm-7,
-.col-sm-8,
-.col-sm-9,
-.col-sm-10,
-.col-sm-11,
-.col-sm-12,
-.col-sm,
-.col-sm-auto,
-.col-md-1,
-.col-md-2,
-.col-md-3,
-.col-md-4,
-.col-md-5,
-.col-md-6,
-.col-md-7,
-.col-md-8,
-.col-md-9,
-.col-md-10,
-.col-md-11,
-.col-md-12,
-.col-md,
-.col-md-auto,
-.col-lg-1,
-.col-lg-2,
-.col-lg-3,
-.col-lg-4,
-.col-lg-5,
-.col-lg-6,
-.col-lg-7,
-.col-lg-8,
-.col-lg-9,
-.col-lg-10,
-.col-lg-11,
-.col-lg-12,
-.col-lg,
-.col-lg-auto,
-.col-xl-1,
-.col-xl-2,
-.col-xl-3,
-.col-xl-4,
-.col-xl-5,
-.col-xl-6,
-.col-xl-7,
-.col-xl-8,
-.col-xl-9,
-.col-xl-10,
-.col-xl-11,
-.col-xl-12,
-.col-xl,
-.col-xl-auto {
-  position: relative;
-  width: 100%;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
-.col {
-  -ms-flex-preferred-size: 0;
-  flex-basis: 0;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  max-width: 100%;
-}
-
-.col-auto {
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  width: auto;
-  max-width: none;
-}
-
-.col-1 {
-  -ms-flex: 0 0 8.333333%;
-  flex: 0 0 8.333333%;
-  max-width: 8.333333%;
-}
-
-.col-2 {
-  -ms-flex: 0 0 16.666667%;
-  flex: 0 0 16.666667%;
-  max-width: 16.666667%;
-}
-
-.col-3 {
-  -ms-flex: 0 0 25%;
-  flex: 0 0 25%;
-  max-width: 25%;
-}
-
-.col-4 {
-  -ms-flex: 0 0 33.333333%;
-  flex: 0 0 33.333333%;
-  max-width: 33.333333%;
-}
-
-.col-5 {
-  -ms-flex: 0 0 41.666667%;
-  flex: 0 0 41.666667%;
-  max-width: 41.666667%;
-}
-
-.col-6 {
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
-  max-width: 50%;
-}
-
-.col-7 {
-  -ms-flex: 0 0 58.333333%;
-  flex: 0 0 58.333333%;
-  max-width: 58.333333%;
-}
-
-.col-8 {
-  -ms-flex: 0 0 66.666667%;
-  flex: 0 0 66.666667%;
-  max-width: 66.666667%;
-}
-
-.col-9 {
-  -ms-flex: 0 0 75%;
-  flex: 0 0 75%;
-  max-width: 75%;
-}
-
-.col-10 {
-  -ms-flex: 0 0 83.333333%;
-  flex: 0 0 83.333333%;
-  max-width: 83.333333%;
-}
-
-.col-11 {
-  -ms-flex: 0 0 91.666667%;
-  flex: 0 0 91.666667%;
-  max-width: 91.666667%;
-}
-
-.col-12 {
-  -ms-flex: 0 0 100%;
-  flex: 0 0 100%;
-  max-width: 100%;
-}
-
-.order-first {
-  -ms-flex-order: -1;
-  order: -1;
-}
-
-.order-last {
-  -ms-flex-order: 13;
-  order: 13;
-}
-
-.order-0 {
-  -ms-flex-order: 0;
-  order: 0;
-}
-
-.order-1 {
-  -ms-flex-order: 1;
-  order: 1;
-}
-
-.order-2 {
-  -ms-flex-order: 2;
-  order: 2;
-}
-
-.order-3 {
-  -ms-flex-order: 3;
-  order: 3;
-}
-
-.order-4 {
-  -ms-flex-order: 4;
-  order: 4;
-}
-
-.order-5 {
-  -ms-flex-order: 5;
-  order: 5;
-}
-
-.order-6 {
-  -ms-flex-order: 6;
-  order: 6;
-}
-
-.order-7 {
-  -ms-flex-order: 7;
-  order: 7;
-}
-
-.order-8 {
-  -ms-flex-order: 8;
-  order: 8;
-}
-
-.order-9 {
-  -ms-flex-order: 9;
-  order: 9;
-}
-
-.order-10 {
-  -ms-flex-order: 10;
-  order: 10;
-}
-
-.order-11 {
-  -ms-flex-order: 11;
-  order: 11;
-}
-
-.order-12 {
-  -ms-flex-order: 12;
-  order: 12;
-}
-
-.offset-1 {
-  margin-left: 8.333333%;
-}
-
-.offset-2 {
-  margin-left: 16.666667%;
-}
-
-.offset-3 {
-  margin-left: 25%;
-}
-
-.offset-4 {
-  margin-left: 33.333333%;
-}
-
-.offset-5 {
-  margin-left: 41.666667%;
-}
-
-.offset-6 {
-  margin-left: 50%;
-}
-
-.offset-7 {
-  margin-left: 58.333333%;
-}
-
-.offset-8 {
-  margin-left: 66.666667%;
-}
-
-.offset-9 {
-  margin-left: 75%;
-}
-
-.offset-10 {
-  margin-left: 83.333333%;
-}
-
-.offset-11 {
-  margin-left: 91.666667%;
-}
-
-@media (min-width: 576px) {
-  .col-sm {
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    max-width: 100%;
-  }
-
-  .col-sm-auto {
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: auto;
-    max-width: none;
-  }
-
-  .col-sm-1 {
-    -ms-flex: 0 0 8.333333%;
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
-  }
-
-  .col-sm-2 {
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
-  }
-
-  .col-sm-3 {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-
-  .col-sm-4 {
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
-  }
-
-  .col-sm-5 {
-    -ms-flex: 0 0 41.666667%;
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
-  }
-
-  .col-sm-6 {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-
-  .col-sm-7 {
-    -ms-flex: 0 0 58.333333%;
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
-  }
-
-  .col-sm-8 {
-    -ms-flex: 0 0 66.666667%;
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
-  }
-
-  .col-sm-9 {
-    -ms-flex: 0 0 75%;
-    flex: 0 0 75%;
-    max-width: 75%;
-  }
-
-  .col-sm-10 {
-    -ms-flex: 0 0 83.333333%;
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
-  }
-
-  .col-sm-11 {
-    -ms-flex: 0 0 91.666667%;
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
-  }
-
-  .col-sm-12 {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-
-  .order-sm-first {
-    -ms-flex-order: -1;
-    order: -1;
-  }
-
-  .order-sm-last {
-    -ms-flex-order: 13;
-    order: 13;
-  }
-
-  .order-sm-0 {
-    -ms-flex-order: 0;
-    order: 0;
-  }
-
-  .order-sm-1 {
-    -ms-flex-order: 1;
-    order: 1;
-  }
-
-  .order-sm-2 {
-    -ms-flex-order: 2;
-    order: 2;
-  }
-
-  .order-sm-3 {
-    -ms-flex-order: 3;
-    order: 3;
-  }
-
-  .order-sm-4 {
-    -ms-flex-order: 4;
-    order: 4;
-  }
-
-  .order-sm-5 {
-    -ms-flex-order: 5;
-    order: 5;
-  }
-
-  .order-sm-6 {
-    -ms-flex-order: 6;
-    order: 6;
-  }
-
-  .order-sm-7 {
-    -ms-flex-order: 7;
-    order: 7;
-  }
-
-  .order-sm-8 {
-    -ms-flex-order: 8;
-    order: 8;
-  }
-
-  .order-sm-9 {
-    -ms-flex-order: 9;
-    order: 9;
-  }
-
-  .order-sm-10 {
-    -ms-flex-order: 10;
-    order: 10;
-  }
-
-  .order-sm-11 {
-    -ms-flex-order: 11;
-    order: 11;
-  }
-
-  .order-sm-12 {
-    -ms-flex-order: 12;
-    order: 12;
-  }
-
-  .offset-sm-0 {
-    margin-left: 0;
-  }
-
-  .offset-sm-1 {
-    margin-left: 8.333333%;
-  }
-
-  .offset-sm-2 {
-    margin-left: 16.666667%;
-  }
-
-  .offset-sm-3 {
-    margin-left: 25%;
-  }
-
-  .offset-sm-4 {
-    margin-left: 33.333333%;
-  }
-
-  .offset-sm-5 {
-    margin-left: 41.666667%;
-  }
-
-  .offset-sm-6 {
-    margin-left: 50%;
-  }
-
-  .offset-sm-7 {
-    margin-left: 58.333333%;
-  }
-
-  .offset-sm-8 {
-    margin-left: 66.666667%;
-  }
-
-  .offset-sm-9 {
-    margin-left: 75%;
-  }
-
-  .offset-sm-10 {
-    margin-left: 83.333333%;
-  }
-
-  .offset-sm-11 {
-    margin-left: 91.666667%;
-  }
-}
-
-@media (min-width: 768px) {
-  .col-md {
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    max-width: 100%;
-  }
-
-  .col-md-auto {
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: auto;
-    max-width: none;
-  }
-
-  .col-md-1 {
-    -ms-flex: 0 0 8.333333%;
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
-  }
-
-  .col-md-2 {
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
-  }
-
-  .col-md-3 {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-
-  .col-md-4 {
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
-  }
-
-  .col-md-5 {
-    -ms-flex: 0 0 41.666667%;
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
-  }
-
-  .col-md-6 {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-
-  .col-md-7 {
-    -ms-flex: 0 0 58.333333%;
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
-  }
-
-  .col-md-8 {
-    -ms-flex: 0 0 66.666667%;
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
-  }
-
-  .col-md-9 {
-    -ms-flex: 0 0 75%;
-    flex: 0 0 75%;
-    max-width: 75%;
-  }
-
-  .col-md-10 {
-    -ms-flex: 0 0 83.333333%;
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
-  }
-
-  .col-md-11 {
-    -ms-flex: 0 0 91.666667%;
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
-  }
-
-  .col-md-12 {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-
-  .order-md-first {
-    -ms-flex-order: -1;
-    order: -1;
-  }
-
-  .order-md-last {
-    -ms-flex-order: 13;
-    order: 13;
-  }
-
-  .order-md-0 {
-    -ms-flex-order: 0;
-    order: 0;
-  }
-
-  .order-md-1 {
-    -ms-flex-order: 1;
-    order: 1;
-  }
-
-  .order-md-2 {
-    -ms-flex-order: 2;
-    order: 2;
-  }
-
-  .order-md-3 {
-    -ms-flex-order: 3;
-    order: 3;
-  }
-
-  .order-md-4 {
-    -ms-flex-order: 4;
-    order: 4;
-  }
-
-  .order-md-5 {
-    -ms-flex-order: 5;
-    order: 5;
-  }
-
-  .order-md-6 {
-    -ms-flex-order: 6;
-    order: 6;
-  }
-
-  .order-md-7 {
-    -ms-flex-order: 7;
-    order: 7;
-  }
-
-  .order-md-8 {
-    -ms-flex-order: 8;
-    order: 8;
-  }
-
-  .order-md-9 {
-    -ms-flex-order: 9;
-    order: 9;
-  }
-
-  .order-md-10 {
-    -ms-flex-order: 10;
-    order: 10;
-  }
-
-  .order-md-11 {
-    -ms-flex-order: 11;
-    order: 11;
-  }
-
-  .order-md-12 {
-    -ms-flex-order: 12;
-    order: 12;
-  }
-
-  .offset-md-0 {
-    margin-left: 0;
-  }
-
-  .offset-md-1 {
-    margin-left: 8.333333%;
-  }
-
-  .offset-md-2 {
-    margin-left: 16.666667%;
-  }
-
-  .offset-md-3 {
-    margin-left: 25%;
-  }
-
-  .offset-md-4 {
-    margin-left: 33.333333%;
-  }
-
-  .offset-md-5 {
-    margin-left: 41.666667%;
-  }
-
-  .offset-md-6 {
-    margin-left: 50%;
-  }
-
-  .offset-md-7 {
-    margin-left: 58.333333%;
-  }
-
-  .offset-md-8 {
-    margin-left: 66.666667%;
-  }
-
-  .offset-md-9 {
-    margin-left: 75%;
-  }
-
-  .offset-md-10 {
-    margin-left: 83.333333%;
-  }
-
-  .offset-md-11 {
-    margin-left: 91.666667%;
-  }
-}
-
-@media (min-width: 992px) {
-  .col-lg {
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    max-width: 100%;
-  }
-
-  .col-lg-auto {
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: auto;
-    max-width: none;
-  }
-
-  .col-lg-1 {
-    -ms-flex: 0 0 8.333333%;
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
-  }
-
-  .col-lg-2 {
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
-  }
-
-  .col-lg-3 {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-
-  .col-lg-4 {
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
-  }
-
-  .col-lg-5 {
-    -ms-flex: 0 0 41.666667%;
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
-  }
-
-  .col-lg-6 {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-
-  .col-lg-7 {
-    -ms-flex: 0 0 58.333333%;
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
-  }
-
-  .col-lg-8 {
-    -ms-flex: 0 0 66.666667%;
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
-  }
-
-  .col-lg-9 {
-    -ms-flex: 0 0 75%;
-    flex: 0 0 75%;
-    max-width: 75%;
-  }
-
-  .col-lg-10 {
-    -ms-flex: 0 0 83.333333%;
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
-  }
-
-  .col-lg-11 {
-    -ms-flex: 0 0 91.666667%;
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
-  }
-
-  .col-lg-12 {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-
-  .order-lg-first {
-    -ms-flex-order: -1;
-    order: -1;
-  }
-
-  .order-lg-last {
-    -ms-flex-order: 13;
-    order: 13;
-  }
-
-  .order-lg-0 {
-    -ms-flex-order: 0;
-    order: 0;
-  }
-
-  .order-lg-1 {
-    -ms-flex-order: 1;
-    order: 1;
-  }
-
-  .order-lg-2 {
-    -ms-flex-order: 2;
-    order: 2;
-  }
-
-  .order-lg-3 {
-    -ms-flex-order: 3;
-    order: 3;
-  }
-
-  .order-lg-4 {
-    -ms-flex-order: 4;
-    order: 4;
-  }
-
-  .order-lg-5 {
-    -ms-flex-order: 5;
-    order: 5;
-  }
-
-  .order-lg-6 {
-    -ms-flex-order: 6;
-    order: 6;
-  }
-
-  .order-lg-7 {
-    -ms-flex-order: 7;
-    order: 7;
-  }
-
-  .order-lg-8 {
-    -ms-flex-order: 8;
-    order: 8;
-  }
-
-  .order-lg-9 {
-    -ms-flex-order: 9;
-    order: 9;
-  }
-
-  .order-lg-10 {
-    -ms-flex-order: 10;
-    order: 10;
-  }
-
-  .order-lg-11 {
-    -ms-flex-order: 11;
-    order: 11;
-  }
-
-  .order-lg-12 {
-    -ms-flex-order: 12;
-    order: 12;
-  }
-
-  .offset-lg-0 {
-    margin-left: 0;
-  }
-
-  .offset-lg-1 {
-    margin-left: 8.333333%;
-  }
-
-  .offset-lg-2 {
-    margin-left: 16.666667%;
-  }
-
-  .offset-lg-3 {
-    margin-left: 25%;
-  }
-
-  .offset-lg-4 {
-    margin-left: 33.333333%;
-  }
-
-  .offset-lg-5 {
-    margin-left: 41.666667%;
-  }
-
-  .offset-lg-6 {
-    margin-left: 50%;
-  }
-
-  .offset-lg-7 {
-    margin-left: 58.333333%;
-  }
-
-  .offset-lg-8 {
-    margin-left: 66.666667%;
-  }
-
-  .offset-lg-9 {
-    margin-left: 75%;
-  }
-
-  .offset-lg-10 {
-    margin-left: 83.333333%;
-  }
-
-  .offset-lg-11 {
-    margin-left: 91.666667%;
-  }
-}
-
-@media (min-width: 1200px) {
-  .col-xl {
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    max-width: 100%;
-  }
-
-  .col-xl-auto {
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: auto;
-    max-width: none;
-  }
-
-  .col-xl-1 {
-    -ms-flex: 0 0 8.333333%;
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
-  }
-
-  .col-xl-2 {
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
-  }
-
-  .col-xl-3 {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-
-  .col-xl-4 {
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
-  }
-
-  .col-xl-5 {
-    -ms-flex: 0 0 41.666667%;
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
-  }
-
-  .col-xl-6 {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-
-  .col-xl-7 {
-    -ms-flex: 0 0 58.333333%;
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
-  }
-
-  .col-xl-8 {
-    -ms-flex: 0 0 66.666667%;
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
-  }
-
-  .col-xl-9 {
-    -ms-flex: 0 0 75%;
-    flex: 0 0 75%;
-    max-width: 75%;
-  }
-
-  .col-xl-10 {
-    -ms-flex: 0 0 83.333333%;
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
-  }
-
-  .col-xl-11 {
-    -ms-flex: 0 0 91.666667%;
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
-  }
-
-  .col-xl-12 {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-
-  .order-xl-first {
-    -ms-flex-order: -1;
-    order: -1;
-  }
-
-  .order-xl-last {
-    -ms-flex-order: 13;
-    order: 13;
-  }
-
-  .order-xl-0 {
-    -ms-flex-order: 0;
-    order: 0;
-  }
-
-  .order-xl-1 {
-    -ms-flex-order: 1;
-    order: 1;
-  }
-
-  .order-xl-2 {
-    -ms-flex-order: 2;
-    order: 2;
-  }
-
-  .order-xl-3 {
-    -ms-flex-order: 3;
-    order: 3;
-  }
-
-  .order-xl-4 {
-    -ms-flex-order: 4;
-    order: 4;
-  }
-
-  .order-xl-5 {
-    -ms-flex-order: 5;
-    order: 5;
-  }
-
-  .order-xl-6 {
-    -ms-flex-order: 6;
-    order: 6;
-  }
-
-  .order-xl-7 {
-    -ms-flex-order: 7;
-    order: 7;
-  }
-
-  .order-xl-8 {
-    -ms-flex-order: 8;
-    order: 8;
-  }
-
-  .order-xl-9 {
-    -ms-flex-order: 9;
-    order: 9;
-  }
-
-  .order-xl-10 {
-    -ms-flex-order: 10;
-    order: 10;
-  }
-
-  .order-xl-11 {
-    -ms-flex-order: 11;
-    order: 11;
-  }
-
-  .order-xl-12 {
-    -ms-flex-order: 12;
-    order: 12;
-  }
-
-  .offset-xl-0 {
-    margin-left: 0;
-  }
-
-  .offset-xl-1 {
-    margin-left: 8.333333%;
-  }
-
-  .offset-xl-2 {
-    margin-left: 16.666667%;
-  }
-
-  .offset-xl-3 {
-    margin-left: 25%;
-  }
-
-  .offset-xl-4 {
-    margin-left: 33.333333%;
-  }
-
-  .offset-xl-5 {
-    margin-left: 41.666667%;
-  }
-
-  .offset-xl-6 {
-    margin-left: 50%;
-  }
-
-  .offset-xl-7 {
-    margin-left: 58.333333%;
-  }
-
-  .offset-xl-8 {
-    margin-left: 66.666667%;
-  }
-
-  .offset-xl-9 {
-    margin-left: 75%;
-  }
-
-  .offset-xl-10 {
-    margin-left: 83.333333%;
-  }
-
-  .offset-xl-11 {
-    margin-left: 91.666667%;
-  }
-}
-
-.table {
-  width: 100%;
-  margin-bottom: 1rem;
-  background-color: transparent;
-  border-collapse: collapse;
-}
-
-.table th,
-.table td {
-  padding: 0.75rem;
-  vertical-align: top;
-  border-top: 1px solid #dee2e6;
-}
-
-.table thead th {
-  vertical-align: bottom;
-  border-bottom: 2px solid #dee2e6;
-  font-weight: bold;
-}
-
-.table tbody + tbody {
-  border-top: 2px solid #dee2e6;
-}
-
-.table .table {
-  background-color: #fff;
-}
-
-.table-sm th,
-.table-sm td {
-  padding: 0.3rem;
-}
-
-.table-bordered {
-  border: 1px solid #dee2e6;
-}
-
-.table-bordered th,
-.table-bordered td {
-  border: 1px solid #dee2e6;
-}
-
-.table-bordered thead th,
-.table-bordered thead td {
-  border-bottom-width: 2px;
-}
-
-.table-borderless th,
-.table-borderless td,
-.table-borderless thead th,
-.table-borderless tbody + tbody {
-  border: 0;
-}
-
-.table-striped tbody tr:nth-of-type(odd) {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-.table-hover tbody tr:hover {
-  background-color: rgba(0, 0, 0, 0.075);
-}
-
-.table-primary,
-.table-primary > th,
-.table-primary > td {
-  background-color: #b8daff;
-}
-
-.table-hover .table-primary:hover {
-  background-color: #9fcdff;
-}
-
-.table-hover .table-primary:hover > td,
-.table-hover .table-primary:hover > th {
-  background-color: #9fcdff;
-}
-
-.table-secondary,
-.table-secondary > th,
-.table-secondary > td {
-  background-color: #d6d8db;
-}
-
-.table-hover .table-secondary:hover {
-  background-color: #c8cbcf;
-}
-
-.table-hover .table-secondary:hover > td,
-.table-hover .table-secondary:hover > th {
-  background-color: #c8cbcf;
-}
-
-.table-success,
-.table-success > th,
-.table-success > td {
-  background-color: #c3e6cb;
-}
-
-.table-hover .table-success:hover {
-  background-color: #b1dfbb;
-}
-
-.table-hover .table-success:hover > td,
-.table-hover .table-success:hover > th {
-  background-color: #b1dfbb;
-}
-
-.table-info,
-.table-info > th,
-.table-info > td {
-  background-color: #bee5eb;
-}
-
-.table-hover .table-info:hover {
-  background-color: #abdde5;
-}
-
-.table-hover .table-info:hover > td,
-.table-hover .table-info:hover > th {
-  background-color: #abdde5;
-}
-
-.table-warning,
-.table-warning > th,
-.table-warning > td {
-  background-color: #ffeeba;
-}
-
-.table-hover .table-warning:hover {
-  background-color: #ffe8a1;
-}
-
-.table-hover .table-warning:hover > td,
-.table-hover .table-warning:hover > th {
-  background-color: #ffe8a1;
-}
-
-.table-danger,
-.table-danger > th,
-.table-danger > td {
-  background-color: #f5c6cb;
-}
-
-.table-hover .table-danger:hover {
-  background-color: #f1b0b7;
-}
-
-.table-hover .table-danger:hover > td,
-.table-hover .table-danger:hover > th {
-  background-color: #f1b0b7;
-}
-
-.table-light,
-.table-light > th,
-.table-light > td {
-  background-color: #fdfdfe;
-}
-
-.table-hover .table-light:hover {
-  background-color: #ececf6;
-}
-
-.table-hover .table-light:hover > td,
-.table-hover .table-light:hover > th {
-  background-color: #ececf6;
-}
-
-.table-dark,
-.table-dark > th,
-.table-dark > td {
-  background-color: #c6c8ca;
-}
-
-.table-hover .table-dark:hover {
-  background-color: #b9bbbe;
-}
-
-.table-hover .table-dark:hover > td,
-.table-hover .table-dark:hover > th {
-  background-color: #b9bbbe;
-}
-
-.table-active,
-.table-active > th,
-.table-active > td {
-  background-color: rgba(0, 0, 0, 0.075);
-}
-
-.table-hover .table-active:hover {
-  background-color: rgba(0, 0, 0, 0.075);
-}
-
-.table-hover .table-active:hover > td,
-.table-hover .table-active:hover > th {
-  background-color: rgba(0, 0, 0, 0.075);
-}
-
-.table .thead-dark th {
-  color: #fff;
-  background-color: #212529;
-  border-color: #32383e;
-}
-
-.table .thead-light th {
-  color: #495057;
-  background-color: #e9ecef;
-  border-color: #dee2e6;
-}
-
-.table-dark {
-  color: #fff;
-  background-color: #212529;
-}
-
-.table-dark th,
-.table-dark td,
-.table-dark thead th {
-  border-color: #32383e;
-}
-
-.table-dark.table-bordered {
-  border: 0;
-}
-
-.table-dark.table-striped tbody tr:nth-of-type(odd) {
-  background-color: rgba(255, 255, 255, 0.05);
-}
-
-.table-dark.table-hover tbody tr:hover {
-  background-color: rgba(255, 255, 255, 0.075);
-}
-
-@media (max-width: 575.98px) {
-  .table-responsive-sm {
-    display: block;
-    width: 100%;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-  }
-
-  .table-responsive-sm > .table-bordered {
-    border: 0;
-  }
-}
-
-@media (max-width: 767.98px) {
-  .table-responsive-md {
-    display: block;
-    width: 100%;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-  }
-
-  .table-responsive-md > .table-bordered {
-    border: 0;
-  }
-}
-
-@media (max-width: 991.98px) {
-  .table-responsive-lg {
-    display: block;
-    width: 100%;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-  }
-
-  .table-responsive-lg > .table-bordered {
-    border: 0;
-  }
-}
-
-@media (max-width: 1199.98px) {
-  .table-responsive-xl {
-    display: block;
-    width: 100%;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-  }
-
-  .table-responsive-xl > .table-bordered {
-    border: 0;
-  }
-}
-
-.table-responsive {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-}
-
-.table-responsive > .table-bordered {
-  border: 0;
-}
-
-.card {
-  position: relative;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: #fff;
-  background-clip: border-box;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 0.25rem;
-}
-
-.card > hr {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.card > .list-group:first-child .list-group-item:first-child {
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
-}
-
-.card > .list-group:last-child .list-group-item:last-child {
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-}
-
-.card-body {
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  padding: 1.25rem;
-}
-
-.card-title {
-  margin-bottom: 0.75rem;
-}
-
-.card-subtitle {
-  margin-top: -0.375rem;
-  margin-bottom: 0;
-}
-
-.card-text:last-child {
-  margin-bottom: 0;
-}
-
-.card-link:hover {
-  text-decoration: none;
-}
-
-.card-link + .card-link {
-  margin-left: 1.25rem;
-}
-
-.card-header {
-  padding: 0.75rem 1.25rem;
-  margin-bottom: 0;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-}
-
-.card-header:first-child {
-  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
-}
-
-.card-header + .list-group .list-group-item:first-child {
-  border-top: 0;
-}
-
-.card-footer {
-  padding: 0.75rem 1.25rem;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-top: 1px solid rgba(0, 0, 0, 0.125);
-}
-
-.card-footer:last-child {
-  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
-}
-
-.card-header-tabs {
-  margin-right: -0.625rem;
-  margin-bottom: -0.75rem;
-  margin-left: -0.625rem;
-  border-bottom: 0;
-}
-
-.card-header-pills {
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.card-img-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: 1.25rem;
-}
-
-.card-img {
-  width: 100%;
-  border-radius: calc(0.25rem - 1px);
-}
-
-.card-img-top {
-  width: 100%;
-  border-top-left-radius: calc(0.25rem - 1px);
-  border-top-right-radius: calc(0.25rem - 1px);
-}
-
-.card-img-bottom {
-  width: 100%;
-  border-bottom-right-radius: calc(0.25rem - 1px);
-  border-bottom-left-radius: calc(0.25rem - 1px);
-}
-
-.card-deck {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.card-deck .card {
-  margin-bottom: 15px;
-}
-
-@media (min-width: 576px) {
-  .card-deck {
-    -ms-flex-flow: row wrap;
-    flex-flow: row wrap;
-    margin-right: -15px;
-    margin-left: -15px;
-  }
-
-  .card-deck .card {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex: 1 0 0%;
-    flex: 1 0 0%;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    margin-right: 15px;
-    margin-bottom: 0;
-    margin-left: 15px;
-  }
-}
-
-.card-group {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.card-group > .card {
-  margin-bottom: 15px;
-}
-
-@media (min-width: 576px) {
-  .card-group {
-    -ms-flex-flow: row wrap;
-    flex-flow: row wrap;
-  }
-
-  .card-group > .card {
-    -ms-flex: 1 0 0%;
-    flex: 1 0 0%;
-    margin-bottom: 0;
-  }
-
-  .card-group > .card + .card {
-    margin-left: 0;
-    border-left: 0;
-  }
-
-  .card-group > .card:first-child {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .card-group > .card:first-child .card-img-top,
-  .card-group > .card:first-child .card-header {
-    border-top-right-radius: 0;
-  }
-
-  .card-group > .card:first-child .card-img-bottom,
-  .card-group > .card:first-child .card-footer {
-    border-bottom-right-radius: 0;
-  }
-
-  .card-group > .card:last-child {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .card-group > .card:last-child .card-img-top,
-  .card-group > .card:last-child .card-header {
-    border-top-left-radius: 0;
-  }
-
-  .card-group > .card:last-child .card-img-bottom,
-  .card-group > .card:last-child .card-footer {
-    border-bottom-left-radius: 0;
-  }
-
-  .card-group > .card:only-child {
-    border-radius: 0.25rem;
-  }
-
-  .card-group > .card:only-child .card-img-top,
-  .card-group > .card:only-child .card-header {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-  }
-
-  .card-group > .card:only-child .card-img-bottom,
-  .card-group > .card:only-child .card-footer {
-    border-bottom-right-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-  }
-
-  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) {
-    border-radius: 0;
-  }
-
-  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top,
-  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,
-  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header,
-  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer {
-    border-radius: 0;
-  }
-}
-
-.card-columns .card {
-  margin-bottom: 0.75rem;
-}
-
-@media (min-width: 576px) {
-  .card-columns {
-    -webkit-column-count: 3;
-    -moz-column-count: 3;
-    column-count: 3;
-    -webkit-column-gap: 1.25rem;
-    -moz-column-gap: 1.25rem;
-    column-gap: 1.25rem;
-    orphans: 1;
-    widows: 1;
-  }
-
-  .card-columns .card {
-    display: inline-block;
-    width: 100%;
-  }
-}
-
-.align-baseline {
-  vertical-align: baseline !important;
-}
-
-.align-top {
-  vertical-align: top !important;
-}
-
-.align-middle {
-  vertical-align: middle !important;
-}
-
-.align-bottom {
-  vertical-align: bottom !important;
-}
-
-.align-text-bottom {
-  vertical-align: text-bottom !important;
-}
-
-.align-text-top {
-  vertical-align: text-top !important;
-}
-
-.bg-transparent {
-  background-color: transparent !important;
-}
-
-.border {
-  border: 1px solid #dee2e6 !important;
-}
-
-.border-top {
-  border-top: 1px solid #dee2e6 !important;
-}
-
-.border-right {
-  border-right: 1px solid #dee2e6 !important;
-}
-
-.border-bottom {
-  border-bottom: 1px solid #dee2e6 !important;
-}
-
-.border-left {
-  border-left: 1px solid #dee2e6 !important;
-}
-
-.border-0 {
-  border: 0 !important;
-}
-
-.border-top-0 {
-  border-top: 0 !important;
-}
-
-.border-right-0 {
-  border-right: 0 !important;
-}
-
-.border-bottom-0 {
-  border-bottom: 0 !important;
-}
-
-.border-left-0 {
-  border-left: 0 !important;
-}
-
-.rounded {
-  border-radius: 0.25rem !important;
-}
-
-.rounded-top {
-  border-top-left-radius: 0.25rem !important;
-  border-top-right-radius: 0.25rem !important;
-}
-
-.rounded-right {
-  border-top-right-radius: 0.25rem !important;
-  border-bottom-right-radius: 0.25rem !important;
-}
-
-.rounded-bottom {
-  border-bottom-right-radius: 0.25rem !important;
-  border-bottom-left-radius: 0.25rem !important;
-}
-
-.rounded-left {
-  border-top-left-radius: 0.25rem !important;
-  border-bottom-left-radius: 0.25rem !important;
-}
-
-.rounded-circle {
-  border-radius: 50% !important;
-}
-
-.rounded-0 {
-  border-radius: 0 !important;
-}
-
-.clearfix::after {
-  display: block;
-  clear: both;
-  content: "";
-}
-
-.d-none {
-  display: none !important;
-}
-
-.d-inline {
-  display: inline !important;
-}
-
-.d-inline-block {
-  display: inline-block !important;
-}
-
-.d-block {
-  display: block !important;
-}
-
-.d-table {
-  display: table !important;
-}
-
-.d-table-row {
-  display: table-row !important;
-}
-
-.d-table-cell {
-  display: table-cell !important;
-}
-
-.d-flex {
-  display: -ms-flexbox !important;
-  display: flex !important;
-}
-
-.d-inline-flex {
-  display: -ms-inline-flexbox !important;
-  display: inline-flex !important;
-}
-
-@media (min-width: 576px) {
-  .d-sm-none {
-    display: none !important;
-  }
-
-  .d-sm-inline {
-    display: inline !important;
-  }
-
-  .d-sm-inline-block {
-    display: inline-block !important;
-  }
-
-  .d-sm-block {
-    display: block !important;
-  }
-
-  .d-sm-table {
-    display: table !important;
-  }
-
-  .d-sm-table-row {
-    display: table-row !important;
-  }
-
-  .d-sm-table-cell {
-    display: table-cell !important;
-  }
-
-  .d-sm-flex {
-    display: -ms-flexbox !important;
-    display: flex !important;
-  }
-
-  .d-sm-inline-flex {
-    display: -ms-inline-flexbox !important;
-    display: inline-flex !important;
-  }
-}
-
-@media (min-width: 768px) {
-  .d-md-none {
-    display: none !important;
-  }
-
-  .d-md-inline {
-    display: inline !important;
-  }
-
-  .d-md-inline-block {
-    display: inline-block !important;
-  }
-
-  .d-md-block {
-    display: block !important;
-  }
-
-  .d-md-table {
-    display: table !important;
-  }
-
-  .d-md-table-row {
-    display: table-row !important;
-  }
-
-  .d-md-table-cell {
-    display: table-cell !important;
-  }
-
-  .d-md-flex {
-    display: -ms-flexbox !important;
-    display: flex !important;
-  }
-
-  .d-md-inline-flex {
-    display: -ms-inline-flexbox !important;
-    display: inline-flex !important;
-  }
-}
-
-@media (min-width: 992px) {
-  .d-lg-none {
-    display: none !important;
-  }
-
-  .d-lg-inline {
-    display: inline !important;
-  }
-
-  .d-lg-inline-block {
-    display: inline-block !important;
-  }
-
-  .d-lg-block {
-    display: block !important;
-  }
-
-  .d-lg-table {
-    display: table !important;
-  }
-
-  .d-lg-table-row {
-    display: table-row !important;
-  }
-
-  .d-lg-table-cell {
-    display: table-cell !important;
-  }
-
-  .d-lg-flex {
-    display: -ms-flexbox !important;
-    display: flex !important;
-  }
-
-  .d-lg-inline-flex {
-    display: -ms-inline-flexbox !important;
-    display: inline-flex !important;
-  }
-}
-
-@media (min-width: 1200px) {
-  .d-xl-none {
-    display: none !important;
-  }
-
-  .d-xl-inline {
-    display: inline !important;
-  }
-
-  .d-xl-inline-block {
-    display: inline-block !important;
-  }
-
-  .d-xl-block {
-    display: block !important;
-  }
-
-  .d-xl-table {
-    display: table !important;
-  }
-
-  .d-xl-table-row {
-    display: table-row !important;
-  }
-
-  .d-xl-table-cell {
-    display: table-cell !important;
-  }
-
-  .d-xl-flex {
-    display: -ms-flexbox !important;
-    display: flex !important;
-  }
-
-  .d-xl-inline-flex {
-    display: -ms-inline-flexbox !important;
-    display: inline-flex !important;
-  }
-}
-
-.flex-row {
-  -ms-flex-direction: row !important;
-  flex-direction: row !important;
-}
-
-.flex-column {
-  -ms-flex-direction: column !important;
-  flex-direction: column !important;
-}
-
-.flex-row-reverse {
-  -ms-flex-direction: row-reverse !important;
-  flex-direction: row-reverse !important;
-}
-
-.flex-column-reverse {
-  -ms-flex-direction: column-reverse !important;
-  flex-direction: column-reverse !important;
-}
-
-.flex-wrap {
-  -ms-flex-wrap: wrap !important;
-  flex-wrap: wrap !important;
-}
-
-.flex-nowrap {
-  -ms-flex-wrap: nowrap !important;
-  flex-wrap: nowrap !important;
-}
-
-.flex-wrap-reverse {
-  -ms-flex-wrap: wrap-reverse !important;
-  flex-wrap: wrap-reverse !important;
-}
-
-.flex-fill {
-  -ms-flex: 1 1 auto !important;
-  flex: 1 1 auto !important;
-}
-
-.flex-grow-0 {
-  -ms-flex-positive: 0 !important;
-  flex-grow: 0 !important;
-}
-
-.flex-grow-1 {
-  -ms-flex-positive: 1 !important;
-  flex-grow: 1 !important;
-}
-
-.flex-shrink-0 {
-  -ms-flex-negative: 0 !important;
-  flex-shrink: 0 !important;
-}
-
-.flex-shrink-1 {
-  -ms-flex-negative: 1 !important;
-  flex-shrink: 1 !important;
-}
-
-.justify-content-start {
-  -ms-flex-pack: start !important;
-  justify-content: flex-start !important;
-}
-
-.justify-content-end {
-  -ms-flex-pack: end !important;
-  justify-content: flex-end !important;
-}
-
-.justify-content-center {
-  -ms-flex-pack: center !important;
-  justify-content: center !important;
-}
-
-.justify-content-between {
-  -ms-flex-pack: justify !important;
-  justify-content: space-between !important;
-}
-
-.justify-content-around {
-  -ms-flex-pack: distribute !important;
-  justify-content: space-around !important;
-}
-
-.align-items-start {
-  -ms-flex-align: start !important;
-  align-items: flex-start !important;
-}
-
-.align-items-end {
-  -ms-flex-align: end !important;
-  align-items: flex-end !important;
-}
-
-.align-items-center {
-  -ms-flex-align: center !important;
-  align-items: center !important;
-}
-
-.align-items-baseline {
-  -ms-flex-align: baseline !important;
-  align-items: baseline !important;
-}
-
-.align-items-stretch {
-  -ms-flex-align: stretch !important;
-  align-items: stretch !important;
-}
-
-.align-content-start {
-  -ms-flex-line-pack: start !important;
-  align-content: flex-start !important;
-}
-
-.align-content-end {
-  -ms-flex-line-pack: end !important;
-  align-content: flex-end !important;
-}
-
-.align-content-center {
-  -ms-flex-line-pack: center !important;
-  align-content: center !important;
-}
-
-.align-content-between {
-  -ms-flex-line-pack: justify !important;
-  align-content: space-between !important;
-}
-
-.align-content-around {
-  -ms-flex-line-pack: distribute !important;
-  align-content: space-around !important;
-}
-
-.align-content-stretch {
-  -ms-flex-line-pack: stretch !important;
-  align-content: stretch !important;
-}
-
-.align-self-auto {
-  -ms-flex-item-align: auto !important;
-  align-self: auto !important;
-}
-
-.align-self-start {
-  -ms-flex-item-align: start !important;
-  align-self: flex-start !important;
-}
-
-.align-self-end {
-  -ms-flex-item-align: end !important;
-  align-self: flex-end !important;
-}
-
-.align-self-center {
-  -ms-flex-item-align: center !important;
-  align-self: center !important;
-}
-
-.align-self-baseline {
-  -ms-flex-item-align: baseline !important;
-  align-self: baseline !important;
-}
-
-.align-self-stretch {
-  -ms-flex-item-align: stretch !important;
-  align-self: stretch !important;
-}
-
-@media (min-width: 576px) {
-  .flex-sm-row {
-    -ms-flex-direction: row !important;
-    flex-direction: row !important;
-  }
-
-  .flex-sm-column {
-    -ms-flex-direction: column !important;
-    flex-direction: column !important;
-  }
-
-  .flex-sm-row-reverse {
-    -ms-flex-direction: row-reverse !important;
-    flex-direction: row-reverse !important;
-  }
-
-  .flex-sm-column-reverse {
-    -ms-flex-direction: column-reverse !important;
-    flex-direction: column-reverse !important;
-  }
-
-  .flex-sm-wrap {
-    -ms-flex-wrap: wrap !important;
-    flex-wrap: wrap !important;
-  }
-
-  .flex-sm-nowrap {
-    -ms-flex-wrap: nowrap !important;
-    flex-wrap: nowrap !important;
-  }
-
-  .flex-sm-wrap-reverse {
-    -ms-flex-wrap: wrap-reverse !important;
-    flex-wrap: wrap-reverse !important;
-  }
-
-  .flex-sm-fill {
-    -ms-flex: 1 1 auto !important;
-    flex: 1 1 auto !important;
-  }
-
-  .flex-sm-grow-0 {
-    -ms-flex-positive: 0 !important;
-    flex-grow: 0 !important;
-  }
-
-  .flex-sm-grow-1 {
-    -ms-flex-positive: 1 !important;
-    flex-grow: 1 !important;
-  }
-
-  .flex-sm-shrink-0 {
-    -ms-flex-negative: 0 !important;
-    flex-shrink: 0 !important;
-  }
-
-  .flex-sm-shrink-1 {
-    -ms-flex-negative: 1 !important;
-    flex-shrink: 1 !important;
-  }
-
-  .justify-content-sm-start {
-    -ms-flex-pack: start !important;
-    justify-content: flex-start !important;
-  }
-
-  .justify-content-sm-end {
-    -ms-flex-pack: end !important;
-    justify-content: flex-end !important;
-  }
-
-  .justify-content-sm-center {
-    -ms-flex-pack: center !important;
-    justify-content: center !important;
-  }
-
-  .justify-content-sm-between {
-    -ms-flex-pack: justify !important;
-    justify-content: space-between !important;
-  }
-
-  .justify-content-sm-around {
-    -ms-flex-pack: distribute !important;
-    justify-content: space-around !important;
-  }
-
-  .align-items-sm-start {
-    -ms-flex-align: start !important;
-    align-items: flex-start !important;
-  }
-
-  .align-items-sm-end {
-    -ms-flex-align: end !important;
-    align-items: flex-end !important;
-  }
-
-  .align-items-sm-center {
-    -ms-flex-align: center !important;
-    align-items: center !important;
-  }
-
-  .align-items-sm-baseline {
-    -ms-flex-align: baseline !important;
-    align-items: baseline !important;
-  }
-
-  .align-items-sm-stretch {
-    -ms-flex-align: stretch !important;
-    align-items: stretch !important;
-  }
-
-  .align-content-sm-start {
-    -ms-flex-line-pack: start !important;
-    align-content: flex-start !important;
-  }
-
-  .align-content-sm-end {
-    -ms-flex-line-pack: end !important;
-    align-content: flex-end !important;
-  }
-
-  .align-content-sm-center {
-    -ms-flex-line-pack: center !important;
-    align-content: center !important;
-  }
-
-  .align-content-sm-between {
-    -ms-flex-line-pack: justify !important;
-    align-content: space-between !important;
-  }
-
-  .align-content-sm-around {
-    -ms-flex-line-pack: distribute !important;
-    align-content: space-around !important;
-  }
-
-  .align-content-sm-stretch {
-    -ms-flex-line-pack: stretch !important;
-    align-content: stretch !important;
-  }
-
-  .align-self-sm-auto {
-    -ms-flex-item-align: auto !important;
-    align-self: auto !important;
-  }
-
-  .align-self-sm-start {
-    -ms-flex-item-align: start !important;
-    align-self: flex-start !important;
-  }
-
-  .align-self-sm-end {
-    -ms-flex-item-align: end !important;
-    align-self: flex-end !important;
-  }
-
-  .align-self-sm-center {
-    -ms-flex-item-align: center !important;
-    align-self: center !important;
-  }
-
-  .align-self-sm-baseline {
-    -ms-flex-item-align: baseline !important;
-    align-self: baseline !important;
-  }
-
-  .align-self-sm-stretch {
-    -ms-flex-item-align: stretch !important;
-    align-self: stretch !important;
-  }
-}
-
-@media (min-width: 768px) {
-  .flex-md-row {
-    -ms-flex-direction: row !important;
-    flex-direction: row !important;
-  }
-
-  .flex-md-column {
-    -ms-flex-direction: column !important;
-    flex-direction: column !important;
-  }
-
-  .flex-md-row-reverse {
-    -ms-flex-direction: row-reverse !important;
-    flex-direction: row-reverse !important;
-  }
-
-  .flex-md-column-reverse {
-    -ms-flex-direction: column-reverse !important;
-    flex-direction: column-reverse !important;
-  }
-
-  .flex-md-wrap {
-    -ms-flex-wrap: wrap !important;
-    flex-wrap: wrap !important;
-  }
-
-  .flex-md-nowrap {
-    -ms-flex-wrap: nowrap !important;
-    flex-wrap: nowrap !important;
-  }
-
-  .flex-md-wrap-reverse {
-    -ms-flex-wrap: wrap-reverse !important;
-    flex-wrap: wrap-reverse !important;
-  }
-
-  .flex-md-fill {
-    -ms-flex: 1 1 auto !important;
-    flex: 1 1 auto !important;
-  }
-
-  .flex-md-grow-0 {
-    -ms-flex-positive: 0 !important;
-    flex-grow: 0 !important;
-  }
-
-  .flex-md-grow-1 {
-    -ms-flex-positive: 1 !important;
-    flex-grow: 1 !important;
-  }
-
-  .flex-md-shrink-0 {
-    -ms-flex-negative: 0 !important;
-    flex-shrink: 0 !important;
-  }
-
-  .flex-md-shrink-1 {
-    -ms-flex-negative: 1 !important;
-    flex-shrink: 1 !important;
-  }
-
-  .justify-content-md-start {
-    -ms-flex-pack: start !important;
-    justify-content: flex-start !important;
-  }
-
-  .justify-content-md-end {
-    -ms-flex-pack: end !important;
-    justify-content: flex-end !important;
-  }
-
-  .justify-content-md-center {
-    -ms-flex-pack: center !important;
-    justify-content: center !important;
-  }
-
-  .justify-content-md-between {
-    -ms-flex-pack: justify !important;
-    justify-content: space-between !important;
-  }
-
-  .justify-content-md-around {
-    -ms-flex-pack: distribute !important;
-    justify-content: space-around !important;
-  }
-
-  .align-items-md-start {
-    -ms-flex-align: start !important;
-    align-items: flex-start !important;
-  }
-
-  .align-items-md-end {
-    -ms-flex-align: end !important;
-    align-items: flex-end !important;
-  }
-
-  .align-items-md-center {
-    -ms-flex-align: center !important;
-    align-items: center !important;
-  }
-
-  .align-items-md-baseline {
-    -ms-flex-align: baseline !important;
-    align-items: baseline !important;
-  }
-
-  .align-items-md-stretch {
-    -ms-flex-align: stretch !important;
-    align-items: stretch !important;
-  }
-
-  .align-content-md-start {
-    -ms-flex-line-pack: start !important;
-    align-content: flex-start !important;
-  }
-
-  .align-content-md-end {
-    -ms-flex-line-pack: end !important;
-    align-content: flex-end !important;
-  }
-
-  .align-content-md-center {
-    -ms-flex-line-pack: center !important;
-    align-content: center !important;
-  }
-
-  .align-content-md-between {
-    -ms-flex-line-pack: justify !important;
-    align-content: space-between !important;
-  }
-
-  .align-content-md-around {
-    -ms-flex-line-pack: distribute !important;
-    align-content: space-around !important;
-  }
-
-  .align-content-md-stretch {
-    -ms-flex-line-pack: stretch !important;
-    align-content: stretch !important;
-  }
-
-  .align-self-md-auto {
-    -ms-flex-item-align: auto !important;
-    align-self: auto !important;
-  }
-
-  .align-self-md-start {
-    -ms-flex-item-align: start !important;
-    align-self: flex-start !important;
-  }
-
-  .align-self-md-end {
-    -ms-flex-item-align: end !important;
-    align-self: flex-end !important;
-  }
-
-  .align-self-md-center {
-    -ms-flex-item-align: center !important;
-    align-self: center !important;
-  }
-
-  .align-self-md-baseline {
-    -ms-flex-item-align: baseline !important;
-    align-self: baseline !important;
-  }
-
-  .align-self-md-stretch {
-    -ms-flex-item-align: stretch !important;
-    align-self: stretch !important;
-  }
-}
-
-@media (min-width: 992px) {
-  .flex-lg-row {
-    -ms-flex-direction: row !important;
-    flex-direction: row !important;
-  }
-
-  .flex-lg-column {
-    -ms-flex-direction: column !important;
-    flex-direction: column !important;
-  }
-
-  .flex-lg-row-reverse {
-    -ms-flex-direction: row-reverse !important;
-    flex-direction: row-reverse !important;
-  }
-
-  .flex-lg-column-reverse {
-    -ms-flex-direction: column-reverse !important;
-    flex-direction: column-reverse !important;
-  }
-
-  .flex-lg-wrap {
-    -ms-flex-wrap: wrap !important;
-    flex-wrap: wrap !important;
-  }
-
-  .flex-lg-nowrap {
-    -ms-flex-wrap: nowrap !important;
-    flex-wrap: nowrap !important;
-  }
-
-  .flex-lg-wrap-reverse {
-    -ms-flex-wrap: wrap-reverse !important;
-    flex-wrap: wrap-reverse !important;
-  }
-
-  .flex-lg-fill {
-    -ms-flex: 1 1 auto !important;
-    flex: 1 1 auto !important;
-  }
-
-  .flex-lg-grow-0 {
-    -ms-flex-positive: 0 !important;
-    flex-grow: 0 !important;
-  }
-
-  .flex-lg-grow-1 {
-    -ms-flex-positive: 1 !important;
-    flex-grow: 1 !important;
-  }
-
-  .flex-lg-shrink-0 {
-    -ms-flex-negative: 0 !important;
-    flex-shrink: 0 !important;
-  }
-
-  .flex-lg-shrink-1 {
-    -ms-flex-negative: 1 !important;
-    flex-shrink: 1 !important;
-  }
-
-  .justify-content-lg-start {
-    -ms-flex-pack: start !important;
-    justify-content: flex-start !important;
-  }
-
-  .justify-content-lg-end {
-    -ms-flex-pack: end !important;
-    justify-content: flex-end !important;
-  }
-
-  .justify-content-lg-center {
-    -ms-flex-pack: center !important;
-    justify-content: center !important;
-  }
-
-  .justify-content-lg-between {
-    -ms-flex-pack: justify !important;
-    justify-content: space-between !important;
-  }
-
-  .justify-content-lg-around {
-    -ms-flex-pack: distribute !important;
-    justify-content: space-around !important;
-  }
-
-  .align-items-lg-start {
-    -ms-flex-align: start !important;
-    align-items: flex-start !important;
-  }
-
-  .align-items-lg-end {
-    -ms-flex-align: end !important;
-    align-items: flex-end !important;
-  }
-
-  .align-items-lg-center {
-    -ms-flex-align: center !important;
-    align-items: center !important;
-  }
-
-  .align-items-lg-baseline {
-    -ms-flex-align: baseline !important;
-    align-items: baseline !important;
-  }
-
-  .align-items-lg-stretch {
-    -ms-flex-align: stretch !important;
-    align-items: stretch !important;
-  }
-
-  .align-content-lg-start {
-    -ms-flex-line-pack: start !important;
-    align-content: flex-start !important;
-  }
-
-  .align-content-lg-end {
-    -ms-flex-line-pack: end !important;
-    align-content: flex-end !important;
-  }
-
-  .align-content-lg-center {
-    -ms-flex-line-pack: center !important;
-    align-content: center !important;
-  }
-
-  .align-content-lg-between {
-    -ms-flex-line-pack: justify !important;
-    align-content: space-between !important;
-  }
-
-  .align-content-lg-around {
-    -ms-flex-line-pack: distribute !important;
-    align-content: space-around !important;
-  }
-
-  .align-content-lg-stretch {
-    -ms-flex-line-pack: stretch !important;
-    align-content: stretch !important;
-  }
-
-  .align-self-lg-auto {
-    -ms-flex-item-align: auto !important;
-    align-self: auto !important;
-  }
-
-  .align-self-lg-start {
-    -ms-flex-item-align: start !important;
-    align-self: flex-start !important;
-  }
-
-  .align-self-lg-end {
-    -ms-flex-item-align: end !important;
-    align-self: flex-end !important;
-  }
-
-  .align-self-lg-center {
-    -ms-flex-item-align: center !important;
-    align-self: center !important;
-  }
-
-  .align-self-lg-baseline {
-    -ms-flex-item-align: baseline !important;
-    align-self: baseline !important;
-  }
-
-  .align-self-lg-stretch {
-    -ms-flex-item-align: stretch !important;
-    align-self: stretch !important;
-  }
-}
-
-@media (min-width: 1200px) {
-  .flex-xl-row {
-    -ms-flex-direction: row !important;
-    flex-direction: row !important;
-  }
-
-  .flex-xl-column {
-    -ms-flex-direction: column !important;
-    flex-direction: column !important;
-  }
-
-  .flex-xl-row-reverse {
-    -ms-flex-direction: row-reverse !important;
-    flex-direction: row-reverse !important;
-  }
-
-  .flex-xl-column-reverse {
-    -ms-flex-direction: column-reverse !important;
-    flex-direction: column-reverse !important;
-  }
-
-  .flex-xl-wrap {
-    -ms-flex-wrap: wrap !important;
-    flex-wrap: wrap !important;
-  }
-
-  .flex-xl-nowrap {
-    -ms-flex-wrap: nowrap !important;
-    flex-wrap: nowrap !important;
-  }
-
-  .flex-xl-wrap-reverse {
-    -ms-flex-wrap: wrap-reverse !important;
-    flex-wrap: wrap-reverse !important;
-  }
-
-  .flex-xl-fill {
-    -ms-flex: 1 1 auto !important;
-    flex: 1 1 auto !important;
-  }
-
-  .flex-xl-grow-0 {
-    -ms-flex-positive: 0 !important;
-    flex-grow: 0 !important;
-  }
-
-  .flex-xl-grow-1 {
-    -ms-flex-positive: 1 !important;
-    flex-grow: 1 !important;
-  }
-
-  .flex-xl-shrink-0 {
-    -ms-flex-negative: 0 !important;
-    flex-shrink: 0 !important;
-  }
-
-  .flex-xl-shrink-1 {
-    -ms-flex-negative: 1 !important;
-    flex-shrink: 1 !important;
-  }
-
-  .justify-content-xl-start {
-    -ms-flex-pack: start !important;
-    justify-content: flex-start !important;
-  }
-
-  .justify-content-xl-end {
-    -ms-flex-pack: end !important;
-    justify-content: flex-end !important;
-  }
-
-  .justify-content-xl-center {
-    -ms-flex-pack: center !important;
-    justify-content: center !important;
-  }
-
-  .justify-content-xl-between {
-    -ms-flex-pack: justify !important;
-    justify-content: space-between !important;
-  }
-
-  .justify-content-xl-around {
-    -ms-flex-pack: distribute !important;
-    justify-content: space-around !important;
-  }
-
-  .align-items-xl-start {
-    -ms-flex-align: start !important;
-    align-items: flex-start !important;
-  }
-
-  .align-items-xl-end {
-    -ms-flex-align: end !important;
-    align-items: flex-end !important;
-  }
-
-  .align-items-xl-center {
-    -ms-flex-align: center !important;
-    align-items: center !important;
-  }
-
-  .align-items-xl-baseline {
-    -ms-flex-align: baseline !important;
-    align-items: baseline !important;
-  }
-
-  .align-items-xl-stretch {
-    -ms-flex-align: stretch !important;
-    align-items: stretch !important;
-  }
-
-  .align-content-xl-start {
-    -ms-flex-line-pack: start !important;
-    align-content: flex-start !important;
-  }
-
-  .align-content-xl-end {
-    -ms-flex-line-pack: end !important;
-    align-content: flex-end !important;
-  }
-
-  .align-content-xl-center {
-    -ms-flex-line-pack: center !important;
-    align-content: center !important;
-  }
-
-  .align-content-xl-between {
-    -ms-flex-line-pack: justify !important;
-    align-content: space-between !important;
-  }
-
-  .align-content-xl-around {
-    -ms-flex-line-pack: distribute !important;
-    align-content: space-around !important;
-  }
-
-  .align-content-xl-stretch {
-    -ms-flex-line-pack: stretch !important;
-    align-content: stretch !important;
-  }
-
-  .align-self-xl-auto {
-    -ms-flex-item-align: auto !important;
-    align-self: auto !important;
-  }
-
-  .align-self-xl-start {
-    -ms-flex-item-align: start !important;
-    align-self: flex-start !important;
-  }
-
-  .align-self-xl-end {
-    -ms-flex-item-align: end !important;
-    align-self: flex-end !important;
-  }
-
-  .align-self-xl-center {
-    -ms-flex-item-align: center !important;
-    align-self: center !important;
-  }
-
-  .align-self-xl-baseline {
-    -ms-flex-item-align: baseline !important;
-    align-self: baseline !important;
-  }
-
-  .align-self-xl-stretch {
-    -ms-flex-item-align: stretch !important;
-    align-self: stretch !important;
-  }
-}
-
-.float-left {
-  float: left !important;
-}
-
-.float-right {
-  float: right !important;
-}
-
-.float-none {
-  float: none !important;
-}
-
-@media (min-width: 576px) {
-  .float-sm-left {
-    float: left !important;
-  }
-
-  .float-sm-right {
-    float: right !important;
-  }
-
-  .float-sm-none {
-    float: none !important;
-  }
-}
-
-@media (min-width: 768px) {
-  .float-md-left {
-    float: left !important;
-  }
-
-  .float-md-right {
-    float: right !important;
-  }
-
-  .float-md-none {
-    float: none !important;
-  }
-}
-
-@media (min-width: 992px) {
-  .float-lg-left {
-    float: left !important;
-  }
-
-  .float-lg-right {
-    float: right !important;
-  }
-
-  .float-lg-none {
-    float: none !important;
-  }
-}
-
-@media (min-width: 1200px) {
-  .float-xl-left {
-    float: left !important;
-  }
-
-  .float-xl-right {
-    float: right !important;
-  }
-
-  .float-xl-none {
-    float: none !important;
-  }
-}
-
-.position-static {
-  position: static !important;
-}
-
-.position-relative {
-  position: relative !important;
-}
-
-.position-absolute {
-  position: absolute !important;
-}
-
-.position-fixed {
-  position: fixed !important;
-}
-
-.position-sticky {
-  position: -webkit-sticky !important;
-  position: sticky !important;
-}
-
-.fixed-top {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 1030;
-}
-
-.fixed-bottom {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1030;
-}
-
-@supports ((position: -webkit-sticky) or (position: sticky)) {
-  .sticky-top {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    z-index: 1020;
-  }
-}
-
-.shadow-sm {
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
-}
-
-.shadow {
-  box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.075) !important;
-}
-
-.shadow-lg {
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
-}
-
-.shadow-none {
-  box-shadow: none !important;
-}
-
-.w-25 {
-  width: 25% !important;
-}
-
-.w-50 {
-  width: 50% !important;
-}
-
-.w-75 {
-  width: 75% !important;
-}
-
-.w-100 {
-  width: 100% !important;
-}
-
-.w-auto {
-  width: auto !important;
-}
-
-.h-25 {
-  height: 25% !important;
-}
-
-.h-50 {
-  height: 50% !important;
-}
-
-.h-75 {
-  height: 75% !important;
-}
-
-.h-100 {
-  height: 100% !important;
-}
-
-.h-auto {
-  height: auto !important;
-}
-
-.mw-100 {
-  max-width: 100% !important;
-}
-
-.mh-100 {
-  max-height: 100% !important;
-}
-
-.m-0 {
-  margin: 0 !important;
-}
-
-.mt-0,
-.my-0 {
-  margin-top: 0 !important;
-}
-
-.mr-0,
-.mx-0 {
-  margin-right: 0 !important;
-}
-
-.mb-0,
-.my-0 {
-  margin-bottom: 0 !important;
-}
-
-.ml-0,
-.mx-0 {
-  margin-left: 0 !important;
-}
-
-.m-1 {
-  margin: 0.25rem !important;
-}
-
-.mt-1,
-.my-1 {
-  margin-top: 0.25rem !important;
-}
-
-.mr-1,
-.mx-1 {
-  margin-right: 0.25rem !important;
-}
-
-.mb-1,
-.my-1 {
-  margin-bottom: 0.25rem !important;
-}
-
-.ml-1,
-.mx-1 {
-  margin-left: 0.25rem !important;
-}
-
-.m-2 {
-  margin: 0.5rem !important;
-}
-
-.mt-2,
-.my-2 {
-  margin-top: 0.5rem !important;
-}
-
-.mr-2,
-.mx-2 {
-  margin-right: 0.5rem !important;
-}
-
-.mb-2,
-.my-2 {
-  margin-bottom: 0.5rem !important;
-}
-
-.ml-2,
-.mx-2 {
-  margin-left: 0.5rem !important;
-}
-
-.m-3 {
-  margin: 1rem !important;
-}
-
-.mt-3,
-.my-3 {
-  margin-top: 1rem !important;
-}
-
-.mr-3,
-.mx-3 {
-  margin-right: 1rem !important;
-}
-
-.mb-3,
-.my-3 {
-  margin-bottom: 1rem !important;
-}
-
-.ml-3,
-.mx-3 {
-  margin-left: 1rem !important;
-}
-
-.m-4 {
-  margin: 1.5rem !important;
-}
-
-.mt-4,
-.my-4 {
-  margin-top: 1.5rem !important;
-}
-
-.mr-4,
-.mx-4 {
-  margin-right: 1.5rem !important;
-}
-
-.mb-4,
-.my-4 {
-  margin-bottom: 1.5rem !important;
-}
-
-.ml-4,
-.mx-4 {
-  margin-left: 1.5rem !important;
-}
-
-.m-5 {
-  margin: 3rem !important;
-}
-
-.mt-5,
-.my-5 {
-  margin-top: 3rem !important;
-}
-
-.mr-5,
-.mx-5 {
-  margin-right: 3rem !important;
-}
-
-.mb-5,
-.my-5 {
-  margin-bottom: 3rem !important;
-}
-
-.ml-5,
-.mx-5 {
-  margin-left: 3rem !important;
-}
-
-.p-0 {
-  padding: 0 !important;
-}
-
-.pt-0,
-.py-0 {
-  padding-top: 0 !important;
-}
-
-.pr-0,
-.px-0 {
-  padding-right: 0 !important;
-}
-
-.pb-0,
-.py-0 {
-  padding-bottom: 0 !important;
-}
-
-.pl-0,
-.px-0 {
-  padding-left: 0 !important;
-}
-
-.p-1 {
-  padding: 0.25rem !important;
-}
-
-.pt-1,
-.py-1 {
-  padding-top: 0.25rem !important;
-}
-
-.pr-1,
-.px-1 {
-  padding-right: 0.25rem !important;
-}
-
-.pb-1,
-.py-1 {
-  padding-bottom: 0.25rem !important;
-}
-
-.pl-1,
-.px-1 {
-  padding-left: 0.25rem !important;
-}
-
-.p-2 {
-  padding: 0.5rem !important;
-}
-
-.pt-2,
-.py-2 {
-  padding-top: 0.5rem !important;
-}
-
-.pr-2,
-.px-2 {
-  padding-right: 0.5rem !important;
-}
-
-.pb-2,
-.py-2 {
-  padding-bottom: 0.5rem !important;
-}
-
-.pl-2,
-.px-2 {
-  padding-left: 0.5rem !important;
-}
-
-.p-3 {
-  padding: 1rem !important;
-}
-
-.pt-3,
-.py-3 {
-  padding-top: 1rem !important;
-}
-
-.pr-3,
-.px-3 {
-  padding-right: 1rem !important;
-}
-
-.pb-3,
-.py-3 {
-  padding-bottom: 1rem !important;
-}
-
-.pl-3,
-.px-3 {
-  padding-left: 1rem !important;
-}
-
-.p-4 {
-  padding: 1.5rem !important;
-}
-
-.pt-4,
-.py-4 {
-  padding-top: 1.5rem !important;
-}
-
-.pr-4,
-.px-4 {
-  padding-right: 1.5rem !important;
-}
-
-.pb-4,
-.py-4 {
-  padding-bottom: 1.5rem !important;
-}
-
-.pl-4,
-.px-4 {
-  padding-left: 1.5rem !important;
-}
-
-.p-5 {
-  padding: 3rem !important;
-}
-
-.pt-5,
-.py-5 {
-  padding-top: 3rem !important;
-}
-
-.pr-5,
-.px-5 {
-  padding-right: 3rem !important;
-}
-
-.pb-5,
-.py-5 {
-  padding-bottom: 3rem !important;
-}
-
-.pl-5,
-.px-5 {
-  padding-left: 3rem !important;
-}
-
-.m-auto {
-  margin: auto !important;
-}
-
-.mt-auto,
-.my-auto {
-  margin-top: auto !important;
-}
-
-.mr-auto,
-.mx-auto {
-  margin-right: auto !important;
-}
-
-.mb-auto,
-.my-auto {
-  margin-bottom: auto !important;
-}
-
-.ml-auto,
-.mx-auto {
-  margin-left: auto !important;
-}
-
-@media (min-width: 576px) {
-  .m-sm-0 {
-    margin: 0 !important;
-  }
-
-  .mt-sm-0,
-  .my-sm-0 {
-    margin-top: 0 !important;
-  }
-
-  .mr-sm-0,
-  .mx-sm-0 {
-    margin-right: 0 !important;
-  }
-
-  .mb-sm-0,
-  .my-sm-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .ml-sm-0,
-  .mx-sm-0 {
-    margin-left: 0 !important;
-  }
-
-  .m-sm-1 {
-    margin: 0.25rem !important;
-  }
-
-  .mt-sm-1,
-  .my-sm-1 {
-    margin-top: 0.25rem !important;
-  }
-
-  .mr-sm-1,
-  .mx-sm-1 {
-    margin-right: 0.25rem !important;
-  }
-
-  .mb-sm-1,
-  .my-sm-1 {
-    margin-bottom: 0.25rem !important;
-  }
-
-  .ml-sm-1,
-  .mx-sm-1 {
-    margin-left: 0.25rem !important;
-  }
-
-  .m-sm-2 {
-    margin: 0.5rem !important;
-  }
-
-  .mt-sm-2,
-  .my-sm-2 {
-    margin-top: 0.5rem !important;
-  }
-
-  .mr-sm-2,
-  .mx-sm-2 {
-    margin-right: 0.5rem !important;
-  }
-
-  .mb-sm-2,
-  .my-sm-2 {
-    margin-bottom: 0.5rem !important;
-  }
-
-  .ml-sm-2,
-  .mx-sm-2 {
-    margin-left: 0.5rem !important;
-  }
-
-  .m-sm-3 {
-    margin: 1rem !important;
-  }
-
-  .mt-sm-3,
-  .my-sm-3 {
-    margin-top: 1rem !important;
-  }
-
-  .mr-sm-3,
-  .mx-sm-3 {
-    margin-right: 1rem !important;
-  }
-
-  .mb-sm-3,
-  .my-sm-3 {
-    margin-bottom: 1rem !important;
-  }
-
-  .ml-sm-3,
-  .mx-sm-3 {
-    margin-left: 1rem !important;
-  }
-
-  .m-sm-4 {
-    margin: 1.5rem !important;
-  }
-
-  .mt-sm-4,
-  .my-sm-4 {
-    margin-top: 1.5rem !important;
-  }
-
-  .mr-sm-4,
-  .mx-sm-4 {
-    margin-right: 1.5rem !important;
-  }
-
-  .mb-sm-4,
-  .my-sm-4 {
-    margin-bottom: 1.5rem !important;
-  }
-
-  .ml-sm-4,
-  .mx-sm-4 {
-    margin-left: 1.5rem !important;
-  }
-
-  .m-sm-5 {
-    margin: 3rem !important;
-  }
-
-  .mt-sm-5,
-  .my-sm-5 {
-    margin-top: 3rem !important;
-  }
-
-  .mr-sm-5,
-  .mx-sm-5 {
-    margin-right: 3rem !important;
-  }
-
-  .mb-sm-5,
-  .my-sm-5 {
-    margin-bottom: 3rem !important;
-  }
-
-  .ml-sm-5,
-  .mx-sm-5 {
-    margin-left: 3rem !important;
-  }
-
-  .p-sm-0 {
-    padding: 0 !important;
-  }
-
-  .pt-sm-0,
-  .py-sm-0 {
-    padding-top: 0 !important;
-  }
-
-  .pr-sm-0,
-  .px-sm-0 {
-    padding-right: 0 !important;
-  }
-
-  .pb-sm-0,
-  .py-sm-0 {
-    padding-bottom: 0 !important;
-  }
-
-  .pl-sm-0,
-  .px-sm-0 {
-    padding-left: 0 !important;
-  }
-
-  .p-sm-1 {
-    padding: 0.25rem !important;
-  }
-
-  .pt-sm-1,
-  .py-sm-1 {
-    padding-top: 0.25rem !important;
-  }
-
-  .pr-sm-1,
-  .px-sm-1 {
-    padding-right: 0.25rem !important;
-  }
-
-  .pb-sm-1,
-  .py-sm-1 {
-    padding-bottom: 0.25rem !important;
-  }
-
-  .pl-sm-1,
-  .px-sm-1 {
-    padding-left: 0.25rem !important;
-  }
-
-  .p-sm-2 {
-    padding: 0.5rem !important;
-  }
-
-  .pt-sm-2,
-  .py-sm-2 {
-    padding-top: 0.5rem !important;
-  }
-
-  .pr-sm-2,
-  .px-sm-2 {
-    padding-right: 0.5rem !important;
-  }
-
-  .pb-sm-2,
-  .py-sm-2 {
-    padding-bottom: 0.5rem !important;
-  }
-
-  .pl-sm-2,
-  .px-sm-2 {
-    padding-left: 0.5rem !important;
-  }
-
-  .p-sm-3 {
-    padding: 1rem !important;
-  }
-
-  .pt-sm-3,
-  .py-sm-3 {
-    padding-top: 1rem !important;
-  }
-
-  .pr-sm-3,
-  .px-sm-3 {
-    padding-right: 1rem !important;
-  }
-
-  .pb-sm-3,
-  .py-sm-3 {
-    padding-bottom: 1rem !important;
-  }
-
-  .pl-sm-3,
-  .px-sm-3 {
-    padding-left: 1rem !important;
-  }
-
-  .p-sm-4 {
-    padding: 1.5rem !important;
-  }
-
-  .pt-sm-4,
-  .py-sm-4 {
-    padding-top: 1.5rem !important;
-  }
-
-  .pr-sm-4,
-  .px-sm-4 {
-    padding-right: 1.5rem !important;
-  }
-
-  .pb-sm-4,
-  .py-sm-4 {
-    padding-bottom: 1.5rem !important;
-  }
-
-  .pl-sm-4,
-  .px-sm-4 {
-    padding-left: 1.5rem !important;
-  }
-
-  .p-sm-5 {
-    padding: 3rem !important;
-  }
-
-  .pt-sm-5,
-  .py-sm-5 {
-    padding-top: 3rem !important;
-  }
-
-  .pr-sm-5,
-  .px-sm-5 {
-    padding-right: 3rem !important;
-  }
-
-  .pb-sm-5,
-  .py-sm-5 {
-    padding-bottom: 3rem !important;
-  }
-
-  .pl-sm-5,
-  .px-sm-5 {
-    padding-left: 3rem !important;
-  }
-
-  .m-sm-auto {
-    margin: auto !important;
-  }
-
-  .mt-sm-auto,
-  .my-sm-auto {
-    margin-top: auto !important;
-  }
-
-  .mr-sm-auto,
-  .mx-sm-auto {
-    margin-right: auto !important;
-  }
-
-  .mb-sm-auto,
-  .my-sm-auto {
-    margin-bottom: auto !important;
-  }
-
-  .ml-sm-auto,
-  .mx-sm-auto {
-    margin-left: auto !important;
-  }
-}
-
-@media (min-width: 768px) {
-  .m-md-0 {
-    margin: 0 !important;
-  }
-
-  .mt-md-0,
-  .my-md-0 {
-    margin-top: 0 !important;
-  }
-
-  .mr-md-0,
-  .mx-md-0 {
-    margin-right: 0 !important;
-  }
-
-  .mb-md-0,
-  .my-md-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .ml-md-0,
-  .mx-md-0 {
-    margin-left: 0 !important;
-  }
-
-  .m-md-1 {
-    margin: 0.25rem !important;
-  }
-
-  .mt-md-1,
-  .my-md-1 {
-    margin-top: 0.25rem !important;
-  }
-
-  .mr-md-1,
-  .mx-md-1 {
-    margin-right: 0.25rem !important;
-  }
-
-  .mb-md-1,
-  .my-md-1 {
-    margin-bottom: 0.25rem !important;
-  }
-
-  .ml-md-1,
-  .mx-md-1 {
-    margin-left: 0.25rem !important;
-  }
-
-  .m-md-2 {
-    margin: 0.5rem !important;
-  }
-
-  .mt-md-2,
-  .my-md-2 {
-    margin-top: 0.5rem !important;
-  }
-
-  .mr-md-2,
-  .mx-md-2 {
-    margin-right: 0.5rem !important;
-  }
-
-  .mb-md-2,
-  .my-md-2 {
-    margin-bottom: 0.5rem !important;
-  }
-
-  .ml-md-2,
-  .mx-md-2 {
-    margin-left: 0.5rem !important;
-  }
-
-  .m-md-3 {
-    margin: 1rem !important;
-  }
-
-  .mt-md-3,
-  .my-md-3 {
-    margin-top: 1rem !important;
-  }
-
-  .mr-md-3,
-  .mx-md-3 {
-    margin-right: 1rem !important;
-  }
-
-  .mb-md-3,
-  .my-md-3 {
-    margin-bottom: 1rem !important;
-  }
-
-  .ml-md-3,
-  .mx-md-3 {
-    margin-left: 1rem !important;
-  }
-
-  .m-md-4 {
-    margin: 1.5rem !important;
-  }
-
-  .mt-md-4,
-  .my-md-4 {
-    margin-top: 1.5rem !important;
-  }
-
-  .mr-md-4,
-  .mx-md-4 {
-    margin-right: 1.5rem !important;
-  }
-
-  .mb-md-4,
-  .my-md-4 {
-    margin-bottom: 1.5rem !important;
-  }
-
-  .ml-md-4,
-  .mx-md-4 {
-    margin-left: 1.5rem !important;
-  }
-
-  .m-md-5 {
-    margin: 3rem !important;
-  }
-
-  .mt-md-5,
-  .my-md-5 {
-    margin-top: 3rem !important;
-  }
-
-  .mr-md-5,
-  .mx-md-5 {
-    margin-right: 3rem !important;
-  }
-
-  .mb-md-5,
-  .my-md-5 {
-    margin-bottom: 3rem !important;
-  }
-
-  .ml-md-5,
-  .mx-md-5 {
-    margin-left: 3rem !important;
-  }
-
-  .p-md-0 {
-    padding: 0 !important;
-  }
-
-  .pt-md-0,
-  .py-md-0 {
-    padding-top: 0 !important;
-  }
-
-  .pr-md-0,
-  .px-md-0 {
-    padding-right: 0 !important;
-  }
-
-  .pb-md-0,
-  .py-md-0 {
-    padding-bottom: 0 !important;
-  }
-
-  .pl-md-0,
-  .px-md-0 {
-    padding-left: 0 !important;
-  }
-
-  .p-md-1 {
-    padding: 0.25rem !important;
-  }
-
-  .pt-md-1,
-  .py-md-1 {
-    padding-top: 0.25rem !important;
-  }
-
-  .pr-md-1,
-  .px-md-1 {
-    padding-right: 0.25rem !important;
-  }
-
-  .pb-md-1,
-  .py-md-1 {
-    padding-bottom: 0.25rem !important;
-  }
-
-  .pl-md-1,
-  .px-md-1 {
-    padding-left: 0.25rem !important;
-  }
-
-  .p-md-2 {
-    padding: 0.5rem !important;
-  }
-
-  .pt-md-2,
-  .py-md-2 {
-    padding-top: 0.5rem !important;
-  }
-
-  .pr-md-2,
-  .px-md-2 {
-    padding-right: 0.5rem !important;
-  }
-
-  .pb-md-2,
-  .py-md-2 {
-    padding-bottom: 0.5rem !important;
-  }
-
-  .pl-md-2,
-  .px-md-2 {
-    padding-left: 0.5rem !important;
-  }
-
-  .p-md-3 {
-    padding: 1rem !important;
-  }
-
-  .pt-md-3,
-  .py-md-3 {
-    padding-top: 1rem !important;
-  }
-
-  .pr-md-3,
-  .px-md-3 {
-    padding-right: 1rem !important;
-  }
-
-  .pb-md-3,
-  .py-md-3 {
-    padding-bottom: 1rem !important;
-  }
-
-  .pl-md-3,
-  .px-md-3 {
-    padding-left: 1rem !important;
-  }
-
-  .p-md-4 {
-    padding: 1.5rem !important;
-  }
-
-  .pt-md-4,
-  .py-md-4 {
-    padding-top: 1.5rem !important;
-  }
-
-  .pr-md-4,
-  .px-md-4 {
-    padding-right: 1.5rem !important;
-  }
-
-  .pb-md-4,
-  .py-md-4 {
-    padding-bottom: 1.5rem !important;
-  }
-
-  .pl-md-4,
-  .px-md-4 {
-    padding-left: 1.5rem !important;
-  }
-
-  .p-md-5 {
-    padding: 3rem !important;
-  }
-
-  .pt-md-5,
-  .py-md-5 {
-    padding-top: 3rem !important;
-  }
-
-  .pr-md-5,
-  .px-md-5 {
-    padding-right: 3rem !important;
-  }
-
-  .pb-md-5,
-  .py-md-5 {
-    padding-bottom: 3rem !important;
-  }
-
-  .pl-md-5,
-  .px-md-5 {
-    padding-left: 3rem !important;
-  }
-
-  .m-md-auto {
-    margin: auto !important;
-  }
-
-  .mt-md-auto,
-  .my-md-auto {
-    margin-top: auto !important;
-  }
-
-  .mr-md-auto,
-  .mx-md-auto {
-    margin-right: auto !important;
-  }
-
-  .mb-md-auto,
-  .my-md-auto {
-    margin-bottom: auto !important;
-  }
-
-  .ml-md-auto,
-  .mx-md-auto {
-    margin-left: auto !important;
-  }
-}
-
-@media (min-width: 992px) {
-  .m-lg-0 {
-    margin: 0 !important;
-  }
-
-  .mt-lg-0,
-  .my-lg-0 {
-    margin-top: 0 !important;
-  }
-
-  .mr-lg-0,
-  .mx-lg-0 {
-    margin-right: 0 !important;
-  }
-
-  .mb-lg-0,
-  .my-lg-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .ml-lg-0,
-  .mx-lg-0 {
-    margin-left: 0 !important;
-  }
-
-  .m-lg-1 {
-    margin: 0.25rem !important;
-  }
-
-  .mt-lg-1,
-  .my-lg-1 {
-    margin-top: 0.25rem !important;
-  }
-
-  .mr-lg-1,
-  .mx-lg-1 {
-    margin-right: 0.25rem !important;
-  }
-
-  .mb-lg-1,
-  .my-lg-1 {
-    margin-bottom: 0.25rem !important;
-  }
-
-  .ml-lg-1,
-  .mx-lg-1 {
-    margin-left: 0.25rem !important;
-  }
-
-  .m-lg-2 {
-    margin: 0.5rem !important;
-  }
-
-  .mt-lg-2,
-  .my-lg-2 {
-    margin-top: 0.5rem !important;
-  }
-
-  .mr-lg-2,
-  .mx-lg-2 {
-    margin-right: 0.5rem !important;
-  }
-
-  .mb-lg-2,
-  .my-lg-2 {
-    margin-bottom: 0.5rem !important;
-  }
-
-  .ml-lg-2,
-  .mx-lg-2 {
-    margin-left: 0.5rem !important;
-  }
-
-  .m-lg-3 {
-    margin: 1rem !important;
-  }
-
-  .mt-lg-3,
-  .my-lg-3 {
-    margin-top: 1rem !important;
-  }
-
-  .mr-lg-3,
-  .mx-lg-3 {
-    margin-right: 1rem !important;
-  }
-
-  .mb-lg-3,
-  .my-lg-3 {
-    margin-bottom: 1rem !important;
-  }
-
-  .ml-lg-3,
-  .mx-lg-3 {
-    margin-left: 1rem !important;
-  }
-
-  .m-lg-4 {
-    margin: 1.5rem !important;
-  }
-
-  .mt-lg-4,
-  .my-lg-4 {
-    margin-top: 1.5rem !important;
-  }
-
-  .mr-lg-4,
-  .mx-lg-4 {
-    margin-right: 1.5rem !important;
-  }
-
-  .mb-lg-4,
-  .my-lg-4 {
-    margin-bottom: 1.5rem !important;
-  }
-
-  .ml-lg-4,
-  .mx-lg-4 {
-    margin-left: 1.5rem !important;
-  }
-
-  .m-lg-5 {
-    margin: 3rem !important;
-  }
-
-  .mt-lg-5,
-  .my-lg-5 {
-    margin-top: 3rem !important;
-  }
-
-  .mr-lg-5,
-  .mx-lg-5 {
-    margin-right: 3rem !important;
-  }
-
-  .mb-lg-5,
-  .my-lg-5 {
-    margin-bottom: 3rem !important;
-  }
-
-  .ml-lg-5,
-  .mx-lg-5 {
-    margin-left: 3rem !important;
-  }
-
-  .p-lg-0 {
-    padding: 0 !important;
-  }
-
-  .pt-lg-0,
-  .py-lg-0 {
-    padding-top: 0 !important;
-  }
-
-  .pr-lg-0,
-  .px-lg-0 {
-    padding-right: 0 !important;
-  }
-
-  .pb-lg-0,
-  .py-lg-0 {
-    padding-bottom: 0 !important;
-  }
-
-  .pl-lg-0,
-  .px-lg-0 {
-    padding-left: 0 !important;
-  }
-
-  .p-lg-1 {
-    padding: 0.25rem !important;
-  }
-
-  .pt-lg-1,
-  .py-lg-1 {
-    padding-top: 0.25rem !important;
-  }
-
-  .pr-lg-1,
-  .px-lg-1 {
-    padding-right: 0.25rem !important;
-  }
-
-  .pb-lg-1,
-  .py-lg-1 {
-    padding-bottom: 0.25rem !important;
-  }
-
-  .pl-lg-1,
-  .px-lg-1 {
-    padding-left: 0.25rem !important;
-  }
-
-  .p-lg-2 {
-    padding: 0.5rem !important;
-  }
-
-  .pt-lg-2,
-  .py-lg-2 {
-    padding-top: 0.5rem !important;
-  }
-
-  .pr-lg-2,
-  .px-lg-2 {
-    padding-right: 0.5rem !important;
-  }
-
-  .pb-lg-2,
-  .py-lg-2 {
-    padding-bottom: 0.5rem !important;
-  }
-
-  .pl-lg-2,
-  .px-lg-2 {
-    padding-left: 0.5rem !important;
-  }
-
-  .p-lg-3 {
-    padding: 1rem !important;
-  }
-
-  .pt-lg-3,
-  .py-lg-3 {
-    padding-top: 1rem !important;
-  }
-
-  .pr-lg-3,
-  .px-lg-3 {
-    padding-right: 1rem !important;
-  }
-
-  .pb-lg-3,
-  .py-lg-3 {
-    padding-bottom: 1rem !important;
-  }
-
-  .pl-lg-3,
-  .px-lg-3 {
-    padding-left: 1rem !important;
-  }
-
-  .p-lg-4 {
-    padding: 1.5rem !important;
-  }
-
-  .pt-lg-4,
-  .py-lg-4 {
-    padding-top: 1.5rem !important;
-  }
-
-  .pr-lg-4,
-  .px-lg-4 {
-    padding-right: 1.5rem !important;
-  }
-
-  .pb-lg-4,
-  .py-lg-4 {
-    padding-bottom: 1.5rem !important;
-  }
-
-  .pl-lg-4,
-  .px-lg-4 {
-    padding-left: 1.5rem !important;
-  }
-
-  .p-lg-5 {
-    padding: 3rem !important;
-  }
-
-  .pt-lg-5,
-  .py-lg-5 {
-    padding-top: 3rem !important;
-  }
-
-  .pr-lg-5,
-  .px-lg-5 {
-    padding-right: 3rem !important;
-  }
-
-  .pb-lg-5,
-  .py-lg-5 {
-    padding-bottom: 3rem !important;
-  }
-
-  .pl-lg-5,
-  .px-lg-5 {
-    padding-left: 3rem !important;
-  }
-
-  .m-lg-auto {
-    margin: auto !important;
-  }
-
-  .mt-lg-auto,
-  .my-lg-auto {
-    margin-top: auto !important;
-  }
-
-  .mr-lg-auto,
-  .mx-lg-auto {
-    margin-right: auto !important;
-  }
-
-  .mb-lg-auto,
-  .my-lg-auto {
-    margin-bottom: auto !important;
-  }
-
-  .ml-lg-auto,
-  .mx-lg-auto {
-    margin-left: auto !important;
-  }
-}
-
-@media (min-width: 1200px) {
-  .m-xl-0 {
-    margin: 0 !important;
-  }
-
-  .mt-xl-0,
-  .my-xl-0 {
-    margin-top: 0 !important;
-  }
-
-  .mr-xl-0,
-  .mx-xl-0 {
-    margin-right: 0 !important;
-  }
-
-  .mb-xl-0,
-  .my-xl-0 {
-    margin-bottom: 0 !important;
-  }
-
-  .ml-xl-0,
-  .mx-xl-0 {
-    margin-left: 0 !important;
-  }
-
-  .m-xl-1 {
-    margin: 0.25rem !important;
-  }
-
-  .mt-xl-1,
-  .my-xl-1 {
-    margin-top: 0.25rem !important;
-  }
-
-  .mr-xl-1,
-  .mx-xl-1 {
-    margin-right: 0.25rem !important;
-  }
-
-  .mb-xl-1,
-  .my-xl-1 {
-    margin-bottom: 0.25rem !important;
-  }
-
-  .ml-xl-1,
-  .mx-xl-1 {
-    margin-left: 0.25rem !important;
-  }
-
-  .m-xl-2 {
-    margin: 0.5rem !important;
-  }
-
-  .mt-xl-2,
-  .my-xl-2 {
-    margin-top: 0.5rem !important;
-  }
-
-  .mr-xl-2,
-  .mx-xl-2 {
-    margin-right: 0.5rem !important;
-  }
-
-  .mb-xl-2,
-  .my-xl-2 {
-    margin-bottom: 0.5rem !important;
-  }
-
-  .ml-xl-2,
-  .mx-xl-2 {
-    margin-left: 0.5rem !important;
-  }
-
-  .m-xl-3 {
-    margin: 1rem !important;
-  }
-
-  .mt-xl-3,
-  .my-xl-3 {
-    margin-top: 1rem !important;
-  }
-
-  .mr-xl-3,
-  .mx-xl-3 {
-    margin-right: 1rem !important;
-  }
-
-  .mb-xl-3,
-  .my-xl-3 {
-    margin-bottom: 1rem !important;
-  }
-
-  .ml-xl-3,
-  .mx-xl-3 {
-    margin-left: 1rem !important;
-  }
-
-  .m-xl-4 {
-    margin: 1.5rem !important;
-  }
-
-  .mt-xl-4,
-  .my-xl-4 {
-    margin-top: 1.5rem !important;
-  }
-
-  .mr-xl-4,
-  .mx-xl-4 {
-    margin-right: 1.5rem !important;
-  }
-
-  .mb-xl-4,
-  .my-xl-4 {
-    margin-bottom: 1.5rem !important;
-  }
-
-  .ml-xl-4,
-  .mx-xl-4 {
-    margin-left: 1.5rem !important;
-  }
-
-  .m-xl-5 {
-    margin: 3rem !important;
-  }
-
-  .mt-xl-5,
-  .my-xl-5 {
-    margin-top: 3rem !important;
-  }
-
-  .mr-xl-5,
-  .mx-xl-5 {
-    margin-right: 3rem !important;
-  }
-
-  .mb-xl-5,
-  .my-xl-5 {
-    margin-bottom: 3rem !important;
-  }
-
-  .ml-xl-5,
-  .mx-xl-5 {
-    margin-left: 3rem !important;
-  }
-
-  .p-xl-0 {
-    padding: 0 !important;
-  }
-
-  .pt-xl-0,
-  .py-xl-0 {
-    padding-top: 0 !important;
-  }
-
-  .pr-xl-0,
-  .px-xl-0 {
-    padding-right: 0 !important;
-  }
-
-  .pb-xl-0,
-  .py-xl-0 {
-    padding-bottom: 0 !important;
-  }
-
-  .pl-xl-0,
-  .px-xl-0 {
-    padding-left: 0 !important;
-  }
-
-  .p-xl-1 {
-    padding: 0.25rem !important;
-  }
-
-  .pt-xl-1,
-  .py-xl-1 {
-    padding-top: 0.25rem !important;
-  }
-
-  .pr-xl-1,
-  .px-xl-1 {
-    padding-right: 0.25rem !important;
-  }
-
-  .pb-xl-1,
-  .py-xl-1 {
-    padding-bottom: 0.25rem !important;
-  }
-
-  .pl-xl-1,
-  .px-xl-1 {
-    padding-left: 0.25rem !important;
-  }
-
-  .p-xl-2 {
-    padding: 0.5rem !important;
-  }
-
-  .pt-xl-2,
-  .py-xl-2 {
-    padding-top: 0.5rem !important;
-  }
-
-  .pr-xl-2,
-  .px-xl-2 {
-    padding-right: 0.5rem !important;
-  }
-
-  .pb-xl-2,
-  .py-xl-2 {
-    padding-bottom: 0.5rem !important;
-  }
-
-  .pl-xl-2,
-  .px-xl-2 {
-    padding-left: 0.5rem !important;
-  }
-
-  .p-xl-3 {
-    padding: 1rem !important;
-  }
-
-  .pt-xl-3,
-  .py-xl-3 {
-    padding-top: 1rem !important;
-  }
-
-  .pr-xl-3,
-  .px-xl-3 {
-    padding-right: 1rem !important;
-  }
-
-  .pb-xl-3,
-  .py-xl-3 {
-    padding-bottom: 1rem !important;
-  }
-
-  .pl-xl-3,
-  .px-xl-3 {
-    padding-left: 1rem !important;
-  }
-
-  .p-xl-4 {
-    padding: 1.5rem !important;
-  }
-
-  .pt-xl-4,
-  .py-xl-4 {
-    padding-top: 1.5rem !important;
-  }
-
-  .pr-xl-4,
-  .px-xl-4 {
-    padding-right: 1.5rem !important;
-  }
-
-  .pb-xl-4,
-  .py-xl-4 {
-    padding-bottom: 1.5rem !important;
-  }
-
-  .pl-xl-4,
-  .px-xl-4 {
-    padding-left: 1.5rem !important;
-  }
-
-  .p-xl-5 {
-    padding: 3rem !important;
-  }
-
-  .pt-xl-5,
-  .py-xl-5 {
-    padding-top: 3rem !important;
-  }
-
-  .pr-xl-5,
-  .px-xl-5 {
-    padding-right: 3rem !important;
-  }
-
-  .pb-xl-5,
-  .py-xl-5 {
-    padding-bottom: 3rem !important;
-  }
-
-  .pl-xl-5,
-  .px-xl-5 {
-    padding-left: 3rem !important;
-  }
-
-  .m-xl-auto {
-    margin: auto !important;
-  }
-
-  .mt-xl-auto,
-  .my-xl-auto {
-    margin-top: auto !important;
-  }
-
-  .mr-xl-auto,
-  .mx-xl-auto {
-    margin-right: auto !important;
-  }
-
-  .mb-xl-auto,
-  .my-xl-auto {
-    margin-bottom: auto !important;
-  }
-
-  .ml-xl-auto,
-  .mx-xl-auto {
-    margin-left: auto !important;
-  }
-}
-
-.text-monospace {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
-
-.text-justify {
-  text-align: justify !important;
-}
-
-.text-nowrap {
-  white-space: nowrap !important;
-}
-
-.text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.text-left {
-  text-align: left !important;
-}
-
-.text-right {
-  text-align: right !important;
-}
-
-.text-center {
-  text-align: center !important;
-}
-
-@media (min-width: 576px) {
-  .text-sm-left {
-    text-align: left !important;
-  }
-
-  .text-sm-right {
-    text-align: right !important;
-  }
-
-  .text-sm-center {
-    text-align: center !important;
-  }
-}
-
-@media (min-width: 768px) {
-  .text-md-left {
-    text-align: left !important;
-  }
-
-  .text-md-right {
-    text-align: right !important;
-  }
-
-  .text-md-center {
-    text-align: center !important;
-  }
-}
-
-@media (min-width: 992px) {
-  .text-lg-left {
-    text-align: left !important;
-  }
-
-  .text-lg-right {
-    text-align: right !important;
-  }
-
-  .text-lg-center {
-    text-align: center !important;
-  }
-}
-
-@media (min-width: 1200px) {
-  .text-xl-left {
-    text-align: left !important;
-  }
-
-  .text-xl-right {
-    text-align: right !important;
-  }
-
-  .text-xl-center {
-    text-align: center !important;
-  }
-}
-
-.text-lowercase {
-  text-transform: lowercase !important;
-}
-
-.text-uppercase {
-  text-transform: uppercase !important;
-}
-
-.text-capitalize {
-  text-transform: capitalize !important;
-}
-
-.font-weight-light {
-  font-weight: 300 !important;
-}
-
-.font-weight-normal {
-  font-weight: 400 !important;
-}
-
-.font-weight-bold {
-  font-weight: 700 !important;
-}
-
-.font-italic {
-  font-style: italic !important;
-}
-
-.text-light {
-  color: #f8f9fa !important;
-}
-
-a.text-light:hover,
-a.text-light:focus {
-  color: #dae0e5 !important;
-}
-
-.text-dark {
-  color: #343a40 !important;
-}
-
-a.text-dark:hover,
-a.text-dark:focus {
-  color: #1d2124 !important;
-}
-
-.text-body {
-  color: #212529 !important;
-}
-
-.text-muted {
-  color: #999 !important;
-}
-
-.text-black-50 {
-  color: rgba(0, 0, 0, 0.5) !important;
-}
-
-.text-white-50 {
-  color: rgba(255, 255, 255, 0.5) !important;
-}
-
-.visible {
-  visibility: visible !important;
-}
-
-.invisible {
-  visibility: hidden !important;
-}
diff --git a/antora-ui-camel/src/css/site.css b/antora-ui-camel/src/css/site.css
index d91d004..62dad29 100644
--- a/antora-ui-camel/src/css/site.css
+++ b/antora-ui-camel/src/css/site.css
@@ -5,12 +5,13 @@
 @import "body.css";
 @import "nav.css";
 @import "main.css";
-@import "responsive.css";
 @import "toolbar.css";
 @import "breadcrumbs.css";
 @import "page-versions.css";
 @import "doc.css";
+@import "static.css";
 @import "header.css";
 @import "footer.css";
 @import "highlight.css";
+@import "frontpage.css";
 @import "print.css";
diff --git a/antora-ui-camel/src/css/static.css b/antora-ui-camel/src/css/static.css
new file mode 100644
index 0000000..6002d2c
--- /dev/null
+++ b/antora-ui-camel/src/css/static.css
@@ -0,0 +1,19 @@
+.static {
+  margin: var(--static-margin);
+  max-width: var(--static-max-width);
+}
+
+@media screen and (min-width: 1024px) {
+  .static {
+    max-width: var(--static-max-width--desktop);
+  }
+}
+
+/* Antora markup is wrapped in <div>, we need to emulate the same */
+.static dl,
+.static ol,
+.static p,
+.static pre,
+.static ul {
+  margin: 1rem 0 0;
+}
diff --git a/antora-ui-camel/src/css/vars.css b/antora-ui-camel/src/css/vars.css
index d96a881..e3bd5dd 100644
--- a/antora-ui-camel/src/css/vars.css
+++ b/antora-ui-camel/src/css/vars.css
@@ -19,15 +19,16 @@
   --color-asf-dark-blue: #303284;
   --color-asf-moderate-blue: #585ac2;
   --color-camel-orange: #ed8225;
+  --color-highlight: #fffcdd;
   /* fonts */
   --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
   --body-font-size: 1.0625em; /* 17px */
   --body-font-size--desktop: 1.125em; /* 18px */
   --body-font-size--print: 0.9375em; /* 15px */
   --body-line-height: 1.15;
-  --body-font-color: var(--color-jet-70);
+  --body-font-color: var(--color-jet-50);
   --body-font-family: "Open Sans", sans-serif;
-  --body-font-weight-bold: 500;
+  --body-font-weight-bold: bold;
   --monospace-font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
   --monospace-font-weight-bold: 500;
   /* base */
@@ -108,6 +109,10 @@
   --quote-attribution-font-color: var(--color-gray-30);
   --sidebar-background: var(--color-smoke-70);
   --table-border-color: var(--panel-border-color);
+  /* static */
+  --static-margin: 0 auto;
+  /* frontpage */
+  --frontpage-max-width: calc(1140 / var(--rem-base) * 1rem);
   /* footer */
   --footer-line-height: var(--doc-line-height);
   --footer-background: var(--color-smoke-90);
@@ -126,6 +131,8 @@
   --nav-width: calc(270 / var(--rem-base) * 1rem);
   --doc-max-width: calc(720 / var(--rem-base) * 1rem);
   --doc-max-width--desktop: calc(828 / var(--rem-base) * 1rem);
+  --static-max-width: calc(720 / var(--rem-base) * 1rem);
+  --static-max-width--desktop: calc(1140 / var(--rem-base) * 1rem);
   /* stacking */
   --z-index-nav: 1;
   --z-index-toolbar: 2;
diff --git a/antora-ui-camel/src/partials/footer-content.hbs b/antora-ui-camel/src/partials/footer-content.hbs
index 62af973..5d52c38 100644
--- a/antora-ui-camel/src/partials/footer-content.hbs
+++ b/antora-ui-camel/src/partials/footer-content.hbs
@@ -1,49 +1,40 @@
-    <footer class="footer bg-brown text-white">
-        <div class="container">
-            <div class="row">
-                <div class="col-md-3 pt-5">
-                    <img src="{{uiRootPath}}/img/logo-d.svg" class="logo-small mt-60" alt="Apache Camel Logo" aria-label="white silhouette of a camel in front of a sand dune">
-                </div>
-                <div class="col-md-3">
-                    <h5>Overview</h5>
-                    <ul class="list-unstyled">
-                        <li><a href="{{siteRootPath}}/news/">News</a></li>
-                        <li><a href="{{siteRootPath}}/components/latest/">Components</a></li>
-                        <li><a href="{{siteRootPath}}/download/">Download</a></li>
-                        <li><a href="{{siteRootPath}}/docs/getting-started/">Getting started</a></li>
-                        <li><a href="{{siteRootPath}}/manual/latest/faq.html">FAQ</a></li>
-                    </ul>
-                </div>
-                <div class="col-md-3">
-                    <h5>Community</h5>
-                    <ul class="list-unstyled">
-                        <li><a href="{{siteRootPath}}/community/support/">Support</a></li>
-                        <li><a href="https://github.com/apache/camel/blob/master/CONTRIBUTING.md">Contributing</a></li>
-                        <li><a href="{{siteRootPath}}/community/user-stories/">User stories</a></li>
-                        <li><a href="{{siteRootPath}}/community/articles/">Articles</a></li>
-                        <li><a href="{{siteRootPath}}/community/books/">Books</a></li>
-                        <li><a href="{{siteRootPath}}/community/team/">Team</a></li>
-                        <li><a href="{{siteRootPath}}/community/camel-extra/">Camel extra</a></li>
-                    </ul>
-                </div>
-                <div class="col-md-3">
-                    <h5>About</h5>
-                    <ul class="list-unstyled">
-                        <li><a href="{{siteRootPath}}/acknowledgments/">Acknowledgments</a></li>
-                        <li><a target="_blank" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></li>
-                        <li><a target="_blank" href="https://www.apache.org/licenses/" title="License">License</a></li>
-                        <li><a target="_blank" href="https://www.apache.org/security/" title="Security">Security</a></li>
-                        <li><a target="_blank" href="https://www.apache.org/foundation/sponsorship.html" title="Sponsorship">Sponsorship</a></li>
-                        <li><a target="_blank" href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="container">
-            © 2004-2018 The <a href="https://apache.org">Apache Software Foundation</a>.<br>
-            Apache Camel, Camel, Apache, the Apache feather logo, and the Apache Camel project logo are trademarks of
-            The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of
-            their respective owners.
+    <footer>
+        <div class="footer">
+            <figure class="logo">
+                <img src="{{siteRootPath}}/_/img/logo-d.svg" class="logo-small mt-60" alt="Apache Camel Logo" aria-label="white silhouette of a camel in front of a sand dune">
+            </figure>
+            <dl>
+                <dt>Overview</dt>
+                <dd><a href="{{siteRootPath}}/news/">News</a></dd>
+                <dd><a href="{{siteRootPath}}/components/latest/">Components</a></dd>
+                <dd><a href="{{siteRootPath}}/download/">Download</a></dd>
+                <dd><a href="{{siteRootPath}}/docs/getting-started/">Getting started</a></dd>
+                <dd><a href="{{siteRootPath}}/manual/latest/faq.html">FAQ</a></dd>
+            </dl>
+            <dl>
+                <dt>Community</dt>
+                <dd><a href="{{siteRootPath}}/community/support/">Support</a></dd>
+                <dd><a href="https://github.com/apache/camel/blob/master/CONTRIBUTING.md">Contributing</a></dd>
+                <dd><a href="{{siteRootPath}}/community/user-stories/">User stories</a></dd>
+                <dd><a href="{{siteRootPath}}/community/articles/">Articles</a></dd>
+                <dd><a href="{{siteRootPath}}/community/books/">Books</a></dd>
+                <dd><a href="{{siteRootPath}}/community/team/">Team</a></dd>
+                <dd><a href="{{siteRootPath}}/community/camel-extra/">Camel extra</a></dd>
+            </dl>
+            <dl>
+                <dt>About</dt>
+                <dd><a href="{{siteRootPath}}/acknowledgments/">Acknowledgments</a></d>
+                <dd><a target="_blank" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></dd>
+                <dd><a target="_blank" href="https://www.apache.org/licenses/" title="License">License</a></dd>
+                <dd><a target="_blank" href="https://www.apache.org/security/" title="Security">Security</a></dd>
+                <dd><a target="_blank" href="https://www.apache.org/foundation/sponsorship.html" title="Sponsorship">Sponsorship</a></dd>
+                <dd><a target="_blank" href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></dd>
+            </dl>
+            <p>
+                © 2004-2018 The <a href="https://apache.org">Apache Software Foundation</a>.<br>
+                Apache Camel, Camel, Apache, the Apache feather logo, and the Apache Camel project logo are trademarks of
+                The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of
+                their respective owners.
+            </p>
         </div>
     </footer>
-    
diff --git a/content/_index.md b/content/_index.md
index 8061230..8a2e8c2 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,5 +1,117 @@
 ---
 title: Home page
+description: Camel is an open source integration framework that empowers you to quickly and easily integrate various systems consuming or producing data. 
 ---
-Apache Camel!
 
+{{< section "frontpage columns" >}}
+
+# Packed with functionality
+
+{{< div "box" >}}
+{{< div >}}
+## Patterns
+
+Based on <mark>Enterprise Integration Patterns</mark> to help you solve your integration problem by applying best practices out of the box. Camel supports most of the Enterprise Integration Patterns from the excellent book by Gregor Hohpe and Bobby Woolf.
+{{< /div >}}
+{{< /div >}}
+
+{{< div "box" >}}
+{{< div >}}
+## Components
+
+Packed with <mark>several hundred components</mark> that are used to access databases, message queues, APIs or basically anything under the sun. Helping you integrate with everything.
+{{< /div >}}
+{{< /div >}}
+
+{{< div "box" >}}
+{{< div >}}
+## Portability
+
+<mark>Runs everywhere</mark>: embedded as a library, within OSGi containers or in the JEE application servers and in the clouds. Enjoy seamless integration with popular frameworks such as **CDI**, **Spring**, **Spring Boot** and **Blueprint**.
+{{< /div >}}
+{{< /div >}}
+
+{{< div "box" >}}
+{{< div >}}
+## Data Formats
+
+Camel supports around 50 data formats, allowing to <mark>translate messages</mark> in multiple formats.
+{{< /div >}}
+{{< /div >}}
+
+{{< /section >}}
+
+{{< section "frontpage projects" >}}
+
+# Camel K
+
+Apache Camel K is a lightweight integration framework built from Apache Camel that runs natively on [Kubernetes](https://kubernetes.io/) and is specifically designed for **serverless** and **microservice architectures**.
+
+<a class="significant" href="./camel-k/latest/">Read the docs</a>
+
+{{< /section >}}
+
+{{< section "frontpage projects" >}}
+
+# Camel Quarkus
+
+Apache Camel Quarkus is a set of extensions for [Quarkus](https://quarkus.io) is a Java platform offering fast boot times and low memory footprint. It targets both stock JVMs (OpenJDK in the first place) and [GraalVM](https://www.graalvm.org/).
+
+<a class="significant" href="./camel-quarkus/latest/">Read the docs</a>
+
+{{< /section >}}
+
+{{< section "frontpage integrations" >}}
+
+{{< div >}}
+# Integrated with Apache Camel
+
+The following projects can leverage Apache Camel as a routing and mediation engine
+{{< /div >}}
+
+{{< div >}}
+[Apache ActiveMQ](https://activemq.apache.org/)
+
+Mature, widely used open source message broker.
+
+[Apache CXF](https://cxf.apache.org/)
+
+Smart web services suite (JAX-WS and JAX-RS).
+
+[Apache Karaf](https://karaf.apache.org/)
+
+Small OSGi based runtime in which applications can be deployed.
+
+[Apache Mina](https://mina.apache.org/)
+
+High-performance NIO-driven networking framework.
+
+[Apache ServiceMix](https://servicemix.apache.org/)
+
+Popular distributed open source ESB and JBI container.
+{{< /div >}}
+
+{{< /section >}}
+
+{{< section "frontpage columns" >}}
+
+# Apache &amp; OpenSource
+
+{{< div "split" >}}
+**Camel is your project!**
+
+Camel is an [Apache Software Foundation](https://www.apache.org) project, available under the [Apache v2 license](https://apache.org/licenses/LICENSE-2.0). It's a complete open community, always listening proposals and comments. 
+
+[Sources](./community/sources/), [mailing lists](./community/mailing-list/), [issue tracker](./community/support/): it's fully open, you can access directly.
+
+We also love contributions: don't hesitate to [contribute](https://github.com/apache/camel/blob/master/CONTRIBUTING.md).
+
+[Be Involved In The Community](https://github.com/apache/camel/blob/master/CONTRIBUTING.md) | [How To Contribute](https://github.com/apache/camel/blob/master/CONTRIBUTING.md)
+
+{{< /div >}}
+
+{{< div "split" >}}
+![20 years of Apache Software foundation](/img/apache-20.png)
+{{< /div >}}
+
+{{< /section >}}
diff --git a/content/community/irc-room.md b/content/community/irc-room.md
index 9009c60..68e2254 100644
--- a/content/community/irc-room.md
+++ b/content/community/irc-room.md
@@ -10,11 +10,11 @@ You can hang out on IRC in the #apache-camel room at freenode with other Apache
 
 Here are the connection details. 
 
-{{< bootstrap-table "table table-hover text-left" >}}
+{{< table >}}
 | server  | port | room |
 |---------|------|------|
 | irc.freenode.net | 6667 | #apache-camel
-{{< /bootstrap-table >}}
+{{< /table >}}
 
 ### Gitter Room
 
diff --git a/content/community/mailing-list.md b/content/community/mailing-list.md
index b0e8a96..1f22b65 100644
--- a/content/community/mailing-list.md
+++ b/content/community/mailing-list.md
@@ -14,14 +14,14 @@ Again to re-iterate, use the Camel User List, for you Camel questions. This is t
 
 When posting to the mailing lists, use plain text mails. Do not use HTML mails. HTML mails is more likely to be targeted as spam mails and will be rejected; as well it's not easily readable by others.
 
-{{< bootstrap-table "table table-hover text-left" >}}
+{{< table >}}
 | List Name  | Address | Subscribe | Unsubscribe | Archive | Nabble (Online Forums) | Comment |
 |------------|---------|-----------|-------------|---------|------------------------|---------|
 | Camel User List  | users@camel.apache.org | [subscribe](mailto:users@camel.apache.org) | [unsubscribe](mailto:users@camel.apache.org) | [Archives](http://mail-archives.apache.org/mod_mbox/camel-users/) | [Nabble](http://camel.465427.n5.nabble.com/Camel-Users-f465428.html) | Use this list for your Camel questions. |
 | Camel Developer List  | dev@camel.apache.org | [subscribe](mailto:dev@camel.apache.org) | [unsubscribe](mailto:dev@camel.apache.org) | [Archives](http://mail-archives.apache.org/mod_mbox/camel-dev/) | [Nabble](http://camel.465427.n5.nabble.com/Camel-Development-f479097.html) | |
 | Camel Commits List  | commits@camel.apache.org | [subscribe](mailto:commits@camel.apache.org) | [unsubscribe](mailto:commits@camel.apache.org) | [Archives](http://mail-archives.apache.org/mod_mbox/camel-commits/) | [Nabble](http://camel.465427.n5.nabble.com/Camel-Commits-f498405.html) | |
 | Camel Issues List  | issues@camel.apache.org | [subscribe](mailto:issues@camel.apache.org) | [unsubscribe](mailto:issues@camel.apache.org) | [Archives](http://mail-archives.apache.org/mod_mbox/camel-issues/) | | |
-{{< /bootstrap-table >}}
+{{< /table >}}
 
 There were various discussions before these mailing lists were setup on the ActiveMQ Mailing Lists such as these [threads](http://www.nabble.com/forum/Search.jtp?forum=2354&local=y&query=%5Bcamel%5D)
 
diff --git a/content/community/team.md b/content/community/team.md
index 235d202..8f64c77 100644
--- a/content/community/team.md
+++ b/content/community/team.md
@@ -8,7 +8,7 @@ This page lists who we are. By all means add yourself to the list - lets sort it
 
 When posting to the mailing lists, use plain text mails. Do not use HTML mails. HTML mails is more likely to be targeted as spam mails and will be rejected; as well it's not easily readable by others.
 
-{{< bootstrap-table "table table-hover text-left" >}}
+{{< table >}}
 | Name  | ID | Organisation |
 |-------|----|--------------|
 | Aaron Mulder | ammulder | Chariot Solutions |
@@ -63,7 +63,7 @@ When posting to the mailing lists, use plain text mails. Do not use HTML mails.
 | Willem Jiang | ningjiang | Huawei |
 | William Tam | wtam | Progress Software |
 | Zoran Regvart | zregvart | Red Hat |
-{{< /bootstrap-table >}}
+{{< /table >}}
 
 ## Contributors
 
@@ -71,7 +71,7 @@ Adding your name to the list below.
 
 If you have been contributing to the Apache Camel project, and you want your name added to the list below. Then you can get in touch with the Camel team from the [Mailing Lists](../mailing-list/) and ask to be added.
 
-{{< bootstrap-table "table table-hover text-left" >}}
+{{< table >}}
 | Name  | Organisation |
 |-------|--------------|
 | Aaron Crickenberger | |
@@ -165,4 +165,4 @@ If you have been contributing to the Apache Camel project, and you want your nam
 | Trevor Pounds | |
 | Viral Gohel | Red Hat |
 | Xueqiang Mi | |
-{{< /bootstrap-table >}}
+{{< /table >}}
diff --git a/content/community/user-stories.md b/content/community/user-stories.md
index f03bffd..735e159 100644
--- a/content/community/user-stories.md
+++ b/content/community/user-stories.md
@@ -4,7 +4,7 @@ title: "User Stories"
 
 This page is intended as a place to collect user stories and feedback on Apache Camel. If you are using or have tried Apache Camel please add an entry or comment; or post to the mailing list.
 
-{{< bootstrap-table "table table-hover text-left" >}}
+{{< table >}}
 | Company, Product, or Project  | Description |
 |-------------------------------|-------------|
 |[Apache ActiveMQ](http://activemq.apache.org)|Uses Camel to add [Enterprise Integration Patterns](../../manual/latest/enterprise-integration-patterns.html) support into the [ActiveMQ broker](http://activemq.apache.org/enterprise-integration-patterns.html). If you run an out of the box ActiveMQ broker, look in *conf/camel.xml* and you'll see *camelContext* with some example routing rules. Can be used to bridge ActiveMQ with any of the camel [Components](../../manual/latest/component.html).|
@@ -63,10 +63,10 @@ This page is intended as a place to collect user stories and feedback on Apache
 |[Assimbly Gateway](https://github.com/assimbly/gateway)|A message gateway based on Apache Camel|
 |[Yeoman generator-camel-project](https://www.npmjs.com/package/generator-camel-project)|This project uses the Yeoman framework and node.js to generate the scaffold for Apache Camel projects as well as a simple template that can be used as a starting point.|
 |[Camel-graph](https://github.com/avvero/camel-graph)|Camel-graph is a route graph viewer for ServiceMix and Camel applications, visualising your route topologies with metrics.
-{{< /bootstrap-table >}}
+{{< /table >}}
 
 
-{{< bootstrap-table "table table-hover text-left" >}}
+{{< table >}}
 | User Groups  | Description |
 |--------------|-------------|
 |[Apache Camel User Group Denmark](https://groups.google.com/group/camel-user-group-denmark)|A danish user group for Apache Camel.|
@@ -74,10 +74,10 @@ This page is intended as a place to collect user stories and feedback on Apache
 |[Linkedin Apache Camel Group](http://www.linkedin.com/groups?gid=2447439&trk=hb_side_g)|The Apache Camel group in linkedin.|
 |[Google+ Apache Camel Group](https://plus.google.com/communities/106271384875356488225)|The Apache Camel group in google+|
 |[Apache Camel User Group Japan](https://jcug-oss.github.io/)|A Japanese user group for Apache Camel.|
-{{< /bootstrap-table >}}
+{{< /table >}}
 
 
-{{< bootstrap-table "table table-hover text-left" >}}
+{{< table >}}
 | External Camel Components  | Description |
 |--------------|-------------|
 |[camel-apama](https://github.com/gerco/camel-apama)|A Camel component for [Progress Apama](http://web.progress.com/en/apama/index.html)|
@@ -98,4 +98,4 @@ This page is intended as a place to collect user stories and feedback on Apache
 |[camel-spring-amqp](https://github.com/Bluelock/camel-spring-amqp)|A Camel component to integrate with Spring AMQP to communicate with for example RabbitMQ.|
 |[camel-kamon](https://github.com/osinka/camel-kamon)|Kamon metrics and traces for Apache Camel routes, processors|
 |[camel-spring-cloud-stream](https://github.com/donovanmuller/)|A component to integrate with Spring Cloud Stream|
-{{< /bootstrap-table >}}
+{{< /table >}}
diff --git a/content/download/_index.md b/content/download/_index.md
index c0993ee..5e46517 100644
--- a/content/download/_index.md
+++ b/content/download/_index.md
@@ -8,8 +8,8 @@ The KEYS used to sign the release can be found [here](https://www.apache.org/dis
 
 ## Maven 2 Repositories
 
-{{< bootstrap-table "table table-hover text-left" >}}
+{{< table >}}
 | Description | Download Link |
 |-------------|---------------|
 |Apache Camel Releases | https://repository.apache.org/content/repositories/releases/org/apache/camel/apache-camel/ |
-{{< /bootstrap-table >}}
+{{< /table >}}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index b8096d7..cd8ff6f 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,7 +1,15 @@
 {{ partial "header.html" . }}
 
-<div class="container pb-5">
-  {{ .Content }}
+<div class="body">
+    <main role="main">
+        <article class="static doc">
+
+          <h1>{{ .Title }}</h1>
+
+{{ .Content }}
+
+        </article>
+    </main>
 </div>
 
 {{ partial "footer.html" . }}
diff --git a/layouts/community/single.html b/layouts/community/single.html
deleted file mode 100644
index 485bf39..0000000
--- a/layouts/community/single.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{{ partial "header.html" . }}
-
-<div class="container pb-5">
-    <h1>{{ .Title }}</h1>
-
-    {{ .Content }}
-</div>
-
-{{ partial "footer.html" . }}
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
deleted file mode 100644
index 485bf39..0000000
--- a/layouts/docs/single.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{{ partial "header.html" . }}
-
-<div class="container pb-5">
-    <h1>{{ .Title }}</h1>
-
-    {{ .Content }}
-</div>
-
-{{ partial "footer.html" . }}
diff --git a/layouts/download/download.html b/layouts/download/download.html
index 8b8b345..132e74f 100644
--- a/layouts/download/download.html
+++ b/layouts/download/download.html
@@ -1,118 +1,127 @@
 {{ partial "header.html" . }}
 
-<div class="container pb-5">
-    <h1>{{ .Title }}</h1>
-
-    <h2>Latest releases</h2>
-
-    <p>Apache Camel community provides support for the latest three major versions. Latest version receives new features, next two supported versions receive only bug fixes.</p>
-
-    <ul>
-    {{ $releases := ((where .Site.Pages "Type" "release-note").ByParam "version").Reverse }}
-    {{ $major := "" }}
-    {{ $cnt := 1 }}
-    {{ range $releases }}
-        {{ $this_major := .Params.version | replaceRE "\\.\\d+$" "" }}
-        {{ if (and (le $cnt 3) (or (eq $major "") (ne $major $this_major ))) }}
-            <li>The latest {{ if eq $major "" }}feature{{ else }}bugfix{{ end }} release of Camel {{ $this_major }}.x is <a href="{{ .RelPermalink }}">{{ .Params.version }}</a></li>
-            {{ $cnt = add $cnt 1 }}
-        {{ end }}
-        {{ $major = .Params.version | replaceRE "\\.\\d+$" "" }}
-    {{ end }}
-    </ul>
-
-    <h3>Using Maven</h3>
-
-
-    <p>To use this release in your maven project, the proper dependency configuration that you should use in your Maven POM is:</p>
-
-    <pre><code class="xml">&lt;dependency&gt;
-  &lt;groupId&gt;org.apache.camel&lt;/groupId&gt;
-  &lt;artifactId&gt;camel-core&lt;/artifactId&gt;
-  &lt;version&gt;{{ range (first 1 ((where .Site.Pages "Type" "release-note").ByParam "version").Reverse) }}{{ .Params.version }}{{ end }}&lt;/version&gt;
-&lt;/dependency&gt;</code></pre>
-
-    <h3>Getting the latest distributions</h3>
-
-    <h4>Binary Distribution</h4>
-
-    {{ $releases := ((where .Site.Pages "Type" "release-note").ByParam "version").Reverse }}
-    {{ $major := "" }}
-    {{ $cnt := 1 }}
-    <table class="table table-hover text-left">
-        <thead class="thead-light">
-            <tr>
-                <th>Version</th>
-                <th>Description</th>
-                <th>Download Link</th>
-                <th>PGP Signature file of download</th>
-                <th>SHA512 Checksum file of download</th>
-            </tr>
-        </thead>
-
-        {{ range $releases }}
-            {{ $this_major := .Params.version | replaceRE "\\.\\d+$" "" }}
-            {{ if (and (le $cnt 3) (or (eq $major "") (ne $major $this_major ))) }}
-                <tbody>
-                    <tr>
-                      <td rowspan="2"><strong>{{ .Params.version }}</strong><br><small>{{ if eq $major "" }}feature{{ else }}bugfix{{ end }}</small></td>
-                        <td>Windows Distribution</td>
-                        <td><a href="http://www.apache.org/dyn/closer.lua?filename=camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.zip&action=download">apache-camel-{{ .Params.version }}.zip</a></td>
-                        <td><a href="https://www.apache.org/dist/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.zip.asc">apache-camel-{{ .Params.version }}.zip.asc</a></td>
-                        <td><a href="https://www.apache.org/dist/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.zip.sha512">apache-camel-{{ .Params.version }}.zip.sha512</a></td>
-                    </tr>
-                    <tr>
-                        <td>Unix/Linux/Cygwin Distribution</td>
-                        <td><a href="http://www.apache.org/dyn/closer.lua?filename=camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.tar.gz&action=download">apache-camel-{{ .Params.version }}.tar.gz</a></td>
-                        <td><a href="https://www.apache.org/dist/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.tar.gz.asc">apache-camel-{{ .Params.version }}.tar.gz.asc</a></td>
-                        <td><a href="https://www.apache.org/dist/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.tar.gz.sha512">apache-camel-{{ .Params.version }}.tar.gz.sha512</a></td>
-                    </tr>
-                </tbody>
-                {{ $cnt = add $cnt 1 }}
+<div class="body">
+    <main role="main">
+        <article class="static doc">
+            <h1>{{ .Title }}</h1>
+
+            <h2>Latest releases</h2>
+
+            <p>Apache Camel community provides support for the latest three major versions. Latest version receives new features, next two supported versions receive only bug fixes.</p>
+
+            <ul>
+            {{ $releases := ((where .Site.Pages "Type" "release-note").ByParam "version").Reverse }}
+            {{ $major := "" }}
+            {{ $cnt := 1 }}
+            {{ range $releases }}
+                {{ $this_major := .Params.version | replaceRE "\\.\\d+$" "" }}
+                {{ if (and (le $cnt 3) (or (eq $major "") (ne $major $this_major ))) }}
+                    <li>The latest {{ if eq $major "" }}feature{{ else }}bugfix{{ end }} release of Camel {{ $this_major }}.x is <a href="{{ .RelPermalink }}">{{ .Params.version }}</a></li>
+                    {{ $cnt = add $cnt 1 }}
+                {{ end }}
+                {{ $major = .Params.version | replaceRE "\\.\\d+$" "" }}
             {{ end }}
-            {{ $major = .Params.version | replaceRE "\\.\\d+$" "" }}
-        {{ end }}
-    </table>
-
-    <h4>Source Distribution</h4>
-
-    {{ $releases := ((where .Site.Pages "Type" "release-note").ByParam "version").Reverse }}
-    {{ $major := "" }}
-    {{ $cnt := 1 }}
-    <table class="table table-hover text-left">
-        <thead class="thead-light">
-            <tr>
-                <th>Version</th>
-                <th>Description</th>
-                <th>Download Link</th>
-                <th>PGP Signature file of download</th>
-                <th>SHA512 Checksum file of download</th>
-            </tr>
-        </thead>
-
-        {{ range $releases }}
-            {{ $this_major := .Params.version | replaceRE "\\.\\d+$" "" }}
-            {{ if (and (le $cnt 3) (or (eq $major "") (ne $major $this_major ))) }}
-                <tbody>
-                    <tr>
-                      <td><strong>{{ .Params.version }}</strong><br><small>{{ if eq $major "" }}feature{{ else }}bugfix{{ end }}</small></td>
-                        <td>Source ZIP file</td>
-                        <td><a href="http://www.apache.org/dyn/closer.lua?filename=camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}-src.zip&action=download">apache-camel-{{ .Params.version }}-src.zip</a></td>
-                        <td><a href="https://www.apache.org/dist/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}-src.zip.asc">apache-camel-{{ .Params.version }}-src.zip.asc</a></td>
-                        <td><a href="https://www.apache.org/dist/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}-src.zip.sha512">apache-camel-{{ .Params.version }}-src.zip.sha512</a></td>
-                    </tr>
-                </tbody>
-                {{ $cnt = add $cnt 1 }}
-            {{ end }}
-            {{ $major = .Params.version | replaceRE "\\.\\d+$" "" }}
-        {{ end }}
-    </table>
+            </ul>
+
+            <h3>Using Maven</h3>
 
-    <h2>Older releases</h2>
 
-    All releases are listed on the <a href="{{ "/releases/" | relURL}}">Releases</a> archive, here you will also find releases that are no longer supported.
+            <p>To use this release in your maven project, the proper dependency configuration that you should use in your Maven POM is:</p>
 
-    {{ .Content }}
+            <div class="listingblock">
+                <div class="content">
+                    <pre><code class="xml">&lt;dependency&gt;
+              &lt;groupId&gt;org.apache.camel&lt;/groupId&gt;
+              &lt;artifactId&gt;camel-core&lt;/artifactId&gt;
+              &lt;version&gt;{{ range (first 1 ((where .Site.Pages "Type" "release-note").ByParam "version").Reverse) }}{{ .Params.version }}{{ end }}&lt;/version&gt;
+            &lt;/dependency&gt;</code></pre>
+                </div>
+            </div>
+
+            <h2>Getting the latest distributions</h2>
+
+            <h3>Binary Distribution</h3>
+
+            {{ $releases := ((where .Site.Pages "Type" "release-note").ByParam "version").Reverse }}
+            {{ $major := "" }}
+            {{ $cnt := 1 }}
+            <table class="tableblock frame-all grid-all stretch">
+                <thead>
+                    <tr>
+                        <th>Version</th>
+                        <th>Description</th>
+                        <th>Download Link</th>
+                        <th>PGP Signature file of download</th>
+                        <th>SHA512 Checksum file of download</th>
+                    </tr>
+                </thead>
+
+                {{ range $releases }}
+                    {{ $this_major := .Params.version | replaceRE "\\.\\d+$" "" }}
+                    {{ if (and (le $cnt 3) (or (eq $major "") (ne $major $this_major ))) }}
+                        <tbody>
+                            <tr>
+                              <td rowspan="2"><strong>{{ .Params.version }}</strong><br><small>{{ if eq $major "" }}feature{{ else }}bugfix{{ end }}</small></td>
+                                <td>Windows Distribution</td>
+                                <td><a href="http://www.apache.org/dyn/closer.lua?filename=camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.zip&action=download">apache-camel-{{ .Params.version }}.zip</a></td>
+                                <td><a href="https://www.apache.org/dist/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.zip.asc">apache-camel-{{ .Params.version }}.zip.asc</a></td>
+                                <td><a href="https://www.apache.org/dist/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.zip.sha512">apache-camel-{{ .Params.version }}.zip.sha512</a></td>
+                            </tr>
+                            <tr>
+                                <td>Unix/Linux/Cygwin Distribution</td>
+                                <td><a href="http://www.apache.org/dyn/closer.lua?filename=camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.tar.gz&action=download">apache-camel-{{ .Params.version }}.tar.gz</a></td>
+                                <td><a href="https://www.apache.org/dist/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.tar.gz.asc">apache-camel-{{ .Params.version }}.tar.gz.asc</a></td>
+                                <td><a href="https://www.apache.org/dist/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.tar.gz.sha512">apache-camel-{{ .Params.version }}.tar.gz.sha512</a></td>
+                            </tr>
+                        </tbody>
+                        {{ $cnt = add $cnt 1 }}
+                    {{ end }}
+                    {{ $major = .Params.version | replaceRE "\\.\\d+$" "" }}
+                {{ end }}
+            </table>
+
+            <h3>Source Distribution</h3>
+
+            {{ $releases := ((where .Site.Pages "Type" "release-note").ByParam "version").Reverse }}
+            {{ $major := "" }}
+            {{ $cnt := 1 }}
+            <table class="tableblock frame-all grid-all stretch">
+                <thead>
+                    <tr>
+                        <th>Version</th>
+                        <th>Description</th>
+                        <th>Download Link</th>
+                        <th>PGP Signature file of download</th>
+                        <th>SHA512 Checksum file of download</th>
+                    </tr>
+                </thead>
+
+                {{ range $releases }}
+                    {{ $this_major := .Params.version | replaceRE "\\.\\d+$" "" }}
+                    {{ if (and (le $cnt 3) (or (eq $major "") (ne $major $this_major ))) }}
+                        <tbody>
+                            <tr>
+                              <td><strong>{{ .Params.version }}</strong><br><small>{{ if eq $major "" }}feature{{ else }}bugfix{{ end }}</small></td>
+                                <td>Source ZIP file</td>
+                                <td><a href="http://www.apache.org/dyn/closer.lua?filename=camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}-src.zip&action=download">apache-camel-{{ .Params.version }}-src.zip</a></td>
+                                <td><a href="https://www.apache.org/dist/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}-src.zip.asc">apache-camel-{{ .Params.version }}-src.zip.asc</a></td>
+                                <td><a href="https://www.apache.org/dist/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}-src.zip.sha512">apache-camel-{{ .Params.version }}-src.zip.sha512</a></td>
+                            </tr>
+                        </tbody>
+                        {{ $cnt = add $cnt 1 }}
+                    {{ end }}
+                    {{ $major = .Params.version | replaceRE "\\.\\d+$" "" }}
+                {{ end }}
+            </table>
+
+            <h3>Older releases</h3>
+
+            All releases are listed on the <a href="{{ "/releases/" | relURL}}">Releases</a> archive, here you will also find releases that are no longer supported.
+
+            {{ .Content }}
+
+        </article>
+    </main>
 </div>
 
 {{ partial "footer.html" . }}
diff --git a/layouts/index.html b/layouts/index.html
index 14bf424..8b2a7cc 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,158 +1,19 @@
 {{ partial "header.html" . }}
 
-<div class="container pb-5">
-    <div class="row">
-        <div class="col-md-6">
-            <h1 class="title">Integration that you want!</h1>
-            <h2 class="subtitle text-muted mb-5">Camel empowers you to define routing and mediation rules in a variety of domain-specific languages.</h2>
-            <p class="mt-5"><a href="/docs/getting-started/" class="primary-btn">Get started</a>
-            </p>
-        </div>
-        <div class="col-md-6 pt-5">
-            <img class="img-fluid logo-big" src="./_/img/logo-d.svg" alt="Apache Camel logo" aria-label="white silhouette of a camel in front of a sand dune">
-        </div>
-    </div>
-</div>
-
-<section class="bg-grey">
-    <div class="container text-center pt-4">
-        <h3>Apache Camel provides support</h3>
-        <p class="text-muted lead">Bean Binding and seamless integration with popular frameworks such as CDI, Spring, Spring Boot and Blueprint.</p>
-        <p class="divider m-auto"></p>
-    </div>
-    <div class="container pb-5 pt-5">
-        <div class="row">
-            <div class="col-md-4">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="card-title font-weight-bold text-center">Enterprise Integration Patterns</div>
-                        <div class="card-text text-muted">
-                            Camel supports most of the Enterprise Integration Patterns from the excellent book by Gregor Hohpe and Bobby Woolf.
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-4">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="card-title font-weight-bold text-center">Components</div>
-                        <div class="card-text text-muted">
-                            Camel supports around 300 components, creating integration with everything.
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-4">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="card-title font-weight-bold text-center">Data Formats</div>
-                        <div class="card-text text-muted">
-                            Camel supports around 50 data formats, allowing to translate messages in multiple formats.
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section>
-    <div class="container">
-        <div class="row">
-            <div class="col-md-5 pt-5">
-                <h3>Running Apache Camel</h3>
-                <p class="text-muted lead">The following projects can leverage Apache Camel as a routing and mediation engine</p>
-                <div class="divider"></div>
-            </div>
-            <div class="col-md-7 pt-5 pb-5">
-                <h5>Apache ServiceMix</h5>
-                <p class="text-muted">Popular distributed open source ESB and JBI container.</p>
-                <h5>Apache ActiveMQ</h5>
-                <p class="text-muted">Mature, widely used open source message broker.</p>
-                <h5>Apache CXF</h5>
-                <p class="text-muted">Smart web services suite (JAX-WS and JAX-RS).</p>
-                <h5>Apache Karaf</h5>
-                <p class="text-muted">Small OSGi based runtime in which applications can be deployed</p>
-                <h5>Apache Mina</h5>
-                <p class="text-muted">High-performance NIO-driven networking framework.</p>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section class="bg-grey">
-    <div class="container text-center pt-4">
-        <h3>Camel K</h3>
-        <p class="text-muted lead">Apache Camel K is a lightweight integration framework built from Apache Camel that runs
-            natively on Kubernetes and is specifically designed for serverless and microservice architectures.</p>
-        <p class="pt-5 pb-5"><a href="/docs/getting-started/" class="primary-btn">Get started</a></p>
-    </div>
-</section>
-
-
-<section>
-    <div class="container pb-3">
-        <div class="row">
-            <div class="col-md-7">
-                <h3>Apache &amp; OpenSource</h3>
-                <p class="text-muted lead">Camel is your project!</p>
-
-                <p class="text-muted">
-                    Camel is an <a href="https://www.apache.org">Apache Software Foundation</a> project, available under the Apache v2 license.<br/>
-                    It's a complete open community, always listening proposals and comments.<br/>
-                    <a href="/community/sources/">Sources</a>, <a href="/community/mailing-list/">mailing lists</a>, <a href="/community/support/">issue tracker</a>: it's fully open, you can access directly.<br/>
-                    We also love contributions : don't hesitate to <a href="https://github.com/apache/camel/blob/master/CONTRIBUTING.md">contribute</a>.
-                </p>
-                <p>
-                    <a href="https://github.com/apache/camel/blob/master/CONTRIBUTING.md">Be Involved In The Community</a> |
-                    <a href="https://github.com/apache/camel/blob/master/CONTRIBUTING.md">How To Contribute</a>
-                </p>
-            </div>
-            <div class="col-md-5 logo pt-5">
-                <img src="./img/apache-logo.png" class="img-fluid" alt="Apache Camel logo" aria-label="white silhouette of a camel in front of a sand dune">
-            </div>
-        </div>
-    </div>
-</section>
-
-<section class="bg-orange">
-    <div class="container pt-3 text-white text-center">
-        <h1 class="title">Latest news</h1>
-    </div>
-    <div class="container pt-5 pb-5">
-        <div class="row">
-            <div class="col-md-4">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="card-title font-weight-bold">Release</div>
-                        <div class="card-text text-muted">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-4">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="card-title font-weight-bold">Component</div>
-                        <div class="card-text text-muted">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-4">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="card-title font-weight-bold">Event</div>
-                        <div class="card-text text-muted">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
+<header class="frontpage">
+  <h1>Integration you want.</h1>
+  <svg viewBox="0 0 500 70" preserveAspectRatio="none">
+    <path d="M -10,25 C 130,125 330,0 510,5" style="stroke: #ffddab; stroke-width: 10; stroke-opacity: .6; fill: none;" />
+    <path d="M -10,20 C 130,125 330,0 510,2" style="stroke: #9d1609; stroke-width: 10; stroke-opacity: .3; fill: none;" />
+    <path d="M -10,15 C 150,115 350,0 510,15" style="stroke: #f1b35b; stroke-width: 15; stroke-opacity: .6; fill: none;" />
+    <path d="M -10,11 C 130,125 330,0 510,20" style="stroke: #641a00; stroke-width: 5; stroke-opacity: .3; fill: none;" />
+    <path d="M -10,5 C 130,125 330,0 510,25" style="stroke: #e26810; stroke-width: 5; stroke-opacity: .6; fill: none;" />
+  </svg>
+  <p>Camel is an <mark>open source integration framework</mark> that empowers you to quickly and easily integrate various systems consuming or producing data.
+  </p>
+  <a class="significant" href="./docs/getting-started/">Get started</a>
+</header>
+
+{{ .Content }}
 
 {{ partial "footer.html" . }}
diff --git a/layouts/news-entry/single.html b/layouts/news-entry/single.html
index 6607b7a..1a088e8 100644
--- a/layouts/news-entry/single.html
+++ b/layouts/news-entry/single.html
@@ -1,14 +1,22 @@
 {{ partial "header.html" . }}
 
-<div class="container pb-5">
-  <h4>Apache Camel News: {{ .Params.title }}</h4>
-  <h5>Date</h5>
-  {{ dateFormat "Monday, Jan 1, 2006" .Params.date }}
-  <h5>Author</h5>
-  {{ .Params.author }}
-  <h5>Description</h5>
-  {{ .Params.description }}
-  {{ .Content }}
+<div class="body">
+    <main role="main">
+        <article class="static doc">
+
+            <div class="container pb-5">
+              <h4>Apache Camel News: {{ .Params.title }}</h4>
+              <h5>Date</h5>
+              {{ dateFormat "Monday, Jan 1, 2006" .Params.date }}
+              <h5>Author</h5>
+              {{ .Params.author }}
+              <h5>Description</h5>
+              {{ .Params.description }}
+              {{ .Content }}
+            </div>
+
+        </article>
+    </main>
 </div>
 
 {{ partial "footer.html" . }}
diff --git a/layouts/news/list.html b/layouts/news/list.html
index 6eef7f3..8987527 100644
--- a/layouts/news/list.html
+++ b/layouts/news/list.html
@@ -1,34 +1,42 @@
 {{ partial "header.html" . }}
 
-<div class="container pb-5">
-  {{ .Content }}
+<div class="body">
+    <main role="main">
+        <article class="static doc">
 
-  <table class="table">
-    <caption>News by year</caption>
-    <thead>
-      <tr>
-        <td>Date</td>
-        <td>Title</td>
-        <td>Author</td>
-        <td>Preview</td>
-      </tr>
-    </thead>
-    <tbody>
-  {{ range .Pages.GroupByDate "2006" "desc" }}
-      <tr>
-        <th colspan="5" scope="row"><strong>{{ .Key }}</strong></th>
-      </tr>
-      {{ range .Pages }}
-      <tr>
-        <td><a href="{{ .RelPermalink }}">{{ dateFormat "Monday, Jan 1, 2006" .Params.date }}</a></td>
-        <td>{{ .Params.title }}</td>
-        <td>{{ .Params.author }}</td>
-        <td>{{ .Params.preview }}</td>
-      </tr>
-      {{ end }}
-  {{ end }}
-    </tbody>
-  </table>
+            <div class="container pb-5">
+              {{ .Content }}
+
+              <table class="table">
+                <caption>News by year</caption>
+                <thead>
+                  <tr>
+                    <td>Date</td>
+                    <td>Title</td>
+                    <td>Author</td>
+                    <td>Preview</td>
+                  </tr>
+                </thead>
+                <tbody>
+              {{ range .Pages.GroupByDate "2006" "desc" }}
+                  <tr>
+                    <th colspan="5" scope="row"><strong>{{ .Key }}</strong></th>
+                  </tr>
+                  {{ range .Pages }}
+                  <tr>
+                    <td><a href="{{ .RelPermalink }}">{{ dateFormat "Monday, Jan 1, 2006" .Params.date }}</a></td>
+                    <td>{{ .Params.title }}</td>
+                    <td>{{ .Params.author }}</td>
+                    <td>{{ .Params.preview }}</td>
+                  </tr>
+                  {{ end }}
+              {{ end }}
+                </tbody>
+              </table>
+            </div>
+
+        </article>
+    </main>
 </div>
 
 {{ partial "footer.html" . }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index a755141..b222e61 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,49 +1,41 @@
-    <footer class="footer bg-brown text-white">
-        <div class="container">
-            <div class="row">
-                <div class="col-md-3 pt-5">
-                    <img src="/_/img/logo-d.svg" class="logo-small mt-60" alt="Apache Camel Logo" aria-label="white silhouette of a camel in front of a sand dune">
-                </div>
-                <div class="col-md-3">
-                    <h5>Overview</h5>
-                    <ul class="list-unstyled">
-                        <li><a href="/news/">News</a></li>
-                        <li><a href="/components/latest/">Components</a></li>
-                        <li><a href="/download/">Download</a></li>
-                        <li><a href="/docs/getting-started/">Getting started</a></li>
-                        <li><a href="/manual/latest/faq.html">FAQ</a></li>
-                    </ul>
-                </div>
-                <div class="col-md-3">
-                    <h5>Community</h5>
-                    <ul class="list-unstyled">
-                        <li><a href="/community/support/">Support</a></li>
-                        <li><a href="https://github.com/apache/camel/blob/master/CONTRIBUTING.md">Contributing</a></li>
-                        <li><a href="/community/user-stories/">User stories</a></li>
-                        <li><a href="/community/articles/">Articles</a></li>
-                        <li><a href="/community/books/">Books</a></li>
-                        <li><a href="/community/team/">Team</a></li>
-                        <li><a href="/community/camel-extra/">Camel extra</a></li>
-                    </ul>
-                </div>
-                <div class="col-md-3">
-                    <h5>About</h5>
-                    <ul class="list-unstyled">
-                        <li><a href="/acknowledgments/">Acknowledgments</a></li>
-                        <li><a target="_blank" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></li>
-                        <li><a target="_blank" href="https://www.apache.org/licenses/" title="License">License</a></li>
-                        <li><a target="_blank" href="https://www.apache.org/security/" title="Security">Security</a></li>
-                        <li><a target="_blank" href="https://www.apache.org/foundation/sponsorship.html" title="Sponsorship">Sponsorship</a></li>
-                        <li><a target="_blank" href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="container">
-            © 2004-2018 The <a href="https://apache.org">Apache Software Foundation</a>.<br>
-            Apache Camel, Camel, Apache, the Apache feather logo, and the Apache Camel project logo are trademarks of
-            The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of
-            their respective owners.
+    <footer>
+        <div class="footer">
+            <figure class="logo">
+                <img class="logo" src="/_/img/logo-d.svg" alt="Apache Camel Logo" aria-label="white silhouette of a camel in front of a sand dune">
+            </figure>
+            <dl>
+                <dt>Overview</dt>
+                <dd><a href="/news/">News</a></dd>
+                <dd><a href="/components/latest/">Components</a></dd>
+                <dd><a href="/download/">Download</a></dd>
+                <dd><a href="/docs/getting-started/">Getting started</a></dd>
+                <dd><a href="/manual/latest/faq.html">FAQ</a></dd>
+            </dl>
+            <dl>
+                <dt>Community</dt>
+                <dd><a href="/community/support/">Support</a></dd>
+                <dd><a href="https://github.com/apache/camel/blob/master/CONTRIBUTING.md">Contributing</a></dd>
+                <dd><a href="/community/user-stories/">User stories</a></dd>
+                <dd><a href="/community/articles/">Articles</a></dd>
+                <dd><a href="/community/books/">Books</a></dd>
+                <dd><a href="/community/team/">Team</a></dd>
+                <dd><a href="/community/camel-extra/">Camel extra</a></dd>
+            </dl>
+            <dl>
+                <dt>About</dt>
+                <dd><a href="/acknowledgments/">Acknowledgments</a></d>
+                <dd><a target="_blank" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></dd>
+                <dd><a target="_blank" href="https://www.apache.org/licenses/" title="License">License</a></dd>
+                <dd><a target="_blank" href="https://www.apache.org/security/" title="Security">Security</a></dd>
+                <dd><a target="_blank" href="https://www.apache.org/foundation/sponsorship.html" title="Sponsorship">Sponsorship</a></dd>
+                <dd><a target="_blank" href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></dd>
+            </dl>
+            <p>
+                © 2004-2018 The <a href="https://apache.org">Apache Software Foundation</a>.<br>
+                Apache Camel, Camel, Apache, the Apache feather logo, and the Apache Camel project logo are trademarks of
+                The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of
+                their respective owners.
+            </p>
         </div>
     </footer>
     <script src="{{ path.Join "_" (index .Site.Data "rev-manifest" "js/site.js") | relURL }}"></script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 61918db..95479fc 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -30,36 +30,38 @@
 </head>
 
 <body class="article">
-    <nav class="navbar">
-        <div class="navbar-brand">
-            <a class="nav-logo" href="{{ .Site.BaseURL | relURL }}" title="{{ .Site.Title }}"><span>{{ .Site.Title }}</span></a>
-            <div id="topbar-nav" class="navbar-menu">
-                <div class="navbar-end">
-                    {{ range .Site.Menus.main }}
-                    {{ if .HasChildren }}
-                    <div class="navbar-item has-dropdown is-hoverable">
-                        <a class="navbar-link" href="#">{{ .Name }}</a>
-                        <div class="navbar-dropdown">
-                            {{ range .Children }}
-                            <a class="navbar-item" href="{{ .URL | relURL }}">{{ .Name }}</a>
-                            {{ end }}
+    <header class="header">
+        <nav class="navbar">
+            <div class="navbar-brand">
+                <a class="nav-logo" href="{{ .Site.BaseURL | relURL }}" title="{{ .Site.Title }}"><span>{{ .Site.Title }}</span></a>
+                <div id="topbar-nav" class="navbar-menu">
+                    <div class="navbar-end">
+                        {{ range .Site.Menus.main }}
+                        {{ if .HasChildren }}
+                        <div class="navbar-item has-dropdown is-hoverable">
+                            <a class="navbar-link" href="#">{{ .Name }}</a>
+                            <div class="navbar-dropdown">
+                                {{ range .Children }}
+                                <a class="navbar-item" href="{{ .URL | relURL }}">{{ .Name }}</a>
+                                {{ end }}
+                            </div>
                         </div>
+                        {{ else }}
+                        <a class="navbar-item" href="{{ .URL | relURL }}">{{ .Name }}</a>
+                        {{ end }}
+                        {{ end }}
                     </div>
-                    {{ else }}
-                    <a class="navbar-item" href="{{ .URL | relURL }}">{{ .Name }}</a>
-                    {{ end }}
-                    {{ end }}
                 </div>
+                <div class="navbar-tools">
+                  <a href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg class="brand-icon"><use href="{{ "_/img/brand-logos.svg#github" | relURL }}" /></svg></a>
+                  <a href="https://gitter.im/apache/apache-camel" title="Chat on Gitter"><svg class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#gitter" | relURL }}" /></svg></a>
+                  <a href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#twitter" | relURL }}" /></svg></a>
+                </div>
+                <button class="navbar-burger" data-target="topbar-nav" type="button">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
             </div>
-            <div class="navbar-tools">
-              <a href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg class="brand-icon"><use href="{{ "_/img/brand-logos.svg#github" | relURL }}" /></svg></a>
-              <a href="https://gitter.im/apache/apache-camel" title="Chat on Gitter"><svg class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#gitter" | relURL }}" /></svg></a>
-              <a href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#twitter" | relURL }}" /></svg></a>
-            </div>
-            <button class="navbar-burger" data-target="topbar-nav" type="button">
-                <span></span>
-                <span></span>
-                <span></span>
-            </button>
-        </div>
-    </nav>
+        </nav>
+    </header>
diff --git a/layouts/projects/single.html b/layouts/projects/single.html
deleted file mode 100644
index ef3a636..0000000
--- a/layouts/projects/single.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{{ partial "header.html" . }}
-
-<div class="container pb-5">
-    <div class="row">
-        {{ .Content }}
-    </div>
-</div>
-
-{{ partial "footer.html" . }}
diff --git a/layouts/release-note/single.html b/layouts/release-note/single.html
index a4a9eb2..5259f1f 100644
--- a/layouts/release-note/single.html
+++ b/layouts/release-note/single.html
@@ -1,74 +1,72 @@
 {{ partial "header.html" . }}
 
-<div class="container pb-5">
-  <h4>Apache Camel {{ .Params.version }} Release</h4>
-  <h5>New and Noteworthy</h5>
-  {{ .Content }}
-  <h5>API breaking</h5>
-  {{ .Params.apiBreaking }}
-  <h5>Known issues</h5>
-  {{ .Params.knownIssues }}
-  <h4>Getting the Binaries using Maven</h4>
-  <h5>Binary Distributions</h5>
-  <table class="table">
-    <thead>
-    <tr>
-      <td>Description</td>
-      <td>Download Link</td>
-      <td>PGP Signature file of download</td>
-    </tr>
-    </thead>
-    <tbody>
-    <tr>
-      <td>Windows Distribution</td>
-      <td><a href="http://www.apache.org/dyn/closer.cgi/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.zip">apache-camel-{{ .Params.version }}.zip</a></td>
-      <td><a href="http://www.apache.org/dyn/closer.cgi/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.zip.asc">apache-camel-{{ .Params.version }}.zip.asc</a></td>
-    </tr>
-    <tr>
-      <td>Unix/Linux/Cygwin Distribution</td>
-      <td><a href="http://www.apache.org/dyn/closer.cgi/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.tar.gz">apache-camel-{{ .Params.version }}.tar.gz</a></td>
-      <td><a href="http://www.apache.org/dyn/closer.cgi/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.tar.gz.asc">apache-camel-{{ .Params.version }}.tar.gz.asc</a></td>
-    </tr>
-    </tbody>
-  </table>
-  <h4>Source Distributions</h4>
-  <table class="table">
-    <thead>
-    <tr>
-      <td>Description</td>
-      <td>Download Link</td>
-      <td>PGP Signature file of download</td>
-    </tr>
-    </thead>
-    <tbody>
-    <tr>
-      <td>Source (zip)</td>
-      <td><a href="http://www.apache.org/dyn/closer.cgi/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}-src.zip">apache-camel-{{ .Params.version }}-src.zip</a></td>
-      <td><a href="http://www.apache.org/dyn/closer.cgi/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}-src.zip.asc">apache-camel-{{ .Params.version }}-src.zip.asc</a></td>
-    </tr>
-    </tbody>
-  </table>
+<h1>Apache Camel {{ .Params.version }} Release</h1>
+<h2>New and Noteworthy</h2>
+{{ .Content }}
+<h2>API breaking</h2>
+{{ .Params.apiBreaking }}
+<h2>Known issues</h2>
+{{ .Params.knownIssues }}
+<h2>Getting the Binaries using Maven</h2>
+<h3>Binary Distributions</h3>
+<table class="tableblock frame-all grid-all stretch">
+  <thead>
+  <tr>
+    <td>Description</td>
+    <td>Download Link</td>
+    <td>PGP Signature file of download</td>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>Windows Distribution</td>
+    <td><a href="http://www.apache.org/dyn/closer.cgi/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.zip">apache-camel-{{ .Params.version }}.zip</a></td>
+    <td><a href="http://www.apache.org/dyn/closer.cgi/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.zip.asc">apache-camel-{{ .Params.version }}.zip.asc</a></td>
+  </tr>
+  <tr>
+    <td>Unix/Linux/Cygwin Distribution</td>
+    <td><a href="http://www.apache.org/dyn/closer.cgi/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.tar.gz">apache-camel-{{ .Params.version }}.tar.gz</a></td>
+    <td><a href="http://www.apache.org/dyn/closer.cgi/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}.tar.gz.asc">apache-camel-{{ .Params.version }}.tar.gz.asc</a></td>
+  </tr>
+  </tbody>
+</table>
+<h4>Source Distributions</h4>
+<table class="tableblock frame-all grid-all stretch">
+  <thead>
+  <tr>
+    <td>Description</td>
+    <td>Download Link</td>
+    <td>PGP Signature file of download</td>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>Source (zip)</td>
+    <td><a href="http://www.apache.org/dyn/closer.cgi/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}-src.zip">apache-camel-{{ .Params.version }}-src.zip</a></td>
+    <td><a href="http://www.apache.org/dyn/closer.cgi/camel/apache-camel/{{ .Params.version }}/apache-camel-{{ .Params.version }}-src.zip.asc">apache-camel-{{ .Params.version }}-src.zip.asc</a></td>
+  </tr>
+  </tbody>
+</table>
 
-  <h5>Git tag checkout</h5>
-  <pre>
-    git clone https://git-wip-us.apache.org/repos/asf/camel.git
-    cd camel
-    git checkout camel-{{ .Params.version }}
-  </pre>
-  <h5>Getting the Binaries using Maven</h5>
-  To use this release in your maven project, the proper dependency configuration that you should use in your Maven POM is:
-  <pre><code>
-  {{ htmlUnescape "<dependency>" }}
-  {{ htmlUnescape "  <groupId>org.apache.camel</groupId>" }}
-  {{ htmlUnescape "  <artifactId>camel-core</artifactId>" }}
-  {{ htmlUnescape "  <version>" }}{{ .Params.version }}{{ htmlUnescape "</version>" }}
-  {{ htmlUnescape "</dependency>" }}
-  </code></pre>
+<h3>Git tag checkout</h3>
+<pre>
+  git clone https://git-wip-us.apache.org/repos/asf/camel.git
+  cd camel
+  git checkout camel-{{ .Params.version }}
+</pre>
+<h5>Getting the Binaries using Maven</h5>
+To use this release in your maven project, the proper dependency configuration that you should use in your Maven POM is:
+<pre><code>
+{{ htmlUnescape "<dependency>" }}
+{{ htmlUnescape "  <groupId>org.apache.camel</groupId>" }}
+{{ htmlUnescape "  <artifactId>camel-core</artifactId>" }}
+{{ htmlUnescape "  <version>" }}{{ .Params.version }}{{ htmlUnescape "</version>" }}
+{{ htmlUnescape "</dependency>" }}
+</code></pre>
 
-  <h5>Changelog</h5>
-  For a more detailed view of new features and bug fixes, see the:<br/>
-  <a href="https://issues.apache.org/jira/secure/ReleaseNote.jspa?projectId=12311211&version={{ .Params.jiraVersionId }}">Release notes for {{ .Params.version }}</a>
-</div>
+<h3>Changelog</h3>
+For a more detailed view of new features and bug fixes, see the:<br/>
+<a href="https://issues.apache.org/jira/secure/ReleaseNote.jspa?projectId=12311211&version={{ .Params.jiraVersionId }}">Release notes for {{ .Params.version }}</a>
 
 {{ partial "footer.html" . }}
 htmlEscape
diff --git a/layouts/releases/list.html b/layouts/releases/list.html
index c20d7e5..424666b 100644
--- a/layouts/releases/list.html
+++ b/layouts/releases/list.html
@@ -1,25 +1,23 @@
 {{ partial "header.html" . }}
 
-<div class="container pb-5">
-  {{ .Content }}
+{{ .Content }}
 
-  <table class="table">
-    <caption>Releases by version</caption>
-    <thead>
-      <tr>
-        <td>Version</td>
-        <td>Preview</td>
-      </tr>
-    </thead>
-    <tbody>
-    {{ range .Pages }}
-      <tr>
-        <td><a href="{{ .RelPermalink }}">{{ .Params.version }}</a></td>
-        <td>{{ .Params.preview }}</td>
-      </tr>
-    {{ end }}
-    </tbody>
-  </table>
-</div>
+<table class="tableblock frame-all grid-all stretch">
+  <caption>Releases by version</caption>
+  <thead>
+    <tr>
+      <td>Version</td>
+      <td>Preview</td>
+    </tr>
+  </thead>
+  <tbody>
+  {{ range .Pages }}
+    <tr>
+      <td><a href="{{ .RelPermalink }}">{{ .Params.version }}</a></td>
+      <td>{{ .Params.preview }}</td>
+    </tr>
+  {{ end }}
+  </tbody>
+</table>
 
 {{ partial "footer.html" . }}
diff --git a/layouts/security-advisory/single.html b/layouts/security-advisory/single.html
index b52fffc..26fb41b 100644
--- a/layouts/security-advisory/single.html
+++ b/layouts/security-advisory/single.html
@@ -1,30 +1,36 @@
 {{ partial "header.html" . }}
 
-<div class="container pb-5">
-  <h4>Apache Camel security advisory: {{ .Params.cve }}</h4>
-  <h5>Severity</h5>
-  {{ .Params.severity }}
-  <h5>Summary</h5>
-  {{ .Params.summary }}
-  <h5>Versions affected</h5>
-  {{ .Params.affected }}
-  <h5>Versions fixed</h5>
-  {{ .Params.fixed }}
-  <h5>Description</h5>
-  {{ .Params.description }}
-  {{ with .Content }}
-  <h5>Notes</h5>
-  {{ . }}
-  {{ end }}
-  <h5>Mitigation</h5>
-  {{ .Params.mitigation | markdownify }}
-  <h5>Credit</h5>
-  {{ .Params.credit }}
-  <h5>References</h5>
-  <dl>
-    <dt>PGP signed advisory data: <a href="{{ .Params.cve }}.txt.asc">{{ .Params.cve }}.txt.asc</a></dt>
-    <dt>Mitre CVE Entry: <a href="https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2013-4330">https://cve.mitre.org/cgi-bin/cvename.cgi?name={{ .Params.cve }}</a></dt>
-  </dl>
+<div class="body">
+    <main role="main">
+        <article class="static doc">
+
+            <h2>Apache Camel security advisory: {{ .Params.cve }}</h2>
+            <h3>Severity</h3>
+            {{ .Params.severity }}
+            <h3>Summary</h3>
+            {{ .Params.summary }}
+            <h3>Versions affected</h3>
+            {{ .Params.affected }}
+            <h3>Versions fixed</h3>
+            {{ .Params.fixed }}
+            <h3>Description</h3>
+            {{ .Params.description }}
+            {{ with .Content }}
+            <h3>Notes</h3>
+            {{ . }}
+            {{ end }}
+            <h3>Mitigation</h3>
+            {{ .Params.mitigation | markdownify }}
+            <h3>Credit</h3>
+            {{ .Params.credit }}
+            <h3>References</h3>
+            <dl>
+              <dt>PGP signed advisory data: <a href="{{ .Params.cve }}.txt.asc">{{ .Params.cve }}.txt.asc</a></dt>
+              <dt>Mitre CVE Entry: <a href="https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2013-4330">https://cve.mitre.org/cgi-bin/cvename.cgi?name={{ .Params.cve }}</a></dt>
+            </dl>
+
+        </article>
+    </main>
 </div>
 
 {{ partial "footer.html" . }}
diff --git a/layouts/security/list.html b/layouts/security/list.html
index d7d71e2..03930b7 100644
--- a/layouts/security/list.html
+++ b/layouts/security/list.html
@@ -1,36 +1,42 @@
 {{ partial "header.html" . }}
 
-<div class="container pb-5">
-  {{ .Content }}
+<div class="body">
+    <main role="main">
+        <article class="static doc">
 
-  <table class="table">
-    <caption>Security advisories by year</caption>
-    <thead>
-      <tr>
-        <td>Reference</td>
-        <td>Affected</td>
-        <td>Fixed</td>
-        <td>CVSS score</td>
-        <td>Description</td>
-      </tr>
-    </thead>
-    <tbody>
-  {{ range .Pages.GroupByDate "2006" "desc" }}
-      <tr>
-        <th colspan="5" scope="row"><strong>{{ .Key }}</strong></th>
-      </tr>
-      {{ range .Pages }}
-      <tr>
-        <td><a href="{{ .RelPermalink }}">{{ .Params.cve }}</a></td>
-        <td>{{ .Params.affected }}</td>
-        <td>{{ .Params.fixed }}</td>
-        <td>{{ .Params.severity }}</td>
-        <td>{{ .Params.summary }}</td>
-      </tr>
-      {{ end }}
-  {{ end }}
-    </tbody>
-  </table>
+            {{ .Content }}
+
+            <table class="tableblock frame-all grid-all stretch">
+              <caption>Security advisories by year</caption>
+              <thead>
+                <tr>
+                  <td>Reference</td>
+                  <td>Affected</td>
+                  <td>Fixed</td>
+                  <td>CVSS score</td>
+                  <td>Description</td>
+                </tr>
+              </thead>
+              <tbody>
+            {{ range .Pages.GroupByDate "2006" "desc" }}
+                <tr>
+                  <th colspan="5" scope="row"><strong>{{ .Key }}</strong></th>
+                </tr>
+                {{ range .Pages }}
+                <tr>
+                  <td><a href="{{ .RelPermalink }}">{{ .Params.cve }}</a></td>
+                  <td>{{ .Params.affected }}</td>
+                  <td>{{ .Params.fixed }}</td>
+                  <td>{{ .Params.severity }}</td>
+                  <td>{{ .Params.summary }}</td>
+                </tr>
+                {{ end }}
+            {{ end }}
+              </tbody>
+            </table>
+
+        </article>
+    </main>
 </div>
 
 {{ partial "footer.html" . }}
diff --git a/layouts/shortcodes/bootstrap-table.html b/layouts/shortcodes/bootstrap-table.html
deleted file mode 100644
index 0f1bf06..0000000
--- a/layouts/shortcodes/bootstrap-table.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{{ $htmlTable := .Inner | markdownify }}
-{{ $class := .Get 0 }}
-{{ $old := "<table>" }}
-{{ $new := printf "<table class=\"%s\">" $class }}
-{{ $htmlTable := replace $htmlTable $old $new }}
-{{ $old := "<thead>" }}
-{{ $new := printf "<thead class=\"thead-light\">"}}
-{{ $htmlTable := replace $htmlTable $old $new }}
-{{ $htmlTable | safeHTML }}
diff --git a/layouts/shortcodes/div.html b/layouts/shortcodes/div.html
new file mode 100644
index 0000000..07f23fb
--- /dev/null
+++ b/layouts/shortcodes/div.html
@@ -0,0 +1,4 @@
+<div class="{{ .Get 0}}">
+  {{ $content := .Inner | markdownify }}
+  {{ $content | safeHTML }}
+</div>
diff --git a/layouts/shortcodes/section.html b/layouts/shortcodes/section.html
new file mode 100644
index 0000000..61e4506
--- /dev/null
+++ b/layouts/shortcodes/section.html
@@ -0,0 +1,4 @@
+<section class="{{ .Get 0 }}">
+  {{ $content := .Inner | markdownify }}
+  {{ $content | safeHTML }}
+</section>
diff --git a/layouts/shortcodes/table.html b/layouts/shortcodes/table.html
new file mode 100644
index 0000000..22ba0cd
--- /dev/null
+++ b/layouts/shortcodes/table.html
@@ -0,0 +1,3 @@
+{{ $htmlTable := .Inner | markdownify }}
+{{ $htmlTable := replace $htmlTable "<table>" "<table class=\"tableblock frame-all grid-all stretch\">" }}
+{{ $htmlTable | safeHTML }}
diff --git a/static/img/apache-20.png b/static/img/apache-20.png
new file mode 100644
index 0000000..66a980e
Binary files /dev/null and b/static/img/apache-20.png differ