excluded unused parts from Bootstrap

first step footer styling
intro scroll to first id
spacing finetuning

diff --git a/static/css/style.css b/static/css/style.css
index df98d55af16bb09731177da4a439f2498a12f8ba..61bd25de2243b86a302cf19c08a2756596d31643 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4,7 +4,7 @@
  * Copyright 2011-2017 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
-@import url("https://fonts.googleapis.com/css?family=Ubuntu");
+@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,700");
 /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 html {
   font-family: sans-serif;
@@ -377,7 +377,7 @@ h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   margin-bottom: 0.5rem;
   font-family: inherit;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 1.1;
   color: inherit; }
 
@@ -424,15 +424,15 @@ h6, .h6 {
   line-height: 1.1; }
 
 hr {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
   border: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1); }
 
 small,
 .small {
-  font-size: 80%;
-  font-weight: normal; }
+  font-size: 0.875rem;
+  font-weight: 300; }
 
 mark,
 .mark {
@@ -457,8 +457,8 @@ mark,
   text-transform: uppercase; }
 
 .blockquote {
-  padding: 0.75rem 1.5rem;
-  margin-bottom: 1.5rem;
+  padding: 0.25rem 0.5rem;
+  margin-bottom: 0.5rem;
   font-size: 1.25rem;
   border-left: 0.25rem solid #eceeef; }
 
@@ -470,7 +470,7 @@ mark,
     content: "\2014 \00A0"; }
 
 .blockquote-reverse {
-  padding-right: 1.5rem;
+  padding-right: 0.5rem;
   padding-left: 0;
   text-align: right;
   border-right: 0.25rem solid #eceeef;
@@ -500,7 +500,7 @@ mark,
   display: inline-block; }
 
 .figure-img {
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.25rem;
   line-height: 1; }
 
 .figure-caption {
@@ -1695,7 +1695,7 @@ fieldset[disabled] a.btn {
     border-color: #d9534f; }
 
 .btn-link {
-  font-weight: normal;
+  font-weight: 300;
   color: #b71c1c;
   border-radius: 0; }
   .btn-link, .btn-link:active, .btn-link.active, .btn-link:disabled {
@@ -1760,112 +1760,6 @@ tbody.collapse.show {
   -webkit-transition: height 0.35s ease;
   transition: height 0.35s ease; }
 
-.dropup,
-.dropdown {
-  position: relative; }
-
-.dropdown-toggle::after {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  margin-left: 0.3em;
-  vertical-align: middle;
-  content: "";
-  border-top: 0.3em solid;
-  border-right: 0.3em solid transparent;
-  border-left: 0.3em solid transparent; }
-
-.dropdown-toggle:focus {
-  outline: 0; }
-
-.dropup .dropdown-toggle::after {
-  border-top: 0;
-  border-bottom: 0.3em solid; }
-
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  display: none;
-  float: left;
-  min-width: 10rem;
-  padding: 0.5rem 0;
-  margin: 0.125rem 0 0;
-  font-size: 1rem;
-  color: #292b2c;
-  text-align: left;
-  list-style: none;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0.25rem; }
-
-.dropdown-divider {
-  height: 1px;
-  margin: 0.75rem 0;
-  overflow: hidden;
-  background-color: #eceeef; }
-
-.dropdown-item {
-  display: block;
-  width: 100%;
-  padding: 3px 1.5rem;
-  clear: both;
-  font-weight: normal;
-  color: #292b2c;
-  text-align: inherit;
-  white-space: nowrap;
-  background: none;
-  border: 0; }
-  .dropdown-item:focus, .dropdown-item:hover {
-    color: #1d1e1f;
-    text-decoration: none;
-    background-color: #f7f7f9; }
-  .dropdown-item.active, .dropdown-item:active {
-    color: #fff;
-    text-decoration: none;
-    background-color: #0275d8; }
-  .dropdown-item.disabled, .dropdown-item:disabled {
-    color: #636c72;
-    cursor: not-allowed;
-    background-color: transparent; }
-
-.show > .dropdown-menu {
-  display: block; }
-
-.show > a {
-  outline: 0; }
-
-.dropdown-menu-right {
-  right: 0;
-  left: auto; }
-
-.dropdown-menu-left {
-  right: auto;
-  left: 0; }
-
-.dropdown-header {
-  display: block;
-  padding: 0.5rem 1.5rem;
-  margin-bottom: 0;
-  font-size: 0.875rem;
-  color: #636c72;
-  white-space: nowrap; }
-
-.dropdown-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 990; }
-
-.dropup .dropdown-menu {
-  top: auto;
-  bottom: 100%;
-  margin-bottom: 0.125rem; }
-
 .btn-group,
 .btn-group-vertical {
   position: relative;
@@ -2009,285 +1903,6 @@ tbody.collapse.show {
   clip: rect(0, 0, 0, 0);
   pointer-events: none; }
 
-.input-group {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%; }
-  .input-group .form-control {
-    position: relative;
-    z-index: 2;
-    -webkit-box-flex: 1;
-        -ms-flex: 1 1 auto;
-            flex: 1 1 auto;
-    width: 1%;
-    margin-bottom: 0; }
-    .input-group .form-control:focus, .input-group .form-control:active, .input-group .form-control:hover {
-      z-index: 3; }
-
-.input-group-addon,
-.input-group-btn,
-.input-group .form-control {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center; }
-  .input-group-addon:not(:first-child):not(:last-child),
-  .input-group-btn:not(:first-child):not(:last-child),
-  .input-group .form-control:not(:first-child):not(:last-child) {
-    border-radius: 0; }
-
-.input-group-addon,
-.input-group-btn {
-  white-space: nowrap;
-  vertical-align: middle; }
-
-.input-group-addon {
-  padding: 0.5rem 0.75rem;
-  margin-bottom: 0;
-  font-size: 1rem;
-  font-weight: normal;
-  line-height: 1.25;
-  color: #464a4c;
-  text-align: center;
-  background-color: #eceeef;
-  border: 2px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0.25rem; }
-  .input-group-addon.form-control-sm,
-  .input-group-sm > .input-group-addon,
-  .input-group-sm > .input-group-btn > .input-group-addon.btn {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-    border-radius: 0.2rem; }
-  .input-group-addon.form-control-lg,
-  .input-group-lg > .input-group-addon,
-  .input-group-lg > .input-group-btn > .input-group-addon.btn {
-    padding: 0.75rem 1.5rem;
-    font-size: 1.25rem;
-    border-radius: 0.3rem; }
-  .input-group-addon input[type="radio"],
-  .input-group-addon input[type="checkbox"] {
-    margin-top: 0; }
-
-.input-group .form-control:not(:last-child),
-.input-group-addon:not(:last-child),
-.input-group-btn:not(:last-child) > .btn,
-.input-group-btn:not(:last-child) > .btn-group > .btn,
-.input-group-btn:not(:last-child) > .dropdown-toggle,
-.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
-.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0; }
-
-.input-group-addon:not(:last-child) {
-  border-right: 0; }
-
-.input-group .form-control:not(:first-child),
-.input-group-addon:not(:first-child),
-.input-group-btn:not(:first-child) > .btn,
-.input-group-btn:not(:first-child) > .btn-group > .btn,
-.input-group-btn:not(:first-child) > .dropdown-toggle,
-.input-group-btn:not(:last-child) > .btn:not(:first-child),
-.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0; }
-
-.form-control + .input-group-addon:not(:first-child) {
-  border-left: 0; }
-
-.input-group-btn {
-  position: relative;
-  font-size: 0;
-  white-space: nowrap; }
-  .input-group-btn > .btn {
-    position: relative;
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1; }
-    .input-group-btn > .btn + .btn {
-      margin-left: -2px; }
-    .input-group-btn > .btn:focus, .input-group-btn > .btn:active, .input-group-btn > .btn:hover {
-      z-index: 3; }
-  .input-group-btn:not(:last-child) > .btn,
-  .input-group-btn:not(:last-child) > .btn-group {
-    margin-right: -2px; }
-  .input-group-btn:not(:first-child) > .btn,
-  .input-group-btn:not(:first-child) > .btn-group {
-    z-index: 2;
-    margin-left: -2px; }
-    .input-group-btn:not(:first-child) > .btn:focus, .input-group-btn:not(:first-child) > .btn:active, .input-group-btn:not(:first-child) > .btn:hover,
-    .input-group-btn:not(:first-child) > .btn-group:focus,
-    .input-group-btn:not(:first-child) > .btn-group:active,
-    .input-group-btn:not(:first-child) > .btn-group:hover {
-      z-index: 3; }
-
-.custom-control {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  min-height: 1.5rem;
-  padding-left: 1.5rem;
-  margin-right: 1rem;
-  cursor: pointer; }
-
-.custom-control-input {
-  position: absolute;
-  z-index: -1;
-  opacity: 0; }
-  .custom-control-input:checked ~ .custom-control-indicator {
-    color: #fff;
-    background-color: #0275d8; }
-  .custom-control-input:focus ~ .custom-control-indicator {
-    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0275d8; }
-  .custom-control-input:active ~ .custom-control-indicator {
-    color: #fff;
-    background-color: #8fcafe; }
-  .custom-control-input:disabled ~ .custom-control-indicator {
-    cursor: not-allowed;
-    background-color: #eceeef; }
-  .custom-control-input:disabled ~ .custom-control-description {
-    color: #636c72;
-    cursor: not-allowed; }
-
-.custom-control-indicator {
-  position: absolute;
-  top: 0.25rem;
-  left: 0;
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  pointer-events: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  background-color: #ddd;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 50% 50%; }
-
-.custom-checkbox .custom-control-indicator {
-  border-radius: 0.25rem; }
-
-.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); }
-
-.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-indicator {
-  background-color: #0275d8;
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E"); }
-
-.custom-radio .custom-control-indicator {
-  border-radius: 50%; }
-
-.custom-radio .custom-control-input:checked ~ .custom-control-indicator {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); }
-
-.custom-controls-stacked {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column; }
-  .custom-controls-stacked .custom-control {
-    margin-bottom: 0.25rem; }
-    .custom-controls-stacked .custom-control + .custom-control {
-      margin-left: 0; }
-
-.custom-select {
-  display: inline-block;
-  max-width: 100%;
-  height: calc(2.25rem + 4px);
-  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
-  line-height: 1.25;
-  color: #464a4c;
-  vertical-align: middle;
-  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
-  background-size: 8px 10px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0.25rem;
-  -moz-appearance: none;
-  -webkit-appearance: none; }
-  .custom-select:focus {
-    border-color: #5cb3fd;
-    outline: none; }
-    .custom-select:focus::-ms-value {
-      color: #464a4c;
-      background-color: #fff; }
-  .custom-select:disabled {
-    color: #636c72;
-    cursor: not-allowed;
-    background-color: #eceeef; }
-  .custom-select::-ms-expand {
-    opacity: 0; }
-
-.custom-select-sm {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-  font-size: 75%; }
-
-.custom-file {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-  height: 2.5rem;
-  margin-bottom: 0;
-  cursor: pointer; }
-
-.custom-file-input {
-  min-width: 14rem;
-  max-width: 100%;
-  height: 2.5rem;
-  margin: 0;
-  filter: alpha(opacity=0);
-  opacity: 0; }
-
-.custom-file-control {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 5;
-  height: 2.5rem;
-  padding: 0.5rem 1rem;
-  line-height: 1.5;
-  color: #464a4c;
-  pointer-events: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0.25rem; }
-  .custom-file-control:lang(en)::after {
-    content: "Choose file..."; }
-  .custom-file-control::before {
-    position: absolute;
-    top: -1px;
-    right: -1px;
-    bottom: -1px;
-    z-index: 6;
-    display: block;
-    height: 2.5rem;
-    padding: 0.5rem 1rem;
-    line-height: 1.5;
-    color: #464a4c;
-    background-color: #eceeef;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    border-radius: 0 0.25rem 0.25rem 0; }
-  .custom-file-control:lang(en)::before {
-    content: "Browse"; }
-
 .nav {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -2365,13 +1980,13 @@ tbody.collapse.show {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  padding: 1.5rem 1.5rem; }
+  padding: 0.5rem 0.5rem; }
 
 .navbar-brand {
   display: inline-block;
   padding-top: .25rem;
   padding-bottom: .25rem;
-  margin-right: 1.5rem;
+  margin-right: 0.5rem;
   font-size: 1.25rem;
   line-height: inherit;
   white-space: nowrap; }
@@ -2421,11 +2036,11 @@ tbody.collapse.show {
 
 .navbar-toggler-left {
   position: absolute;
-  left: 1.5rem; }
+  left: 0.5rem; }
 
 .navbar-toggler-right {
   position: absolute;
-  right: 1.5rem; }
+  right: 0.5rem; }
 
 @media (max-width: 575px) {
   .navbar-toggleable .navbar-nav .dropdown-menu {
@@ -2704,250 +2319,6 @@ tbody.collapse.show {
 .navbar-inverse .navbar-text {
   color: rgba(255, 255, 255, 0.5); }
 
-.card {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.125);
-  border-radius: 0.25rem; }
-
-.card-block {
-  -webkit-box-flex: 1;
-      -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 > .list-group:first-child .list-group-item:first-child {
-  border-top-right-radius: 0.25rem;
-  border-top-left-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-header {
-  padding: 0.75rem 1.25rem;
-  margin-bottom: 0;
-  background-color: #f7f7f9;
-  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-footer {
-  padding: 0.75rem 1.25rem;
-  background-color: #f7f7f9;
-  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-primary {
-  background-color: #0275d8;
-  border-color: #0275d8; }
-  .card-primary .card-header,
-  .card-primary .card-footer {
-    background-color: transparent; }
-
-.card-success {
-  background-color: #5cb85c;
-  border-color: #5cb85c; }
-  .card-success .card-header,
-  .card-success .card-footer {
-    background-color: transparent; }
-
-.card-info {
-  background-color: #5bc0de;
-  border-color: #5bc0de; }
-  .card-info .card-header,
-  .card-info .card-footer {
-    background-color: transparent; }
-
-.card-warning {
-  background-color: #f0ad4e;
-  border-color: #f0ad4e; }
-  .card-warning .card-header,
-  .card-warning .card-footer {
-    background-color: transparent; }
-
-.card-danger {
-  background-color: #d9534f;
-  border-color: #d9534f; }
-  .card-danger .card-header,
-  .card-danger .card-footer {
-    background-color: transparent; }
-
-.card-outline-primary {
-  background-color: transparent;
-  border-color: #b71c1c; }
-
-.card-outline-secondary {
-  background-color: transparent;
-  border-color: #546e7a; }
-
-.card-outline-info {
-  background-color: transparent;
-  border-color: #5bc0de; }
-
-.card-outline-success {
-  background-color: transparent;
-  border-color: #5cb85c; }
-
-.card-outline-warning {
-  background-color: transparent;
-  border-color: #f0ad4e; }
-
-.card-outline-danger {
-  background-color: transparent;
-  border-color: #d9534f; }
-
-.card-inverse {
-  color: rgba(255, 255, 255, 0.65); }
-  .card-inverse .card-header,
-  .card-inverse .card-footer {
-    background-color: transparent;
-    border-color: rgba(255, 255, 255, 0.2); }
-  .card-inverse .card-header,
-  .card-inverse .card-footer,
-  .card-inverse .card-title,
-  .card-inverse .card-blockquote {
-    color: #fff; }
-  .card-inverse .card-link,
-  .card-inverse .card-text,
-  .card-inverse .card-subtitle,
-  .card-inverse .card-blockquote .blockquote-footer {
-    color: rgba(255, 255, 255, 0.65); }
-  .card-inverse .card-link:focus, .card-inverse .card-link:hover {
-    color: #fff; }
-
-.card-blockquote {
-  padding: 0;
-  margin-bottom: 0;
-  border-left: 0; }
-
-.card-img {
-  border-radius: calc(0.25rem - 1px); }
-
-.card-img-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: 1.25rem; }
-
-.card-img-top {
-  border-top-right-radius: calc(0.25rem - 1px);
-  border-top-left-radius: calc(0.25rem - 1px); }
-
-.card-img-bottom {
-  border-bottom-right-radius: calc(0.25rem - 1px);
-  border-bottom-left-radius: calc(0.25rem - 1px); }
-
-@media (min-width: 576px) {
-  .card-deck {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-        -ms-flex-flow: row wrap;
-            flex-flow: row wrap; }
-    .card-deck .card {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-flex: 1;
-          -ms-flex: 1 0 0px;
-              flex: 1 0 0;
-      -webkit-box-orient: vertical;
-      -webkit-box-direction: normal;
-          -ms-flex-direction: column;
-              flex-direction: column; }
-      .card-deck .card:not(:first-child) {
-        margin-left: 15px; }
-      .card-deck .card:not(:last-child) {
-        margin-right: 15px; } }
-
-@media (min-width: 576px) {
-  .card-group {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-        -ms-flex-flow: row wrap;
-            flex-flow: row wrap; }
-    .card-group .card {
-      -webkit-box-flex: 1;
-          -ms-flex: 1 0 0px;
-              flex: 1 0 0; }
-      .card-group .card + .card {
-        margin-left: 0;
-        border-left: 0; }
-      .card-group .card:first-child {
-        border-bottom-right-radius: 0;
-        border-top-right-radius: 0; }
-        .card-group .card:first-child .card-img-top {
-          border-top-right-radius: 0; }
-        .card-group .card:first-child .card-img-bottom {
-          border-bottom-right-radius: 0; }
-      .card-group .card:last-child {
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0; }
-        .card-group .card:last-child .card-img-top {
-          border-top-left-radius: 0; }
-        .card-group .card:last-child .card-img-bottom {
-          border-bottom-left-radius: 0; }
-      .card-group .card:not(:first-child):not(:last-child) {
-        border-radius: 0; }
-        .card-group .card:not(:first-child):not(:last-child) .card-img-top,
-        .card-group .card:not(:first-child):not(:last-child) .card-img-bottom {
-          border-radius: 0; } }
-
-@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; }
-    .card-columns .card {
-      display: inline-block;
-      width: 100%;
-      margin-bottom: 0.75rem; } }
-
 @-webkit-keyframes progress-bar-stripes {
   from {
     background-position: 1rem 0; }
@@ -4149,142 +3520,142 @@ a.bg-inverse:focus, a.bg-inverse:hover {
   margin-bottom: 0 !important; }
 
 .m-1 {
-  margin: 0.375rem 0.375rem !important; }
+  margin: 0.125rem 0.125rem !important; }
 
 .mt-1 {
-  margin-top: 0.375rem !important; }
+  margin-top: 0.125rem !important; }
 
 .mr-1 {
-  margin-right: 0.375rem !important; }
+  margin-right: 0.125rem !important; }
 
 .mb-1 {
-  margin-bottom: 0.375rem !important; }
+  margin-bottom: 0.125rem !important; }
 
 .ml-1 {
-  margin-left: 0.375rem !important; }
+  margin-left: 0.125rem !important; }
 
 .mx-1 {
-  margin-right: 0.375rem !important;
-  margin-left: 0.375rem !important; }
+  margin-right: 0.125rem !important;
+  margin-left: 0.125rem !important; }
 
 .my-1 {
-  margin-top: 0.375rem !important;
-  margin-bottom: 0.375rem !important; }
+  margin-top: 0.125rem !important;
+  margin-bottom: 0.125rem !important; }
 
 .m-2 {
-  margin: 0.75rem 0.75rem !important; }
+  margin: 0.25rem 0.25rem !important; }
 
 .mt-2 {
-  margin-top: 0.75rem !important; }
+  margin-top: 0.25rem !important; }
 
 .mr-2 {
-  margin-right: 0.75rem !important; }
+  margin-right: 0.25rem !important; }
 
 .mb-2 {
-  margin-bottom: 0.75rem !important; }
+  margin-bottom: 0.25rem !important; }
 
 .ml-2 {
-  margin-left: 0.75rem !important; }
+  margin-left: 0.25rem !important; }
 
 .mx-2 {
-  margin-right: 0.75rem !important;
-  margin-left: 0.75rem !important; }
+  margin-right: 0.25rem !important;
+  margin-left: 0.25rem !important; }
 
 .my-2 {
-  margin-top: 0.75rem !important;
-  margin-bottom: 0.75rem !important; }
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important; }
 
 .m-3 {
-  margin: 1.5rem 1.5rem !important; }
+  margin: 0.5rem 0.5rem !important; }
 
 .mt-3 {
-  margin-top: 1.5rem !important; }
+  margin-top: 0.5rem !important; }
 
 .mr-3 {
-  margin-right: 1.5rem !important; }
+  margin-right: 0.5rem !important; }
 
 .mb-3 {
-  margin-bottom: 1.5rem !important; }
+  margin-bottom: 0.5rem !important; }
 
 .ml-3 {
-  margin-left: 1.5rem !important; }
+  margin-left: 0.5rem !important; }
 
 .mx-3 {
-  margin-right: 1.5rem !important;
-  margin-left: 1.5rem !important; }
+  margin-right: 0.5rem !important;
+  margin-left: 0.5rem !important; }
 
 .my-3 {
-  margin-top: 1.5rem !important;
-  margin-bottom: 1.5rem !important; }
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important; }
 
 .m-4 {
-  margin: 2.25rem 2.25rem !important; }
+  margin: 0.75rem 0.75rem !important; }
 
 .mt-4 {
-  margin-top: 2.25rem !important; }
+  margin-top: 0.75rem !important; }
 
 .mr-4 {
-  margin-right: 2.25rem !important; }
+  margin-right: 0.75rem !important; }
 
 .mb-4 {
-  margin-bottom: 2.25rem !important; }
+  margin-bottom: 0.75rem !important; }
 
 .ml-4 {
-  margin-left: 2.25rem !important; }
+  margin-left: 0.75rem !important; }
 
 .mx-4 {
-  margin-right: 2.25rem !important;
-  margin-left: 2.25rem !important; }
+  margin-right: 0.75rem !important;
+  margin-left: 0.75rem !important; }
 
 .my-4 {
-  margin-top: 2.25rem !important;
-  margin-bottom: 2.25rem !important; }
+  margin-top: 0.75rem !important;
+  margin-bottom: 0.75rem !important; }
 
 .m-5 {
-  margin: 4.5rem 4.5rem !important; }
+  margin: 1rem 1rem !important; }
 
 .mt-5 {
-  margin-top: 4.5rem !important; }
+  margin-top: 1rem !important; }
 
 .mr-5 {
-  margin-right: 4.5rem !important; }
+  margin-right: 1rem !important; }
 
 .mb-5 {
-  margin-bottom: 4.5rem !important; }
+  margin-bottom: 1rem !important; }
 
 .ml-5 {
-  margin-left: 4.5rem !important; }
+  margin-left: 1rem !important; }
 
 .mx-5 {
-  margin-right: 4.5rem !important;
-  margin-left: 4.5rem !important; }
+  margin-right: 1rem !important;
+  margin-left: 1rem !important; }
 
 .my-5 {
-  margin-top: 4.5rem !important;
-  margin-bottom: 4.5rem !important; }
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important; }
 
 .m-6 {
-  margin: 6rem 6rem !important; }
+  margin: 3rem 3rem !important; }
 
 .mt-6 {
-  margin-top: 6rem !important; }
+  margin-top: 3rem !important; }
 
 .mr-6 {
-  margin-right: 6rem !important; }
+  margin-right: 3rem !important; }
 
 .mb-6 {
-  margin-bottom: 6rem !important; }
+  margin-bottom: 3rem !important; }
 
 .ml-6 {
-  margin-left: 6rem !important; }
+  margin-left: 3rem !important; }
 
 .mx-6 {
-  margin-right: 6rem !important;
-  margin-left: 6rem !important; }
+  margin-right: 3rem !important;
+  margin-left: 3rem !important; }
 
 .my-6 {
-  margin-top: 6rem !important;
-  margin-bottom: 6rem !important; }
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important; }
 
 .p-0 {
   padding: 0 0 !important; }
