Styled the other sections.

Add Background-Color to Navbar on scroll.

diff --git a/static/css/style.css b/static/css/style.css
index a285f697a212398de54fa66ffff207910b33c54d..df98d55af16bb09731177da4a439f2498a12f8ba 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -268,7 +268,7 @@ blockquote {
   margin: 0 0 1rem; }
 
 a {
-  color: #263238;
+  color: #b71c1c;
   text-decoration: none; }
   a:focus, a:hover {
     color: #014c8c;
@@ -382,25 +382,25 @@ h1, h2, h3, h4, h5, h6,
   color: inherit; }
 
 h1, .h1 {
-  font-size: 3rem; }
+  font-size: 2.25rem; }
 
 h2, .h2 {
-  font-size: 2.5rem; }
+  font-size: 2rem; }
 
 h3, .h3 {
-  font-size: 2.25rem; }
+  font-size: 1.5rem; }
 
 h4, .h4 {
-  font-size: 2rem; }
+  font-size: 1.25rem; }
 
 h5, .h5 {
-  font-size: 1.5rem; }
+  font-size: 1rem; }
 
 h6, .h6 {
-  font-size: 1.25rem; }
+  font-size: 0.75rem; }
 
 .lead {
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   font-weight: 300; }
 
 .display-1 {
@@ -409,12 +409,12 @@ h6, .h6 {
   line-height: 1.1; }
 
 .display-2 {
-  font-size: 5.5rem;
+  font-size: 3rem;
   font-weight: 300;
   line-height: 1.1; }
 
 .display-3 {
-  font-size: 4.5rem;
+  font-size: 2.25rem;
   font-weight: 300;
   line-height: 1.1; }
 
@@ -424,8 +424,8 @@ h6, .h6 {
   line-height: 1.1; }
 
 hr {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
   border: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1); }
 
@@ -500,7 +500,7 @@ mark,
   display: inline-block; }
 
 .figure-img {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
   line-height: 1; }
 
 .figure-caption {
@@ -1455,11 +1455,11 @@ fieldset[disabled] a.btn {
   pointer-events: none; }
 
 .btn-primary {
-  color: #b71c1c;
+  color: #fff;
   background-color: #b71c1c;
   border-color: #b71c1c; }
   .btn-primary:hover {
-    color: #b71c1c;
+    color: #fff;
     background-color: #8b1515;
     border-color: #821414; }
   .btn-primary:focus, .btn-primary.focus {
@@ -1469,7 +1469,7 @@ fieldset[disabled] a.btn {
     border-color: #b71c1c; }
   .btn-primary:active, .btn-primary.active,
   .show > .btn-primary.dropdown-toggle {
-    color: #b71c1c;
+    color: #fff;
     background-color: #8b1515;
     background-image: none;
     border-color: #821414; }
@@ -1696,7 +1696,7 @@ fieldset[disabled] a.btn {
 
 .btn-link {
   font-weight: normal;
-  color: #263238;
+  color: #b71c1c;
   border-radius: 0; }
   .btn-link, .btn-link:active, .btn-link.active, .btn-link:disabled {
     background-color: transparent; }
@@ -1803,7 +1803,7 @@ tbody.collapse.show {
 
 .dropdown-divider {
   height: 1px;
-  margin: 0.5rem 0;
+  margin: 0.75rem 0;
   overflow: hidden;
   background-color: #eceeef; }
 
@@ -2365,13 +2365,13 @@ tbody.collapse.show {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  padding: 0.5rem 1rem; }
+  padding: 1.5rem 1.5rem; }
 
 .navbar-brand {
   display: inline-block;
   padding-top: .25rem;
   padding-bottom: .25rem;
-  margin-right: 1rem;
+  margin-right: 1.5rem;
   font-size: 1.25rem;
   line-height: inherit;
   white-space: nowrap; }
@@ -2421,11 +2421,11 @@ tbody.collapse.show {
 
 .navbar-toggler-left {
   position: absolute;
-  left: 1rem; }
+  left: 1.5rem; }
 
 .navbar-toggler-right {
   position: absolute;
-  right: 1rem; }
+  right: 1.5rem; }
 
 @media (max-width: 575px) {
   .navbar-toggleable .navbar-nav .dropdown-menu {
@@ -4149,119 +4149,142 @@ a.bg-inverse:focus, a.bg-inverse:hover {
   margin-bottom: 0 !important; }
 
 .m-1 {
-  margin: 0.25rem 0.25rem !important; }
+  margin: 0.375rem 0.375rem !important; }
 
 .mt-1 {
-  margin-top: 0.25rem !important; }
+  margin-top: 0.375rem !important; }
 
 .mr-1 {
-  margin-right: 0.25rem !important; }
+  margin-right: 0.375rem !important; }
 
 .mb-1 {
-  margin-bottom: 0.25rem !important; }
+  margin-bottom: 0.375rem !important; }
 
 .ml-1 {
-  margin-left: 0.25rem !important; }
+  margin-left: 0.375rem !important; }
 
 .mx-1 {
-  margin-right: 0.25rem !important;
-  margin-left: 0.25rem !important; }
+  margin-right: 0.375rem !important;
+  margin-left: 0.375rem !important; }
 
 .my-1 {
-  margin-top: 0.25rem !important;
-  margin-bottom: 0.25rem !important; }
+  margin-top: 0.375rem !important;
+  margin-bottom: 0.375rem !important; }
 
 .m-2 {
-  margin: 0.5rem 0.5rem !important; }
+  margin: 0.75rem 0.75rem !important; }
 
 .mt-2 {
-  margin-top: 0.5rem !important; }
+  margin-top: 0.75rem !important; }
 
 .mr-2 {
-  margin-right: 0.5rem !important; }
+  margin-right: 0.75rem !important; }
 
 .mb-2 {
-  margin-bottom: 0.5rem !important; }
+  margin-bottom: 0.75rem !important; }
 
 .ml-2 {
-  margin-left: 0.5rem !important; }
+  margin-left: 0.75rem !important; }
 
 .mx-2 {
-  margin-right: 0.5rem !important;
-  margin-left: 0.5rem !important; }
+  margin-right: 0.75rem !important;
+  margin-left: 0.75rem !important; }
 
 .my-2 {
-  margin-top: 0.5rem !important;
-  margin-bottom: 0.5rem !important; }
+  margin-top: 0.75rem !important;
+  margin-bottom: 0.75rem !important; }
 
 .m-3 {
-  margin: 1rem 1rem !important; }
+  margin: 1.5rem 1.5rem !important; }
 
 .mt-3 {
-  margin-top: 1rem !important; }
+  margin-top: 1.5rem !important; }
 
 .mr-3 {
-  margin-right: 1rem !important; }
+  margin-right: 1.5rem !important; }
 
 .mb-3 {
-  margin-bottom: 1rem !important; }
+  margin-bottom: 1.5rem !important; }
 
 .ml-3 {
-  margin-left: 1rem !important; }
+  margin-left: 1.5rem !important; }
 
 .mx-3 {
-  margin-right: 1rem !important;
-  margin-left: 1rem !important; }
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important; }
 
 .my-3 {
-  margin-top: 1rem !important;
-  margin-bottom: 1rem !important; }
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important; }
 
 .m-4 {
-  margin: 1.5rem 1.5rem !important; }
+  margin: 2.25rem 2.25rem !important; }
 
 .mt-4 {
-  margin-top: 1.5rem !important; }
+  margin-top: 2.25rem !important; }
 
 .mr-4 {
-  margin-right: 1.5rem !important; }
+  margin-right: 2.25rem !important; }
 
 .mb-4 {
-  margin-bottom: 1.5rem !important; }
+  margin-bottom: 2.25rem !important; }
 
 .ml-4 {
-  margin-left: 1.5rem !important; }
+  margin-left: 2.25rem !important; }
 
 .mx-4 {
-  margin-right: 1.5rem !important;
-  margin-left: 1.5rem !important; }
+  margin-right: 2.25rem !important;
+  margin-left: 2.25rem !important; }
 
 .my-4 {
-  margin-top: 1.5rem !important;
-  margin-bottom: 1.5rem !important; }
+  margin-top: 2.25rem !important;
+  margin-bottom: 2.25rem !important; }
 
 .m-5 {
-  margin: 3rem 3rem !important; }
+  margin: 4.5rem 4.5rem !important; }
 
 .mt-5 {
-  margin-top: 3rem !important; }
+  margin-top: 4.5rem !important; }
 
 .mr-5 {
-  margin-right: 3rem !important; }
+  margin-right: 4.5rem !important; }
 
 .mb-5 {
-  margin-bottom: 3rem !important; }
+  margin-bottom: 4.5rem !important; }
 
 .ml-5 {
-  margin-left: 3rem !important; }
+  margin-left: 4.5rem !important; }
 
 .mx-5 {
-  margin-right: 3rem !important;
-  margin-left: 3rem !important; }
+  margin-right: 4.5rem !important;
+  margin-left: 4.5rem !important; }
 
 .my-5 {
-  margin-top: 3rem !important;
-  margin-bottom: 3rem !important; }
+  margin-top: 4.5rem !important;
+  margin-bottom: 4.5rem !important; }
+
+.m-6 {
+  margin: 6rem 6rem !important; }
+
+.mt-6 {
+  margin-top: 6rem !important; }
+
+.mr-6 {
+  margin-right: 6rem !important; }
+
+.mb-6 {
+  margin-bottom: 6rem !important; }
+
+.ml-6 {
+  margin-left: 6rem !important; }
+
+.mx-6 {
+  margin-right: 6rem !important;
+  margin-left: 6rem !important; }
+
+.my-6 {
+  margin-top: 6rem !important;
+  margin-bottom: 6rem !important; }
 
 .p-0 {
   padding: 0 0 !important; }
