theme refresh

104 files changed, 581 insertions, 366 deletions

diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index deed892..ee8fd1a 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -3,7 +3,7 @@ $secondary: #f88379;
 $black: #2f2f41;
 $white: #ffffff;
 $steel: rgb(92, 90, 90);
-$ghost: #f4f5fb;
+$white-offset: #f4f5fb;
 
 // Links
 $link-color: $primary;
diff --git a/assets/scss/bootstrap/_alert.scss b/assets/scss/bootstrap/_alert.scss
index da2a98a..da2a98a 100755..100644
--- a/assets/scss/bootstrap/_alert.scss
+++ b/assets/scss/bootstrap/_alert.scss
diff --git a/assets/scss/bootstrap/_badge.scss b/assets/scss/bootstrap/_badge.scss
index 2082f05..42c5d08 100755..100644
--- a/assets/scss/bootstrap/_badge.scss
+++ b/assets/scss/bootstrap/_badge.scss
@@ -16,7 +16,7 @@
   @include transition($badge-transition);
 
   @at-root a#{&} {
-    @include hover-focus {
+    @include hover-focus() {
       text-decoration: none;
     }
   }
diff --git a/assets/scss/bootstrap/_breadcrumb.scss b/assets/scss/bootstrap/_breadcrumb.scss
index be30950..d748894 100755..100644
--- a/assets/scss/bootstrap/_breadcrumb.scss
+++ b/assets/scss/bootstrap/_breadcrumb.scss
@@ -3,6 +3,7 @@
   flex-wrap: wrap;
   padding: $breadcrumb-padding-y $breadcrumb-padding-x;
   margin-bottom: $breadcrumb-margin-bottom;
+  @include font-size($breadcrumb-font-size);
   list-style: none;
   background-color: $breadcrumb-bg;
   @include border-radius($breadcrumb-border-radius);
@@ -17,7 +18,7 @@
       display: inline-block; // Suppress underlining of the separator in modern browsers
       padding-right: $breadcrumb-item-padding;
       color: $breadcrumb-divider-color;
-      content: $breadcrumb-divider;
+      content: escape-svg($breadcrumb-divider);
     }
   }
 
diff --git a/assets/scss/bootstrap/_button-group.scss b/assets/scss/bootstrap/_button-group.scss
index d722002..da02d79 100755..100644
--- a/assets/scss/bootstrap/_button-group.scss
+++ b/assets/scss/bootstrap/_button-group.scss
@@ -13,7 +13,7 @@
 
     // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