@@ -4310,142 +3681,142 @@ a.bg-inverse:focus, a.bg-inverse:hover {
   padding-bottom: 0 !important; }
 
 .p-1 {
-  padding: 0.375rem 0.375rem !important; }
+  padding: 0.125rem 0.125rem !important; }
 
 .pt-1 {
-  padding-top: 0.375rem !important; }
+  padding-top: 0.125rem !important; }
 
 .pr-1 {
-  padding-right: 0.375rem !important; }
+  padding-right: 0.125rem !important; }
 
 .pb-1 {
-  padding-bottom: 0.375rem !important; }
+  padding-bottom: 0.125rem !important; }
 
 .pl-1 {
-  padding-left: 0.375rem !important; }
+  padding-left: 0.125rem !important; }
 
 .px-1 {
-  padding-right: 0.375rem !important;
-  padding-left: 0.375rem !important; }
+  padding-right: 0.125rem !important;
+  padding-left: 0.125rem !important; }
 
 .py-1 {
-  padding-top: 0.375rem !important;
-  padding-bottom: 0.375rem !important; }
+  padding-top: 0.125rem !important;
+  padding-bottom: 0.125rem !important; }
 
 .p-2 {
-  padding: 0.75rem 0.75rem !important; }
+  padding: 0.25rem 0.25rem !important; }
 
 .pt-2 {
-  padding-top: 0.75rem !important; }
+  padding-top: 0.25rem !important; }
 
 .pr-2 {
-  padding-right: 0.75rem !important; }
+  padding-right: 0.25rem !important; }
 
 .pb-2 {
-  padding-bottom: 0.75rem !important; }
+  padding-bottom: 0.25rem !important; }
 
 .pl-2 {
-  padding-left: 0.75rem !important; }
+  padding-left: 0.25rem !important; }
 
 .px-2 {
-  padding-right: 0.75rem !important;
-  padding-left: 0.75rem !important; }
+  padding-right: 0.25rem !important;
+  padding-left: 0.25rem !important; }
 
 .py-2 {
-  padding-top: 0.75rem !important;
-  padding-bottom: 0.75rem !important; }
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important; }
 
 .p-3 {
-  padding: 1.5rem 1.5rem !important; }
+  padding: 0.5rem 0.5rem !important; }
 
 .pt-3 {
-  padding-top: 1.5rem !important; }
+  padding-top: 0.5rem !important; }
 
 .pr-3 {
-  padding-right: 1.5rem !important; }
+  padding-right: 0.5rem !important; }
 
 .pb-3 {
-  padding-bottom: 1.5rem !important; }
+  padding-bottom: 0.5rem !important; }
 
 .pl-3 {
-  padding-left: 1.5rem !important; }
+  padding-left: 0.5rem !important; }
 
 .px-3 {
-  padding-right: 1.5rem !important;
-  padding-left: 1.5rem !important; }
+  padding-right: 0.5rem !important;
+  padding-left: 0.5rem !important; }
 
 .py-3 {
-  padding-top: 1.5rem !important;
-  padding-bottom: 1.5rem !important; }
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important; }
 
 .p-4 {
-  padding: 2.25rem 2.25rem !important; }
+  padding: 0.75rem 0.75rem !important; }
 
 .pt-4 {
-  padding-top: 2.25rem !important; }
+  padding-top: 0.75rem !important; }
 
 .pr-4 {
-  padding-right: 2.25rem !important; }
+  padding-right: 0.75rem !important; }
 
 .pb-4 {
-  padding-bottom: 2.25rem !important; }
+  padding-bottom: 0.75rem !important; }
 
 .pl-4 {
-  padding-left: 2.25rem !important; }
+  padding-left: 0.75rem !important; }
 
 .px-4 {
-  padding-right: 2.25rem !important;
-  padding-left: 2.25rem !important; }
+  padding-right: 0.75rem !important;
+  padding-left: 0.75rem !important; }
 
 .py-4 {
-  padding-top: 2.25rem !important;
-  padding-bottom: 2.25rem !important; }
+  padding-top: 0.75rem !important;
+  padding-bottom: 0.75rem !important; }
 
 .p-5 {
-  padding: 4.5rem 4.5rem !important; }
+  padding: 1rem 1rem !important; }
 
 .pt-5 {
-  padding-top: 4.5rem !important; }
+  padding-top: 1rem !important; }
 
 .pr-5 {
-  padding-right: 4.5rem !important; }
+  padding-right: 1rem !important; }
 
 .pb-5 {
-  padding-bottom: 4.5rem !important; }
+  padding-bottom: 1rem !important; }
 
 .pl-5 {
-  padding-left: 4.5rem !important; }
+  padding-left: 1rem !important; }
 
 .px-5 {
-  padding-right: 4.5rem !important;
-  padding-left: 4.5rem !important; }
+  padding-right: 1rem !important;
+  padding-left: 1rem !important; }
 
 .py-5 {
-  padding-top: 4.5rem !important;
-  padding-bottom: 4.5rem !important; }
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important; }
 
 .p-6 {
-  padding: 6rem 6rem !important; }
+  padding: 3rem 3rem !important; }
 
 .pt-6 {
-  padding-top: 6rem !important; }
+  padding-top: 3rem !important; }
 
 .pr-6 {
-  padding-right: 6rem !important; }
+  padding-right: 3rem !important; }
 
 .pb-6 {
-  padding-bottom: 6rem !important; }
+  padding-bottom: 3rem !important; }
 
 .pl-6 {
-  padding-left: 6rem !important; }
+  padding-left: 3rem !important; }
 
 .px-6 {
-  padding-right: 6rem !important;
-  padding-left: 6rem !important; }
+  padding-right: 3rem !important;
+  padding-left: 3rem !important; }
 
 .py-6 {
-  padding-top: 6rem !important;
-  padding-bottom: 6rem !important; }
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important; }
 
 .m-auto {
   margin: auto !important; }