@@ -4287,119 +4310,142 @@ a.bg-inverse:focus, a.bg-inverse:hover {
   padding-bottom: 0 !important; }
 
 .p-1 {
-  padding: 0.25rem 0.25rem !important; }
+  padding: 0.375rem 0.375rem !important; }
 
 .pt-1 {
-  padding-top: 0.25rem !important; }
+  padding-top: 0.375rem !important; }
 
 .pr-1 {
-  padding-right: 0.25rem !important; }
+  padding-right: 0.375rem !important; }
 
 .pb-1 {
-  padding-bottom: 0.25rem !important; }
+  padding-bottom: 0.375rem !important; }
 
 .pl-1 {
-  padding-left: 0.25rem !important; }
+  padding-left: 0.375rem !important; }
 
 .px-1 {
-  padding-right: 0.25rem !important;
-  padding-left: 0.25rem !important; }
+  padding-right: 0.375rem !important;
+  padding-left: 0.375rem !important; }
 
 .py-1 {
-  padding-top: 0.25rem !important;
-  padding-bottom: 0.25rem !important; }
+  padding-top: 0.375rem !important;
+  padding-bottom: 0.375rem !important; }
 
 .p-2 {
-  padding: 0.5rem 0.5rem !important; }
+  padding: 0.75rem 0.75rem !important; }
 
 .pt-2 {
-  padding-top: 0.5rem !important; }
+  padding-top: 0.75rem !important; }
 
 .pr-2 {
-  padding-right: 0.5rem !important; }
+  padding-right: 0.75rem !important; }
 
 .pb-2 {
-  padding-bottom: 0.5rem !important; }
+  padding-bottom: 0.75rem !important; }
 
 .pl-2 {
-  padding-left: 0.5rem !important; }
+  padding-left: 0.75rem !important; }
 
 .px-2 {
-  padding-right: 0.5rem !important;
-  padding-left: 0.5rem !important; }
+  padding-right: 0.75rem !important;
+  padding-left: 0.75rem !important; }
 
 .py-2 {
-  padding-top: 0.5rem !important;
-  padding-bottom: 0.5rem !important; }
+  padding-top: 0.75rem !important;
+  padding-bottom: 0.75rem !important; }
 
 .p-3 {
-  padding: 1rem 1rem !important; }
+  padding: 1.5rem 1.5rem !important; }
 
 .pt-3 {
-  padding-top: 1rem !important; }
+  padding-top: 1.5rem !important; }
 
 .pr-3 {
-  padding-right: 1rem !important; }
+  padding-right: 1.5rem !important; }
 
 .pb-3 {
-  padding-bottom: 1rem !important; }
+  padding-bottom: 1.5rem !important; }
 
 .pl-3 {
-  padding-left: 1rem !important; }
+  padding-left: 1.5rem !important; }
 
 .px-3 {
-  padding-right: 1rem !important;
-  padding-left: 1rem !important; }
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important; }
 
 .py-3 {
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important; }
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important; }
 
 .p-4 {
-  padding: 1.5rem 1.5rem !important; }
+  padding: 2.25rem 2.25rem !important; }
 
 .pt-4 {
-  padding-top: 1.5rem !important; }
+  padding-top: 2.25rem !important; }
 
 .pr-4 {
-  padding-right: 1.5rem !important; }
+  padding-right: 2.25rem !important; }
 
 .pb-4 {
-  padding-bottom: 1.5rem !important; }
+  padding-bottom: 2.25rem !important; }
 
 .pl-4 {
-  padding-left: 1.5rem !important; }
+  padding-left: 2.25rem !important; }
 
 .px-4 {
-  padding-right: 1.5rem !important;
-  padding-left: 1.5rem !important; }
+  padding-right: 2.25rem !important;
+  padding-left: 2.25rem !important; }
 
 .py-4 {
-  padding-top: 1.5rem !important;
-  padding-bottom: 1.5rem !important; }
+  padding-top: 2.25rem !important;
+  padding-bottom: 2.25rem !important; }
 
 .p-5 {
-  padding: 3rem 3rem !important; }
+  padding: 4.5rem 4.5rem !important; }
 
 .pt-5 {
-  padding-top: 3rem !important; }
+  padding-top: 4.5rem !important; }
 
 .pr-5 {
-  padding-right: 3rem !important; }
+  padding-right: 4.5rem !important; }
 
 .pb-5 {
-  padding-bottom: 3rem !important; }
+  padding-bottom: 4.5rem !important; }
 
 .pl-5 {
-  padding-left: 3rem !important; }
+  padding-left: 4.5rem !important; }
 
 .px-5 {
-  padding-right: 3rem !important;
-  padding-left: 3rem !important; }
+  padding-right: 4.5rem !important;
+  padding-left: 4.5rem !important; }
 
 .py-5 {
-  padding-top: 3rem !important;
-  padding-bottom: 3rem !important; }
+  padding-top: 4.5rem !important;
+  padding-bottom: 4.5rem !important; }
+
+.p-6 {
+  padding: 6rem 6rem !important; }
+
+.pt-6 {
+  padding-top: 6rem !important; }
+
+.pr-6 {
+  padding-right: 6rem !important; }
+
+.pb-6 {
+  padding-bottom: 6rem !important; }
+
+.pl-6 {
+  padding-left: 6rem !important; }
+
+.px-6 {
+  padding-right: 6rem !important;
+  padding-left: 6rem !important; }
+
+.py-6 {
+  padding-top: 6rem !important;
+  padding-bottom: 6rem !important; }
 
 .m-auto {
   margin: auto !important; }