-    @include hover {
+    @include hover() {
       z-index: 1;
     }
     &:focus,
diff --git a/assets/scss/bootstrap/_buttons.scss b/assets/scss/bootstrap/_buttons.scss
index 2a7d94a..e87d339 100755..100644
--- a/assets/scss/bootstrap/_buttons.scss
+++ b/assets/scss/bootstrap/_buttons.scss
@@ -10,14 +10,16 @@
   font-weight: $btn-font-weight;
   color: $body-color;
   text-align: center;
+  white-space: $btn-white-space;
   vertical-align: middle;
+  cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
   user-select: none;
   background-color: transparent;
   border: $btn-border-width solid transparent;
   @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
   @include transition($btn-transition);
 
-  @include hover {
+  @include hover() {
     color: $body-color;
     text-decoration: none;
   }
@@ -79,7 +81,7 @@ fieldset:disabled a.btn {
   color: $link-color;
   text-decoration: $link-decoration;
 
-  @include hover {
+  @include hover() {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
   }
diff --git a/assets/scss/bootstrap/_card.scss b/assets/scss/bootstrap/_card.scss
index c6b67ce..d6759fd 100755..100644
--- a/assets/scss/bootstrap/_card.scss
+++ b/assets/scss/bootstrap/_card.scss
@@ -7,6 +7,7 @@
   display: flex;
   flex-direction: column;
   min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+  height: $card-height;
   word-wrap: break-word;
   background-color: $card-bg;
   background-clip: border-box;
@@ -35,6 +36,9 @@
   // Enable `flex-grow: 1` for decks and groups so that card blocks take up
   // as much space as possible, ensuring footers are aligned to the bottom.
   flex: 1 1 auto;
+  // Workaround for the image size bug in IE
+  // See: https://github.com/twbs/bootstrap/pull/28855
+  min-height: 1px;
   padding: $card-spacer-x;
   color: $card-color;
 }
@@ -53,7 +57,7 @@
 }
 
 .card-link {
-  @include hover {
+  @include hover() {
     text-decoration: none;
   }
 
@@ -121,19 +125,20 @@
   padding: $card-img-overlay-padding;
 }
 
-.card-img {
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
   width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-  @include border-radius($card-inner-border-radius);
 }
 
-// Card image caps
+.card-img,
 .card-img-top {
-  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
   @include border-top-radius($card-inner-border-radius);
 }
 
+.card-img,
 .card-img-bottom {
-  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
   @include border-bottom-radius($card-inner-border-radius);
 }
 
@@ -141,23 +146,19 @@
 // Card deck
 
 .card-deck {
-  display: flex;
-  flex-direction: column;
-
   .card {
     margin-bottom: $card-deck-margin;
   }
 
   @include media-breakpoint-up(sm) {
+    display: flex;
     flex-flow: row wrap;
     margin-right: -$card-deck-margin;
     margin-left: -$card-deck-margin;
 
     .card {
-      display: flex;
       // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
       flex: 1 0 0%;
-      flex-direction: column;
       margin-right: $card-deck-margin;
       margin-bottom: 0; // Override the default
       margin-left: $card-deck-margin;
@@ -171,9 +172,6 @@
 //
 
 .card-group {
-  display: flex;
-  flex-direction: column;
-
   // The child selector allows nested `.card` within `.card-group`
   // to display properly.
   > .card {
@@ -181,6 +179,7 @@
   }
 
   @include media-breakpoint-up(sm) {
+    display: flex;
     flex-flow: row wrap;
     // The child selector allows nested `.card` within `.card-group`
     // to display properly.
@@ -262,27 +261,17 @@
   > .card {
     overflow: hidden;
 
-    &:not(:first-of-type) {
-      .card-header:first-child {
-        @include border-radius(0);
-      }
-
-      &:not(:last-of-type) {
-        border-bottom: 0;
-        @include border-radius(0);
-      }
-    }
-
-    &:first-of-type {
+    &:not(:last-of-type) {
       border-bottom: 0;
       @include border-bottom-radius(0);
     }
 
-    &:last-of-type {
+    &:not(:first-of-type) {
       @include border-top-radius(0);
     }
 
-    .card-header {
+    > .card-header {
+      @include border-radius(0);
       margin-bottom: -$card-border-width;
     }
   }
diff --git a/assets/scss/bootstrap/_carousel.scss b/assets/scss/bootstrap/_carousel.scss
index 20ea04b..fb5e9f8 100755..100644
--- a/assets/scss/bootstrap/_carousel.scss
+++ b/assets/scss/bootstrap/_carousel.scss
@@ -75,7 +75,7 @@
   .active.carousel-item-right {
     z-index: 0;
     opacity: 0;
-    @include transition(0s $carousel-transition-duration opacity);
+    @include transition(opacity 0s $carousel-transition-duration);
   }
 }
 
@@ -101,7 +101,7 @@
   @include transition($carousel-control-transition);
 
   // Hover/focus state
-  @include hover-focus {
+  @include hover-focus() {
     color: $carousel-control-color;
     text-decoration: none;
     outline: 0;
@@ -111,13 +111,13 @@
 .carousel-control-prev {
   left: 0;
   @if $enable-gradients {
-    background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
+    background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
   }
 }
 .carousel-control-next {
   right: 0;
   @if $enable-gradients {
-    background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
+    background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
   }
 }
 
@@ -130,10 +130,10 @@
   background: no-repeat 50% / 100% 100%;
 }
 .carousel-control-prev-icon {
-  background-image: $carousel-control-prev-icon-bg;
+  background-image: escape-svg($carousel-control-prev-icon-bg);
 }
 .carousel-control-next-icon {
-  background-image: $carousel-control-next-icon-bg;
+  background-image: escape-svg($carousel-control-next-icon-bg);
 }
 
 
diff --git a/assets/scss/bootstrap/_close.scss b/assets/scss/bootstrap/_close.scss
index 5cc96f5..071aebe 100755..100644
--- a/assets/scss/bootstrap/_close.scss
+++ b/assets/scss/bootstrap/_close.scss
@@ -8,13 +8,13 @@
   opacity: .5;
 
   // Override <a>'s hover style
-  @include hover {
+  @include hover() {
     color: $close-color;
     text-decoration: none;
   }
 
   &:not(:disabled):not(.disabled) {
-    @include hover-focus {
+    @include hover-focus() {
       opacity: .75;
     }
   }
diff --git a/assets/scss/bootstrap/_code.scss b/assets/scss/bootstrap/_code.scss
index 74b6e1c..4bc117a 100755..100644
--- a/assets/scss/bootstrap/_code.scss
+++ b/assets/scss/bootstrap/_code.scss
@@ -2,7 +2,7 @@
 code {
   @include font-size($code-font-size);
   color: $code-color;
-  word-break: break-word;
+  word-wrap: break-word;
 
   // Streamline the style when inside anchors to avoid broken underline and more
   a > & {
diff --git a/assets/scss/bootstrap/_custom-forms.scss b/assets/scss/bootstrap/_custom-forms.scss
index 03f3fc5..21e72da 100755..100644
--- a/assets/scss/bootstrap/_custom-forms.scss
+++ b/assets/scss/bootstrap/_custom-forms.scss
@@ -21,7 +21,10 @@
 
 .custom-control-input {
   position: absolute;
+  left: 0;
   z-index: -1; // Put the input behind the label so it doesn't overlay text
+  width: $custom-control-indicator-size;
+  height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
   opacity: 0;
 
   &:checked ~ .custom-control-label::before {
@@ -51,6 +54,8 @@
     @include box-shadow($custom-control-indicator-active-box-shadow);
   }
 
+  // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
+  &[disabled],
   &:disabled {
     ~ .custom-control-label {
       color: $custom-control-label-disabled-color;
@@ -69,7 +74,9 @@
 .custom-control-label {
   position: relative;
   margin-bottom: 0;
+  color: $custom-control-label-color;
   vertical-align: top;
+  cursor: $custom-control-cursor;
 
   // Background-color and (when enabled) gradient
   &::before {
@@ -111,7 +118,7 @@
 
   .custom-control-input:checked ~ .custom-control-label {
     &::after {
-      background-image: $custom-checkbox-indicator-icon-checked;
+      background-image: escape-svg($custom-checkbox-indicator-icon-checked);
     }
   }
 
@@ -122,7 +129,7 @@
       @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
     }
     &::after {
-      background-image: $custom-checkbox-indicator-icon-indeterminate;
+      background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
     }
   }
 
@@ -148,7 +155,7 @@
 
   .custom-control-input:checked ~ .custom-control-label {
     &::after {
-      background-image: $custom-radio-indicator-icon-checked;
+      background-image: escape-svg($custom-radio-indicator-icon-checked);
     }
   }
 
@@ -177,8 +184,8 @@
     }
 
     &::after {
-      top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2});
-      left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2});
+      top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
+      left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
       width: $custom-switch-indicator-size;
       height: $custom-switch-indicator-size;
       background-color: $custom-control-indicator-border-color;
@@ -220,8 +227,7 @@
   line-height: $custom-select-line-height;
   color: $custom-select-color;
   vertical-align: middle;
-  background: $custom-select-background;
-  background-color: $custom-select-bg;
+  background: $custom-select-bg $custom-select-background;
   border: $custom-select-border-width solid $custom-select-border-color;
   @include border-radius($custom-select-border-radius, 0);
   @include box-shadow($custom-select-box-shadow);
@@ -263,6 +269,12 @@
   &::-ms-expand {
     display: none;
   }
+
+  // Remove outline from select box in FF
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $custom-select-color;
+  }
 }
 
 .custom-select-sm {
@@ -307,6 +319,8 @@
     box-shadow: $custom-file-focus-box-shadow;
   }
 
+  // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
+  &[disabled] ~ .custom-file-label,
   &:disabled ~ .custom-file-label {
     background-color: $custom-file-disabled-bg;
   }
@@ -365,7 +379,7 @@
 
 .custom-range {
   width: 100%;
-  height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2});
+  height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
   padding: 0; // Need to reset padding
   background-color: transparent;
   appearance: none;
diff --git a/assets/scss/bootstrap/_dropdown.scss b/assets/scss/bootstrap/_dropdown.scss
index ac3c8c8..76f33a4 100755..100644
--- a/assets/scss/bootstrap/_dropdown.scss
+++ b/assets/scss/bootstrap/_dropdown.scss
@@ -10,7 +10,7 @@
   white-space: nowrap;
 
   // Generate the caret automatically
-  @include caret;
+  @include caret();
 }
 
 // The dropdown menu
@@ -114,7 +114,7 @@
 
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
-  @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y);
+  @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
 }
 
 // Links, buttons, and more within the dropdown menu
@@ -144,7 +144,7 @@
     }
   }
 
-  @include hover-focus {
+  @include hover-focus() {
     color: $dropdown-link-hover-color;
     text-decoration: none;
     @include gradient-bg($dropdown-link-hover-bg);
diff --git a/assets/scss/bootstrap/_forms.scss b/assets/scss/bootstrap/_forms.scss
index ec9c335..b2edb7b 100755..100644
--- a/assets/scss/bootstrap/_forms.scss
+++ b/assets/scss/bootstrap/_forms.scss
@@ -30,8 +30,14 @@
     border: 0;
   }
 
+  // Remove select outline from select box in FF
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $input-color;
+  }
+
   // Customize the `:focus` state to imitate native WebKit styles.
-  @include form-control-focus();
+  @include form-control-focus($ignore-warning: true);
 
   // Placeholder
   &::placeholder {
@@ -80,23 +86,23 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label (or legend)
 // text to align with the form controls.
 .col-form-label {
-  padding-top: calc(#{$input-padding-y} + #{$input-border-width});
-  padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
+  padding-top: add($input-padding-y, $input-border-width);
+  padding-bottom: add($input-padding-y, $input-border-width);
   margin-bottom: 0; // Override the `<label>/<legend>` default
   @include font-size(inherit); // Override the `<legend>` default
   line-height: $input-line-height;
 }
 
 .col-form-label-lg {
-  padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
-  padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
+  padding-top: add($input-padding-y-lg, $input-border-width);
+  padding-bottom: add($input-padding-y-lg, $input-border-width);
   @include font-size($input-font-size-lg);
   line-height: $input-line-height-lg;
 }
 
 .col-form-label-sm {
-  padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
-  padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
+  padding-top: add($input-padding-y-sm, $input-border-width);
+  padding-bottom: add($input-padding-y-sm, $input-border-width);
   @include font-size($input-font-size-sm);
   line-height: $input-line-height-sm;
 }
@@ -110,9 +116,9 @@ select.form-control {
 .form-control-plaintext {
   display: block;
   width: 100%;
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
+  padding: $input-padding-y 0;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+  @include font-size($input-font-size);
   line-height: $input-line-height;
   color: $input-plaintext-color;
   background-color: transparent;
@@ -210,6 +216,8 @@ textarea.form-control {
   margin-top: $form-check-input-margin-y;
   margin-left: -$form-check-input-gutter;
 
+  // Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
+  &[disabled] ~ .form-check-label,
   &:disabled ~ .form-check-label {
     color: $text-muted;
   }
diff --git a/assets/scss/bootstrap/_functions.scss b/assets/scss/bootstrap/_functions.scss
index d2cc91d..695e6cd 100755..100644
--- a/assets/scss/bootstrap/_functions.scss
+++ b/assets/scss/bootstrap/_functions.scss
@@ -8,7 +8,7 @@
   $prev-key: null;
   $prev-num: null;
   @each $key, $num in $map {
-    @if $prev-num == null or unit($num) == "%" {
+    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
       // Do nothing
     } @else if not comparable($prev-num, $num) {
       @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -48,6 +48,17 @@
   @return $string;
 }
 
+// See https://codepen.io/kevinweber/pen/dXWoRw
+@function escape-svg($string) {
+  @if str-index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $escaped-characters {
+      $string: str-replace($string, $char, $encoded);
+    }
+  }
+
+  @return $string;
+}
+
 // Color contrast
 @function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
   $r: red($color);
@@ -84,3 +95,40 @@
 
   @return mix($color-base, $color, $level * $theme-color-interval);
 }
+
+// Return valid calc
+@function add($value1, $value2, $return-calc: true) {
+  @if $value1 == null {
+    @return $value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+    @return $value1 + $value2;
+  }
+
+  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+}
+
+@function subtract($value1, $value2, $return-calc: true) {
+  @if $value1 == null and $value2 == null {
+    @return null;
+  }
+
+  @if $value1 == null {
+    @return -$value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+    @return $value1 - $value2;
+  }
+
+  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+}
diff --git a/assets/scss/bootstrap/_grid.scss b/assets/scss/bootstrap/_grid.scss
index a227515..d36ee75 100755..100644
--- a/assets/scss/bootstrap/_grid.scss
+++ b/assets/scss/bootstrap/_grid.scss
@@ -3,26 +3,43 @@
 // Set the container width, and override it for fixed navbars in media queries.
 
 @if $enable-grid-classes {
+  // Single container class with breakpoint max-widths
   .container {
     @include make-container();
     @include make-container-max-widths();
   }
-}
-
-// Fluid container
-//
-// Utilizes the mixin meant for fixed width containers, but with 100% width for
-// fluid, full width layouts.
 
-@if $enable-grid-classes {
+  // 100% wide container at all breakpoints
   .container-fluid {
     @include make-container();
   }
+
+  // Responsive containers that are 100% wide until a breakpoint
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    .container-#{$breakpoint} {
+      @extend .container-fluid;
+    }
+
+    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+      %responsive-container-#{$breakpoint} {
+        max-width: $container-max-width;
+      }
+
+      @each $name, $width in $grid-breakpoints {
+        @if ($container-max-width > $width or $breakpoint == $name) {
+          .container#{breakpoint-infix($name, $grid-breakpoints)} {
+            @extend %responsive-container-#{$breakpoint};
+          }
+        }
+      }
+    }
+  }
 }
 
+
 // Row
 //
-// Rows contain and clear the floats of your columns.
+// Rows contain your columns.
 
 @if $enable-grid-classes {
   .row {
diff --git a/assets/scss/bootstrap/_images.scss b/assets/scss/bootstrap/_images.scss
index cb9795e..b11b45a 100755..100644
--- a/assets/scss/bootstrap/_images.scss
+++ b/assets/scss/bootstrap/_images.scss
@@ -6,7 +6,7 @@
 // which weren't expecting the images within themselves to be involuntarily resized.
 // See also https://github.com/twbs/bootstrap/issues/18178
 .img-fluid {
-  @include img-fluid;
+  @include img-fluid();
 }
 
 
@@ -19,7 +19,7 @@
   @include box-shadow($thumbnail-box-shadow);
 
   // Keep them at most 100% wide
-  @include img-fluid;
+  @include img-fluid();
 }
 
 //
diff --git a/assets/scss/bootstrap/_input-group.scss b/assets/scss/bootstrap/_input-group.scss
index ac49f69..bf69ddb 100755..100644
--- a/assets/scss/bootstrap/_input-group.scss
+++ b/assets/scss/bootstrap/_input-group.scss
@@ -16,10 +16,8 @@
   > .custom-select,
   > .custom-file {
     position: relative; // For focus state's z-index
-    flex: 1 1 auto;
-    // Add width 1% and flex-basis auto to ensure that button will not wrap out
-    // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
-    width: 1%;
+    flex: 1 1 0%;
+    min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
     margin-bottom: 0;
 
     + .form-control,
diff --git a/assets/scss/bootstrap/_jumbotron.scss b/assets/scss/bootstrap/_jumbotron.scss
index bcd7dca..bcd7dca 100755..100644
--- a/assets/scss/bootstrap/_jumbotron.scss
+++ b/assets/scss/bootstrap/_jumbotron.scss
diff --git a/assets/scss/bootstrap/_list-group.scss b/assets/scss/bootstrap/_list-group.scss
index 3f80687..468c2e3 100755..100644
--- a/assets/scss/bootstrap/_list-group.scss
+++ b/assets/scss/bootstrap/_list-group.scss
@@ -23,7 +23,7 @@
   text-align: inherit; // For `<button>`s (anchors inherit)
 
   // Hover state
-  @include hover-focus {
+  @include hover-focus() {
     z-index: 1; // Place hover/focus items above their siblings for proper border styling
     color: $list-group-action-hover-color;
     text-decoration: none;
@@ -45,8 +45,6 @@
   position: relative;
   display: block;
   padding: $list-group-item-padding-y $list-group-item-padding-x;
-  // Place the border on the list items and negative margin up for better styling
-  margin-bottom: -$list-group-border-width;
   color: $list-group-color;
   background-color: $list-group-bg;
   border: $list-group-border-width solid $list-group-border-color;
@@ -56,7 +54,6 @@
   }
 
   &:last-child {
-    margin-bottom: 0;
     @include border-bottom-radius($list-group-border-radius);
   }
 
@@ -74,6 +71,15 @@
     background-color: $list-group-active-bg;
     border-color: $list-group-active-border-color;
   }
+
+  & + & {
+    border-top-width: 0;
+
+    &.active {
+      margin-top: -$list-group-border-width;
+      border-top-width: $list-group-border-width;
+    }
+  }
 }
 
 
@@ -89,19 +95,29 @@
       flex-direction: row;
 
       .list-group-item {
-        margin-right: -$list-group-border-width;
-        margin-bottom: 0;
-
         &:first-child {
-          @include border-left-radius($list-group-border-radius);
+          @include border-bottom-left-radius($list-group-border-radius);
           @include border-top-right-radius(0);
         }
 
         &:last-child {
-          margin-right: 0;
-          @include border-right-radius($list-group-border-radius);
+          @include border-top-right-radius($list-group-border-radius);
           @include border-bottom-left-radius(0);
         }
+
+        &.active {
+          margin-top: 0;
+        }
+
+        & + .list-group-item {
+          border-top-width: $list-group-border-width;
+          border-left-width: 0;
+
+          &.active {
+            margin-left: -$list-group-border-width;
+            border-left-width: $list-group-border-width;
+          }
+        }
       }
     }
   }
@@ -115,25 +131,18 @@
 
 .list-group-flush {
   .list-group-item {
-    border-right: 0;
-    border-left: 0;
+    border-right-width: 0;
+    border-left-width: 0;
     @include border-radius(0);
 
-    &:last-child {
-      margin-bottom: -$list-group-border-width;
-    }
-  }
-
-  &:first-child {
-    .list-group-item:first-child {
-      border-top: 0;
+    &:first-child {
+      border-top-width: 0;
     }
   }
 
   &:last-child {
     .list-group-item:last-child {
-      margin-bottom: 0;
-      border-bottom: 0;
+      border-bottom-width: 0;
     }
   }
 }
diff --git a/assets/scss/bootstrap/_media.scss b/assets/scss/bootstrap/_media.scss
index b573052..b573052 100755..100644
--- a/assets/scss/bootstrap/_media.scss
+++ b/assets/scss/bootstrap/_media.scss
diff --git a/assets/scss/bootstrap/_mixins.scss b/assets/scss/bootstrap/_mixins.scss
index cc95784..7e7a23d 100755..100644
--- a/assets/scss/bootstrap/_mixins.scss
+++ b/assets/scss/bootstrap/_mixins.scss
@@ -22,7 +22,7 @@
 @import "mixins/text-truncate";
 @import "mixins/visibility";
 
-// // Components
+// Components
 @import "mixins/alert";
 @import "mixins/buttons";
 @import "mixins/caret";
@@ -33,14 +33,14 @@
 @import "mixins/forms";
 @import "mixins/table-row";
 
-// // Skins
+// Skins
 @import "mixins/background-variant";
 @import "mixins/border-radius";
 @import "mixins/box-shadow";
 @import "mixins/gradients";
 @import "mixins/transition";
 
-// // Layout
+// Layout
 @import "mixins/clearfix";
 @import "mixins/grid-framework";
 @import "mixins/grid";
diff --git a/assets/scss/bootstrap/_modal.scss b/assets/scss/bootstrap/_modal.scss
index 6b6770b..9053c17 100755..100644
--- a/assets/scss/bootstrap/_modal.scss
+++ b/assets/scss/bootstrap/_modal.scss
@@ -48,14 +48,19 @@
   .modal.show & {
     transform: $modal-show-transform;
   }
+
+  // When trying to close, animate focus to scale
+  .modal.modal-static & {
+    transform: $modal-scale-transform;
+  }
 }
 
 .modal-dialog-scrollable {
   display: flex; // IE10/11
-  max-height: calc(100% - #{$modal-dialog-margin * 2});
+  max-height: subtract(100%, $modal-dialog-margin * 2);
 
   .modal-content {
-    max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11
+    max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
     overflow: hidden;
   }
 
@@ -72,12 +77,12 @@
 .modal-dialog-centered {
   display: flex;
   align-items: center;
-  min-height: calc(100% - #{$modal-dialog-margin * 2});
+  min-height: subtract(100%, $modal-dialog-margin * 2);
 
   // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
   &::before {
     display: block; // IE10
-    height: calc(100vh - #{$modal-dialog-margin * 2});
+    height: subtract(100vh, $modal-dialog-margin * 2);
     content: "";
   }
 
@@ -138,7 +143,7 @@
   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
   padding: $modal-header-padding;
   border-bottom: $modal-header-border-width solid $modal-header-border-color;
-  @include border-top-radius($modal-content-border-radius);
+  @include border-top-radius($modal-content-inner-border-radius);
 
   .close {
     padding: $modal-header-padding;
@@ -158,7 +163,7 @@
 .modal-body {
   position: relative;
   // Enable `flex-grow: 1` so that the body take up as much space as possible
-  // when should there be a fixed height on `.modal-dialog`.
+  // when there should be a fixed height on `.modal-dialog`.
   flex: 1 1 auto;
   padding: $modal-inner-padding;
 }
@@ -166,15 +171,20 @@
 // Footer (for actions)
 .modal-footer {
   display: flex;
+  flex-wrap: wrap;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: $modal-inner-padding;
+  padding: $modal-inner-padding - $modal-footer-margin-between / 2;
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
-  @include border-bottom-radius($modal-content-border-radius);
-
-  // Easily place margin between footer elements
-  > :not(:first-child) { margin-left: .25rem; }
-  > :not(:last-child) { margin-right: .25rem; }
+  @include border-bottom-radius($modal-content-inner-border-radius);
+
+  // Place margin between footer elements
+  // This solution is far from ideal because of the universal selector usage,
+  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
+  // stylelint-disable-next-line selector-max-universal
+  > * {
+    margin: $modal-footer-margin-between / 2;
+  }
 }
 
 // Measure scrollbar width for padding body during modal show/hide
@@ -195,18 +205,18 @@
   }
 
   .modal-dialog-scrollable {
-    max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
+    max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
 
     .modal-content {
-      max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
+      max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
     }
   }
 
   .modal-dialog-centered {
-    min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
+    min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
 
     &::before {
-      height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
+      height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
     }
   }
 
diff --git a/assets/scss/bootstrap/_nav.scss b/assets/scss/bootstrap/_nav.scss
index e5519b3..667d682 100755..100644
--- a/assets/scss/bootstrap/_nav.scss
+++ b/assets/scss/bootstrap/_nav.scss
@@ -1,7 +1,7 @@
 // Base class
 //
 // Kickstart any navigation component with a set of style resets. Works with
-// `<nav>`s or `<ul>`s.
+// `<nav>`s, `<ul>`s or `<ol>`s.
 
 .nav {
   display: flex;
@@ -15,7 +15,7 @@
   display: block;
   padding: $nav-link-padding-y $nav-link-padding-x;
 
-  @include hover-focus {
+  @include hover-focus() {
     text-decoration: none;
   }
 
@@ -42,7 +42,7 @@
     border: $nav-tabs-border-width solid transparent;
     @include border-top-radius($nav-tabs-border-radius);
 
-    @include hover-focus {
+    @include hover-focus() {
       border-color: $nav-tabs-link-hover-border-color;
     }
 
diff --git a/assets/scss/bootstrap/_navbar.scss b/assets/scss/bootstrap/_navbar.scss
index 5c6e963..5f10a62 100755..100644
--- a/assets/scss/bootstrap/_navbar.scss
+++ b/assets/scss/bootstrap/_navbar.scss
@@ -25,13 +25,23 @@
 
   // Because flex properties aren't inherited, we need to redeclare these first
   // few properties so that content nested within behave properly.
-  > .container,
-  > .container-fluid {
+  %container-flex-properties {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
   }
+
+  .container,
+  .container-fluid {
+    @extend %container-flex-properties;
+  }
+
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+      @extend %container-flex-properties;
+    }
+  }
 }
 
 
@@ -48,7 +58,7 @@
   line-height: inherit;
   white-space: nowrap;
 
-  @include hover-focus {
+  @include hover-focus() {
     text-decoration: none;
   }
 }
@@ -113,7 +123,7 @@
   border: $border-width solid transparent; // remove default button style
   @include border-radius($navbar-toggler-border-radius);
 
-  @include hover-focus {
+  @include hover-focus() {
     text-decoration: none;
   }
 }
@@ -139,11 +149,21 @@
 
     &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
-        > .container,
-        > .container-fluid {
+        %container-navbar-expand-#{$breakpoint} {
           padding-right: 0;
           padding-left: 0;
         }
+
+        > .container,
+        > .container-fluid {
+          @extend %container-navbar-expand-#{$breakpoint};
+        }
+
+        @each $size, $container-max-width in $container-max-widths {
+          > .container#{breakpoint-infix($size, $container-max-widths)} {
+            @extend %container-navbar-expand-#{$breakpoint};
+          }
+        }
       }
 
       @include media-breakpoint-up($next) {
@@ -164,9 +184,19 @@
         }
 
         // For nesting containers, have to redeclare for alignment purposes
+        %container-nesting-#{$breakpoint} {
+          flex-wrap: nowrap;
+        }
+
         > .container,
         > .container-fluid {
-          flex-wrap: nowrap;
+          @extend %container-nesting-#{$breakpoint};
+        }
+
+        @each $size, $container-max-width in $container-max-widths {
+          > .container#{breakpoint-infix($size, $container-max-widths)} {
+            @extend %container-nesting-#{$breakpoint};
+          }
         }
 
         .navbar-collapse {
@@ -194,7 +224,7 @@
   .navbar-brand {
     color: $navbar-light-brand-color;
 
-    @include hover-focus {
+    @include hover-focus() {
       color: $navbar-light-brand-hover-color;
     }
   }
@@ -203,7 +233,7 @@
     .nav-link {
       color: $navbar-light-color;
 
-      @include hover-focus {
+      @include hover-focus() {
         color: $navbar-light-hover-color;
       }
 
@@ -226,7 +256,7 @@
   }
 
   .navbar-toggler-icon {
-    background-image: $navbar-light-toggler-icon-bg;
+    background-image: escape-svg($navbar-light-toggler-icon-bg);
   }
 
   .navbar-text {
@@ -234,7 +264,7 @@
     a {
       color: $navbar-light-active-color;
 
-      @include hover-focus {
+      @include hover-focus() {
         color: $navbar-light-active-color;
       }
     }
@@ -246,7 +276,7 @@
   .navbar-brand {
     color: $navbar-dark-brand-color;
 
-    @include hover-focus {
+    @include hover-focus() {
       color: $navbar-dark-brand-hover-color;
     }
   }
@@ -255,7 +285,7 @@
     .nav-link {
       color: $navbar-dark-color;
 
-      @include hover-focus {
+      @include hover-focus() {
         color: $navbar-dark-hover-color;
       }
 
@@ -278,7 +308,7 @@
   }
 
   .navbar-toggler-icon {
-    background-image: $navbar-dark-toggler-icon-bg;
+    background-image: escape-svg($navbar-dark-toggler-icon-bg);
   }
 
   .navbar-text {
@@ -286,7 +316,7 @@
     a {
       color: $navbar-dark-active-color;
 
-      @include hover-focus {
+      @include hover-focus() {
         color: $navbar-dark-active-color;
       }
     }
diff --git a/assets/scss/bootstrap/_pagination.scss b/assets/scss/bootstrap/_pagination.scss
index b434531..953a35a 100755..100644
--- a/assets/scss/bootstrap/_pagination.scss
+++ b/assets/scss/bootstrap/_pagination.scss
@@ -23,7 +23,7 @@
   }
 
   &:focus {
-    z-index: 2;
+    z-index: 3;
     outline: $pagination-focus-outline;
     box-shadow: $pagination-focus-box-shadow;
   }
@@ -43,7 +43,7 @@
   }
 
   &.active .page-link {
-    z-index: 1;
+    z-index: 3;
     color: $pagination-active-color;
     background-color: $pagination-active-bg;
     border-color: $pagination-active-border-color;
diff --git a/assets/scss/bootstrap/_popover.scss b/assets/scss/bootstrap/_popover.scss
index f205e66..0ad76af 100755..100644
--- a/assets/scss/bootstrap/_popover.scss
+++ b/assets/scss/bootstrap/_popover.scss
@@ -22,7 +22,7 @@
     display: block;
     width: $popover-arrow-width;
     height: $popover-arrow-height;
-    margin: 0 $border-radius-lg;
+    margin: 0 $popover-border-radius;
 
     &::before,
     &::after {
@@ -39,7 +39,7 @@
   margin-bottom: $popover-arrow-height;
 
   > .arrow {
-    bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+    bottom: subtract(-$popover-arrow-height, $popover-border-width);
 
     &::before {
       bottom: 0;
@@ -59,10 +59,10 @@
   margin-left: $popover-arrow-height;
 
   > .arrow {
-    left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+    left: subtract(-$popover-arrow-height, $popover-border-width);
     width: $popover-arrow-height;
     height: $popover-arrow-width;
-    margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
+    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
 
     &::before {
       left: 0;
@@ -82,7 +82,7 @@
   margin-top: $popover-arrow-height;
 
   > .arrow {
-    top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+    top: subtract(-$popover-arrow-height, $popover-border-width);
 
     &::before {
       top: 0;
@@ -114,10 +114,10 @@
   margin-right: $popover-arrow-height;
 
   > .arrow {
-    right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+    right: subtract(-$popover-arrow-height, $popover-border-width);
     width: $popover-arrow-height;
     height: $popover-arrow-width;
-    margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
+    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
 
     &::before {
       right: 0;
@@ -157,8 +157,7 @@
   color: $popover-header-color;
   background-color: $popover-header-bg;
   border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
-  $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
-  @include border-top-radius($offset-border-width);
+  @include border-top-radius($popover-inner-border-radius);
 
   &:empty {
     display: none;
diff --git a/assets/scss/bootstrap/_print.scss b/assets/scss/bootstrap/_print.scss
index 61b60b9..8f73024 100755..100644
--- a/assets/scss/bootstrap/_print.scss
+++ b/assets/scss/bootstrap/_print.scss
@@ -1,6 +1,6 @@
 // stylelint-disable declaration-no-important, selector-no-qualifying-type
 
-// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
+// Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
 
 // ==========================================================================
 // Print styles.
@@ -57,7 +57,7 @@
 
     //
     // Printing Tables:
-    // http://css-discuss.incutio.com/wiki/Printing_Tables
+    // https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     //
 
     thead {
diff --git a/assets/scss/bootstrap/_progress.scss b/assets/scss/bootstrap/_progress.scss
index ab9ea0f..37ef602 100755..100644
--- a/assets/scss/bootstrap/_progress.scss
+++ b/assets/scss/bootstrap/_progress.scss
@@ -20,6 +20,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  overflow: hidden;
   color: $progress-bar-color;
   text-align: center;
   white-space: nowrap;
@@ -36,8 +37,10 @@
   .progress-bar-animated {
     animation: progress-bar-stripes $progress-bar-animation-timing;
 
-    @media (prefers-reduced-motion: reduce) {
-      animation: none;
+    @if $enable-prefers-reduced-motion-media-query {
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
     }
   }
 }
diff --git a/assets/scss/bootstrap/_reboot.scss b/assets/scss/bootstrap/_reboot.scss
index c55d42e..b6c98cc 100755..100644
--- a/assets/scss/bootstrap/_reboot.scss
+++ b/assets/scss/bootstrap/_reboot.scss
@@ -54,12 +54,16 @@ body {
   background-color: $body-bg; // 2
 }
 
-// Suppress the focus outline on elements that cannot be accessed via keyboard.
-// This prevents an unwanted focus outline from appearing around elements that
-// might still respond to pointer events.
-//
-// Credit: https://github.com/suitcss/base
-[tabindex="-1"]:focus {
+// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
+// on elements that programmatically receive focus but wouldn't normally show a visible
+// focus outline. In general, this would mean that the outline is only applied if the
+// interaction that led to the element receiving programmatic focus was a keyboard interaction,
+// or the browser has somehow determined that the user is primarily a keyboard user and/or
+// wants focus outlines to always be presented.
+//
+// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
+// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+[tabindex="-1"]:focus:not(:focus-visible) {
   outline: 0 !important;
 }
 
@@ -184,30 +188,25 @@ a {
   text-decoration: $link-decoration;
   background-color: transparent; // Remove the gray background on active links in IE 10.
 
-  @include hover {
+  @include hover() {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
   }
 }
 
-// And undo these styles for placeholder links/named anchors (without href)
-// which have not been made explicitly keyboard-focusable (without tabindex).
+// And undo these styles for placeholder links/named anchors (without href).
 // It would be more straightforward to just use a[href] in previous block, but that
 // causes specificity issues in many other styles that are too complex to fix.
 // See https://github.com/twbs/bootstrap/issues/19402
 
-a:not([href]):not([tabindex]) {
+a:not([href]) {
   color: inherit;
   text-decoration: none;
 
-  @include hover-focus {
+  @include hover() {
     color: inherit;
     text-decoration: none;
   }
-
-  &:focus {
-    outline: 0;
-  }
 }
 
 
diff --git a/assets/scss/bootstrap/_root.scss b/assets/scss/bootstrap/_root.scss
index ad550df..8110030 100755..100644
--- a/assets/scss/bootstrap/_root.scss
+++ b/assets/scss/bootstrap/_root.scss
@@ -1,3 +1,4 @@
+// Do not forget to update getting-started/theming.md!
 :root {
   // Custom variable values only support SassScript inside `#{}`.
   @each $color, $value in $colors {
diff --git a/assets/scss/bootstrap/_spinners.scss b/assets/scss/bootstrap/_spinners.scss
index 364a5c1..364a5c1 100755..100644
--- a/assets/scss/bootstrap/_spinners.scss
+++ b/assets/scss/bootstrap/_spinners.scss
diff --git a/assets/scss/bootstrap/_tables.scss b/assets/scss/bootstrap/_tables.scss
index b7ab3d5..5fd77a4 100755..100644
--- a/assets/scss/bootstrap/_tables.scss
+++ b/assets/scss/bootstrap/_tables.scss
@@ -84,7 +84,7 @@
 
 .table-hover {
   tbody tr {
-    @include hover {
+    @include hover() {
       color: $table-hover-color;
       background-color: $table-hover-bg;
     }
@@ -142,14 +142,14 @@
   }
 
   &.table-striped {
-    tbody tr:nth-of-type(odd) {
+    tbody tr:nth-of-type(#{$table-striped-order}) {
       background-color: $table-dark-accent-bg;
     }
   }
 
   &.table-hover {
     tbody tr {
-      @include hover {
+      @include hover() {
         color: $table-dark-hover-color;
         background-color: $table-dark-hover-bg;
       }
diff --git a/assets/scss/bootstrap/_toasts.scss b/assets/scss/bootstrap/_toasts.scss
index 6aa5352..6aa5352 100755..100644
--- a/assets/scss/bootstrap/_toasts.scss
+++ b/assets/scss/bootstrap/_toasts.scss
diff --git a/assets/scss/bootstrap/_tooltip.scss b/assets/scss/bootstrap/_tooltip.scss
index 6b3aa62..6b3aa62 100755..100644
--- a/assets/scss/bootstrap/_tooltip.scss
+++ b/assets/scss/bootstrap/_tooltip.scss
diff --git a/assets/scss/bootstrap/_transitions.scss b/assets/scss/bootstrap/_transitions.scss
index 40be4d9..40be4d9 100755..100644
--- a/assets/scss/bootstrap/_transitions.scss
+++ b/assets/scss/bootstrap/_transitions.scss
diff --git a/assets/scss/bootstrap/_type.scss b/assets/scss/bootstrap/_type.scss
index f8ed090..43dde7d 100755..100644
--- a/assets/scss/bootstrap/_type.scss
+++ b/assets/scss/bootstrap/_type.scss
@@ -82,12 +82,12 @@ mark,
 //
 
 .list-unstyled {
-  @include list-unstyled;
+  @include list-unstyled();
 }
 
 // Inline turns list items into inline-block
 .list-inline {
-  @include list-unstyled;
+  @include list-unstyled();
 }
 .list-inline-item {
   display: inline-block;
diff --git a/assets/scss/bootstrap/_utilities.scss b/assets/scss/bootstrap/_utilities.scss
index a5de31b..a5de31b 100755..100644
--- a/assets/scss/bootstrap/_utilities.scss
+++ b/assets/scss/bootstrap/_utilities.scss
diff --git a/assets/scss/bootstrap/_variables.scss b/assets/scss/bootstrap/_variables.scss
index d9e88df..5d3135c 100755..100644
--- a/assets/scss/bootstrap/_variables.scss
+++ b/assets/scss/bootstrap/_variables.scss
@@ -101,6 +101,13 @@ $yiq-contrasted-threshold:  150 !default;
 $yiq-text-dark:             $gray-900 !default;
 $yiq-text-light:            $white !default;
 
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<","%3c"),
+  (">","%3e"),
+  ("#","%23"),
+) !default;
+
 
 // Options
 //
@@ -220,6 +227,7 @@ $container-max-widths: (
 
 $grid-columns:                12 !default;
 $grid-gutter-width:           30px !default;
+$grid-row-columns:            6 !default;
 
 
 // Components
@@ -366,7 +374,6 @@ $table-dark-accent-bg:        rgba($white, .05) !default;
 $table-dark-hover-color:      $table-dark-color !default;
 $table-dark-hover-bg:         rgba($white, .075) !default;
 $table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
-$table-dark-color:            $white !default;
 
 $table-striped-order:         odd !default;
 
@@ -412,6 +419,7 @@ $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
 $btn-font-size:               $input-btn-font-size !default;
 $btn-line-height:             $input-btn-line-height !default;
+$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
 
 $btn-padding-y-sm:            $input-btn-padding-y-sm !default;
 $btn-padding-x-sm:            $input-btn-padding-x-sm !default;
@@ -488,13 +496,13 @@ $input-plaintext-color:                 $body-color !default;
 
 $input-height-border:                   $input-border-width * 2 !default;
 
-$input-height-inner:                    calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
-$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
-$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
+$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
+$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
+$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
 
-$input-height:                          calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default;
-$input-height-sm:                       calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;
-$input-height-lg:                       calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;
+$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
+$input-height-sm:                       add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+$input-height-lg:                       add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
 
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
@@ -518,6 +526,7 @@ $custom-forms-transition:               background-color .15s ease-in-out, borde
 
 $custom-control-gutter:                 .5rem !default;
 $custom-control-spacer-x:               1rem !default;
+$custom-control-cursor:                 null !default;
 
 $custom-control-indicator-size:         1rem !default;
 $custom-control-indicator-bg:           $input-bg !default;
@@ -527,6 +536,8 @@ $custom-control-indicator-box-shadow:   $input-box-shadow !default;
 $custom-control-indicator-border-color: $gray-500 !default;
 $custom-control-indicator-border-width: $input-border-width !default;
 
+$custom-control-label-color:            null !default;
+
 $custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
 $custom-control-label-disabled-color:           $gray-600 !default;
 
@@ -545,20 +556,20 @@ $custom-control-indicator-active-box-shadow:    none !default;
 $custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
 
 $custom-checkbox-indicator-border-radius:       $border-radius !default;
-$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' 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"), "#", "%23") !default;
+$custom-checkbox-indicator-icon-checked:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
 
 $custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
 $custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;
-$custom-checkbox-indicator-icon-indeterminate:         str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23") !default;
+$custom-checkbox-indicator-icon-indeterminate:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
 $custom-checkbox-indicator-indeterminate-box-shadow:   none !default;
 $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
 
 $custom-radio-indicator-border-radius:          50% !default;
-$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
+$custom-radio-indicator-icon-checked:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
 
 $custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
 $custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
-$custom-switch-indicator-size:                  calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;
+$custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
 
 $custom-select-padding-y:           $input-padding-y !default;
 $custom-select-padding-x:           $input-padding-x !default;
@@ -574,10 +585,10 @@ $custom-select-bg:                  $input-bg !default;
 $custom-select-disabled-bg:         $gray-200 !default;
 $custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
 $custom-select-indicator-color:     $gray-800 !default;
-$custom-select-indicator:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default;
-$custom-select-background:          $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
+$custom-select-background:          escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 
-$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
+$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
 $custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
 $custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;
 
@@ -650,9 +661,9 @@ $form-feedback-valid-color:         theme-color("success") !default;
 $form-feedback-invalid-color:       theme-color("danger") !default;
 
 $form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-$form-feedback-icon-valid:          str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
 $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
+$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 
 $form-validation-states: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
@@ -728,14 +739,14 @@ $navbar-dark-color:                 rgba($white, .5) !default;
 $navbar-dark-hover-color:           rgba($white, .75) !default;
 $navbar-dark-active-color:          $white !default;
 $navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
+$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-dark-toggler-border-color:  rgba($white, .1) !default;
 
 $navbar-light-color:                rgba($black, .5) !default;
 $navbar-light-hover-color:          rgba($black, .7) !default;
 $navbar-light-active-color:         rgba($black, .9) !default;
 $navbar-light-disabled-color:       rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
+$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-light-toggler-border-color: rgba($black, .1) !default;
 
 $navbar-light-brand-color:                $navbar-light-active-color !default;
@@ -757,7 +768,7 @@ $dropdown-bg:                       $white !default;
 $dropdown-border-color:             rgba($black, .15) !default;
 $dropdown-border-radius:            $border-radius !default;
 $dropdown-border-width:             $border-width !default;
-$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
+$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
 $dropdown-divider-bg:               $gray-200 !default;
 $dropdown-divider-margin-y:         $nav-divider-margin-y !default;
 $dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
@@ -822,9 +833,10 @@ $card-spacer-x:                     1.25rem !default;
 $card-border-width:                 $border-width !default;
 $card-border-radius:                $border-radius !default;
 $card-border-color:                 rgba($black, .125) !default;
-$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
 $card-cap-bg:                       rgba($black, .03) !default;
 $card-cap-color:                    null !default;
+$card-height:                       null !default;
 $card-color:                        null !default;
 $card-bg:                           $white !default;
 
@@ -871,6 +883,7 @@ $popover-max-width:                 276px !default;
 $popover-border-width:              $border-width !default;
 $popover-border-color:              rgba($black, .2) !default;
 $popover-border-radius:             $border-radius-lg !default;
+$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
 $popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
 
 $popover-header-bg:                 darken($popover-bg, 3%) !default;
@@ -929,6 +942,9 @@ $badge-pill-border-radius:          10rem !default;
 // Padding applied to the modal body
 $modal-inner-padding:               1rem !default;
 
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between:       .5rem !default;
+
 $modal-dialog-margin:               .5rem !default;
 $modal-dialog-margin-y-sm-up:       1.75rem !default;
 
@@ -939,6 +955,7 @@ $modal-content-bg:                  $white !default;
 $modal-content-border-color:        rgba($black, .2) !default;
 $modal-content-border-width:        $border-width !default;
 $modal-content-border-radius:       $border-radius-lg !default;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
 $modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
 $modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;
 
@@ -960,6 +977,7 @@ $modal-sm:                          300px !default;
 $modal-fade-transform:              translate(0, -50px) !default;
 $modal-show-transform:              none !default;
 $modal-transition:                  transform .3s ease-out !default;
+$modal-scale-transform:             scale(1.02) !default;
 
 
 // Alerts
@@ -1035,6 +1053,8 @@ $figure-caption-color:              $gray-600 !default;
 
 // Breadcrumbs
 
+$breadcrumb-font-size:              null !default;
+
 $breadcrumb-padding-y:              .75rem !default;
 $breadcrumb-padding-x:              1rem !default;
 $breadcrumb-item-padding:           .5rem !default;
@@ -1069,8 +1089,8 @@ $carousel-caption-color:             $white !default;
 
 $carousel-control-icon-width:        20px !default;
 
-$carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
-$carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
+$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
 
 $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
diff --git a/assets/scss/bootstrap/bootstrap-grid.scss b/assets/scss/bootstrap/bootstrap-grid.scss
index d5f92a1..33e1376 100755..100644
--- a/assets/scss/bootstrap/bootstrap-grid.scss
+++ b/assets/scss/bootstrap/bootstrap-grid.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
+ * Bootstrap Grid v4.4.1 (https://getbootstrap.com/)
  * Copyright 2011-2019 The Bootstrap Authors
  * Copyright 2011-2019 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
diff --git a/assets/scss/bootstrap/bootstrap-reboot.scss b/assets/scss/bootstrap/bootstrap-reboot.scss
index 2983f3f..5dd6f84 100755..100644
--- a/assets/scss/bootstrap/bootstrap-reboot.scss
+++ b/assets/scss/bootstrap/bootstrap-reboot.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
+ * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
  * Copyright 2011-2019 The Bootstrap Authors
  * Copyright 2011-2019 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
diff --git a/assets/scss/bootstrap/bootstrap.scss b/assets/scss/bootstrap/bootstrap.scss
index 9f15c2a..881e4d8 100755..100644
--- a/assets/scss/bootstrap/bootstrap.scss
+++ b/assets/scss/bootstrap/bootstrap.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v4.3.1 (https://getbootstrap.com/)
+ * Bootstrap v4.4.1 (https://getbootstrap.com/)
  * Copyright 2011-2019 The Bootstrap Authors
  * Copyright 2011-2019 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
diff --git a/assets/scss/bootstrap/mixins/_alert.scss b/assets/scss/bootstrap/mixins/_alert.scss
index db5a7eb..db5a7eb 100755..100644
--- a/assets/scss/bootstrap/mixins/_alert.scss
+++ b/assets/scss/bootstrap/mixins/_alert.scss
diff --git a/assets/scss/bootstrap/mixins/_background-variant.scss b/assets/scss/bootstrap/mixins/_background-variant.scss
index 494439d..3ceb5c5 100755..100644
--- a/assets/scss/bootstrap/mixins/_background-variant.scss
+++ b/assets/scss/bootstrap/mixins/_background-variant.scss
@@ -2,16 +2,17 @@
 
 // Contextual backgrounds
 
-@mixin bg-variant($parent, $color) {
+@mixin bg-variant($parent, $color, $ignore-warning: false) {
   #{$parent} {
     background-color: $color !important;
   }
   a#{$parent},
   button#{$parent} {
-    @include hover-focus {
+    @include hover-focus() {
       background-color: darken($color, 10%) !important;
     }
   }
+  @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
 }
 
 @mixin bg-gradient-variant($parent, $color) {
diff --git a/assets/scss/bootstrap/mixins/_badge.scss b/assets/scss/bootstrap/mixins/_badge.scss
index 64b29cb..f1c4991 100755..100644
--- a/assets/scss/bootstrap/mixins/_badge.scss
+++ b/assets/scss/bootstrap/mixins/_badge.scss
@@ -3,7 +3,7 @@
   background-color: $bg;
 
   @at-root a#{&} {
-    @include hover-focus {
+    @include hover-focus() {
       color: color-yiq($bg);
       background-color: darken($bg, 10%);
     }
diff --git a/assets/scss/bootstrap/mixins/_border-radius.scss b/assets/scss/bootstrap/mixins/_border-radius.scss
index 88aeb37..88aeb37 100755..100644
--- a/assets/scss/bootstrap/mixins/_border-radius.scss
+++ b/assets/scss/bootstrap/mixins/_border-radius.scss
diff --git a/assets/scss/bootstrap/mixins/_box-shadow.scss b/assets/scss/bootstrap/mixins/_box-shadow.scss
index 0726d43..0726d43 100755..100644
--- a/assets/scss/bootstrap/mixins/_box-shadow.scss
+++ b/assets/scss/bootstrap/mixins/_box-shadow.scss
diff --git a/assets/scss/bootstrap/mixins/_breakpoints.scss b/assets/scss/bootstrap/mixins/_breakpoints.scss
index 23a5de9..23a5de9 100755..100644
--- a/assets/scss/bootstrap/mixins/_breakpoints.scss
+++ b/assets/scss/bootstrap/mixins/_breakpoints.scss
diff --git a/assets/scss/bootstrap/mixins/_buttons.scss b/assets/scss/bootstrap/mixins/_buttons.scss
index eee903f..c82c4d6 100755..100644
--- a/assets/scss/bootstrap/mixins/_buttons.scss
+++ b/assets/scss/bootstrap/mixins/_buttons.scss
@@ -9,7 +9,7 @@
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
-  @include hover {
+  @include hover() {
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
     border-color: $hover-border;
@@ -17,6 +17,9 @@
 
   &:focus,
   &.focus {
+    color: color-yiq($hover-background);
+    @include gradient-bg($hover-background);
+    border-color: $hover-border;
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
       box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
@@ -62,7 +65,7 @@
   color: $color;
   border-color: $color;
 
-  @include hover {
+  @include hover() {
     color: $color-hover;
     background-color: $active-background;
     border-color: $active-border;
diff --git a/assets/scss/bootstrap/mixins/_caret.scss b/assets/scss/bootstrap/mixins/_caret.scss
index 8ecef65..2746649 100755..100644
--- a/assets/scss/bootstrap/mixins/_caret.scss
+++ b/assets/scss/bootstrap/mixins/_caret.scss
@@ -1,25 +1,25 @@
-@mixin caret-down {
+@mixin caret-down() {
   border-top: $caret-width solid;
   border-right: $caret-width solid transparent;
   border-bottom: 0;
   border-left: $caret-width solid transparent;
 }
 
-@mixin caret-up {
+@mixin caret-up() {
   border-top: 0;
   border-right: $caret-width solid transparent;
   border-bottom: $caret-width solid;
   border-left: $caret-width solid transparent;
 }
 
-@mixin caret-right {
+@mixin caret-right() {
   border-top: $caret-width solid transparent;
   border-right: 0;
   border-bottom: $caret-width solid transparent;
   border-left: $caret-width solid;
 }
 
-@mixin caret-left {
+@mixin caret-left() {
   border-top: $caret-width solid transparent;
   border-right: $caret-width solid;
   border-bottom: $caret-width solid transparent;
@@ -33,11 +33,11 @@
       vertical-align: $caret-vertical-align;
       content: "";
       @if $direction == down {
-        @include caret-down;
+        @include caret-down();
       } @else if $direction == up {
-        @include caret-up;
+        @include caret-up();
       } @else if $direction == right {
-        @include caret-right;
+        @include caret-right();
       }
     }
 
@@ -51,7 +51,7 @@
         margin-right: $caret-spacing;
         vertical-align: $caret-vertical-align;
         content: "";
-        @include caret-left;
+        @include caret-left();
       }
     }
 
diff --git a/assets/scss/bootstrap/mixins/_clearfix.scss b/assets/scss/bootstrap/mixins/_clearfix.scss
index 11a977b..11a977b 100755..100644
--- a/assets/scss/bootstrap/mixins/_clearfix.scss
+++ b/assets/scss/bootstrap/mixins/_clearfix.scss
diff --git a/assets/scss/bootstrap/mixins/_deprecate.scss b/assets/scss/bootstrap/mixins/_deprecate.scss
index df070bc..df070bc 100755..100644
--- a/assets/scss/bootstrap/mixins/_deprecate.scss
+++ b/assets/scss/bootstrap/mixins/_deprecate.scss
diff --git a/assets/scss/bootstrap/mixins/_float.scss b/assets/scss/bootstrap/mixins/_float.scss
index adff88e..6b376a2 100755..100644
--- a/assets/scss/bootstrap/mixins/_float.scss
+++ b/assets/scss/bootstrap/mixins/_float.scss
@@ -1,14 +1,14 @@
 // stylelint-disable declaration-no-important
 
-@mixin float-left {
+@mixin float-left() {
   float: left !important;
   @include deprecate("The `float-left` mixin", "v4.3.0", "v5");
 }
-@mixin float-right {
+@mixin float-right() {
   float: right !important;
   @include deprecate("The `float-right` mixin", "v4.3.0", "v5");
 }
-@mixin float-none {
+@mixin float-none() {
   float: none !important;
   @include deprecate("The `float-none` mixin", "v4.3.0", "v5");
 }
diff --git a/assets/scss/bootstrap/mixins/_forms.scss b/assets/scss/bootstrap/mixins/_forms.scss
index ea8a91a..418470d 100755..100644
--- a/assets/scss/bootstrap/mixins/_forms.scss
+++ b/assets/scss/bootstrap/mixins/_forms.scss
@@ -10,7 +10,7 @@
 //
 // Example usage: change the default blue border and shadow to white for better
 // contrast against a dark gray background.
-@mixin form-control-focus() {
+@mixin form-control-focus($ignore-warning: false) {
   &:focus {
     color: $input-focus-color;
     background-color: $input-focus-bg;
@@ -23,8 +23,23 @@
       box-shadow: $input-focus-box-shadow;
     }
   }
+  @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
 }
 
+// This mixin uses an `if()` technique to be compatible with Dart Sass
+// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
+@mixin form-validation-state-selector($state) {
+  @if ($state == "valid" or $state == "invalid") {
+    .was-validated #{if(&, "&", "")}:#{$state},
+    #{if(&, "&", "")}.is-#{$state} {
+      @content;
+    }
+  } @else {
+    #{if(&, "&", "")}.is-#{$state} {
+      @content;
+    }
+  }
+}
 
 @mixin form-validation-state($state, $color, $icon) {
   .#{$state}-feedback {
@@ -50,16 +65,22 @@
     @include border-radius($form-feedback-tooltip-border-radius);
   }
 
+  @include form-validation-state-selector($state) {
+    ~ .#{$state}-feedback,
+    ~ .#{$state}-tooltip {
+      display: block;
+    }
+  }
+
   .form-control {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
+    @include form-validation-state-selector($state) {
       border-color: $color;
 
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
-        background-image: $icon;
+        background-image: escape-svg($icon);
         background-repeat: no-repeat;
-        background-position: center right $input-height-inner-quarter;
+        background-position: right $input-height-inner-quarter center;
         background-size: $input-height-inner-half $input-height-inner-half;
       }
 
@@ -67,18 +88,12 @@
         border-color: $color;
         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
       }
-
-      ~ .#{$state}-feedback,
-      ~ .#{$state}-tooltip {
-        display: block;
-      }
     }
   }
 
   // stylelint-disable-next-line selector-no-qualifying-type
   textarea.form-control {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
+    @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
         background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
@@ -87,41 +102,23 @@
   }
 
   .custom-select {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
+    @include form-validation-state-selector($state) {
       border-color: $color;
 
       @if $enable-validation-icons {
         padding-right: $custom-select-feedback-icon-padding-right;
-        background: $custom-select-background, $icon $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
+        background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
       }
 
       &:focus {
         border-color: $color;
         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
       }
-
-      ~ .#{$state}-feedback,
-      ~ .#{$state}-tooltip {
-        display: block;
-      }
-    }
-  }
-
-
-  .form-control-file {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
-      ~ .#{$state}-feedback,
-      ~ .#{$state}-tooltip {
-        display: block;
-      }
     }
   }
 
   .form-check-input {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
+    @include form-validation-state-selector($state) {
       ~ .form-check-label {
         color: $color;
       }
@@ -134,8 +131,7 @@
   }
 
   .custom-control-input {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
+    @include form-validation-state-selector($state) {
       ~ .custom-control-label {
         color: $color;
 
@@ -144,11 +140,6 @@
         }
       }
 
-      ~ .#{$state}-feedback,
-      ~ .#{$state}-tooltip {
-        display: block;
-      }
-
       &:checked {
         ~ .custom-control-label::before {
           border-color: lighten($color, 10%);
@@ -170,17 +161,11 @@
 
   // custom file
   .custom-file-input {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
+    @include form-validation-state-selector($state) {
       ~ .custom-file-label {
         border-color: $color;
       }
 
-      ~ .#{$state}-feedback,
-      ~ .#{$state}-tooltip {
-        display: block;
-      }
-
       &:focus {
         ~ .custom-file-label {
           border-color: $color;
diff --git a/assets/scss/bootstrap/mixins/_gradients.scss b/assets/scss/bootstrap/mixins/_gradients.scss
index 88c4d64..88c4d64 100755..100644
--- a/assets/scss/bootstrap/mixins/_gradients.scss
+++ b/assets/scss/bootstrap/mixins/_gradients.scss
diff --git a/assets/scss/bootstrap/mixins/_grid-framework.scss b/assets/scss/bootstrap/mixins/_grid-framework.scss
index 649c28b..8e291f7 100755..100644
--- a/assets/scss/bootstrap/mixins/_grid-framework.scss
+++ b/assets/scss/bootstrap/mixins/_grid-framework.scss
@@ -33,10 +33,15 @@
         flex-grow: 1;
         max-width: 100%;
       }
+
+      @for $i from 1 through $grid-row-columns {
+        .row-cols#{$infix}-#{$i} {
+          @include row-cols($i);
+        }
+      }
+
       .col#{$infix}-auto {
-        flex: 0 0 auto;
-        width: auto;
-        max-width: 100%; // Reset earlier grid tiers
+        @include make-col-auto();
       }
 
       @for $i from 1 through $columns {
diff --git a/assets/scss/bootstrap/mixins/_grid.scss b/assets/scss/bootstrap/mixins/_grid.scss
index 924eb0c..b1240b0 100755..100644
--- a/assets/scss/bootstrap/mixins/_grid.scss
+++ b/assets/scss/bootstrap/mixins/_grid.scss
@@ -45,7 +45,25 @@
   max-width: percentage($size / $columns);
 }
 
+@mixin make-col-auto() {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%; // Reset earlier grid tiers
+}
+
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: $size / $columns;
   margin-left: if($num == 0, 0, percentage($num));
 }
+
+// Row columns
+//
+// Specify on a parent element(e.g., .row) to force immediate children into NN
+// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// style grid.
+@mixin row-cols($count) {
+  & > * {
+    flex: 0 0 100% / $count;
+    max-width: 100% / $count;
+  }
+}
diff --git a/assets/scss/bootstrap/mixins/_hover.scss b/assets/scss/bootstrap/mixins/_hover.scss
index 192f847..409f824 100755..100644
--- a/assets/scss/bootstrap/mixins/_hover.scss
+++ b/assets/scss/bootstrap/mixins/_hover.scss
@@ -9,18 +9,18 @@
 //
 // Issue: https://github.com/twbs/bootstrap/issues/25195
 
-@mixin hover {
+@mixin hover() {
   &:hover { @content; }
 }
 
-@mixin hover-focus {
+@mixin hover-focus() {
   &:hover,
   &:focus {
     @content;
   }
 }
 
-@mixin plain-hover-focus {
+@mixin plain-hover-focus() {
   &,
   &:hover,
   &:focus {
@@ -28,7 +28,7 @@
   }
 }
 
-@mixin hover-focus-active {
+@mixin hover-focus-active() {
   &:hover,
   &:focus,
   &:active {
diff --git a/assets/scss/bootstrap/mixins/_image.scss b/assets/scss/bootstrap/mixins/_image.scss
index a76a608..c971e03 100755..100644
--- a/assets/scss/bootstrap/mixins/_image.scss
+++ b/assets/scss/bootstrap/mixins/_image.scss
@@ -7,7 +7,7 @@
 //
 // Keep images from scaling beyond the width of their parents.
 
-@mixin img-fluid {
+@mixin img-fluid() {
   // Part 1: Set a maximum relative to the parent
   max-width: 100%;
   // Part 2: Override the height to auto, otherwise images will be stretched
diff --git a/assets/scss/bootstrap/mixins/_list-group.scss b/assets/scss/bootstrap/mixins/_list-group.scss
index cd47a4e..0da3531 100755..100644
--- a/assets/scss/bootstrap/mixins/_list-group.scss
+++ b/assets/scss/bootstrap/mixins/_list-group.scss
@@ -6,7 +6,7 @@
     background-color: $background;
 
     &.list-group-item-action {
-      @include hover-focus {
+      @include hover-focus() {
         color: $color;
         background-color: darken($background, 5%);
       }
diff --git a/assets/scss/bootstrap/mixins/_lists.scss b/assets/scss/bootstrap/mixins/_lists.scss
index 2518562..251cb07 100755..100644
--- a/assets/scss/bootstrap/mixins/_lists.scss
+++ b/assets/scss/bootstrap/mixins/_lists.scss
@@ -1,7 +1,7 @@
 // Lists
 
 // Unstyled keeps list items block level, just removes default browser padding and list-style
-@mixin list-unstyled {
+@mixin list-unstyled() {
   padding-left: 0;
   list-style: none;
 }
diff --git a/assets/scss/bootstrap/mixins/_nav-divider.scss b/assets/scss/bootstrap/mixins/_nav-divider.scss
index 4fb37b6..3e0ccea 100755..100644
--- a/assets/scss/bootstrap/mixins/_nav-divider.scss
+++ b/assets/scss/bootstrap/mixins/_nav-divider.scss
@@ -2,9 +2,10 @@
 //
 // Dividers (basically an hr) within dropdowns and nav lists
 
-@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {
+@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) {
   height: 0;
   margin: $margin-y 0;
   overflow: hidden;
   border-top: 1px solid $color;
+  @include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning);
 }
diff --git a/assets/scss/bootstrap/mixins/_pagination.scss b/assets/scss/bootstrap/mixins/_pagination.scss
index af8e16d..af8e16d 100755..100644
--- a/assets/scss/bootstrap/mixins/_pagination.scss
+++ b/assets/scss/bootstrap/mixins/_pagination.scss
diff --git a/assets/scss/bootstrap/mixins/_reset-text.scss b/assets/scss/bootstrap/mixins/_reset-text.scss
index bfa9f6e..15b4407 100755..100644
--- a/assets/scss/bootstrap/mixins/_reset-text.scss
+++ b/assets/scss/bootstrap/mixins/_reset-text.scss
@@ -1,4 +1,4 @@
-@mixin reset-text {
+@mixin reset-text() {
   font-family: $font-family-base;
   // We deliberately do NOT reset font-size or word-wrap.
   font-style: normal;
diff --git a/assets/scss/bootstrap/mixins/_resize.scss b/assets/scss/bootstrap/mixins/_resize.scss
index 66f233a..66f233a 100755..100644
--- a/assets/scss/bootstrap/mixins/_resize.scss
+++ b/assets/scss/bootstrap/mixins/_resize.scss
diff --git a/assets/scss/bootstrap/mixins/_screen-reader.scss b/assets/scss/bootstrap/mixins/_screen-reader.scss
index 812591b..2123039 100755..100644
--- a/assets/scss/bootstrap/mixins/_screen-reader.scss
+++ b/assets/scss/bootstrap/mixins/_screen-reader.scss
@@ -3,11 +3,12 @@
 // See: https://a11yproject.com/posts/how-to-hide-content/
 // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 
-@mixin sr-only {
+@mixin sr-only() {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
+  margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -20,7 +21,7 @@
 //
 // Credit: HTML5 Boilerplate
 
-@mixin sr-only-focusable {
+@mixin sr-only-focusable() {
   &:active,
   &:focus {
     position: static;
diff --git a/assets/scss/bootstrap/mixins/_size.scss b/assets/scss/bootstrap/mixins/_size.scss
index 69e056d..69e056d 100755..100644
--- a/assets/scss/bootstrap/mixins/_size.scss
+++ b/assets/scss/bootstrap/mixins/_size.scss
diff --git a/assets/scss/bootstrap/mixins/_table-row.scss b/assets/scss/bootstrap/mixins/_table-row.scss
index f8d6186..1ccde6b 100755..100644
--- a/assets/scss/bootstrap/mixins/_table-row.scss
+++ b/assets/scss/bootstrap/mixins/_table-row.scss
@@ -26,7 +26,7 @@
     $hover-background: darken($background, 5%);
 
     .table-#{$state} {
-      @include hover {
+      @include hover() {
         background-color: $hover-background;
 
         > td,
diff --git a/assets/scss/bootstrap/mixins/_text-emphasis.scss b/assets/scss/bootstrap/mixins/_text-emphasis.scss
index 155d6ca..5eb8a55 100755..100644
--- a/assets/scss/bootstrap/mixins/_text-emphasis.scss
+++ b/assets/scss/bootstrap/mixins/_text-emphasis.scss
@@ -2,15 +2,16 @@
 
 // Typography
 
-@mixin text-emphasis-variant($parent, $color) {
+@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
   #{$parent} {
     color: $color !important;
   }
   @if $emphasized-link-hover-darken-percentage != 0 {
     a#{$parent} {
-      @include hover-focus {
+      @include hover-focus() {
         color: darken($color, $emphasized-link-hover-darken-percentage) !important;
       }
     }
   }
+  @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
 }
diff --git a/assets/scss/bootstrap/mixins/_text-hide.scss b/assets/scss/bootstrap/mixins/_text-hide.scss
index 3a92301..3a92301 100755..100644
--- a/assets/scss/bootstrap/mixins/_text-hide.scss
+++ b/assets/scss/bootstrap/mixins/_text-hide.scss
diff --git a/assets/scss/bootstrap/mixins/_text-truncate.scss b/assets/scss/bootstrap/mixins/_text-truncate.scss
index 3504bb1..3504bb1 100755..100644
--- a/assets/scss/bootstrap/mixins/_text-truncate.scss
+++ b/assets/scss/bootstrap/mixins/_text-truncate.scss
diff --git a/assets/scss/bootstrap/mixins/_transition.scss b/assets/scss/bootstrap/mixins/_transition.scss
index 8ce35a6..8ce35a6 100755..100644
--- a/assets/scss/bootstrap/mixins/_transition.scss
+++ b/assets/scss/bootstrap/mixins/_transition.scss
diff --git a/assets/scss/bootstrap/mixins/_visibility.scss b/assets/scss/bootstrap/mixins/_visibility.scss
index f174673..f174673 100755..100644
--- a/assets/scss/bootstrap/mixins/_visibility.scss
+++ b/assets/scss/bootstrap/mixins/_visibility.scss
diff --git a/assets/scss/bootstrap/utilities/_align.scss b/assets/scss/bootstrap/utilities/_align.scss
index 8b7df9f..8b7df9f 100755..100644
--- a/assets/scss/bootstrap/utilities/_align.scss
+++ b/assets/scss/bootstrap/utilities/_align.scss
diff --git a/assets/scss/bootstrap/utilities/_background.scss b/assets/scss/bootstrap/utilities/_background.scss
index 1f18b2f..a997b1b 100755..100644
--- a/assets/scss/bootstrap/utilities/_background.scss
+++ b/assets/scss/bootstrap/utilities/_background.scss
@@ -1,7 +1,7 @@
 // stylelint-disable declaration-no-important
 
 @each $color, $value in $theme-colors {
-  @include bg-variant(".bg-#{$color}", $value);
+  @include bg-variant(".bg-#{$color}", $value, true);
 }
 
 @if $enable-gradients {
diff --git a/assets/scss/bootstrap/utilities/_borders.scss b/assets/scss/bootstrap/utilities/_borders.scss
index 302f6bf..302f6bf 100755..100644
--- a/assets/scss/bootstrap/utilities/_borders.scss
+++ b/assets/scss/bootstrap/utilities/_borders.scss
diff --git a/assets/scss/bootstrap/utilities/_clearfix.scss b/assets/scss/bootstrap/utilities/_clearfix.scss
index e92522a..e92522a 100755..100644
--- a/assets/scss/bootstrap/utilities/_clearfix.scss
+++ b/assets/scss/bootstrap/utilities/_clearfix.scss
diff --git a/assets/scss/bootstrap/utilities/_display.scss b/assets/scss/bootstrap/utilities/_display.scss
index 1303679..1303679 100755..100644
--- a/assets/scss/bootstrap/utilities/_display.scss
+++ b/assets/scss/bootstrap/utilities/_display.scss
diff --git a/assets/scss/bootstrap/utilities/_embed.scss b/assets/scss/bootstrap/utilities/_embed.scss
index 4497ac0..4497ac0 100755..100644
--- a/assets/scss/bootstrap/utilities/_embed.scss
+++ b/assets/scss/bootstrap/utilities/_embed.scss
diff --git a/assets/scss/bootstrap/utilities/_flex.scss b/assets/scss/bootstrap/utilities/_flex.scss
index 3d4266e..3d4266e 100755..100644
--- a/assets/scss/bootstrap/utilities/_flex.scss
+++ b/assets/scss/bootstrap/utilities/_flex.scss
diff --git a/assets/scss/bootstrap/utilities/_float.scss b/assets/scss/bootstrap/utilities/_float.scss
index 5425084..5425084 100755..100644
--- a/assets/scss/bootstrap/utilities/_float.scss
+++ b/assets/scss/bootstrap/utilities/_float.scss
diff --git a/assets/scss/bootstrap/utilities/_overflow.scss b/assets/scss/bootstrap/utilities/_overflow.scss
index 8326c30..8326c30 100755..100644
--- a/assets/scss/bootstrap/utilities/_overflow.scss
+++ b/assets/scss/bootstrap/utilities/_overflow.scss
diff --git a/assets/scss/bootstrap/utilities/_position.scss b/assets/scss/bootstrap/utilities/_position.scss
index cdf6c11..cdf6c11 100755..100644
--- a/assets/scss/bootstrap/utilities/_position.scss
+++ b/assets/scss/bootstrap/utilities/_position.scss
diff --git a/assets/scss/bootstrap/utilities/_screenreaders.scss b/assets/scss/bootstrap/utilities/_screenreaders.scss
index 9f26fde..9f26fde 100755..100644
--- a/assets/scss/bootstrap/utilities/_screenreaders.scss
+++ b/assets/scss/bootstrap/utilities/_screenreaders.scss
diff --git a/assets/scss/bootstrap/utilities/_shadows.scss b/assets/scss/bootstrap/utilities/_shadows.scss
index f5d03fc..f5d03fc 100755..100644
--- a/assets/scss/bootstrap/utilities/_shadows.scss
+++ b/assets/scss/bootstrap/utilities/_shadows.scss
diff --git a/assets/scss/bootstrap/utilities/_sizing.scss b/assets/scss/bootstrap/utilities/_sizing.scss
index f376488..f376488 100755..100644
--- a/assets/scss/bootstrap/utilities/_sizing.scss
+++ b/assets/scss/bootstrap/utilities/_sizing.scss
diff --git a/assets/scss/bootstrap/utilities/_spacing.scss b/assets/scss/bootstrap/utilities/_spacing.scss
index 3511367..3511367 100755..100644
--- a/assets/scss/bootstrap/utilities/_spacing.scss
+++ b/assets/scss/bootstrap/utilities/_spacing.scss
diff --git a/assets/scss/bootstrap/utilities/_stretched-link.scss b/assets/scss/bootstrap/utilities/_stretched-link.scss
index fb5066b..fb5066b 100755..100644
--- a/assets/scss/bootstrap/utilities/_stretched-link.scss
+++ b/assets/scss/bootstrap/utilities/_stretched-link.scss
diff --git a/assets/scss/bootstrap/utilities/_text.scss b/assets/scss/bootstrap/utilities/_text.scss
index 589e568..5d0f1c8 100755..100644
--- a/assets/scss/bootstrap/utilities/_text.scss
+++ b/assets/scss/bootstrap/utilities/_text.scss
@@ -11,7 +11,7 @@
 .text-justify  { text-align: justify !important; }
 .text-wrap     { white-space: normal !important; }
 .text-nowrap   { white-space: nowrap !important; }
-.text-truncate { @include text-truncate; }
+.text-truncate { @include text-truncate(); }
 
 // Responsive alignment
 
@@ -45,7 +45,7 @@
 .text-white { color: $white !important; }
 
 @each $color, $value in $theme-colors {
-  @include text-emphasis-variant(".text-#{$color}", $value);
+  @include text-emphasis-variant(".text-#{$color}", $value, true);
 }
 
 .text-body { color: $body-color !important; }
diff --git a/assets/scss/bootstrap/utilities/_visibility.scss b/assets/scss/bootstrap/utilities/_visibility.scss
index 7756c3b..7756c3b 100755..100644
--- a/assets/scss/bootstrap/utilities/_visibility.scss
+++ b/assets/scss/bootstrap/utilities/_visibility.scss
diff --git a/assets/scss/bootstrap/vendor/_rfs.scss b/assets/scss/bootstrap/vendor/_rfs.scss
index 497e07e..497e07e 100755..100644
--- a/assets/scss/bootstrap/vendor/_rfs.scss
+++ b/assets/scss/bootstrap/vendor/_rfs.scss
diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss
index f3a8bef..261ec4a 100644
--- a/assets/scss/components/_buttons.scss
+++ b/assets/scss/components/_buttons.scss
@@ -4,11 +4,11 @@
   height: 40px;
   line-height: 40px;
   padding: 0 14px;
-  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+  //box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
   background: $primary;
   border-radius: 4px;
-  font-size: 15px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: normal;
   text-transform: uppercase;
   letter-spacing: 0.025em;
   color: #ffffff;
@@ -19,7 +19,7 @@
     color: #ffffff;
     background-color: lighten($primary, 10%);
     transform: translateY(-1px);
-    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+    //box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
     text-decoration: none;
   }
 }
diff --git a/assets/scss/components/_call.scss b/assets/scss/components/_call.scss
index f6447dd..e441f45 100644
--- a/assets/scss/components/_call.scss
+++ b/assets/scss/components/_call.scss
@@ -1,7 +1,7 @@
 .call {
   position: relative;
   overflow: hidden;
-  background-color: $ghost;
+  background-color: $white-offset;
   border-radius: 4px;
   // box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
   width: 100%;
diff --git a/assets/scss/components/_content.scss b/assets/scss/components/_content.scss
index fc904d5..c807be8 100644
--- a/assets/scss/components/_content.scss
+++ b/assets/scss/components/_content.scss
@@ -1,66 +1,93 @@
 .content {
-  ul,
-  ol {
-    margin-top: 10px;
-    margin-bottom: 20px;
-    list-style: disc;
-    li {
-      margin-bottom: 5px;
-      margin-left: 20px;
-      color: $steel;
-    }
-  }
   a {
     text-decoration: underline;
   }
+  img {
+    max-width: 100%;
+    height: auto;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+  strong {
+    font-width: bold;
+  }
+  em {
+    font-style: italic;
+  }
   p {
     font-family: $font-family-base;
+    line-height: 1.56;
     color: $steel;
   }
   h1 {
-    font-family: $font-family-heading;
-    line-height: 1.2;
-    font-weight: 400;
-    @include media-breakpoint-up(md) {
-      line-height: 1.2;
-      font-weight: 400;
-    }
+    font-family: $font-family-base;
+    font-size: 34px;
+    line-height: 1.26;
+    font-weight: normal;
+    margin-top: 30px;
+    margin-bottom: 20px;
   }
   h2 {
-    font-family: $font-family-heading;
-    font-size: 24px;
+    font-family: $font-family-base;
+    font-size: 26px;
+    font-weight: normal;
     line-height: 1.4;
-    @include media-breakpoint-up(md) {
-      line-height: 1.4;
-    }
+    margin-top: 30px;
   }
   h3 {
-    color: $primary;
+    font-family: $font-family-base;
+    font-size: 20px;
     line-height: 1.4;
-    font-weight: 400;
-    letter-spacing: 1px;
-    @include media-breakpoint-up(md) {
-      line-height: 1.4;
-      letter-spacing: 1.8px;
-      font-weight: 400;
+    font-weight: normal;
+    margin-top: 30px;
+  }
+  ul,
+  ol {
+    margin-bottom: 20px;
+    ul,
+    ol {
+      margin-bottom: 0;
     }
   }
+  ul {
+    list-style: disc;
+  }
+  ol {
+    list-style: decimal;
+  }
+  li {
+    margin-bottom: 5px;
+    line-height: 1.56;
+    margin-left: 20px;
+    color: $steel;
+  }
+  hr {
+    border: none;
+    border-bottom: 1px solid $white-offset;
+  }
   table {
     width: 100%;
+    margin-top: 30px;
+    margin-bottom: 30px;
     th,
     td {
       padding: 5px;
       vertical-align: top;
-      border-top: 1px solid $ghost;
+      border-top: 1px solid $white-offset;
     }
     thead th {
       vertical-align: bottom;
-      border-bottom: 1px solid $ghost;
+      border-bottom: 1px solid $white-offset;
       text-align: left;
       font-weight: bold;
     }
     tbody + tbody {
-      border-top: 1px solid $ghost;
+      border-top: 1px solid $white-offset;
     }
   }
+  blockquote {
+    padding: 0 1em;
+    color: $steel;
+    border-left: .25em solid $secondary;
+  }
 }
diff --git a/assets/scss/components/_feature.scss b/assets/scss/components/_feature.scss
index d4a489a..680fff0 100644
--- a/assets/scss/components/_feature.scss
+++ b/assets/scss/components/_feature.scss
@@ -1,6 +1,6 @@
 .feature {
   height: 100%;
-  border: 1px solid $ghost;
+  border: 1px solid $white-offset;
   border-radius: 3px;
   padding: 20px;
   background-color: #ffffff;
diff --git a/assets/scss/components/_footer.scss b/assets/scss/components/_footer.scss
index 51baa97..436b760 100644
--- a/assets/scss/components/_footer.scss
+++ b/assets/scss/components/_footer.scss
@@ -1,5 +1,5 @@
 .footer {
-  background: $black;
+  background: $footer-background-color;
   padding-top: 20px;
   padding-bottom: 20px;
   .footer-inner {
@@ -17,7 +17,7 @@
     color: #ffffff;
     font-size: 1.3rem;
     font-family: $font-family-heading;
-    font-weight: normal;
+    font-weight: bold;
     margin-bottom: 10px;
     @include media-breakpoint-up(sm) {
       margin: 0;
@@ -28,10 +28,10 @@
     margin: 0;
     padding: 0;
     li {
-      color: lighten($black, 50%);
+      color: $footer-text-color;
       font-size: 1rem;
       a {
-        color: lighten($black, 50%);
+        color: $footer-text-color;
         text-decoration: none;
         padding: 12px 14px 12px 0;
         display: block;
diff --git a/assets/scss/components/_header.scss b/assets/scss/components/_header.scss
index 87c29b7..f9ad34c 100644
--- a/assets/scss/components/_header.scss
+++ b/assets/scss/components/_header.scss
@@ -4,9 +4,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 0 10px 0;
   // box-shadow: 0 1px 15px rgba(50, 50, 93, 0.2);
-  border-bottom: 1px solid $ghost;
+  border-bottom: 1px solid $white-offset;
+  padding: 10px 0px;
   .container {
     display: flex;
     justify-content: space-between;
diff --git a/assets/scss/components/_intro.scss b/assets/scss/components/_intro.scss
index f60578f..4550490 100644
--- a/assets/scss/components/_intro.scss
+++ b/assets/scss/components/_intro.scss
@@ -12,6 +12,7 @@
   h1 {
     color: $black;
     font-size: 42px;
+    font-weight: bold;
     line-height: 1.2;
     @include media-breakpoint-up(md) {
       width: 80%;
@@ -34,7 +35,7 @@
     font-size: 1.2rem;
     font-weight: light;
     line-height: 1.5;
-    color: $black;
+    color: $steel;
   }
 }
 
diff --git a/assets/scss/components/_logo.scss b/assets/scss/components/_logo.scss
index 078f2b5..ab830f0 100644
--- a/assets/scss/components/_logo.scss
+++ b/assets/scss/components/_logo.scss
@@ -2,11 +2,9 @@
   display: none;
   @include media-breakpoint-up(sm) {
     display: block;
-    width: 120px;
   }
   img {
-    width: 100%;
-    height: auto;
+    max-width: unset;
   }
   a {
     display: block;
@@ -31,14 +29,3 @@
     height: 100%;
   }
 }
-
-.logo {
-  path {
-    #Hugo {
-      fill: '#141414';
-    }
-    #Serif {
-      fill: red;
-    }
-  }
-}
diff --git a/assets/scss/components/_main-menu.scss b/assets/scss/components/_main-menu.scss
index 0bbddd6..7b1f33e 100644
--- a/assets/scss/components/_main-menu.scss
+++ b/assets/scss/components/_main-menu.scss
@@ -11,9 +11,9 @@
       list-style: none;
       font-size: 1rem;
       > a {
-        padding: 10px 14px 10px 14px;
+        padding: 10px 12px 10px 12px;
         display: inline-block;
-        font-weight: regular;
+        font-weight: normal;
         text-decoration: none;
         color: $primary;
         &:hover {
@@ -22,15 +22,11 @@
       }
       &.active {
         > a {
-          background: $primary;
-          border-radius: 3px;
+          font-weight: bold;
           text-decoration: none;
-          color: #ffffff;
           &:hover {
             text-decoration: none;
-            background: $primary;
             transition: all 225ms ease-in 0s;
-            color: #ffffff;
           }
         }
       }
diff --git a/assets/scss/components/_strip.scss b/assets/scss/components/_strip.scss
index 2616cae..8b05066 100644
--- a/assets/scss/components/_strip.scss
+++ b/assets/scss/components/_strip.scss
@@ -6,7 +6,7 @@
   background-color: white;
 }
 .strip-grey {
-  background-color: #f4f5fb;
+  background-color: $white-offset;
 }
 .strip-diagonal {
   transform: skewY(5deg);
diff --git a/assets/scss/components/_sub-footer.scss b/assets/scss/components/_sub-footer.scss
index 58ad789..eb24eae 100644
--- a/assets/scss/components/_sub-footer.scss
+++ b/assets/scss/components/_sub-footer.scss
@@ -1,5 +1,5 @@
 .sub-footer {
-  background: darken($black, 10%);
+  background: $sub-footer-background-color;
   padding-top: 20px;
   padding-bottom: 20px;
   @include media-breakpoint-up(md) {
@@ -22,8 +22,7 @@
       li {
         list-style: none;
         display: block;
-        color: lighten($black, 40%);
-
+        color: $sub-footer-text-color;
         strong {
           font-weight: bold;
           color: #ffffff;
@@ -35,7 +34,7 @@
         }
         a {
           display: inline-block;
-          color: lighten($black, 40%);
+          color: $sub-footer-text-color;
           text-decoration: none;
           padding: 10px 10px 10px 0;
           &:hover {
diff --git a/assets/scss/components/_type.scss b/assets/scss/components/_type.scss
index e1bc9c9..cafa679 100644
--- a/assets/scss/components/_type.scss
+++ b/assets/scss/components/_type.scss
@@ -1,10 +1,6 @@
 a {
   color: $primary;
 }
-img {
-  max-width: 100%;
-  height: auto;
-}
 p {
   line-height: 26px;
   color: $steel;
diff --git a/assets/scss/pages/team/_team-summary.scss b/assets/scss/pages/team/_team-summary.scss
index 55975e2..fe28645 100644
--- a/assets/scss/pages/team/_team-summary.scss
+++ b/assets/scss/pages/team/_team-summary.scss
@@ -3,17 +3,21 @@
   flex-wrap: wrap;
   flex-direction: row;
   .team-image {
+    height: 60px;
+    width: 60px;
     margin-right: 10px;
+    border-radius: 50%;
+    overflow: hidden;
     img {
-      border-radius: 50%;
-      height: 100px;
-      width: 100px;
+      width: 60px;
     }
   }
   .team-meta {
     flex: 1;
     h2 {
       margin: 0;
+      font-size: 22px;
+      font-weight: normal;
     }
     p {
       margin: 0;
@@ -23,3 +27,19 @@
     flex: 1 0 100%;
   }
 }
+
+.team-summary-large {
+  background-color: $white-offset;
+  padding: 30px;
+  border-radius: 3px;
+  .team-image {
+    height: 90px;
+    width: 90px;
+    margin-right: 20px;
+    border-radius: 50%;
+    overflow: hidden;
+    img {
+      width: 90px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 42501f0..5cec2ab 100755
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -1,15 +1,41 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,700&display=swap');
+
+// Colors
+$primary: #5122d0; // #106be0;
+$secondary: #f88379;
+$black: #2f2f41;
+$white: #ffffff;
+$white-offset: #f6f7ff;
+$steel: rgb(92, 90, 90);
+
+// Links
+$link-color: $primary;
+$link-decoration: none;
+$link-hover-color: lighten($primary, 20%);
+$link-hover-decoration: underline;
+
+// Fonts
+$font-family-base: Helvetica, Arial, sans-serif, -apple-system;
+$font-family-heading: 'Playfair Display', serif, -apple-system;
+
+// Footer
+$footer-background-color: $primary;
+$footer-text-color: $white;
+$sub-footer-background-color: darken($primary, 10%);
+$sub-footer-text-color: $white;
+
 // Bootstrap
 @import 'bootstrap-variables';
+@import 'bootstrap/bootstrap-reboot';
 @import 'bootstrap/bootstrap-grid';
-@import 'variables';
-@import 'bootstrap/mixins';
-@import "bootstrap/utilities/text";
+// @import 'bootstrap/bootstrap'; // Uncomment this line to import the entire Bootstrap library
+
 
 // Libraries
 @import 'libraries/hamburgers/hamburgers';
 
 // Components
-@import 'components/reset';
+//@import 'components/reset';
 @import 'components/type';
 @import 'components/page';
 @import 'components/header';
@@ -36,11 +62,11 @@
 
 body {
   font-size: 16px;
-  line-height: 1.1;
+  line-height: 1.2;
   font-family: $font-family-base;
   @include media-breakpoint-up(md) {
-    font-size: 17px;
-    line-height: 1.2;
+    font-size: 16px;
+    line-height: 1.3;
   }
 }