@@ -4488,101 +3859,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     margin-top: 0 !important;
     margin-bottom: 0 !important; }
   .m-sm-1 {
-    margin: 0.375rem 0.375rem !important; }
+    margin: 0.125rem 0.125rem !important; }
   .mt-sm-1 {
-    margin-top: 0.375rem !important; }
+    margin-top: 0.125rem !important; }
   .mr-sm-1 {
-    margin-right: 0.375rem !important; }
+    margin-right: 0.125rem !important; }
   .mb-sm-1 {
-    margin-bottom: 0.375rem !important; }
+    margin-bottom: 0.125rem !important; }
   .ml-sm-1 {
-    margin-left: 0.375rem !important; }
+    margin-left: 0.125rem !important; }
   .mx-sm-1 {
-    margin-right: 0.375rem !important;
-    margin-left: 0.375rem !important; }
+    margin-right: 0.125rem !important;
+    margin-left: 0.125rem !important; }
   .my-sm-1 {
-    margin-top: 0.375rem !important;
-    margin-bottom: 0.375rem !important; }
+    margin-top: 0.125rem !important;
+    margin-bottom: 0.125rem !important; }
   .m-sm-2 {
-    margin: 0.75rem 0.75rem !important; }
+    margin: 0.25rem 0.25rem !important; }
   .mt-sm-2 {
-    margin-top: 0.75rem !important; }
+    margin-top: 0.25rem !important; }
   .mr-sm-2 {
-    margin-right: 0.75rem !important; }
+    margin-right: 0.25rem !important; }
   .mb-sm-2 {
-    margin-bottom: 0.75rem !important; }
+    margin-bottom: 0.25rem !important; }
   .ml-sm-2 {
-    margin-left: 0.75rem !important; }
+    margin-left: 0.25rem !important; }
   .mx-sm-2 {
-    margin-right: 0.75rem !important;
-    margin-left: 0.75rem !important; }
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important; }
   .my-sm-2 {
-    margin-top: 0.75rem !important;
-    margin-bottom: 0.75rem !important; }
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important; }
   .m-sm-3 {
-    margin: 1.5rem 1.5rem !important; }
+    margin: 0.5rem 0.5rem !important; }
   .mt-sm-3 {
-    margin-top: 1.5rem !important; }
+    margin-top: 0.5rem !important; }
   .mr-sm-3 {
-    margin-right: 1.5rem !important; }
+    margin-right: 0.5rem !important; }
   .mb-sm-3 {
-    margin-bottom: 1.5rem !important; }
+    margin-bottom: 0.5rem !important; }
   .ml-sm-3 {
-    margin-left: 1.5rem !important; }
+    margin-left: 0.5rem !important; }
   .mx-sm-3 {
-    margin-right: 1.5rem !important;
-    margin-left: 1.5rem !important; }
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important; }
   .my-sm-3 {
-    margin-top: 1.5rem !important;
-    margin-bottom: 1.5rem !important; }
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important; }
   .m-sm-4 {
-    margin: 2.25rem 2.25rem !important; }
+    margin: 0.75rem 0.75rem !important; }
   .mt-sm-4 {
-    margin-top: 2.25rem !important; }
+    margin-top: 0.75rem !important; }
   .mr-sm-4 {
-    margin-right: 2.25rem !important; }
+    margin-right: 0.75rem !important; }
   .mb-sm-4 {
-    margin-bottom: 2.25rem !important; }
+    margin-bottom: 0.75rem !important; }
   .ml-sm-4 {
-    margin-left: 2.25rem !important; }
+    margin-left: 0.75rem !important; }
   .mx-sm-4 {
-    margin-right: 2.25rem !important;
-    margin-left: 2.25rem !important; }
+    margin-right: 0.75rem !important;
+    margin-left: 0.75rem !important; }
   .my-sm-4 {
-    margin-top: 2.25rem !important;
-    margin-bottom: 2.25rem !important; }
+    margin-top: 0.75rem !important;
+    margin-bottom: 0.75rem !important; }
   .m-sm-5 {
-    margin: 4.5rem 4.5rem !important; }
+    margin: 1rem 1rem !important; }
   .mt-sm-5 {
-    margin-top: 4.5rem !important; }
+    margin-top: 1rem !important; }
   .mr-sm-5 {
-    margin-right: 4.5rem !important; }
+    margin-right: 1rem !important; }
   .mb-sm-5 {
-    margin-bottom: 4.5rem !important; }
+    margin-bottom: 1rem !important; }
   .ml-sm-5 {
-    margin-left: 4.5rem !important; }
+    margin-left: 1rem !important; }
   .mx-sm-5 {
-    margin-right: 4.5rem !important;
-    margin-left: 4.5rem !important; }
+    margin-right: 1rem !important;
+    margin-left: 1rem !important; }
   .my-sm-5 {
-    margin-top: 4.5rem !important;
-    margin-bottom: 4.5rem !important; }
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important; }
   .m-sm-6 {
-    margin: 6rem 6rem !important; }
+    margin: 3rem 3rem !important; }
   .mt-sm-6 {
-    margin-top: 6rem !important; }
+    margin-top: 3rem !important; }
   .mr-sm-6 {
-    margin-right: 6rem !important; }
+    margin-right: 3rem !important; }
   .mb-sm-6 {
-    margin-bottom: 6rem !important; }
+    margin-bottom: 3rem !important; }
   .ml-sm-6 {
-    margin-left: 6rem !important; }
+    margin-left: 3rem !important; }
   .mx-sm-6 {
-    margin-right: 6rem !important;
-    margin-left: 6rem !important; }
+    margin-right: 3rem !important;
+    margin-left: 3rem !important; }
   .my-sm-6 {
-    margin-top: 6rem !important;
-    margin-bottom: 6rem !important; }
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important; }
   .p-sm-0 {
     padding: 0 0 !important; }
   .pt-sm-0 {
@@ -4600,101 +3971,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
   .p-sm-1 {
-    padding: 0.375rem 0.375rem !important; }
+    padding: 0.125rem 0.125rem !important; }
   .pt-sm-1 {
-    padding-top: 0.375rem !important; }
+    padding-top: 0.125rem !important; }
   .pr-sm-1 {
-    padding-right: 0.375rem !important; }
+    padding-right: 0.125rem !important; }
   .pb-sm-1 {
-    padding-bottom: 0.375rem !important; }
+    padding-bottom: 0.125rem !important; }
   .pl-sm-1 {
-    padding-left: 0.375rem !important; }
+    padding-left: 0.125rem !important; }
   .px-sm-1 {
-    padding-right: 0.375rem !important;
-    padding-left: 0.375rem !important; }
+    padding-right: 0.125rem !important;
+    padding-left: 0.125rem !important; }
   .py-sm-1 {
-    padding-top: 0.375rem !important;
-    padding-bottom: 0.375rem !important; }
+    padding-top: 0.125rem !important;
+    padding-bottom: 0.125rem !important; }
   .p-sm-2 {
-    padding: 0.75rem 0.75rem !important; }
+    padding: 0.25rem 0.25rem !important; }
   .pt-sm-2 {
-    padding-top: 0.75rem !important; }
+    padding-top: 0.25rem !important; }
   .pr-sm-2 {
-    padding-right: 0.75rem !important; }
+    padding-right: 0.25rem !important; }
   .pb-sm-2 {
-    padding-bottom: 0.75rem !important; }
+    padding-bottom: 0.25rem !important; }
   .pl-sm-2 {
-    padding-left: 0.75rem !important; }
+    padding-left: 0.25rem !important; }
   .px-sm-2 {
-    padding-right: 0.75rem !important;
-    padding-left: 0.75rem !important; }
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important; }
   .py-sm-2 {
-    padding-top: 0.75rem !important;
-    padding-bottom: 0.75rem !important; }
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important; }
   .p-sm-3 {
-    padding: 1.5rem 1.5rem !important; }
+    padding: 0.5rem 0.5rem !important; }
   .pt-sm-3 {
-    padding-top: 1.5rem !important; }
+    padding-top: 0.5rem !important; }
   .pr-sm-3 {
-    padding-right: 1.5rem !important; }
+    padding-right: 0.5rem !important; }
   .pb-sm-3 {
-    padding-bottom: 1.5rem !important; }
+    padding-bottom: 0.5rem !important; }
   .pl-sm-3 {
-    padding-left: 1.5rem !important; }
+    padding-left: 0.5rem !important; }
   .px-sm-3 {
-    padding-right: 1.5rem !important;
-    padding-left: 1.5rem !important; }
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important; }
   .py-sm-3 {
-    padding-top: 1.5rem !important;
-    padding-bottom: 1.5rem !important; }
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important; }
   .p-sm-4 {
-    padding: 2.25rem 2.25rem !important; }
+    padding: 0.75rem 0.75rem !important; }
   .pt-sm-4 {
-    padding-top: 2.25rem !important; }
+    padding-top: 0.75rem !important; }
   .pr-sm-4 {
-    padding-right: 2.25rem !important; }
+    padding-right: 0.75rem !important; }
   .pb-sm-4 {
-    padding-bottom: 2.25rem !important; }
+    padding-bottom: 0.75rem !important; }
   .pl-sm-4 {
-    padding-left: 2.25rem !important; }
+    padding-left: 0.75rem !important; }
   .px-sm-4 {
-    padding-right: 2.25rem !important;
-    padding-left: 2.25rem !important; }
+    padding-right: 0.75rem !important;
+    padding-left: 0.75rem !important; }
   .py-sm-4 {
-    padding-top: 2.25rem !important;
-    padding-bottom: 2.25rem !important; }
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important; }
   .p-sm-5 {
-    padding: 4.5rem 4.5rem !important; }
+    padding: 1rem 1rem !important; }
   .pt-sm-5 {
-    padding-top: 4.5rem !important; }
+    padding-top: 1rem !important; }
   .pr-sm-5 {
-    padding-right: 4.5rem !important; }
+    padding-right: 1rem !important; }
   .pb-sm-5 {
-    padding-bottom: 4.5rem !important; }
+    padding-bottom: 1rem !important; }
   .pl-sm-5 {
-    padding-left: 4.5rem !important; }
+    padding-left: 1rem !important; }
   .px-sm-5 {
-    padding-right: 4.5rem !important;
-    padding-left: 4.5rem !important; }
+    padding-right: 1rem !important;
+    padding-left: 1rem !important; }
   .py-sm-5 {
-    padding-top: 4.5rem !important;
-    padding-bottom: 4.5rem !important; }
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important; }
   .p-sm-6 {
-    padding: 6rem 6rem !important; }
+    padding: 3rem 3rem !important; }
   .pt-sm-6 {
-    padding-top: 6rem !important; }
+    padding-top: 3rem !important; }
   .pr-sm-6 {
-    padding-right: 6rem !important; }
+    padding-right: 3rem !important; }
   .pb-sm-6 {
-    padding-bottom: 6rem !important; }
+    padding-bottom: 3rem !important; }
   .pl-sm-6 {
-    padding-left: 6rem !important; }
+    padding-left: 3rem !important; }
   .px-sm-6 {
-    padding-right: 6rem !important;
-    padding-left: 6rem !important; }
+    padding-right: 3rem !important;
+    padding-left: 3rem !important; }
   .py-sm-6 {
-    padding-top: 6rem !important;
-    padding-bottom: 6rem !important; }
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important; }
   .m-sm-auto {
     margin: auto !important; }
   .mt-sm-auto {
@@ -4730,101 +4101,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     margin-top: 0 !important;
     margin-bottom: 0 !important; }
   .m-md-1 {
-    margin: 0.375rem 0.375rem !important; }
+    margin: 0.125rem 0.125rem !important; }
   .mt-md-1 {
-    margin-top: 0.375rem !important; }
+    margin-top: 0.125rem !important; }
   .mr-md-1 {
-    margin-right: 0.375rem !important; }
+    margin-right: 0.125rem !important; }
   .mb-md-1 {
-    margin-bottom: 0.375rem !important; }
+    margin-bottom: 0.125rem !important; }
   .ml-md-1 {
-    margin-left: 0.375rem !important; }
+    margin-left: 0.125rem !important; }
   .mx-md-1 {
-    margin-right: 0.375rem !important;
-    margin-left: 0.375rem !important; }
+    margin-right: 0.125rem !important;
+    margin-left: 0.125rem !important; }
   .my-md-1 {
-    margin-top: 0.375rem !important;
-    margin-bottom: 0.375rem !important; }
+    margin-top: 0.125rem !important;
+    margin-bottom: 0.125rem !important; }
   .m-md-2 {
-    margin: 0.75rem 0.75rem !important; }
+    margin: 0.25rem 0.25rem !important; }
   .mt-md-2 {
-    margin-top: 0.75rem !important; }
+    margin-top: 0.25rem !important; }
   .mr-md-2 {
-    margin-right: 0.75rem !important; }
+    margin-right: 0.25rem !important; }
   .mb-md-2 {
-    margin-bottom: 0.75rem !important; }
+    margin-bottom: 0.25rem !important; }
   .ml-md-2 {
-    margin-left: 0.75rem !important; }
+    margin-left: 0.25rem !important; }
   .mx-md-2 {
-    margin-right: 0.75rem !important;
-    margin-left: 0.75rem !important; }
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important; }
   .my-md-2 {
-    margin-top: 0.75rem !important;
-    margin-bottom: 0.75rem !important; }
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important; }
   .m-md-3 {
-    margin: 1.5rem 1.5rem !important; }
+    margin: 0.5rem 0.5rem !important; }
   .mt-md-3 {
-    margin-top: 1.5rem !important; }
+    margin-top: 0.5rem !important; }
   .mr-md-3 {
-    margin-right: 1.5rem !important; }
+    margin-right: 0.5rem !important; }
   .mb-md-3 {
-    margin-bottom: 1.5rem !important; }
+    margin-bottom: 0.5rem !important; }
   .ml-md-3 {
-    margin-left: 1.5rem !important; }
+    margin-left: 0.5rem !important; }
   .mx-md-3 {
-    margin-right: 1.5rem !important;
-    margin-left: 1.5rem !important; }
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important; }
   .my-md-3 {
-    margin-top: 1.5rem !important;
-    margin-bottom: 1.5rem !important; }
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important; }
   .m-md-4 {
-    margin: 2.25rem 2.25rem !important; }
+    margin: 0.75rem 0.75rem !important; }
   .mt-md-4 {
-    margin-top: 2.25rem !important; }
+    margin-top: 0.75rem !important; }
   .mr-md-4 {
-    margin-right: 2.25rem !important; }
+    margin-right: 0.75rem !important; }
   .mb-md-4 {
-    margin-bottom: 2.25rem !important; }
+    margin-bottom: 0.75rem !important; }
   .ml-md-4 {
-    margin-left: 2.25rem !important; }
+    margin-left: 0.75rem !important; }
   .mx-md-4 {
-    margin-right: 2.25rem !important;
-    margin-left: 2.25rem !important; }
+    margin-right: 0.75rem !important;
+    margin-left: 0.75rem !important; }
   .my-md-4 {
-    margin-top: 2.25rem !important;
-    margin-bottom: 2.25rem !important; }
+    margin-top: 0.75rem !important;
+    margin-bottom: 0.75rem !important; }
   .m-md-5 {
-    margin: 4.5rem 4.5rem !important; }
+    margin: 1rem 1rem !important; }
   .mt-md-5 {
-    margin-top: 4.5rem !important; }
+    margin-top: 1rem !important; }
   .mr-md-5 {
-    margin-right: 4.5rem !important; }
+    margin-right: 1rem !important; }
   .mb-md-5 {
-    margin-bottom: 4.5rem !important; }
+    margin-bottom: 1rem !important; }
   .ml-md-5 {
-    margin-left: 4.5rem !important; }
+    margin-left: 1rem !important; }
   .mx-md-5 {
-    margin-right: 4.5rem !important;
-    margin-left: 4.5rem !important; }
+    margin-right: 1rem !important;
+    margin-left: 1rem !important; }
   .my-md-5 {
-    margin-top: 4.5rem !important;
-    margin-bottom: 4.5rem !important; }
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important; }
   .m-md-6 {
-    margin: 6rem 6rem !important; }
+    margin: 3rem 3rem !important; }
   .mt-md-6 {
-    margin-top: 6rem !important; }
+    margin-top: 3rem !important; }
   .mr-md-6 {
-    margin-right: 6rem !important; }
+    margin-right: 3rem !important; }
   .mb-md-6 {
-    margin-bottom: 6rem !important; }
+    margin-bottom: 3rem !important; }
   .ml-md-6 {
-    margin-left: 6rem !important; }
+    margin-left: 3rem !important; }
   .mx-md-6 {
-    margin-right: 6rem !important;
-    margin-left: 6rem !important; }
+    margin-right: 3rem !important;
+    margin-left: 3rem !important; }
   .my-md-6 {
-    margin-top: 6rem !important;
-    margin-bottom: 6rem !important; }
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important; }
   .p-md-0 {
     padding: 0 0 !important; }
   .pt-md-0 {
@@ -4842,101 +4213,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
   .p-md-1 {
-    padding: 0.375rem 0.375rem !important; }
+    padding: 0.125rem 0.125rem !important; }
   .pt-md-1 {
-    padding-top: 0.375rem !important; }
+    padding-top: 0.125rem !important; }
   .pr-md-1 {
-    padding-right: 0.375rem !important; }
+    padding-right: 0.125rem !important; }
   .pb-md-1 {
-    padding-bottom: 0.375rem !important; }
+    padding-bottom: 0.125rem !important; }
   .pl-md-1 {
-    padding-left: 0.375rem !important; }
+    padding-left: 0.125rem !important; }
   .px-md-1 {
-    padding-right: 0.375rem !important;
-    padding-left: 0.375rem !important; }
+    padding-right: 0.125rem !important;
+    padding-left: 0.125rem !important; }
   .py-md-1 {
-    padding-top: 0.375rem !important;
-    padding-bottom: 0.375rem !important; }
+    padding-top: 0.125rem !important;
+    padding-bottom: 0.125rem !important; }
   .p-md-2 {
-    padding: 0.75rem 0.75rem !important; }
+    padding: 0.25rem 0.25rem !important; }
   .pt-md-2 {
-    padding-top: 0.75rem !important; }
+    padding-top: 0.25rem !important; }
   .pr-md-2 {
-    padding-right: 0.75rem !important; }
+    padding-right: 0.25rem !important; }
   .pb-md-2 {
-    padding-bottom: 0.75rem !important; }
+    padding-bottom: 0.25rem !important; }
   .pl-md-2 {
-    padding-left: 0.75rem !important; }
+    padding-left: 0.25rem !important; }
   .px-md-2 {
-    padding-right: 0.75rem !important;
-    padding-left: 0.75rem !important; }
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important; }
   .py-md-2 {
-    padding-top: 0.75rem !important;
-    padding-bottom: 0.75rem !important; }
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important; }
   .p-md-3 {
-    padding: 1.5rem 1.5rem !important; }
+    padding: 0.5rem 0.5rem !important; }
   .pt-md-3 {
-    padding-top: 1.5rem !important; }
+    padding-top: 0.5rem !important; }
   .pr-md-3 {
-    padding-right: 1.5rem !important; }
+    padding-right: 0.5rem !important; }
   .pb-md-3 {
-    padding-bottom: 1.5rem !important; }
+    padding-bottom: 0.5rem !important; }
   .pl-md-3 {
-    padding-left: 1.5rem !important; }
+    padding-left: 0.5rem !important; }
   .px-md-3 {
-    padding-right: 1.5rem !important;
-    padding-left: 1.5rem !important; }
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important; }
   .py-md-3 {
-    padding-top: 1.5rem !important;
-    padding-bottom: 1.5rem !important; }
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important; }
   .p-md-4 {
-    padding: 2.25rem 2.25rem !important; }
+    padding: 0.75rem 0.75rem !important; }
   .pt-md-4 {
-    padding-top: 2.25rem !important; }
+    padding-top: 0.75rem !important; }
   .pr-md-4 {
-    padding-right: 2.25rem !important; }
+    padding-right: 0.75rem !important; }
   .pb-md-4 {
-    padding-bottom: 2.25rem !important; }
+    padding-bottom: 0.75rem !important; }
   .pl-md-4 {
-    padding-left: 2.25rem !important; }
+    padding-left: 0.75rem !important; }
   .px-md-4 {
-    padding-right: 2.25rem !important;
-    padding-left: 2.25rem !important; }
+    padding-right: 0.75rem !important;
+    padding-left: 0.75rem !important; }
   .py-md-4 {
-    padding-top: 2.25rem !important;
-    padding-bottom: 2.25rem !important; }
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important; }
   .p-md-5 {
-    padding: 4.5rem 4.5rem !important; }
+    padding: 1rem 1rem !important; }
   .pt-md-5 {
-    padding-top: 4.5rem !important; }
+    padding-top: 1rem !important; }
   .pr-md-5 {
-    padding-right: 4.5rem !important; }
+    padding-right: 1rem !important; }
   .pb-md-5 {
-    padding-bottom: 4.5rem !important; }
+    padding-bottom: 1rem !important; }
   .pl-md-5 {
-    padding-left: 4.5rem !important; }
+    padding-left: 1rem !important; }
   .px-md-5 {
-    padding-right: 4.5rem !important;
-    padding-left: 4.5rem !important; }
+    padding-right: 1rem !important;
+    padding-left: 1rem !important; }
   .py-md-5 {
-    padding-top: 4.5rem !important;
-    padding-bottom: 4.5rem !important; }
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important; }
   .p-md-6 {
-    padding: 6rem 6rem !important; }
+    padding: 3rem 3rem !important; }
   .pt-md-6 {
-    padding-top: 6rem !important; }
+    padding-top: 3rem !important; }
   .pr-md-6 {
-    padding-right: 6rem !important; }
+    padding-right: 3rem !important; }
   .pb-md-6 {
-    padding-bottom: 6rem !important; }
+    padding-bottom: 3rem !important; }
   .pl-md-6 {
-    padding-left: 6rem !important; }
+    padding-left: 3rem !important; }
   .px-md-6 {
-    padding-right: 6rem !important;
-    padding-left: 6rem !important; }
+    padding-right: 3rem !important;
+    padding-left: 3rem !important; }
   .py-md-6 {
-    padding-top: 6rem !important;
-    padding-bottom: 6rem !important; }
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important; }
   .m-md-auto {
     margin: auto !important; }
   .mt-md-auto {
@@ -4972,101 +4343,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     margin-top: 0 !important;
     margin-bottom: 0 !important; }
   .m-lg-1 {
-    margin: 0.375rem 0.375rem !important; }
+    margin: 0.125rem 0.125rem !important; }
   .mt-lg-1 {
-    margin-top: 0.375rem !important; }
+    margin-top: 0.125rem !important; }
   .mr-lg-1 {
-    margin-right: 0.375rem !important; }
+    margin-right: 0.125rem !important; }
   .mb-lg-1 {
-    margin-bottom: 0.375rem !important; }
+    margin-bottom: 0.125rem !important; }
   .ml-lg-1 {
-    margin-left: 0.375rem !important; }
+    margin-left: 0.125rem !important; }
   .mx-lg-1 {
-    margin-right: 0.375rem !important;
-    margin-left: 0.375rem !important; }
+    margin-right: 0.125rem !important;
+    margin-left: 0.125rem !important; }
   .my-lg-1 {
-    margin-top: 0.375rem !important;
-    margin-bottom: 0.375rem !important; }
+    margin-top: 0.125rem !important;
+    margin-bottom: 0.125rem !important; }
   .m-lg-2 {
-    margin: 0.75rem 0.75rem !important; }
+    margin: 0.25rem 0.25rem !important; }
   .mt-lg-2 {
-    margin-top: 0.75rem !important; }
+    margin-top: 0.25rem !important; }
   .mr-lg-2 {
-    margin-right: 0.75rem !important; }
+    margin-right: 0.25rem !important; }
   .mb-lg-2 {
-    margin-bottom: 0.75rem !important; }
+    margin-bottom: 0.25rem !important; }
   .ml-lg-2 {
-    margin-left: 0.75rem !important; }
+    margin-left: 0.25rem !important; }
   .mx-lg-2 {
-    margin-right: 0.75rem !important;
-    margin-left: 0.75rem !important; }
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important; }
   .my-lg-2 {
-    margin-top: 0.75rem !important;
-    margin-bottom: 0.75rem !important; }
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important; }
   .m-lg-3 {
-    margin: 1.5rem 1.5rem !important; }
+    margin: 0.5rem 0.5rem !important; }
   .mt-lg-3 {
-    margin-top: 1.5rem !important; }
+    margin-top: 0.5rem !important; }
   .mr-lg-3 {
-    margin-right: 1.5rem !important; }
+    margin-right: 0.5rem !important; }
   .mb-lg-3 {
-    margin-bottom: 1.5rem !important; }
+    margin-bottom: 0.5rem !important; }
   .ml-lg-3 {
-    margin-left: 1.5rem !important; }
+    margin-left: 0.5rem !important; }
   .mx-lg-3 {
-    margin-right: 1.5rem !important;
-    margin-left: 1.5rem !important; }
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important; }
   .my-lg-3 {
-    margin-top: 1.5rem !important;
-    margin-bottom: 1.5rem !important; }
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important; }
   .m-lg-4 {
-    margin: 2.25rem 2.25rem !important; }
+    margin: 0.75rem 0.75rem !important; }
   .mt-lg-4 {
-    margin-top: 2.25rem !important; }
+    margin-top: 0.75rem !important; }
   .mr-lg-4 {
-    margin-right: 2.25rem !important; }
+    margin-right: 0.75rem !important; }
   .mb-lg-4 {
-    margin-bottom: 2.25rem !important; }
+    margin-bottom: 0.75rem !important; }
   .ml-lg-4 {
-    margin-left: 2.25rem !important; }
+    margin-left: 0.75rem !important; }
   .mx-lg-4 {
-    margin-right: 2.25rem !important;
-    margin-left: 2.25rem !important; }
+    margin-right: 0.75rem !important;
+    margin-left: 0.75rem !important; }
   .my-lg-4 {
-    margin-top: 2.25rem !important;
-    margin-bottom: 2.25rem !important; }
+    margin-top: 0.75rem !important;
+    margin-bottom: 0.75rem !important; }
   .m-lg-5 {
-    margin: 4.5rem 4.5rem !important; }
+    margin: 1rem 1rem !important; }
   .mt-lg-5 {
-    margin-top: 4.5rem !important; }
+    margin-top: 1rem !important; }
   .mr-lg-5 {
-    margin-right: 4.5rem !important; }
+    margin-right: 1rem !important; }
   .mb-lg-5 {
-    margin-bottom: 4.5rem !important; }
+    margin-bottom: 1rem !important; }
   .ml-lg-5 {
-    margin-left: 4.5rem !important; }
+    margin-left: 1rem !important; }
   .mx-lg-5 {
-    margin-right: 4.5rem !important;
-    margin-left: 4.5rem !important; }
+    margin-right: 1rem !important;
+    margin-left: 1rem !important; }
   .my-lg-5 {
-    margin-top: 4.5rem !important;
-    margin-bottom: 4.5rem !important; }
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important; }
   .m-lg-6 {
-    margin: 6rem 6rem !important; }
+    margin: 3rem 3rem !important; }
   .mt-lg-6 {
-    margin-top: 6rem !important; }
+    margin-top: 3rem !important; }
   .mr-lg-6 {
-    margin-right: 6rem !important; }
+    margin-right: 3rem !important; }
   .mb-lg-6 {
-    margin-bottom: 6rem !important; }
+    margin-bottom: 3rem !important; }
   .ml-lg-6 {
-    margin-left: 6rem !important; }
+    margin-left: 3rem !important; }
   .mx-lg-6 {
-    margin-right: 6rem !important;
-    margin-left: 6rem !important; }
+    margin-right: 3rem !important;
+    margin-left: 3rem !important; }
   .my-lg-6 {
-    margin-top: 6rem !important;
-    margin-bottom: 6rem !important; }
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important; }
   .p-lg-0 {
     padding: 0 0 !important; }
   .pt-lg-0 {
@@ -5084,101 +4455,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
   .p-lg-1 {
-    padding: 0.375rem 0.375rem !important; }
+    padding: 0.125rem 0.125rem !important; }
   .pt-lg-1 {
-    padding-top: 0.375rem !important; }
+    padding-top: 0.125rem !important; }
   .pr-lg-1 {
-    padding-right: 0.375rem !important; }
+    padding-right: 0.125rem !important; }
   .pb-lg-1 {
-    padding-bottom: 0.375rem !important; }
+    padding-bottom: 0.125rem !important; }
   .pl-lg-1 {
-    padding-left: 0.375rem !important; }
+    padding-left: 0.125rem !important; }
   .px-lg-1 {
-    padding-right: 0.375rem !important;
-    padding-left: 0.375rem !important; }
+    padding-right: 0.125rem !important;
+    padding-left: 0.125rem !important; }
   .py-lg-1 {
-    padding-top: 0.375rem !important;
-    padding-bottom: 0.375rem !important; }
+    padding-top: 0.125rem !important;
+    padding-bottom: 0.125rem !important; }
   .p-lg-2 {
-    padding: 0.75rem 0.75rem !important; }
+    padding: 0.25rem 0.25rem !important; }
   .pt-lg-2 {
-    padding-top: 0.75rem !important; }
+    padding-top: 0.25rem !important; }
   .pr-lg-2 {
-    padding-right: 0.75rem !important; }
+    padding-right: 0.25rem !important; }
   .pb-lg-2 {
-    padding-bottom: 0.75rem !important; }
+    padding-bottom: 0.25rem !important; }
   .pl-lg-2 {
-    padding-left: 0.75rem !important; }
+    padding-left: 0.25rem !important; }
   .px-lg-2 {
-    padding-right: 0.75rem !important;
-    padding-left: 0.75rem !important; }
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important; }
   .py-lg-2 {
-    padding-top: 0.75rem !important;
-    padding-bottom: 0.75rem !important; }
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important; }
   .p-lg-3 {
-    padding: 1.5rem 1.5rem !important; }
+    padding: 0.5rem 0.5rem !important; }
   .pt-lg-3 {
-    padding-top: 1.5rem !important; }
+    padding-top: 0.5rem !important; }
   .pr-lg-3 {
-    padding-right: 1.5rem !important; }
+    padding-right: 0.5rem !important; }
   .pb-lg-3 {
-    padding-bottom: 1.5rem !important; }
+    padding-bottom: 0.5rem !important; }
   .pl-lg-3 {
-    padding-left: 1.5rem !important; }
+    padding-left: 0.5rem !important; }
   .px-lg-3 {
-    padding-right: 1.5rem !important;
-    padding-left: 1.5rem !important; }
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important; }
   .py-lg-3 {
-    padding-top: 1.5rem !important;
-    padding-bottom: 1.5rem !important; }
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important; }
   .p-lg-4 {
-    padding: 2.25rem 2.25rem !important; }
+    padding: 0.75rem 0.75rem !important; }
   .pt-lg-4 {
-    padding-top: 2.25rem !important; }
+    padding-top: 0.75rem !important; }
   .pr-lg-4 {
-    padding-right: 2.25rem !important; }
+    padding-right: 0.75rem !important; }
   .pb-lg-4 {
-    padding-bottom: 2.25rem !important; }
+    padding-bottom: 0.75rem !important; }
   .pl-lg-4 {
-    padding-left: 2.25rem !important; }
+    padding-left: 0.75rem !important; }
   .px-lg-4 {
-    padding-right: 2.25rem !important;
-    padding-left: 2.25rem !important; }
+    padding-right: 0.75rem !important;
+    padding-left: 0.75rem !important; }
   .py-lg-4 {
-    padding-top: 2.25rem !important;
-    padding-bottom: 2.25rem !important; }
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important; }
   .p-lg-5 {
-    padding: 4.5rem 4.5rem !important; }
+    padding: 1rem 1rem !important; }
   .pt-lg-5 {
-    padding-top: 4.5rem !important; }
+    padding-top: 1rem !important; }
   .pr-lg-5 {
-    padding-right: 4.5rem !important; }
+    padding-right: 1rem !important; }
   .pb-lg-5 {
-    padding-bottom: 4.5rem !important; }
+    padding-bottom: 1rem !important; }
   .pl-lg-5 {
-    padding-left: 4.5rem !important; }
+    padding-left: 1rem !important; }
   .px-lg-5 {
-    padding-right: 4.5rem !important;
-    padding-left: 4.5rem !important; }
+    padding-right: 1rem !important;
+    padding-left: 1rem !important; }
   .py-lg-5 {
-    padding-top: 4.5rem !important;
-    padding-bottom: 4.5rem !important; }
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important; }
   .p-lg-6 {
-    padding: 6rem 6rem !important; }
+    padding: 3rem 3rem !important; }
   .pt-lg-6 {
-    padding-top: 6rem !important; }
+    padding-top: 3rem !important; }
   .pr-lg-6 {
-    padding-right: 6rem !important; }
+    padding-right: 3rem !important; }
   .pb-lg-6 {
-    padding-bottom: 6rem !important; }
+    padding-bottom: 3rem !important; }
   .pl-lg-6 {
-    padding-left: 6rem !important; }
+    padding-left: 3rem !important; }
   .px-lg-6 {
-    padding-right: 6rem !important;
-    padding-left: 6rem !important; }
+    padding-right: 3rem !important;
+    padding-left: 3rem !important; }
   .py-lg-6 {
-    padding-top: 6rem !important;
-    padding-bottom: 6rem !important; }
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important; }
   .m-lg-auto {
     margin: auto !important; }
   .mt-lg-auto {
@@ -5214,101 +4585,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     margin-top: 0 !important;
     margin-bottom: 0 !important; }
   .m-xl-1 {
-    margin: 0.375rem 0.375rem !important; }
+    margin: 0.125rem 0.125rem !important; }
   .mt-xl-1 {
-    margin-top: 0.375rem !important; }
+    margin-top: 0.125rem !important; }
   .mr-xl-1 {
-    margin-right: 0.375rem !important; }
+    margin-right: 0.125rem !important; }
   .mb-xl-1 {
-    margin-bottom: 0.375rem !important; }
+    margin-bottom: 0.125rem !important; }
   .ml-xl-1 {
-    margin-left: 0.375rem !important; }
+    margin-left: 0.125rem !important; }
   .mx-xl-1 {
-    margin-right: 0.375rem !important;
-    margin-left: 0.375rem !important; }
+    margin-right: 0.125rem !important;
+    margin-left: 0.125rem !important; }
   .my-xl-1 {
-    margin-top: 0.375rem !important;
-    margin-bottom: 0.375rem !important; }
+    margin-top: 0.125rem !important;
+    margin-bottom: 0.125rem !important; }
   .m-xl-2 {
-    margin: 0.75rem 0.75rem !important; }
+    margin: 0.25rem 0.25rem !important; }
   .mt-xl-2 {
-    margin-top: 0.75rem !important; }
+    margin-top: 0.25rem !important; }
   .mr-xl-2 {
-    margin-right: 0.75rem !important; }
+    margin-right: 0.25rem !important; }
   .mb-xl-2 {
-    margin-bottom: 0.75rem !important; }
+    margin-bottom: 0.25rem !important; }
   .ml-xl-2 {
-    margin-left: 0.75rem !important; }
+    margin-left: 0.25rem !important; }
   .mx-xl-2 {
-    margin-right: 0.75rem !important;
-    margin-left: 0.75rem !important; }
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important; }
   .my-xl-2 {
-    margin-top: 0.75rem !important;
-    margin-bottom: 0.75rem !important; }
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important; }
   .m-xl-3 {
-    margin: 1.5rem 1.5rem !important; }
+    margin: 0.5rem 0.5rem !important; }
   .mt-xl-3 {
-    margin-top: 1.5rem !important; }
+    margin-top: 0.5rem !important; }
   .mr-xl-3 {
-    margin-right: 1.5rem !important; }
+    margin-right: 0.5rem !important; }
   .mb-xl-3 {
-    margin-bottom: 1.5rem !important; }
+    margin-bottom: 0.5rem !important; }
   .ml-xl-3 {
-    margin-left: 1.5rem !important; }
+    margin-left: 0.5rem !important; }
   .mx-xl-3 {
-    margin-right: 1.5rem !important;
-    margin-left: 1.5rem !important; }
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important; }
   .my-xl-3 {
-    margin-top: 1.5rem !important;
-    margin-bottom: 1.5rem !important; }
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important; }
   .m-xl-4 {
-    margin: 2.25rem 2.25rem !important; }
+    margin: 0.75rem 0.75rem !important; }
   .mt-xl-4 {
-    margin-top: 2.25rem !important; }
+    margin-top: 0.75rem !important; }
   .mr-xl-4 {
-    margin-right: 2.25rem !important; }
+    margin-right: 0.75rem !important; }
   .mb-xl-4 {
-    margin-bottom: 2.25rem !important; }
+    margin-bottom: 0.75rem !important; }
   .ml-xl-4 {
-    margin-left: 2.25rem !important; }
+    margin-left: 0.75rem !important; }
   .mx-xl-4 {
-    margin-right: 2.25rem !important;
-    margin-left: 2.25rem !important; }
+    margin-right: 0.75rem !important;
+    margin-left: 0.75rem !important; }
   .my-xl-4 {
-    margin-top: 2.25rem !important;
-    margin-bottom: 2.25rem !important; }
+    margin-top: 0.75rem !important;
+    margin-bottom: 0.75rem !important; }
   .m-xl-5 {
-    margin: 4.5rem 4.5rem !important; }
+    margin: 1rem 1rem !important; }
   .mt-xl-5 {
-    margin-top: 4.5rem !important; }
+    margin-top: 1rem !important; }
   .mr-xl-5 {
-    margin-right: 4.5rem !important; }
+    margin-right: 1rem !important; }
   .mb-xl-5 {
-    margin-bottom: 4.5rem !important; }
+    margin-bottom: 1rem !important; }
   .ml-xl-5 {
-    margin-left: 4.5rem !important; }
+    margin-left: 1rem !important; }
   .mx-xl-5 {
-    margin-right: 4.5rem !important;
-    margin-left: 4.5rem !important; }
+    margin-right: 1rem !important;
+    margin-left: 1rem !important; }
   .my-xl-5 {
-    margin-top: 4.5rem !important;
-    margin-bottom: 4.5rem !important; }
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important; }
   .m-xl-6 {
-    margin: 6rem 6rem !important; }
+    margin: 3rem 3rem !important; }
   .mt-xl-6 {
-    margin-top: 6rem !important; }
+    margin-top: 3rem !important; }
   .mr-xl-6 {
-    margin-right: 6rem !important; }
+    margin-right: 3rem !important; }
   .mb-xl-6 {
-    margin-bottom: 6rem !important; }
+    margin-bottom: 3rem !important; }
   .ml-xl-6 {
-    margin-left: 6rem !important; }
+    margin-left: 3rem !important; }
   .mx-xl-6 {
-    margin-right: 6rem !important;
-    margin-left: 6rem !important; }
+    margin-right: 3rem !important;
+    margin-left: 3rem !important; }
   .my-xl-6 {
-    margin-top: 6rem !important;
-    margin-bottom: 6rem !important; }
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important; }
   .p-xl-0 {
     padding: 0 0 !important; }
   .pt-xl-0 {
@@ -5326,101 +4697,101 @@ a.bg-inverse:focus, a.bg-inverse:hover {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
   .p-xl-1 {
-    padding: 0.375rem 0.375rem !important; }
+    padding: 0.125rem 0.125rem !important; }
   .pt-xl-1 {
-    padding-top: 0.375rem !important; }
+    padding-top: 0.125rem !important; }
   .pr-xl-1 {
-    padding-right: 0.375rem !important; }
+    padding-right: 0.125rem !important; }
   .pb-xl-1 {
-    padding-bottom: 0.375rem !important; }
+    padding-bottom: 0.125rem !important; }
   .pl-xl-1 {
-    padding-left: 0.375rem !important; }
+    padding-left: 0.125rem !important; }
   .px-xl-1 {
-    padding-right: 0.375rem !important;
-    padding-left: 0.375rem !important; }
+    padding-right: 0.125rem !important;
+    padding-left: 0.125rem !important; }
   .py-xl-1 {
-    padding-top: 0.375rem !important;
-    padding-bottom: 0.375rem !important; }
+    padding-top: 0.125rem !important;
+    padding-bottom: 0.125rem !important; }
   .p-xl-2 {
-    padding: 0.75rem 0.75rem !important; }
+    padding: 0.25rem 0.25rem !important; }
   .pt-xl-2 {
-    padding-top: 0.75rem !important; }
+    padding-top: 0.25rem !important; }
   .pr-xl-2 {
-    padding-right: 0.75rem !important; }
+    padding-right: 0.25rem !important; }
   .pb-xl-2 {
-    padding-bottom: 0.75rem !important; }
+    padding-bottom: 0.25rem !important; }
   .pl-xl-2 {
-    padding-left: 0.75rem !important; }
+    padding-left: 0.25rem !important; }
   .px-xl-2 {
-    padding-right: 0.75rem !important;
-    padding-left: 0.75rem !important; }
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important; }
   .py-xl-2 {
-    padding-top: 0.75rem !important;
-    padding-bottom: 0.75rem !important; }
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important; }
   .p-xl-3 {
-    padding: 1.5rem 1.5rem !important; }
+    padding: 0.5rem 0.5rem !important; }
   .pt-xl-3 {
-    padding-top: 1.5rem !important; }
+    padding-top: 0.5rem !important; }
   .pr-xl-3 {
-    padding-right: 1.5rem !important; }
+    padding-right: 0.5rem !important; }
   .pb-xl-3 {
-    padding-bottom: 1.5rem !important; }
+    padding-bottom: 0.5rem !important; }
   .pl-xl-3 {
-    padding-left: 1.5rem !important; }
+    padding-left: 0.5rem !important; }
   .px-xl-3 {
-    padding-right: 1.5rem !important;
-    padding-left: 1.5rem !important; }
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important; }
   .py-xl-3 {
-    padding-top: 1.5rem !important;
-    padding-bottom: 1.5rem !important; }
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important; }
   .p-xl-4 {
-    padding: 2.25rem 2.25rem !important; }
+    padding: 0.75rem 0.75rem !important; }
   .pt-xl-4 {
-    padding-top: 2.25rem !important; }
+    padding-top: 0.75rem !important; }
   .pr-xl-4 {
-    padding-right: 2.25rem !important; }
+    padding-right: 0.75rem !important; }
   .pb-xl-4 {
-    padding-bottom: 2.25rem !important; }
+    padding-bottom: 0.75rem !important; }
   .pl-xl-4 {
-    padding-left: 2.25rem !important; }
+    padding-left: 0.75rem !important; }
   .px-xl-4 {
-    padding-right: 2.25rem !important;
-    padding-left: 2.25rem !important; }
+    padding-right: 0.75rem !important;
+    padding-left: 0.75rem !important; }
   .py-xl-4 {
-    padding-top: 2.25rem !important;
-    padding-bottom: 2.25rem !important; }
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important; }
   .p-xl-5 {
-    padding: 4.5rem 4.5rem !important; }
+    padding: 1rem 1rem !important; }
   .pt-xl-5 {
-    padding-top: 4.5rem !important; }
+    padding-top: 1rem !important; }
   .pr-xl-5 {
-    padding-right: 4.5rem !important; }
+    padding-right: 1rem !important; }
   .pb-xl-5 {
-    padding-bottom: 4.5rem !important; }
+    padding-bottom: 1rem !important; }
   .pl-xl-5 {
-    padding-left: 4.5rem !important; }
+    padding-left: 1rem !important; }
   .px-xl-5 {
-    padding-right: 4.5rem !important;
-    padding-left: 4.5rem !important; }
+    padding-right: 1rem !important;
+    padding-left: 1rem !important; }
   .py-xl-5 {
-    padding-top: 4.5rem !important;
-    padding-bottom: 4.5rem !important; }
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important; }
   .p-xl-6 {
-    padding: 6rem 6rem !important; }
+    padding: 3rem 3rem !important; }
   .pt-xl-6 {
-    padding-top: 6rem !important; }
+    padding-top: 3rem !important; }
   .pr-xl-6 {
-    padding-right: 6rem !important; }
+    padding-right: 3rem !important; }
   .pb-xl-6 {
-    padding-bottom: 6rem !important; }
+    padding-bottom: 3rem !important; }
   .pl-xl-6 {
-    padding-left: 6rem !important; }
+    padding-left: 3rem !important; }
   .px-xl-6 {
-    padding-right: 6rem !important;
-    padding-left: 6rem !important; }
+    padding-right: 3rem !important;
+    padding-left: 3rem !important; }
   .py-xl-6 {
-    padding-top: 6rem !important;
-    padding-bottom: 6rem !important; }
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important; }
   .m-xl-auto {
     margin: auto !important; }
   .mt-xl-auto {
@@ -5500,7 +4871,7 @@ a.bg-inverse:focus, a.bg-inverse:hover {
   text-transform: capitalize !important; }
 
 .font-weight-normal {
-  font-weight: normal; }
+  font-weight: 300; }
 
 .font-weight-bold {
   font-weight: bold; }