@@ -4442,85 +4488,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     margin-top: 0 !important;
     margin-bottom: 0 !important; }
   .m-sm-1 {
-    margin: 0.25rem 0.25rem !important; }
+    margin: 0.375rem 0.375rem !important; }
   .mt-sm-1 {
-    margin-top: 0.25rem !important; }
+    margin-top: 0.375rem !important; }
   .mr-sm-1 {
-    margin-right: 0.25rem !important; }
+    margin-right: 0.375rem !important; }
   .mb-sm-1 {
-    margin-bottom: 0.25rem !important; }
+    margin-bottom: 0.375rem !important; }
   .ml-sm-1 {
-    margin-left: 0.25rem !important; }
+    margin-left: 0.375rem !important; }
   .mx-sm-1 {
-    margin-right: 0.25rem !important;
-    margin-left: 0.25rem !important; }
+    margin-right: 0.375rem !important;
+    margin-left: 0.375rem !important; }
   .my-sm-1 {
-    margin-top: 0.25rem !important;
-    margin-bottom: 0.25rem !important; }
+    margin-top: 0.375rem !important;
+    margin-bottom: 0.375rem !important; }
   .m-sm-2 {
-    margin: 0.5rem 0.5rem !important; }
+    margin: 0.75rem 0.75rem !important; }
   .mt-sm-2 {
-    margin-top: 0.5rem !important; }
+    margin-top: 0.75rem !important; }
   .mr-sm-2 {
-    margin-right: 0.5rem !important; }
+    margin-right: 0.75rem !important; }
   .mb-sm-2 {
-    margin-bottom: 0.5rem !important; }
+    margin-bottom: 0.75rem !important; }
   .ml-sm-2 {
-    margin-left: 0.5rem !important; }
+    margin-left: 0.75rem !important; }
   .mx-sm-2 {
-    margin-right: 0.5rem !important;
-    margin-left: 0.5rem !important; }
+    margin-right: 0.75rem !important;
+    margin-left: 0.75rem !important; }
   .my-sm-2 {
-    margin-top: 0.5rem !important;
-    margin-bottom: 0.5rem !important; }
+    margin-top: 0.75rem !important;
+    margin-bottom: 0.75rem !important; }
   .m-sm-3 {
-    margin: 1rem 1rem !important; }
+    margin: 1.5rem 1.5rem !important; }
   .mt-sm-3 {
-    margin-top: 1rem !important; }
+    margin-top: 1.5rem !important; }
   .mr-sm-3 {
-    margin-right: 1rem !important; }
+    margin-right: 1.5rem !important; }
   .mb-sm-3 {
-    margin-bottom: 1rem !important; }
+    margin-bottom: 1.5rem !important; }
   .ml-sm-3 {
-    margin-left: 1rem !important; }
+    margin-left: 1.5rem !important; }
   .mx-sm-3 {
-    margin-right: 1rem !important;
-    margin-left: 1rem !important; }
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important; }
   .my-sm-3 {
-    margin-top: 1rem !important;
-    margin-bottom: 1rem !important; }
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important; }
   .m-sm-4 {
-    margin: 1.5rem 1.5rem !important; }
+    margin: 2.25rem 2.25rem !important; }
   .mt-sm-4 {
-    margin-top: 1.5rem !important; }
+    margin-top: 2.25rem !important; }
   .mr-sm-4 {
-    margin-right: 1.5rem !important; }
+    margin-right: 2.25rem !important; }
   .mb-sm-4 {
-    margin-bottom: 1.5rem !important; }
+    margin-bottom: 2.25rem !important; }
   .ml-sm-4 {
-    margin-left: 1.5rem !important; }
+    margin-left: 2.25rem !important; }
   .mx-sm-4 {
-    margin-right: 1.5rem !important;
-    margin-left: 1.5rem !important; }
+    margin-right: 2.25rem !important;
+    margin-left: 2.25rem !important; }
   .my-sm-4 {
-    margin-top: 1.5rem !important;
-    margin-bottom: 1.5rem !important; }
+    margin-top: 2.25rem !important;
+    margin-bottom: 2.25rem !important; }
   .m-sm-5 {
-    margin: 3rem 3rem !important; }
+    margin: 4.5rem 4.5rem !important; }
   .mt-sm-5 {
-    margin-top: 3rem !important; }
+    margin-top: 4.5rem !important; }
   .mr-sm-5 {
-    margin-right: 3rem !important; }
+    margin-right: 4.5rem !important; }
   .mb-sm-5 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 4.5rem !important; }
   .ml-sm-5 {
-    margin-left: 3rem !important; }
+    margin-left: 4.5rem !important; }
   .mx-sm-5 {
-    margin-right: 3rem !important;
-    margin-left: 3rem !important; }
+    margin-right: 4.5rem !important;
+    margin-left: 4.5rem !important; }
   .my-sm-5 {
-    margin-top: 3rem !important;
-    margin-bottom: 3rem !important; }
+    margin-top: 4.5rem !important;
+    margin-bottom: 4.5rem !important; }
+  .m-sm-6 {
+    margin: 6rem 6rem !important; }
+  .mt-sm-6 {
+    margin-top: 6rem !important; }
+  .mr-sm-6 {
+    margin-right: 6rem !important; }
+  .mb-sm-6 {
+    margin-bottom: 6rem !important; }
+  .ml-sm-6 {
+    margin-left: 6rem !important; }
+  .mx-sm-6 {
+    margin-right: 6rem !important;
+    margin-left: 6rem !important; }
+  .my-sm-6 {
+    margin-top: 6rem !important;
+    margin-bottom: 6rem !important; }
   .p-sm-0 {
     padding: 0 0 !important; }
   .pt-sm-0 {
@@ -4538,85 +4600,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
   .p-sm-1 {
-    padding: 0.25rem 0.25rem !important; }
+    padding: 0.375rem 0.375rem !important; }
   .pt-sm-1 {
-    padding-top: 0.25rem !important; }
+    padding-top: 0.375rem !important; }
   .pr-sm-1 {
-    padding-right: 0.25rem !important; }
+    padding-right: 0.375rem !important; }
   .pb-sm-1 {
-    padding-bottom: 0.25rem !important; }
+    padding-bottom: 0.375rem !important; }
   .pl-sm-1 {
-    padding-left: 0.25rem !important; }
+    padding-left: 0.375rem !important; }
   .px-sm-1 {
-    padding-right: 0.25rem !important;
-    padding-left: 0.25rem !important; }
+    padding-right: 0.375rem !important;
+    padding-left: 0.375rem !important; }
   .py-sm-1 {
-    padding-top: 0.25rem !important;
-    padding-bottom: 0.25rem !important; }
+    padding-top: 0.375rem !important;
+    padding-bottom: 0.375rem !important; }
   .p-sm-2 {
-    padding: 0.5rem 0.5rem !important; }
+    padding: 0.75rem 0.75rem !important; }
   .pt-sm-2 {
-    padding-top: 0.5rem !important; }
+    padding-top: 0.75rem !important; }
   .pr-sm-2 {
-    padding-right: 0.5rem !important; }
+    padding-right: 0.75rem !important; }
   .pb-sm-2 {
-    padding-bottom: 0.5rem !important; }
+    padding-bottom: 0.75rem !important; }
   .pl-sm-2 {
-    padding-left: 0.5rem !important; }
+    padding-left: 0.75rem !important; }
   .px-sm-2 {
-    padding-right: 0.5rem !important;
-    padding-left: 0.5rem !important; }
+    padding-right: 0.75rem !important;
+    padding-left: 0.75rem !important; }
   .py-sm-2 {
-    padding-top: 0.5rem !important;
-    padding-bottom: 0.5rem !important; }
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important; }
   .p-sm-3 {
-    padding: 1rem 1rem !important; }
+    padding: 1.5rem 1.5rem !important; }
   .pt-sm-3 {
-    padding-top: 1rem !important; }
+    padding-top: 1.5rem !important; }
   .pr-sm-3 {
-    padding-right: 1rem !important; }
+    padding-right: 1.5rem !important; }
   .pb-sm-3 {
-    padding-bottom: 1rem !important; }
+    padding-bottom: 1.5rem !important; }
   .pl-sm-3 {
-    padding-left: 1rem !important; }
+    padding-left: 1.5rem !important; }
   .px-sm-3 {
-    padding-right: 1rem !important;
-    padding-left: 1rem !important; }
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important; }
   .py-sm-3 {
-    padding-top: 1rem !important;
-    padding-bottom: 1rem !important; }
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important; }
   .p-sm-4 {
-    padding: 1.5rem 1.5rem !important; }
+    padding: 2.25rem 2.25rem !important; }
   .pt-sm-4 {
-    padding-top: 1.5rem !important; }
+    padding-top: 2.25rem !important; }
   .pr-sm-4 {
-    padding-right: 1.5rem !important; }
+    padding-right: 2.25rem !important; }
   .pb-sm-4 {
-    padding-bottom: 1.5rem !important; }
+    padding-bottom: 2.25rem !important; }
   .pl-sm-4 {
-    padding-left: 1.5rem !important; }
+    padding-left: 2.25rem !important; }
   .px-sm-4 {
-    padding-right: 1.5rem !important;
-    padding-left: 1.5rem !important; }
+    padding-right: 2.25rem !important;
+    padding-left: 2.25rem !important; }
   .py-sm-4 {
-    padding-top: 1.5rem !important;
-    padding-bottom: 1.5rem !important; }
+    padding-top: 2.25rem !important;
+    padding-bottom: 2.25rem !important; }
   .p-sm-5 {
-    padding: 3rem 3rem !important; }
+    padding: 4.5rem 4.5rem !important; }
   .pt-sm-5 {
-    padding-top: 3rem !important; }
+    padding-top: 4.5rem !important; }
   .pr-sm-5 {
-    padding-right: 3rem !important; }
+    padding-right: 4.5rem !important; }
   .pb-sm-5 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 4.5rem !important; }
   .pl-sm-5 {
-    padding-left: 3rem !important; }
+    padding-left: 4.5rem !important; }
   .px-sm-5 {
-    padding-right: 3rem !important;
-    padding-left: 3rem !important; }
+    padding-right: 4.5rem !important;
+    padding-left: 4.5rem !important; }
   .py-sm-5 {
-    padding-top: 3rem !important;
-    padding-bottom: 3rem !important; }
+    padding-top: 4.5rem !important;
+    padding-bottom: 4.5rem !important; }
+  .p-sm-6 {
+    padding: 6rem 6rem !important; }
+  .pt-sm-6 {
+    padding-top: 6rem !important; }
+  .pr-sm-6 {
+    padding-right: 6rem !important; }
+  .pb-sm-6 {
+    padding-bottom: 6rem !important; }
+  .pl-sm-6 {
+    padding-left: 6rem !important; }
+  .px-sm-6 {
+    padding-right: 6rem !important;
+    padding-left: 6rem !important; }
+  .py-sm-6 {
+    padding-top: 6rem !important;
+    padding-bottom: 6rem !important; }
   .m-sm-auto {
     margin: auto !important; }
   .mt-sm-auto {
@@ -4652,85 +4730,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     margin-top: 0 !important;
     margin-bottom: 0 !important; }
   .m-md-1 {
-    margin: 0.25rem 0.25rem !important; }
+    margin: 0.375rem 0.375rem !important; }
   .mt-md-1 {
-    margin-top: 0.25rem !important; }
+    margin-top: 0.375rem !important; }
   .mr-md-1 {
-    margin-right: 0.25rem !important; }
+    margin-right: 0.375rem !important; }
   .mb-md-1 {
-    margin-bottom: 0.25rem !important; }
+    margin-bottom: 0.375rem !important; }
   .ml-md-1 {
-    margin-left: 0.25rem !important; }
+    margin-left: 0.375rem !important; }
   .mx-md-1 {
-    margin-right: 0.25rem !important;
-    margin-left: 0.25rem !important; }
+    margin-right: 0.375rem !important;
+    margin-left: 0.375rem !important; }
   .my-md-1 {
-    margin-top: 0.25rem !important;
-    margin-bottom: 0.25rem !important; }
+    margin-top: 0.375rem !important;
+    margin-bottom: 0.375rem !important; }
   .m-md-2 {
-    margin: 0.5rem 0.5rem !important; }
+    margin: 0.75rem 0.75rem !important; }
   .mt-md-2 {
-    margin-top: 0.5rem !important; }
+    margin-top: 0.75rem !important; }
   .mr-md-2 {
-    margin-right: 0.5rem !important; }
+    margin-right: 0.75rem !important; }
   .mb-md-2 {
-    margin-bottom: 0.5rem !important; }
+    margin-bottom: 0.75rem !important; }
   .ml-md-2 {
-    margin-left: 0.5rem !important; }
+    margin-left: 0.75rem !important; }
   .mx-md-2 {
-    margin-right: 0.5rem !important;
-    margin-left: 0.5rem !important; }
+    margin-right: 0.75rem !important;
+    margin-left: 0.75rem !important; }
   .my-md-2 {
-    margin-top: 0.5rem !important;
-    margin-bottom: 0.5rem !important; }
+    margin-top: 0.75rem !important;
+    margin-bottom: 0.75rem !important; }
   .m-md-3 {
-    margin: 1rem 1rem !important; }
+    margin: 1.5rem 1.5rem !important; }
   .mt-md-3 {
-    margin-top: 1rem !important; }
+    margin-top: 1.5rem !important; }
   .mr-md-3 {
-    margin-right: 1rem !important; }
+    margin-right: 1.5rem !important; }
   .mb-md-3 {
-    margin-bottom: 1rem !important; }
+    margin-bottom: 1.5rem !important; }
   .ml-md-3 {
-    margin-left: 1rem !important; }
+    margin-left: 1.5rem !important; }
   .mx-md-3 {
-    margin-right: 1rem !important;
-    margin-left: 1rem !important; }
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important; }
   .my-md-3 {
-    margin-top: 1rem !important;
-    margin-bottom: 1rem !important; }
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important; }
   .m-md-4 {
-    margin: 1.5rem 1.5rem !important; }
+    margin: 2.25rem 2.25rem !important; }
   .mt-md-4 {
-    margin-top: 1.5rem !important; }
+    margin-top: 2.25rem !important; }
   .mr-md-4 {
-    margin-right: 1.5rem !important; }
+    margin-right: 2.25rem !important; }
   .mb-md-4 {
-    margin-bottom: 1.5rem !important; }
+    margin-bottom: 2.25rem !important; }
   .ml-md-4 {
-    margin-left: 1.5rem !important; }
+    margin-left: 2.25rem !important; }
   .mx-md-4 {
-    margin-right: 1.5rem !important;
-    margin-left: 1.5rem !important; }
+    margin-right: 2.25rem !important;
+    margin-left: 2.25rem !important; }
   .my-md-4 {
-    margin-top: 1.5rem !important;
-    margin-bottom: 1.5rem !important; }
+    margin-top: 2.25rem !important;
+    margin-bottom: 2.25rem !important; }
   .m-md-5 {
-    margin: 3rem 3rem !important; }
+    margin: 4.5rem 4.5rem !important; }
   .mt-md-5 {
-    margin-top: 3rem !important; }
+    margin-top: 4.5rem !important; }
   .mr-md-5 {
-    margin-right: 3rem !important; }
+    margin-right: 4.5rem !important; }
   .mb-md-5 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 4.5rem !important; }
   .ml-md-5 {
-    margin-left: 3rem !important; }
+    margin-left: 4.5rem !important; }
   .mx-md-5 {
-    margin-right: 3rem !important;
-    margin-left: 3rem !important; }
+    margin-right: 4.5rem !important;
+    margin-left: 4.5rem !important; }
   .my-md-5 {
-    margin-top: 3rem !important;
-    margin-bottom: 3rem !important; }
+    margin-top: 4.5rem !important;
+    margin-bottom: 4.5rem !important; }
+  .m-md-6 {
+    margin: 6rem 6rem !important; }
+  .mt-md-6 {
+    margin-top: 6rem !important; }
+  .mr-md-6 {
+    margin-right: 6rem !important; }
+  .mb-md-6 {
+    margin-bottom: 6rem !important; }
+  .ml-md-6 {
+    margin-left: 6rem !important; }
+  .mx-md-6 {
+    margin-right: 6rem !important;
+    margin-left: 6rem !important; }
+  .my-md-6 {
+    margin-top: 6rem !important;
+    margin-bottom: 6rem !important; }
   .p-md-0 {
     padding: 0 0 !important; }
   .pt-md-0 {
@@ -4748,85 +4842,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
   .p-md-1 {
-    padding: 0.25rem 0.25rem !important; }
+    padding: 0.375rem 0.375rem !important; }
   .pt-md-1 {
-    padding-top: 0.25rem !important; }
+    padding-top: 0.375rem !important; }
   .pr-md-1 {
-    padding-right: 0.25rem !important; }
+    padding-right: 0.375rem !important; }
   .pb-md-1 {
-    padding-bottom: 0.25rem !important; }
+    padding-bottom: 0.375rem !important; }
   .pl-md-1 {
-    padding-left: 0.25rem !important; }
+    padding-left: 0.375rem !important; }
   .px-md-1 {
-    padding-right: 0.25rem !important;
-    padding-left: 0.25rem !important; }
+    padding-right: 0.375rem !important;
+    padding-left: 0.375rem !important; }
   .py-md-1 {
-    padding-top: 0.25rem !important;
-    padding-bottom: 0.25rem !important; }
+    padding-top: 0.375rem !important;
+    padding-bottom: 0.375rem !important; }
   .p-md-2 {
-    padding: 0.5rem 0.5rem !important; }
+    padding: 0.75rem 0.75rem !important; }
   .pt-md-2 {
-    padding-top: 0.5rem !important; }
+    padding-top: 0.75rem !important; }
   .pr-md-2 {
-    padding-right: 0.5rem !important; }
+    padding-right: 0.75rem !important; }
   .pb-md-2 {
-    padding-bottom: 0.5rem !important; }
+    padding-bottom: 0.75rem !important; }
   .pl-md-2 {
-    padding-left: 0.5rem !important; }
+    padding-left: 0.75rem !important; }
   .px-md-2 {
-    padding-right: 0.5rem !important;
-    padding-left: 0.5rem !important; }
+    padding-right: 0.75rem !important;
+    padding-left: 0.75rem !important; }
   .py-md-2 {
-    padding-top: 0.5rem !important;
-    padding-bottom: 0.5rem !important; }
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important; }
   .p-md-3 {
-    padding: 1rem 1rem !important; }
+    padding: 1.5rem 1.5rem !important; }
   .pt-md-3 {
-    padding-top: 1rem !important; }
+    padding-top: 1.5rem !important; }
   .pr-md-3 {
-    padding-right: 1rem !important; }
+    padding-right: 1.5rem !important; }
   .pb-md-3 {
-    padding-bottom: 1rem !important; }
+    padding-bottom: 1.5rem !important; }
   .pl-md-3 {
-    padding-left: 1rem !important; }
+    padding-left: 1.5rem !important; }
   .px-md-3 {
-    padding-right: 1rem !important;
-    padding-left: 1rem !important; }
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important; }
   .py-md-3 {
-    padding-top: 1rem !important;
-    padding-bottom: 1rem !important; }
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important; }
   .p-md-4 {
-    padding: 1.5rem 1.5rem !important; }
+    padding: 2.25rem 2.25rem !important; }
   .pt-md-4 {
-    padding-top: 1.5rem !important; }
+    padding-top: 2.25rem !important; }
   .pr-md-4 {
-    padding-right: 1.5rem !important; }
+    padding-right: 2.25rem !important; }
   .pb-md-4 {
-    padding-bottom: 1.5rem !important; }
+    padding-bottom: 2.25rem !important; }
   .pl-md-4 {
-    padding-left: 1.5rem !important; }
+    padding-left: 2.25rem !important; }
   .px-md-4 {
-    padding-right: 1.5rem !important;
-    padding-left: 1.5rem !important; }
+    padding-right: 2.25rem !important;
+    padding-left: 2.25rem !important; }
   .py-md-4 {
-    padding-top: 1.5rem !important;
-    padding-bottom: 1.5rem !important; }
+    padding-top: 2.25rem !important;
+    padding-bottom: 2.25rem !important; }
   .p-md-5 {
-    padding: 3rem 3rem !important; }
+    padding: 4.5rem 4.5rem !important; }
   .pt-md-5 {
-    padding-top: 3rem !important; }
+    padding-top: 4.5rem !important; }
   .pr-md-5 {
-    padding-right: 3rem !important; }
+    padding-right: 4.5rem !important; }
   .pb-md-5 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 4.5rem !important; }
   .pl-md-5 {
-    padding-left: 3rem !important; }
+    padding-left: 4.5rem !important; }
   .px-md-5 {
-    padding-right: 3rem !important;
-    padding-left: 3rem !important; }
+    padding-right: 4.5rem !important;
+    padding-left: 4.5rem !important; }
   .py-md-5 {
-    padding-top: 3rem !important;
-    padding-bottom: 3rem !important; }
+    padding-top: 4.5rem !important;
+    padding-bottom: 4.5rem !important; }
+  .p-md-6 {
+    padding: 6rem 6rem !important; }
+  .pt-md-6 {
+    padding-top: 6rem !important; }
+  .pr-md-6 {
+    padding-right: 6rem !important; }
+  .pb-md-6 {
+    padding-bottom: 6rem !important; }
+  .pl-md-6 {
+    padding-left: 6rem !important; }
+  .px-md-6 {
+    padding-right: 6rem !important;
+    padding-left: 6rem !important; }
+  .py-md-6 {
+    padding-top: 6rem !important;
+    padding-bottom: 6rem !important; }
   .m-md-auto {
     margin: auto !important; }
   .mt-md-auto {
@@ -4862,85 +4972,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     margin-top: 0 !important;
     margin-bottom: 0 !important; }
   .m-lg-1 {
-    margin: 0.25rem 0.25rem !important; }
+    margin: 0.375rem 0.375rem !important; }
   .mt-lg-1 {
-    margin-top: 0.25rem !important; }
+    margin-top: 0.375rem !important; }
   .mr-lg-1 {
-    margin-right: 0.25rem !important; }
+    margin-right: 0.375rem !important; }
   .mb-lg-1 {
-    margin-bottom: 0.25rem !important; }
+    margin-bottom: 0.375rem !important; }
   .ml-lg-1 {
-    margin-left: 0.25rem !important; }
+    margin-left: 0.375rem !important; }
   .mx-lg-1 {
-    margin-right: 0.25rem !important;
-    margin-left: 0.25rem !important; }
+    margin-right: 0.375rem !important;
+    margin-left: 0.375rem !important; }
   .my-lg-1 {
-    margin-top: 0.25rem !important;
-    margin-bottom: 0.25rem !important; }
+    margin-top: 0.375rem !important;
+    margin-bottom: 0.375rem !important; }
   .m-lg-2 {
-    margin: 0.5rem 0.5rem !important; }
+    margin: 0.75rem 0.75rem !important; }
   .mt-lg-2 {
-    margin-top: 0.5rem !important; }
+    margin-top: 0.75rem !important; }
   .mr-lg-2 {
-    margin-right: 0.5rem !important; }
+    margin-right: 0.75rem !important; }
   .mb-lg-2 {
-    margin-bottom: 0.5rem !important; }
+    margin-bottom: 0.75rem !important; }
   .ml-lg-2 {
-    margin-left: 0.5rem !important; }
+    margin-left: 0.75rem !important; }
   .mx-lg-2 {
-    margin-right: 0.5rem !important;
-    margin-left: 0.5rem !important; }
+    margin-right: 0.75rem !important;
+    margin-left: 0.75rem !important; }
   .my-lg-2 {
-    margin-top: 0.5rem !important;
-    margin-bottom: 0.5rem !important; }
+    margin-top: 0.75rem !important;
+    margin-bottom: 0.75rem !important; }
   .m-lg-3 {
-    margin: 1rem 1rem !important; }
+    margin: 1.5rem 1.5rem !important; }
   .mt-lg-3 {
-    margin-top: 1rem !important; }
+    margin-top: 1.5rem !important; }
   .mr-lg-3 {
-    margin-right: 1rem !important; }
+    margin-right: 1.5rem !important; }
   .mb-lg-3 {
-    margin-bottom: 1rem !important; }
+    margin-bottom: 1.5rem !important; }
   .ml-lg-3 {
-    margin-left: 1rem !important; }
+    margin-left: 1.5rem !important; }
   .mx-lg-3 {
-    margin-right: 1rem !important;
-    margin-left: 1rem !important; }
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important; }
   .my-lg-3 {
-    margin-top: 1rem !important;
-    margin-bottom: 1rem !important; }
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important; }
   .m-lg-4 {
-    margin: 1.5rem 1.5rem !important; }
+    margin: 2.25rem 2.25rem !important; }
   .mt-lg-4 {
-    margin-top: 1.5rem !important; }
+    margin-top: 2.25rem !important; }
   .mr-lg-4 {
-    margin-right: 1.5rem !important; }
+    margin-right: 2.25rem !important; }
   .mb-lg-4 {
-    margin-bottom: 1.5rem !important; }
+    margin-bottom: 2.25rem !important; }
   .ml-lg-4 {
-    margin-left: 1.5rem !important; }
+    margin-left: 2.25rem !important; }
   .mx-lg-4 {
-    margin-right: 1.5rem !important;
-    margin-left: 1.5rem !important; }
+    margin-right: 2.25rem !important;
+    margin-left: 2.25rem !important; }
   .my-lg-4 {
-    margin-top: 1.5rem !important;
-    margin-bottom: 1.5rem !important; }
+    margin-top: 2.25rem !important;
+    margin-bottom: 2.25rem !important; }
   .m-lg-5 {
-    margin: 3rem 3rem !important; }
+    margin: 4.5rem 4.5rem !important; }
   .mt-lg-5 {
-    margin-top: 3rem !important; }
+    margin-top: 4.5rem !important; }
   .mr-lg-5 {
-    margin-right: 3rem !important; }
+    margin-right: 4.5rem !important; }
   .mb-lg-5 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 4.5rem !important; }
   .ml-lg-5 {
-    margin-left: 3rem !important; }
+    margin-left: 4.5rem !important; }
   .mx-lg-5 {
-    margin-right: 3rem !important;
-    margin-left: 3rem !important; }
+    margin-right: 4.5rem !important;
+    margin-left: 4.5rem !important; }
   .my-lg-5 {
-    margin-top: 3rem !important;
-    margin-bottom: 3rem !important; }
+    margin-top: 4.5rem !important;
+    margin-bottom: 4.5rem !important; }
+  .m-lg-6 {
+    margin: 6rem 6rem !important; }
+  .mt-lg-6 {
+    margin-top: 6rem !important; }
+  .mr-lg-6 {
+    margin-right: 6rem !important; }
+  .mb-lg-6 {
+    margin-bottom: 6rem !important; }
+  .ml-lg-6 {
+    margin-left: 6rem !important; }
+  .mx-lg-6 {
+    margin-right: 6rem !important;
+    margin-left: 6rem !important; }
+  .my-lg-6 {
+    margin-top: 6rem !important;
+    margin-bottom: 6rem !important; }
   .p-lg-0 {
     padding: 0 0 !important; }
   .pt-lg-0 {
@@ -4958,85 +5084,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
   .p-lg-1 {
-    padding: 0.25rem 0.25rem !important; }
+    padding: 0.375rem 0.375rem !important; }
   .pt-lg-1 {
-    padding-top: 0.25rem !important; }
+    padding-top: 0.375rem !important; }
   .pr-lg-1 {
-    padding-right: 0.25rem !important; }
+    padding-right: 0.375rem !important; }
   .pb-lg-1 {
-    padding-bottom: 0.25rem !important; }
+    padding-bottom: 0.375rem !important; }
   .pl-lg-1 {
-    padding-left: 0.25rem !important; }
+    padding-left: 0.375rem !important; }
   .px-lg-1 {
-    padding-right: 0.25rem !important;
-    padding-left: 0.25rem !important; }
+    padding-right: 0.375rem !important;
+    padding-left: 0.375rem !important; }
   .py-lg-1 {
-    padding-top: 0.25rem !important;
-    padding-bottom: 0.25rem !important; }
+    padding-top: 0.375rem !important;
+    padding-bottom: 0.375rem !important; }
   .p-lg-2 {
-    padding: 0.5rem 0.5rem !important; }
+    padding: 0.75rem 0.75rem !important; }
   .pt-lg-2 {
-    padding-top: 0.5rem !important; }
+    padding-top: 0.75rem !important; }
   .pr-lg-2 {
-    padding-right: 0.5rem !important; }
+    padding-right: 0.75rem !important; }
   .pb-lg-2 {
-    padding-bottom: 0.5rem !important; }
+    padding-bottom: 0.75rem !important; }
   .pl-lg-2 {
-    padding-left: 0.5rem !important; }
+    padding-left: 0.75rem !important; }
   .px-lg-2 {
-    padding-right: 0.5rem !important;
-    padding-left: 0.5rem !important; }
+    padding-right: 0.75rem !important;
+    padding-left: 0.75rem !important; }
   .py-lg-2 {
-    padding-top: 0.5rem !important;
-    padding-bottom: 0.5rem !important; }
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important; }
   .p-lg-3 {
-    padding: 1rem 1rem !important; }
+    padding: 1.5rem 1.5rem !important; }
   .pt-lg-3 {
-    padding-top: 1rem !important; }
+    padding-top: 1.5rem !important; }
   .pr-lg-3 {
-    padding-right: 1rem !important; }
+    padding-right: 1.5rem !important; }
   .pb-lg-3 {
-    padding-bottom: 1rem !important; }
+    padding-bottom: 1.5rem !important; }
   .pl-lg-3 {
-    padding-left: 1rem !important; }
+    padding-left: 1.5rem !important; }
   .px-lg-3 {
-    padding-right: 1rem !important;
-    padding-left: 1rem !important; }
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important; }
   .py-lg-3 {
-    padding-top: 1rem !important;
-    padding-bottom: 1rem !important; }
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important; }
   .p-lg-4 {
-    padding: 1.5rem 1.5rem !important; }
+    padding: 2.25rem 2.25rem !important; }
   .pt-lg-4 {
-    padding-top: 1.5rem !important; }
+    padding-top: 2.25rem !important; }
   .pr-lg-4 {
-    padding-right: 1.5rem !important; }
+    padding-right: 2.25rem !important; }
   .pb-lg-4 {
-    padding-bottom: 1.5rem !important; }
+    padding-bottom: 2.25rem !important; }
   .pl-lg-4 {
-    padding-left: 1.5rem !important; }
+    padding-left: 2.25rem !important; }
   .px-lg-4 {
-    padding-right: 1.5rem !important;
-    padding-left: 1.5rem !important; }
+    padding-right: 2.25rem !important;
+    padding-left: 2.25rem !important; }
   .py-lg-4 {
-    padding-top: 1.5rem !important;
-    padding-bottom: 1.5rem !important; }
+    padding-top: 2.25rem !important;
+    padding-bottom: 2.25rem !important; }
   .p-lg-5 {
-    padding: 3rem 3rem !important; }
+    padding: 4.5rem 4.5rem !important; }
   .pt-lg-5 {
-    padding-top: 3rem !important; }
+    padding-top: 4.5rem !important; }
   .pr-lg-5 {
-    padding-right: 3rem !important; }
+    padding-right: 4.5rem !important; }
   .pb-lg-5 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 4.5rem !important; }
   .pl-lg-5 {
-    padding-left: 3rem !important; }
+    padding-left: 4.5rem !important; }
   .px-lg-5 {
-    padding-right: 3rem !important;
-    padding-left: 3rem !important; }
+    padding-right: 4.5rem !important;
+    padding-left: 4.5rem !important; }
   .py-lg-5 {
-    padding-top: 3rem !important;
-    padding-bottom: 3rem !important; }
+    padding-top: 4.5rem !important;
+    padding-bottom: 4.5rem !important; }
+  .p-lg-6 {
+    padding: 6rem 6rem !important; }
+  .pt-lg-6 {
+    padding-top: 6rem !important; }
+  .pr-lg-6 {
+    padding-right: 6rem !important; }
+  .pb-lg-6 {
+    padding-bottom: 6rem !important; }
+  .pl-lg-6 {
+    padding-left: 6rem !important; }
+  .px-lg-6 {
+    padding-right: 6rem !important;
+    padding-left: 6rem !important; }
+  .py-lg-6 {
+    padding-top: 6rem !important;
+    padding-bottom: 6rem !important; }
   .m-lg-auto {
     margin: auto !important; }
   .mt-lg-auto {
@@ -5072,85 +5214,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     margin-top: 0 !important;
     margin-bottom: 0 !important; }
   .m-xl-1 {
-    margin: 0.25rem 0.25rem !important; }
+    margin: 0.375rem 0.375rem !important; }
   .mt-xl-1 {
-    margin-top: 0.25rem !important; }
+    margin-top: 0.375rem !important; }
   .mr-xl-1 {
-    margin-right: 0.25rem !important; }
+    margin-right: 0.375rem !important; }
   .mb-xl-1 {
-    margin-bottom: 0.25rem !important; }
+    margin-bottom: 0.375rem !important; }
   .ml-xl-1 {
-    margin-left: 0.25rem !important; }
+    margin-left: 0.375rem !important; }
   .mx-xl-1 {
-    margin-right: 0.25rem !important;
-    margin-left: 0.25rem !important; }
+    margin-right: 0.375rem !important;
+    margin-left: 0.375rem !important; }
   .my-xl-1 {
-    margin-top: 0.25rem !important;
-    margin-bottom: 0.25rem !important; }
+    margin-top: 0.375rem !important;
+    margin-bottom: 0.375rem !important; }
   .m-xl-2 {
-    margin: 0.5rem 0.5rem !important; }
+    margin: 0.75rem 0.75rem !important; }
   .mt-xl-2 {
-    margin-top: 0.5rem !important; }
+    margin-top: 0.75rem !important; }
   .mr-xl-2 {
-    margin-right: 0.5rem !important; }
+    margin-right: 0.75rem !important; }
   .mb-xl-2 {
-    margin-bottom: 0.5rem !important; }
+    margin-bottom: 0.75rem !important; }
   .ml-xl-2 {
-    margin-left: 0.5rem !important; }
+    margin-left: 0.75rem !important; }
   .mx-xl-2 {
-    margin-right: 0.5rem !important;
-    margin-left: 0.5rem !important; }
+    margin-right: 0.75rem !important;
+    margin-left: 0.75rem !important; }
   .my-xl-2 {
-    margin-top: 0.5rem !important;
-    margin-bottom: 0.5rem !important; }
+    margin-top: 0.75rem !important;
+    margin-bottom: 0.75rem !important; }
   .m-xl-3 {
-    margin: 1rem 1rem !important; }
+    margin: 1.5rem 1.5rem !important; }
   .mt-xl-3 {
-    margin-top: 1rem !important; }
+    margin-top: 1.5rem !important; }
   .mr-xl-3 {
-    margin-right: 1rem !important; }
+    margin-right: 1.5rem !important; }
   .mb-xl-3 {
-    margin-bottom: 1rem !important; }
+    margin-bottom: 1.5rem !important; }
   .ml-xl-3 {
-    margin-left: 1rem !important; }
+    margin-left: 1.5rem !important; }
   .mx-xl-3 {
-    margin-right: 1rem !important;
-    margin-left: 1rem !important; }
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important; }
   .my-xl-3 {
-    margin-top: 1rem !important;
-    margin-bottom: 1rem !important; }
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important; }
   .m-xl-4 {
-    margin: 1.5rem 1.5rem !important; }
+    margin: 2.25rem 2.25rem !important; }
   .mt-xl-4 {
-    margin-top: 1.5rem !important; }
+    margin-top: 2.25rem !important; }
   .mr-xl-4 {
-    margin-right: 1.5rem !important; }
+    margin-right: 2.25rem !important; }
   .mb-xl-4 {
-    margin-bottom: 1.5rem !important; }
+    margin-bottom: 2.25rem !important; }
   .ml-xl-4 {
-    margin-left: 1.5rem !important; }
+    margin-left: 2.25rem !important; }
   .mx-xl-4 {
-    margin-right: 1.5rem !important;
-    margin-left: 1.5rem !important; }
+    margin-right: 2.25rem !important;
+    margin-left: 2.25rem !important; }
   .my-xl-4 {
-    margin-top: 1.5rem !important;
-    margin-bottom: 1.5rem !important; }
+    margin-top: 2.25rem !important;
+    margin-bottom: 2.25rem !important; }
   .m-xl-5 {
-    margin: 3rem 3rem !important; }
+    margin: 4.5rem 4.5rem !important; }
   .mt-xl-5 {
-    margin-top: 3rem !important; }
+    margin-top: 4.5rem !important; }
   .mr-xl-5 {
-    margin-right: 3rem !important; }
+    margin-right: 4.5rem !important; }
   .mb-xl-5 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 4.5rem !important; }
   .ml-xl-5 {
-    margin-left: 3rem !important; }
+    margin-left: 4.5rem !important; }
   .mx-xl-5 {
-    margin-right: 3rem !important;
-    margin-left: 3rem !important; }
+    margin-right: 4.5rem !important;
+    margin-left: 4.5rem !important; }
   .my-xl-5 {
-    margin-top: 3rem !important;
-    margin-bottom: 3rem !important; }
+    margin-top: 4.5rem !important;
+    margin-bottom: 4.5rem !important; }
+  .m-xl-6 {
+    margin: 6rem 6rem !important; }
+  .mt-xl-6 {
+    margin-top: 6rem !important; }
+  .mr-xl-6 {
+    margin-right: 6rem !important; }
+  .mb-xl-6 {
+    margin-bottom: 6rem !important; }
+  .ml-xl-6 {
+    margin-left: 6rem !important; }
+  .mx-xl-6 {
+    margin-right: 6rem !important;
+    margin-left: 6rem !important; }
+  .my-xl-6 {
+    margin-top: 6rem !important;
+    margin-bottom: 6rem !important; }
   .p-xl-0 {
     padding: 0 0 !important; }
   .pt-xl-0 {
@@ -5168,85 +5326,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
   .p-xl-1 {
-    padding: 0.25rem 0.25rem !important; }
+    padding: 0.375rem 0.375rem !important; }
   .pt-xl-1 {
-    padding-top: 0.25rem !important; }
+    padding-top: 0.375rem !important; }
   .pr-xl-1 {
-    padding-right: 0.25rem !important; }
+    padding-right: 0.375rem !important; }
   .pb-xl-1 {
-    padding-bottom: 0.25rem !important; }
+    padding-bottom: 0.375rem !important; }
   .pl-xl-1 {
-    padding-left: 0.25rem !important; }
+    padding-left: 0.375rem !important; }
   .px-xl-1 {
-    padding-right: 0.25rem !important;
-    padding-left: 0.25rem !important; }
+    padding-right: 0.375rem !important;
+    padding-left: 0.375rem !important; }
   .py-xl-1 {
-    padding-top: 0.25rem !important;
-    padding-bottom: 0.25rem !important; }
+    padding-top: 0.375rem !important;
+    padding-bottom: 0.375rem !important; }
   .p-xl-2 {
-    padding: 0.5rem 0.5rem !important; }
+    padding: 0.75rem 0.75rem !important; }
   .pt-xl-2 {
-    padding-top: 0.5rem !important; }
+    padding-top: 0.75rem !important; }
   .pr-xl-2 {
-    padding-right: 0.5rem !important; }
+    padding-right: 0.75rem !important; }
   .pb-xl-2 {
-    padding-bottom: 0.5rem !important; }
+    padding-bottom: 0.75rem !important; }
   .pl-xl-2 {
-    padding-left: 0.5rem !important; }
+    padding-left: 0.75rem !important; }
   .px-xl-2 {
-    padding-right: 0.5rem !important;
-    padding-left: 0.5rem !important; }
+    padding-right: 0.75rem !important;
+    padding-left: 0.75rem !important; }
   .py-xl-2 {
-    padding-top: 0.5rem !important;
-    padding-bottom: 0.5rem !important; }
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important; }
   .p-xl-3 {
-    padding: 1rem 1rem !important; }
+    padding: 1.5rem 1.5rem !important; }
   .pt-xl-3 {
-    padding-top: 1rem !important; }
+    padding-top: 1.5rem !important; }
   .pr-xl-3 {
-    padding-right: 1rem !important; }
+    padding-right: 1.5rem !important; }
   .pb-xl-3 {
-    padding-bottom: 1rem !important; }
+    padding-bottom: 1.5rem !important; }
   .pl-xl-3 {
-    padding-left: 1rem !important; }
+    padding-left: 1.5rem !important; }
   .px-xl-3 {
-    padding-right: 1rem !important;
-    padding-left: 1rem !important; }
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important; }
   .py-xl-3 {
-    padding-top: 1rem !important;
-    padding-bottom: 1rem !important; }
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important; }
   .p-xl-4 {
-    padding: 1.5rem 1.5rem !important; }
+    padding: 2.25rem 2.25rem !important; }
   .pt-xl-4 {
-    padding-top: 1.5rem !important; }
+    padding-top: 2.25rem !important; }
   .pr-xl-4 {
-    padding-right: 1.5rem !important; }
+    padding-right: 2.25rem !important; }
   .pb-xl-4 {
-    padding-bottom: 1.5rem !important; }
+    padding-bottom: 2.25rem !important; }
   .pl-xl-4 {
-    padding-left: 1.5rem !important; }
+    padding-left: 2.25rem !important; }
   .px-xl-4 {
-    padding-right: 1.5rem !important;
-    padding-left: 1.5rem !important; }
+    padding-right: 2.25rem !important;
+    padding-left: 2.25rem !important; }
   .py-xl-4 {
-    padding-top: 1.5rem !important;
-    padding-bottom: 1.5rem !important; }
+    padding-top: 2.25rem !important;
+    padding-bottom: 2.25rem !important; }
   .p-xl-5 {
-    padding: 3rem 3rem !important; }
+    padding: 4.5rem 4.5rem !important; }
   .pt-xl-5 {
-    padding-top: 3rem !important; }
+    padding-top: 4.5rem !important; }
   .pr-xl-5 {
-    padding-right: 3rem !important; }
+    padding-right: 4.5rem !important; }
   .pb-xl-5 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 4.5rem !important; }
   .pl-xl-5 {
-    padding-left: 3rem !important; }
+    padding-left: 4.5rem !important; }
   .px-xl-5 {
-    padding-right: 3rem !important;
-    padding-left: 3rem !important; }
+    padding-right: 4.5rem !important;
+    padding-left: 4.5rem !important; }
   .py-xl-5 {
-    padding-top: 3rem !important;
-    padding-bottom: 3rem !important; }
+    padding-top: 4.5rem !important;
+    padding-bottom: 4.5rem !important; }
+  .p-xl-6 {
+    padding: 6rem 6rem !important; }
+  .pt-xl-6 {
+    padding-top: 6rem !important; }
+  .pr-xl-6 {
+    padding-right: 6rem !important; }
+  .pb-xl-6 {
+    padding-bottom: 6rem !important; }
+  .pl-xl-6 {
+    padding-left: 6rem !important; }
+  .px-xl-6 {
+    padding-right: 6rem !important;
+    padding-left: 6rem !important; }
+  .py-xl-6 {
+    padding-top: 6rem !important;
+    padding-bottom: 6rem !important; }
   .m-xl-auto {
     margin: auto !important; }
   .mt-xl-auto {
@@ -5452,6 +5626,19 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
 .btn {
   text-transform: uppercase; }
 
+.btn-lg, .btn-group-lg > .btn {
+  margin: 0 24px; }
+
+.fixed-top {
+  -webkit-transition: background-color 700ms linear;
+  transition: background-color 700ms linear; }
+
+.scrolled {
+  background-color: rgba(255, 255, 255, 0.96); }
+
+.navbar a {
+  color: #263238; }
+
 .navbar-brand {
   font-size: 2rem;
   font-weight: 300; }
@@ -5489,8 +5676,6 @@ section.intro {
       display: inline-block;
       position: relative;
       top: 8px; }
-  section.intro .btn-lg, section.intro .btn-group-lg > .btn {
-    margin: 0 24px; }
   section.intro .page-scroll {
     position: absolute;
     bottom: 48px;
@@ -5511,3 +5696,18 @@ section.intro {
         top: 50%;
         -webkit-transform: translate(-50%, -50%);
                 transform: translate(-50%, -50%); }
+
+section.content-section {
+  padding: 96px 0; }
+
+section#features,
+section#appliances {
+  background-color: #eceff1; }
+
+section#news {
+  background-color: rgba(38, 50, 56, 0.2); }
+
+section#wishlist {
+  background-image: url("../img/wishlist-background.jpg");
+  background-size: cover;
+  background-position: center center; }

diff --git a/static/img/wishlist-background.jpg b/static/img/wishlist-background.jpg
new file mode 100644 (file)
index 0000000..b8e0d96
Binary files /dev/null and b/static/img/wishlist-background.jpg differ

diff --git a/static/js/site.js b/static/js/site.js
index a4ca8c449a8543fa5b146ce338bd0cf022b39c80..6c47de90333718552477bf0a3951e8150da56342 100644 (file)
--- a/static/js/site.js
+++ b/static/js/site.js
@@ -1,3 +1,13 @@
+$(document).ready(function () {
+    $(window).scroll(function () {
+        if ($(document).scrollTop() > 100) {
+            $(".fixed-top").addClass("scrolled");
+        } else {
+            $(".fixed-top").removeClass("scrolled");
+        }
+    });
+});
+
 //jQuery to collapse the navbar on scroll
 $(window).scroll(function() {
        if ($(".navbar").offset().top > 50) {

diff --git a/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss b/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss
index b74b469cb8ca300dc35abb2655dc97396ef594f5..2ff2a6cc52ff7c37ec89d2bff21f65f613833155 100755 (executable)
--- a/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss
+++ b/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss
@@ -31,8 +31,8 @@ $brand-inverse:             $gray-dark !default;
 // Spacing
 
 $spacer:   1.5rem;
-$spacer-x: $spacer !default;
-$spacer-y: $spacer !default;
+$spacer-x: $spacer;
+$spacer-y: $spacer;
 $spacers: (
   0: (
     x: 0,
@@ -57,14 +57,18 @@ $spacers: (
   5: (
     x: ($spacer-x * 3),
     y: ($spacer-y * 3)
+  ),
+  6: (
+    x: ($spacer-x * 4),
+    y: ($spacer-y * 4)
   )
-) !default;
+);
 
 $border-width: 2px;
 
 // Links
 
-$link-color:            $blue_grey_900;
+$link-color:            $red_900;
 
 // Grid
 
@@ -78,16 +82,20 @@ $font-family-base:       $font-family-sans-serif;
 
 $font-size-lg:   1.25rem;
 
-$font-size-h1: 3rem;
-$font-size-h2: 2.5rem;
-$font-size-h3: 2.25rem;
-$font-size-h4: 2rem;
-$font-size-h5: 1.5rem;
-$font-size-h6: 1.25rem;
+$font-size-h1: 2.25rem;
+$font-size-h2: 2rem;
+$font-size-h3: 1.5rem;
+$font-size-h4: 1.25rem;
+$font-size-h5: 1rem;
+$font-size-h6: 0.75rem;
 
 $display1-size: 7.5rem;
+$display2-size: 3rem;
+$display3-size: 2.25rem;
 $display4-size: 1.5rem;
 
+$lead-font-size:   1.5rem;
+
 
 // Buttons
 
@@ -99,7 +107,6 @@ $btn-box-shadow:                 inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba(
 $btn-focus-box-shadow:           0 0 0 2px rgba($brand-primary, .25) !default;
 $btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
 
-$btn-primary-color:              $red_900;
 $btn-primary-bg:                 $red_900;
 $btn-primary-border:             $red_900;
 
@@ -147,3 +154,8 @@ $nav-item-inline-spacer:        1rem !default;
 $nav-link-padding:              .5em 1.5em;
 $nav-link-hover-bg:             $gray-lighter !default;
 $nav-disabled-link-color:       $gray-light !default;
+
+// Navbar
+
+$navbar-padding-x:                  $spacer;
+$navbar-padding-y:                  $spacer;

diff --git a/static/scss/style.scss b/static/scss/style.scss
index e802075624755c96ea37884c4f9593e6f7c3c40f..f8d96f967dd92052a56b41fe43614feaa78c0f2c 100644 (file)
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -57,6 +57,24 @@
        text-transform: uppercase;
 }
 
+.btn-lg {
+       margin: 0 24px;
+}
+
+.fixed-top {
+       transition: background-color 700ms linear;
+}
+
+.scrolled {
+       background-color: rgba(255, 255, 255, .96);
+}
+
+.navbar {
+       a {
+               color: $blue-grey-900;
+       }
+}
+
 .navbar-brand {
        font-size: 2rem;
        font-weight: 300;
@@ -100,9 +118,6 @@ section.intro {
                        top: 8px;
                }
        }
-       .btn-lg {
-               margin: 0 24px;
-       }
        .page-scroll {
                position: absolute;
                bottom: 48px;
@@ -125,4 +140,23 @@ section.intro {
                        }
                }
        }
+}
+
+section.content-section {
+       padding: 96px 0;
+}
+
+section#features,
+section#appliances {
+       background-color: $blue-grey-50;
+}
+
+section#news {
+       background-color: rgba($blue-grey-900, .2);
+}
+
+section#wishlist {
+       background-image: url('../img/wishlist-background.jpg');
+       background-size: cover;
+       background-position: center center;
 }