@@ -5629,6 +5000,9 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
 .btn-lg, .btn-group-lg > .btn {
   margin: 0 24px; }
 
+.btn-block {
+  margin: 0 0 2rem 0; }
+
 .fixed-top {
   -webkit-transition: background-color 700ms linear;
   transition: background-color 700ms linear; }
@@ -5639,6 +5013,9 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
 .navbar a {
   color: #263238; }
 
+.navbar .btn {
+  margin-top: .15rem; }
+
 .navbar-brand {
   font-size: 2rem;
   font-weight: 300; }
@@ -5647,6 +5024,13 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
     -webkit-transform: translateY(-5px);
             transform: translateY(-5px); }
 
+.display-2 {
+  margin-bottom: 4rem; }
+
+.bg-progress {
+  background-image: -webkit-linear-gradient(left, #fbc02d, #ff8f00);
+  background-image: linear-gradient(to right, #fbc02d, #ff8f00); }
+
 section.intro {
   min-height: 100vh;
   background-image: url("../img/header-background.jpg");
@@ -5694,20 +5078,103 @@ section.intro {
         height: auto;
         position: absolute;
         top: 50%;
-        -webkit-transform: translate(-50%, -50%);
-                transform: translate(-50%, -50%); }
+        -webkit-transform: translate(-50%, -60%);
+                transform: translate(-50%, -60%);
+        -webkit-animation: scroll 3s infinite;
+                animation: scroll 3s infinite; }
 
 section.content-section {
   padding: 96px 0; }
 
 section#features,
-section#appliances {
+section#appliances,
+section#fireinfo {
   background-color: #eceff1; }
 
-section#news {
+section#news,
+footer {
   background-color: rgba(38, 50, 56, 0.2); }
 
 section#wishlist {
   background-image: url("../img/wishlist-background.jpg");
   background-size: cover;
   background-position: center center; }
+
+section#fireinfo {
+  border-bottom: 1px solid rgba(38, 50, 56, 0.2); }
+
+#copyright {
+  background-color: rgba(38, 50, 56, 0.3);
+  padding: 1rem 0; }
+
+footer {
+  padding: 3rem 0 0 0; }
+
+.feature_icons {
+  width: 40px;
+  height: 100%;
+  float: left;
+  margin-right: .5rem; }
+  .feature_icons svg {
+    width: 32px;
+    height: auto;
+    -webkit-transform: translateY(-4px);
+            transform: translateY(-4px);
+    fill: #b71c1c; }
+
+@-webkit-keyframes scroll {
+  0% {
+    -webkit-transform: translate(-50%, -60%);
+            transform: translate(-50%, -60%); }
+  50% {
+    -webkit-transform: translate(-50%, -30%);
+            transform: translate(-50%, -30%); }
+  100% {
+    -webkit-transform: translate(-50%, -60%);
+            transform: translate(-50%, -60%); } }
+
+@keyframes scroll {
+  0% {
+    -webkit-transform: translate(-50%, -60%);
+            transform: translate(-50%, -60%); }
+  50% {
+    -webkit-transform: translate(-50%, -30%);
+            transform: translate(-50%, -30%); }
+  100% {
+    -webkit-transform: translate(-50%, -60%);
+            transform: translate(-50%, -60%); } }
+
+.donate small {
+  display: inline-block;
+  -webkit-transform: translateY(-2px);
+          transform: translateY(-2px); }
+  .donate small:before {
+    content: "";
+    width: 20px;
+    height: 19px;
+    margin-right: 8px;
+    display: inline-block;
+    background-image: url("../img/icons/icon-heart-filled-white.svg");
+    background-size: cover;
+    -webkit-transform: translateY(5px);
+            transform: translateY(5px); }
+
+.btn-red900 {
+  color: #fff !important;
+  background-color: #b71c1c;
+  border-color: #b71c1c; }
+  .btn-red900:hover {
+    color: #fff !important;
+    background-color: #8b1515;
+    border-color: #821414; }
+  .btn-red900:focus, .btn-red900.focus {
+    box-shadow: 0 0 0 2px rgba(183, 28, 28, 0.5); }
+  .btn-red900.disabled, .btn-red900:disabled {
+    background-color: #b71c1c;
+    border-color: #b71c1c; }
+  .btn-red900:active, .btn-red900.active,
+  .show > .btn-red900.dropdown-toggle {
+    color: #fff !important;
+    background-color: #8b1515;
+    background-image: none;
+    border-color: #821414; }

diff --git a/static/img/icons/icon-heart-filled.svg b/static/img/icons/icon-heart-filled.svg
index 84392a6de21309eee3490160e4da8d7afb1c8fcb..e1f42c7584dea0d6edc0e45aeffe730daf2d2a0b 100644 (file)
--- a/static/img/icons/icon-heart-filled.svg
+++ b/static/img/icons/icon-heart-filled.svg
@@ -1 +1 @@
-<svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg"><title>A8A62DC7-0D29-4C90-BA45-246302512901</title><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 18.35l-1.45-1.32C3.4 12.36 0 9.28 0 5.5 0 2.42 2.42 0 5.5 0 7.24 0 8.91.81 10 2.09 11.09.81 12.76 0 14.5 0 17.58 0 20 2.42 20 5.5c0 3.78-3.4 6.86-8.55 11.54L10 18.35z" fill="#000"/></g></svg>
\ No newline at end of file
+<svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 18.35l-1.45-1.32C3.4 12.36 0 9.28 0 5.5 0 2.42 2.42 0 5.5 0 7.24 0 8.91.81 10 2.09 11.09.81 12.76 0 14.5 0 17.58 0 20 2.42 20 5.5c0 3.78-3.4 6.86-8.55 11.54L10 18.35z" fill="#fff"/></g></svg>
\ No newline at end of file

diff --git a/static/js/site.js b/static/js/site.js
index 6c47de90333718552477bf0a3951e8150da56342..2b405a779f4bcd47d82ae3166b978064c7b44248 100644 (file)
--- a/static/js/site.js
+++ b/static/js/site.js
@@ -17,15 +17,10 @@ $(window).scroll(function() {
        }
 });
 
-//jQuery for page scrolling feature - requires jQuery Easing plugin
-$(function() {
-       $('.page-scroll a, a.page-scroll').bind('click', function(event) {
-               var $anchor = $(this);
-               $('html, body').stop().animate({
-                       scrollTop: $($anchor.attr('href')).offset().top
-               }, 1500, 'easeInOutExpo');
-               event.preventDefault();
-       });
+$("#scrollto").click(function() {
+    $('html, body').animate({
+        scrollTop: $("#features").offset().top - $('.fixed-top').height()
+    }, 1500, 'easeInOutExpo');
 });
 
 $.query = function(name){

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 2ff2a6cc52ff7c37ec89d2bff21f65f613833155..cd898711387e051e45cb0efcab7f2b190b622f46 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
@@ -30,7 +30,7 @@ $brand-inverse:             $gray-dark !default;
 
 // Spacing
 
-$spacer:   1.5rem;
+$spacer:   0.5rem;
 $spacer-x: $spacer;
 $spacer-y: $spacer;
 $spacers: (
@@ -55,12 +55,12 @@ $spacers: (
     y: ($spacer-y * 1.5)
   ),
   5: (
-    x: ($spacer-x * 3),
-    y: ($spacer-y * 3)
+    x: ($spacer-x * 2),
+    y: ($spacer-y * 2)
   ),
   6: (
-    x: ($spacer-x * 4),
-    y: ($spacer-y * 4)
+    x: ($spacer-x * 6),
+    y: ($spacer-y * 6)
   )
 );
 
@@ -76,12 +76,14 @@ $grid-gutter-width-base:     24px;
 
 // Fonts
 
-@import url('https://fonts.googleapis.com/css?family=Ubuntu');
+@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,700');
 $font-family-sans-serif: 'Ubuntu', sans-serif;
 $font-family-base:       $font-family-sans-serif;
 
 $font-size-lg:   1.25rem;
 
+$font-weight-normal: 300;
+
 $font-size-h1: 2.25rem;
 $font-size-h2: 2rem;
 $font-size-h3: 1.5rem;
@@ -89,6 +91,8 @@ $font-size-h4: 1.25rem;
 $font-size-h5: 1rem;
 $font-size-h6: 0.75rem;
 
+$headings-font-weight:   400;
+
 $display1-size: 7.5rem;
 $display2-size: 3rem;
 $display3-size: 2.25rem;
@@ -96,6 +100,8 @@ $display4-size: 1.5rem;
 
 $lead-font-size:   1.5rem;
 
+$small-font-size: .875rem;
+
 
 // Buttons
 
@@ -130,6 +136,10 @@ $btn-danger-color:               $white !default;
 $btn-danger-bg:                  $brand-danger !default;
 $btn-danger-border:              $btn-danger-bg !default;
 
+$btn-red900-color:                              $white !important;
+$btn-red900-bg:                                         $red_900;
+$btn-red900-border:                             $btn-red900-bg;        
+
 $btn-link-disabled-color:        $gray-light !default;
 
 $btn-padding-x-sm:               .5rem !default;

diff --git a/static/scss/style.scss b/static/scss/style.scss
index f8d96f967dd92052a56b41fe43614feaa78c0f2c..ac7064b1c2a92225b2f4206a27e522643dd6f38c 100644 (file)
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -26,13 +26,13 @@
 
 // Components
 @import "bootstrap-4.0.0-alpha.6/scss/transitions";
-@import "bootstrap-4.0.0-alpha.6/scss/dropdown";
+//@import "bootstrap-4.0.0-alpha.6/scss/dropdown";
 @import "bootstrap-4.0.0-alpha.6/scss/button-group";
-@import "bootstrap-4.0.0-alpha.6/scss/input-group";
-@import "bootstrap-4.0.0-alpha.6/scss/custom-forms";
+//@import "bootstrap-4.0.0-alpha.6/scss/input-group";
+//@import "bootstrap-4.0.0-alpha.6/scss/custom-forms";
 @import "bootstrap-4.0.0-alpha.6/scss/nav";
 @import "bootstrap-4.0.0-alpha.6/scss/navbar";
-@import "bootstrap-4.0.0-alpha.6/scss/card";
+//@import "bootstrap-4.0.0-alpha.6/scss/card";
 // @import "bootstrap-4.0.0-alpha.6/scss/breadcrumb";
 // @import "bootstrap-4.0.0-alpha.6/scss/pagination";
 // @import "bootstrap-4.0.0-alpha.6/scss/badge";
@@ -61,6 +61,10 @@
        margin: 0 24px;
 }
 
+.btn-block {
+       margin: 0 0 2rem 0;
+}
+
 .fixed-top {
        transition: background-color 700ms linear;
 }
@@ -73,6 +77,9 @@
        a {
                color: $blue-grey-900;
        }
+       .btn {
+               margin-top: .15rem;
+       }
 }
 
 .navbar-brand {
@@ -84,6 +91,13 @@
        }
 }
 
+.display-2 {
+       margin-bottom: 4rem;
+}
+
+.bg-progress {
+       background-image: linear-gradient(to right, $yellow-700, $amber-800);
+}
 
 section.intro {
        min-height: 100vh;
@@ -136,7 +150,8 @@ section.intro {
                                height: auto;   
                                position: absolute;
                                top: 50%;
-                               transform: translate(-50%, -50%);
+                               transform: translate(-50%, -60%);
+                               animation: scroll 3s infinite;
                        }
                }
        }
@@ -147,11 +162,13 @@ section.content-section {
 }
 
 section#features,
-section#appliances {
+section#appliances,
+section#fireinfo {
        background-color: $blue-grey-50;
 }
 
-section#news {
+section#news,
+footer {
        background-color: rgba($blue-grey-900, .2);
 }
 
@@ -159,4 +176,55 @@ section#wishlist {
        background-image: url('../img/wishlist-background.jpg');
        background-size: cover;
        background-position: center center;
+}
+
+section#fireinfo {
+       border-bottom: 1px solid rgba($blue-grey-900, .2);
+}
+
+#copyright {
+       background-color: rgba($blue-grey-900, .3);
+       padding: 1rem 0;
+}
+
+footer {
+       padding: 3rem 0 0 0;
+}
+
+.feature_icons {
+       width: 40px;
+       height: 100%;
+       float: left;
+       margin-right: .5rem;
+       svg {
+               width: 32px;
+               height: auto;
+               transform: translateY(-4px);
+               fill: $red_900;
+       }
+}
+
+@keyframes scroll {
+  0%   { transform: translate(-50%, -60%); }
+  50% { transform: translate(-50%, -30%); }
+  100% { transform: translate(-50%, -60%); }
+}
+
+.donate small {
+       display: inline-block;
+       transform: translateY(-2px);
+       &:before {
+               content: "";
+               width: 20px;
+               height: 19px;
+               margin-right: 8px;
+               display: inline-block;
+               background-image: url('../img/icons/icon-heart-filled-white.svg');
+               background-size: cover;
+               transform: translateY(5px);
+       }
+}
+
+.btn-red900 {
+  @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
 }
\ No newline at end of file

diff --git a/templates/base.html b/templates/base.html
index 36a918e26f822ee454a88eb8f1f1d1fa3f2235ea..ea91a9a230b48ac401d5e999253b34326cd46df5 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -13,10 +13,8 @@
 
                <!-- styling stuff -->
                <!-- live site -->
-               <!-- <link rel="stylesheet" type="text/css" href="{{ static_url("css/style.css") }}" /> -->
-               
-               <!-- local development -->
-               <link rel="stylesheet" type="text/css" href="http://static.ipfire:8891/css/style.css" />
+               <link rel="stylesheet" type="text/css" href="{{ static_url("css/style.css") }}" />
+
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
                {% if rss_url %}
@@ -65,9 +63,9 @@
 
                {% block footer %}
                        <footer class="footer">
-                               <div class="container">
-                                       <div class="row">
-                                               <div class="col-md-2 links">
+                               <div class="container pb-3">
+                                       <div class="row mb-6">
+                                               <div class="col-2 links">
                                                        <h5>{{ _("About") }}</h5>
 
                                                        <ul class="list-unstyled">
@@ -86,7 +84,7 @@
                                                        </ul>
                                                </div>
 
-                                               <div class="col-md-2 links">
+                                               <div class="col-2 links">
                                                        <h5>{{ _("Support") }}</h5>
 
                                                        <ul class="list-unstyled">