\ No newline at end of file

diff --git a/templates/base.html b/templates/base.html
index bbcf38f0b0ae6fbd253dd5c8d69b15d0c10923aa..36a918e26f822ee454a88eb8f1f1d1fa3f2235ea 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -26,33 +26,35 @@
 
        <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
                
-               <div class="container fixed-top">
-                       <nav class="navbar navbar-toggleable justify-content-between">
-                               <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                                       <span class="navbar-toggler-icon"></span>
-                               </button>
-                               
-                               <a class="navbar-brand" href="/">
-                                       <img src="http://static.ipfire:8891/img/ipfire-tux.png" alt="IPFire Tux" height="40px" />
-                                       {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
-                                               {{ _("IPFire") }}
-                                       {% elif hostname in ("planet.ipfire.org", "planet.dev.ipfire.org") %}
-                                               {{ _("IPFire Planet") }} &nbsp;
-                                               <span class="text-muted">{{ _("The Blog of the IPFire Team") }}</span>
-                                       {% elif hostname in ("wishlist.ipfire.org", "wishlist.dev.ipfire.org") %}
-                                               {{ _("IPFire Wishlist") }} &nbsp;
-                                               <span class="text-muted">{{ _("The IPFire Crowd-Funding Platform") }}</span>
-                                       {% else %}
-                                               {{ hostname }}
-                                       {% end %}
-                               </a>
-                               
-                               <div id="navbarSupportedContent">
-                                       {% block menu %}
-                                               {% module Menu() %}
-                                       {% end block %}
-                               </div>
-                       </nav>
+               <div class="fixed-top">
+                       <div class="container">
+                               <nav class="navbar navbar-toggleable justify-content-between">
+                                       <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                                               <span class="navbar-toggler-icon"></span>
+                                       </button>
+                                       
+                                       <a class="navbar-brand" href="/">
+                                               <img src="http://static.ipfire:8891/img/ipfire-tux.png" alt="IPFire Tux" height="40px" />
+                                               {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
+                                                       {{ _("IPFire") }}
+                                               {% elif hostname in ("planet.ipfire.org", "planet.dev.ipfire.org") %}
+                                                       {{ _("IPFire Planet") }} &nbsp;
+                                                       <span class="text-muted">{{ _("The Blog of the IPFire Team") }}</span>
+                                               {% elif hostname in ("wishlist.ipfire.org", "wishlist.dev.ipfire.org") %}
+                                                       {{ _("IPFire Wishlist") }} &nbsp;
+                                                       <span class="text-muted">{{ _("The IPFire Crowd-Funding Platform") }}</span>
+                                               {% else %}
+                                                       {{ hostname }}
+                                               {% end %}
+                                       </a>
+                                       
+                                       <div id="navbarSupportedContent">
+                                               {% block menu %}
+                                                       {% module Menu() %}
+                                               {% end block %}
+                                       </div>
+                               </nav>
+                       </div>
                </div>
 
                {% block container %}
@@ -184,15 +186,9 @@
                {% end block %}
 
 
-               <!--
-               <script src="{{ static_url("js/jquery.js") }}"></script>
-               <script src="{{ static_url("js/jquery.easing.js") }}"></script>
-               <script src="{{ static_url("js/bootstrap.min.js") }}"></script>
-               <script src="{{ static_url("js/site.js") }}"></script>
-               -->
-               
-               <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-               <!-- local development -->
-               <script src="http://static.ipfire:8891/js/script.min.js"></script>
+               <script src="http://static.ipfire:8891/js/jquery.js"></script>
+               <script src="http://static.ipfire:8891/js/jquery.easing.js"></script>
+               <script src="http://static.ipfire:8891/js/bootstrap.min.js"></script>
+               <script src="http://static.ipfire:8891/js/site-min.js"></script>
        </body>
 </html>

diff --git a/templates/index.html b/templates/index.html
index 1bb042100dcf0c555a4125fb0c45f94880b989d3..e86913c7252317d957c885fadaa3acddd1453299 100644 (file)
--- a/templates/index.html
+++ b/templates/index.html
@@ -47,178 +47,129 @@
        </section>
        -->
 
-       <section id="features" class="container content-section">
-               <h2 class="text-center">{{ _("Secure up your network with IPFire") }}</h2>
-
-               <br>
-
-               <div class="row">
-                       <div class="col-md-6">
-                               <dl class="dl-horizontal">
-                                       <dt>
-                                               <h1>
-                                                       <span class="fa fa-check text-success"></span>
-                                               </h1>
-                                       </dt>
-                                       <dd>
-                                               <h4>{{ _("Firewall") }}</h4>
-
-                                               <p>
-                                                       {% if lang == "de" %}
-                                                               Die vielseitige und State-of-the-Art Firewall-Engine
-                                                               in IPFire ist auch in komplexen Netzen übersichtlich
-                                                               und leicht zu nutzen.
-                                                       {% else %}
-                                                               IPFire comes with a versatile and state of the art
-                                                               firewall engine that makes even the most complex
-                                                               setups easy to administer.
-                                                       {% end %}
-                                               </p>
-                                       </dd>
-
-                                       <dt>
-                                               <h1>
-                                                       <span class="fa fa-check text-success"></span>
-                                               </h1>
-                                       </dt>
-                                       <dd>
-                                               <h4>{{ _("Network Security") }}</h4>
-
-                                               <p>
-                                                       {% if lang == "de" %}
-                                                               Sicherheit hat höchste Priorität.
-                                                               Das gehärtete System schützt sich selbst vor
-                                                               Angriffen aus dem Netz.
-                                                       {% else %}
-                                                               IPFire is designed for high security.
-                                                               It is hardened to protect itself from attacks
-                                                               from the network.
-                                                       {% end %}
-                                               </p>
-                                       </dd>
-
-                                       <dt>
-                                               <h1>
-                                                       <span class="fa fa-check text-success"></span>
-                                               </h1>
-                                       </dt>
-                                       <dd>
-                                               <h4>{{ _("Performance") }}</h4>
-
-                                               <p>
-                                                       {% if lang == "de" %}
-                                                               Auch schnelle Netze und der Einsatz
-                                                               auf eingebetteten Systemen sind kein Problem
-                                                               für IPFire.
-                                                       {% else %}
-                                                               IPFire is ready for high performance networks
-                                                               and running evenly well on embedded hardware.
-                                                       {% end %}
-                                               </p>
-                                       </dd>
-                               </dl>
+       <section id="features" class="content-section">
+               <div class="container">
+                       <h2 class="display-2 text-center mb-5">{{ _("Secure up your network with IPFire") }}</h2>
+       
+                       <div class="row mb-4">
+                               <div class="col-4">
+                                       <h4>{{ _("Firewall") }}</h4>
+                                       <p>
+                                               {% if lang == "de" %}
+                                                       Die vielseitige und State-of-the-Art Firewall-Engine
+                                                       in IPFire ist auch in komplexen Netzen übersichtlich
+                                                       und leicht zu nutzen.
+                                               {% else %}
+                                                       IPFire comes with a versatile and state of the art
+                                                       firewall engine that makes even the most complex
+                                                       setups easy to administer.
+                                               {% end %}
+                                       </p>
+                               </div>
+                               
+                               <div class="col-4">
+                                       <h4>{{ _("Performance") }}</h4>
+                                       <p>
+                                               {% if lang == "de" %}
+                                                       Auch schnelle Netze und der Einsatz
+                                                       auf eingebetteten Systemen sind kein Problem
+                                                       für IPFire.
+                                               {% else %}
+                                                       IPFire is ready for high performance networks
+                                                       and running evenly well on embedded hardware.
+                                               {% end %}
+                                       </p>    
+                               </div>
+                               
+                               <div class="col-4">
+                                       <h4>{{ _("Easy to use") }}</h4>
+                                       <p>
+                                               {% if lang == "de" %}
+                                                       IPFire ist in 15 bis 20 Minuten installiert
+                                                       und kommt mit vielen wichtigen Funktionen für
+                                                       professionelle Netzwerke.
+                                               {% else %}
+                                                       IPFire is set up easily in 15 to 20 minutes
+                                                       but also comes with expert features that
+                                                       are needed in professional networks.
+                                               {% end %}
+                                       </p>
+                               </div>
                        </div>
-
-                       <div class="col-md-6">
-                               <dl class="dl-horizontal">
-                                       <dt>
-                                               <h1>
-                                                       <span class="fa fa-check text-success"></span>
-                                               </h1>
-                                       </dt>
-                                       <dd>
-                                               <h4>{{ _("Open Source") }}</h4>
-
+                       
+                       <div class="row mb-4">
+                               <div class="col-4">
+                                       <h4>{{ _("Network Security") }}</h4>
+                                       <p>
                                                {% if lang == "de" %}
-                                                       <p>
-                                                               IPFire ist freie Software, welche von einer offenen
-                                                               Community tagtäglich verbessert wird.
-                                                       </p>
+                                                       Sicherheit hat höchste Priorität.
+                                                       Das gehärtete System schützt sich selbst vor
+                                                       Angriffen aus dem Netz.
                                                {% else %}
-                                                       <p>
-                                                               IPFire is free software and developed by an open community,
-                                                               that improves it every single day.
-                                                       </p>
+                                                       IPFire is designed for high security.
+                                                       It is hardened to protect itself from attacks
+                                                       from the network.
                                                {% end %}
-                                       </dd>
-
-                                       <dt>
-                                               <h1>
-                                                       <span class="fa fa-check text-success"></span>
-                                               </h1>
-                                       </dt>
-                                       <dd>
-                                               <h4>{{ _("Easy to use") }}</h4>
-
+                                       </p>
+                               </div>
+                               
+                               <div class="col-4">
+                                       <h4>{{ _("Open Source") }}</h4>
+                                       <p>
                                                {% if lang == "de" %}
-                                                       <p>
-                                                               IPFire ist in 15 bis 20 Minuten installiert
-                                                               und kommt mit vielen wichtigen Funktionen für
-                                                               professionelle Netzwerke.
-                                                       </p>
+                                                       IPFire ist freie Software, welche von einer offenen
+                                                       Community tagtäglich verbessert wird.
                                                {% else %}
-                                                       <p>
-                                                               IPFire is set up easily in 15 to 20 minutes
-                                                               but also comes with expert features that
-                                                               are needed in professional networks.
-                                                       </p>
+                                                       IPFire is free software and developed by an open community,
+                                                       that improves it every single day.
                                                {% end %}
-                                       </dd>
-
-                                       <dt>
-                                               <h1>
-                                                       <span class="fa fa-check text-success"></span>
-                                               </h1>
-                                       </dt>
-                                       <dd>
-                                               <h4>{{ _("Trusted by thousands") }}</h4>
-
-                                               <p>
-                                                       {% if lang == "de" %}
-                                                               IPFire wird in Europa entwickelt,
-                                                               <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in vielen Ländern</a>
-                                                               überall auf der Welt eingesetzt, und bietet
-                                                               Internetzugang für hundertausende Nutzer jeden Tag.
-                                                       {% else %}
-                                                               IPFire is developed in Europe and used all over the world
-                                                               <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
-                                                               by hundreds of thousands of users every day.
-                                                       {% end %}
-                                               </p>
-                                       </dd>
-                               </dl>
+                                       </p>
+                               </div>
+                               
+                               <div class="col-4 mb-5">
+                                       <h4>{{ _("Trusted by thousands") }}</h4>
+                                       <p>
+                                               {% if lang == "de" %}
+                                                       IPFire wird in Europa entwickelt,
+                                                       <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in vielen Ländern</a>
+                                                       überall auf der Welt eingesetzt, und bietet
+                                                       Internetzugang für hundertausende Nutzer jeden Tag.
+                                               {% else %}
+                                                       IPFire is developed in Europe and used all over the world
+                                                       <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
+                                                       by hundreds of thousands of users every day.
+                                               {% end %}
+                                       </p>
+                               </div>
+                       </div>
+                       
+                       <div class="row justify-content-center">
+                               <a class="btn btn-primary btn-lg" href="/get-started">{{ _("Get Started") }}</a>
+                               <a class="btn btn-secondary btn-lg" href="/learn-more">{{ _("Learn more") }}</a>
                        </div>
                </div>
-
-               <p class="text-center">
-                       <a class="btn btn-success btn-lg" href="/get-started">{{ _("Get Started") }}</a>
-               </p>
        </section>
 
-       <section id="news" class="content-section lighter-background">
+       <section id="news" class="content-section">
                <div class="container">
                        <div class="row">
-                               <div class="col-md-5 text-center">
-                                       <h3 class="text-primary">
-                                               <a href="/news/{{ latest_release.news.slug }}">
+                               <div class="col-5">
+                                       <h2 class="display-2 mb-5">Latest Release</h2>
+                                       <p><small>{{ locale.format_date(latest_release.date, shorter=True) }}</small></p>
+                                       <h3 class="display-3 mb-3"><a href="/news/{{ latest_release.news.slug }}">
                                                        {{ _("%s has been released!") % latest_release.name }}
                                                </a>
-                                               <small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
                                        </h3>
-
-                                       <br class="separator-small">
-
-                                       <div class="btn-toolbar">
-                                               <a class="btn btn-primary" href="/download">{{ _("Download it now!") }}</a>
-                                               <a class="btn btn-primary" href="/donate">{{ _("Donate") }}</a>
+                                       <div class="btn-toolbar mb-4">
+                                               <a class="btn btn-primary mr-2" href="/download">{{ _("Download") }}</a>
+                                               <a class="btn btn-primary ml-2" href="/donate">{{ _("Donate") }}</a>
                                        </div>
+                                       
+                                       <p><small>A complete history of IPFire releases is available at our <a href="/news">News</a> page.</small></p>
                                </div>
-
-                               <div class="col-md-7">
-                                       <h4 class="text-center">
-                                               <a href="/news">{{ _("What's new?") }}</a>
-                                       </h4>
-
+                               
+                               <div class="col-5 offset-2">
+                                       <h2 class="display-2 mb-5">What&rsquo;s going on?</h2>
                                        <dl class="dl-horizontal">
                                                {% for type, item in latest_news %}
                                                        <dt>
@@ -239,9 +190,15 @@
                                        </dl>
                                </div>
                        </div>
-
+               </div>
+       </section>
+       
+       <section id="wishlist" class="content-section">
+               <div class="container">
+                       
+                       <h2 class="display-2 mb-5 text-center">IP<strong>Fire</strong>&rsquo;s Wishlist</h2>
+                       
                        {% if hottest_wish %}
-                               <br><br>
 
                                {% if hottest_wish.is_new() %}
                                        <span class="label label-success pull-right">{{ _("NEW") }}</span>
@@ -273,29 +230,45 @@
                        {% end %}
                </div>
        </section>
-
-       <section id="appliances" class="container content-section text-center">
-               <h2>{{ _("Professional Appliances & Services") }}</h2>
-
-               <p class="lead">
-                       {% if lang == "de" %}
-                               <a href="http://www.lightningwirelabs.com">Lightning Wire Labs</a> bietet
-                               Hardware-Appliances für mittlere bis große Unternehmen und SOHO an.
-                               Diese sorgen in jedem Netz für beste Zuverlässigkeit, Stabilität
-                               und Performance.
-                       {% else %}
-                               <a href="http://www.lightningwirelabs.com">Lightning Wire Labs</a> offer
-                               IPFire hardware appliances for enterprises, large businesses and SOHO.
-                               Deploying one of these on your network will provide you with the
-                               greatest reliability, stability and performance.
-                       {% end %}
-               </p>
-
-               <div class="btn-toolbar">
-                       <a class="btn btn-default btn-lg" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
-                       <a class="btn btn-default btn-lg" href="/hardware">{{ _("Hardware Appliances") }}</a>
+       
+       <section id="fireinfo" class="content-section">
+               <div class="container">
+                       <h2 class="display-2 mb-5 text-center">Fire<strong>Info</strong> Statistics</h2>
+                       
+                       <div class="row justify-content-center">
+                               <a class="btn btn-primary btn-lg" href="/stats">More Stats</a>
+                       </div>
                </div>
+       </section>
 
-               <img class="img-responsive" src="{{ static_url("images/LWL/appliance-pro.jpg") }}">
+       <section id="appliances" class="content-section">
+               <div class="container">
+                       <h2 class="display-3 text-center mb-5">{{ _("Professional Appliances & Services") }}</h2>
+                       
+                       <div class="row mb-6">
+                               <div class="col-7">
+                                       <p class="lead">
+                                               {% if lang == "de" %}
+                                                       <a href="http://www.lightningwirelabs.com">Lightning Wire Labs</a> bietet
+                                                       Hardware-Appliances für mittlere bis große Unternehmen und SOHO an.
+                                                       Diese sorgen in jedem Netz für beste Zuverlässigkeit, Stabilität
+                                                       und Performance.
+                                               {% else %}
+                                                       <a href="http://www.lightningwirelabs.com">Lightning Wire Labs</a> offer
+                                                       IPFire hardware appliances for enterprises, large businesses and SOHO.
+                                                       Deploying one of these on your network will provide you with the
+                                                       greatest reliability, stability and performance.
+                                               {% end %}
+                                       </p>
+                               </div>
+                               <div class="col-4">
+                                       <a class="btn btn-secondary btn-lg btn-block mb-3" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
+                                       <a class="btn btn-secondary btn-lg btn-block mt-2" href="/hardware">{{ _("Hardware Appliances") }}</a>
+                               </div>
+                       </div>
+               </div>
+               <div class="row justify-content-center">
+                       <img class="img-fluid" src="{{ static_url("images/LWL/appliance-pro.jpg") }}">
+               </div>
        </section>
 {% end block %}