@@ -99,7 +97,7 @@
                                                        </ul>
                                                </div>
 
-                                               <div class="col-md-2 links">
+                                               <div class="col-2 links">
                                                        <h5>{{ _("Join") }}</h5>
 
                                                        <ul class="list-unstyled">
@@ -118,7 +116,7 @@
                                                        </ul>
                                                </div>
 
-                                               <div class="col-md-2 links">
+                                               <div class="col-2 links">
                                                        <h5>{{ _("Development") }}</h5>
 
                                                        <ul class="list-unstyled">
@@ -163,32 +161,31 @@
                                                        </div>
                                                </div>
                                        </div>
-
-                                       {% if ssl_protocol %}
-                                               <p class="pull-right">
-                                                       <span class="fa fa-lock"></span> {{ ssl_protocol }}
-                                                       {% if ssl_cipher %}({{ ssl_cipher }}){% end %}
-                                               </p>
-                                       {% end %}
-
-                                       {% if hostname == "wishlist.ipfire.org" %}
-                                               <p class="pull-right">
-                                                       <a href="/terms">{{ _("Terms & Conditions") }}</a>
-                                               </p>
-                                       {% end %}
-
-                                       <p>
-                                               &copy; {{ year }} -
-                                               {{ _("IPFire is free software written by the IPFire Project") }}
-                                       </p>
+                               </div>
+                               
+                               <div id="copyright">
+                                       <div class="container">
+                                               {% if ssl_protocol %}
+                                                       <p class="pull-right">
+                                                               <span class="fa fa-lock"></span> {{ ssl_protocol }}
+                                                               {% if ssl_cipher %}({{ ssl_cipher }}){% end %}
+                                                       </p>
+                                               {% end %}
+       
+                                               {% if hostname == "wishlist.ipfire.org" %}
+                                                       <p class="pull-right">
+                                                               <a href="/terms">{{ _("Terms & Conditions") }}</a>
+                                                       </p>
+                                               {% end %}
+       
+                                               <p><small>&copy; {{ year }} - {{ _("IPFire is free software written by the IPFire Project") }}</small></p>
+                                       </div>
                                </div>
                        </footer>
                {% end block %}
 
-
-               <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>
+               <script src="{{ static_url("js/jquery.js") }}"></script>
+               <script src="{{ static_url("js/jquery.easing.js") }}"></script>
+               <script src="{{ static_url("js/site.js") }}"></script>
        </body>
 </html>

diff --git a/templates/index.html b/templates/index.html
index e86913c7252317d957c885fadaa3acddd1453299..2f1fb0d4464e528a0e7110ea0f41a65789b19058 100644 (file)
--- a/templates/index.html
+++ b/templates/index.html
@@ -16,8 +16,8 @@
                        </div>
                </div>
                
-               <div class="page-scroll">
-                       <a href="#about" class="btn btn-outline-primary rounded-circle">
+               <div id="scrollto" class="page-scroll">
+                       <a href="#features" class="btn btn-outline-primary rounded-circle">
                                <svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><g><path d="M1.41.02L6 4.694 10.59.02 12 1.46 6 7.581 0 1.459z"/></g></svg>
                        </a>
                </div>
@@ -49,10 +49,13 @@
 
        <section id="features" class="content-section">
                <div class="container">
-                       <h2 class="display-2 text-center mb-5">{{ _("Secure up your network with IPFire") }}</h2>
+                       <h3 class="display-2 text-center">{{ _("Secure up your network with IPFire") }}</h2>
        
-                       <div class="row mb-4">
+                       <div class="row mb-6">
                                <div class="col-4">
+                                       <div class="feature_icons">
+                                               <svg width="18" height="22" viewBox="0 0 18 22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-3-1h24v24H-3z"/><path d="M9 0L0 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V4L9 0zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V11H2V5.3l7-3.11v8.8z" fill="#b71c1c"/></g></svg>
+                                       </div>
                                        <h4>{{ _("Firewall") }}</h4>
                                        <p>
                                                {% if lang == "de" %}
@@ -68,6 +71,9 @@
                                </div>
                                
                                <div class="col-4">
+                                       <div class="feature_icons">
+                                               <svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 13a3 3 0 0 1-3-3c0-1.12.61-2.1 1.5-2.61l9.71-5.62-5.53 9.58c-.5.98-1.51 1.65-2.68 1.65zm0-13c1.81 0 3.5.5 4.97 1.32l-2.1 1.21C12 2.19 11 2 10 2a8 8 0 0 0-8 8c0 2.21.89 4.21 2.34 5.65h.01c.39.39.39 1.02 0 1.41-.39.39-1.03.39-1.42.01A9.969 9.969 0 0 1 0 10C0 4.477 4.477 0 10 0zm10 10c0 2.76-1.12 5.26-2.93 7.07-.39.38-1.02.38-1.41-.01a.996.996 0 0 1 0-1.41A7.95 7.95 0 0 0 18 10c0-1-.19-2-.54-2.9L18.67 5C19.5 6.5 20 8.18 20 10z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
+                                       </div>
                                        <h4>{{ _("Performance") }}</h4>
                                        <p>
                                                {% if lang == "de" %}
@@ -82,6 +88,9 @@
                                </div>
                                
                                <div class="col-4">
+                                       <div class="feature_icons">
+                                               <svg width="22" height="14" viewBox="0 0 22 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h24v24H0z"/></defs><g transform="translate(-1 -5)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M21 10c-1.1 0-2 .9-2 2v3H5v-3c0-1.1-.9-2-2-2s-2 .9-2 2v5c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-5c0-1.1-.9-2-2-2zm-3-5H6c-1.1 0-2 .9-2 2v2.15c1.16.41 2 1.51 2 2.82V14h12v-2.03c0-1.3.84-2.4 2-2.82V7c0-1.1-.9-2-2-2z" fill="#b71c1c" mask="url(#b)"/></g></svg>
+                                       </div>
                                        <h4>{{ _("Easy to use") }}</h4>
                                        <p>
                                                {% if lang == "de" %}
@@ -96,9 +105,12 @@
                                        </p>
                                </div>
                        </div>
-                       
-                       <div class="row mb-4">
+                                               
+                       <div class="row mb-6 pb-4">
                                <div class="col-4">
+                                       <div class="feature_icons">
+                                               <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-2h24v24H-2z"/><path d="M11 16h1a1 1 0 0 1 1 1h7v2h-7a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1H0v-2h7a1 1 0 0 1 1-1h1v-1.66C6.07 13.13 4 10 4 6.67v-4L10 0l6 2.67v4c0 3.33-2.07 6.46-5 7.67V16zM10 2L6 3.69V7h4V2zm0 5v6c1.91-.47 4-2.94 4-5V7h-4z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
+                                       </div>
                                        <h4>{{ _("Network Security") }}</h4>
                                        <p>
                                                {% if lang == "de" %}
@@ -114,6 +126,9 @@
                                </div>
                                
                                <div class="col-4">
+                                       <div class="feature_icons">
+                                               <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-2h24v24H-2z"/><path d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V19c0 .27.16.59.67.5C17.14 18.16 20 14.42 20 10A10 10 0 0 0 10 0z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
+                                       </div>
                                        <h4>{{ _("Open Source") }}</h4>
                                        <p>
                                                {% if lang == "de" %}
@@ -126,7 +141,10 @@
                                        </p>
                                </div>
                                
-                               <div class="col-4 mb-5">
+                               <div class="col-4">
+                                       <div class="feature_icons">
+                                               <svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 18.35l-1.45-1.32C3.4 12.36 0 9.28 0 5.5 0 2.42 2.42 0 5.5 0 7.24 0 8.91.81 10 2.09 11.09.81 12.76 0 14.5 0 17.58 0 20 2.42 20 5.5c0 3.78-3.4 6.86-8.55 11.54L10 18.35z" fill="#b71c1c"/></g></svg>
+                                       </div>
                                        <h4>{{ _("Trusted by thousands") }}</h4>
                                        <p>
                                                {% if lang == "de" %}
@@ -143,7 +161,7 @@
                                </div>
                        </div>
                        
-                       <div class="row justify-content-center">
+                       <div class="row justify-content-center pt-4">
                                <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>
@@ -154,28 +172,28 @@
                <div class="container">
                        <div class="row">
                                <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 }}">
+                                       <h2 class="display-2 mb-6">Latest Release</h2>
+                                       <p class="mb-2"><small>{{ locale.format_date(latest_release.date, shorter=True) }}</small></p>
+                                       <h3 class="display-3 mb-5 pb-5"><a href="/news/{{ latest_release.news.slug }}">
                                                        {{ _("%s has been released!") % latest_release.name }}
                                                </a>
                                        </h3>
-                                       <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 class="btn-toolbar mb-6">
+                                               <a class="btn btn-primary mr-3" href="/download">{{ _("Download") }}</a>
+                                               <a class="btn btn-primary ml-3" 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>
+                                       <p>A complete history of IPFire releases is available at our <a href="/news">News</a> page.</p>
                                </div>
                                
                                <div class="col-5 offset-2">
-                                       <h2 class="display-2 mb-5">What&rsquo;s going on?</h2>
+                                       <h2 class="display-2 mb-6">What&rsquo;s going on?</h2>
                                        <dl class="dl-horizontal">
                                                {% for type, item in latest_news %}
                                                        <dt>
-                                                               {{ locale.format_date(item.published, relative=True, shorter=True) }} &nbsp;
+                                                               <small>{{ locale.format_date(item.published, relative=True, shorter=True) }} &nbsp;</small>
                                                        </dt>
-                                                       <dd class="text-overflow">
+                                                       <dd class="text-overflow mb-4 pb-4">
                                                                {% if type == "news" %}
                                                                        <a href="/news/{{ item.slug }}">
                                                                                <strong>{{ item.title }}</strong>
@@ -188,6 +206,9 @@
                                                        </dd>
                                                {% end %}
                                        </dl>
+                                       
+                                       <a class="btn btn-primary" href="/news">{{ _("Read More") }}</a>
+                                       
                                </div>
                        </div>
                </div>
@@ -196,44 +217,62 @@
        <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>
+                       <h2 class="display-2 text-center text-white">IP<strong>Fire</strong>&rsquo;s Wishlist</h2>
                        
-                       {% if hottest_wish %}
-
-                               {% if hottest_wish.is_new() %}
-                                       <span class="label label-success pull-right">{{ _("NEW") }}</span>
-                               {% elif hottest_wish.remaining_days and hottest_wish.remaining_days <= 10 %}
-                                       <span class="pull-right">
-                                               {{ _("one day left", "%(num)s days left", hottest_wish.remaining_days) % { "num" : hottest_wish.remaining_days } }}
-                                       </span>
-                               {% else %}
-                                       <span class="pull-right">
-                                               {{ _("%d%% funded") % hottest_wish.percentage }}
-                                       </span>
-                               {% end %}
-
-                               <a href="http://wishlist.ipfire.org">
-                                       <strong>{{ _("IPFire Wishlist") }}</strong>
-                               </a>
-
-                               <a href="http://wishlist.ipfire.org/wish/{{ hottest_wish.slug }}">
-                                       {{ hottest_wish.title }}
-                               </a>
-
-                               <div class="progress progress-small">
-                                       <div class="progress-bar" role="progressbar"
-                                                       aria-valuenow="{{ hottest_wish.percentage_bar }}"
-                                                       aria-valuemin="0" aria-valuemax="100" style="width: {{ hottest_wish.percentage_bar }}%;">
-                                               <span class="sr-only">{{ _("%.2f%% complete") % hottest_wish.percentage_bar }}</span>
+                               {% if hottest_wish %}
+       
+                                       {% if hottest_wish.is_new() %}
+                                               <span class="label label-success pull-right">{{ _("NEW") }}</span>
+                                       {% elif hottest_wish.remaining_days and hottest_wish.remaining_days <= 10 %}
+                                               <span class="pull-right">
+                                                       {{ _("one day left", "%(num)s days left", hottest_wish.remaining_days) % { "num" : hottest_wish.remaining_days } }}
+                                               </span>
+                                       {% else %}
+                                               <span class="pull-right">
+                                                       {{ _("%d%% funded") % hottest_wish.percentage }}
+                                               </span>
+                                       {% end %}
+                                       
+                                       <h3 class="text-white pb-5">{{ hottest_wish.title }}</h3>
+       
+                                       <div class="progress progress-small mb-5">
+                                               <div class="progress-bar bg-progress" role="progressbar" aria-valuenow="{{ hottest_wish.percentage_bar }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ hottest_wish.percentage_bar }}%; height: .5rem;">
+                                                       <span class="sr-only">{{ _("%.2f%% complete") % hottest_wish.percentage_bar }}</span>
+                                               </div>
                                        </div>
-                               </div>
-                       {% end %}
+                                       
+                                       <p class="text-white"><a style="color: white; text-decoration: underline;" href="http://wishlist.ipfire.org/wish/{{ hottest_wish.slug }}">Read more</a> about that wish.</p>
+                                       
+                               {% end %}
+                       
                </div>
        </section>
        
        <section id="fireinfo" class="content-section">
                <div class="container">
-                       <h2 class="display-2 mb-5 text-center">Fire<strong>Info</strong> Statistics</h2>
+                       <h2 class="display-2 text-center">Fire<strong>Info</strong> Statistics</h2>
+                       
+                       <div class="row pb-5 mb-6">
+                               <div class="col-3 text-center">
+                                       <p class="mb-3"><small>Latest Release</small></p>
+                                       <h4>2.19 Core 109</h4>  
+                               </div>
+                               
+                               <div class="col-3 text-center">
+                                       <p class="mb-3"><small>Favorite Kernel</small></p>
+                                       <h4>3.14.79-ipfire-pae</h4>     
+                               </div>
+                               
+                               <div class="col-3 text-center">
+                                       <p class="mb-3"><small>Favorite CPU</small></p>
+                                       <h4>Intel</h4>  
+                               </div>
+                               
+                               <div class="col-3 text-center">
+                                       <p class="mb-3"><small>Favorite Virtualisation</small></p>
+                                       <h4>VMWare</h4> 
+                               </div>
+                       </div>
                        
                        <div class="row justify-content-center">
                                <a class="btn btn-primary btn-lg" href="/stats">More Stats</a>
@@ -243,32 +282,32 @@
 
        <section id="appliances" class="content-section">
                <div class="container">
-                       <h2 class="display-3 text-center mb-5">{{ _("Professional Appliances & Services") }}</h2>
+                       <h2 class="display-2 text-center">{{ _("Professional Appliances & Services") }}</h2>
                        
-                       <div class="row mb-6">
+                       <div class="row mb-6 pb-6">
                                <div class="col-7">
                                        <p class="lead">
                                                {% if lang == "de" %}
-                                                       <a href="http://www.lightningwirelabs.com">Lightning Wire Labs</a> bietet
+                                                       <a href="http://www.lightningwirelabs.com" target="_blank">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
+                                                       <a href="http://www.lightningwirelabs.com" target="_blank">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 class="col-4 offset-1">
+                                       <a class="btn btn-secondary btn-lg btn-block" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
+                                       <a class="btn btn-secondary btn-lg btn-block" 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") }}">
+                       <img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}">
                </div>
        </section>
 {% end block %}

diff --git a/templates/modules/menu.html b/templates/modules/menu.html
index 78dfa379e88a2cbb4a27b61904ab6cd0c75adf89..0a42260adb9a7b5d4c074b47881e45870b6a6484 100644 (file)
--- a/templates/modules/menu.html
+++ b/templates/modules/menu.html
@@ -1,24 +1,25 @@
 <ul class="navbar-nav">
        {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
-               <li class="nav-item mr-4">
+               <li class="nav-item mr-5">
                        <a class="nav-link" href="/features">{{ _("Features") }}</a>
                </li>
 
-               <li class="nav-item mr-4">
+               <li class="nav-item ml-5 mr-5">
                        <a class="nav-link" href="/download">{{ _("Download") }}</a>
                </li>
 
-               <li class="nav-item mr-4">
+               <li class="nav-item ml-5 mr-5">
                        <a class="nav-link" href="/get-support">{{ _("Support") }}</a>
                </li>
 
-               <li class="nav-item mr-4">
+               <li class="nav-item ml-5 mr-5">
                        <a class="nav-link" href="/get-involved">{{ _("Community") }}</a>
                </li>
 
-               <li class="nav-item">
-                       <a class="nav-link btn btn-danger btn-sm" href="/donate">{{ _("Donate") }}</a>
+               <li class="nav-item ml-5">
+                       <a class="btn btn-red900 btn-sm donate" href="/donate"><small>{{ _("Donate") }}</small></a>
                </li>
+               
        {% elif hostname == "admin.ipfire.org" %}
                <li class="nav-item">
                        <a class="nav-link" href="/fireinfo">{{ _("Fireinfo") }}</a>