diff --git a/fid_bbi/languages/de.ini b/fid_bbi/languages/de.ini
index 329756d24c1c31c1f6b4cd3dec48706d72d984f8..e468d0208c565b330cbff98cceb18ebfac541900 100644
--- a/fid_bbi/languages/de.ini
+++ b/fid_bbi/languages/de.ini
@@ -29,8 +29,8 @@ Username = "E-Mail-Adresse"
 history_search = "Suchverlauf"
 
 Authors/Corporations = "verantwortlich"
-Login = "Mein BBI"
-Your Account = "Mein BBI"
+Login = "Anmelden"
+Your Account = "Konto"
 Holdings = "Verfügbarkeit"
 view_worldcat = "Verfügbarkeit"
 worldcat_availability = "Lokale Bestände (über WorldCat)"
@@ -45,8 +45,8 @@ Availability = "Zugang"
 Data Collection = "Datenquellen"
 FAQs = "FAQ"
 Free = "Open Access"
-LibraryName = "Fachinformationsdienst Buch-, Bibliotheks- und Informationswissenschaft (FID BBI)"
-LibraryNameShort = "Fachinformationsdienst Buch-, Bibliotheks- und Informationswissenschaft"
+LibraryName = "Fachinformationsdienst Buch-, Bibliotheks- und Informationswissenschaft"
+LibraryNameShort = "FID BBI"
 Local = "Lokale Bestände"
 Questions And Notes = "allgemeine Fragen / Anmerkungen"
 Privacy Policy = "Datenschutzerklärung"
diff --git a/fid_bbi/languages/en.ini b/fid_bbi/languages/en.ini
index 6abf7a4e30debe5e3e30322db03257b32a6f6f03..1046d701da29574f609ba82c6325ec163ba2c2a6 100644
--- a/fid_bbi/languages/en.ini
+++ b/fid_bbi/languages/en.ini
@@ -25,7 +25,7 @@ FAQs = "FAQ"
 Free    = "Open Access"
 Get RSS Feed = "RSS Feed"
 LibraryName = Fachinformationsdienst Buch-, Bibliotheks- und Informationswissenschaft (FID BBI)
-LibraryNameShort = Fachinformationsdienst Buch-, Bibliotheks- und Informationswissenschaft
+LibraryNameShort = FID BBI
 Local   = "Local Holdings"
 Questions And Notes = "Questions And Notes"
 Terms of Use = "Terms of Use"
@@ -42,8 +42,8 @@ ISBD Citation = ISBD Citation
 Project Coordination = "Project Coordination"
 
 ; #14758
-Login = "My BBI"
-Your Account = "My BBI"
+Login = "Login"
+Your Account = "Account"
 
 ; #14878
 DDC = "DDC Notation"
@@ -395,7 +395,7 @@ AAAAA= "None of the Specified Libraries"
 BBI Welcome = Sehr geehrte Nutzerin, sehr geehrter Nutzer, wir freuen uns, dass Sie unsere Dienste ab sofort nutzen möchten. Ein Mitarbeiter des Fachinformationsdienstes wird sich mit Ihnen in Verbindung setzen. Nach erfolgter Registrierung können Sie die erweiterten Funktionalitäten des Portals nutzen. Für Rückfragen stehen wir Ihnen unter der Mailadresse info@fid-bbi.de jederzeit zur Verfügung.
 
 Cite this = Cite
-Add to favorites = "Add to My BBI"
+Add to favorites = "Add to favorites"
 Email this = E-Mail
 Permalink = Permalink
 
diff --git a/module/fid_bbi/src/fid_bbi/View/Helper/Root/Icon.php b/module/fid_bbi/src/fid_bbi/View/Helper/Root/Icon.php
new file mode 100644
index 0000000000000000000000000000000000000000..b04b9d6a4052b7d9481dab0af818a4cd808c5c27
--- /dev/null
+++ b/module/fid_bbi/src/fid_bbi/View/Helper/Root/Icon.php
@@ -0,0 +1,60 @@
+<?php
+/**
+ * View helper for inserting an SVG icon
+ *
+ * PHP version 7
+ *
+ * Copyright (C) Aspectis 2020.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+ *
+ * @category VuFind
+ * @package  View_Helpers
+ * @author   Tobias Schäfer <ts@aspectis.net>
+ * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
+ * @link     https://vufind.org/wiki/development Wiki
+ */
+namespace fid_bbi\View\Helper\Root;
+
+/*
+ * View helper for inserting an SVG icon.
+ *
+ * Included SVG files must be present in <theme directory>/icons and
+ * not have a class on the root element, nor an XML declaration.
+ *
+ * @category VuFind
+ * @package  View_Helpers
+ * @author   Tobias Schäfer <ts@aspectis.net>
+ * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
+ * @link     https://vufind.org/wiki/development Wiki
+ */
+class Icon
+{
+    /**
+     * Construct the SVG icon template helper.
+     *
+     * @return \Closure which accepts the $name (and optional $class) of an icon
+     * and returns an SVG string
+     */
+    public function __invoke(\Zend\ServiceManager\ServiceManager $serviceManager): \Closure
+    {
+        $themeInfo = $serviceManager->get('VuFindTheme\ThemeInfo');
+        $iconsDir = $themeInfo->getBaseDir() . '/' . $themeInfo->getTheme() . '/icons';
+
+        return function (string $name, string $class = 'icon') use ($iconsDir) {
+            $svg = file_get_contents("$iconsDir/$name.svg");
+            return implode("<svg class=\"$class\" ", explode('<svg ', $svg, 2));
+        };
+    }
+}
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-100.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-100.woff
new file mode 100644
index 0000000000000000000000000000000000000000..ef5d60a6f5bc840d0c9e8ebf71a0f4486399300d
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-100.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-100.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-100.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..14617becefc5a7f1973149ca892e867902343f55
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-100.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-100italic.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-100italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..372f15a06c906f05131e28b244f931e3dae76f9f
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-100italic.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-100italic.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-100italic.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..9d90b543fea7db831754a0e3bdcc4ce45728d0cb
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-100italic.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-200.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-200.woff
new file mode 100644
index 0000000000000000000000000000000000000000..44f4a3e81530d0b1136faab07d92d9d3569dd2f7
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-200.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-200.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-200.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..d1b3c908bfb263b6c73939f633babeafe6344d03
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-200.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-200italic.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-200italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..d5c90b9fa381551b2be7fe6590de0f8639918da0
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-200italic.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-200italic.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-200italic.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..e163179950c80019218bbefd9afe0658c1c5094b
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-200italic.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-300.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-300.woff
new file mode 100644
index 0000000000000000000000000000000000000000..b685c1e2a680a7af9adae052d8f27a0ed42f9059
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-300.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-300.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-300.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..5717eb1dcb61995df6ee683c8ab85823b8017563
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-300.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-300italic.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-300italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..8ffdb12ae4066b1e469311cc83a1ee3220687b4f
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-300italic.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-300italic.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-300italic.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..63963c5394c4b99ebd634377f7c92dc143c0356f
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-300italic.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-500.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-500.woff
new file mode 100644
index 0000000000000000000000000000000000000000..d64a1e18812a54257361e45140623a9dfcaedef5
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-500.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-500.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-500.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..bb32b14d6bfd9f703469b59c7877a1909ace965b
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-500.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-500italic.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-500italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..3d88465f2563ee154990c2397bdf46e03918b02b
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-500italic.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-500italic.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-500italic.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..b19e61f3e9303b13cd290ddc380b0e3c73c1cafe
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-500italic.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-600.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-600.woff
new file mode 100644
index 0000000000000000000000000000000000000000..fa3df759b97683cc20161a134a24e24587b5943e
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-600.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-600.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-600.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..4656395b7e9080c2e3b5ed31a296304ccba987e0
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-600.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-600italic.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-600italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..8554dee2de791b7af6df5698976f4764c81f4a36
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-600italic.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-600italic.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-600italic.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..90e9fd0e51226850f137cd43b5973eaa2fd12dc6
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-600italic.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-700.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-700.woff
new file mode 100644
index 0000000000000000000000000000000000000000..757cb9cc2727482cbe51ec66054a2173283c25de
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-700.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-700.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-700.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..4414bfd3b10e17109edbaeebbb4cd47492fc2721
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-700.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-700italic.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-700italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..ba16b12ec0a99a4ee344f7ddaf0d5e32432c32ea
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-700italic.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-700italic.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-700italic.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..aae611ffe1f6e45f47ec406b7afbab33e2f3f9ba
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-700italic.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-800.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-800.woff
new file mode 100644
index 0000000000000000000000000000000000000000..cac479b79d6ad17bf5bdb28b4d281d289c7d80ed
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-800.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-800.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-800.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..37a989c620423b685206edfee81d8823208e4722
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-800.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-800italic.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-800italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..0e7da9bc1cce3dd1eac72bda06b4a90a762cc78b
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-800italic.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-800italic.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-800italic.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..487be8f062af1ce5c79af431ebfa214b12eb8378
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-800italic.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-900.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-900.woff
new file mode 100644
index 0000000000000000000000000000000000000000..b0103ba1563baa5bc83dc820a1df2391020fd795
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-900.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-900.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-900.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..f1bad5a1367ef18f5dd141fc95f74418d57548c6
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-900.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-900italic.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-900italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..31f017c8a4d756a9764fbdac39d6d70ee4953f42
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-900italic.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-900italic.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-900italic.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..2458b825929785259f408c0a0fc74e7f1fafa673
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-900italic.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-italic.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..5e82e183f35bb445d1f9ccfcbe2d5672f2bb551d
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-italic.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-italic.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-italic.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..7f191fd8eafc46a648ae9662e2340cd087df4c03
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-italic.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-regular.woff b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-regular.woff
new file mode 100644
index 0000000000000000000000000000000000000000..d99ba57a35e2939c53310de3518fcb4fab1fb956
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-regular.woff differ
diff --git a/themes/fid_bbi/css/fonts/fira-sans-v10-latin-regular.woff2 b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-regular.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..9bb576032e1ce51c88f5bfd92670c425f4b11489
Binary files /dev/null and b/themes/fid_bbi/css/fonts/fira-sans-v10-latin-regular.woff2 differ
diff --git a/themes/fid_bbi/css/fonts/share-tech-v9-latin-regular.woff b/themes/fid_bbi/css/fonts/share-tech-v9-latin-regular.woff
new file mode 100644
index 0000000000000000000000000000000000000000..020c516408e257c8a563a94566c6f28326c49c78
Binary files /dev/null and b/themes/fid_bbi/css/fonts/share-tech-v9-latin-regular.woff differ
diff --git a/themes/fid_bbi/css/fonts/share-tech-v9-latin-regular.woff2 b/themes/fid_bbi/css/fonts/share-tech-v9-latin-regular.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..25cc921ddb9f9a78c897e16a59caa074d3db1f7c
Binary files /dev/null and b/themes/fid_bbi/css/fonts/share-tech-v9-latin-regular.woff2 differ
diff --git a/themes/fid_bbi/dummy-posts.json b/themes/fid_bbi/dummy-posts.json
new file mode 100644
index 0000000000000000000000000000000000000000..247a08f5385438d395bf6f25c1ffd16081866b57
--- /dev/null
+++ b/themes/fid_bbi/dummy-posts.json
@@ -0,0 +1,22 @@
+[
+  {
+    "date": "2020-09-27",
+    "title": "Lorem ipsum dolor sit amet",
+    "excerpt": "Eu sit hinc feugiat iracundia. Cum inimicus accommodare ne, te eam exerci fuisset consequuntur. Mei cu cibo phaedrum. Cu eos legere soluta populo, no suas aeque &hellip;"
+  },
+  {
+    "date": "2020-09-20",
+    "title": "At mel erroribus rationibus",
+    "excerpt": "Inermis admodum tacimates eu mea. Et aeterno epicurei mea, etiam saepe at duo. Ei ubique libris vim, affert ullamcorper ea his. Ea aperiam fastidii incorrupte nam, ei vix&hellip;"
+  },
+  {
+    "date": "2020-08-15",
+    "title": "Vix eu mediocrem eloquentiam",
+    "excerpt": "Ea aperiam fastidii incorrupte nam, ei vix tempor putent. Vix eu mediocrem eloquentiam, nec agam rationibus cu. Ponderum verterem te sea, invidunt persecuti concludaturque his &hellip;"
+  },
+  {
+    "date": "2020-08-03",
+    "title": "Affert intellegebat pri no",
+    "excerpt": "Eos veri laoreet at, sit odio aliquando definitionem ad. Ut veritus alienum epicurei vim, eros labore consulatu at mel. Sint eius ne eum, at qui pertinax imperdiet cotidieque &hellip;"
+  }
+]
diff --git a/themes/fid_bbi/icons/big/article-online.svg b/themes/fid_bbi/icons/big/article-online.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5dd65e2eefbbf9b0228c42b3ab1c5185b0508cef
--- /dev/null
+++ b/themes/fid_bbi/icons/big/article-online.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" height="84" width="84"><path d="M16 5h52v74H16z" fill="none" stroke="#000" stroke-width="2"/><path fill="#00a376" fill-rule="evenodd" d="M21 10h42v4H21zM21 16h42v4H21z" stroke="none"/><g fill="#00a376"><path fill-rule="evenodd" d="M21 24h19v27H21zM44 47h19v27H44z" stroke="none"/><path d="M44 24v19h19V24zm2 2h15v15H46zM21 55v19h19V55zm2 2h15v15H23z" stroke="none"/></g><path d="M42 42h37v27H36z" stroke="none"/><path d="M49 47v-1h2v4h1v1h-3v-1h1v-3zM45 46v5h3v-5zm1 1h1v3h-1zM53 46v5h3v-5zm1 1h1v3h-1zM57 46v5h3v-5zm1 1h1v3h-1zM61 46v5h3v-5zm1 1h1v3h-1zM65 47v-1h2v4h1v1h-3v-1h1v-3zM69 47v-1h2v4h1v1h-3v-1h1v-3zM73 46v5h3v-5zm1 1h1v3h-1zM49 54v-1h2v4h1v1h-3v-1h1v-3zM45 53v5h3v-5zm1 1h1v3h-1zM53 53v5h3v-5zm1 1h1v3h-1zM57 53v5h3v-5zm1 1h1v3h-1zM61 54v-1h2v4h1v1h-3v-1h1v-3zM65 53v5h3v-5zm1 1h1v3h-1zM69 53v5h3v-5zm1 1h1v3h-1zM73 54v-1h2v4h1v1h-3v-1h1v-3zM49 61v-1h2v4h1v1h-3v-1h1v-3zM45 60v5h3v-5zm1 1h1v3h-1zM53 60v5h3v-5zm1 1h1v3h-1zM57 60v5h3v-5zm1 1h1v3h-1zM65 61v-1h2v4h1v1h-3v-1h1v-3zM61 60v5h3v-5zm1 1h1v3h-1zM69 60v5h3v-5zm1 1h1v3h-1zM73 60v5h3v-5zm1 1h1v3h-1z" fill="#fff" stroke="none"/><path d="M79 42l-4-4h-6v2h5.17l2.002 2z" stroke="none"/></svg>
diff --git a/themes/fid_bbi/icons/big/article.svg b/themes/fid_bbi/icons/big/article.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2768fbeb0b84fa6496b83bceacdd2e7d0bf1d367
--- /dev/null
+++ b/themes/fid_bbi/icons/big/article.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" height="84" width="84"><path d="M16 5h52v74H16z" fill="none" stroke="#000" stroke-width="2"/><path fill="#00a376" fill-rule="evenodd" d="M21 10h42v4H21zM21 16h42v4H21z" stroke="none"/><g fill="#00a376"><path fill-rule="evenodd" d="M21 24h19v27H21zM44 47h19v27H44z" stroke="none"/><path d="M44 24v19h19V24zm2 2h15v15H46zM21 55v19h19V55zm2 2h15v15H23z" stroke="none"/></g></svg>
diff --git a/themes/fid_bbi/icons/big/audio.svg b/themes/fid_bbi/icons/big/audio.svg
new file mode 100644
index 0000000000000000000000000000000000000000..44eb21b7020b382167e6760640494695decfea11
--- /dev/null
+++ b/themes/fid_bbi/icons/big/audio.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" height="84" width="84"><path d="M10 53V31h17l15-15v52L27 53z" fill="none" stroke="#000" stroke-width="2"/><path d="M68.861 15.139l-2.81 2.81A33.894 33.894 0 0176 42c0 9.4-3.8 17.901-9.95 24.05l2.811 2.811C75.741 61.981 80 52.481 80 42c0-10.482-4.26-19.982-11.139-26.861zm-7.07 7.07l-2.812 2.812A23.923 23.923 0 0166 42c0 6.64-2.681 12.638-7.021 16.979l2.812 2.812C66.861 56.721 70 49.721 70 42c0-7.72-3.139-14.721-8.209-19.791zm-7.072 7.072l-2.81 2.81A13.955 13.955 0 0156 42c0 3.878-1.561 7.378-4.092 9.908l2.81 2.81C57.98 51.459 60 46.959 60 42c0-4.959-2.02-9.458-5.281-12.719z" fill="#00a376" fill-rule="evenodd" stroke="none"/></svg>
diff --git a/themes/fid_bbi/icons/big/book-online.svg b/themes/fid_bbi/icons/big/book-online.svg
new file mode 100644
index 0000000000000000000000000000000000000000..41dce9f526251660b259dc5c9fbe22aa7bb6fe73
--- /dev/null
+++ b/themes/fid_bbi/icons/big/book-online.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" height="84" width="84"><path d="M62 11V3H13v69l8 9h50V11H21v70" fill="none" stroke="#000" stroke-width="2"/><path d="M17 6h42l4 4H21z" fill="#00a376" stroke="none"/><path d="M13 3l9 9" fill="none" stroke="#000" stroke-width="2"/><path fill="#00a376" fill-rule="evenodd" d="M30 26h32v4H30zM26 34h40v6H26zM30 44h32v4H30z" stroke="none"/><path d="M42 42h37v27H36z" stroke="none"/><path d="M49 47v-1h2v4h1v1h-3v-1h1v-3zM45 46v5h3v-5zm1 1h1v3h-1zM53 46v5h3v-5zm1 1h1v3h-1zM57 46v5h3v-5zm1 1h1v3h-1zM61 46v5h3v-5zm1 1h1v3h-1zM65 47v-1h2v4h1v1h-3v-1h1v-3zM69 47v-1h2v4h1v1h-3v-1h1v-3zM73 46v5h3v-5zm1 1h1v3h-1zM49 54v-1h2v4h1v1h-3v-1h1v-3zM45 53v5h3v-5zm1 1h1v3h-1zM53 53v5h3v-5zm1 1h1v3h-1zM57 53v5h3v-5zm1 1h1v3h-1zM61 54v-1h2v4h1v1h-3v-1h1v-3zM65 53v5h3v-5zm1 1h1v3h-1zM69 53v5h3v-5zm1 1h1v3h-1zM73 54v-1h2v4h1v1h-3v-1h1v-3zM49 61v-1h2v4h1v1h-3v-1h1v-3zM45 60v5h3v-5zm1 1h1v3h-1zM53 60v5h3v-5zm1 1h1v3h-1zM57 60v5h3v-5zm1 1h1v3h-1zM65 61v-1h2v4h1v1h-3v-1h1v-3zM61 60v5h3v-5zm1 1h1v3h-1zM69 60v5h3v-5zm1 1h1v3h-1zM73 60v5h3v-5zm1 1h1v3h-1z" fill="#fff" stroke="none"/><path d="M79 42l-4-4h-4v2h3.17l2.002 2z" stroke="none"/></svg>
diff --git a/themes/fid_bbi/icons/big/book.svg b/themes/fid_bbi/icons/big/book.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e351aa17af33ec243d9f7b0ee729ca94aefdc88b
--- /dev/null
+++ b/themes/fid_bbi/icons/big/book.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" height="84" width="84"><path d="M62 11V3H13v69l8 9h50V11H21v70" fill="none" stroke="#000" stroke-width="2"/><path d="M17 6h42l4 4H21z" fill="#00a376" stroke="none"/><path d="M13 3l9 9" fill="none" stroke="#000" stroke-width="2"/><path fill="#00a376" fill-rule="evenodd" d="M30 26h32v4H30zM26 34h40v6H26zM30 44h32v4H30z" stroke="none"/></svg>
diff --git a/themes/fid_bbi/icons/big/disc.svg b/themes/fid_bbi/icons/big/disc.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9b932185446567d5a4d93199c96ccecaf296d9d6
--- /dev/null
+++ b/themes/fid_bbi/icons/big/disc.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" height="84" width="84"><circle r="37" cy="42" cx="42" fill="none" stroke="#000" stroke-width="2"/><circle cx="42" cy="42" r="12" fill="none" stroke="#000" stroke-width="2"/><circle r="4" cy="42" cx="42" fill="none" stroke="#000" stroke-width="2"/><path d="M56.19 8.889l-9.073 21.17a13.101 13.101 0 016.824 6.824l21.17-9.072A35.968 35.968 0 0056.19 8.889zM30.058 47.117L8.889 56.19A35.968 35.968 0 0027.81 75.111l9.072-21.17a13.101 13.101 0 01-6.824-6.824z" fill="#00a376" stroke="none"/></svg>
diff --git a/themes/fid_bbi/icons/big/periodical-online.svg b/themes/fid_bbi/icons/big/periodical-online.svg
new file mode 100644
index 0000000000000000000000000000000000000000..46007b8cf63cc6416d64e2e0f25282b27da6fd3b
--- /dev/null
+++ b/themes/fid_bbi/icons/big/periodical-online.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" height="84" width="84"><path d="M20 79h-4V5h52v4" fill="none" stroke="#000" stroke-width="2"/><path fill="#00a376" fill-rule="evenodd" d="M67 14H25v4h42zM67 20H25v4h42z" stroke="none"/><path d="M16 75h-4V1h52v4" fill="none" stroke="#000" stroke-width="2"/><path d="M72 83H20V9h52z" fill="none" stroke="#000" stroke-width="2"/><g fill="#00a376"><path fill-rule="evenodd" d="M25 28h19v27H25zM48 51h19v27H48z" stroke="none"/><path d="M48 28v19h19V28zm2 2h15v15H50zM25 59v19h19V59zm2 2h15v15H27z" stroke="none"/></g><path d="M42 42h37v27H36z" stroke="none"/><path d="M49 47v-1h2v4h1v1h-3v-1h1v-3zM45 46v5h3v-5zm1 1h1v3h-1zM53 46v5h3v-5zm1 1h1v3h-1zM57 46v5h3v-5zm1 1h1v3h-1zM61 46v5h3v-5zm1 1h1v3h-1zM65 47v-1h2v4h1v1h-3v-1h1v-3zM69 47v-1h2v4h1v1h-3v-1h1v-3zM73 46v5h3v-5zm1 1h1v3h-1zM49 54v-1h2v4h1v1h-3v-1h1v-3zM45 53v5h3v-5zm1 1h1v3h-1zM53 53v5h3v-5zm1 1h1v3h-1zM57 53v5h3v-5zm1 1h1v3h-1zM61 54v-1h2v4h1v1h-3v-1h1v-3zM65 53v5h3v-5zm1 1h1v3h-1zM69 53v5h3v-5zm1 1h1v3h-1zM73 54v-1h2v4h1v1h-3v-1h1v-3zM49 61v-1h2v4h1v1h-3v-1h1v-3zM45 60v5h3v-5zm1 1h1v3h-1zM53 60v5h3v-5zm1 1h1v3h-1zM57 60v5h3v-5zm1 1h1v3h-1zM65 61v-1h2v4h1v1h-3v-1h1v-3zM61 60v5h3v-5zm1 1h1v3h-1zM69 60v5h3v-5zm1 1h1v3h-1zM73 60v5h3v-5zm1 1h1v3h-1z" fill="#fff" stroke="none"/><path d="M79 42l-4-4h-3v2h2.17l2.002 2z" stroke="none"/></svg>
diff --git a/themes/fid_bbi/icons/big/periodical.svg b/themes/fid_bbi/icons/big/periodical.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fd7c660f967b47655fa6049f7846c25c1e748d86
--- /dev/null
+++ b/themes/fid_bbi/icons/big/periodical.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" height="84" width="84"><path d="M20 79h-4V5h52v4" fill="none" stroke="#000" stroke-width="2"/><path fill="#00a376" fill-rule="evenodd" d="M25 14h42v4H25zM25 20h42v4H25z" stroke="none"/><path d="M16 75h-4V1h52v4" fill="none" stroke="#000" stroke-width="2"/><path d="M72 83H20V9h52z" fill="none" stroke="#000" stroke-width="2"/><g fill="#00a376"><path fill-rule="evenodd" d="M25 28h19v27H25zM48 51h19v27H48z" stroke="none"/><path d="M48 28v19h19V28zm2 2h15v15H50zM25 59v19h19V59zm2 2h15v15H27z" stroke="none"/></g></svg>
diff --git a/themes/fid_bbi/icons/big/software.svg b/themes/fid_bbi/icons/big/software.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3c1a2587f8a3814617cedf5123a3745e000e866f
--- /dev/null
+++ b/themes/fid_bbi/icons/big/software.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" height="84" width="84"><g fill="none"><path stroke="#000" stroke-width="2" d="M5 10h74v52H5z"/><path d="M28 76h28" stroke="#000" stroke-width="2"/><path stroke="#000" stroke-width="2" d="M33 62h18v14H33z"/><path stroke="#00a376" stroke-width="2" d="M9 14h66v44H9z"/><path d="M42 35v15M30 29l12 6 12-6m-24 0l12-6 12 6v15l-12 6-12-6z" stroke="#00a376" stroke-width="4"/></g></svg>
diff --git a/themes/fid_bbi/icons/big/video.svg b/themes/fid_bbi/icons/big/video.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3828d88c87f24140786d3951751b00a1cc5b4bab
--- /dev/null
+++ b/themes/fid_bbi/icons/big/video.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" height="84" width="84"><path fill="none" stroke="#000" stroke-width="2" d="M5 16h74v52H5z" stroke="none"/><path d="M35 31l18 11-18 11zM8 19h6v6H8zM8 29h6v6H8zM8 49h6v6H8zM8 59h6v6H8zM8 39h6v6H8zM70 19h6v6h-6zM70 29h6v6h-6zM70 49h6v6h-6zM70 59h6v6h-6zM70 39h6v6h-6z" fill="#00a376" stroke="none"/><path d="M17 16v52M67 17v52" fill="none" stroke="#000" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/big/website.svg b/themes/fid_bbi/icons/big/website.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2a63b0bb0ef5676b4d7cae352f216ee47f099f7a
--- /dev/null
+++ b/themes/fid_bbi/icons/big/website.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" height="84" width="84"><rect width="74" height="52" x="5" y="16" ry="0" fill="none" stroke="#000" stroke-width="2"/><path d="M6 26h73" fill="none" stroke="#000" stroke-width="2"/><path fill="#00a376" fill-rule="evenodd" d="M8 19h46v4H8zM56 19h20v4H56z" stroke="none"/><path d="M30.577 40h-3.5l-1.344 10.696-1.904-8.176h-3.304l-2.044 8.176L17.165 40H13.44l2.156 14h4.76l1.652-6.888L23.52 54h4.9zM50.57 40h-3.5l-1.344 10.696-1.904-8.176h-3.304l-2.044 8.176L37.158 40h-3.724l2.156 14h4.76l1.652-6.888L43.514 54h4.9zM70.563 40h-3.5l-1.344 10.696-1.904-8.176H60.51l-2.044 8.176L57.15 40h-3.724l2.156 14h4.76l1.652-6.888L63.507 54h4.9z" fill="#00a376" stroke="none"/></svg>
diff --git a/themes/fid_bbi/icons/small/add-book.svg b/themes/fid_bbi/icons/small/add-book.svg
new file mode 100644
index 0000000000000000000000000000000000000000..864930e287dc4f4f6e90540f8280665b86df8767
--- /dev/null
+++ b/themes/fid_bbi/icons/small/add-book.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M22 14V3H6v22h16v-5M13 17h10M18 22V12M9 8h10M9 12h6" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/arrow-left.svg b/themes/fid_bbi/icons/small/arrow-left.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3f99d6bfcd60a6045982e83be48252d94639821b
--- /dev/null
+++ b/themes/fid_bbi/icons/small/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M12 19l-5-5 5-5m8 5H8" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/arrow-right.svg b/themes/fid_bbi/icons/small/arrow-right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..79fe6fee145053203260684642ea1a658d83df33
--- /dev/null
+++ b/themes/fid_bbi/icons/small/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><path d="M15 9l5 5-5 5m-8-5h12" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/checkmark.svg b/themes/fid_bbi/icons/small/checkmark.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a121ff8a8f7dd9afbd1813fdeae3175c126b1bad
--- /dev/null
+++ b/themes/fid_bbi/icons/small/checkmark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M24 7L14 22l-9-6" fill="none" stroke-width="2"/></svg>
\ No newline at end of file
diff --git a/themes/fid_bbi/icons/small/chevron-down.svg b/themes/fid_bbi/icons/small/chevron-down.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c358002e718576899f361f71f7cbc27791bb5706
--- /dev/null
+++ b/themes/fid_bbi/icons/small/chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M6 11l8 8 8-8" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/clock.svg b/themes/fid_bbi/icons/small/clock.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bc677dfa3fc943c00d8c94c5b912648f8f9632d4
--- /dev/null
+++ b/themes/fid_bbi/icons/small/clock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><g fill="none" stroke-width="2"><circle cx="14" cy="14" r="10"/><path d="M14 7v7l3 3"/></g></svg>
diff --git a/themes/fid_bbi/icons/small/download.svg b/themes/fid_bbi/icons/small/download.svg
new file mode 100644
index 0000000000000000000000000000000000000000..51e58f8c681a913d1ec44b42d900495ee938264d
--- /dev/null
+++ b/themes/fid_bbi/icons/small/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><g fill="none" stroke-width="2"><path d="M24 15v7H4v-7"/><path d="M19 12l-5 5-5-5m5-8v12"/></g></svg>
diff --git a/themes/fid_bbi/icons/small/error.svg b/themes/fid_bbi/icons/small/error.svg
new file mode 100644
index 0000000000000000000000000000000000000000..38916849c9725b51fc489eb07343271fab7377ca
--- /dev/null
+++ b/themes/fid_bbi/icons/small/error.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><g fill="none"><path d="M3 18.556V9.444L9.444 3h9.112L25 9.444v9.112L18.556 25H9.444z" stroke-width="2.0002752"/><path d="M9 9l10 10M19 9L9 19" stroke-width="2"/></g></svg>
\ No newline at end of file
diff --git a/themes/fid_bbi/icons/small/face.svg b/themes/fid_bbi/icons/small/face.svg
new file mode 100644
index 0000000000000000000000000000000000000000..892041467398c3ac1ef6718ecaa40f8cd99ab89c
--- /dev/null
+++ b/themes/fid_bbi/icons/small/face.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><g stroke-width="2"><circle cx="14" cy="14" r="10" fill="none"/><path d="M10 10h2v2h-2zm6 0h2v2h-2z" stroke="none"/><path d="M17.54 17.536A5 5 0 0114.003 19a5 5 0 01-3.536-1.464" fill="none"/></g></svg>
diff --git a/themes/fid_bbi/icons/small/filter.svg b/themes/fid_bbi/icons/small/filter.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c19570e014cda0b2702f49bd916004c7445598e8
--- /dev/null
+++ b/themes/fid_bbi/icons/small/filter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M4 4h20l-8 8v11l-4 2V12z" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/home.svg b/themes/fid_bbi/icons/small/home.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d791237652aa46265bb9664018c32065c1071535
--- /dev/null
+++ b/themes/fid_bbi/icons/small/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><g fill="none" stroke-width="2"><path d="M7 11v11h14V11"/><path d="M4 14L14 4l10 10M11 22v-8h6v8"/></g></svg>
\ No newline at end of file
diff --git a/themes/fid_bbi/icons/small/info.svg b/themes/fid_bbi/icons/small/info.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0d06d5ee62b0df0689c60c7e817a1d9679f09500
--- /dev/null
+++ b/themes/fid_bbi/icons/small/info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><circle cy="14" cx="14" r="10" fill="none" stroke-width="2"/><path d="M14 19v-6" fill="none" stroke-width="2"/><path d="M13 9h2v2h-2z" stroke="none"/></svg>
diff --git a/themes/fid_bbi/icons/small/license.svg b/themes/fid_bbi/icons/small/license.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d29e79cdfb0034ab21fd77e8a66f65898266cff5
--- /dev/null
+++ b/themes/fid_bbi/icons/small/license.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><g fill="none" stroke-width="2"><circle cx="18" cy="14" r="3"/><path d="M16 16v7l2-1 2 1v-7M6 11h6M6 15h6"/><path d="M13 22H3V6h22v16h-2"/></g></svg>
diff --git a/themes/fid_bbi/icons/small/lightning.svg b/themes/fid_bbi/icons/small/lightning.svg
new file mode 100644
index 0000000000000000000000000000000000000000..db9456cf0917627929b3cf512db38aba56fb4f1f
--- /dev/null
+++ b/themes/fid_bbi/icons/small/lightning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><g fill="none" stroke-width="2"><path d="M17 3l-5 10h4l-5 10"/><path d="M9 17l2 6 6-2"/></g></svg>
diff --git a/themes/fid_bbi/icons/small/link.svg b/themes/fid_bbi/icons/small/link.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a5374857d2ffba789159412f553f3d6979c44269
--- /dev/null
+++ b/themes/fid_bbi/icons/small/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><g fill="none" stroke-width="2"><path d="M12 16l-2-2 9-9 7 7-10 10"/><path d="M16 12l2 2-9 9-7-7L12 6"/></g></svg>
diff --git a/themes/fid_bbi/icons/small/login.svg b/themes/fid_bbi/icons/small/login.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a045fd9504109dd87be30d11bc7fd34ea5e6c032
--- /dev/null
+++ b/themes/fid_bbi/icons/small/login.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><g fill="none" stroke-width="2"><path d="M15 5h7v18h-7"/><path d="M12 9l5 5-5 5m-8-5h12"/></g></svg>
diff --git a/themes/fid_bbi/icons/small/logout.svg b/themes/fid_bbi/icons/small/logout.svg
new file mode 100644
index 0000000000000000000000000000000000000000..14ede9497768278e13f823af6e630400c7902fb5
--- /dev/null
+++ b/themes/fid_bbi/icons/small/logout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M13 23H6V5h7m5 4l5 5-5 5m-8-5h12" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/magnifier.svg b/themes/fid_bbi/icons/small/magnifier.svg
new file mode 100644
index 0000000000000000000000000000000000000000..08c4e704034cd7b55d4bf44550819ebe0167e4b8
--- /dev/null
+++ b/themes/fid_bbi/icons/small/magnifier.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><g fill="none" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M19 19l7 7"/></g></svg>
diff --git a/themes/fid_bbi/icons/small/mail.svg b/themes/fid_bbi/icons/small/mail.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c93de3c18b0dc8699b212cd2fafb1044ab4f801e
--- /dev/null
+++ b/themes/fid_bbi/icons/small/mail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M3 6h22v16H3z M3 6l11 9 11-9" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/menu.svg b/themes/fid_bbi/icons/small/menu.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d0ec17d46f9932f2b1f0664c3900a10f4c92f985
--- /dev/null
+++ b/themes/fid_bbi/icons/small/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M2 14h24M2 6h24M2 22h24" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/minus.svg b/themes/fid_bbi/icons/small/minus.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e9a28354829827aaacc33e729f97e0d81b90f3fd
--- /dev/null
+++ b/themes/fid_bbi/icons/small/minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M6 14h16" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/order.svg b/themes/fid_bbi/icons/small/order.svg
new file mode 100644
index 0000000000000000000000000000000000000000..72e44b4f449dff07d1247da1f9d139c349bf396e
--- /dev/null
+++ b/themes/fid_bbi/icons/small/order.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M5 2v24h18v-6.592l-2 3V24H7V4h14v7.592l2-3V2z" stroke="none"/><path d="M9 8h10M9 12h10M25 11l-6 9-6-4" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/pin.svg b/themes/fid_bbi/icons/small/pin.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c58d068c47395f1b0feac82c180e785a5f424cac
--- /dev/null
+++ b/themes/fid_bbi/icons/small/pin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M8 4h12v4h-2l2 8h2v4H6v-4h2l2-8H8zm6 17v6" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/plus.svg b/themes/fid_bbi/icons/small/plus.svg
new file mode 100644
index 0000000000000000000000000000000000000000..24d2c0bc45981d6409b4003d5da24ece865ec82a
--- /dev/null
+++ b/themes/fid_bbi/icons/small/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M6 14h16m-8-8v16" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/printer.svg b/themes/fid_bbi/icons/small/printer.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5d9bb539012fd65daa7dd2fdc91e73ef3962f182
--- /dev/null
+++ b/themes/fid_bbi/icons/small/printer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><g fill="none" stroke-width="2"><rect width="14" height="12" x="7" y="14" ry="0"/><path d="M6 19H3V9h22v10h-3M7 8V3h14v5M10 18h8m-8 4h8"/></g></svg>
diff --git a/themes/fid_bbi/icons/small/quote.svg b/themes/fid_bbi/icons/small/quote.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ab02b3b8f23fa4e70991ef078e67c0ed6ac6238b
--- /dev/null
+++ b/themes/fid_bbi/icons/small/quote.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><g fill="none" stroke-width="2"><path d="M12 8v8l-3 6M20 8v8l-3 6"/><path d="M12 9H8v4h4m8-4h-4v4h4"/></g></svg>
diff --git a/themes/fid_bbi/icons/small/rss.svg b/themes/fid_bbi/icons/small/rss.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1826257ad0a963ee4c3bed94f0ade8798bf7c938
--- /dev/null
+++ b/themes/fid_bbi/icons/small/rss.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="8" cy="19.671" r="3" stroke="none"/><path d="M5 10.671a12 12 0 0112 12m-12-18a18 18 0 0118 18" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/save.svg b/themes/fid_bbi/icons/small/save.svg
new file mode 100644
index 0000000000000000000000000000000000000000..465c59b53a9ba419846fcf173c7d839b701d1060
--- /dev/null
+++ b/themes/fid_bbi/icons/small/save.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><g fill="none" stroke-width="2"><path d="M19 12l-5 5-5-5m5-8v12"/><path d="M10 5H5v18h18V5h-5"/></g></svg>
diff --git a/themes/fid_bbi/icons/small/scan-book.svg b/themes/fid_bbi/icons/small/scan-book.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ad27490d1218690fa74fcda0ca4719c2afa60368
--- /dev/null
+++ b/themes/fid_bbi/icons/small/scan-book.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M13 1v2h12v10.666l2 2.668V1zm14 21.875l-2 .334V25c-3.999.011-19.013 0-23 0v2h25z" stroke="none"/><path d="M14 13l6-1 6 8-12 2-12-2 6-8 6 1v9" fill="none" stroke-width="2"/><path d="M10 7l2-2h4l2 2z"/></svg>
diff --git a/themes/fid_bbi/icons/small/signup.svg b/themes/fid_bbi/icons/small/signup.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9a7cc43485ce4912a1b6d99938ffd5bac6607f13
--- /dev/null
+++ b/themes/fid_bbi/icons/small/signup.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M21 4l3 3-11 11h-3v-3zM10 15l3 3" fill="none" stroke-width="2"/><path d="M3.889 3.889V24.11H24.11V11.13l-2.222 2.222v8.536H6.11V6.11h8.536l2.222-2.222z" stroke="none"/></svg>
diff --git a/themes/fid_bbi/icons/small/star.svg b/themes/fid_bbi/icons/small/star.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cdbbb990eca0c4d8b23e4fdce554a679f71ee8a9
--- /dev/null
+++ b/themes/fid_bbi/icons/small/star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M14 3l3.233 6.55 7.229 1.05-5.231 5.1 1.235 7.2L14 19.5l-6.466 3.4 1.235-7.2-5.23-5.1 7.228-1.05z" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/icons/small/sun.svg b/themes/fid_bbi/icons/small/sun.svg
new file mode 100644
index 0000000000000000000000000000000000000000..43ce2cb559a4c6b257504a6ee900f3a67024c379
--- /dev/null
+++ b/themes/fid_bbi/icons/small/sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><g fill="none" stroke-width="2"><circle cx="14" cy="14" r="4"/><path d="M14 7V2m0 24v-5m4.95-11.95l3.535-3.535m-16.97 16.97L9.05 18.95M14 7V2m0 24v-5m7-7h5M2 14h5m11.95 4.95l3.535 3.535M5.515 5.515L9.05 9.05"/></g></svg>
diff --git a/themes/fid_bbi/icons/small/warning.svg b/themes/fid_bbi/icons/small/warning.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f1986f640dcedf5de6be1f461499f3a096d793d0
--- /dev/null
+++ b/themes/fid_bbi/icons/small/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M14 4l11.436 19.807H2.564z" fill="none" stroke-width="2.091"/><path d="M14 11v6" fill="none" stroke-width="2"/><path d="M15 21h-2v-2h2z" stroke="none"/></svg>
diff --git a/themes/fid_bbi/icons/small/x.svg b/themes/fid_bbi/icons/small/x.svg
new file mode 100644
index 0000000000000000000000000000000000000000..765d14ac0f19b916c352d424b7829c348ba4e93c
--- /dev/null
+++ b/themes/fid_bbi/icons/small/x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" height="28" width="28"><path d="M8 8l12 12M20 8L8 20" fill="none" stroke-width="2"/></svg>
diff --git a/themes/fid_bbi/images/de.svg b/themes/fid_bbi/images/de.svg
deleted file mode 100644
index 49144dd2ab2e6f123ed3cd7032f1985744371799..0000000000000000000000000000000000000000
--- a/themes/fid_bbi/images/de.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="de.svg" viewBox="0 0 640 480">
-  <path fill="#ffce00" d="M0 320h640v160H0z"/>
-  <path d="M0 0h640v160H0z"/>
-  <path fill="#d00" d="M0 160h640v160H0z"/>
-</svg>
diff --git a/themes/fid_bbi/images/dfg-logo.svg b/themes/fid_bbi/images/dfg-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..496822d1c72234b9828960a30f6cd73532c0a458
--- /dev/null
+++ b/themes/fid_bbi/images/dfg-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 338.293 43.16" height="43.16" width="338.293"><path fill="#fff" d="M0 38.883h20.064c5.305 0 9.915-1.14 13.183-4.02 3.268-2.882 5.272-7.538 5.276-14.768-.003-7.766-1.872-12.482-4.984-15.275-3.112-2.795-7.568-3.734-12.885-3.733v-.001H0v8.163h17.493c2.65-.014 4.463.926 5.487 2.744 1.027 1.805 1.335 4.373 1.338 7.715-.003 3.23-.285 5.77-1.289 7.576-1.002 1.816-2.802 2.789-5.482 2.773H13.56V16.678H0v22.205M41.468 38.883H55.03V25.172h16.896v-8.494H55.029v-7.43h16.896V1.087H41.468v37.797M81.263 5.19c-4.006 3.17-6.539 7.881-6.544 14.242.005 6.789 2.442 11.78 6.393 15.113 3.953 3.333 9.456 5 15.599 5 5.754 0 10.3-.58 15.083-2v-17.44h-11.523v10.158l-.255.1c-.97.368-2.177.353-3.198.358-2.972.008-5.089-1.234-6.388-3.16-1.302-1.923-1.826-4.486-1.828-7.19-.003-3.595 1.218-6.412 3.382-8.294 2.163-1.884 5.223-2.828 8.852-2.828 3.71 0 6.635.834 8.716 1.93V1.776C106.125.94 103.517.426 96.711.423h-.003c-5.927 0-11.437 1.602-15.445 4.767M132.47 13.759h1.105c4.106.091 6.214-1.864 6.321-5.864-.032-2.103-.56-3.587-1.585-4.451-1.044-.825-2.34-1.23-3.888-1.217h-1.953zM131.148 1.04h3.335c2.392.026 4.122.669 5.19 1.927 1.043 1.265 1.558 2.932 1.544 5.002-.024 2.484-.753 4.271-2.185 5.36-1.412 1.078-3.256 1.616-5.53 1.616h-2.354V1.04M150.424 9.157c0-.934-.188-1.75-.565-2.448-.398-.705-1.051-1.07-1.956-1.096-.888.026-1.591.398-2.107 1.115a4.017 4.017 0 00-.793 2.429zm.59 5.472a8.095 8.095 0 01-2.855.56c-1.61-.033-2.762-.545-3.46-1.538-.691-.973-1.031-2.234-1.018-3.785.014-1.583.399-2.864 1.159-3.844.735-.972 1.73-1.466 2.987-1.479 1.374.026 2.38.526 3.014 1.499.603.953.906 2.134.906 3.541v.642h-6.744c0 1.106.277 2.017.83 2.732.54.762 1.347 1.149 2.416 1.162.479 0 .982-.088 1.51-.264.529-.142.948-.309 1.256-.497v1.271M162.05 12.553c-.014.771.014 1.568.083 2.392h-1.177v-1.809h-.039c-.088.22-.21.444-.366.671-.151.24-.35.467-.594.681-.245.201-.548.36-.913.477-.357.149-.793.224-1.308.224-1.193-.013-2.052-.386-2.58-1.12-.527-.72-.785-1.65-.772-2.792V4.786h1.204v6.177c0 .974.187 1.733.557 2.28.366.584.96.876 1.784.876.554 0 1.023-.12 1.406-.36a2.34 2.34 0 00.888-.877c.232-.37.393-.77.48-1.199a5.73 5.73 0 00.142-1.276V4.786h1.204v7.767M169.699 5.856h-2.238v6.587c0 .468.103.86.311 1.18.19.33.523.496 1.001.496.44 0 .815-.081 1.123-.243l.076 1.032c-.144.052-.344.11-.603.174-.269.07-.564.107-.884.107-.526 0-.944-.095-1.25-.283a1.805 1.805 0 01-.668-.74 3.73 3.73 0 01-.255-1.07 14.134 14.134 0 01-.057-1.304V5.856h-1.928v-1.07h1.928V2.335l1.206-.439v2.89h2.238v1.07M171.35 13.475c.746.416 1.6.63 2.56.644.609 0 1.122-.165 1.543-.496.414-.306.628-.744.64-1.316-.012-.604-.25-1.078-.716-1.422a8.634 8.634 0 00-1.638-.896 10.275 10.275 0 01-.848-.459 7.111 7.111 0 01-.772-.535 2.861 2.861 0 01-.547-.74 1.993 1.993 0 01-.208-.936c.013-1.013.345-1.73.997-2.152.635-.416 1.37-.624 2.204-.624.283 0 .65.026 1.102.077.445.078.886.204 1.326.377l-.113 1.093a5.75 5.75 0 00-2.188-.477c-.63 0-1.13.117-1.5.35a1.248 1.248 0 00-.452.507c-.113.208-.17.487-.17.838 0 .208.071.406.217.594.137.175.322.334.556.477.233.137.496.276.792.419.294.137.584.283.866.438.642.28 1.2.653 1.679 1.12.477.469.723 1.114.736 1.94 0 .532-.105.977-.31 1.334-.22.37-.497.669-.829.896a4.32 4.32 0 01-2.294.663 7.98 7.98 0 01-2.746-.482l.112-1.232M186.259 6.13a5.09 5.09 0 00-2.112-.517c-1.182.013-2.087.403-2.716 1.17-.66.787-.99 1.815-.99 3.083 0 1.184.324 2.176.972 2.975.628.84 1.496 1.265 2.603 1.278.76 0 1.501-.153 2.225-.458l.112 1.17c-.797.251-1.638.37-2.524.358-1.581-.033-2.76-.571-3.532-1.615-.785-1.026-1.177-2.262-1.177-3.708.013-1.61.461-2.89 1.347-3.844.88-.972 2.05-1.466 3.513-1.479.604 0 1.104.045 1.507.135.208.039.386.08.537.125.144.052.255.097.33.135l-.095 1.192M188.704 0h1.205v6.49h.038c.27-.567.669-1.039 1.196-1.414.528-.343 1.149-.52 1.865-.533 1.312.013 2.207.413 2.685 1.197.464.798.69 1.84.676 3.124v6.081h-1.204V8.876c0-.448-.025-.874-.076-1.276a2.912 2.912 0 00-.33-1.013c-.307-.636-.954-.961-1.934-.974-1.057.026-1.812.445-2.265 1.256a5.213 5.213 0 00-.65 2.631v5.445h-1.206V0M205.79 9.157c0-.934-.189-1.75-.566-2.448-.397-.705-1.05-1.07-1.956-1.096-.888.026-1.59.398-2.107 1.115a4.026 4.026 0 00-.793 2.429zm.59 5.472a8.082 8.082 0 01-2.855.56c-1.609-.033-2.762-.545-3.46-1.538-.692-.973-1.032-2.234-1.018-3.785.013-1.583.398-2.864 1.158-3.844.735-.972 1.731-1.466 2.988-1.479 1.375.026 2.38.526 3.014 1.499.602.953.905 2.134.905 3.541v.642h-6.744c0 1.106.277 2.017.83 2.732.542.762 1.347 1.149 2.417 1.162.478 0 .981-.088 1.51-.264.528-.142.948-.309 1.255-.497v1.271M131.09 24.954h6.4v1.187h-5.079v4.973h4.844V32.3h-4.844v6.559h-1.32V24.954M140.536 33.78c0 1.21.284 2.208.85 2.995.542.825 1.35 1.245 2.42 1.257 1.071-.012 1.89-.432 2.458-1.257.541-.787.813-1.785.813-2.995 0-1.216-.272-2.228-.813-3.034-.568-.8-1.387-1.206-2.457-1.219-1.071.013-1.879.42-2.42 1.219-.567.806-.851 1.818-.851 3.034zm-1.321 0c0-1.447.373-2.683 1.121-3.707.741-1.051 1.896-1.59 3.467-1.616 1.594.026 2.765.565 3.512 1.616.722 1.024 1.084 2.26 1.084 3.707 0 1.42-.362 2.65-1.084 3.687-.747 1.058-1.918 1.603-3.512 1.636-1.571-.033-2.726-.578-3.467-1.636-.748-1.037-1.121-2.266-1.121-3.687M151.057 30.967c0-.94-.025-1.695-.076-2.266h1.207v1.945h.036a4.4 4.4 0 01.981-1.528c.415-.427.931-.648 1.546-.661.321.013.604.052.848.116v1.305a3.174 3.174 0 00-.886-.117c-.477.013-.87.132-1.178.36-.308.24-.56.565-.754.974a5.035 5.035 0 00-.386 1.296c-.09.493-.134.973-.134 1.44v5.028h-1.204v-7.892M156.937 37.39c.748.416 1.6.63 2.562.642.608 0 1.122-.165 1.542-.496.415-.305.628-.743.642-1.315-.014-.604-.252-1.078-.716-1.421a8.596 8.596 0 00-1.64-.898 10.507 10.507 0 01-.848-.457 7.337 7.337 0 01-.772-.537 2.865 2.865 0 01-.547-.74 2.016 2.016 0 01-.207-.935c.014-1.013.346-1.73.998-2.153.633-.415 1.368-.623 2.202-.623.283 0 .651.026 1.102.078.445.077.886.203 1.328.377l-.114 1.092a5.774 5.774 0 00-2.189-.477c-.63 0-1.13.116-1.5.35a1.235 1.235 0 00-.452.507c-.113.208-.17.487-.17.837 0 .209.073.407.217.595.138.176.322.335.556.477.233.137.496.276.792.42.296.136.584.282.866.438a5.504 5.504 0 011.679 1.12c.479.467.723 1.115.736 1.938 0 .533-.104.978-.31 1.335-.22.37-.497.67-.829.896a4.324 4.324 0 01-2.293.663c-.947 0-1.864-.16-2.747-.482l.112-1.232M171.848 30.044a5.094 5.094 0 00-2.112-.517c-1.183.013-2.088.403-2.716 1.17-.66.787-.99 1.815-.99 3.083 0 1.183.325 2.176.971 2.975.63.839 1.496 1.265 2.603 1.277.76 0 1.501-.152 2.225-.458l.112 1.172c-.797.25-1.637.37-2.524.357-1.581-.033-2.76-.572-3.532-1.616-.785-1.025-1.177-2.26-1.177-3.707.013-1.608.461-2.89 1.347-3.844.88-.973 2.05-1.466 3.514-1.48.603 0 1.104.046 1.507.136.207.04.387.081.536.125.144.052.255.097.33.136l-.094 1.191M174.293 23.913h1.204v6.492h.038c.27-.57.669-1.04 1.197-1.414.527-.343 1.148-.521 1.864-.534 1.313.013 2.208.412 2.685 1.198.466.797.691 1.838.678 3.122v6.082h-1.206V32.79c0-.448-.024-.873-.074-1.276a2.911 2.911 0 00-.331-1.013c-.308-.637-.953-.96-1.933-.974-1.058.026-1.814.444-2.267 1.257a5.21 5.21 0 00-.65 2.63v5.445h-1.205V23.913M193.041 36.466c-.013.772.015 1.57.084 2.393h-1.177v-1.808h-.037c-.09.22-.212.444-.368.67-.151.24-.348.468-.594.681-.245.2-.548.36-.913.477-.357.148-.793.224-1.308.224-1.193-.013-2.052-.387-2.58-1.12-.527-.72-.785-1.65-.772-2.792v-6.49h1.205v6.175c0 .976.186 1.735.558 2.28.364.585.958.876 1.782.876.554 0 1.023-.12 1.406-.359.39-.228.686-.52.888-.878.232-.37.393-.77.48-1.198.096-.421.142-.847.142-1.276v-5.62h1.204v7.765M196.46 31.083c0-.777-.025-1.571-.076-2.382h1.176v1.808h.037c.112-.24.248-.48.404-.719.151-.24.343-.457.575-.652.244-.214.545-.383.903-.505.364-.118.793-.176 1.288-.176 1.21.013 2.08.387 2.605 1.12.503.713.753 1.64.753 2.782v6.5h-1.205v-6.186c0-.967-.172-1.737-.519-2.309-.377-.545-.984-.824-1.82-.837-1.082.026-1.844.422-2.284 1.188a3.823 3.823 0 00-.482 1.18c-.1.44-.151.889-.151 1.343v5.621h-1.204v-7.776M208.28 33.78c-.015 1.04.203 1.951.65 2.732.442.827 1.173 1.252 2.194 1.278 1.096-.026 1.873-.465 2.335-1.318.44-.825.661-1.722.661-2.692 0-1.268-.205-2.29-.615-3.063-.428-.781-1.197-1.177-2.306-1.19-.579 0-1.052.126-1.416.38a2.625 2.625 0 00-.908.995 5.041 5.041 0 00-.463 1.355 8.776 8.776 0 00-.132 1.523zm7.044 4.244c0 1.446-.34 2.656-1.019 3.628-.709.98-1.905 1.482-3.588 1.508a8.395 8.395 0 01-1.781-.212 49.206 49.206 0 01-1.196-.32l.104-1.248c.81.448 1.777.685 2.897.71.787-.012 1.402-.158 1.85-.437a2.434 2.434 0 001.029-1.117c.232-.479.38-1.03.443-1.652.052-.622.076-1.292.076-2.012h-.039c-.696 1.35-1.692 2.014-2.987 1.987-1.545-.04-2.626-.609-3.241-1.712a4.876 4.876 0 01-.679-1.635 6.622 6.622 0 01-.234-1.732c-.014-1.583.302-2.857.952-3.824.64-.986 1.673-1.486 3.1-1.5.645 0 1.214.075 1.704.224.472.18.926.566 1.368 1.159h.037v-1.142l1.204.004v9.323M217.87 37.39c.747.416 1.6.63 2.56.642.609 0 1.123-.165 1.543-.496.415-.305.628-.743.642-1.315-.014-.604-.252-1.078-.716-1.421a8.596 8.596 0 00-1.64-.898 10.478 10.478 0 01-.847-.457 7.218 7.218 0 01-.773-.537 2.865 2.865 0 01-.547-.74 2.016 2.016 0 01-.207-.935c.014-1.013.346-1.73.998-2.153.634-.415 1.368-.623 2.202-.623.283 0 .651.026 1.103.078.445.077.887.203 1.327.377l-.114 1.092a5.763 5.763 0 00-2.189-.477c-.628 0-1.128.116-1.5.35a1.245 1.245 0 00-.452.507c-.113.208-.17.487-.17.837 0 .209.073.407.217.595.138.176.324.335.556.477.233.137.497.276.792.42.296.136.585.282.868.438.641.279 1.2.652 1.677 1.12.479.467.723 1.115.736 1.938 0 .533-.104.978-.31 1.335-.22.37-.495.67-.827.896a4.329 4.329 0 01-2.295.663c-.947 0-1.864-.16-2.747-.482l.112-1.232M227.119 33.78c-.015 1.04.202 1.951.65 2.732.442.827 1.172 1.252 2.194 1.278 1.096-.026 1.873-.465 2.334-1.318.44-.825.662-1.722.662-2.692 0-1.268-.207-2.29-.615-3.063-.428-.781-1.197-1.177-2.307-1.19-.578 0-1.052.126-1.416.38a2.625 2.625 0 00-.908.995 5.041 5.041 0 00-.462 1.355 8.776 8.776 0 00-.132 1.523zm7.044 4.244c0 1.446-.34 2.656-1.019 3.628-.71.98-1.905 1.482-3.588 1.508a8.395 8.395 0 01-1.781-.212 49.206 49.206 0 01-1.196-.32l.104-1.248c.81.448 1.777.685 2.897.71.785-.012 1.401-.158 1.85-.437a2.434 2.434 0 001.029-1.117c.232-.479.38-1.03.442-1.652.052-.622.076-1.292.076-2.012h-.038c-.696 1.35-1.692 2.014-2.987 1.987-1.545-.04-2.627-.609-3.241-1.712a4.907 4.907 0 01-.68-1.635 6.677 6.677 0 01-.234-1.732c-.013-1.583.303-2.857.952-3.824.64-.986 1.672-1.486 3.1-1.5.646 0 1.215.075 1.704.224.472.18.927.566 1.367 1.159h.039v-1.142l1.204.004v9.323M243.468 33.07c0-.932-.19-1.749-.567-2.446-.397-.706-1.049-1.07-1.956-1.097-.888.026-1.589.397-2.106 1.116a4.017 4.017 0 00-.794 2.427zm.59 5.474a8.115 8.115 0 01-2.857.559c-1.609-.033-2.761-.546-3.458-1.538-.692-.973-1.032-2.235-1.019-3.785.013-1.583.399-2.863 1.159-3.844.734-.973 1.73-1.466 2.986-1.48 1.376.027 2.382.527 3.015 1.5.603.952.905 2.134.905 3.541v.642h-6.744c0 1.106.278 2.017.831 2.733.541.76 1.347 1.148 2.416 1.16.479 0 .981-.087 1.51-.263.529-.143.949-.308 1.255-.497v1.272M259.503 38.859v-6.76a6.49 6.49 0 00-.079-1.043 2.157 2.157 0 00-.384-.799 1.627 1.627 0 00-.659-.555c-.281-.117-.632-.175-1.052-.175-.706 0-1.337.292-1.886.876-.564.611-.854 1.556-.866 2.835v5.621h-1.205v-6.76c0-.377-.03-.724-.088-1.043a2.176 2.176 0 00-.383-.799 1.636 1.636 0 00-.658-.555c-.283-.117-.634-.175-1.052-.175-.71 0-1.338.292-1.888.876-.564.611-.852 1.556-.866 2.835v5.621h-1.206v-7.775c0-.778-.026-1.572-.076-2.383h1.212v1.713l.038.018a4.52 4.52 0 01.379-.623c.13-.226.313-.436.552-.632a3.44 3.44 0 01.892-.525c.356-.13.799-.195 1.328-.195.24 0 .499.026.776.078.265.052.53.159.796.32.264.149.497.362.697.64.195.29.334.658.418 1.105h.038a3.532 3.532 0 011.212-1.522c.543-.4 1.218-.608 2.027-.621 1.027.013 1.819.33 2.375.955.542.615.814 1.433.814 2.451v6.996h-1.206M270.03 33.07c0-.932-.187-1.749-.565-2.446-.397-.706-1.049-1.07-1.956-1.097-.888.026-1.59.397-2.106 1.116a4.017 4.017 0 00-.794 2.427zm.591 5.474a8.121 8.121 0 01-2.856.559c-1.609-.033-2.761-.546-3.46-1.538-.69-.973-1.03-2.235-1.017-3.785.013-1.583.399-2.863 1.159-3.844.734-.973 1.73-1.466 2.986-1.48 1.375.027 2.38.527 3.015 1.5.603.952.905 2.134.905 3.541v.642h-6.744c0 1.106.278 2.017.831 2.733.54.76 1.347 1.148 2.416 1.16.479 0 .981-.087 1.51-.263.529-.143.947-.308 1.255-.497v1.272M273.992 28.7h1.204V38.86h-1.204zm1.204-2.715h-1.204v-1.671h1.204v1.671M278.419 31.083a38.2 38.2 0 00-.075-2.382h1.176v1.808h.037c.112-.24.248-.48.404-.719.151-.24.343-.457.574-.652.245-.214.546-.383.904-.505.364-.118.793-.176 1.288-.176 1.21.013 2.078.387 2.605 1.12.503.713.752 1.64.752 2.782v6.5h-1.204v-6.186c0-.967-.173-1.737-.519-2.309-.378-.545-.985-.824-1.821-.837-1.081.026-1.844.422-2.284 1.188a3.788 3.788 0 00-.481 1.18c-.1.44-.151.889-.151 1.343v5.621h-1.205v-7.776M288.748 37.39c.747.416 1.6.63 2.56.642.61 0 1.123-.165 1.544-.496.413-.305.627-.743.64-1.315-.013-.604-.25-1.078-.716-1.421a8.624 8.624 0 00-1.639-.898 10.286 10.286 0 01-.848-.457 7.201 7.201 0 01-.772-.537 2.835 2.835 0 01-.546-.74 2 2 0 01-.208-.935c.013-1.013.345-1.73.997-2.153.635-.415 1.37-.623 2.204-.623.283 0 .65.026 1.101.078.446.077.887.203 1.327.377l-.113 1.092a5.763 5.763 0 00-2.19-.477c-.628 0-1.128.116-1.5.35a1.242 1.242 0 00-.45.507c-.114.208-.171.487-.171.837 0 .209.072.407.217.595.138.176.323.335.556.477.232.137.496.276.791.42.296.136.585.282.868.438.641.279 1.2.652 1.679 1.12.477.467.722 1.115.734 1.938 0 .533-.104.978-.309 1.335-.22.37-.496.67-.828.896a4.325 4.325 0 01-2.295.663c-.946 0-1.862-.16-2.745-.482l.112-1.232M303.657 30.044a5.089 5.089 0 00-2.112-.517c-1.182.013-2.086.403-2.716 1.17-.66.787-.989 1.815-.989 3.083 0 1.183.324 2.176.97 2.975.63.839 1.497 1.265 2.605 1.277.76 0 1.501-.152 2.224-.458l.112 1.172c-.796.25-1.638.37-2.523.357-1.583-.033-2.76-.572-3.533-1.616-.784-1.025-1.176-2.26-1.176-3.707.012-1.608.46-2.89 1.345-3.844.881-.973 2.052-1.466 3.515-1.48.602 0 1.104.046 1.506.136.207.04.387.081.536.125.146.052.256.097.33.136l-.094 1.191M306.101 23.913h1.204v6.492h.039c.27-.57.67-1.04 1.196-1.414.528-.343 1.15-.521 1.865-.534 1.312.013 2.207.412 2.684 1.198.466.797.691 1.838.678 3.122v6.082h-1.204V32.79c0-.448-.026-.873-.076-1.276a2.911 2.911 0 00-.331-1.013c-.307-.637-.953-.96-1.933-.974-1.058.026-1.812.444-2.266 1.257a5.224 5.224 0 00-.652 2.63v5.445h-1.204V23.913M322.721 33.74h-.349c-.528 0-1.057.014-1.585.04a5.574 5.574 0 00-1.511.34c-.453.157-.815.4-1.084.733-.297.338-.444.786-.444 1.346 0 .65.207 1.116.621 1.395.384.293.86.438 1.427.438.71 0 1.27-.145 1.679-.438.404-.28.696-.611.878-.995.188-.417.296-.823.322-1.22.03-.416.046-.758.046-1.024zm.112 3.493h-.037a2.97 2.97 0 01-1.3 1.366 3.857 3.857 0 01-1.828.504c-.685-.013-1.239-.127-1.659-.34-.44-.2-.776-.454-1.008-.758-.41-.66-.601-1.25-.576-1.768 0-.85.199-1.518.595-2.01.39-.493.885-.846 1.49-1.06a8.016 8.016 0 011.967-.437 36.02 36.02 0 012.008-.058h.236v-.52c.039-1.75-.709-2.625-2.246-2.625-1.018-.013-1.984.267-2.896.842v-1.218a7.032 7.032 0 012.892-.694c2.329-.025 3.481 1.235 3.454 3.785v4.486c-.018.772.015 1.483.103 2.131h-1.195v-1.626M327.976 29.77h-1.987V28.7h1.987v-.739c0-.544.025-1.077.076-1.595a3.91 3.91 0 01.292-1.353c.163-.416.425-.743.79-.983.343-.234.825-.35 1.44-.35.206 0 .418.006.638.02.22.038.385.096.499.174l-.075 1.099a1.977 1.977 0 00-.963-.224c-.404 0-.708.095-.916.282a1.605 1.605 0 00-.444.778 4.09 4.09 0 00-.113.975c-.012.357-.019.7-.019 1.03v.887h2.219v1.07h-2.219v9.088h-1.205V29.77M338.017 29.77h-2.238v6.587c0 .468.102.86.31 1.179.19.331.523.496 1.002.496.44 0 .816-.08 1.122-.243l.076 1.034a6.639 6.639 0 01-.601.173c-.27.072-.565.107-.884.107-.528 0-.944-.094-1.252-.283a1.795 1.795 0 01-.668-.74 3.67 3.67 0 01-.253-1.07 13.693 13.693 0 01-.058-1.303V29.77h-1.929V28.7h1.93V26.25l1.205-.438v2.89h2.238v1.07"/></svg>
diff --git a/themes/fid_bbi/images/en.svg b/themes/fid_bbi/images/en.svg
deleted file mode 100644
index 655e82c6ba90015cb60da5ef7ad2475c0e8fbfc6..0000000000000000000000000000000000000000
--- a/themes/fid_bbi/images/en.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="en.svg" viewBox="0 0 640 480">
-  <defs>
-    <clipPath id="a">
-      <path fill-opacity=".7" d="M-85.3 0h682.6v512H-85.3z"/>
-    </clipPath>
-  </defs>
-  <g clip-path="url(#a)" transform="translate(80) scale(.94)">
-    <g stroke-width="1pt">
-      <path fill="#012169" d="M-256 0H768v512H-256z"/>
-      <path fill="#fff" d="M-256 0v57.2L653.5 512H768v-57.2L-141.5 0H-256zM768 0v57.2L-141.5 512H-256v-57.2L653.5 0H768z"/>
-      <path fill="#fff" d="M170.7 0v512h170.6V0H170.7zM-256 170.7v170.6H768V170.7H-256z"/>
-      <path fill="#c8102e" d="M-256 204.8v102.4H768V204.8H-256zM204.8 0v512h102.4V0H204.8zM-256 512L85.3 341.3h76.4L-179.7 512H-256zm0-512L85.3 170.7H9L-256 38.2V0zm606.4 170.7L691.7 0H768L426.7 170.7h-76.3zM768 512L426.7 341.3H503l265 132.5V512z"/>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/themes/fid_bbi/images/fid-bbi-logo.svg b/themes/fid_bbi/images/fid-bbi-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..538adf10839fd5e78021a7a8e6c56489647f7904
--- /dev/null
+++ b/themes/fid_bbi/images/fid-bbi-logo.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 259" height="259" width="360">
+	<path class="brand" d="M359.015 145.383v-4.832h-5.957v-36.666h5.957v-4.832h-17.671v4.832h5.956v36.666h-5.956v4.832zm-32.298-10.458v-5.956c0-3.971-1.522-6.619-4.302-8.141 2.25-1.588 3.64-4.17 3.64-7.677v-3.773c0-7.611-3.773-10.325-11.384-10.325h-12.443v46.33h13.237c7.943 0 11.252-2.846 11.252-10.458zm-6.42-21.113c0 2.979-2.184 4.832-4.832 4.832h-7.479v-14.627h7.48c3.309 0 4.83 1.39 4.83 4.765zm.662 21.775c0 3.376-1.523 4.832-4.898 4.832h-8.075v-16.811h8.141c2.846 0 4.832 1.853 4.832 4.765zm-35.385-.662v-5.956c0-3.971-1.523-6.619-4.302-8.141 2.25-1.588 3.64-4.17 3.64-7.677v-3.773c0-7.611-3.773-10.325-11.384-10.325h-12.443v46.33h13.237c7.942 0 11.252-2.846 11.252-10.458zm-6.42-21.113c0 2.979-2.184 4.832-4.832 4.832h-7.479v-14.627h7.48c3.308 0 4.83 1.39 4.83 4.765zm.661 21.775c0 3.376-1.522 4.832-4.897 4.832h-8.075v-16.811h8.141c2.846 0 4.831 1.853 4.831 4.765zm-55.85-.662v-25.547c0-7.611-4.434-10.325-12.045-10.325h-12.84v46.33h13.634c7.942 0 11.251-2.846 11.251-10.458zm-5.758.662c0 3.376-1.522 4.832-4.897 4.832h-8.472v-36.402h8.538c2.846 0 4.831 1.853 4.831 4.765zm-35.063 9.796v-4.832h-5.956v-36.666h5.956v-4.832h-17.671v4.832h5.957v36.666h-5.957v4.832zm-32.57-41.498v-4.832h-22.106v46.33h5.758v-20.849h14.693v-4.831h-14.693v-15.818z"/>
+	<path class="text" d="M337.855 194.336v-1.718h-1.626c-.687 0-1.03-.229-1.03-.916v-7.1h2.656v-1.717h-2.657v-2.748h-1.946v2.748h-1.489v1.718h1.489v6.985c0 1.603.801 2.748 2.405 2.748zm-7.81-2.863v-1.03c0-1.947-1.099-2.955-3.137-2.955h-.32c-.573 0-1.1-.297-1.1-1.03v-.825c0-.687.527-1.03 1.26-1.03h2.84v-1.718h-2.611c-2.176 0-3.435.756-3.435 2.886v.664c0 2.06 1.076 2.908 3.183 2.908h.39c.64 0 .984.344.984 1.03v1.215c0 .687-.458 1.03-1.26 1.03h-3.183v1.718h2.954c2.176 0 3.436-.893 3.436-2.863zm-15.572 2.863v-8.474c0-.458.343-1.26 1.488-1.26h1.054c.916 0 1.488.573 1.488 1.49v8.244h1.947v-7.787c0-2.633-1.26-3.664-3.664-3.664h-.596c-.687 0-1.328.16-1.832.55v-.55h-1.832v11.45zm-6 0v-1.718h-3.184c-1.145 0-1.717-.572-1.717-1.488v-1.718h5.633v-2.977c0-2.29-1.099-3.55-3.297-3.55h-.619c-2.633 0-3.664 1.054-3.664 3.664v4.123c0 2.633 1.26 3.664 3.893 3.664zm-4.901-8.245c0-.916.343-1.488 1.488-1.488h.87c.802 0 1.375.572 1.375 1.374v1.717h-3.733zm-5.268-5.725v-2.061h-2.175v2.06zm-.114 13.97v-11.45h-1.947v11.45zm-5.61 0v-16.031h-1.948v4.58h-2.198c-2.634 0-3.893 1.054-3.893 3.664v4.123c0 2.633 1.26 3.664 3.893 3.664h.48c.688 0 1.306-.16 1.833-.527v.527zm-3.436-1.718h-.94c-1.144 0-1.717-.572-1.717-1.488v-5.039c0-.916.573-1.488 1.718-1.488h2.427v6.756c0 .458-.343 1.26-1.488 1.26zm-7.466-1.145v-1.03c0-1.947-1.1-2.955-3.137-2.955h-.321c-.573 0-1.1-.297-1.1-1.03v-.825c0-.687.527-1.03 1.26-1.03h2.84v-1.718h-2.61c-2.176 0-3.436.756-3.436 2.886v.664c0 2.06 1.076 2.908 3.183 2.908h.39c.64 0 .984.344.984 1.03v1.215c0 .687-.458 1.03-1.26 1.03h-3.182v1.718h2.954c2.175 0 3.435-.893 3.435-2.863zm-15.573 2.863v-8.474c0-.458.344-1.26 1.489-1.26h1.053c.916 0 1.489.573 1.489 1.49v8.244h1.946v-7.787c0-2.633-1.26-3.664-3.664-3.664h-.595c-.687 0-1.329.16-1.832.55v-.55h-1.833v11.45zm-5.382-3.664v-4.123c0-2.61-1.26-3.664-3.893-3.664h-.298c-2.633 0-3.893 1.054-3.893 3.664v4.123c0 2.61 1.26 3.664 3.893 3.664h.298c2.634 0 3.893-1.054 3.893-3.664zm-1.946.458c0 .916-.573 1.488-1.718 1.488h-.756c-1.145 0-1.717-.572-1.717-1.488v-5.039c0-.916.572-1.488 1.717-1.488h.756c1.145 0 1.718.572 1.718 1.488zm-9.459-10.764v-2.061h-2.175v2.06zm-.114 13.97v-11.45h-1.947v11.45zm-4.351 0v-1.718h-1.626c-.687 0-1.03-.229-1.03-.916v-7.1h2.656v-1.717h-2.657v-2.748h-1.946v2.748h-1.49v1.718h1.49v6.985c0 1.603.801 2.748 2.404 2.748zm-7.466 0v-1.603c-.848 0-1.145-.23-1.145-.687v-5.497c0-2.61-1.26-3.664-3.893-3.664h-2.863v1.718h3.092c1.145 0 1.717.572 1.717 1.488v1.145h-2.382c-2.29 0-3.343 1.26-3.343 3.55v.458c0 2.29 1.03 3.092 3.32 3.092h1.58c.596 0 1.077-.275 1.398-.687.343.412.847.687 1.26.687zm-4.145-1.718h-1.58c-.802 0-1.146-.343-1.146-1.145v-1.145c0-.802.573-1.374 1.375-1.374h2.404v2.52c0 .457 0 1.144-1.053 1.144zm-18.413 1.718v-8.542c0-.458.39-1.191 1.489-1.191h.595c.916 0 1.466.572 1.466 1.488v8.245h1.946v-8.405c.046-.481.413-1.328 1.466-1.328h.595c.916 0 1.489.572 1.489 1.488v8.245h1.947v-7.787c0-2.633-1.26-3.664-3.665-3.664h-.137c-.939 0-1.763.32-2.359 1.054-.595-.71-1.603-1.054-2.977-1.054h-.137c-.687 0-1.329.16-1.833.55v-.55h-1.832v11.45zm-7.626 0v-8.13c0-.458.343-1.489 1.488-1.489h1.901v-1.832h-1.672c-.732 0-1.328.206-1.832.618v-.618h-1.832v11.45zm-5.382-3.664v-4.123c0-2.61-1.26-3.664-3.893-3.664h-.298c-2.634 0-3.893 1.054-3.893 3.664v4.123c0 2.61 1.26 3.664 3.893 3.664h.298c2.633 0 3.893-1.054 3.893-3.664zm-1.947.458c0 .916-.572 1.488-1.717 1.488h-.756c-1.145 0-1.718-.572-1.718-1.488v-5.039c0-.916.573-1.488 1.718-1.488h.756c1.145 0 1.717.572 1.717 1.488zm-7.626-11.108v-1.717h-2.565c-1.374 0-2.381.916-2.381 2.519v2.061h-1.489v1.718h1.489v9.733h1.946v-9.733h2.771v-1.718h-2.77v-2.176c0-.389.297-.687.8-.687zm-14.817 14.314v-8.474c0-.458.344-1.26 1.489-1.26h1.053c.916 0 1.489.573 1.489 1.49v8.244h1.946v-7.787c0-2.633-1.26-3.664-3.664-3.664h-.595c-.687 0-1.329.16-1.832.55v-.55h-1.833v11.45zm-5.496-13.97v-2.061h-2.176v2.06zm-.115 13.97v-11.45h-1.946v11.45zm-11.473 0v-8.542c0-.458.389-1.191 1.488-1.191h1.054c.916 0 1.488.572 1.488 1.488v8.245h1.947v-7.787c0-2.633-1.26-3.664-3.664-3.664h-.596c-.64 0-1.236.137-1.717.458v-5.038H158.4v16.03zm-4.924 0v-1.718h-2.725c-1.145 0-1.718-.572-1.718-1.488v-5.039c0-.916.573-1.488 1.718-1.488h2.725v-1.718h-2.496c-2.634 0-3.894 1.054-3.894 3.664v4.123c0 2.633 1.26 3.664 3.894 3.664zm-8.909 0v-1.603c-.847 0-1.145-.23-1.145-.687v-5.497c0-2.61-1.26-3.664-3.893-3.664h-2.863v1.718h3.092c1.145 0 1.718.572 1.718 1.488v1.145h-2.382c-2.29 0-3.344 1.26-3.344 3.55v.458c0 2.29 1.03 3.092 3.321 3.092h1.58c.596 0 1.077-.275 1.397-.687.344.412.847.687 1.26.687zm-4.145-1.718h-1.58c-.802 0-1.145-.343-1.145-1.145v-1.145c0-.802.572-1.374 1.374-1.374h2.405v2.52c0 .457 0 1.144-1.054 1.144zm-6.39-12.641v-1.672h-7.51v16.03h1.991v-7.213h4.947v-1.672h-4.947v-5.473zm206.96 45.97v-16.032h-1.947v4.58h-2.198c-2.634 0-3.893 1.054-3.893 3.665v4.122c0 2.634 1.26 3.664 3.893 3.664h.48c.688 0 1.306-.16 1.833-.526v.526zm-3.435-1.718h-.94c-1.144 0-1.717-.573-1.717-1.489v-5.038c0-.916.573-1.489 1.718-1.489h2.427v6.756c0 .458-.343 1.26-1.488 1.26zm-13.901 1.717v-8.473c0-.458.343-1.26 1.488-1.26h1.054c.916 0 1.488.573 1.488 1.489v8.244h1.947v-7.786c0-2.634-1.26-3.664-3.664-3.664h-.596c-.687 0-1.328.16-1.832.55v-.55h-1.832v11.45zm-5.611 0v-11.45h-1.947v8.542c-.046.48-.412 1.19-1.488 1.19h-.779c-.916 0-1.489-.572-1.489-1.488v-8.244h-1.946v7.786c0 2.634 1.26 3.664 3.664 3.664h.32c.688 0 1.306-.16 1.833-.526v.526zm-17.268-6.298v-1.717h-7.443v1.717zm-10.649 3.436v-1.03c0-1.948-1.1-2.955-3.137-2.955h-.32c-.573 0-1.1-.298-1.1-1.03v-.825c0-.687.527-1.03 1.26-1.03h2.84v-1.718h-2.612c-2.175 0-3.435.755-3.435 2.885v.664c0 2.061 1.077 2.909 3.183 2.909h.39c.641 0 .985.343.985 1.03v1.214c0 .687-.458 1.03-1.26 1.03h-3.183v1.718h2.954c2.176 0 3.435-.893 3.435-2.862zm-8.68 2.862l-4.03-7.03 3.87-4.42h-2.45l-3.435 3.984v-8.565h-1.947v16.031h1.947v-4.9l.64-.756 3.138 5.656zm-12.046 0v-1.717h-3.183c-1.145 0-1.717-.573-1.717-1.489v-1.717h5.633v-2.978c0-2.29-1.099-3.55-3.298-3.55h-.618c-2.634 0-3.664 1.054-3.664 3.665v4.122c0 2.634 1.26 3.664 3.893 3.664zm-4.9-8.244c0-.916.343-1.489 1.488-1.489h.87c.802 0 1.374.573 1.374 1.374v1.718h-3.732zm-11.245 8.244v-8.542c0-.458.39-1.19 1.489-1.19h1.053c.916 0 1.489.572 1.489 1.488v8.244h1.946v-7.786c0-2.634-1.26-3.664-3.664-3.664h-.595c-.642 0-1.237.137-1.718.458v-5.039h-1.947v16.031zm-4.351 0v-1.717h-1.626c-.687 0-1.03-.23-1.03-.916v-7.1h2.656v-1.717h-2.657v-2.749h-1.946v2.749h-1.489v1.717h1.489v6.985c0 1.603.801 2.748 2.404 2.748zm-8.153-3.664v-4.122c0-2.61-1.26-3.664-3.893-3.664h-.298c-2.634 0-3.893 1.053-3.893 3.664v4.122c0 2.61 1.26 3.664 3.893 3.664h.298c2.633 0 3.893-1.053 3.893-3.664zm-1.947.458c0 .916-.572 1.489-1.717 1.489h-.756c-1.145 0-1.718-.573-1.718-1.489v-5.038c0-.916.573-1.489 1.718-1.489h.756c1.145 0 1.717.573 1.717 1.489zm-9.458-10.764v-2.06h-2.176v2.06zm-.114 13.97v-11.45h-1.947v11.45zm-4.58 0v-1.717h-.459c-.595 0-.801-.206-.801-.687v-13.627h-1.947v13.741c0 1.74 1.054 2.29 1.947 2.29zm-6.528-3.664v-4.122c0-2.634-1.26-3.664-3.893-3.664h-.366c-.641 0-1.237.137-1.718.458v-5.039h-1.946v16.031h4.03c2.634 0 3.893-1.053 3.893-3.664zm-4.488-6.069h.824c1.145 0 1.718.573 1.718 1.489v5.038c0 .916-.573 1.489-1.718 1.489h-2.313v-6.756c0-.458.344-1.26 1.489-1.26zm-6.985-4.237v-2.06h-2.176v2.06zm-.115 13.97v-11.45h-1.946v11.45zm-5.496-3.618v-2.061c0-1.374-.527-2.29-1.489-2.817.78-.55 1.26-1.443 1.26-2.657v-1.305c0-2.634-1.305-3.573-3.939-3.573h-4.076v16.031h4.35c2.749 0 3.894-.984 3.894-3.618zm-2.221-7.306c0 1.03-.756 1.672-1.672 1.672h-2.36v-5.061h2.36c1.145 0 1.672.48 1.672 1.649zm.229 7.535c0 1.168-.527 1.672-1.695 1.672h-2.565v-5.817h2.588c.985 0 1.672.641 1.672 1.649zm-15.642 3.39v-2.29h-2.29v2.29l-.916 3.206h1.786zm-5.725-6.299v-1.717h-7.443v1.717zm-17.085 6.298v-8.542c0-.458.39-1.19 1.489-1.19h1.053c.916 0 1.489.572 1.489 1.488v8.244h1.946v-7.786c0-2.634-1.26-3.664-3.664-3.664h-.595c-.641 0-1.237.137-1.718.458v-5.039H160.6v16.031zm-4.924 0v-1.717h-2.725c-1.145 0-1.717-.573-1.717-1.489v-5.038c0-.916.572-1.489 1.717-1.489h2.725v-1.717h-2.496c-2.633 0-3.893 1.053-3.893 3.664v4.122c0 2.634 1.26 3.664 3.893 3.664zm-9.824 0v-11.45h-1.947v8.542c-.046.48-.412 1.19-1.488 1.19h-.779c-.916 0-1.489-.572-1.489-1.488v-8.244h-1.946v7.786c0 2.634 1.26 3.664 3.664 3.664h.32c.688 0 1.306-.16 1.833-.526v.526zm-11.084-3.618v-2.061c0-1.374-.527-2.29-1.489-2.817.779-.55 1.26-1.443 1.26-2.657v-1.305c0-2.634-1.306-3.573-3.94-3.573h-4.076v16.031h4.351c2.749 0 3.894-.984 3.894-3.618zm-2.222-7.306c0 1.03-.756 1.672-1.672 1.672h-2.359v-5.061h2.36c1.144 0 1.671.48 1.671 1.649zm.23 7.535c0 1.168-.528 1.672-1.696 1.672h-2.565v-5.817h2.588c.985 0 1.672.641 1.672 1.649zm224.295 35v-1.718h-1.626c-.687 0-1.03-.23-1.03-.917v-7.099h2.656v-1.718h-2.657v-2.748h-1.946v2.748h-1.489v1.718h1.489v6.985c0 1.603.801 2.748 2.404 2.748zm-6.435-14.314v-1.718h-2.565c-1.374 0-2.382.916-2.382 2.52v2.06h-1.489v1.718h1.489v9.733h1.946v-9.733h2.772v-1.718h-2.771v-2.175c0-.39.297-.687.801-.687zm-8.039 14.313v-1.603c-.847 0-1.145-.229-1.145-.687v-5.496c0-2.611-1.26-3.665-3.893-3.665h-2.863v1.718h3.092c1.145 0 1.718.573 1.718 1.489v1.145h-2.382c-2.29 0-3.344 1.26-3.344 3.55v.457c0 2.29 1.03 3.092 3.32 3.092h1.581c.595 0 1.076-.275 1.397-.687.344.412.847.687 1.26.687zm-4.145-1.717h-1.58c-.802 0-1.145-.344-1.145-1.146v-1.145c0-.801.572-1.374 1.374-1.374h2.405v2.52c0 .458 0 1.145-1.054 1.145zM327 257.556v-8.542c0-.458.39-1.19 1.488-1.19h1.054c.916 0 1.488.572 1.488 1.488v8.244h1.947v-7.786c0-2.634-1.26-3.665-3.664-3.665h-.596c-.64 0-1.236.138-1.717.458v-5.038h-1.947v16.031zm-4.924 0v-1.717h-2.725c-1.145 0-1.718-.573-1.718-1.489v-5.038c0-.916.573-1.489 1.718-1.489h2.725v-1.718h-2.496c-2.634 0-3.894 1.054-3.894 3.665v4.122c0 2.634 1.26 3.664 3.894 3.664zm-9.252-2.863v-1.03c0-1.947-1.1-2.954-3.138-2.954h-.32c-.573 0-1.1-.298-1.1-1.03v-.825c0-.687.527-1.03 1.26-1.03h2.84v-1.719h-2.61c-2.177 0-3.436.756-3.436 2.886v.664c0 2.061 1.076 2.909 3.183 2.909h.39c.64 0 .984.343.984 1.03v1.214c0 .687-.458 1.03-1.26 1.03h-3.183v1.718h2.955c2.175 0 3.435-.893 3.435-2.863zm-15.573 2.863v-8.473c0-.458.343-1.26 1.489-1.26h1.053c.916 0 1.489.573 1.489 1.489v8.244h1.946v-7.786c0-2.634-1.26-3.665-3.664-3.665h-.595c-.688 0-1.329.16-1.833.55v-.55h-1.832v11.451zm-6 0v-1.717h-3.184c-1.145 0-1.717-.573-1.717-1.489v-1.718h5.634v-2.977c0-2.29-1.1-3.55-3.298-3.55h-.619c-2.633 0-3.664 1.054-3.664 3.665v4.122c0 2.634 1.26 3.664 3.893 3.664zm-4.901-8.244c0-.916.343-1.489 1.488-1.489h.87c.802 0 1.375.573 1.375 1.374v1.718h-3.733zm-4.81 5.381v-1.03c0-1.947-1.099-2.954-3.137-2.954h-.32c-.573 0-1.1-.298-1.1-1.03v-.825c0-.687.527-1.03 1.26-1.03h2.84v-1.719h-2.611c-2.176 0-3.435.756-3.435 2.886v.664c0 2.061 1.076 2.909 3.183 2.909h.39c.64 0 .984.343.984 1.03v1.214c0 .687-.458 1.03-1.26 1.03h-3.183v1.718h2.954c2.176 0 3.436-.893 3.436-2.863zm-8.908 0v-1.03c0-1.947-1.1-2.954-3.137-2.954h-.321c-.573 0-1.1-.298-1.1-1.03v-.825c0-.687.527-1.03 1.26-1.03h2.84v-1.719h-2.61c-2.176 0-3.436.756-3.436 2.886v.664c0 2.061 1.076 2.909 3.183 2.909h.39c.64 0 .984.343.984 1.03v1.214c0 .687-.458 1.03-1.26 1.03h-3.182v1.718h2.954c2.175 0 3.435-.893 3.435-2.863zm-9.596-11.107v-2.06h-2.175v2.06zm-.114 13.97v-11.45h-1.947v11.45zm-4.695-11.45h-1.9l-1.856 9.984-1.9-7.923h-1.947l-2.038 7.923-1.855-9.985h-2.016l2.29 11.451h2.932l1.58-6.206 1.443 6.206h3zm-15.504 8.587v-1.03c0-1.947-1.1-2.954-3.138-2.954h-.32c-.573 0-1.1-.298-1.1-1.03v-.825c0-.687.527-1.03 1.26-1.03h2.84v-1.719h-2.61c-2.177 0-3.436.756-3.436 2.886v.664c0 2.061 1.076 2.909 3.183 2.909h.39c.64 0 .984.343.984 1.03v1.214c0 .687-.458 1.03-1.26 1.03h-3.183v1.718h2.955c2.175 0 3.435-.893 3.435-2.863zm-15.573 2.863v-8.473c0-.458.344-1.26 1.489-1.26h1.053c.916 0 1.489.573 1.489 1.489v8.244h1.946v-7.786c0-2.634-1.26-3.665-3.664-3.665h-.595c-.687 0-1.329.16-1.833.55v-.55h-1.832v11.451zm-5.382-3.664v-4.122c0-2.611-1.26-3.665-3.893-3.665h-.298c-2.633 0-3.893 1.054-3.893 3.665v4.122c0 2.61 1.26 3.664 3.893 3.664h.298c2.634 0 3.893-1.053 3.893-3.664zm-1.946.458c0 .916-.573 1.489-1.718 1.489h-.756c-1.145 0-1.717-.573-1.717-1.489v-5.038c0-.916.572-1.489 1.717-1.489h.756c1.145 0 1.718.573 1.718 1.489zm-9.459-10.764v-2.06h-2.175v2.06zm-.114 13.97v-11.45h-1.947v11.45zm-4.351 0v-1.717h-1.626c-.687 0-1.031-.23-1.031-.917v-7.099h2.657v-1.718h-2.657v-2.748h-1.947v2.748h-1.488v1.718h1.488v6.985c0 1.603.802 2.748 2.405 2.748zm-7.466 0v-1.603c-.848 0-1.145-.229-1.145-.687v-5.496c0-2.611-1.26-3.665-3.894-3.665h-2.862v1.718h3.091c1.146 0 1.718.573 1.718 1.489v1.145h-2.382c-2.29 0-3.343 1.26-3.343 3.55v.457c0 2.29 1.03 3.092 3.32 3.092h1.58c.596 0 1.077-.275 1.398-.687.343.412.847.687 1.26.687zm-4.145-1.717h-1.58c-.802 0-1.146-.344-1.146-1.146v-1.145c0-.801.573-1.374 1.374-1.374h2.405v2.52c0 .458 0 1.145-1.053 1.145zm-18.413 1.717v-8.542c0-.458.39-1.19 1.488-1.19h.596c.916 0 1.466.572 1.466 1.488v8.244h1.946v-8.405c.046-.48.412-1.328 1.466-1.328h.595c.916 0 1.489.573 1.489 1.489v8.244h1.947v-7.786c0-2.634-1.26-3.665-3.665-3.665h-.137c-.94 0-1.764.321-2.359 1.054-.595-.71-1.603-1.054-2.977-1.054h-.138c-.687 0-1.328.16-1.832.55v-.55h-1.832v11.451zm-7.626 0v-8.13c0-.458.343-1.488 1.488-1.488h1.901v-1.833h-1.672c-.732 0-1.328.207-1.832.619v-.619h-1.832v11.451zm-5.382-3.664v-4.122c0-2.611-1.26-3.665-3.893-3.665h-.298c-2.634 0-3.893 1.054-3.893 3.665v4.122c0 2.61 1.26 3.664 3.893 3.664h.298c2.633 0 3.893-1.053 3.893-3.664zm-1.947.458c0 .916-.572 1.489-1.717 1.489h-.756c-1.145 0-1.718-.573-1.718-1.489v-5.038c0-.916.573-1.489 1.718-1.489h.756c1.145 0 1.717.573 1.717 1.489zm-7.626-11.107v-1.718h-2.565c-1.374 0-2.382.916-2.382 2.52v2.06h-1.488v1.718h1.488v9.733h1.947v-9.733h2.771v-1.718h-2.77v-2.175c0-.39.297-.687.8-.687zm-14.817 14.313v-8.473c0-.458.344-1.26 1.489-1.26h1.053c.916 0 1.489.573 1.489 1.489v8.244h1.946v-7.786c0-2.634-1.26-3.665-3.664-3.665h-.595c-.687 0-1.329.16-1.833.55v-.55h-1.832v11.451zm-4.81 0v-1.672h-1.602v-12.687h1.603v-1.672h-5.199v1.672h1.603v12.687h-1.603v1.672z"/>
+	<path class="blip" d="M1 237.037l85.016-73.326m0 0L47.234 1.095M1 237.038L47.234 1.095M1 237.038l46.234-86.659 38.782 13.332M47.234 1.095v256.46M1 52.63l46.234 12.201L86.016 9.023M1 52.63v184.407l46.234 20.518 38.782-93.844V9.023L47.234 1.095z" fill="none" stroke="#000" stroke-width="2"/>
+</svg>
diff --git a/themes/fid_bbi/images/finc-logo.png b/themes/fid_bbi/images/finc-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a12960e73b017cfee759adab55f0387ffe9b693
Binary files /dev/null and b/themes/fid_bbi/images/finc-logo.png differ
diff --git a/themes/fid_bbi/images/hab-logo.svg b/themes/fid_bbi/images/hab-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..52ea07897aba03b8acd5077e22ea20d23c14980e
--- /dev/null
+++ b/themes/fid_bbi/images/hab-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="132.151" height="106.083" viewBox="0 0 132.151 106.083"><path d="M9.391.312H7.687v5.61h-4.97V.312H1.032v12.953H2.72V7.359h4.967v5.906H9.39zm24.158 0h-7.814v12.953h7.953v-1.844h-5.702v-3.89h5.266V5.734h-5.267V2.156h5.563zM56.16 13.265h3.11l-2.58-5.719c1.375-.593 2.172-1.75 2.172-3.265 0-2.516-1.688-3.97-4.594-3.97h-4.717v12.954h2.859V8.062h1.531zm-3.75-10.86h1.5c1.266 0 1.953.657 1.953 1.907 0 1.203-.672 1.86-1.953 1.86h-1.5zm21.38 8.657v2.203h9.28v-2.297h-5.857l5.561-8.453V.312h-8.703V2.64h5.375zm29.046 2.516c3.25 0 4.844-2.313 4.844-6.142V6.123c0-3.812-1.594-6.125-4.844-6.125s-4.828 2.314-4.828 6.127v1.313c0 3.827 1.578 6.139 4.828 6.139zm0-1.844c-1.75 0-2.531-1.313-2.531-4.235V6.078c0-2.922.781-4.235 2.531-4.235s2.532 1.313 2.532 4.235v1.421c0 2.922-.782 4.235-2.532 4.235zm24.142 1.844c1.75 0 2.688-.922 3.22-2.204l.264 1.891h1.156V6.499h-4.796v1.36h3.25v.765c0 1.094-.515 3.47-2.843 3.47-2.063 0-2.891-1.907-2.891-5V6.39c0-3.797 1.125-4.938 2.89-4.938 1.86 0 2.47 1.61 2.594 2.704l1.657-.235c-.204-1.437-.97-3.922-4.204-3.922-3.015 0-4.703 2.313-4.703 6.094v1.281c0 3.594 1.486 6.204 4.407 6.204zM8.203 44.204h2.203L6.5 31.251H3.907L0 44.204h2.219l.922-3.297h4.11zM5.172 33.11h.063c.296 1.578.765 3.516 1.5 5.985h-3.08c.735-2.47 1.22-4.407 1.516-5.985zm19.767-1.859v8.844c0 2.734 1.766 4.421 4.736 4.421 2.937 0 4.61-1.687 4.61-4.421v-8.844H31.36v8.812c0 1.25-.547 2.094-1.718 2.094-1.188 0-1.797-.812-1.797-2.094v-8.812zM53.16 44.517c1.687 0 2.781-.672 3.312-2.188l.063 1.875h2.453v-7.188h-4.89v2.454h1.78v.078c0 1.468-.53 2.312-1.687 2.312-1.14 0-1.766-.812-1.766-3.094v-2.312c0-2.14.594-2.89 1.61-2.89 1 0 1.453 1.046 1.422 2.359l3.547-.656c0-2.11-1.438-4.329-4.97-4.329-3.467 0-5.171 2.079-5.171 5.547v2.547c0 3.875 2.094 5.484 4.297 5.484zm20.458-13.266v8.969c0 2.78 1.936 4.296 4.875 4.296 2.86 0 4.734-1.515 4.734-4.296v-8.97h-3.578v8.923c0 .89-.422 1.5-1.203 1.5-.813 0-1.25-.594-1.25-1.5v-8.922zm29.218 13.266c3.11 0 4.922-1.907 4.922-4.125 0-2.297-1.453-3.235-3.344-3.766l-1.78-.5c-1.017-.297-1.564-.797-1.564-1.578 0-.656.437-1.313 1.718-1.313 1 0 2.032.5 2.688 1.985l2.203-1.563c-.766-1.75-2.484-2.719-4.813-2.719-2.734 0-4.671 1.579-4.671 4 0 1.922 1.296 3.094 3.312 3.657l1.734.484c1 .266 1.61.594 1.61 1.672 0 1.047-1.016 1.406-1.844 1.406-1.547 0-2.422-.844-2.906-2.203l-2.421 1.11c.875 2.342 2.781 3.452 5.156 3.452zm19.471-13.266v1.89h3.781v11.063h2.266V33.141h3.796v-1.89zM5.485 62.19H1.031v12.953h4.75c3.25 0 4.282-1.938 4.282-3.61 0-1.75-.985-2.874-2.594-3.14 1.562-.422 2.266-1.547 2.266-2.766 0-1.53-.876-3.437-4.25-3.437zm-2.22 1.719h1.97c1.78 0 2.171.984 2.171 1.921 0 .844-.28 1.891-2.171 1.891h-1.97zm0 5.406h2.36c1.5 0 2.14.875 2.14 2.016 0 1.078-.577 2.093-2.265 2.093H3.267zm30.55-4.938V62.19h-8.408v2.187h2.75v8.579h-2.75v2.187h8.408v-2.188h-2.78v-8.578zM54.66 62.19h-5.203v12.953h5.296c3.343 0 4.468-1.984 4.468-3.734 0-1.688-.984-2.797-2.734-3.047 1.766-.407 2.484-1.547 2.484-2.735 0-1.53-.906-3.437-4.312-3.437zm-1.672 2.453h.922c1.156 0 1.406.719 1.406 1.375 0 .64-.203 1.422-1.406 1.422h-.922zm0 4.922h1.094c1.015 0 1.484.656 1.484 1.531 0 .781-.39 1.578-1.484 1.578h-1.094zM74.29 62.19v12.953h8.625v-2.922h-5.111V62.19zm32.75 2.187V62.19h-8.408v2.187h2.75v8.579h-2.75v2.187h8.408v-2.188h-2.78v-8.578zm20.204 11.079c3.25 0 4.844-2.313 4.844-6.142v-1.313c0-3.812-1.594-6.125-4.844-6.125s-4.828 2.314-4.828 6.127v1.313c0 3.827 1.578 6.139 4.828 6.139zm0-1.844c-1.75 0-2.531-1.313-2.531-4.235v-1.421c0-2.922.781-4.235 2.531-4.235s2.532 1.313 2.532 4.235v1.421c0 2.922-.782 4.235-2.532 4.235zM.266 93.13v1.453h4.061v11.5h1.72v-11.5h4.063V93.13zm33.689 0h-2.25v5.453h-4.188V93.13h-2.25v12.953h2.25v-5.719h4.188v5.719h2.25zm24.142 0h-8.078v12.953h8.204v-2.281h-5.329v-3.235h4.89v-2.218h-4.89v-2.938h5.203zm22.396 12.953h3.281l-3.719-7.797 3.36-5.156h-3.266l-3.344 5.593v-5.594H73.93v12.954h2.875v-4.11l1.063-1.687zm0 0" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/themes/fid_bbi/images/headerlogo.png b/themes/fid_bbi/images/headerlogo.png
deleted file mode 100644
index 2fc9d8e16b394318740772458240061a73ddd2f8..0000000000000000000000000000000000000000
Binary files a/themes/fid_bbi/images/headerlogo.png and /dev/null differ
diff --git a/themes/fid_bbi/images/ubl-logo.svg b/themes/fid_bbi/images/ubl-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..10d2c3987315b1ea87863f0fda409649f4d3bca0
--- /dev/null
+++ b/themes/fid_bbi/images/ubl-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 906 295" height="295" width="906"><path fill="#fff" d="M528.123 294.989c-9.228-.529-10.54-17.852-11.195-23.281-.77-6.84-1.662-16.378-2.397-24.498-.787-10.964-1.56-19.048-1.73-30.476-.039-8.93.138-18.447-.053-29.197.48-7.41.222-16.093.34-26.009.484-10.973.32-15.347.976-26.87.704-10.598 1.308-18.524 1.88-29.434 1.386-15.581 2.37-28.188 4.09-42.261 1.15-9.813 1.94-20.406 2.96-29.686.887-8.407 1.508-17.068 3.72-25.355 2.789-8.953 15.179-7.434 19.824-.72 5.117 7.585 2.41 14.344.515 23.253-3.4 15.415-6.055 28.53-8.714 45.286-1.921 12.8-3.2 23.665-5.383 37.305-1.228 10.288-3.527 21.745-4.318 30.748-1.29 8.628-1.357 14.254-1.865 23.218-.996 9.948-1.041 17.282-1.062 27.23.23 5.788.192 21.596 2.751 8.223 2.396-10.848 3.879-20.622 6.126-31.461 2.38-10.142 4.885-20.57 7.78-30.779 3.287-10.16 6.491-18.822 11.201-26.54 5.793-8.327 10.871-13.008 18.881-15.219 8.94-1.97 16.675-.983 23.822 3.794 6.105 4.147 9.452 8.18 11.374 19.434 1.574 17.792-1.347 24.484-2.946 36.622-1.842 10.514-2.583 13.516-5.181 25.19-2.128 8.79-3.168 12.783-5.627 21.403-2.054 6.876-4.5 15.377-6.94 23.553-3.628 10.54-5.506 20.292-8.313 29.253-1.618 7.31-3.012 16.093-3.901 19.29-2.371 8.153-10.242 15.589-18.992 13.626-8.626-2.115-12.47-11.686-15.342-19.368-3.328-8.37-4.588-18.763-3.954-24.901 1.187-7.264 8.717-9.562 13.549-4.978 8.06 7.49 12.59-12.755 13.98-18.377 3.152-11.963 5.756-21.414 8.277-32.279 2.342-11.103 5.045-21.997 7.193-33.343 1.95-8.853 3.551-19.502 4.112-24.374.579-8.076-3.073-17.958-10.341-15.952-4.908 1.885-8.409 6.004-10.865 10.394-4.538 7.292-6.789 15.421-9.428 23.612-2.535 7.225-6.36 20.404-8.802 29.781-3.318 12.69-5.284 19.904-8.12 31.568-2.68 13.28-4.057 25.605-4.268 30.38-.293 4.768-.409 17.644.456 26.976.962 10.068 5.468 25.705-4.07 25.219zM387.624 269.74c-2.638-11.789-2.362-17.291-.555-38.258 1.005-9.748 2.976-18.632 4.543-28.804 2.643-11.73 4.165-20.587 8.013-35.434 2.223-9.955 5.858-22.676 8.888-32.253 3.2-10.818 5.835-17.856 9.498-28.741 3.152-7.605 5.107-17.318 11.71-22.58 6.845-5.357 21.345 4.39 15.606 15.374-3.414 7.025-7.404 15.299-11.049 22.544-3.288 6.317-6.446 12.526-9.34 18.94-3.005 6.36-4.186 9.55-7.433 17.455-2.767 7.526-5.423 13.845-8.196 22.313-3.847 12.707-5.371 15.763-8.263 27.01-2.851 11.412-6.794 29.797-7.375 37.084-.508 9.671-2.534 32.35 10.88 31.306 6.662-1.24 9.66-6.482 13.714-12.217 9.653-14.853 12.378-21.193 19.663-36.29 3.635-8.596 6.137-15.113 9.302-23.269 3.326-9.377 5.807-15.804 9.01-25.1 1.592-5.668 3.987-13.626 5.716-20.117 1.52-5.837 4.097-14.096 5.067-19.697 3.529-12.453 4.215-22.202 6.362-35.504.442-6.328 3.362-14.748 9.232-15.927 9.452-1.29 17.656 4.893 17.875 14.683-1.158 15.344-2.783 16.828-4.595 32.251a744.072 744.072 0 00-2.573 33.227c-.409 11.085-.64 23.562-.233 32.208.91 16.688 1.712 33.924 3.347 50.33 1.03 9.196 5.142 16.38 5.68 23.587.346 10.289-12.898 13.838-20.568 9.283-9.124-7.147-9.507-18.594-10.233-27.868-1.024-12.12-1.19-18.779-1.68-36.398-.166-9.78-.527-20.65-.422-28.863-4.123 6.91-8.159 13.852-11.29 20.485-4.096 7.59-7.328 13.787-11.076 21.422-2.809 5.768-8.1 16.17-11.292 21.804a337.639 337.639 0 01-10.6 17.184c-4.556 6.89-11.298 16.083-21.934 15.342-9.162-1.018-13.208-8.85-15.399-16.512zm250.25 16.404c-6.363-1.257-12.346-10.074-15.252-16.057-2.65-5.731-5.025-14.93-5.958-23.976-1.549-16.579-1.108-28.278-.8-42.237.208-11.046.612-23.142.944-34.085.463-8.614.952-17.202 1.673-28.524.747-11.157 1.645-23.575 2.605-34.442.897-7.84 1.646-13.283 2.827-23.131 1.356-10.28 1.972-15.815 2.86-22.82 1.496-9.728 2.898-19.095 4.352-28.1 1.376-7.229 4.324-22.81 7.247-30.162 2.133-5.565 13.195-.353 17.391 4.433 3.694 4.166 6.113 9.638 4.936 15.12-1.871 8.23-6.191 27.148-7.625 33.148-1.574 6.566-3.857 17.078-5.445 25.152-1.331 7.311-4.371 25.694-5.676 33.513-.836 5.993-2.346 17.637-3.183 24.9a2301.635 2301.635 0 00-2.67 31.345c-.835 10.979-1.026 20.42-1.356 32.92.05 10.668-1 27.178 1.5 36.184 2.864 10.774 8.216 14.248 12.357 20.517 4.021 6.138 5.967 12.195 2.727 19.635-2.125 4.82-7.618 7.724-13.453 6.667zM876.486 151.666c-9.853-2.21-17.144-9.208-19.867-19.07-.838-3.035-.776-9.46.121-12.597 3.238-11.317 12.43-18.765 23.888-19.356 7.634-.393 14.04 2.08 19.59 7.562 1.494 1.475 2.67 2.863 2.613 3.086-.057.222-.935 1.19-1.952 2.15l-1.85 1.745-1.46-1.745c-1.964-2.347-4.192-4.169-6.607-5.402-3.27-1.67-5.182-2.11-9.136-2.1-3.1.008-3.815.116-6.138.925-6.147 2.143-10.997 7.034-13.11 13.223-.93 2.721-1.163 8.209-.466 10.992 1.444 5.772 5.429 10.764 10.794 13.523 4.552 2.342 8.544 2.875 12.993 1.738 6.653-1.702 11.801-6.523 12.981-12.156.647-3.09 1.365-2.808-7.137-2.808h-7.476V126.19h21.148l-.188 3.433c-.215 3.919-1.032 7.458-2.315 10.025-2.82 5.643-8.876 10.247-15.593 11.854-3.046.728-7.986.804-10.833.165zm-710.953-.196c-13.81-2.548-23.408-15.807-21.093-29.136.991-5.704 3.098-9.978 6.855-13.912 5.461-5.715 12.169-8.424 20.036-8.09 4.248.18 7.417 1.041 11.125 3.022 11.782 6.291 16.85 20.484 11.695 32.752-1.819 4.328-6.172 9.453-9.936 11.696-2.629 1.566-6.236 3.013-8.829 3.54-2.546.518-7.4.581-9.853.128zm8.633-5.313c3.883-.785 7.098-2.564 10.141-5.613 4.245-4.252 6.094-8.697 6.094-14.645 0-8.055-4.414-15.01-11.756-18.521-5.449-2.606-11.831-2.505-17.536.279-3.665 1.788-7.283 5.406-9.075 9.073-7.518 15.385 5.564 32.778 22.132 29.427zm511.156-19.663v-25.02h5.493v44.549h13.731v5.492h-19.224v-25.02zm26.753 24.82c-.113-.113-.206-11.374-.206-25.023v-24.817h26.24V106.66H717.667v14.638l9.84.08 9.841.08v5.188l-9.84.08-9.84.08v19.207l10.145.08 10.145.081V151.362l-12.837.08c-7.061.044-12.931-.014-13.045-.127zm37.54.009c-.119-.118-.215-11.382-.215-25.032v-24.817h5.8l-.077 24.944-.078 24.945-2.609.087c-1.434.048-2.704-.009-2.822-.127zm20.127-.011c-.112-.112-.204-11.371-.204-25.02v-24.818l6.637.005c7.202.006 9.556.316 12.45 1.641 5.922 2.711 8.855 10.402 6.538 17.138-2.214 6.434-7.224 9.288-16.305 9.288h-3.522v21.969h-2.696c-1.482 0-2.786-.092-2.898-.203zm12.426-27.27c3.694-.533 5.95-1.895 7.308-4.413.55-1.018.659-1.726.659-4.272 0-3.285-.468-4.703-2.034-6.164-1.734-1.617-5.374-2.514-10.248-2.526l-2.517-.006v17.698l2.365-.006c1.3-.003 3.31-.143 4.467-.31zm14.222 27.211c0-.147 6.044-10.206 13.43-22.353l13.431-22.086-11.752-.08-11.753-.08v-5.18h33.004l-.603.992-13.336 21.893c-7.003 11.495-12.8 21.073-12.88 21.282-.117.302 2.61.382 13.018.382h13.165l-.088 2.67-.089 2.67-17.774.078c-10.011.045-17.773-.037-17.773-.188zm44.244-24.758v-25.021h5.492v50.041h-5.492v-25.02zM0 126.032v-24.921l6.942.129c7.913.147 9.54.485 12.796 2.66 3.508 2.342 5.087 5.617 5.084 10.542-.003 3.933-.732 5.959-2.98 8.28l-1.573 1.623 1.327.453c3.124 1.064 6.22 4.481 7.307 8.067.747 2.461.676 6.688-.151 8.97-1.394 3.843-4.386 6.516-9.023 8.058-2.427.807-2.703.83-11.11.945L0 150.954v-24.922zm15.56 19.36c3.637-.59 6.02-2.102 7.426-4.71.534-.99.657-1.735.657-3.966 0-3.959-.972-5.608-4.28-7.262-2.155-1.078-4.476-1.434-9.35-1.434H5.797V145.717l3.89-.002c2.14 0 4.783-.146 5.873-.323zm-1.629-23.014c2.135-.634 3.485-1.627 4.377-3.219.679-1.211.763-1.714.763-4.565 0-2.85-.084-3.354-.763-4.565-1.45-2.587-3.283-3.337-8.773-3.586l-3.738-.17v16.56H9.1c2.036 0 3.887-.174 4.832-.455zm25.736 3.659v-24.869H45.464V150.905h-5.798v-24.868zm19.528 0v-24.869l6.027.005c6.729.006 9.073.351 12.14 1.786 2.515 1.177 4.194 2.748 5.298 4.957 2.564 5.133 1.857 11.476-1.665 14.933l-1.343 1.318 1.896.91c5.54 2.66 8.42 9.286 6.777 15.595-1.024 3.933-3.163 6.458-7.008 8.275-3.477 1.643-5.802 1.957-14.48 1.957h-7.642v-24.868zm17.591 18.948c2.513-.79 4.382-2.23 5.387-4.15.82-1.566.87-1.866.76-4.494-.106-2.531-.21-2.947-1.029-4.119-2.179-3.116-5.402-4.202-12.47-4.202h-4.441v17.776l5.11-.159c3.466-.107 5.618-.317 6.683-.652zm-3.431-22.669c2.224-.624 4.118-2.34 4.688-4.248.459-1.535.487-5.347.052-6.915-.45-1.621-1.843-3.078-3.71-3.882-1.28-.55-2.37-.718-5.495-.845l-3.897-.158V122.833h3.26c2.135 0 3.896-.179 5.102-.517zm26.117 3.72v-24.868h5.798v44.538l6.789.082 6.79.082.088 2.517.088 2.518H99.472v-24.868zm28.072 0v-24.868h5.798V150.905h-5.798v-24.868zm82.996 2.594v-22.274h-11.9v-5.188h29.902v5.188h-12.205v44.549h-5.798V128.63zm25.02-2.593v-24.869h5.798v20.14h25.326v-20.14h5.798V150.905h-5.798v-24.411h-25.326v24.411h-5.798v-24.868zm50.347 0v-24.869h25.936v5.188h-20.444v14.646h19.834V126.189h-19.834v19.528h20.444v5.188h-25.936v-24.868zm36.616 0v-24.869h5.492v21.204l10.605-10.602 10.605-10.602 3.812.008 3.813.008-11.737 11.532-11.736 11.532 11.965 13.166c6.581 7.242 11.965 13.24 11.965 13.329 0 .089-1.697.161-3.773.161h-3.772l-9.73-10.889c-5.35-5.989-9.89-11.104-10.085-11.366-.316-.423-.447-.393-1.145.263l-.787.74v21.252h-5.492v-24.868zm-187.43-83.095c-5.498-14.378-9.995-26.245-9.993-26.37.002-.127 1.343-.23 2.98-.23h2.977l7.006 18.76c3.854 10.319 7.099 18.66 7.212 18.537.113-.123 3.121-8.05 6.685-17.616 3.564-9.566 6.683-17.907 6.932-18.536l.452-1.145h3.051c2.78 0 3.033.048 2.846.534l-10 26.165c-5.387 14.097-9.875 25.724-9.973 25.837-.098.113-4.677-11.558-10.175-25.936zm-60.489 5.094L55.381 27.89l-.078 19.094-.08 19.095h-5.487l.015-26.013.014-26.012 1.74 1.873c.957 1.03 9.635 10.139 19.285 20.24l17.545 18.368.079-19.097.078-19.096H94.285v25.936c0 14.265-.103 25.93-.229 25.92-.125-.008-8.879-9.081-19.452-20.162zm-61.31 18.487c-4.967-1.25-9.619-4.798-11.464-8.742C.066 54.011.011 53.298.005 33.964L0 16.342h5.775l.088 18.544.087 18.543c.005.728 1.449 3.785 3.071 4.997 1.63 1.432 4.448 2.727 6.813 3.133 4.075.699 8.472-.81 11.267-3.868 2.738-2.996 2.622-2.024 2.732-22.965l.097-18.384h5.805l-.108 18.384c-.097 16.361-.167 18.584-.64 20.198-.76 2.6-2.027 4.628-4.228 6.773-2.335 2.273-3.686 3.132-6.663 4.232-2.846 1.052-7.884 1.33-10.802.594zm246.147 0c-3.697-.995-7.647-4.014-9.352-7.148-1.064-1.954-2.09-4.946-1.793-5.225.444-.416 5.034-1.547 5.25-1.294.121.14.39.872.597 1.628.45 1.636 2.125 4.206 3.315 5.086 2.217 1.638 3.482 2.06 6.174 2.06 3.306 0 5.355-.903 7.585-3.342 1.948-2.132 2.616-4.034 2.413-6.874-.268-3.746-1.977-5.744-6.946-8.12-10.567-5.052-10.432-4.976-12.531-7.08-2.528-2.532-3.363-4.503-3.363-7.943 0-4.988 2.39-8.961 6.707-11.15 5.634-2.854 12.393-2.103 16.81 1.868 1.435 1.29 3.56 3.985 3.315 4.202-.059.051-1.094.722-2.301 1.492l-2.196 1.398-.646-1.047c-.356-.575-1.276-1.6-2.045-2.277-4.973-4.377-13.15-1.624-14.02 4.722-.432 3.155 1.681 5.73 6.561 7.994 9.488 4.402 10.483 4.967 12.738 7.227 1.62 1.625 2.326 2.603 2.804 3.885 3.078 8.269-1.994 17.654-10.778 19.942-2.206.574-6.158.573-8.298-.003zm161.486-.099c-5.118-1.47-9.086-5.442-10.627-10.637-.26-.877-.379-1.652-.263-1.72.621-.371 4.99-1.42 5.247-1.26.167.103.303.42.304.703 0 .964 1.758 4.237 2.875 5.354.611.612 1.828 1.484 2.703 1.939 1.365.709 1.96.826 4.185.827 2.205 0 2.853-.126 4.322-.837 3.536-1.712 5.5-4.598 5.698-8.374.215-4.085-1.668-6.59-6.816-9.063-1.51-.726-4.484-2.154-6.607-3.172-4.573-2.192-7.064-4.268-8.409-7.005-.774-1.577-.85-2.034-.85-5.09 0-3.002.086-3.54.817-5.1 3.12-6.657 12.193-9.548 19.346-6.164 2.923 1.383 7.225 5.943 6.196 6.569-.233.142-1.272.807-2.31 1.48l-1.885 1.22-.634-1.025c-4.282-6.928-15.026-5.32-16.085 2.41-.422 3.08 1.677 5.716 6.243 7.84 9.777 4.545 10.807 5.128 13.053 7.38 1.672 1.676 2.325 2.592 2.852 4.004 3.047 8.148-2.085 17.548-10.824 19.824-2.333.607-6.223.56-8.53-.103zM109.847 41.21V16.342H115.644v49.736h-5.798V41.21zm64.077 0V16.342h26.266l-.089 2.518-.088 2.517-10.146.08-10.145.08v14.639h19.833V41.363h-19.833v19.52l10.145.08 10.146.08.088 2.518.09 2.518h-26.267V41.21zm38.752-.029V16.283l6.789.136c7.185.144 8.73.387 12.03 1.894 5.935 2.71 8.36 10.356 5.598 17.644-.818 2.16-3.3 4.943-5.453 6.114-.841.458-2.481 1.07-3.646 1.359l-2.117.527 7.722 10.832c4.247 5.957 7.73 10.94 7.74 11.07.01.132-1.517.2-3.395.153l-3.414-.086-7.362-10.68c-5.418-7.86-7.537-10.705-8.028-10.777l-.667-.097v21.707H212.676V41.18zm12.365-2.286c5.302-.98 7.722-4.056 7.402-9.406-.163-2.74-.91-4.41-2.595-5.803-1.62-1.34-3.648-1.88-7.79-2.073l-3.585-.167v17.781h2.385c1.312 0 3.194-.15 4.183-.332zM291.4 41.21V16.342h5.798V66.08h-5.798V41.21zm25.326 2.594V21.53h-11.9v-5.188h29.903v5.188h-12.205v44.549h-5.798V43.804zm17.087 22.072c0-.436 22.683-51.67 22.877-51.67.159 0 21.27 48.928 22.157 51.35.184.504-.034.538-2.917.457l-3.116-.087-1.656-3.967c-.911-2.181-2.218-5.305-2.905-6.941l-1.247-2.975H345.802l-2.975 7.017-2.975 7.018h-3.02c-1.66 0-3.02-.09-3.02-.202zm30.821-19.25c.004-.288-8.03-19.613-8.115-19.52-.05.055-7.719 18.005-8.274 19.368-.122.3 1.619.381 8.115.381 4.55 0 8.273-.103 8.274-.229zm24.103-2.822V21.53h-11.9v-5.188h29.903v5.188h-12.206v44.549h-5.798V43.804zm-43.857-22.422c-1.092-.474-2.215-2.067-2.217-3.142-.005-2.82 2.94-4.59 5.466-3.284.929.48 1.857 2.112 1.855 3.263-.002 1.124-1.13 2.694-2.284 3.176-1.28.535-1.563.534-2.82-.013zm20.794.023c-1.613-.709-2.345-1.93-2.183-3.64.19-2 1.174-2.983 3.173-3.173 1.747-.166 2.954.586 3.663 2.282 1.166 2.79-1.875 5.751-4.653 4.53z"/></svg>
diff --git a/themes/fid_bbi/images/vufind-logo.svg b/themes/fid_bbi/images/vufind-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b1cdb4d1ae8299222110ef4a49207583b686c27b
--- /dev/null
+++ b/themes/fid_bbi/images/vufind-logo.svg
@@ -0,0 +1 @@
+<svg width="137" height="41" viewBox="0 0 137 41" xmlns="http://www.w3.org/2000/svg"><g fill="#FFF" fill-rule="nonzero"><path d="M111.6 29c-4 0-7.3-2.8-7.3-6.2 0-2.1 1.2-3.9 3-5-2.8.9-4.8 3.1-4.8 5.8 0 3.4 3.3 6.2 7.3 6.2 1.6 0 3.1-.4 4.3-1.2-.8.3-1.6.4-2.5.4zM11.7 34.7L.3 11.9h5l8.3 16.8 8.3-16.8h5L15.6 34.7zM38.6 35.1c-1.4 0-2.8-.2-4-.7-1.2-.5-2.3-1.1-3.3-1.9-.9-.8-1.7-1.8-2.3-2.9-.6-1.1-.9-2.3-.9-3.6V11.8h4.5v14.1c0 .7.1 1.3.4 1.9.3.6.7 1.1 1.2 1.6s1.2.8 1.9 1.1c.7.3 1.5.4 2.4.4.8 0 1.6-.1 2.3-.4.7-.3 1.3-.6 1.9-1.1.5-.4.9-1 1.2-1.6.3-.6.4-1.2.4-1.9V11.8h4.5v14.1c0 1.3-.3 2.5-.9 3.6-.6 1.1-1.3 2.1-2.3 2.9-.9.8-2 1.5-3.3 1.9-.9.6-2.3.8-3.7.8zM51.3 34.7V7.1c0-.9.2-1.8.6-2.6.4-.8.9-1.4 1.6-2 .7-.6 1.4-1 2.3-1.4.9-.3 1.8-.5 2.8-.5 1 0 1.9.2 2.8.5.9.3 1.7.8 2.3 1.4.6.6 1.2 1.3 1.6 2 .4.8.6 1.7.6 2.6v1h-4.5v-1c0-.6-.2-1.1-.8-1.5-.6-.5-1.2-.7-2-.7s-1.4.2-2 .7c-.5.4-.8.9-.8 1.5V19h9v4.2h-9v11.5h-4.5zM67.3 11.9h4.5v22.8h-4.5zM90.3 34.7V20.6c0-.7-.1-1.3-.4-1.9-.3-.6-.7-1.1-1.2-1.6s-1.2-.8-1.9-1.1c-.7-.3-1.5-.4-2.4-.4-.8 0-1.6.1-2.3.4-.7.3-1.3.6-1.9 1.1-.5.5-.9 1-1.2 1.6-.3.6-.4 1.2-.4 1.9v14.1h-4.5V20.6c0-1.3.3-2.5.9-3.6.6-1.1 1.3-2.1 2.3-2.9.9-.8 2-1.5 3.3-1.9 1.3-.5 2.6-.7 4-.7s2.8.2 4 .7c1.2.5 2.3 1.1 3.3 1.9.9.8 1.7 1.8 2.3 2.9.6 1.1.9 2.3.9 3.6v14.1h-4.8z"/><path d="M109.7 35.1c-1.8 0-3.5-.3-5-.9-1.6-.6-3-1.4-4.1-2.4-1.2-1-2.1-2.2-2.8-3.6-.7-1.4-1.1-2.9-1.1-4.5s.4-3.1 1-4.5c.7-1.4 1.6-2.6 2.8-3.7 1.2-1 2.6-1.8 4.1-2.4 1.6-.6 3.3-.9 5-.9 2.1 0 4.1.4 5.9 1.2 1 .5 1.9 1 2.7 1.6V2.6h4.4v21c0 1.6-.4 3.1-1.1 4.5-.7 1.4-1.6 2.6-2.8 3.6-1.2 1-2.6 1.8-4.1 2.4-1.4.7-3.1 1-4.9 1zm0-18.8c-1.2 0-2.3.2-3.4.6-1.1.4-2 .9-2.8 1.6-.8.7-1.4 1.4-1.8 2.3-.4.9-.7 1.8-.7 2.8 0 1 .2 1.9.7 2.8.4.9 1.1 1.7 1.8 2.4.8.7 1.7 1.2 2.8 1.6 1.1.4 2.2.6 3.4.6 1.2 0 2.3-.2 3.4-.6 1.1-.4 2-.9 2.8-1.6.8-.7 1.4-1.5 1.8-2.4.4-.9.7-1.8.7-2.8 0-1-.2-1.9-.7-2.8-.4-.9-1.1-1.7-1.8-2.3-.8-.7-1.7-1.2-2.8-1.6-1.1-.4-2.2-.6-3.4-.6zM122 30.3l-2 2.9 14.6 7.4 2.1-3zM67.4 2.6h4.5v5.5h-4.5z"/></g></svg>
\ No newline at end of file
diff --git a/themes/fid_bbi/languages/de.ini b/themes/fid_bbi/languages/de.ini
index 9b178d2f90e3cb9fa6ec35a6f2fe8bc08ca0de22..f7fb453419ca1b983f86968309d93aca6d36d157 100644
--- a/themes/fid_bbi/languages/de.ini
+++ b/themes/fid_bbi/languages/de.ini
@@ -1 +1,20 @@
+BBI Blog = BBI-Blog
+Close functions & filters = Funktionen & Filter schließen
+FAQs = Häufige Fragen
+Find = Suchen
+For Subject Specialists = Für Fachreferate
+New Publications = Neuerscheinungen
+Open navigation = Navigation öffnen
+Open search = Suche öffnen
+Recent Blog Posts = Neueste Blog-Einträge
+Scroll to top = Nach oben scrollen
+Team = Team
 This field is required = Pflichtfeld
+
+home_about_1 = <p class="-columns">Der Fachinformationsdienst Buch-, Bibliotheks- und Informations­wissen­schaft (FID BBI) stellt Spezial­literatur und forschungs­relevante Informa­tionen für Forschende der drei Diszi­plinen zur Verfügung. Das Herz­stück bildet das umfangreiche Recherche­werkzeug in dem Forschende, Lehrende und Studie­rende in über 3 Millionen Daten­sätzen gezielt recher­chieren können. Der Daten­pool speist sich aus über 30 Daten­quellen, die regel­mäßig aktuali­siert und ergänzt werden.</p>
+home_about_2 = <h2>Anregungen und Feedback</h2><p>Der FID BBI richtet sich an den Bedarfen der Forschenden aus. Vermissen Sie eine Datenquelle, können Sie einen bestimmten Titel nicht finden oder suchen Sie ausführlichere Informationen zum FID BBI, <a href="%%feedback_url%%">kontaktieren Sie uns</a> oder <a href="%%blog_url%%">besuchen Sie unser Blog</a>.</p>
+home_about_3 = <h2>Bereitstellung von Spezialliteratur</h2><p>Für Forschende der Fächer Buch-, Bibliotheks- und Informationswissenschaft lizenziert der FID BBI fachspezifische Datenbanken, auf die über das Nachweisportal zugegriffen werden kann. Außerdem können Forschende Spezialliteratur direkt über den FID BBI beziehen.</p><p>Haben Sie die von Ihnen gesuchte Publikation nicht gefunden, <a href="%%feedback_url%%">kontaktieren Sie uns</a>. Wir kümmern uns darum.</p>
+home_step_1 = <p>Suchen Sie in über 3 Millionen Datensätzen.</p>
+home_step_2 = <p>Greifen Sie auf Spezial­literatur und forschungs­relevante Informationen für die Buch-, Bibliotheks- und Informations­wissenschaft zu.</p>
+home_step_3 = <p>Registrieren Sie sich kostenlos für die Nutzung weiterer Funktionen.</p>
+home_tagline = Das Nachweisportal für die <br>Buch-, Biblio­theks- und Informa­tions­wissen­schaft
diff --git a/themes/fid_bbi/languages/en.ini b/themes/fid_bbi/languages/en.ini
new file mode 100644
index 0000000000000000000000000000000000000000..dbd40b333d7574df0931e789b283890116cbb058
--- /dev/null
+++ b/themes/fid_bbi/languages/en.ini
@@ -0,0 +1,20 @@
+BBI Blog = BBI Blog
+Close functions & filters = Close functions & filters
+FAQs = FAQ
+Find = Search
+For Subject Specialists = For Subject Specialists
+New Publications = New Publications
+Open navigation = Open navigation
+Open search = Open search
+Recent Blog Posts = Recent Blog Posts
+Scroll to top = Scroll to top
+Team = Team
+This field is required = This field is required
+
+home_about_1 = <p class="-columns">TODO: Translate. Der Fachinformationsdienst Buch-, Bibliotheks- und Informations­wissen­schaft (FID BBI) stellt Spezial­literatur und forschungs­relevante Informa­tionen für Forschende der drei Diszi­plinen zur Verfügung. Das Herz­stück bildet das umfangreiche Recherche­werkzeug in dem Forschende, Lehrende und Studie­rende in über 3 Millionen Daten­sätzen gezielt recher­chieren können. Der Daten­pool speist sich aus über 30 Daten­quellen, die regel­mäßig aktuali­siert und ergänzt werden.</p>
+home_about_2 = <h2>TODO: Translate. Anregungen und Feedback</h2><p>Der FID BBI richtet sich an den Bedarfen der Forschenden aus. Vermissen Sie eine Datenquelle, können Sie einen bestimmten Titel nicht finden oder suchen Sie ausführlichere Informationen zum FID BBI, <a href="%%feedback_url%%">kontaktieren Sie uns</a> oder <a href="%%blog_url%%">besuchen Sie unser Blog</a>.</p>
+home_about_3 = <h2>TODO: Translate. Bereitstellung von Spezialliteratur</h2><p>Für Forschende der Fächer Buch-, Bibliotheks- und Informationswissenschaft lizenziert der FID BBI fachspezifische Datenbanken, auf die über das Nachweisportal zugegriffen werden kann. Außerdem können Forschende Spezialliteratur direkt über den FID BBI beziehen.</p><p>Haben Sie die von Ihnen gesuchte Publikation nicht gefunden, <a href="%%feedback_url%%">kontaktieren Sie uns</a>. Wir kümmern uns darum.</p>
+home_step_1 = <p>TODO: Translate. Suchen Sie in über 3 Millionen Datensätzen.</p>
+home_step_2 = <p>TODO: Translate. Greifen Sie auf Spezial­literatur und forschungs­relevante Informationen für die Buch-, Bibliotheks- und Informations­wissenschaft zu.</p>
+home_step_3 = <p>TODO: Translate. Registrieren Sie sich kostenlos für die Nutzung weiterer Funktionen.</p>
+home_tagline = TODO: Translate. Das Nachweisportal für die <br>Buch-, Biblio­theks- und Informa­tions­wissen­schaft
diff --git a/themes/fid_bbi/scss/_customMixins.scss b/themes/fid_bbi/scss/_customMixins.scss
deleted file mode 100644
index ffbfc2dc4c1dc2fd241380c0a2b04f76fa30b193..0000000000000000000000000000000000000000
--- a/themes/fid_bbi/scss/_customMixins.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// use to show items to screen readers only // FIXME: Remove, when #15438 has been merged
-@mixin sr-only {
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  height: auto;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: auto;
-}
\ No newline at end of file
diff --git a/themes/fid_bbi/scss/_customVariables.scss b/themes/fid_bbi/scss/_customVariables.scss
deleted file mode 100644
index b2d8e24753a696af2bcddc06b68428834ac7c46b..0000000000000000000000000000000000000000
--- a/themes/fid_bbi/scss/_customVariables.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-// COLORS
-$alert-warning-bg: #d3d3d3 !default;
-$brand-primary: #035151 !default;
-$brand-primary-light: #b3caca !default;
-$brand-secondary: #8a151a !default;
-$brand-secondary-light: #BF1D24 !default;
-$brand-danger: #f04124 !default;
-$brand-info: #008cba !default;
-$brand-success: #43ac6a !default;
-$brand-warning: #f08a24 !default;
-
-//// FONTS
-// #17223 restore original font-size; reset finc master-v5 16px
-$font-size-base: 14px !default;
-
-$snow: $brand-primary-light !default;
-
-$in-list-or-bookbag: $brand-secondary-light !default
-
-$searchboxWidth: 310px;
\ No newline at end of file
diff --git a/themes/fid_bbi/scss/base/common.scss b/themes/fid_bbi/scss/base/common.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d9f1fc91121f96c3962ffd005a349adbdf6f036e
--- /dev/null
+++ b/themes/fid_bbi/scss/base/common.scss
@@ -0,0 +1,270 @@
+html {
+  color: $text-color;
+  overflow: auto;
+  touch-action: manipulation; // Get rid of touch delay on Chrome mobile (meta `device-width` does not suffice)
+
+  @media #{$bp5} {
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+}
+
+body {
+  @include sticky-footer(root);
+  font: #{$font-size}/#{$line-height} text-font, sans-serif;
+  min-height: 100%;
+  min-width: 320px; // There aren't any smaller screens around for some years now, but just to be sure.
+}
+
+// Tags below are sorted alphabetically
+
+a {
+  color: $link-color;
+  font-weight: 500;
+  text-decoration: none;
+
+  @include hover {
+    box-shadow: 0 2px;
+    text-decoration: none;
+  }
+}
+
+address {
+  @include paragraph;
+}
+
+audio {
+  height: auto;
+  max-width: 100%;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+blockquote {
+  @include heading(3);
+  color: $text-muted-color;
+  margin: g(2) 0;
+  padding: 0 g();
+  text-align: center;
+
+  footer {
+    font: #{$font-size-small}/#{$line-height} text-font, sans-serif;
+    font-weight: 500;
+    margin-top: g(.5);
+    text-align: right;
+  }
+}
+
+cite {
+  color: $text-muted-color;
+  font-style: normal;
+}
+
+code {
+  background: mix($text-muted-color, #fff, 10);
+  font-size: $font-size-small;
+  padding: 0 .2em;
+}
+
+dd {
+  margin: 0;
+  margin: 0 0 g(.5);
+  overflow: visible;
+
+  @media #{$bp3} {
+    overflow: hidden;
+  }
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+dl {
+  @include clearfix;
+  @include paragraph;
+}
+
+dt {
+  clear: left;
+  float: none;
+  font-size: $font-size-small;
+  font-weight: bold;
+  margin: 0;
+  padding-right: 0;
+  width: 100%;
+
+  @media #{$bp3} {
+    float: left;
+    margin: 0 0 g(.5);
+    padding-right: g(.5);
+    width: g(8);
+  }
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+
+  dl.-narrow & {
+    width: g(6);
+  }
+}
+
+figcaption {
+  color: $text-muted-color;
+  font-size: $font-size-small;
+}
+
+figure {
+  @include paragraph;
+  max-width: 100%;
+}
+
+h1 {
+  @include heading(1);
+}
+
+h2 {
+  @include heading(2);
+}
+
+h3 {
+  @include heading(3);
+}
+
+h4,
+h5,
+h6 {
+  @include paragraph;
+  color: $text-muted-color;
+  font-size: $font-size;
+  font-weight: bold;
+  margin: g() 0;
+
+  & + &,
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+hr {
+  @include paragraph;
+  border: 0;
+  border-top: 2px solid $text-color;
+  clear: both;
+  margin-top: -2px;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+}
+
+mark {
+  background: none;
+  color: $color-a;
+}
+
+ol {
+  @include paragraph;
+  counter-reset: li;
+  list-style: none;
+  padding-left: g();
+
+  li {
+    counter-increment: li;
+
+    &::before {
+      color: $color-a;
+      content: '.' counter(li);
+      direction: rtl;
+      display: inline-block;
+      font-weight: bold;
+      margin-left: g(-1.25);
+      position: absolute;
+      text-align: right;
+      width: g();
+    }
+  }
+}
+
+p {
+  @include paragraph;
+
+  &.-center {
+    justify-content: center;
+    text-align: center;
+  }
+
+  &.-columns {
+    @media #{$bp3} {
+      column-gap: g(2);
+      columns: 2;
+    }
+  }
+
+  &.-right {
+    justify-content: flex-end;
+    text-align: right;
+  }
+
+  address & {
+    margin: 0;
+  }
+}
+
+pre {
+  @include paragraph;
+  border: 2px solid;
+  font-size: $font-size-small;
+  padding: g(.5) - 2px;
+}
+
+table {
+  margin: 0 auto g();
+  min-width: 100%;
+}
+
+th {
+  color: $text-muted-color;
+  font-weight: bold;
+}
+
+td,
+th {
+  padding: g(.25) 0;
+
+  + td,
+  + th {
+    padding-left: g(.5);
+  }
+}
+
+tr {
+  box-shadow: 0 -2px #000 inset;
+}
+
+ul {
+  @include paragraph;
+  list-style: none;
+  padding-left: g();
+
+  li {
+    &::before {
+      background: $color-a;
+      content: '';
+      height: g(.25);
+      margin: round($line-height / 2 - g(.25) / 2) 0 0 g(-.75);
+      position: absolute;
+      width: g(.25);
+    }
+  }
+}
+
+video {
+  height: auto;
+  max-width: 100%;
+}
diff --git a/themes/fid_bbi/scss/base/form.scss b/themes/fid_bbi/scss/base/form.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f9815a752561f943bb3eb70f787b36f7cdf904f1
--- /dev/null
+++ b/themes/fid_bbi/scss/base/form.scss
@@ -0,0 +1,174 @@
+::placeholder {
+  font-style: normal;
+  font-weight: 500;
+  opacity: .5;
+}
+
+button,
+[type=submit] {
+  @include button;
+
+  &.-icon {
+    @include button-icon-bg(big);
+  }
+
+  &.-icon-only {
+    padding: g(.5) - 2px;
+  }
+
+  &.-small {
+    @include button-small;
+
+    &.-icon {
+      @include button-icon-bg(small);
+    }
+
+    &.-icon-only {
+      padding: g(.25) - 2px;
+    }
+  }
+}
+
+fieldset {
+  border: 2px solid;
+  margin-bottom: g();
+  padding: g() - 2px;
+}
+
+form {
+  @include paragraph;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+label {
+  color: $text-color;
+  font-weight: 500;
+  margin: 0;
+  user-select: none;
+
+  &[data-required] {
+    &::after {
+      color: $color-b;
+      content: '*';
+      margin-left: .2em;
+    }
+  }
+}
+
+legend {
+  @extend h2;
+  float: left;
+}
+
+textarea {
+  min-height: g(4.5);
+}
+
+[type=email],
+[type=file],
+[type=number],
+[type=password],
+[type=search],
+[type=tel],
+[type=text],
+[type=url],
+textarea {
+  appearance: none; // iOS fix
+  background-color: mix(#000, #fff, 5);
+  border: 2px solid;
+  box-shadow: none;
+  font-weight: 500;
+  max-width: 100%;
+  min-width: 0; // Firefox fix
+  padding: g(.5) - 2px;
+  transition: box-shadow ($td / 2);
+
+  @include hover {
+    background-color: #fff;
+    outline: 0;
+  }
+
+  label + & {
+    margin-left: g(.5);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 g(.25) $shade;
+  }
+}
+
+%checkbox-radio {
+  opacity: 0;
+  position: absolute;
+
+  + label {
+    cursor: pointer;
+    display: inline-block;
+    padding-left: g(1.5);
+
+    &::before {
+      background: #fff center center no-repeat;
+      border: 2px solid;
+      content: '';
+      display: inline-block;
+      height: g();
+      margin: 0 (g(.5) - 2px * 2) 0 g(-1.5);
+      vertical-align: top;
+      width: g();
+    }
+
+    @include hover {
+      &::before {
+        background-color: $shade-weak;
+      }
+    }
+  }
+}
+
+[type=checkbox] {
+  @extend %checkbox-radio;
+
+  &:checked + label::before {
+    // Checkmark
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' height='28' width='28'%3E%3Cpath d='M6 13 l6 6 10-10' fill='none' stroke-width='2' stroke='%23#{str-slice(inspect($link-color), 2)}'/%3E%3C/svg%3E");
+  }
+}
+
+[type=radio] {
+  @extend %checkbox-radio;
+
+  + label::before { /* stylelint-disable-line */
+    border-radius: 50%;
+  }
+
+  &:checked + label::before {
+    // Dot
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' height='28' width='28'%3E%3Ccircle cx='14' cy='14' r='7' stroke='none' fill='%23#{str-slice(inspect($link-color), 2)}'/%3E%3C/svg%3E");
+  }
+}
+
+select {
+  @extend [type=text];
+  // Small chevron down
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' height='28' width='28'%3E%3Cpath d='M9 12l5 5 5-5' fill='none' stroke-width='2' stroke='%23#{str-slice(inspect($text-color), 2)}'/%3E%3C/svg%3E");
+  background-position: 3px center;
+  background-repeat: no-repeat;
+  border-radius: 0; // Safari fix
+  padding-left: g();
+
+  @include hover {
+    background-color: #fff;
+  }
+
+  &.-inline {
+    height: g(1.5);
+    padding: g(.25) g(.25) g(.25) g();
+  }
+
+  label + & {
+    margin-left: g(.5);
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/advanced-search.scss b/themes/fid_bbi/scss/blocks/advanced-search.scss
new file mode 100644
index 0000000000000000000000000000000000000000..02f1d457155fb351558df63b5c7f704656b9786d
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/advanced-search.scss
@@ -0,0 +1,116 @@
+.advanced-search {
+  width: 100%;
+}
+
+.advanced-search_actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: g(-.5);
+  margin-top: g(-.75);
+
+  > * {
+    margin: g(.5);
+  }
+
+  > button {
+    width: 100%;
+
+    @media #{$bp2} {
+      width: auto;
+    }
+  }
+}
+
+.advanced-search_conditions {
+  padding: 0;
+}
+
+.advanced-search_condition {
+  display: flex;
+  flex-wrap: wrap;
+  margin: g(-.25) g(-.25) g(-.25 + 1);
+
+  &::before {
+    content: none;
+  }
+
+  > button,
+  label {
+    align-items: center;
+    margin: g(.25);
+    max-width: 100%;
+  }
+
+  label,
+  input,
+  select {
+    width: 100%;
+
+    @media #{$bp3} {
+      width: auto;
+    }
+  }
+
+  > label {
+    width: calc(100% - #{g(3)});
+
+    @media #{$bp3} {
+      width: auto;
+    }
+  }
+}
+
+.advanced-search_options {
+  border: 0;
+  box-shadow: none;
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+
+  &.-year {
+    [type=number] {
+      margin-left: g(.5);
+      max-width: 5em;
+      min-width: 5em;
+    }
+  }
+}
+
+.advanced-search_more {
+  @include button-icon-bg(big);
+
+  .icon {
+    color: #fff;
+  }
+}
+
+.advanced-search_remove {
+  align-self: flex-end;
+  order: -1;
+  padding: g(.5) - 2px;
+
+  @media #{$bp3} {
+    order: 0;
+  }
+}
+
+.advanced-search_submit {
+  @include button-icon-bg(big);
+}
+
+.advanced-search_term {
+  display: flex;
+  flex: 1;
+
+  [data-type=year] & {
+    flex: 0;
+  }
+
+  input,
+  select { /* stylelint-disable-line */
+    flex: 1;
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/alert.scss b/themes/fid_bbi/scss/blocks/alert.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e6cad94d2877835ca98aea2fc751dd641ca1c6d0
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/alert.scss
@@ -0,0 +1,33 @@
+.alert {
+  @include button-icon-bg;
+  background: $shade-weak;
+  font-weight: 500;
+  margin: 0 0 g();
+  padding: g(.5) g();
+  padding-left: g(2.75);
+  position: relative;
+
+  &::before {
+    width: g(2.25);
+  }
+
+  &.-success {
+    color: $text-muted-color;
+  }
+
+  &.-info {
+    color: $text-muted-color;
+  }
+
+  &.-warning {
+    color: $text-color;
+  }
+
+  &.-error {
+    color: $text-color;
+  }
+
+  > .icon {
+    margin-left: g(-2.25);
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/badge.scss b/themes/fid_bbi/scss/blocks/badge.scss
new file mode 100644
index 0000000000000000000000000000000000000000..37635a1dbed7537884b4e0efd80f7f0568dc666a
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/badge.scss
@@ -0,0 +1,8 @@
+.badge {
+  background: $text-muted-color;
+  color: #fff;
+  display: inline-block;
+  margin: 0 g(-.5) 0 auto;
+  padding: 0 g(.25);
+  text-align: center;
+}
diff --git a/themes/fid_bbi/scss/blocks/border.scss b/themes/fid_bbi/scss/blocks/border.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8892cc8ad7127ca8e634d2d5afd034825415ea1f
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/border.scss
@@ -0,0 +1,4 @@
+.border {
+  border: 2px solid $text-color;
+  padding: g() - 2px;
+}
diff --git a/themes/fid_bbi/scss/blocks/box.scss b/themes/fid_bbi/scss/blocks/box.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ac64830e3e765694922aad04f387c233416d6466
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/box.scss
@@ -0,0 +1,112 @@
+.box {
+  $clip-path-a: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - #{g(1.25)}),
+    61.8% 100%,
+    0 calc(100% - #{g(1.25)})
+  );
+  $clip-path-b: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - #{g(1.25)}),
+    38.2% 100%,
+    0 calc(100% - #{g(1.25)})
+  );
+  clip-path: $clip-path-a;
+  color: #fff;
+  flex: 1;
+  font-weight: 500;
+  margin: g() g(-1) g(2);
+  padding: g(1.5) g() g(1.5 + 1);
+  position: relative;
+
+  @media #{$bp5} {
+    clip-path: none;
+    padding-bottom: g(1.5);
+  }
+
+  &::after {
+    background: linear-gradient((90deg + $skew), $color-a, $color-c);
+    content: '';
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 110vw;
+    z-index: -1;
+
+    @media #{$bp5} {
+      background: linear-gradient(90deg, $color-a, $color-c);
+      transform: skew(-$skew);
+      transform-origin: top left;
+    }
+  }
+
+  h2,
+  h3 {
+    color: inherit;
+  }
+
+  a {
+    color: inherit;
+    font-weight: bold;
+  }
+
+  &.-left {
+    clip-path: $clip-path-b;
+
+    @media #{$bp5} {
+      clip-path: none;
+    }
+
+    &::after {
+      background: linear-gradient(90deg, $color-c, $color-a);
+      left: auto;
+      right: 0;
+      transform-origin: bottom right;
+    }
+  }
+
+  &.-header {
+    clip-path: none;
+    margin: 0 g(-1);
+    padding: g();
+
+    .layout.-home & {
+      clip-path: $clip-path-a;
+      margin-left: g(-1);
+      min-height: 161px; // Match logo text height (5.75 * $grid)
+      padding-bottom: g(1 + 1);
+
+      @media #{$bp5} {
+        clip-path: none;
+        margin-left: g(-1 + 3.5); // Align with center column
+        padding-bottom: g(1);
+      }
+    }
+
+    .layout.-default & {
+      height: g(5.5);
+      padding-top: g(2.5);
+
+      @media #{$bp5} {
+        margin-top: g(-1.75);
+      }
+    }
+
+    &::after {
+      left: 0;
+
+      .layout.-default & {
+        transform: skew($skew);
+        transform-origin: bottom left;
+      }
+    }
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/button.scss b/themes/fid_bbi/scss/blocks/button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2a0aed540f158878e202835097c828c0b2c27e81
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/button.scss
@@ -0,0 +1,3 @@
+.button {
+  @include button;
+}
diff --git a/themes/fid_bbi/scss/blocks/container.scss b/themes/fid_bbi/scss/blocks/container.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e37c9147b366e96720dc3b0c3433adfc9e63c5fc
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/container.scss
@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  margin: 0 auto;
+  max-width: $max-width;
+}
diff --git a/themes/fid_bbi/scss/blocks/facet.scss b/themes/fid_bbi/scss/blocks/facet.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cbecaff866a5d4dc804324f9676f630bca04ffab
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/facet.scss
@@ -0,0 +1,106 @@
+.facet {
+  display: flex;
+  margin: 0;
+  padding: g(.25) 0;
+
+  &::before {
+    content: none;
+  }
+
+  &.-border-bottom {
+    border-bottom: 2px solid $link-color;
+    margin-bottom: g(.5) - 1px;
+    padding-bottom: g(.5 + .25) - 1px;
+  }
+}
+
+.facet_badge {
+  background: none;
+  color: $text-muted-color;
+  font-size: $font-size-small;
+  margin-right: 0;
+  padding: 0;
+}
+
+.facet_link {
+  display: flex;
+  margin: g(-.25);
+  overflow: hidden;
+  padding: g(.25);
+  position: relative;
+
+  & + & {
+    margin-left: g(.25);
+    overflow: visible;
+  }
+
+  &:first-child {
+    flex: 1;
+  }
+
+  @include hover {
+    background: $button-hover-bg;
+    box-shadow: none;
+  }
+}
+
+.facet_links {
+  &.-collapsed {
+    li:nth-child(n+6) {
+      display: none;
+    }
+  }
+}
+
+.facet_links-toggle {
+  background: none;
+  border: 0;
+  display: none;
+  font: inherit;
+  font-weight: bold;
+  margin: 0 g(-.25);
+  padding: g(.25);
+  text-align: left;
+  width: calc(100% + #{g(.25 * 2)});
+
+  .facet_links.-collapsed &.-expand {
+    display: block;
+  }
+
+  .facet_links:not(.-collapsed) &.-collapse {
+    display: block;
+  }
+
+  @include hover {
+    background: $button-hover-bg;
+  }
+}
+
+.facet_minus,
+.facet_plus {
+  align-self: flex-start;
+  border: 2px solid;
+  display: inline-block;
+  font-weight: bold;
+  line-height: $line-height - 2px * 2;
+  min-width: g();
+  text-align: center;
+  width: g();
+
+  &.-selected {
+    background: $link-color;
+    border-color: $link-color;
+    color: #fff;
+  }
+}
+
+.facet_plus {
+  margin-right: g(.5);
+}
+
+.facet_text {
+  flex: 1;
+  margin-right: g(.5);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/themes/fid_bbi/scss/blocks/filters.scss b/themes/fid_bbi/scss/blocks/filters.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c8c23f170563b512025286b8e2a362989d76761d
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/filters.scss
@@ -0,0 +1,83 @@
+.filters {
+  //
+}
+
+.filters_active {
+  border: 2px solid $text-color;
+  margin-bottom: g();
+  padding: g() - 2px;
+
+  h3 {
+    margin-bottom: g(.5);
+  }
+
+  ul {
+    margin-bottom: g(-.25);
+    padding: 0;
+  }
+
+  li {
+    &::before {
+      content: none;
+    }
+  }
+
+  .icon {
+    margin-right: g(.25);
+  }
+}
+
+.filters_filter {
+  & + & {
+    margin-top: g(1 - .25);
+  }
+
+  ol {
+    list-style: none;
+    margin-bottom: 0;
+    margin-top: g(.5 - .25);
+    padding: 0;
+  }
+}
+
+// List toggle button
+.filters_title {
+  background: none;
+  border: 0;
+  color: inherit;
+  margin: g(-.25);
+  padding: g(.25);
+  text-align: left;
+  transition: none;
+  width: calc(100% + #{g(.25 * 2)});
+
+  @include hover {
+    background: $shade-weak;
+    color: inherit;
+    outline: 0;
+  }
+
+  .icon {
+    float: right;
+  }
+
+  &[aria-expanded='true'] .icon {
+    transform: rotate(180deg);
+  }
+}
+
+.filters_years {
+  display: flex;
+  margin-bottom: g(.5);
+
+  label {
+    align-items: center;
+    display: flex;
+    margin-right: g(.5);
+  }
+
+  input {
+    min-width: 5em; // IE fix
+    width: 5em;
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/flex.scss b/themes/fid_bbi/scss/blocks/flex.scss
new file mode 100644
index 0000000000000000000000000000000000000000..59cbcfad46ec0cd16ff03d1aa2a3a82317ab0de6
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/flex.scss
@@ -0,0 +1,82 @@
+.flex {
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    flex: 1;
+  }
+
+  &.-break-small {
+    @media #{$bp3} {
+      flex-direction: row;
+    }
+  }
+
+  &.-break-medium {
+    @media #{$bp3} {
+      flex-direction: row;
+    }
+  }
+
+  &.-break-large {
+    @media #{$bp5} {
+      flex-direction: row;
+    }
+  }
+
+  &.-gap {
+    margin: g(-1);
+
+    > * {
+      margin: g(1);
+    }
+  }
+
+  &.-gap-half {
+    margin: g(-.5);
+
+    > * {
+      margin: g(.5);
+    }
+  }
+
+  &.-margin {
+    margin-bottom: g();
+
+    &.-gap {
+      margin-bottom: g(-1 + 1);
+    }
+
+    &.-gap-half {
+      margin-bottom: g(-.5 + 1);
+    }
+  }
+
+  &.-margin-double {
+    margin-bottom: g(2);
+
+    &.-gap {
+      margin-bottom: g(-1 + 2);
+    }
+
+    &.-gap-half {
+      margin-bottom: g(-.5 + 2);
+    }
+  }
+}
+
+.flex_0 {
+  flex: 0;
+}
+
+.flex_1 {
+  flex: 1;
+}
+
+.flex_2 {
+  flex: 2;
+}
+
+.flex_3 {
+  flex: 3;
+}
diff --git a/themes/fid_bbi/scss/blocks/footer.scss b/themes/fid_bbi/scss/blocks/footer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..051d425bd0ec92da3920a643387236fe6d8490d3
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/footer.scss
@@ -0,0 +1,83 @@
+.footer {
+  @include sticky-footer(footer);
+  margin-top: g(2);
+  overflow: hidden; // Prevent box background from leaking
+  padding: 0 g();
+
+  .box.-left {
+    clip-path: none;
+    font-weight: normal;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding: g(1);
+
+    &::after {
+      background: $text-muted-color;
+
+      @media #{$bp5} {
+        transform: skew($skew);
+        transform-origin: 100% 0;
+      }
+    }
+  }
+
+  .flex {
+    flex-direction: column;
+
+    @media #{$bp4} {
+      flex-direction: row-reverse;
+    }
+  }
+}
+
+.footer_wrap {
+  margin: 0 auto;
+  max-width: $max-width;
+}
+
+.footer_partners {
+  align-items: center;
+  align-self: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: g(-.5);
+
+  a {
+    display: block;
+    margin: g();
+
+    @include hover {
+      box-shadow: none;
+    }
+  }
+
+  img {
+    display: block;
+    max-height: g(2);
+    max-width: g(8);
+  }
+
+  .flex {
+    align-items: center;
+  }
+}
+
+.footer_links {
+  list-style: none;
+  margin: g(-.5) g(-.5) g(-.5 + 1);
+  padding: 0;
+
+  a {
+    color: inherit;
+  }
+
+  li {
+    display: inline-block;
+    margin: g(.5);
+
+    &::before {
+      content: none;
+    }
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/form.scss b/themes/fid_bbi/scss/blocks/form.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7d4dbd076975b03cb754d74fba9521d7eec1f258
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/form.scss
@@ -0,0 +1,136 @@
+.form {
+  //
+}
+
+.form_footer {
+  @media #{$bp3} {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+}
+
+.form_footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: g(-.25 + 1) g(-.5) g(-.25);
+  padding: 0;
+
+  @media #{$bp3} {
+    margin-top: g(-.25);
+    order: -1;
+  }
+
+  > li {
+    margin: g(.25) g(.5);
+
+    &::before {
+      content: none;
+    }
+  }
+}
+
+// TODO: Merge classes
+.form-group,
+.form_row {
+  @include paragraph;
+  align-items: flex-start;
+
+  @media #{$bp3} {
+    display: flex;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.-center {
+    justify-content: center;
+    text-align: center;
+  }
+
+  &.-margin-half {
+    margin-bottom: g(.5);
+  }
+
+  > label {
+    flex: 1;
+    margin: 0;
+
+    @media #{$bp3} {
+      margin: g(.5) 0;
+    }
+  }
+
+  > [type=email],
+  > [type=file],
+  > [type=number],
+  > [type=password],
+  > [type=search],
+  > [type=tel],
+  > [type=text],
+  > [type=url],
+  > select,
+  > textarea {
+    margin: 0;
+    width: 100%;
+
+    @media #{$bp3} {
+      margin-left: g(.5);
+      width: 70%;
+    }
+  }
+
+  > [type=checkbox],
+  > [type=radio] {
+    margin-right: g(.5);
+    max-width: g();
+
+    + label {
+      flex: 0 auto;
+      margin-top: g(.5);
+
+      @media #{$bp3} {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+.form_label {
+  @extend label;
+  flex: 1;
+}
+
+.form_control {
+  margin: 0;
+  width: 100%;
+
+  @media #{$bp3} {
+    margin-left: g(.5);
+    width: 70%;
+  }
+
+  > p {
+    margin: g(.5) 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  > [type=email],
+  > [type=file],
+  > [type=number],
+  > [type=password],
+  > [type=search],
+  > [type=tel],
+  > [type=text],
+  > [type=url],
+  > select,
+  > textarea {
+    width: 100%;
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/header.scss b/themes/fid_bbi/scss/blocks/header.scss
new file mode 100644
index 0000000000000000000000000000000000000000..aa0f9afa125d72bf77e821fac983f0f8b7091489
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/header.scss
@@ -0,0 +1,171 @@
+.header {
+  @include sticky-footer(header);
+  display: flex;
+  flex-direction: column-reverse;
+  overflow: hidden; // Prevent box background from leaking
+  padding: 0 g();
+  z-index: 2;
+
+  h1 {
+    margin: 0;
+  }
+}
+
+.header_login {
+  display: none;
+  margin: 0 auto;
+  max-width: $max-width;
+  padding: g() 0;
+  position: relative;
+  width: 100%;
+
+  &::after {
+    border-bottom: 2px solid;
+    bottom: -2px;
+    content: '';
+    display: block;
+    left: -50vw;
+    position: absolute;
+    width: 200vw;
+  }
+}
+
+.header_logo {
+  display: block;
+  position: relative;
+  text-align: center;
+
+  @include hover {
+    box-shadow: none;
+  }
+
+  svg {
+    overflow: visible;
+  }
+
+  .layout.-default & {
+    margin: (g() + 38px) g(2) 0 0; // Align header search box
+    padding: 0 g(.5);
+    width: g(2.5);
+
+    @media #{$bp2} {
+      margin-top: (g() - 5px);
+      text-align: left;
+      width: g(8);
+    }
+
+    svg {
+      height: auto;
+      overflow: visible;
+      width: 120px;
+
+      @media #{$bp2} {
+        width: 180px; // Half of original
+      }
+
+      // Always 2px stroke-width on current scale
+      .blip {
+        stroke-width: 6;
+
+        @media #{$bp2} {
+          stroke-width: 4;
+        }
+      }
+
+      .brand {
+        display: none;
+
+        @media #{$bp2} {
+          display: block;
+        }
+      }
+
+      .text {
+        display: none;
+      }
+    }
+  }
+
+  .layout.-home & {
+    margin: g(2.5) auto 0;
+    width: auto;
+
+    @media #{$bp5} {
+      margin: g(1.5) g(2) 0 0;
+      text-align: left;
+      width: g(13);
+    }
+
+    svg {
+      height: auto;
+      max-width: 240px; // 2/3 of original
+
+      @media #{$bp5} {
+        max-width: 100%;
+      }
+
+      .blip {
+        stroke-width: 3; // 3/2 of original to compensate resize
+
+        @media #{$bp5} {
+          stroke-width: 2;
+        }
+      }
+
+      .text {
+        display: inline;
+
+        @media #{$bp5} {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.header_logo-overlay {
+  background: #fff;
+  bottom: -8px; // Align with logo text
+  color: #000;
+  display: none;
+  font: #{$font-size-special}/32px display-font, sans-serif;
+  left: 126px;
+  position: absolute;
+  text-align: left;
+  user-select: none;
+
+  @media #{$bp5} {
+    display: block;
+  }
+}
+
+.header_main {
+  align-items: flex-start;
+  display: flex;
+  justify-content: flex-start;
+  margin: 0 auto;
+  max-width: $max-width;
+  position: relative;
+  width: 100%;
+
+  .layout.-home & {
+    display: block;
+
+    @media #{$bp5} {
+      display: flex;
+    }
+  }
+}
+
+.header_nav {
+  flex: 1;
+
+  .layout.-default & {
+    display: flex;
+    flex-direction: row-reverse;
+
+    @media #{$bp5} {
+      display: block;
+    }
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/icon.scss b/themes/fid_bbi/scss/blocks/icon.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b4d82a6d8b7f39546ab4d539aba862d121884a5f
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/icon.scss
@@ -0,0 +1,29 @@
+.icon {
+  fill: currentColor;
+  min-width: g(); // Prevent icons from being "crushed" in flexbox
+  pointer-events: none;
+  position: relative;
+  stroke: currentColor;
+  stroke-width: 2;
+  vertical-align: top;
+}
+
+.link-with-icon {
+  margin-left: g(1.25);
+
+  // Make icon clickable
+  &::before {
+    content: '';
+    display: block;
+    height: g();
+    margin-left: g(-1.25);
+    position: absolute;
+    width: g(1.25);
+  }
+
+  > .icon {
+    margin-left: g(-1.25);
+    margin-right: g(.25);
+    position: absolute; // Prevent icons from increasing link height
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/item-list.scss b/themes/fid_bbi/scss/blocks/item-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c1b5810667b171c1d00189cfc69af20b46aeba65
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/item-list.scss
@@ -0,0 +1,44 @@
+.item-list {
+  //
+}
+
+.item-list_item {
+  align-items: flex-start;
+  display: flex;
+  min-height: g(3);
+  padding-bottom: g();
+  position: relative;
+
+  &:last-child {
+    margin-bottom: g(-.5);
+    min-height: 0;
+  }
+}
+
+.item-list_prefix {
+  // Hexagon
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='66' width='56'%3E%3Cpath d='M55 16.834L28 1.156 1 16.834v31.355l27 15.677 27-15.677z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center 0 no-repeat;
+  flex: 0 0 g(2);
+  font: #{$font-size-special}/#{$line-height} display-font, sans-serif;
+  margin-right: g(.5);
+  margin-top: -19px + 2px; // Counter padding + visually align with content
+  padding: 19px 0; // Fit hexagon
+  text-align: center;
+  vertical-align: top;
+
+  :not(:last-child) > & {
+    &::after {
+      border-left: 2px solid;
+      bottom: 15px;
+      content: '';
+      left: g() - 1px;
+      position: absolute;
+      top: 47px;
+      z-index: -1;
+    }
+  }
+}
+
+.item-list_content {
+  font-weight: 500;
+}
diff --git a/themes/fid_bbi/scss/blocks/main.scss b/themes/fid_bbi/scss/blocks/main.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bc6c92b194a74482f00944d69fca406c976e1e6b
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/main.scss
@@ -0,0 +1,18 @@
+.main {
+  @include sticky-footer(content);
+  display: flex;
+  flex-direction: column;
+  padding: 0 g();
+}
+
+.main_text {
+  margin: 0 auto;
+  max-width: $line-width;
+}
+
+.main_wrap {
+  margin: 0 auto;
+  max-width: 100%;
+  position: relative;
+  width: $max-width;
+}
diff --git a/themes/fid_bbi/scss/blocks/modal.scss b/themes/fid_bbi/scss/blocks/modal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8ac1975dd1b77480a9cb4da4224b5cb364161496
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/modal.scss
@@ -0,0 +1,72 @@
+.modal {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  opacity: 0;
+  padding: g() !important; // overriding inline style set by JS
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition: opacity $td, visibility $td;
+  visibility: hidden;
+  z-index: 9;
+
+  // TODO: Merge classes
+  &.in,
+  &.-open {
+    opacity: 1;
+    transition: opacity $td; // Firefox fix: prevent choppy transition-in
+    visibility: visible;
+  }
+
+  &::after {
+    background: rgba(#000, .4);
+    bottom: 0;
+    content: '';
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: -1;
+  }
+}
+
+.modal_content {
+  background: #fff;
+  border: 2px solid;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: auto;
+  transform: translateY(g(-1));
+  transition: transform $td;
+  width: $line-width + g(2);
+
+  // TODO: Merge classes
+  .modal.in &,
+  .modal.-open & {
+    transform: translateY(0);
+  }
+}
+
+.modal_main {
+  min-height: g(3.5); // make sure "x" button is always fully visible
+  padding: g();
+}
+
+// TODO: We have limited control over the modal, whose contents are partly
+// generated via JS. Maybe change modal HTML later.
+.modal {
+  .close {
+    position: fixed;
+    right: g();
+    top: g();
+  }
+
+  h2:first-of-type {
+    margin-top: 0;
+    padding-right: g(2);
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/nav.scss b/themes/fid_bbi/scss/blocks/nav.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e16b531eef65146aa013e1db4147141813d17b9c
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/nav.scss
@@ -0,0 +1,296 @@
+.nav {
+  display: flex;
+  justify-content: center;
+  z-index: 1;
+
+  @media #{$bp5} {
+    justify-content: flex-start;
+    position: relative;
+  }
+
+  .layout.-home & {
+    @media #{$bp5} {
+      justify-content: flex-end;
+    }
+  }
+
+  li {
+    display: block;
+
+    &::before {
+      content: none;
+    }
+  }
+
+  a {
+    color: inherit;
+    display: block;
+
+    @include hover {
+      box-shadow: none;
+    }
+  }
+}
+
+.nav_aside {
+  background: #fff;
+  border-bottom: 2px solid;
+  border-right: 2px solid;
+  font-size: $font-size-small;
+  left: 50%;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  transform: translate(-50%) skew(-$skew);
+  transform-origin: bottom right;
+  width: 111vw;
+
+  @media #{$bp1} {
+    width: auto;
+  }
+
+  @media #{$bp5} {
+    left: auto;
+    right: 0;
+    transform: skew(-$skew);
+  }
+
+  &::before {
+    background: #fff;
+    border-bottom: 2px solid;
+    border-left: 2px solid;
+    content: '';
+    display: block;
+    height: calc(100% + 2px);
+    left: -1px; // Align with border-bottom
+    position: absolute;
+    transform: skew($skew * 2 - 1deg);
+    transform-origin: 0 100%;
+    width: g(.5);
+  }
+
+  ul {
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+  }
+
+  a {
+    color: inherit;
+    font-weight: bold;
+    padding: g(.25) g(.5);
+    text-align: center;
+
+    @include hover {
+      background: mix(#000, #fff, 10);
+    }
+
+    &.-current {
+      background: $text-color;
+      color: #fff;
+    }
+
+    span {
+      display: block;
+      transform: skew($skew);
+    }
+  }
+
+  // Extend hover background for straight left border
+  li:first-child > a {
+    text-indent: 0;
+
+    @media #{$bp1} {
+      text-indent: g(-.25);
+    }
+
+    &::before {
+      @media #{$bp1} {
+        background: #fff;
+        content: '';
+        display: block;
+        height: 100%;
+        left: g(-.25) - 1px;
+        position: absolute;
+        top: 0;
+        transform: skew($skew * 2 - 1deg);
+        width: g();
+      }
+    }
+
+    @include hover {
+      &::before {
+        background: mix(#000, #fff, 10); // Same as parent
+      }
+    }
+  }
+
+  .icon {
+    display: none;
+
+    @media #{$bp1} {
+      display: inline;
+    }
+  }
+}
+
+.nav_header {
+  display: none;
+
+  .layout.-default & {
+    @include off-canvas-header;
+
+    @media #{$bp5} {
+      display: none;
+    }
+  }
+}
+
+.nav_home {
+  .layout.-home & {
+    display: none;
+  }
+}
+
+.nav_lang {
+  text-transform: uppercase;
+}
+
+.nav_main {
+  .layout.-default & {
+    @include off-canvas;
+
+    @media #{$bp5} {
+      @include on-canvas;
+      color: #fff;
+      font: #{$font-size}/#{$line-height} text-font, sans-serif;
+      font-weight: bold;
+      margin: g(-.5);
+      padding: g(.75) 0 0;
+    }
+  }
+
+  .layout.-home & {
+    font: #{$font-size-special}/#{$line-height} display-font, sans-serif;
+    justify-content: flex-end;
+    margin: g() g(-1) g(.5);
+    padding: 0;
+
+    @media #{$bp5} {
+      margin: 0 g(-.75) 0 g(-.75 + 2.5);
+      padding: g(2.25) 0 g(.75);
+    }
+  }
+
+  ul {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding: 0;
+    white-space: nowrap;
+
+    .layout.-default & {
+      display: block;
+
+      @media #{$bp5} {
+        display: flex;
+      }
+    }
+
+    .layout.-home & {
+      display: flex;
+      justify-content: center;
+
+      @media #{$bp5} {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  li {
+    padding: g(.5) g(.75);
+
+    .layout.-default & {
+      padding: g(.5) g();
+
+      @media #{$bp5} {
+        padding: g(.5);
+      }
+    }
+  }
+
+  a { /* stylelint-disable-line */
+    @include hover-border;
+
+    .layout.-default & {
+      color: $text-color;
+      display: inline;
+      font: #{$font-size-special}/#{$line-height} display-font, sans-serif;
+
+      @media #{$bp5} {
+        color: inherit;
+        display: block;
+        font: inherit;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.nav_toggle {
+  background: none;
+  color: #fff;
+  display: none;
+  margin-top: g(2.5);
+  overflow: hidden;
+  white-space: nowrap;
+  width: g(2);
+
+  & + & {
+    margin-left: g();
+  }
+
+  @include hover {
+    background: $shine;
+    color: #fff;
+  }
+
+  .icon {
+    margin: 0 g(1.5) 0 (g(-.5) + 1px);
+  }
+
+  .layout.-default & {
+    display: block;
+
+    &.-menu {
+      @media #{$bp2} {
+        @include button-icon-bg(big);
+        width: auto;
+
+        .icon {
+          color: $color-a;
+        }
+      }
+
+      @media #{$bp5} {
+        display: none;
+      }
+    }
+
+    &.-search {
+      @media #{$bp1} {
+        @include button-icon-bg(big);
+        width: auto;
+
+        .icon {
+          color: $color-a;
+        }
+      }
+
+      @media #{$bp3} {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/post.scss b/themes/fid_bbi/scss/blocks/post.scss
new file mode 100644
index 0000000000000000000000000000000000000000..857a9a8ec6496e417ff07b90b9ed8c1e4fea80cf
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/post.scss
@@ -0,0 +1,39 @@
+.post {
+  flex: 0 0 100%;
+  padding: g();
+  position: relative;
+  width: 100%;
+
+  @media #{$bp2} {
+    flex: 0 0 50%;
+  }
+}
+
+.post_date {
+  color: $color-b;
+  font-size: $font-size-small;
+  font-weight: bold;
+  line-height: g(.75);
+  margin-bottom: g(.5);
+  margin-top: g(-.25);
+  order: -1;
+}
+
+.post_excerpt {
+  margin-bottom: 0;
+}
+
+.post_link {
+  @include extend-clickable-area;
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 g(.5);
+
+  @include hover {
+    box-shadow: none;
+  }
+}
+
+.post_title {
+  margin: 0;
+}
diff --git a/themes/fid_bbi/scss/blocks/posts.scss b/themes/fid_bbi/scss/blocks/posts.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e1f6d0ded584355c2128601e136337bc77fab30a
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/posts.scss
@@ -0,0 +1,5 @@
+.posts {
+  display: flex;
+  flex-wrap: wrap;
+  margin: g(-1);
+}
diff --git a/themes/fid_bbi/scss/blocks/record.scss b/themes/fid_bbi/scss/blocks/record.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6b731b7d406f7a27311ebed125418972ef2161c7
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/record.scss
@@ -0,0 +1,159 @@
+.record {
+  margin: g(1.5) 0 0;
+  max-width: 100%;
+
+  @media #{$bp5} {
+    margin: g(1.5) 0 0 g(9);
+  }
+
+  h1 {
+    @include heading(2);
+    color: #000;
+    margin: 0;
+    text-align: left;
+  }
+
+  h2 {
+    @include heading(3);
+  }
+
+  .box {
+    padding: g() g() g(1 + 1);
+
+    @media #{$bp5} {
+      margin-bottom: g();
+      padding: g();
+    }
+  }
+}
+
+.record_access {
+  border-left: 2px solid;
+  display: block;
+  padding-left: g() - 2px;
+
+  @media #{$bp3} {
+    display: flex;
+  }
+
+  h2 {
+    color: inherit;
+    flex: 0 0 g(8 - 1.25); // Space for link icons
+  }
+}
+
+.record_actions {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: g(0);
+
+  a {
+    @include button-icon-bg(small);
+    @include button-small;
+    display: flex;
+    margin: g(.25);
+    white-space: nowrap;
+    width: calc(100% - #{g(.5)});
+
+    @include hover {
+      box-shadow: none;
+    }
+
+    .icon {
+      color: #fff;
+      margin-right: g(.75);
+    }
+  }
+
+  &.-secondary {
+    a {
+      width: calc(50% - #{g(.5)});
+    }
+  }
+}
+
+.record_internal {
+  margin: 0 0 g();
+  min-width: 0;
+
+  tr {
+    box-shadow: none;
+  }
+}
+
+.record_links {
+  font-size: $font-size-small;
+  list-style: none;
+  margin: g(-.5) g(-.5) g(-.5 + 1.5);
+  padding: 0;
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  a {
+    font-weight: bold;
+  }
+
+  li {
+    display: inline-block;
+    margin: g(.5);
+
+    &::before {
+      content: none;
+    }
+  }
+}
+
+.record_main {
+  align-items: flex-start;
+  display: block;
+  margin-bottom: g(1);
+
+  @media #{$bp5} {
+    display: flex;
+  }
+
+  dl {
+    border-left: 2px solid;
+    padding-left: g() - 2px;
+  }
+}
+
+.record_sidebar {
+  align-items: flex-start;
+  display: block;
+  flex: 0 0 g(12.5);
+  margin: g(-.25 + 1) g(-.25) g(-.25);
+
+  @media #{$bp2} {
+    display: flex;
+  }
+
+  @media #{$bp5} {
+    display: block;
+    margin: g(-.25) g(-.25) g(-.25) g(-.25 + 2);
+    max-width: g(12.5);
+  }
+}
+
+.record_title {
+  flex: 1;
+
+  > h1,
+  > dl {
+    border-left: 2px solid $text-color;
+    padding-left: g() - 2px;
+  }
+
+  > h1 {
+    padding-bottom: g();
+  }
+}
+
+.record_type {
+  display: none;
+  margin-left: g(-4);
+  margin-right: g();
+
+  @media #{$bp5} {
+    display: block;
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/required.scss b/themes/fid_bbi/scss/blocks/required.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d9ffa1312a82c194918d99238844c6f0857186cb
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/required.scss
@@ -0,0 +1,7 @@
+.required {
+  &::after {
+    color: $color-b;
+    content: '*';
+    font-weight: 500;
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/result.scss b/themes/fid_bbi/scss/blocks/result.scss
new file mode 100644
index 0000000000000000000000000000000000000000..abda9240bf07db8ca172380ff2822196e3c7fe6c
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/result.scss
@@ -0,0 +1,120 @@
+.result {
+  display: flex;
+  position: relative;
+
+  a {
+    position: relative;
+  }
+
+  & + & {
+    margin-top: g();
+  }
+}
+
+.result_actions {
+  margin-left: g();
+
+  a {
+    display: block;
+    margin: g(-.25);
+    padding: g(.25);
+
+    + a {
+      margin-top: g(.25);
+    }
+
+    @include hover {
+      background: $button-hover-bg;
+      box-shadow: none;
+    }
+
+    // Some tooltips contain 2 messages, show only the 1st one by default
+    .tooltip span + span {
+      display: none;
+    }
+  }
+
+  a.-selected {
+    .icon {
+      animation: beat $td 1;
+
+      @keyframes beat {
+        0% {
+          transform: scale(1);
+        }
+
+        50% {
+          transform: scale(1.5);
+        }
+
+        100% {
+          transform: scale(1);
+        }
+      }
+
+      path {
+        fill: currentColor;
+      }
+    }
+
+    .tooltip span {
+      display: none;
+
+      + span {
+        display: block;
+      }
+    }
+  }
+}
+
+.result_author {
+  margin-bottom: g(.25);
+}
+
+.result_details {
+  border-left: 2px solid;
+  flex: 1;
+  font-size: $font-size-small;
+  padding-left: g() - 2px;
+}
+
+.result_title {
+  margin: 0 0 g(.5);
+}
+
+.result_link {
+  @include extend-clickable-area;
+  display: block;
+  margin-bottom: g(.25);
+  position: static !important;
+
+  @include hover {
+    box-shadow: none;
+  }
+
+  &::after {
+    right: g(2); // Space for buttons
+  }
+}
+
+.result_place {
+  //
+}
+
+.result_media {
+  font-weight: bold;
+}
+
+.result_source {
+  //
+}
+
+.result_type {
+  display: none;
+  flex: 0 0 g(3);
+  margin-right: g();
+
+  @media #{$bp2} {
+    display: block;
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/results.scss b/themes/fid_bbi/scss/blocks/results.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ba577990074cd1be4b9f0db49b91c9938efa03df
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/results.scss
@@ -0,0 +1,113 @@
+.results {
+  display: flex;
+  margin: g() g(-1) 0;
+}
+
+.results_actions {
+  display: flex;
+  flex-wrap: wrap;
+  margin: g(-.25);
+  margin-bottom: g(-.25 + 1);
+
+  a {
+    @include button-icon-bg(small);
+    @include button-small;
+    display: flex;
+    margin: g(.25);
+    white-space: nowrap;
+    width: calc(50% - #{g(.5)});
+
+    @include hover {
+      box-shadow: none;
+    }
+
+    .icon {
+      color: #fff;
+      margin-right: g(.75);
+    }
+  }
+}
+
+.results_footer {
+  margin-top: g(1.5);
+  overflow: hidden;
+  text-align: center;
+
+  // Load-more button
+  button {
+    position: relative;
+
+    &::before,
+    &::after {
+      background: $link-color;
+      content: '';
+      display: block;
+      height: 2px;
+      position: absolute;
+      top: calc(50% - 1px);
+      width: 50vw;
+    }
+
+    &::before {
+      right: calc(100% + #{g(.5)});
+    }
+
+    &::after {
+      left: calc(100% + #{g(.5)});
+    }
+  }
+}
+
+.results_header {
+  display: flex;
+  flex-direction: column-reverse;
+  flex-wrap: wrap;
+  font-weight: 500;
+  justify-content: center;
+  margin: 0 0 g(1);
+  max-width: calc(100vw - #{g(2)});
+  text-align: center;
+
+  @media #{$bp3} {
+    flex-direction: column;
+    justify-content: space-between;
+    margin: g(-.25) g(-.25) g(-.25 + 1);
+    text-align: left;
+  }
+
+  @media #{$bp5} {
+    justify-content: flex-start;
+    margin-left: g(-.25 + 4);
+  }
+}
+
+.results_list {
+  flex: 1;
+  margin: 0 g();
+
+  @media #{$bp5} {
+    margin-left: g(6);
+  }
+}
+
+.results_sort {
+  max-width: 100%;
+
+  @media #{$bp3} {
+    margin: g(.25);
+  }
+
+  label {
+    display: inline;
+  }
+
+  select {
+    display: block;
+    margin: 0 auto;
+
+    @media #{$bp3} {
+      display: inline-block;
+      margin: 0 0 0 .3em;
+    }
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/search.scss b/themes/fid_bbi/scss/blocks/search.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b93e4e71a76fa28692bbebd3a84a5e1122fa3c77
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/search.scss
@@ -0,0 +1,177 @@
+.search {
+  color: #fff;
+  margin: 0 auto;
+  max-width: $line-width;
+
+  @media #{$bp5} {
+    max-width: none;
+  }
+
+  .layout.-default & {
+    @include off-canvas;
+    color: $text-color;
+    display: block;
+    padding: g(3.5) g() g();
+
+    @media #{$bp3} {
+      @include on-canvas;
+      align-items: center;
+      display: flex;
+      padding: 0;
+    }
+  }
+}
+
+.search_form {
+  align-items: baseline;
+  display: flex;
+  flex: 1;
+  margin: 0;
+  position: relative;
+}
+
+.search_header {
+  @include off-canvas-header;
+
+  @media #{$bp3} {
+    display: none;
+  }
+}
+
+.search_input {
+  font-family: display-font, sans-serif;
+  font-size: $font-size-special;
+  height: g(2);
+  line-height: 1;
+  margin-right: g(.5);
+  width: 100%;
+
+  &:focus {
+    box-shadow: 0 0 0 g(.25) $shade-strong;
+  }
+
+  .layout.-default & {
+    @media #{$bp3} {
+      border-color: #fff;
+    }
+  }
+
+  .layout.-home & {
+    border-color: #fff;
+  }
+
+  &::placeholder {
+    color: $color-a;
+    font-weight: normal;
+    opacity: 1;
+  }
+}
+
+.search_links {
+  margin: g(.5) 0 0;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    font-weight: bold;
+    margin: 0 g(-.5) g(-.5);
+    padding: 0;
+  }
+
+  li {
+    margin: g(.25) g(.5);
+
+    &::before {
+      content: none;
+    }
+  }
+
+  a {
+    font-weight: bold;
+  }
+}
+
+// Only used on default layout
+.search_menu {
+  margin: g() 0 0;
+
+  @media #{$bp3} {
+    margin: 0 0 0 g();
+    width: g(5.25); // Aligning with 2nd column of filter buttons
+  }
+
+  a {
+    // Using !importand to override `.box a`
+    color: $link-color !important;
+    font-weight: 500 !important;
+
+    @media #{$bp3} {
+      color: #fff !important;
+      font-weight: bold !important;
+    }
+
+    @include hover {
+      color: $link-hover-color !important;
+
+      @media #{$bp3} {
+        color: #fff !important;
+      }
+    }
+  }
+}
+
+.search_submit {
+  align-self: flex-start;
+  display: flex;
+  flex-shrink: 0;
+  overflow: hidden;
+  padding-right: g(.5);
+  width: g(2);
+
+  .layout.-default & {
+    @media #{$bp3} {
+      color: #fff;
+    }
+
+    @media #{$bp5} {
+      @include button-icon-bg(big);
+      width: g(5.75); // Align with 1st column of filter buttons
+    }
+
+    @include hover {
+      @media #{$bp3} {
+        color: #fff;
+      }
+    }
+  }
+
+  .layout.-home & {
+    color: #fff;
+
+    @media #{$bp2} {
+      @include button-icon-bg(big);
+      width: auto;
+    }
+
+    @include hover {
+      background: $shine;
+      color: #fff;
+    }
+  }
+
+  .icon {
+    margin: 0 g(1.25) 0 g(-.5) !important; // override margins set by button-icon-bg
+
+    .layout.-default & {
+      @media #{$bp5} {
+        color: $color-a;
+      }
+    }
+
+    .layout.-home & {
+      @media #{$bp2} {
+        color: $color-a;
+      }
+    }
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/sidebar.scss b/themes/fid_bbi/scss/blocks/sidebar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..410d65cdcca07b7fede72b6b3a6e00c775d19b67
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/sidebar.scss
@@ -0,0 +1,64 @@
+.sidebar {
+  @include off-canvas;
+  flex: 0 0 g(12);
+  margin: 0 g();
+  max-width: g(12);
+  padding-left: g();
+  padding-right: g();
+  will-change: min-height; // For sticky sidebar
+
+  @media #{$bp4} {
+    @include on-canvas;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.sidebar_header {
+  @include off-canvas-header;
+
+  @media #{$bp4} {
+    display: none;
+  }
+}
+
+.sidebar_inner {
+  padding-bottom: g();
+  position: relative; // For sticky sidebar
+  transform: translate3d(0, 0, 0); // For sticky sidebar
+  will-change: position, transform; // For sticky sidebar
+}
+
+.sidebar_toggle {
+  background: $link-color;
+  border: 0;
+  bottom: 0;
+  color: #fff;
+  font-family: text-font, sans-serif;
+  font-size: $font-size-small;
+  font-weight: bold;
+  padding: g(.25) g(.5);
+  position: fixed;
+  right: 0;
+  transform: skew(-$skew);
+  transform-origin: bottom right;
+  z-index: 1;
+
+  @media #{$bp4} {
+    display: none;
+  }
+
+  @include hover {
+    background: $link-hover-color;
+    color: #fff;
+  }
+
+  > * {
+    display: inline-block;
+    transform: skew($skew);
+  }
+
+  .layout.-no-scroll & {
+    display: none;
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/sr-only.scss b/themes/fid_bbi/scss/blocks/sr-only.scss
new file mode 100644
index 0000000000000000000000000000000000000000..322a69e2378c8a010d9a7c2735ee289ca545ecd7
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/sr-only.scss
@@ -0,0 +1,11 @@
+.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;
+  border: 0;
+}
diff --git a/themes/fid_bbi/scss/blocks/tabs.scss b/themes/fid_bbi/scss/blocks/tabs.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1754361f260109a8c40678d198db3d70143f7dd2
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/tabs.scss
@@ -0,0 +1,38 @@
+.tabs {
+  //
+}
+
+.tabs_main {
+  border: 2px solid;
+  margin-bottom: -2px;
+  margin-top: -2px;
+}
+
+.tabs_button {
+  background: none;
+  border-color: transparent;
+
+  &[aria-selected="true"] {
+    background: #fff;
+    border-bottom: 0;
+    border-color: $text-color;
+    color: $text-color;
+    padding-bottom: g(.5);
+  }
+}
+
+.tabs_header {
+  display: flex;
+  position: relative;
+  z-index: 1;
+}
+
+.tabs_item {
+  max-width: 100%;
+  overflow: auto;
+  padding: g();
+
+  &[hidden] {
+    display: none;
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/tagline.scss b/themes/fid_bbi/scss/blocks/tagline.scss
new file mode 100644
index 0000000000000000000000000000000000000000..656071aa17cf0aa4047410a1660327a8b3a1fab3
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/tagline.scss
@@ -0,0 +1,21 @@
+.tagline {
+  clear: both;
+  color: $color-a;
+  font: #{round($font-size-special * $ratio)}/#{$line-height * 1.5} display-font, sans-serif;
+  margin: g(1.75) auto g(2);
+  position: relative;
+  text-align: center;
+
+  @media #{$bp5} {
+    font: #{round($font-size-special * $ratio * $ratio)}/#{$line-height * 2} display-font, sans-serif;
+    padding: g();
+  }
+
+  br {
+    display: none;
+
+    @media #{$bp3} {
+      display: inline;
+    }
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/to-top.scss b/themes/fid_bbi/scss/blocks/to-top.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5ce6800c5a613567180f5fe3556a37c7f584e9ce
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/to-top.scss
@@ -0,0 +1,33 @@
+.to-top {
+  background: #fff;
+  bottom: g(2);
+  color: $text-color;
+  padding: g(.5) - 2px;
+  padding-right: g() - 2px;
+  position: fixed;
+  right: g(-.5);
+  transform: skew($skew) translate(100%);
+  transform-origin: 0 0;
+  transition: transform $td, visibility $td;
+  visibility: hidden;
+  z-index: 5;
+
+  @include hover {
+    background: mix(#000, #fff, 10);
+    color: $text-color;
+    transition: transform $td, visibility $td;
+  }
+
+  .layout.-scrolled & {
+    transform: skew($skew) translate(0);
+    visibility: visible;
+  }
+
+  .layout.-no-scroll & {
+    display: none;
+  }
+
+  .icon {
+    transform: skew(-$skew) rotate(-90deg);
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/tooltip.scss b/themes/fid_bbi/scss/blocks/tooltip.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ffd705af7616082ae61882704355a7c68faced44
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/tooltip.scss
@@ -0,0 +1,40 @@
+.tooltip {
+  background: $text-muted-color;
+  color: #fff;
+  font-size: $font-size-small;
+  font-weight: 500;
+  margin-right: g(-.25);
+  opacity: 0;
+  padding: 0 g(.25);
+  pointer-events: none;
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: margin $td, opacity $td;
+  user-select: none;
+  white-space: nowrap;
+
+  &::after {
+    background: $text-muted-color;
+    content: '';
+    display: block;
+    height: g(.4);
+    position: absolute;
+    right: g(-.2);
+    top: calc(50% - #{g(.2)});
+    transform: rotate(45deg);
+    width: g(.4);
+    z-index: -1;
+  }
+}
+
+a:focus,
+a:hover,
+button:focus,
+button:hover {
+  .tooltip {
+    margin-right: g(.25);
+    opacity: 1;
+  }
+}
diff --git a/themes/fid_bbi/scss/blocks/unstyled-list.scss b/themes/fid_bbi/scss/blocks/unstyled-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..587e088506c27b6ca8cb99e04ac61337716744ce
--- /dev/null
+++ b/themes/fid_bbi/scss/blocks/unstyled-list.scss
@@ -0,0 +1,16 @@
+.unstyled-list {
+  list-style: none;
+  padding-left: 0;
+
+  li {
+    margin-left: 0;
+
+    &::before {
+      content: none;
+    }
+
+    + li {
+      margin-top: g(.5);
+    }
+  }
+}
diff --git a/themes/fid_bbi/scss/compiled.scss b/themes/fid_bbi/scss/compiled.scss
index 8f41ebe2c6b9904aec88302eac6b4724b298bfd6..5e9c45e9ffb559bff44be479de5f1f51d2b10655 100644
--- a/themes/fid_bbi/scss/compiled.scss
+++ b/themes/fid_bbi/scss/compiled.scss
@@ -1,860 +1,56 @@
-@import 'customVariables';
-@import 'customMixins';
-@import '../../fid/scss/compiled';
-
-// General
-body {
-  hyphens: none;
-  // Padding to make sure header with "keep filters" doesn't overlap breadcrumbs
-  padding-top: 120px;
-
-  &.template-name-advanced {
-    padding-top: 80px;
-  }
-}
-
-.table {
-  //no borders fo fid_bbi, cf. #15225
-  border: 0;
-  // make columns adapt to content
-  table-layout: auto;
-}
-
-.table-striped > tbody > tr:nth-of-type(2n+1) {
-  background-color: initial;
-}
-
-// Avoid ugly wrapping in table headers
-.description-tab > table th {
-  min-width: 13rem;
-}
-
-
-// Helper Classes
-.flex-column {
-  display: flex;
-  flex-flow: column;
-}
-
-.flex-row {
-  display: flex;
-  flex-flow: row;
-}
-
-.flex-long {
-  flex-basis: 40%;
-  flex-grow: 2;
-}
-
-.flex-short {
-  flex-shrink: 4;
-}
-
-.flex-justify-end {
-  justify-content: flex-end;
-}
-
-.flex-self-end {
-  align-self: end;
-}
-
-.flex-item-left {
-  order: -99;
-}
-
-.flex-item-right {
-  order: 99;
-}
-
-.margin-r-2 {
-  margin-right: 2px;
-}
-
-// Header
-.navbar {
-  background-color: $brand-secondary;
-  min-height: 120px;
-
-  header & {
-    @media screen and (max-width: $screen-xs-max) {
-      min-height: 120px;
-    }
-  }
-
-  // Header logo and text
-  h1 {
-    img {
-      margin-top: 12px;
-    }
-
-    span {
-      color: $white;
-
-      @media only screen and (max-width: $screen-xs-max) {
-        font-size: 12px;
-        left: 0;
-        line-height: 1.2;
-        margin-right: 40px;
-        position: absolute;
-      }
-
-      @media only screen and (min-width: $screen-sm-min) {
-        font-size: 16px;
-      }
-
-      @media only screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-        margin: 0;
-        max-width: 400px;
-        padding-top: 7px;
-      }
-    }
-  }
-}
-
-.admin.nav {
-  background-color: $brand-primary-light;
-}
-
-#header-collapse {
-  flex: 1 1;
-
-  @media (min-width: $grid-float-breakpoint) {
-    order: unset;
-  }
-}
-
-#header-collapse.collapse.in {
-  background-color: transparent;
-  text-align: right;
-}
-
-#header-collapse.collapse.in li > a.btn {
-  text-align: right;
-}
-
-//// override finc: push navbar in from right, to allow for offcanvas scrollbar
-.offcanvas .navbar-fixed-top {
-  @media only screen and (max-width: $screen-xs-max) {
-    right: 0;
-  }
-}
-
-// Menu and Language Selector
-// set font color in header to white for better visibility
-.nav {
-  a {
-    &.btn,
-    &.search-filter-toggle {
-      color: $white;
-
-      &:hover,
-      &:focus {
-        background-color: $brand-primary;
-        color: $snow;
-      }
-    }
-
-    /* remove flags, cf. #15914, DM
-        // Set flags
-        &.de::after,
-        &.en::after {
-          background-position: 50% 30%;
-          background-repeat: no-repeat;
-          background-size: contain;
-          content: '\00a0';
-          display: inline-block;
-          margin-left: 7px;
-          position: relative;
-          width: (4 / 3) * 1em;
-        }
-
-        &.en::after {
-          background-image: url('../images/en.svg');
-        }
-
-        &.de::after {
-          background-image: url('../images/de.svg');
-        }
-        */
-  }
-}
-
-// Set right margin for language selector
-.navbar-right {
-  margin-bottom: 3px;
-  margin-right: -10px;
-}
-
-// SEARCH
-// Search Box Wrapper
-.searchbox-wrapper {
-  display: inline-flex;
-}
-
-.searchbox-tools {
-  max-width: $searchboxWidth;
-  padding-bottom: 15px;
-}
-
-// Search Box on home page
-.searchHomeContent {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  min-height: 15em;
-}
-
-.searchbox-home {
-  // truly justify content
-  .searchForm {
-    display: inline-flex;
-    justify-content: center;
-    min-width: $searchboxWidth + 20px;
-  }
-
-  // Search button
-  .list-unstyled {
-    display: flex;
-  }
-
-  .flex-checkbox label {
-    color: $oil;
-  }
-
-  // Shard box
-  .checkbox {
-    transform: translate(-250%, 200%);
-  }
-}
-
-// Searchbox
-input.searchForm_lookfor {
-  min-width: $searchboxWidth - 40px;
-}
-
-input[type='text'] {
-  header,
-  #searchForm & {
-    border: 1px solid $iron;
-  }
-}
-
-// Keep Filters and Shards checkbox elements
-input.shards-checkbox,
-input.searchFormKeepFilters {
-  margin: 0 5px 0 0;
-}
-
-.flex-column-xs {
-  @media screen and (max-width: $screen-xs-max) {
-    display: flex;
-    flex-flow: column;
-  }
-}
-
-.searchForm .flex-checkbox {
-  align-self: end;
-
-  @media screen and (max-width: $screen-xs-max) {
-    align-self: flex-start;
-  }
-
-  //border: 1px solid $white;
-  color: $white;
-  padding: 7px 5px 5px;
-  width: $searchboxWidth;
-}
-
-// Shards checkbox
-input.shards-checkbox {
-}
-
-// Keep Filters element
-input.searchFormKeepFilters {
-}
-
-.search.container .searchForm .checkbox {
-  @media only screen and (max-width: $screen-sm-max) {
-    margin-left: 1.5rem;
-    top: 100px;
-  }
-}
-
-//// Advanced Search links in header
-///// pull to right on Large
-.navbar-form {
-  padding: 0;
-
-  ///// transparentize border to avoid double border thickness
-  .tab-content {
-    border-color: transparent;
-  }
-}
-
-.adv_search_terms {
-  background-color: transparent;
-  border: 1px solid $snow;
-  color: $snow;
-}
-
-.adv_search_links {
-  border-bottom: 1px solid $snow;
-  border-left: 1px solid $snow;
-  border-right: 1px solid $snow;
-  color: $snow;
-
-  li {
-    display: table-cell;
-  }
-
-  a {
-    color: $snow;
-  }
-
-  // 768px and above as inline list
-  @media only screen and (min-width: $screen-sm-min) {
-    li {
-      border-right: 1px solid $snow;
-    }
-  }
-}
-
-
-// Breadcrumbs
-.breadcrumb {
-  padding-top: 20px;
-
-  > li + li::before {
-    color: $white;
-    content: '';
-    padding: 0 5px;
-  }
-
-  a {
-    color: $brand-primary-light;
-
-    &:active {
-      color: $white;
-    }
-
-    &:hover {
-      color: $brand-primary-light;
-      text-decoration: underline;
-    }
-  }
-}
-
-// Content
-// SEARCH TOOLS
-.searchtools {
-  display: block;
-  margin: 0 0 1em;
-}
-
-.result:nth-of-type(2n) {
-  background-color: $brand-primary-light;
-}
-
-// RESULT LIST
-
-.result .format {
-  background: transparent;
-  color: #333;
-  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-  font-size: 14px;
-  margin-top: 0.75em;
-  padding: 0;
-}
-
-.result-links {
-  // move favorites and other icons to the right
-  text-align: right;
-}
-
-//// Saved in Favorites Block
-.savedLists {
-  padding: 5px;
-  text-align: left;
-}
-
-.save-record .in-list {
-  color: $in-list-or-bookbag;
-}
-
-//// Bookbag Icons
-.cart-link-icon.fa {
-  margin-right: 0;
-
-  // Make same size as favs in result list
-  .template-name-results & {
-    font-size: 2em;
-  }
-
-  &.in-bookbag {
-    color: $in-list-or-bookbag;
-  }
-}
-
-//// Bookbag Labels - hide in result list
-.template-name-results .cart-link-label {
-  @include sr-only;
-}
-
-//// Collection Info (in new location)
-.collection-details {
-  text-align: right;
-  display: inline-block;
-  float: right;
-  margin-right: 0.5em;
-}
-
-// MyRESEARCH / Account
-//// Make tables align better
-.template-name-profile {
-  .mainbody tr:first-of-type th {
-    min-width: 30%;
-  }
-}
-
-// RESULT LIST
-//// Offcanvas toggler
-.search-filter-toggle {
-  margin-top: 0;
-}
-
-// Footer
-footer {
-  background: $brand-primary;
-  color: $white;
-
-  a {
-    color: $white;
-
-    &:hover,
-    &:focus {
-      color: $brand-primary-light;
-    }
-  }
-}
-
-.powered-by a {
-  background-color: $snow;
-  padding: 5px;
-}
-
-// RESULT LIST
-//// top pagination
-.pagination-short {
-  .hidden-xs {
-    display: none;
-  }
-
-  .pagination {
-    margin: initial;
-    margin-left: $grid-gutter-width;
-    float: left;
-  }
-}
-
-//// Search tools
-.searchtools {
-  display: block;
-  margin: 0 0 1em;
-
-  @media screen and (max-width: $screen-xs-max) {
-    a {
-      border: 0;
-      padding: 5px 3px;
-    }
-  }
-
-  @media screen and (max-width: $screen-sm-max) {
-    strong {
-      clear: both;
-      display: block;
-      float: none;
-    }
-
-    a {
-      display: inline-block;
-    }
-  }
-}
-
-//// Result list stripes
-.result:nth-of-type(2n) {
-  background-color: $brand-primary-light;
-}
-
-//// Active Facets #15915
-.sidebar .facet.active {
-  background-color: $brand-secondary;
-  color: $white; //overrides finc standard
-}
-
-.sidebar a.active {
-  background-color: $brand-secondary;
-  color: $white; //overrides finc standard
-}
-
-//// result body width
-.result-body {
-  width: 90%;
-
-  @media screen and (max-width: $screen-xs-max) {
-    float: left;
-  }
-}
-
-//// result links width
-.result-links {
-  width: 10%;
-
-  @media screen and (max-width: $screen-xs-max) {
-    float: right;
-  }
-}
-
-// result list content elements
-.result-formats {
-  margin-right: 1rem;
-}
-
-.result-imprint {
-  margin-top: .7ex;
-}
-
-
-// FOOTER
-footer {
-  background: $brand-primary;
-  color: $white;
-
-  a {
-    color: $white;
-
-    &:hover,
-    &:focus {
-      color: $brand-primary-light;
-    }
-  }
-}
-
-// Add jump-save padding to result IDs
-[id*='jump'] {
-  content: '';
-  display: block;
-  height: 120px;
-  margin-top: -120px;
-  visibility: hidden;
-
-  @media screen and (max-width: $screen-xs-max) {
-    height: $navbar-height-xs;
-    margin-top: -$navbar-height-xs;
-  }
-
-  @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    height: $navbar-height-sm;
-    margin-top: -$navbar-height-sm;
-  }
-}
-
-#content.container {
-  //applies .template-dir-fid #content from fid to all contents
-  padding-top: 20px;
-}
-
-////// margin top
-.margin-t-third {
-  margin-top: ($grid-gutter-width / 6);
-}
-
-.nav a.btn.btn-primary:hover {
-  @extend .btn-primary;
-}
-
-.worldcat-headline {
-  // copies values from .caption class
-  color: $gray;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-// OFF-CANVAS
-//// Hide offcanvas-toggler in detail view/record view
-.template-name-view {
-  .offcanvas-toggler {
-    display: none;
-  }
-}
-
-// Make 100% to prevent headings from pushing toggler off canvas
-.offcanvas-toggler {
-  width: 100%;
-}
-
-// float actual button inside the 100% container
-button.search-filter-toggle {
-  float: right;
-}
-
-// fidis backend url
-.fidis-status {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10000;
-  text-align: center;
-  background: rgba(#000, 0.6);
-  color: #fff;
-}
-
-// #17127 use mainly basic bootstrap style (override finc) for elements beneath
-@media (min-width: 768px) {
-  #modal .modal-content > .close { // Fancy side X button
-    background: transparent;
-    border: 0;
-    color: $white;
-    font-size: 32pt;
-    outline: none;
-    right: -50px;
-
-    &:hover {
-      background: transparent;
-    }
-
-    body.rtl & {
-      left: -50px;
-      right: auto;
-    }
-  }
-}
-
-/* #15914 opt-out iframe for user tracking*/
-#matomo {
-  border: 0;
-  margin-left: -.5rem;
-  padding: 0;
-  width: 100%;
-}
-
-.tag .tag-icon {
-  &.tagged-by-me {
-    @extend .fa;
-    @extend .fa-user;
-  }
-
-  &.tagged-by-others {
-    @extend .fa;
-    @extend .fa-users;
-  }
-}
-
-table.tags {
-  border-top: 1px solid $charcoal;
-  border-bottom: 1px solid $charcoal;
-
-  th, td {
-    padding: .3em 1em .3em 1em;
-    width: 33%;
-    min-width: 40px;
-    @media screen and (max-width: $screen-xs-max) {
-      // hide overlong captions
-      .hidden-xs {
-        visibility: hidden;
-      }
-      border-top: 1px dashed $gray-lighter;
-    }
-  }
-
-  th {
-    border-bottom: 1px solid $charcoal;
-  }
-}
-
-.tag-browse-button a {
-  font-size: larger;
-}
-
-// change hover color for tag badge
-.tagList.loggedin .tag:not(.selected) .badge:hover {
-  background-color: $brand-primary-light;
-}
-
-.tagList .tag {
-  margin-left: -$padding-base-vertical;
-  margin-right: $padding-base-vertical;
-  line-break: unset;
-}
-
-tr.hline {
-  border-top: 1px solid $brand-primary-light;
-}
-
-.tag-record.pull-right {
-  margin-left: 1rem;
-}
-
-.form-tags-list .tags-list-link {
-  font-size: larger;
-}
-
-.list-edit-container {
-  fieldset.list-edit-group {
-    border: none;
-    width: 100%;
-  }
-
-  .list-edit-group, & ~ {
-    h3 {
-      font-size: 1.1rem;
-    }
-
-    .form-group select {
-      @media screen and (max-width: $screen-xs-max) {
-        max-width: 85%;
-      }
-    }
-  }
-
-  [id^="edit_tags"], [id^="edit_note"] {
-    max-width: 85%;
-  }
-}
-
-#modal .modal-dialog input#addtag_tag.form-control {
-  max-width: 85%;
-}
-
-// BROWSE items display
-#list1 {
-  // Remove first list from flex context
-  position: absolute;
-
-  // Style as h2
-  .browse-item {
-    background-color: transparent;
-    border: 0;
-    color: $headings-color;
-    font-size: 1.75rem;
-    margin-bottom: ($line-height-computed / 2);
-   // margin-top: $line-height-computed;
-
-    // Hide the angle icons
-    i {
-      display: none;
-    }
-  }
-}
-
-// Push other lists down to make room for h2-styled list1
-#list2,
-#list3,
-#list4 {
-  margin-top: 4rem;
-}
-
-// BROWSE items display - END
-
-// Temporary Reset of finc hover/focus states
-.btn-primary:hover,
-.btn-primary:focus {
-  background-color: #012020;
-  color: #fff;
-}
-
-select:hover {
-  outline: none;
-}
-
-input[type="checkbox"]:focus,
-input[type="checkbox"]:hover,
-input[type="radio"]:focus,
-input[type="radio"]:hover {
-  outline: none;
-}
-
-header input[type="text"]:hover,
-#searchForm input[type="text"]:hover {
-  box-shadow: none;
-  outline: none;
-}
-
-#searchForm input:hover,
-#searchForm input:focus {
-  border: 0;
-  outline: none;
-}
-
-input[type="text"]:hover {
-  outline: none;
-}
-
-.facet-group:not(.active-filters) .title:hover,
-.facet-group:not(.active-filters) .title:focus {
-  outline: none;
-  background-color: transparent;
-}
-
-.language .dropdown-menu li a,
-.language .dropdown-menu-parent li a {
-  color: #333;
-}
-.banner.navbar {
-  h1 {
-    display: contents;
-  }
-}
-
-.template-name-results .breadcrumbs {
-  margin-top: 15px;
-
-  @media screen and (min-width: $screen-sm-min) {
-    margin-top: 15px;
-  }
-
-  @media screen and (min-width: $screen-lg-min) {
-    margin-top: 20px;
-  }
-}
-
-.template-name-advanced .breadcrumbs {
-  margin-top: -38px;
-
-  @media screen and (min-width: $screen-sm-min) {
-    margin-top: 30px;
-  }
-}
-
-.template-name-results {
-  .navbar-form {
-    margin-bottom: 15px;
-
-    @media screen and (min-width: $screen-lg-min) {
-      margin-bottom: 20px;
-    }
-  }
-}
-
-input[type='text'] header, #searchForm input[type='text'] {
-  border: 1px solid $btn-default-border;
-}
-
-.btn-primary[disabled="disabled"],
-.nav a[disabled="disabled"].btn.btn-primary:hover,
-.nav .channel [disabled="disabled"].btn.btn-primary.channel-record.is-selected,
-.channel .nav [disabled="disabled"].btn.btn-primary.channel-record.is-selected,
-.nav .channel [disabled="disabled"].btn-primary.channel-record.is-selected.search-filter-toggle,
-.channel .nav [disabled="disabled"].btn-primary.channel-record.is-selected.search-filter-toggle,
-.nav a[disabled="disabled"].btn-primary.search-filter-toggle:hover, .btn-primary.active[disabled="disabled"],
-.nav a.active[disabled="disabled"].btn.btn-primary:hover,
-.nav .channel .active[disabled="disabled"].btn.btn-primary.channel-record.is-selected,
-.channel .nav .active[disabled="disabled"].btn.btn-primary.channel-record.is-selected,
-.nav .channel .active[disabled="disabled"].btn-primary.channel-record.is-selected.search-filter-toggle,
-.channel .nav .active[disabled="disabled"].btn-primary.channel-record.is-selected.search-filter-toggle,
-.nav a.active[disabled="disabled"].btn-primary.search-filter-toggle:hover {
-  color: $white;
-}
-
-// Temporary Reset of finc hover/focus states - END
\ No newline at end of file
+@import 'functions/g';
+
+@import 'util/settings';
+
+@import '../vendor/bootstrap/scss/bootstrap-reboot';
+
+@import 'mixins/button';
+@import 'mixins/extend-clickable-area';
+@import 'mixins/font-face';
+@import 'mixins/heading';
+@import 'mixins/hover-border';
+@import 'mixins/hover';
+@import 'mixins/off-canvas';
+@import 'mixins/paragraph';
+@import 'mixins/sticky-footer';
+@import 'mixins/typo-scale';
+
+@import 'util/fonts';
+
+@import 'base/common';
+@import 'base/form';
+
+@import 'blocks/advanced-search';
+@import 'blocks/alert';
+@import 'blocks/badge';
+@import 'blocks/border';
+@import 'blocks/box';
+@import 'blocks/button';
+@import 'blocks/container';
+@import 'blocks/facet';
+@import 'blocks/filters';
+@import 'blocks/flex';
+@import 'blocks/footer';
+@import 'blocks/form';
+@import 'blocks/header';
+@import 'blocks/icon';
+@import 'blocks/item-list';
+@import 'blocks/main';
+@import 'blocks/modal';
+@import 'blocks/nav';
+@import 'blocks/posts';
+@import 'blocks/post';
+@import 'blocks/record';
+@import 'blocks/required';
+@import 'blocks/result';
+@import 'blocks/results';
+@import 'blocks/search';
+@import 'blocks/sidebar';
+@import 'blocks/sr-only';
+@import 'blocks/tabs';
+@import 'blocks/tagline';
+@import 'blocks/tooltip';
+@import 'blocks/to-top';
+@import 'blocks/unstyled-list';
+
+@import 'plugins/slim-select';
diff --git a/themes/fid_bbi/scss/functions/g.scss b/themes/fid_bbi/scss/functions/g.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ed46a9d5ec8ac074c586f33bcd48bb71e67638c9
--- /dev/null
+++ b/themes/fid_bbi/scss/functions/g.scss
@@ -0,0 +1,3 @@
+@function g($factor: 1) {
+  @return $factor * $grid;
+}
diff --git a/themes/fid_bbi/scss/mixins/button.scss b/themes/fid_bbi/scss/mixins/button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ce4789e9ac21e306c3fbc75ee10d1d0a2028ec2b
--- /dev/null
+++ b/themes/fid_bbi/scss/mixins/button.scss
@@ -0,0 +1,76 @@
+@mixin button {
+  align-self: flex-start;
+  background: none;
+  border: 2px solid;
+  color: $button-color;
+  font-family: display-font, sans-serif;
+  font-size: $font-size-special;
+  padding: (g(.5) - 2px) (g() - 2px);
+  vertical-align: top; // Fixing vertical position
+
+  @include hover {
+    background: $button-hover-bg;
+    color: $link-hover-color;
+    outline: 0;
+  }
+
+  &[disabled] {
+    color: rgba($text-color, .25);
+    pointer-events: none;
+  }
+}
+
+@mixin button-small {
+  @include button;
+  font-family: text-font, sans-serif;
+  font-size: $font-size-small;
+  font-weight: bold;
+  padding: (g(.25) - 2px) (g(.75) - 2px);
+}
+
+// Skewed background for icon
+@mixin button-icon-bg($size: small, $position: left) {
+  overflow: hidden;
+  position: relative;
+
+  &::before {
+    background: currentColor;
+    content: '';
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    transform: skew(-$skew);
+    transform-origin: 0 0;
+    width: g(1.75);
+
+    @if ($size == big) {
+      width: g(2.25);
+    }
+
+    @if ($position == right) {
+      left: auto;
+      right: 0;
+      transform-origin: 100% 100%;
+    }
+  }
+
+  .icon {
+    color: #fff;
+    float: left;
+    margin: 0 g() 0 (g(-.5) + 1px);
+
+    @if ($size == big) {
+      margin: 0 g(1.5) 0 (g(-.5) + 1px);
+    }
+
+    @if ($position == right) {
+      margin: 0 g(-.5) 0 g(.75);
+
+      @if ($size == big) {
+        margin: 0 g(-.5) 0 g(1.25);
+      }
+    }
+  }
+}
diff --git a/themes/fid_bbi/scss/mixins/extend-clickable-area.scss b/themes/fid_bbi/scss/mixins/extend-clickable-area.scss
new file mode 100644
index 0000000000000000000000000000000000000000..aaae29c94449c2aef9f9d880bffcae3c1f47a647
--- /dev/null
+++ b/themes/fid_bbi/scss/mixins/extend-clickable-area.scss
@@ -0,0 +1,11 @@
+@mixin extend-clickable-area {
+  &::after {
+    bottom: 0;
+    content: '';
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
diff --git a/themes/fid_bbi/scss/mixins/font-face.scss b/themes/fid_bbi/scss/mixins/font-face.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c6106eb0744a7f8d1983d0973531b5c17584644d
--- /dev/null
+++ b/themes/fid_bbi/scss/mixins/font-face.scss
@@ -0,0 +1,8 @@
+@mixin font-face($family, $src, $style: normal, $weight: normal) {
+  @font-face {
+    font-family: $family;
+    font-style: $style;
+    font-weight: $weight;
+    src: url('#{$src}.woff2') format('woff2'), url('#{$src}.woff') format('woff');
+  }
+}
diff --git a/themes/fid_bbi/scss/mixins/heading.scss b/themes/fid_bbi/scss/mixins/heading.scss
new file mode 100644
index 0000000000000000000000000000000000000000..26d843ff84377105041b5141230a2a2e010eae4e
--- /dev/null
+++ b/themes/fid_bbi/scss/mixins/heading.scss
@@ -0,0 +1,48 @@
+@mixin heading($level) {
+  @if $level == 1 {
+    @include typo-scale(2);
+    color: $heading-color;
+    font-family: display-font, sans-serif;
+    font-weight: normal;
+    margin: g(1.5) auto;
+    text-align: center;
+
+    @media #{$bp4} {
+      @include typo-scale(3);
+      margin: g(2) auto;
+    }
+  }
+
+  @if $level == 2 {
+    @include paragraph;
+    @include typo-scale(1);
+    color: $heading-color;
+    font: #{round($font-size-special * $ratio)}/#{$line-height * 1.5} display-font, sans-serif;
+    margin-top: g(2);
+
+    h1 + & {
+      margin-top: g(-1);
+    }
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  @if $level == 3 {
+    @include paragraph;
+    color: $text-color;
+    font: #{$font-size-special}/#{$line-height} display-font, sans-serif;
+    margin-top: g(2);
+
+    h2 + &,
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  // Fix bad markup
+  strong {
+    font-weight: normal;
+  }
+}
diff --git a/themes/fid_bbi/scss/mixins/hover-border.scss b/themes/fid_bbi/scss/mixins/hover-border.scss
new file mode 100644
index 0000000000000000000000000000000000000000..87ef6069fd4eaccf42ae8e4ca0982d40a5bb6a05
--- /dev/null
+++ b/themes/fid_bbi/scss/mixins/hover-border.scss
@@ -0,0 +1,21 @@
+@mixin hover-border {
+  position: relative;
+
+  &::after {
+    border-bottom: 2px solid;
+    content: '';
+    display: block;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    transition: width $td;
+    width: 0;
+  }
+
+  @include hover {
+    &::after {
+      left: 0;
+      width: 100%;
+    }
+  }
+}
diff --git a/themes/fid_bbi/scss/mixins/hover.scss b/themes/fid_bbi/scss/mixins/hover.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bc39dab82b34748556f5d49074e27c89a3eacc92
--- /dev/null
+++ b/themes/fid_bbi/scss/mixins/hover.scss
@@ -0,0 +1,7 @@
+@mixin hover {
+  &:active,
+  &:focus,
+  &:hover {
+    @content;
+  }
+}
diff --git a/themes/fid_bbi/scss/mixins/off-canvas.scss b/themes/fid_bbi/scss/mixins/off-canvas.scss
new file mode 100644
index 0000000000000000000000000000000000000000..967759d9976f47c8abb5e4ccb66ec16af9255db7
--- /dev/null
+++ b/themes/fid_bbi/scss/mixins/off-canvas.scss
@@ -0,0 +1,58 @@
+// NOTE: Not using `transform` here since this would create a new context for
+// `position: fixed`, and we want to be able to use a fixed header.
+
+@mixin off-canvas {
+  background: #fff;
+  bottom: 0;
+  left: 100%;
+  margin: 0;
+  max-width: none;
+  opacity: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch; // Enable "momentum" scrolling on Safari
+  padding-top: g(3.5); // Space for header above
+  position: fixed;
+  top: 0;
+  transition: opacity $td, visibility $td, left $td;
+  visibility: hidden;
+  width: 100%;
+  z-index: 9;
+
+  &.-open {
+    left: 0;
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+@mixin on-canvas {
+  background: none;
+  left: auto;
+  opacity: 1;
+  overflow: visible;
+  padding-top: 0;
+  position: static;
+  top: auto;
+  visibility: visible;
+  width: auto;
+  z-index: 0;
+}
+
+@mixin off-canvas-header {
+  align-items: center;
+  background: #fff;
+  box-shadow: 0 2px 0 $text-color;
+  display: flex;
+  justify-content: space-between;
+  left: 0;
+  padding: g(.5) g();
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+
+  h2,
+  h3 {
+    margin: 0;
+  }
+}
diff --git a/themes/fid_bbi/scss/mixins/paragraph.scss b/themes/fid_bbi/scss/mixins/paragraph.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8b60db80a544de53a891b9d26357c80bfb38a330
--- /dev/null
+++ b/themes/fid_bbi/scss/mixins/paragraph.scss
@@ -0,0 +1,7 @@
+@mixin paragraph {
+  margin: 0 0 g();
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/themes/fid_bbi/scss/mixins/sticky-footer.scss b/themes/fid_bbi/scss/mixins/sticky-footer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ba86e8c7e9ce30aa92bd4735b2a90effac667251
--- /dev/null
+++ b/themes/fid_bbi/scss/mixins/sticky-footer.scss
@@ -0,0 +1,28 @@
+// Making the footer sticky, i.e. it always appears at the bottom of the viewport or below,
+// even if the content does not fill the whole area in between
+// https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css
+
+@mixin sticky-footer($role) {
+  // 1. Avoid the IE 10-11 `min-height` bug
+  // 2. Set `flex-shrink` to `0` to prevent some browsers from letting these items shrink
+  // to smaller than their content's default minimum size
+  // https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
+
+  @if $role == root {
+    display: flex;
+    flex-direction: column;
+    height: 100vh; // 1
+  } @else if $role == header or $role == footer {
+    flex: none; // 2
+  } @else if $role == content {
+    flex: 1 0 auto; // 2
+    width: 100%;
+
+    &::after {
+      content: '\00a0'; // &nbsp;
+      display: block;
+      height: 0;
+      visibility: hidden;
+    }
+  }
+}
diff --git a/themes/fid_bbi/scss/mixins/typo-scale.scss b/themes/fid_bbi/scss/mixins/typo-scale.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0c3c3c678c228d78d2b312953c69b132aeb85c13
--- /dev/null
+++ b/themes/fid_bbi/scss/mixins/typo-scale.scss
@@ -0,0 +1,26 @@
+// Scale font size and line height in fixed intervals, emulating a baseline grid
+
+$typo-scale-allow-half-lines: true !default;
+$typo-scale-sizing-factor: 1 !default;
+
+@mixin typo-scale($increment) {
+  font-size: round(ms($increment) * $typo-scale-sizing-factor);
+
+  @if $typo-scale-allow-half-lines {
+    line-height: floor(ms($increment) * $typo-scale-sizing-factor / ($line-height / 2) + 1) / 2 * $line-height;
+  } @else {
+    line-height: floor(ms($increment) * $typo-scale-sizing-factor/ $line-height + 1) * $line-height;
+  }
+}
+
+@function ms($increment, $value: $font-size, $ratio: $ratio) {
+  @if $increment > 0 {
+    @for $i from 1 through $increment {
+      $value: ($value * $ratio);
+    }
+  } @else {
+    $value: $font-size;
+  }
+
+  @return $value;
+}
diff --git a/themes/fid_bbi/scss/plugins/slim-select.scss b/themes/fid_bbi/scss/plugins/slim-select.scss
new file mode 100644
index 0000000000000000000000000000000000000000..119a3907598308e87828ebb7b230095bafdc889d
--- /dev/null
+++ b/themes/fid_bbi/scss/plugins/slim-select.scss
@@ -0,0 +1,137 @@
+@import '../../vendor/slim-select/dist/slimselect';
+
+.ss-main {
+  color: $text-color;
+
+  .ss-multi-selected {
+    background: mix(#000, #fff, 5);
+    border: 2px solid;
+    border-radius: 0;
+    padding: g(.5) - 2px;
+    transition: box-shadow $td;
+
+    @include hover {
+      background: #fff;
+    }
+
+    &.ss-open-above,
+    &.ss-open-below {
+      background: #fff;
+      box-shadow: 0 0 0 g(.25) $shade;
+    }
+
+    .ss-add {
+      // +/x icon
+      transform: scale(1.2);
+      transform-origin: 0 0;
+
+      .ss-plus {
+        background: currentColor;
+
+        &::after {
+          background: currentColor;
+        }
+      }
+    }
+
+    .ss-values {
+      margin: g(-.25) 0 g(-.5) g(-.25);
+      min-height: g();
+
+      .ss-disabled {
+        color: $text-muted-color;
+        font-style: italic;
+        line-height: $line-height;
+        margin: g(.25) g(.5) g(.5) g(.25);
+        padding: 0;
+      }
+
+      .ss-value {
+        animation: none;
+        background: $text-muted-color;
+        border-radius: 0;
+        font-size: $font-size-small;
+        font-weight: 500;
+        margin: 0 g(.25) g(.25) 0;
+        overflow: hidden; // For icon background
+        padding: g(.25) g(.5);
+        z-index: 0;
+
+        .ss-value-delete {
+          // "x" icon
+          @include button-icon-bg(small, right);
+          align-self: flex-end;
+          display: inline-block;
+          font-size: g();
+          height: g(1.5);
+          line-height: g(1.5) - 1px;
+          margin: g(-.25) g(-.5) g(-.25) g(.5);
+          min-width: g(1.5);
+          overflow: visible;
+          text-align: center;
+          width: g(1.5);
+
+          &::before {
+            background: $link-color;
+            z-index: -1;
+          }
+
+          @include hover {
+            &::before {
+              background: $link-hover-color;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.ss-content {
+  border: 2px solid;
+  border-top: 0;
+  margin-top: -2px;
+
+  .ss-open-above + & {
+    border-bottom: 0;
+    border-top: 2px solid;
+    transform: translateY(1px); // Fix hairline when list opens above
+  }
+
+  .ss-list {
+    max-height: g(9.75);
+
+    .ss-option {
+      padding: g(.25) g(.5);
+
+      &.ss-disabled {
+        color: $text-muted-color;
+        font-style: italic;
+      }
+
+      &.ss-highlighted,
+      &:not(.ss-disabled):hover {
+        background: rgba($color-b, .1);
+        color: $link-hover-color;
+      }
+
+      .ss-search-highlight {
+        background: none;
+      }
+    }
+  }
+
+  .ss-search {
+    input {
+      border: 2px solid;
+      border-radius: 0;
+      height: auto;
+      padding: g(.25) - 2px;
+
+      &:focus {
+        border: 2px solid;
+        box-shadow: none;
+      }
+    }
+  }
+}
diff --git a/themes/fid_bbi/scss/util/fonts.scss b/themes/fid_bbi/scss/util/fonts.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6895d7c7817c1174e24311ca1ca8c73505483089
--- /dev/null
+++ b/themes/fid_bbi/scss/util/fonts.scss
@@ -0,0 +1,7 @@
+@include font-face(display-font, 'fonts/share-tech-v9-latin-regular');
+
+@include font-face(text-font, 'fonts/fira-sans-v10-latin-300');
+@include font-face(text-font, 'fonts/fira-sans-v10-latin-300italic', italic);
+@include font-face(text-font, 'fonts/fira-sans-v10-latin-regular', normal, 500);
+@include font-face(text-font, 'fonts/fira-sans-v10-latin-500', normal, bold);
+@include font-face(text-font, 'fonts/fira-sans-v10-latin-500italic', italic, bold);
diff --git a/themes/fid_bbi/scss/util/settings.scss b/themes/fid_bbi/scss/util/settings.scss
new file mode 100644
index 0000000000000000000000000000000000000000..67944e2d9cdc1a6dd589555b5781bc84acdc7cd2
--- /dev/null
+++ b/themes/fid_bbi/scss/util/settings.scss
@@ -0,0 +1,45 @@
+// Opaque colors
+$color-a: #00a376; // Green (PANTONE 2242 C)
+$color-b: #e0004d; // Red (PANTONE 1925 C)
+$color-c: mix($color-a, adjust-hue($color-a, 45), 20); // Blue
+$color-d: #616971; // Gray
+
+$link-color: $color-b;
+$button-color: $color-b;
+$link-hover-color: mix(#000, $link-color, 20);
+$heading-color: $color-a;
+$text-color: #000;
+$text-muted-color: $color-d;
+
+// Semi-opaque colors
+$button-hover-bg: rgba($color-b, .1);
+$shade-weak: rgba(#000, .05);
+$shade: rgba(#000, .1);
+$shade-strong: rgba(#000, .2);
+$shine: rgba(#fff, .1);
+
+// Dimensions
+$grid: 28px;
+
+$font-size: 18.666666px; // $grid / 1.5
+$font-size-small: 16px;
+$font-size-special: 23px; // Match small text in logo
+$line-height: g();
+$line-width: g(28);
+$max-width: g(48);
+
+// Breakpoints (mobile first)
+$bp1: '(min-width: 400px)';
+$bp2: '(min-width: 640px)';
+$bp3: '(min-width: 900px)';
+$bp4: '(min-width: 1024px)';
+$bp5: '(min-width: 1346px)';
+
+// Typography
+$ratio: 1.425;
+
+// Timings
+$td: .25s; // Transition duration
+
+// Misc
+$skew: 11deg;
diff --git a/themes/fid_bbi/templates/Auth/AbstractBase/login.phtml b/themes/fid_bbi/templates/Auth/AbstractBase/login.phtml
new file mode 100644
index 0000000000000000000000000000000000000000..20f6ca46e6c32f624128db79d1f0cad253951b97
--- /dev/null
+++ b/themes/fid_bbi/templates/Auth/AbstractBase/login.phtml
@@ -0,0 +1,46 @@
+<!-- fid_bbi: Auth - AbstractBase - login -->
+<?php $account = $this->auth()->getManager(); ?>
+<?php $sessionInitiator = $account->getSessionInitiator($this->serverUrl($this->url('myresearch-home'))); ?>
+
+<?php if (!$sessionInitiator): // display default login form if no login URL provided ?>
+  <form method="post" action="<?=$this->url('myresearch-home')?>" name="loginForm" class="form">
+    <?=$this->auth()->getLoginFields()?>
+    <input type="hidden" name="auth_method" value="<?=$account->getAuthMethod()?>">
+    <input type="hidden" name="csrf" value="<?=$this->escapeHtmlAttr($account->getCsrfHash())?>">
+
+    <div class="form_footer">
+      <button class="-icon" type="submit" name="processLogin">
+        <?=$this->icon('small/login')?>
+        <?=$this->transEsc('Login')?>
+      </button>
+
+      <ul class="form_footer-links">
+        <?php if ($account->supportsRecovery()): ?>
+          <li>
+            <a
+              href="<?=$this->url('myresearch-recover')?>?auth_method=<?=$account->getAuthMethod()?>"
+            >
+              <?=$this->transEsc('Forgot Password')?>
+            </a>
+          </li>
+        <?php endif; ?>
+        <?php if ($account->supportsCreation()): ?>
+          <li>
+            <?php // NOTE: Class `createAccountLink` kept for E2E tests ?>
+            <a
+              class="createAccountLink"
+              href="<?=$this->url('myresearch-account')?>?auth_method=<?=$account->getAuthMethod()?>"
+            >
+              <?=$this->transEsc('Create New Account')?>
+            </a>
+          </li>
+        <?php endif; ?>
+      </ul>
+    </div>
+  </form>
+<?php else: ?>
+  <a href="<?=$this->escapeHtmlAttr($sessionInitiator)?>" data-lightbox-ignore>
+    <?=$this->transEsc('Institutional Login')?>
+  </a>
+<?php endif; ?>
+<!-- fid_bbi: Auth - AbstractBase - login - END -->
diff --git a/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-allSubjectHeadingsExtended.phtml b/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-allSubjectHeadingsExtended.phtml
index d2ca262b2d37b86fcae6ad02fd47603cdd70f01c..6cb99b962fbeb955c85c9dcb496d2b1a4c2895b7 100644
--- a/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-allSubjectHeadingsExtended.phtml
+++ b/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-allSubjectHeadingsExtended.phtml
@@ -1,3 +1,4 @@
+<!-- fid_bbi: RecordDriver - DefaultRecord - data-allSubjectHeadingsExtended -->
 <?php foreach ($data as $field): ?>
   <div class="subject-line" property="keywords">
     <?php $subject = ''; ?>
@@ -10,3 +11,4 @@
     <?php endif; ?>
   </div>
 <?php endforeach; ?>
+<!-- fid_bbi: RecordDriver - DefaultRecord - data-allSubjectHeadingsExtended - END -->
diff --git a/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-publicationDetails.phtml b/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-publicationDetails.phtml
index bb12e7c2d498613c7a883a81aef7f31c1f0cf7ec..d67d1cb2c1251624416bed3e55bcadaf45ff71bf 100644
--- a/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-publicationDetails.phtml
+++ b/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-publicationDetails.phtml
@@ -1,4 +1,4 @@
-<!-- fid_bbi: RecordDriver - solrDefault - data-publicationDetails -->
+<!-- fid_bbi: RecordDriver - DefaultRecord - data-publicationDetails -->
 <? if (!empty($data)): ?>
 <div itemscope itemtype="http://schema.org/publisher">
     <? foreach ((array)$data as $field): ?>
@@ -27,4 +27,4 @@
     <? endforeach; ?>
 </div>
 <? endif ?>
-<!-- fid_bbi: RecordDriver - solrDefault - data-publicationDetails - END -->
+<!-- fid_bbi: RecordDriver - DefaultRecord - data-publicationDetails - END -->
diff --git a/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-tags.phtml b/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-tags.phtml
index 2aa23e425bb0ed548907dec24f8c6b10da9f79f2..0ee9c33dd711759404cad387f67c22026a8c1eca 100644
--- a/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-tags.phtml
+++ b/themes/fid_bbi/templates/RecordDriver/DefaultRecord/data-tags.phtml
@@ -1,3 +1,4 @@
+<!-- fid_bbi: RecordDriver - DefaultRecord - data-tags -->
 <?php
     /*
      * this is a copy of themes/bootstrap3/templates/RecordDriver/DefaultRecord/data-tags.phtml
@@ -26,3 +27,4 @@
     <?=$this->context($this)->renderInContext('record/taglist', ['tagList' => $tagList, 'loggedin' => $loggedin]) ?>
 </td></tr>
 <?php endif; ?>
+<!-- fid_bbi: RecordDriver - DefaultRecord - data-tags - END -->
diff --git a/themes/fid_bbi/templates/RecordDriver/SolrAI/result-list.phtml b/themes/fid_bbi/templates/RecordDriver/SolrAI/result-list.phtml
index ccb4e5020b9b9d27dd169a6fd1aa898d54cf1f28..bea7b490f0bd2c9e45211f5598191119a64d5f62 100644
--- a/themes/fid_bbi/templates/RecordDriver/SolrAI/result-list.phtml
+++ b/themes/fid_bbi/templates/RecordDriver/SolrAI/result-list.phtml
@@ -218,11 +218,11 @@ if ($cover):
         ?>
         <span class="hidden-xs">
             <i class="fa fa-fw fa-qrcode" aria-hidden="true"></i> <a href="<?=$this->escapeHtmlAttr($QRCode);?>" class="qrcodeLink"><?=$this->transEsc('qrcode_show')?></a>
-          <div class="qrcode hidden">
+          <span class="qrcode hidden">
             <script type="text/template" class="qrCodeImgTag">
               <img alt="<?=$this->transEsc('QR Code')?>" src="<?=$this->escapeHtmlAttr($QRCode);?>"/>
             </script>
-          </div>
+          </span>
           <br/>
         </span>
       <?php endif; ?>
diff --git a/themes/fid_bbi/templates/RecordTab/worldcat.phtml b/themes/fid_bbi/templates/RecordTab/worldcat.phtml
index 6569b3e3400a50a19dbd475c4f645a6074d3dd4e..c785f556a8f0792fb8005f1e60cd0735897962b0 100644
--- a/themes/fid_bbi/templates/RecordTab/worldcat.phtml
+++ b/themes/fid_bbi/templates/RecordTab/worldcat.phtml
@@ -1,4 +1,4 @@
-<!-- fid: recordtab - worldcat -->
+<!-- fid_bbi: recordtab - worldcat -->
 <? $script = <<<JS
   $(document).ready(function() {
       var recordId = $('.hiddenId').val();
@@ -32,4 +32,4 @@ if (!empty($oclc)): ?>
   <a href="<?=$url?>" target="_blank"><?=$this->transEsc('Link to WorldCat record')?></a>
 </div>
 <?php endif; ?>
-<!-- fid: recordtab - worldcat - END -->
+<!-- fid_bbi: recordtab - worldcat - END -->
diff --git a/themes/fid_bbi/templates/footer.phtml b/themes/fid_bbi/templates/footer.phtml
index 55edb703207bbd1a121e458c699b19fd3a45a48d..f09dc46f2f73c8863f5928fc96d4aa07f5fe9049 100644
--- a/themes/fid_bbi/templates/footer.phtml
+++ b/themes/fid_bbi/templates/footer.phtml
@@ -1,57 +1,55 @@
-<!-- finc: footer -->
-<footer class="hidden-print">
-  <div class="footer-container">
-    <div class="footer-column">
-      <p><strong><?=$this->transEsc('Search Options')?></strong></p>
-      <ul>
-          <li><a href="<?=$this->url('search-advanced')?>"><?=$this->transEsc('Advanced Search')?></a></li>
-          <li><a href="<?=$this->url('search-sources')?>"><?=$this->transEsc('Data Collection')?></a></li>
-          <li><a data-toggle="collapse" data-target="#searchbox-snippet"><?=$this->transEsc('embed_searchbox_button')?></a></li>
-      </ul>
-    </div>
-    <div class="footer-column">
-      <p><strong><?=$this->transEsc('More Information')?></strong></p>
-        <ul>
-            <li><a href="<?=$this->url('content-page', ['page' => 'about'])?>"><?=$this->transEsc('About Us')?></a></li>
-            <li><a href="<?=$this->url('content-page', ['page' => 'faq'])?>"><?=$this->transEsc('FAQs')?></a></li>
-            <li><a href="<?=$this->url('fid/user/terms')?>"><?=$this->transEsc('Terms of Use')?></a></li>
+<!-- fid_bbi: footer -->
+<footer class="footer">
+  <div class="footer_wrap">
+    <div class="box -left">
+      <div class="flex -break-medium -gap">
+        <div class="column">
+          <ul class="footer_links">
             <li><a href="<?=$this->url('fid/user/policy')?>"><?=$this->transEsc('Privacy Policy')?></a></li>
-        </ul>
-    </div>
-    <div class="footer-column">
-      <p><strong><?=$this->transEsc('Contact')?></strong></p>
-      <p>
-        <?=$this->transEsc('Project Coordination')?>: N. N.<br/>
-        <?=$this->transEsc('Email')?>: <a data-lightbox href="<?=$this->url('feedback-home')?>">fid@hab.de</a></p>
-    </div>
-      <?php if ($this->permission()->allowDisplay('fid.ReadList')): ?>
-          <div class="footer-column">
-              <p><strong><?=$this->transEsc('fid::admin_section')?></strong></p>
-              <p><a href="<?=$this->url('fid/admin/list')?>"><?=$this->transEsc('fid::permission_read_user_list')?></a></p>
-              <p><a href="<?=$this->url('admin/tags', ['action' => 'List'])?>"><?=$this->transEsc('Tag Management')?></a></p>
+            <li><a href="#TODO">Impressum</a></li>
+            <li><a href="<?=$this->url('feedback-home')?>"><?=$this->transEsc('Contact')?></a></li>
+          </ul>
+          <div class="footer_contact">
+            <address>
+              <?php // TODO: Translate other contact strings? ?>
+              <p>Fachinformationsdienst <br>Buch-, Bibliotheks- und Informationswissenschaft</p>
+              <p>Anna Lingnau</p>
+              <p><?=$this->transEsc('Project Coordination')?></p>
+              <p>Herzog August Bibliothek</p>
+              <p>Postfach 1364</p>
+              <p>38299 Wolfenbüttel</p>
+              <p><br>Tel. +49 (0) 5331 808-321</p>
+              <p><a href="mailto:fid@hab.de">fid@hab.de</a></p>
+            </address>
           </div>
-      <?php endif; ?>
-  </div>
-    <pre id="searchbox-snippet" class="collapse">
-<strong><?=$this->transEsc('embed_searchbox_help',["%%bbi_url%%" => $this->url('home',[],['force_canonical'=>true])])?></strong>
-    <?=$this->escapeHtml('<!-- Search BBI -->
-    <form method="get" action="'.$this->url('search-results',[],['force_canonical'=>true]).'" name="bbisearch">
-        <input type="text" name="lookfor" class="inputbox" value="">
-        <input type="submit" name="btnBBI" value="BBI-Suche">
-    </form>
-    <!-- Search BBI - END -->')?></pre>
-  <?php /* finc branding footer */ ?>
-  <hr>
-  <div class="footer-container powered-by">
-    <div class="footer-column">
-      <?=$this->layout()->poweredBy?>
-      <span>Powered by</span>
-      <a href="https://vufind.org/" title="vufind.org" target="_blank"><img src="<?=$this->imageLink('vufind_logo.png')?>" alt="powered by VuFind - VuFind Logo"/></a>
-      <a href="http://blog.finc.info" title="Blog FinC-Team" target="_blank"><img src="<?=$this->imageLink('finc_logo.png')?>" alt="powered by finc - finc Logo"/></a>
+        </div>
+        <div class="column">
+          <div class="footer_partners">
+            <a href="https://www.ub.uni-leipzig.de/">
+              <img src="<?=$this->imageLink('ubl-logo.svg')?>" alt="Universitätsbibliothek Leipzig">
+            </a>
+            <?php // TODO: Update HAB URL once SSL is available ?>
+            <a href="http://hab.de/">
+              <img src="<?=$this->imageLink('hab-logo.svg')?>" alt="Herzog August Bibliothek Wolfenbüttel">
+            </a>
+            <a href="https://www.dfg.de/">
+              <img src="<?=$this->imageLink('dfg-logo.svg')?>" alt="DFG - Deutsche Forschungsgemeinschaft">
+            </a>
+            <a href="https://finc.info/">
+              <img src="<?=$this->imageLink('finc-logo.png')?>" alt="finc">
+            </a>
+            <a href="https://vufind.org/">
+              <img src="<?=$this->imageLink('vufind-logo.svg')?>" alt="VuFind">
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
+
+  <button class="to-top" id="to-top" type="button" onclick="theme.scrollToTop()">
+    <?=$this->icon('small/arrow-right')?>
+    <span class="sr-only"><?=$this->transEsc('Scroll to top')?></span>
+  </button>
 </footer>
-<?php if ($this->fidisStatus): ?>
-  <div class="fidis-status"><?=$this->fidisStatus?></div>
-<?php endif; ?>
-<!-- finc: Footer - END -->
+<!-- fid_bbi: footer - END -->
diff --git a/themes/fid_bbi/templates/get-it-box/links.phtml b/themes/fid_bbi/templates/get-it-box/links.phtml
index a6409e93e314b3118e02308eacd8b4c428d3d900..9e7d12f55e99766119365d4b2169ebd6c3763d79 100644
--- a/themes/fid_bbi/templates/get-it-box/links.phtml
+++ b/themes/fid_bbi/templates/get-it-box/links.phtml
@@ -1,4 +1,4 @@
-<!-- fid_adlr: get-it-box - links -->
+<!-- fid_bbi: get-it-box - links -->
 <div class="facet-group" id="get-it-links-<?= $getitConfig['accordeonColor'] ?>">
   <button class="title collapsed" id="get-it-button" data-toggle="collapse" href="#side-collapse-links-data">
     <?= $getitConfig['accordeonHeadline'] ?>
@@ -50,11 +50,11 @@
 $closeAccordeonOnMobile = <<<JS
   $(document).ready(function() {
     if( !$("#search-main-dropdown").is(":visible")) {
-      $('#get-it-button').click();    
+      $('#get-it-button').click();
     }
   });
 JS;
 ?>
 <?=$this->inlineScript(\Zend\View\Helper\HeadScript::SCRIPT, $closeAccordeonOnMobile, 'SET');?>
 
-<!-- fid_adlr: get-it-box - links - END -->
\ No newline at end of file
+<!-- fid_bbi: get-it-box - links - END -->
diff --git a/themes/fid_bbi/templates/header.phtml b/themes/fid_bbi/templates/header.phtml
index c22a5876507bc3327b6dcc993da86ce917040427..e6d78e4a4e42ce69e79cc8735f3f6e9c08b998b5 100644
--- a/themes/fid_bbi/templates/header.phtml
+++ b/themes/fid_bbi/templates/header.phtml
@@ -1,96 +1,58 @@
 <!-- fid_bbi: header -->
-<?php $account = $this->auth()->getManager(); ?>
-<?php /* This navbar is the sticky element in the header - CK; you can use 'affix' as an alternative to  'navbar-fixed-top' like so:
- <div data-spy="affix" data-offset-top="1" class="navbar">
- Do not use 'navbar-fixed-top' and 'affix' at the same time. When using 'affix', set the variables for
- '$navbar-height', '$navbar-height-xs' and '$navbar-height-sm' in _customVariables.scss to '=0'
- or set the paddings-top under 'body' in compiled.scss to '=0'
- */ ?>
-<div class="banner container navbar navbar-fixed-top flex-column-xs">
-  <?php /* This element only holds the mobile toggler and the navbar-brand/library name - CK */ ?>
-  <div class="navbar-header flex-long">
-    <?php /* mobile navigation toggler - CK */ ?>
-    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header-collapse">
-      <span class="sr-only">Toggle navigation</span>
-      <i class="fa fa-bars" aria-hidden="true"></i>
-    </button>
-
+<header class="header">
+  <div class="header_main">
     <h1>
-      <a class="navbar-brand lang-<?=$this->layout()->userLang?>" href="<?=$this->url('home')?>">
-        <?php /* Custom finc header - CK */ ?>
-          <img src="<?=$this->imageLink('headerlogo.png')?>" class="hidden-xs" alt="Logo <?=$this->transEsc("LibraryName")?>" title="<?=$this->transEsc("LibraryName")?>"> <span><?=$this->transEsc("LibraryNameShort")?></span>
-        <?php /*  Custom finc header - END */ ?>
+      <a class="header_logo" href="<?=$this->url('home')?>">
+        <?=$this->icon('../images/fid-bbi-logo', '')?>
+        <?php
+        // NOTE: These strings are hardcoded because they mirror the logo,
+        // which is language-independent
+        ?>
+        <span class="sr-only">FID BBI -</span>
+        <span class="header_logo-overlay">
+          Fachinformationsdienst <br>
+          Buch-, Bibliotheks- und <br>
+          <span style="margin-left: 1px">Informationswissenschaft</span>
+        </span>
       </a>
     </h1>
-  </div>
-
-  <div class="flex-column flex-short">
-  <?php if (!isset($this->layout()->renderingError)): ?>
-    <div id="header-collapse" class="collapse navbar-collapse">
-      <?php /* finc: right-hand navbar section - see flex-container in SCSS:
-              we need this order on XS: navbar-right searchbox
-              but reverse it on anything but mobile */ ?>
-      <nav>
-        <ul class="nav navbar-nav navbar-right flip">
-          <? $cart = $this->cart();
-          if ($cart->isActive()): ?>
-            <li id="cartSummary">
-              <a id="cartItems" class="btn" data-lightbox title="<?=$this->transEsc('View Book Bag')?>" href="<?=$this->url('cart-home')?>">
-                <i class="fa fa-thumb-tack" aria-hidden="true"></i> <strong><?=count($cart->getItems())?></strong> <span class="cart-label"><?=$this->transEsc('items')?></span>
-                <span class="hidden-sm full<?=!$cart->isFull() ? ' hidden' : ''?>">(<?=$this->transEsc('bookbag_full')?>)</span>
-              </a>
-            </li>
-          <?php endif; ?>
-
-          <?php if (isset($this->layout()->themeOptions) && count($this->layout()->themeOptions) > 1): ?>
-            <li class="theme dropdown">
-              <form method="post" name="themeForm" id="themeForm">
-                <input type="hidden" name="ui"/>
-              </form>
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><?=$this->transEsc("Theme")?> <strong class="caret"></strong></a>
 
-              <ul class="dropdown-menu">
-                <?php foreach ($this->layout()->themeOptions as $current): ?>
-                  <li<?=$current['selected'] ? ' class="active"' : ''?>>
-                    <a href="#" onClick="document.themeForm.ui.value='<?=$this->escapeHtmlAttr($current['name'])?>';document.themeForm.submit()"><?=$this->transEsc($current['desc'])?></a>
-                  </li>
-                <?php endforeach; ?>
-              </ul>
-            </li>
-          <?php endif; ?>
+    <div class="header_nav">
+      <?=$this->render('nav.phtml')?>
 
-          <?php if (isset($this->layout()->allLangs) && count($this->layout()->allLangs) > 1): ?>
-            <li class="language dropdown">
-              <form method="post" name="langForm" id="langForm">
-                <input type="hidden" name="mylang"/>
-              </form>
-              <span id="langmenu">
-                <? /* Hide active language and show only second choice,
-                      add language code in css for BG image - CK */ ?>
-                <?php foreach ($this->layout()->allLangs as $langCode => $langName): ?>
-                  <span<?=$this->layout()->userLang == $langCode ? ' class="hidden"' : ''?>>
-                    <a class="btn <?=$langCode?>" href="#" onClick="document.langForm.mylang.value='<?=$langCode?>';document.langForm.submit()"><?=$this->displayLanguageOption($langName)?></a>
-                  </span>
-                <?php endforeach; ?>
-              </span>
-            </li>
-          <?php endif; ?>
-        </ul>
-      </nav>
-    </div>
-  <?php endif; ?>
-    <?php /* finc searchbox: we use searchbox here so it becomes part of the sticky header,
-        we need to place this after the navbar-right for anything but mobile  - see flex-container in SCSS:*/ ?>
-    <?php if ($this->layout()->searchbox !== false): ?>
-    <?php /* FID BBI: Do not use .container class here ! - CK */ ?>
-      <div class="search">
-        <nav class="nav searchbox hidden-print">
+      <div class="box -header">
+        <div class="search">
           <?=$this->layout()->searchbox?>
-        </nav>
+
+          <div class="search_links">
+            <ul>
+              <li>
+                <a class="link-with-icon" href="<?=$this->url('search-sources')?>">
+                  <?=$this->icon('small/arrow-right')?>
+                  <?=$this->transEsc('Data Collection')?>
+                </a>
+              </li>
+              <li>
+                <?php
+                $newReleasesUrl = $this->url('search-results')
+                  . $this->config()->get('config')->RawQueries['new_releases'];
+                ?>
+                <a class="link-with-icon" href="<?=$newReleasesUrl?>">
+                  <?=$this->icon('small/arrow-right')?>
+                  <?=$this->transEsc('New Publications')?>
+                </a>
+              </li>
+              <li>
+                <a class="link-with-icon" href="<?=$this->url('search-advanced')?>">
+                  <?=$this->icon('small/arrow-right')?>
+                  <?=$this->transEsc("Advanced Search")?>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
-    <?php endif; ?>
-    <?php /* finc searchbox - END */ ?>
+    </div>
   </div>
-</div>
-<?php /* If you want to use searchbox in a separate row, insert it here as in bootstrap theme - CK */ ?>
-<!-- fid_bbi: header -->
+</header>
+<!-- fid_bbi: header - END -->
diff --git a/themes/fid_bbi/templates/html-head.phtml b/themes/fid_bbi/templates/html-head.phtml
new file mode 100644
index 0000000000000000000000000000000000000000..e9a76f1c7f0b9007c9718ae24bb07b53d9481424
--- /dev/null
+++ b/themes/fid_bbi/templates/html-head.phtml
@@ -0,0 +1,141 @@
+<?=$this->doctype('HTML5')?>
+
+<?php // NOTE: There cannot be a comment before the doctype declaration ?>
+<!-- fid_bbi: html-head -->
+<html lang="<?=$this->layout()->userLang?>">
+<head>
+  <?php $this->headThemeResources(); ?>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+
+  <?=$this->headMeta()?>
+  <?=$this->headTitle()?>
+
+  <?php
+  // Set up OpenSearch link
+  $this->headLink(
+    [
+      'href' => $this->url('search-opensearch') . '?method=describe',
+      'type' => 'application/opensearchdescription+xml',
+      'title' => $this->transEsc('Library Catalog Search'),
+      'rel' => 'search'
+    ]
+  );
+  ?>
+
+  <?php
+  if ($this->layout()->rtl) {
+    // $this->headLink()->appendStylesheet('vendor/bootstrap-rtl.min.css');
+  }
+  ?>
+
+  <?=$this->headLink()?>
+
+  <?php // TODO: Reenable styles? ?>
+  <?php /* <?=$this->headStyle()?> */ ?>
+  <link rel="stylesheet" href="/themes/fid_bbi/css/compiled.css">
+
+  <?php
+  if (!isset($this->renderingError)) {
+    // Add translation strings
+    // PDA (BELOW) is a custom finc string - CK
+    $this->jsTranslations()->addStrings(
+      [
+        'pda_send_success' => 'PDA::pda_send_success',
+        'add_tag_success' => 'add_tag_success',
+        'bulk_email_success' => 'bulk_email_success',
+        'bulk_noitems_advice' => 'bulk_noitems_advice',
+        'bulk_save_success' => 'bulk_save_success',
+        'close' => 'close',
+        'collection_empty' => 'collection_empty',
+        'error_occurred' => 'An error has occurred',
+        'go_to_list' => 'go_to_list',
+        'libphonenumber_invalid' => 'libphonenumber_invalid',
+        'libphonenumber_invalidcountry' => 'libphonenumber_invalidcountry',
+        'libphonenumber_invalidregion' => 'libphonenumber_invalidregion',
+        'libphonenumber_notanumber' => 'libphonenumber_notanumber',
+        'libphonenumber_toolong' => 'libphonenumber_toolong',
+        'libphonenumber_tooshort' => 'libphonenumber_tooshort',
+        'libphonenumber_tooshortidd' => 'libphonenumber_tooshortidd',
+        'loading' => 'Loading',
+        'more' => 'more',
+        'number_thousands_separator' => [
+        'number_thousands_separator', null, ','
+        ],
+        'sms_success' => 'sms_success'
+      ]
+    );
+
+    // TODO: To we need this?
+    // Add libphonenumber.js strings
+    $this->jsTranslations()->addStrings(
+      [
+        'Phone number invalid' => 'libphonenumber_invalid',
+        'Invalid country calling code' => 'libphonenumber_invalidcountry',
+        'Invalid region code' => 'libphonenumber_invalidregion',
+        'The string supplied did not seem to be a phone number' => 'libphonenumber_notanumber',
+        'The string supplied is too long to be a phone number' => 'libphonenumber_toolong',
+        'The string supplied is too short to be a phone number' => 'libphonenumber_tooshort',
+        'Phone number too short after IDD' => 'libphonenumber_tooshortidd'
+      ]
+    );
+
+    // Deal with cart stuff:
+    $cart = $this->cart();
+    if ($cart->isActive()) {
+      $this->headScript()->appendFile("vendor/cookies.js");
+      $this->headScript()->appendFile("cart.js");
+      $domain = $cart->getCookieDomain();
+      if (!empty($domain)) {
+        $this->headScript()->appendScript(
+          'VuFind.cart.setDomain("' . $domain . '");'
+        );
+      }
+      $cookiePath = $cart->getCookiePath();
+      if (!empty($cookiePath)) {
+        $this->headScript()->appendScript(
+          'VuFind.cart.setCookiePath("' . $cookiePath . '");'
+        );
+      }
+      $this->jsTranslations()->addStrings(
+        [
+          'addBookBag' => 'Add to Book Bag',
+          'bookbagFull' => 'bookbag_full_msg',
+          'bookbagMax' => $cart->getMaxSize(),
+          'bookbagStatusFull' => 'bookbag_full',
+          'confirmDelete' => 'confirm_delete',
+          'confirmEmpty' => 'bookbag_confirm_empty',
+          'itemsAddBag' => 'items_added_to_bookbag',
+          'itemsInBag' => 'items_already_in_bookbag',
+          'removeBookBag' => 'Remove from Book Bag',
+          'viewBookBag' => 'View Book Bag'
+        ]
+      );
+    }
+
+    $this->headScript()->appendScript(
+      'var userIsLoggedIn = ' . ($this->auth()->isLoggedIn() ? 'true' : 'false')
+    );
+  }
+
+  // Session keep-alive
+  if ($this->keepAlive()) {
+    $this->headScript()->appendScript('var keepAliveInterval = ' . $this->keepAlive());
+    $this->headScript()->appendFile("keep_alive.js");
+  }
+
+  $root = rtrim($this->url('home'), '/');
+  $translations = $this->jsTranslations()->getJSON();
+  $dsb = DEFAULT_SEARCH_BACKEND;
+  $this->headScript()->appendScript(
+    "VuFind.path = '$root';"
+    . "VuFind.defaultSearchBackend = '$dsb';"
+    . "VuFind.addTranslations($translations);"
+  );
+  ?>
+
+  <?=$this->headScript()?>
+</head>
+<!-- fid_bbi: html-head - END -->
diff --git a/themes/fid_bbi/templates/layout/layout.phtml b/themes/fid_bbi/templates/layout/layout.phtml
index 680b0bf56b2e32fcca8f46382d68a40ae33e6e87..ad0c37a3d03beb6be18687b087c35e2d634ece1d 100644
--- a/themes/fid_bbi/templates/layout/layout.phtml
+++ b/themes/fid_bbi/templates/layout/layout.phtml
@@ -1,231 +1,74 @@
-<?=$this->doctype('HTML5')?>
-<html lang="<?=$this->layout()->userLang?>">
-<head>
-  <? $this->headThemeResources() ?>
-  <? /* remove meta because of W3C Validator error - CK */
-  /*  <meta charset="utf-8">  */
-  ?>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
-  <?=$this->headMeta()?>
-  <?=$this->headTitle()?>
-  <?
-  // Set up OpenSearch link:
-  $this->headLink(
-    [
-      'href' => $this->url('search-opensearch') . '?method=describe',
-      'type' => 'application/opensearchdescription+xml',
-      'title' => $this->transEsc('Library Catalog Search'),
-      'rel' => 'search'
-    ]
-  );
-  $account = $this->auth()->getManager();
-  ?>
-  <!-- RTL styling -->
-  <? if ($this->layout()->rtl) {
-    $this->headLink()->appendStylesheet('vendor/bootstrap-rtl.min.css');
-  } ?>
-  <?=$this->headLink()?>
-  <?=$this->headStyle()?>
-  <?
-  if (!isset($this->renderingError)) {
-    // Add translation strings
-    // PDA (BELOW) is a custom finc string - CK
-    $this->jsTranslations()->addStrings(
-      [
-        'pda_send_success' => 'PDA::pda_send_success',
-        'add_tag_success' => 'add_tag_success',
-        'bulk_email_success' => 'bulk_email_success',
-        'bulk_noitems_advice' => 'bulk_noitems_advice',
-        'bulk_save_success' => 'bulk_save_success',
-        'close' => 'close',
-        'collection_empty' => 'collection_empty',
-        'error_occurred' => 'An error has occurred',
-        'go_to_list' => 'go_to_list',
-        'libphonenumber_invalid' => 'libphonenumber_invalid',
-        'libphonenumber_invalidcountry' => 'libphonenumber_invalidcountry',
-        'libphonenumber_invalidregion' => 'libphonenumber_invalidregion',
-        'libphonenumber_notanumber' => 'libphonenumber_notanumber',
-        'libphonenumber_toolong' => 'libphonenumber_toolong',
-        'libphonenumber_tooshort' => 'libphonenumber_tooshort',
-        'libphonenumber_tooshortidd' => 'libphonenumber_tooshortidd',
-        'loading' => 'Loading',
-        'more' => 'more',
-        'number_thousands_separator' => [
-        'number_thousands_separator', null, ','
-        ],
-        'sms_success' => 'sms_success'
-      ]
-    );
-    // Add libphonenumber.js strings
-    $this->jsTranslations()->addStrings(
-      [
-        "Phone number invalid" => 'libphonenumber_invalid',
-        "Invalid country calling code" => 'libphonenumber_invalidcountry',
-        "Invalid region code" => 'libphonenumber_invalidregion',
-        "The string supplied did not seem to be a phone number" => 'libphonenumber_notanumber',
-        "The string supplied is too long to be a phone number" => 'libphonenumber_toolong',
-        "The string supplied is too short to be a phone number" => 'libphonenumber_tooshort',
-        "Phone number too short after IDD" => 'libphonenumber_tooshortidd'
-      ]
-    );
-    // Deal with cart stuff:
-    $cart = $this->cart();
-    if ($cart->isActive()) {
-      $this->headScript()->appendFile("vendor/cookies.js");
-      $this->headScript()->appendFile("cart.js");
-      $domain = $cart->getCookieDomain();
-      if (!empty($domain)) {
-        $this->headScript()->appendScript(
-          'VuFind.cart.setDomain("' . $domain . '");'
-        );
-      }
-      $cookiePath = $cart->getCookiePath();
-      if (!empty($cookiePath)) {
-        $this->headScript()->appendScript(
-          'VuFind.cart.setCookiePath("' . $cookiePath . '");'
-        );
-      }
-      $this->jsTranslations()->addStrings(
-        [
-          'addBookBag' => 'Add to Book Bag',
-          'bookbagFull' => 'bookbag_full_msg',
-          'bookbagMax' => $cart->getMaxSize(),
-          'bookbagStatusFull' => 'bookbag_full',
-          'confirmDelete' => 'confirm_delete',
-          'confirmEmpty' => 'bookbag_confirm_empty',
-          'itemsAddBag' => 'items_added_to_bookbag',
-          'itemsInBag' => 'items_already_in_bookbag',
-          'removeBookBag' => 'Remove from Book Bag',
-          'viewBookBag' => 'View Book Bag'
-        ]
-      );
-    }
-    $this->headScript()->appendScript(
-      'var userIsLoggedIn = ' . ($this->auth()->isLoggedIn() ? 'true' : 'false') . ';'
-    );
-  }
+<?=$this->render('html-head.phtml')?>
 
-  // Session keep-alive
-  if ($this->keepAlive()) {
-      $this->headScript()->appendScript('var keepAliveInterval = '
-          . $this->keepAlive());
-      $this->headScript()->appendFile("keep_alive.js");
+<!-- fid_bbi: layout - layout -->
+<body class="layout -<?=$this->templateName?> <?=$this->layout()->rtl ? '-rtl' : ''?>">
+  <?php
+  // Set up the search box -- there are three possible cases:
+  // 1. No search box was set; we should default to the normal box
+  // 2. It was set to false; we should display nothing
+  // 3. It is set to a custom string; we should display the provided version
+  // Set up default search box if no data was provided from the template;
+  // this covers case 1.  Cases 2 and 3 are then covered by logic below.
+  if (!isset($this->layout()->searchbox)) {
+    $this->layout()->searchbox = $this->render('search/searchbox.phtml');
   }
-
   ?>
-  <?
-  $root = rtrim($this->url('home'), '/');
-  $translations = $this->jsTranslations()->getJSON();
-  $dsb = DEFAULT_SEARCH_BACKEND;
-  $setupJS = <<<JS
-VuFind.path = '{$root}';
-VuFind.defaultSearchBackend = '{$dsb}';
-VuFind.addTranslations({$translations});
-JS;
-  $this->headScript()->appendScript($setupJS);
-  ?>
-  <?=$this->headScript()?>
-</head>
-<body class="template-dir-<?=$this->templateDir?> template-name-<?=$this->templateName?> <?=$this->layoutClass('offcanvas-row')?><? if ($this->layout()->rtl): ?> rtl<? endif; ?>">
-<? // Set up the search box -- there are three possible cases:
-// 1. No search box was set; we should default to the normal box
-// 2. It was set to false; we should display nothing
-// 3. It is set to a custom string; we should display the provided version
-// Set up default search box if no data was provided from the template;
-// this covers case 1.  Cases 2 and 3 are then covered by logic below.
-if (!isset($this->layout()->searchbox)) {
-  $this->layout()->searchbox = $this->render('search/searchbox.phtml');
-}
-?>
-<? if (isset($this->layout()->srmessage)): // message for benefit of screen-reader users ?>
-  <span class="sr-only"><?=$this->layout()->srmessage?></span>
-<? endif; ?>
-<a class="sr-only" href="#searchslots"><?=$this->transEsc('Skip to search')?></a>
-<a class="sr-only" href="#content"><?=$this->transEsc('Skip to content')?></a>
 
-<? /* Start header here, not above, custom finc, CK */ ?>
-<header class="hidden-print">
-  <?=$this->render('header.phtml')?>
-</header>
-<nav class="breadcrumbs">
-  <? /* finc: Don't use .container here or the breadcrumbs will get a left+right padding - CK */ ?>
-  <ul class="breadcrumb large-centered  hidden-print">
-      <? if (is_object($account) && $account->loginEnabled()): // hide login/logout if unavailable ?>
-          <li class="logoutOptions<? if (!$account->isLoggedIn()): ?> hidden<? endif ?>">
-              <a class="btn" href="<?=$this->url('myresearch-home', array(), array('query' => array('redirect' => 0)))?>">
-                  <i class="fa fa-home" aria-hidden="true"></i>
-                  <span class="hidden-sm"><?=$this->transEsc("Your Account")?></span>
-              </a>
-          </li>
+  <?php /* Add landmark role to avoid 'all content must be inside landmarks error', CK */ ?>
+  <div role="navigation" aria-label="Skip_navigation_links">
+    <?php if (isset($this->layout()->srmessage)): ?>
+      <span class="sr-only"><?=$this->layout()->srmessage?></span>
+    <?php endif; ?>
 
-          <li class="logoutOptions<? if (!$account->isLoggedIn()): ?> hidden<? endif ?>">
-              <a href="<?=$this->url('myresearch-logout')?>" class="logout btn" title="<?=$this->transEsc("Log Out")?>">
-                  <i class="fa fa-sign-out" aria-hidden="true"></i>
-                  <span class="hidden-sm"><?=$this->transEsc("Log Out")?></span>
-              </a>
-          </li>
-
-          <li id="loginOptions"<? if ($account->isLoggedIn()): ?> class="hidden"<? endif ?>>
-              <? if ($account->getSessionInitiator($this->serverUrl($this->url('myresearch-home')))): ?>
-                  <a class="btn" href="<?=$this->url('myresearch-userlogin')?>">
-                      <i class="fa fa-sign-in" aria-hidden="true"></i>
-                      <span class="hidden-sm"><?=$this->transEsc("Institutional Login")?></span>
-                  </a>
-              <? else: ?>
-                  <a class="btn" href="<?=$this->url('myresearch-userlogin')?>" data-lightbox>
-                      <i class="fa fa-sign-in" aria-hidden="true"></i>
-                      <span class="hidden-sm"><?=$this->transEsc("Login")?></span>
-                  </a>
-              <? endif; ?>
-          </li>
-      <? endif; ?>
-      <li class="right">
-          <a class="btn" href="<?=$this->url('home')?>">
-              <?=$this->transEsc("Home")?>
-          </a>
-      </li>
-  </ul>
-</nav>
-<div role="main" class="main">
-  <div id="content" class="container">
-    <?=$this->layout()->content?>
+    <a class="sr-only" href="#searchForm"><?=$this->transEsc('Skip to search')?></a>
+    <a class="sr-only" href="#content"><?=$this->transEsc('Skip to content')?></a>
   </div>
-</div>
 
-<?=$this->render('footer.phtml')?>
+  <?=$this->render('header.phtml')?>
+
+  <main class="main">
+    <div class="main_wrap">
+      <?=$this->layout()->content?>
+    </div>
+  </main>
 
+  <?=$this->render('footer.phtml')?>
 
-<!-- MODAL IN CASE WE NEED ONE -->
-<? /* remove aria-hidden attr via JS, move X button to logical pos. in structure + make accessible via tab */ ?>
-<div id="modal" class="modal fade hidden-print" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-body"><?=$this->transEsc('Loading')?>&nbsp;...</div>
-      <button type="button" class="close" data-dismiss="modal" tabindex="0">
+  <?php
+  // Modal
+  // Remove aria-hidden attr via JS, move X button to logical pos. in structure + make accessible via tab
+  ?>
+  <div
+    class="modal"
+    id="modal"
+    role="dialog"
+    tabindex="-1"
+    aria-describedby="modal-description"
+    aria-hidden="true"
+    aria-labelledby="modal-title"
+    aria-modal="true"
+  >
+    <div class="modal_content">
+      <button class="-icon-only -small close" data-dismiss="modal" tabindex="0">
+        <?=$this->icon('small/x')?>
         <span class="sr-only"><?=$this->transEsc('Close')?></span>
-        <i class="fa fa-times" aria-hidden="true"></i>
       </button>
+      <div class="sr-only" id="modal-description"><?=$this->transEsc('Modal_description')?></div>
+      <div class="modal_main modal-body"><?=$this->transEsc('Loading')?>&nbsp;&hellip;</div>
     </div>
   </div>
-</div>
 
-<div class="offcanvas-toggle" data-toggle="offcanvas" tabindex="0">
-  <i class="fa" title="<?=$this->transEsc('sidebar_expand')?>"></i>
-  <span class="sr-only"><?=$this->transEsc('sidebar_expand')?></span>
-</div>
+  <?=$this->googleanalytics()?>
+  <?=$this->piwik()?>
 
-<div class="offcanvas-overlay" data-toggle="offcanvas"></div>
-<?=$this->googleanalytics()?>
-<?=$this->piwik()?>
-<? if ($this->recaptcha()->active()): ?>
-  <?=$this->inlineScript(\Zend\View\Helper\HeadScript::FILE, "https://www.google.com/recaptcha/api.js?onload=recaptchaOnLoad&render=explicit&hl=" . $this->layout()->userLang, 'SET')?>
-<? endif; ?>
-<? /* Enable Tooltips, finc-specific, CK */ ?>
-<script type="text/javascript">
-  $(document).ready(function () {
-    $("body").tooltip({selector: '[data-toggle=tooltip]'});
-  });
-</script>
+  <?php
+  if ($this->recaptcha()->active()) {
+    echo $this->inlineScript(
+      \Zend\View\Helper\HeadScript::FILE,
+      "https://www.google.com/recaptcha/api.js?onload=recaptchaOnLoad&render=explicit&hl={$this->layout()->userLang}",
+      'SET'
+    );
+  }
+  ?>
 </body>
-</html>
+<!-- fid_bbi: layout - layout - END -->
diff --git a/themes/fid_bbi/templates/myresearch/edit.phtml b/themes/fid_bbi/templates/myresearch/edit.phtml
index 93f0b5081e84569f6e1be066fb44239cd3273ccf..08ab430b12c4721db97aa0f827d7722f7e7bc7e3 100644
--- a/themes/fid_bbi/templates/myresearch/edit.phtml
+++ b/themes/fid_bbi/templates/myresearch/edit.phtml
@@ -63,6 +63,7 @@
     <hr/>
     <div class="form-group">
       <select name="addToList" class="form-control">
+        <?php /* Fixme: this seems to need a label for accessibility - CK */ ?>
         <option value="-1">- <?=$this->transEsc('Add to another list')?> -</option>
         <?php foreach ($this->lists as $listID => $listTitle): ?>
           <option value="<?=$listID ?>"><?=$this->escapeHtml($listTitle) ?></option>
@@ -77,4 +78,4 @@
   <?php endif; ?>
   </form>
 </div>
-<!-- fid_bbi: myresearch - edit - END -->
\ No newline at end of file
+<!-- fid_bbi: myresearch - edit - END -->
diff --git a/themes/fid_bbi/templates/nav.phtml b/themes/fid_bbi/templates/nav.phtml
new file mode 100644
index 0000000000000000000000000000000000000000..15448db69df3b72437a123ff1f49266367c1f90f
--- /dev/null
+++ b/themes/fid_bbi/templates/nav.phtml
@@ -0,0 +1,127 @@
+<!-- fid_bbi: nav -->
+<nav class="nav">
+  <button
+    class="nav_toggle -search"
+    type="button"
+    aria-controls="searchForm"
+    aria-label="<?=$this->transEsc('Open search')?>"
+  >
+    <?=$this->icon('small/magnifier')?>
+    <?=$this->transEsc('Search')?>
+  </button>
+  <button
+    class="nav_toggle -menu"
+    type="button"
+    aria-controls="menu"
+    aria-label="<?=$this->transEsc('Open navigation')?>"
+  >
+    <?=$this->icon('small/menu')?>
+    <?=$this->transEsc('Info')?>
+  </button>
+
+  <div class="nav_main" id="menu">
+    <div class="nav_header">
+      <h2><?=$this->transEsc('Info Pages')?></h2>
+      <button
+        class="-icon-only -small"
+        type="button"
+        aria-controls="menu"
+        aria-label="<?=$this->transEsc('Close functions & filters')?>"
+      >
+        <?=$this->icon('small/x')?>
+        <span class="sr-only"><?=$this->transEsc('Close')?></span>
+      </button>
+    </div>
+    <ul>
+      <?php $fallbackUrl = $this->config()->get('config')->RssConsumer['fallback_url'] ?? ''; ?>
+      <li class="nav_home">
+        <a href="<?=$this->url('home')?>">
+          <?=$this->icon('small/home')?>
+          <span class="sr-only"><?=$this->transEsc('Home')?></span>
+        </a>
+      </li>
+      <li>
+        <a href="#TODO"><?=$this->transEsc('BBI Blog')?></a>
+      </li>
+      <li>
+        <a href="<?=$fallbackUrl?>/faq"><?=$this->transEsc('FAQs')?></a>
+      </li>
+      <li>
+        <a href="<?=$fallbackUrl?>/fachreferate"><?=$this->transEsc('For Subject Specialists')?></a>
+      </li>
+      <li>
+        <a href="<?=$fallbackUrl?>/team"><?=$this->transEsc('Team')?></a>
+      </li>
+    </ul>
+  </div>
+
+  <div class="nav_aside">
+    <ul>
+      <?php $account = $this->auth()->getManager(); ?>
+      <?php if (is_object($account) && $account->loginEnabled()): ?>
+        <li>
+          <?php if ($account->isLoggedIn()): ?>
+            <a href="<?=$this->url('myresearch-home', [], ['query' => ['redirect' => 0]])?>">
+              <span>
+                <?=$this->icon('small/face')?>
+                <?=$this->transEsc("Your Account")?>
+              </span>
+            </a>
+          <?php else : ?>
+            <?php if ($account->getSessionInitiator($this->serverUrl($this->url('myresearch-home')))): ?>
+              <a href="<?=$this->url('myresearch-userlogin')?>">
+                <span>
+                  <?=$this->icon('small/login')?>
+                  <?=$this->transEsc('Institutional Login')?>
+                </span>
+              </a>
+            <?php else: ?>
+              <a href="<?=$this->url('myresearch-userlogin')?>" data-lightbox>
+                <span>
+                  <?=$this->icon('small/login')?>
+                  <?=$this->transEsc('Login')?>
+                </span>
+              </a>
+            <?php endif; ?>
+          <?php endif; ?>
+        </li>
+        <li>
+          <?php if ($account->isLoggedIn()): ?>
+            <a href="<?=$this->url('myresearch-logout')?>">
+              <span>
+                <?=$this->icon('small/logout')?>
+                <?=$this->transEsc('Log Out')?>
+              </span>
+            </a>
+          <?php else : ?>
+            <a href="<?=$this->url('myresearch-account')?>?auth_method=<?=$account->getAuthMethod()?>">
+              <span>
+                <?=$this->icon('small/signup')?>
+                <?=$this->transEsc('Create New Account')?>
+              </span>
+            </a>
+          <?php endif; ?>
+        </li>
+      <?php endif; ?>
+
+      <?php if (isset($this->layout()->allLangs) && count($this->layout()->allLangs) > 1): ?>
+        <?php foreach ($this->layout()->allLangs as $langCode => $langName): ?>
+          <li>
+            <a
+              class="nav_lang <?=$this->layout()->userLang == $langCode ? '-current' : ''?>"
+              href="javascript:document.langForm.mylang.value='<?=$langCode?>';document.langForm.submit()"
+              title="<?=$this->displayLanguageOption($langName)?>"
+            >
+              <span><?=$langCode?></span>
+            </a>
+          </li>
+        <?php endforeach; ?>
+      <?php endif; ?>
+    </ul>
+
+    <form method="post" name="langForm" id="langForm">
+      <input type="hidden" name="mylang">
+    </form>
+  </div>
+</nav>
+<!-- fid_bbi: nav - END -->
diff --git a/themes/fid_bbi/templates/record/view.phtml b/themes/fid_bbi/templates/record/view.phtml
index f48b6a925534dea17d5f48d3ec7f92e2f3023a6f..396bf6efee0a62a24b433ea023b2a01fffe85817 100644
--- a/themes/fid_bbi/templates/record/view.phtml
+++ b/themes/fid_bbi/templates/record/view.phtml
@@ -1,4 +1,4 @@
-<!-- finc: record - view -->
+<!-- fid_bbi: record - view -->
 <?php
 // Set up standard record scripts:
 $this->headScript()->appendFile("record.js");
@@ -133,4 +133,4 @@ $this->layout()->title = $this->driver->getShortTitle();
   </div>
 
   <?=$this->inlineScript(\Zend\View\Helper\HeadScript::SCRIPT, '$(document).ready(recordDocReady);', 'SET');?>
-  <!-- finc: record - view - END -->
+  <!-- fid_bbi: record - view - END -->
diff --git a/themes/fid_bbi/templates/search/controls/showing.phtml b/themes/fid_bbi/templates/search/controls/showing.phtml
index fa7f446029f546fc67ab4d0686920e8ade973a20..f4e67f06598b84a047fe3e7059da30afa3f0a456 100644
--- a/themes/fid_bbi/templates/search/controls/showing.phtml
+++ b/themes/fid_bbi/templates/search/controls/showing.phtml
@@ -1,3 +1,4 @@
+<!-- fid_bbi: search - controls - showing -->
 <?php
   $transParams = [
     '%%start%%' => $this->localizedNumber($this->results->getStartRecord()),
@@ -26,3 +27,4 @@
 <?php else: ?>
   <?=$showingResults; ?>
 <?php endif; ?>
+<!-- fid_bbi: search - controls - showing - END -->
diff --git a/themes/fid_bbi/templates/search/home.phtml b/themes/fid_bbi/templates/search/home.phtml
index adbb10811246540070fcc6663cc96be20fa865c5..6fe6f3dc275525a10ba0debe826796bef7d99ced 100644
--- a/themes/fid_bbi/templates/search/home.phtml
+++ b/themes/fid_bbi/templates/search/home.phtml
@@ -1,57 +1,99 @@
 <!-- fid_bbi: search - home -->
+
 <?php
-// Set page title.
-$this->headTitle($this->translate('Search Home'));
+$this->headTitle($this->transEsc('LibraryName'));
+$this->layout()->breadcrumbs = false;
+?>
 
-// finc: disable top search box here if you want the old look, see also below
-$this->layout()->searchbox = false;
+<p class="tagline"><?=$this->translate('home_tagline')?></p>
 
-// Set default value if necessary:
-if (!isset($this->searchClassId)) {
-  $this->searchClassId = 'Solr';
-}
+<div class="flex -break-large -gap -margin-double">
+  <div class="flex_2">
+    <h2 class="sr-only"><?=$this->translate('Recent Blog Posts')?></h2>
 
-// Load search actions and settings (if any):
-$options = $this->searchOptions($this->searchClassId);
-$basicSearch = $options->getSearchAction();
-$advSearch = $options->getAdvancedSearchAction();
+    <div class="posts">
+      <?php
+      // TODO: Replace this once blog API is available
+      $postsFile = APPLICATION_PATH . '/themes/fid_bbi/dummy-posts.json';
+      $posts = @json_decode(@file_get_contents($postsFile));
+      ?>
 
-$this->layout()->breadcrumbs = false;
-?>
+      <?php if ($posts): ?>
+        <?php foreach ($posts as $post): ?>
+          <article class="post">
+            <header class="post_header">
+              <a class="post_link" href="#CHANGE">
+                <h3 class="post_title"><?=$post->title?></h3>
+                <time class="post_date"><?=$post->date?></time>
+              </a>
+            </header>
+            <p class="post_excerpt"><?=$post->excerpt?></p>
+          </article>
+        <?php endforeach; ?>
+      <?php else: ?>
+        // TODO: Handle missing or invalid posts file
+      <?php endif; ?>
+    </div>
+  </div>
 
-<div class="searchHomeContent">
-  <?php
-  /* fid_bbi searchbox: we use searchbox here so it becomes part of the sticky header,
-  we need to place this after the navbar-right for anything but mobile  - see flex-container in SCSS:*/
-  ?>
-  <div class="search-home flex-container">
-      <nav class="searchbox-home hidden-print">
-          <?=$this->render('search/searchbox.phtml')?>
-      </nav>
+  <div class="flex_1">
+    <div class="item-list">
+      <div class="item-list_item">
+        <div class="item-list_prefix">1</div>
+        <div class="item-list_content">
+          <?=$this->translate('home_step_1')?>
+        </div>
+      </div>
+      <div class="item-list_item">
+        <div class="item-list_prefix">2</div>
+        <div class="item-list_content">
+          <?=$this->translate('home_step_2')?>
+        </div>
+      </div>
+      <div class="item-list_item">
+        <div class="item-list_prefix">3</div>
+        <div class="item-list_content">
+          <?=$this->translate('home_step_3')?>
+        </div>
+      </div>
+    </div>
   </div>
-  <?php /* fid_bbi searchbox - END */ ?>
-  <?php /* finc-specific: #7187@89bb6e70; VF moved the original BS code to a separate template: helpers - ils-offline.phtml - CK */ ?>
-  <?php
-  $ilsStatusScript = <<<JS
-      $(document).ready(function() {
-        $.ajax({
-            dataType: 'json',
-            method: 'GET',
-            data: {'offlineModeMsg':'ils_offline_home_message'},
-            url: VuFind.path + '/AJAX/JSON?method=getIlsStatus',
-            success: function(response) {
-              $('.searchHomeContent').prepend(response.data);
-            }
-        });
-      });
-JS;
-  ?>
-  <?php /* finc-specific: #7187 - END */ ?>
-  <?=$this->inlineScript(\Zend\View\Helper\HeadScript::SCRIPT, $ilsStatusScript, 'SET');?>
+</div>
 
-  <?php /* finc: Activate search box here if you want the old look -- otherwise we keep the consisten look with searchbox in header */ ?>
-  <?php /* =$this->context($this)->renderInContext("search/searchbox.phtml", ['ignoreHiddenFilterMemory' => true])?>
-  <?=$this->inlineScript(\Zend\View\Helper\HeadScript::SCRIPT, '$("#searchForm_lookfor").focus();', 'SET'); */ ?>
+<div class="box -left">
+  <?=$this->translate('home_about_1')?>
 </div>
 
-<!-- finc: search - home - END -->
+<div class="flex -break-medium -gap">
+  <div>
+    <?=$this->translate('home_about_2', [
+      '%%feedback_url%%' => $this->url('feedback-home'),
+      '%%blog_url%%' => '#' // TODO: Add blog URL
+    ])?>
+  </div>
+  <div>
+    <?=$this->translate('home_about_3', [
+      '%%feedback_url%%' => $this->url('feedback-home'),
+    ])?>
+  </div>
+</div>
+
+<?php
+// finc-specific: #7187@89bb6e70; VF moved the original BS code to a separate template: helpers - ils-offline.phtml - CK
+$ilsStatusScript = <<<JS
+  $(document).ready(function() {
+    $.ajax({
+      dataType: 'json',
+      method: 'GET',
+      data: {'offlineModeMsg':'ils_offline_home_message'},
+      url: VuFind.path + '/AJAX/JSON?method=getIlsStatus',
+      success: function(response) {
+        $('.searchHomeContent').prepend(response.data);
+      }
+    });
+  });
+JS;
+?>
+<?=$this->inlineScript(\Zend\View\Helper\HeadScript::SCRIPT, $ilsStatusScript, 'SET')?>
+
+<!-- fid_bbi: search - home - END -->
diff --git a/themes/fid_bbi/templates/search/searchbox.phtml b/themes/fid_bbi/templates/search/searchbox.phtml
index 3f76b21c989ee029a5188fea1f5f75a53074523b..67fef29282130df49c6d6fe493f4dd90437941a5 100644
--- a/themes/fid_bbi/templates/search/searchbox.phtml
+++ b/themes/fid_bbi/templates/search/searchbox.phtml
@@ -1,4 +1,5 @@
 <!-- fid_bbi: search - searchbox -->
+
 <?php
 // Set default value if necessary:
 if (!isset($this->searchClassId)) {
@@ -12,137 +13,108 @@ $handlers = $this->searchbox()->getHandlers(
   isset($this->searchIndex) ? $this->searchIndex : null
 );
 $handlerCount = count($handlers);
-$basicSearch = $this->searchbox()->combinedHandlersActive() ? 'combined-searchbox' : $options->getSearchAction();
+$basicSearch = $this->searchbox()->combinedHandlersActive()
+  ? 'combined-searchbox'
+  : $options->getSearchAction();
 $searchHome = $options->getSearchHomeAction();
 $advSearch = $options->getAdvancedSearchAction();
 $lastSort = $this->searchMemory()->getLastSort($this->searchClassId);
 $lastLimit = $this->searchMemory()->getLastLimit($this->searchClassId);
 $ignoreHiddenFilterMemory = isset($this->ignoreHiddenFilterMemory) && $this->ignoreHiddenFilterMemory;
 $ignoreHiddenFiltersInRequest = isset($this->ignoreHiddenFiltersInRequest) && $this->ignoreHiddenFiltersInRequest;
-$hiddenFilters = $this->searchTabs()->getHiddenFilters($this->searchClassId, $ignoreHiddenFilterMemory, $ignoreHiddenFiltersInRequest);
+
+$hiddenFilters = $this->searchTabs()->getHiddenFilters(
+  $this->searchClassId,
+  $ignoreHiddenFilterMemory,
+  $ignoreHiddenFiltersInRequest
+);
+
 if (empty($hiddenFilters) && !$ignoreHiddenFilterMemory) {
   $hiddenFilters = $this->searchMemory()->getLastHiddenFilters($this->searchClassId);
+
   if (empty($hiddenFilters)) {
     $hiddenFilters = $this->searchTabs()->getHiddenFilters($this->searchClassId);
   }
 }
-$hiddenFilterParams = $this->searchTabs()->getCurrentHiddenFilterParams($this->searchClassId, $ignoreHiddenFilterMemory, '?');
+
+$hiddenFilterParams = $this->searchTabs()->getCurrentHiddenFilterParams(
+  $this->searchClassId,
+  $ignoreHiddenFilterMemory,
+  '?'
+);
+
+$tabConfig = $this->searchTabs()->getTabConfig(
+  $this->searchClassId,
+  $this->lookfor,
+  $this->searchIndex,
+  $this->searchType,
+  $hiddenFilters
+);
 ?>
-<?php $tabConfig = $this->searchTabs()->getTabConfig($this->searchClassId, $this->lookfor, $this->searchIndex, $this->searchType, $hiddenFilters); ?>
+
 <?php if ($this->searchType == 'advanced'): ?>
-  <?php /* finc: keep .no-margin-t or advanced search box will be pushed down too far (navbar-form) */ ?>
   <div class="navbar-form flip no-margin-t">
-    <?php $tabs = $this->context($this)->renderInContext('search/searchTabs', ['searchTabs' => $tabConfig['tabs']]); ?>
-    <?php if (!empty($tabs)): ?><?=$tabs?>
-    <div class="tab-content clearfix no-gutter-all"><?php endif; ?>
-      <p class="adv_search_terms"><?=$this->transEsc("Your search terms")?> : "<strong><?=$this->escapeHtml($this->lookfor)?></strong>"</p>
-      <?php /* finc: we use an ul li list, CK */ ?>
+    <?php
+    $tabs = $this->context($this)->renderInContext(
+      'search/searchTabs',
+      ['searchTabs' => $tabConfig['tabs']]
+    );
+    ?>
+    <?php if (!empty($tabs)): ?>
+      <?=$tabs?>
+      <div class="tab-content clearfix no-gutter-all">
+    <?php endif; ?>
+      <p class="adv_search_terms">
+        <?=$this->transEsc("Your search terms")?>:
+        "<strong><?=$this->escapeHtml($this->lookfor)?></strong>"
+      </p>
       <ul class="adv_search_links">
-        <li><a href="<?=$this->url($advSearch)?>?edit=<?=$this->escapeHtmlAttr($this->searchId)?>"><?=$this->transEsc("Edit this Advanced Search")?></a></li>
-        <li><a href="<?=$this->url($advSearch) . $hiddenFilterParams?>"><?=$this->transEsc("Start a new Advanced Search")?></a></li>
-        <li><a href="<?=$this->url($searchHome) . $hiddenFilterParams?>"><?=$this->transEsc("Start a new Basic Search")?></a></li>
-      </ul>
-      <?php if (!empty($tabs)): ?></div><?php endif; ?>
-  </div>
-<?php else: ?>
-  <form id="searchForm" class="searchForm navbar-form flip flex-column" method="get" action="<?=$this->url($basicSearch)?>" name="searchForm" autocomplete="off">
-    <div class="searchbox-wrapper flex-self-end">
-      <?=$this->context($this)->renderInContext('search/searchTabs', ['searchTabs' => $tabConfig['tabs']]);?>
-      <?php $placeholder = $this->searchbox()->getPlaceholderText($tabConfig['selected']['id'] ?? null); ?>
-      <?php /* finc: keep "required" */ ?>
-      <input id="searchForm_lookfor" class="searchForm_lookfor form-control search-query<?php if ($this->searchbox()->autocompleteEnabled($this->searchClassId)): ?> autocomplete searcher:<?=$this->escapeHtmlAttr($this->searchClassId)?><?=$this->searchbox()->autocompleteAutoSubmit($this->searchClassId) ? ' ac-auto-submit' : ''?><?php endif ?>" type="text" name="lookfor" value="<?=$this->escapeHtmlAttr($this->lookfor)?>"<?php if ($placeholder): ?> placeholder="<?=$this->transEsc($placeholder)?>"<?php endif ?> aria-label="<?=$this->transEsc("search_terms")?>" required="required"/>
-      <?php /* finc: We use a list here, CK */ ?>
-      <ul class="list-unstyled">
-        <?php /* if ($handlerCount > 1): ?>
-        <li class="hidden-xs">
-          <select id="searchForm_type" class="searchForm_type form-control" name="type" data-native-menu="false" aria-label="<?=$this->transEsc("Search type")?>">
-            <?php foreach ($handlers as $handler): ?>
-              <option
-                value="<?=$this->escapeHtmlAttr($handler['value'])?>"<?=$handler['selected'] ? ' selected="selected"' : ''?>><?=$handler['indent'] ? '-- ' : ''?><?=$this->transEsc($handler['label'])?></option>
-            <?php endforeach; ?>
-          </select>
+        <li>
+          <a href="<?=$this->url($advSearch)?>?edit=<?=$this->escapeHtmlAttr($this->searchId)?>">
+            <?=$this->transEsc("Edit this Advanced Search")?>
+          </a>
         </li>
-      <?php elseif ($handlerCount == 1): ?>
-        <input type="hidden" name="type" value="<?=$this->escapeHtmlAttr($handlers[0]['value'])?>"/>
-      <?php endif; */ ?>
         <li>
-          <button type="submit" class="btn btn-primary"><i class="fa fa-search" aria-hidden="true"></i> <span class="find-label sr-only"><?=$this->transEsc("Find")?></span></button>
+          <a href="<?=$this->url($advSearch) . $hiddenFilterParams?>">
+            <?=$this->transEsc("Start a new Advanced Search")?>
+          </a>
         </li>
         <li>
-          <?php if ($geoUrl = $this->geocoords()->getSearchUrl($options)) : ?>
-            <a href="<?=$geoUrl?>" class="btn btn-link"><?=$this->transEsc('Geographic Search')?></a>
-          <?php endif; ?>
+          <a href="<?=$this->url($searchHome) . $hiddenFilterParams?>">
+            <?=$this->transEsc("Start a new Basic Search")?>
+          </a>
         </li>
       </ul>
-    </div>
-      <div class="searchbox-tools flex-row flex-self-end">
-          <?php
-          $filterDetails = $this->searchbox()->getFilterDetails(
-              isset($this->filterList) && is_array($this->filterList) ? $this->filterList : [],
-              isset($this->checkboxFilters) && is_array($this->checkboxFilters) ? $this->checkboxFilters : []
-          );
-          ?>
-          <?php if ((isset($hasDefaultsApplied) && $hasDefaultsApplied) || !empty($filterDetails)): ?>
-              <?php $defaultFilterState = $options->getRetainFilterSetting() ? ' checked="checked"' : ''; ?>
-              <div class="flex-checkbox">
-                  <label>
-                      <input type="checkbox"<?=$defaultFilterState?> class="searchFormKeepFilters"/>
-                      <?=$this->transEsc("basic_search_keep_filters")?>
-                  </label>
-              </div>
-              <div class="hidden">
-                  <?php foreach ($filterDetails as $current): ?>
-                      <input class="applied-filter" id="<?=$this->escapeHtmlAttr($current['id'])?>" type="checkbox"<?=$defaultFilterState?> name="filter[]" value="<?=$this->escapeHtmlAttr($current['value'])?>"/>
-                      <label for="<?=$this->escapeHtmlAttr($current['id'])?>"><?=$this->escapeHtml($current['value'])?></label>
-                  <?php endforeach; ?>
-                  <?php if (isset($hasDefaultsApplied) && $hasDefaultsApplied): ?>
-                      <!-- this is a hidden element that flags whether or not default filters have been applied;
-                         it is intentionally unlabeled, as users are not meant to manipulate it directly. -->
-                      <input class="applied-filter" id="dfApplied" type="checkbox" name="dfApplied" value="1"<?=$defaultFilterState?> />
-                  <?php endif; ?>
-              </div>
-          <?php endif; ?>
-          <?php foreach ($hiddenFilters as $key => $filter): ?>
-              <?php foreach ($filter as $value): ?>
-                  <input type="hidden" name="hiddenFilters[]" value="<?=$this->escapeHtmlAttr($key) . ':' . $this->escapeHtmlAttr($value)?>"/>
-              <?php endforeach; ?>
-          <?php endforeach; ?>
-      <?php if ($advSearch): ?>
-          <div class="margin-t-third">
-              <a href="<?=$this->url($advSearch) . ((isset($this->searchId) && $this->searchId) ? '?edit=' . $this->escapeHtmlAttr($this->searchId) : $hiddenFilterParams)?>" class="btn btn-primary" role="button" rel="nofollow"><i class="fa fa-cog"></i> <span class="hidden-xs hidden-sm hidden-md"><?=$this->transEsc("Advanced")?></span></a>
-          </div>
-      <?php endif; ?>
-        <?php /* finc: We hide this for small and keep the solution using labels, same below - CK */ ?>
-        <div class="flex-checkbox hidden-xs">
-          <?php $shards = $options->getShards();
-            if ($options->showShardCheckboxes() && !empty($shards)): ?>
-              <?php
-              $selectedShards = isset($this->selectedShards)
-                ? $this->selectedShards : $options->getDefaultSelectedShards();
-              ?>
-              <?php foreach ($shards as $shard => $val): ?>
-                <?php $isSelected = empty($selectedShards) || in_array($shard, $selectedShards); ?>
-                <label for="checkbox_<?=$this->escapeHtmlAttr($shard)?>"><?=$this->transEsc($shard)?>
-                  <input type="checkbox" <?=$isSelected ? 'checked="checked" ' : ''?>name="shard[]" value='<?=$this->escapeHtmlAttr($shard)?>' id='checkbox_<?=$this->escapeHtmlAttr($shard)?>'
-                         class="shards-checkbox"/>
-                </label>
-              <?php endforeach; ?>
-            <?php endif; ?>
-        </div>
+    <?php if (!empty($tabs)): ?>
       </div>
-    <?php
-    /* Show hidden field for active search class when in combined handler mode. */
-    if ($this->searchbox()->combinedHandlersActive()) {
-      echo '<input type="hidden" name="activeSearchClassId" value="' . $this->escapeHtmlAttr($this->searchClassId) . '" />';
-    }
-    /* Load hidden limit preference from Session */
-    if (!empty($lastLimit)) {
-      echo '<input type="hidden" name="limit" value="' . $this->escapeHtmlAttr($lastLimit) . '" />';
-    }
-    if (!empty($lastSort)) {
-      echo '<input type="hidden" name="sort" value="' . $this->escapeHtmlAttr($lastSort) . '" />';
-    }
-    ?>
+    <?php endif; ?>
+  </div>
+<?php else: ?>
+  <!-- TODO: Use longer placeholder on large screen, like in the mockup?-->
+  <?php $placeholder = $this->transEsc("search_terms"); ?>
+  <form
+    action="<?=$this->url($basicSearch)?>"
+    autocomplete="off"
+    class="search_form"
+    id="searchForm"
+    name="searchForm"
+  >
+    <input
+      aria-label="<?=$this->transEsc('search_terms')?>"
+      class="search_input"
+      data-focus-off-canvas
+      name="lookfor"
+      onblur="this.placeholder = '<?=$placeholder?>'"
+      onfocus="this.placeholder = ''"
+      placeholder="<?=$placeholder?>"
+      type="text"
+      value="<?=$this->escapeHtmlAttr($this->lookfor)?>"
+    >
+    <button class="search_submit" type="submit">
+      <?=$this->icon('small/magnifier')?>
+      <?=$this->transEsc('Find')?>
+    </button>
   </form>
 <?php endif; ?>
+
 <!-- fid_bbi: search - searchbox - END -->
diff --git a/themes/fid_bbi/templates/search/sources.phtml b/themes/fid_bbi/templates/search/sources.phtml
index 6b6b556e99d48dcf6512fa3e8082990b6a6ae3be..add5ca1b7a9a86c10c3d819bc46ba796ee548d93 100644
--- a/themes/fid_bbi/templates/search/sources.phtml
+++ b/themes/fid_bbi/templates/search/sources.phtml
@@ -1,15 +1,16 @@
+<!-- fid_bbi: search - sources -->
 <div class="searchHomeContent">
-        <div class="search-home-facets">
-
-                <div class="home-facet?>">
-                    <h2><?=$this->transEsc('browse_sources')?></h2>
-                    <div class="home-facet-container">
-                        <ul class="home-facet-list">
-                                <?php foreach ($data as $url => $value): ?>
-                                    <li><a href="<?=$url?>"><?=$this->transEsc('Facet::'.$value)?></a></li>
-                                <?php endforeach; ?>
-                        </ul>
-                    </div>
-                </div>
-        </div>
+  <div class="search-home-facets">
+    <div class="home-facet?>">
+      <h2><?= $this->transEsc('browse_sources') ?></h2>
+      <div class="home-facet-container">
+        <ul class="home-facet-list">
+          <?php foreach ($data as $url => $value): ?>
+            <li><a href="<?= $url ?>"><?= $this->transEsc('Facet::' . $value) ?></a></li>
+          <?php endforeach; ?>
+        </ul>
+      </div>
+    </div>
+  </div>
 </div>
+<!-- fid_bbi: search - sources - END -->
diff --git a/themes/fid_bbi/theme.config.php b/themes/fid_bbi/theme.config.php
index 5d48fb82504c256b4ffd2cf8a7199f4a76bd18f1..fd498ba6c1f2055b1eef101fc658fdd3e7fa4986 100644
--- a/themes/fid_bbi/theme.config.php
+++ b/themes/fid_bbi/theme.config.php
@@ -1,20 +1,26 @@
 <?php
 return [
     'extends' => 'fid',
-    //'favicon' => 'favicon.ico',
+    // TODO: 'favicon' => 'favicon.ico',
+    'css' => [],
+    'js' => [],
     'mixins' => [
         'worldcat',
     ],
     'helpers' => array(
         'aliases' => [
+            'icon' => 'fid_bbi\View\Helper\Root\Icon',
             'record' => 'fid_bbi\View\Helper\Root\Record',
         ],
         'factories' => [
+            'fid_bbi\View\Helper\Root\Icon' =>
+                'fid_bbi\View\Helper\Root\Icon',
             'fid_bbi\View\Helper\Root\Record' =>
                 'fid_bbi\View\Helper\Root\Factory::getRecord',
             'VuFind\View\Helper\Root\RecordDataFormatter' =>
                 'fid_bbi\View\Helper\Root\RecordDataFormatterFactory',
-            'VuFind\View\Helper\Root\SearchMemory' => 'fid_bbi\View\Helper\Root\Factory::getSearchMemory'
+            'VuFind\View\Helper\Root\SearchMemory' =>
+                'fid_bbi\View\Helper\Root\Factory::getSearchMemory'
         ],
     ),
 ];
diff --git a/themes/fid_bbi/vendor/bootstrap/LICENSE b/themes/fid_bbi/vendor/bootstrap/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..173a9ebbbd7a35c5e7cad39808cbcacfc1994f8f
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2011-2020 Twitter, Inc.
+Copyright (c) 2011-2020 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/themes/fid_bbi/vendor/bootstrap/README.md b/themes/fid_bbi/vendor/bootstrap/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..3497963114d0f3581d5eb4376e506d0a29554759
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/README.md
@@ -0,0 +1,209 @@
+<p align="center">
+  <a href="https://getbootstrap.com/">
+    <img src="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-solid.svg" alt="Bootstrap logo" width="72" height="72">
+  </a>
+</p>
+
+<h3 align="center">Bootstrap</h3>
+
+<p align="center">
+  Sleek, intuitive, and powerful front-end framework for faster and easier web development.
+  <br>
+  <a href="https://getbootstrap.com/docs/4.5/"><strong>Explore Bootstrap docs »</strong></a>
+  <br>
+  <br>
+  <a href="https://github.com/twbs/bootstrap/issues/new?template=bug_report.md">Report bug</a>
+  ·
+  <a href="https://github.com/twbs/bootstrap/issues/new?template=feature_request.md">Request feature</a>
+  ·
+  <a href="https://themes.getbootstrap.com/">Themes</a>
+  ·
+  <a href="https://blog.getbootstrap.com/">Blog</a>
+</p>
+
+
+## Table of contents
+
+- [Quick start](#quick-start)
+- [Status](#status)
+- [What's included](#whats-included)
+- [Bugs and feature requests](#bugs-and-feature-requests)
+- [Documentation](#documentation)
+- [Contributing](#contributing)
+- [Community](#community)
+- [Versioning](#versioning)
+- [Creators](#creators)
+- [Thanks](#thanks)
+- [Copyright and license](#copyright-and-license)
+
+
+## Quick start
+
+Several quick start options are available:
+
+- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.5.2.zip)
+- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
+- Install with [npm](https://www.npmjs.com/): `npm install bootstrap`
+- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@4.5.2`
+- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:4.5.2`
+- Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass`
+
+Read the [Getting started page](https://getbootstrap.com/docs/4.5/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
+
+
+## Status
+
+[![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com/)
+[![Build Status](https://github.com/twbs/bootstrap/workflows/JS%20Tests/badge.svg?branch=v4-dev)](https://github.com/twbs/bootstrap/actions?query=workflow%3AJS+Tests+branch%3Av4-dev)
+[![npm version](https://img.shields.io/npm/v/bootstrap)](https://www.npmjs.com/package/bootstrap)
+[![Gem version](https://img.shields.io/gem/v/bootstrap)](https://rubygems.org/gems/bootstrap)
+[![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue)](https://atmospherejs.com/twbs/bootstrap)
+[![Packagist Prerelease](https://img.shields.io/packagist/vpre/twbs/bootstrap)](https://packagist.org/packages/twbs/bootstrap)
+[![NuGet](https://img.shields.io/nuget/vpre/bootstrap)](https://www.nuget.org/packages/bootstrap/absoluteLatest)
+[![peerDependencies Status](https://img.shields.io/david/peer/twbs/bootstrap)](https://david-dm.org/twbs/bootstrap?type=peer)
+[![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap)](https://david-dm.org/twbs/bootstrap?type=dev)
+[![Coverage Status](https://img.shields.io/coveralls/github/twbs/bootstrap/v4-dev)](https://coveralls.io/github/twbs/bootstrap?branch=v4-dev)
+[![CSS gzip size](https://img.badgesize.io/twbs/bootstrap/v4-dev/dist/css/bootstrap.min.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/twbs/bootstrap/tree/v4-dev/dist/css/bootstrap.min.css)
+[![JS gzip size](https://img.badgesize.io/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/twbs/bootstrap/tree/v4-dev/dist/js/bootstrap.min.js)
+[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)](https://www.browserstack.com/automate/public-build/SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)
+[![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap)](#backers)
+[![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap)](#sponsors)
+
+
+## What's included
+
+Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
+
+```text
+bootstrap/
+└── dist/
+    ├── css/
+    │   ├── bootstrap-grid.css
+    │   ├── bootstrap-grid.css.map
+    │   ├── bootstrap-grid.min.css
+    │   ├── bootstrap-grid.min.css.map
+    │   ├── bootstrap-reboot.css
+    │   ├── bootstrap-reboot.css.map
+    │   ├── bootstrap-reboot.min.css
+    │   ├── bootstrap-reboot.min.css.map
+    │   ├── bootstrap.css
+    │   ├── bootstrap.css.map
+    │   ├── bootstrap.min.css
+    │   └── bootstrap.min.css.map
+    └── js/
+        ├── bootstrap.bundle.js
+        ├── bootstrap.bundle.js.map
+        ├── bootstrap.bundle.min.js
+        ├── bootstrap.bundle.min.js.map
+        ├── bootstrap.js
+        ├── bootstrap.js.map
+        ├── bootstrap.min.js
+        └── bootstrap.min.js.map
+```
+
+We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/).
+
+
+## Bugs and feature requests
+
+Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/v4-dev/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
+
+
+## Documentation
+
+Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](https://jekyllrb.com/) and publicly hosted on GitHub Pages at <https://getbootstrap.com/>. The docs may also be run locally.
+
+Documentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/). Working on our search? Be sure to set `debug: true` in `site/docs/4.5/assets/js/src/search.js` file.
+
+### Running documentation locally
+
+1. Run through the [tooling setup](https://getbootstrap.com/docs/4.5/getting-started/build-tools/#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
+2. Run `npm install` to install Node.js dependencies.
+3. Run `npm start` to compile CSS and JavaScript files, generate our docs, and watch for changes.
+4. Open `http://localhost:9001` in your browser, and voilà.
+
+Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/).
+
+### Documentation for previous releases
+
+You can find all our previous releases docs on <https://getbootstrap.com/docs/versions/>.
+
+[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
+
+
+## Contributing
+
+Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/v4-dev/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
+
+Moreover, if your pull request contains JavaScript patches or features, you must include [relevant unit tests](https://github.com/twbs/bootstrap/tree/v4-dev/js/tests). All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).
+
+Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/v4-dev/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
+
+
+## Community
+
+Get updates on Bootstrap's development and chat with the project maintainers and community members.
+
+- Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
+- Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/).
+- Join [the official Slack room](https://bootstrap-slack.herokuapp.com/).
+- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
+- Implementation help may be found at Stack Overflow (tagged [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4)).
+- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
+
+
+## Versioning
+
+For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](https://semver.org/). Sometimes we screw up, but we adhere to those rules whenever possible.
+
+See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com/) contain summaries of the most noteworthy changes made in each release.
+
+
+## Creators
+
+**Mark Otto**
+
+- <https://twitter.com/mdo>
+- <https://github.com/mdo>
+
+**Jacob Thornton**
+
+- <https://twitter.com/fat>
+- <https://github.com/fat>
+
+
+## Thanks
+
+<a href="https://www.browserstack.com/">
+  <img src="https://live.browserstack.com/images/opensource/browserstack-logo.svg" alt="BrowserStack Logo" width="192" height="42">
+</a>
+
+Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!
+
+
+## Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/bootstrap#sponsor)]
+
+[![](https://opencollective.com/bootstrap/sponsor/0/avatar.svg)](https://opencollective.com/bootstrap/sponsor/0/website)
+[![](https://opencollective.com/bootstrap/sponsor/1/avatar.svg)](https://opencollective.com/bootstrap/sponsor/1/website)
+[![](https://opencollective.com/bootstrap/sponsor/2/avatar.svg)](https://opencollective.com/bootstrap/sponsor/2/website)
+[![](https://opencollective.com/bootstrap/sponsor/3/avatar.svg)](https://opencollective.com/bootstrap/sponsor/3/website)
+[![](https://opencollective.com/bootstrap/sponsor/4/avatar.svg)](https://opencollective.com/bootstrap/sponsor/4/website)
+[![](https://opencollective.com/bootstrap/sponsor/5/avatar.svg)](https://opencollective.com/bootstrap/sponsor/5/website)
+[![](https://opencollective.com/bootstrap/sponsor/6/avatar.svg)](https://opencollective.com/bootstrap/sponsor/6/website)
+[![](https://opencollective.com/bootstrap/sponsor/7/avatar.svg)](https://opencollective.com/bootstrap/sponsor/7/website)
+[![](https://opencollective.com/bootstrap/sponsor/8/avatar.svg)](https://opencollective.com/bootstrap/sponsor/8/website)
+[![](https://opencollective.com/bootstrap/sponsor/9/avatar.svg)](https://opencollective.com/bootstrap/sponsor/9/website)
+
+
+## Backers
+
+Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/bootstrap#backer)]
+
+[![Backers](https://opencollective.com/bootstrap/backers.svg?width=890)](https://opencollective.com/bootstrap#backers)
+
+
+## Copyright and license
+
+Code and documentation copyright 2011-2020 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/_functions.scss b/themes/fid_bbi/vendor/bootstrap/scss/_functions.scss
new file mode 100644
index 0000000000000000000000000000000000000000..eb2471d75368850f773509e081807782c7c93cd5
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/_functions.scss
@@ -0,0 +1,141 @@
+// Bootstrap functions
+//
+// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @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}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+  @if length($map) > 0 {
+    $values: map-values($map);
+    $first-value: nth($values, 1);
+    @if $first-value != 0 {
+      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+    }
+  }
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @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 {
+      // Do not escape the url brackets
+      @if str-index($string, "url(") == 1 {
+        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      } @else {
+        $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);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= $yiq-contrasted-threshold) {
+    @return $dark;
+  } @else {
+    @return $light;
+  }
+}
+
+// Retrieve color Sass maps
+@function color($key: "blue") {
+  @return map-get($colors, $key);
+}
+
+@function theme-color($key: "primary") {
+  @return map-get($theme-colors, $key);
+}
+
+@function gray($key: "100") {
+  @return map-get($grays, $key);
+}
+
+// Request a theme color level
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, $black, $white);
+  $level: abs($level);
+
+  @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/themes/fid_bbi/vendor/bootstrap/scss/_mixins.scss b/themes/fid_bbi/vendor/bootstrap/scss/_mixins.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7e7a23d254e969b14ee8aeb4c6ce228ede2ef658
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/_mixins.scss
@@ -0,0 +1,47 @@
+// Toggles
+//
+// Used in conjunction with global variables to enable certain theme features.
+
+// Vendor
+@import "vendor/rfs";
+
+// Deprecate
+@import "mixins/deprecate";
+
+// Utilities
+@import "mixins/breakpoints";
+@import "mixins/hover";
+@import "mixins/image";
+@import "mixins/badge";
+@import "mixins/resize";
+@import "mixins/screen-reader";
+@import "mixins/size";
+@import "mixins/reset-text";
+@import "mixins/text-emphasis";
+@import "mixins/text-hide";
+@import "mixins/text-truncate";
+@import "mixins/visibility";
+
+// Components
+@import "mixins/alert";
+@import "mixins/buttons";
+@import "mixins/caret";
+@import "mixins/pagination";
+@import "mixins/lists";
+@import "mixins/list-group";
+@import "mixins/nav-divider";
+@import "mixins/forms";
+@import "mixins/table-row";
+
+// Skins
+@import "mixins/background-variant";
+@import "mixins/border-radius";
+@import "mixins/box-shadow";
+@import "mixins/gradients";
+@import "mixins/transition";
+
+// Layout
+@import "mixins/clearfix";
+@import "mixins/grid-framework";
+@import "mixins/grid";
+@import "mixins/float";
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/_reboot.scss b/themes/fid_bbi/vendor/bootstrap/scss/_reboot.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4444ff0f0765e675e2c2e3e496542f9ac9fa228a
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/_reboot.scss
@@ -0,0 +1,480 @@
+// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+
+// Reboot
+//
+// Normalization of HTML elements, manually forked from Normalize.css to remove
+// styles targeting irrelevant browsers while applying new styles.
+//
+// Normalize is licensed MIT. https://github.com/necolas/normalize.css
+
+
+// Document
+//
+// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+// 2. Change the default font family in all browsers.
+// 3. Correct the line height in all browsers.
+// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 5. Change the default tap highlight to be completely transparent in iOS.
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box; // 1
+}
+
+html {
+  font-family: sans-serif; // 2
+  line-height: 1.15; // 3
+  -webkit-text-size-adjust: 100%; // 4
+  -webkit-tap-highlight-color: rgba($black, 0); // 5
+}
+
+// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
+// TODO: remove in v5
+// stylelint-disable-next-line selector-list-comma-newline-after
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+// Body
+//
+// 1. Remove the margin in all browsers.
+// 2. As a best practice, apply a default `background-color`.
+// 3. Set an explicit initial text-align value so that we can later use
+//    the `inherit` value on things like `<th>` elements.
+
+body {
+  margin: 0; // 1
+  font-family: $font-family-base;
+  @include font-size($font-size-base);
+  font-weight: $font-weight-base;
+  line-height: $line-height-base;
+  color: $body-color;
+  text-align: left; // 3
+  background-color: $body-bg; // 2
+}
+
+// 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;
+}
+
+
+// Content grouping
+//
+// 1. Add the correct box sizing in Firefox.
+// 2. Show the overflow in Edge and IE.
+
+hr {
+  box-sizing: content-box; // 1
+  height: 0; // 1
+  overflow: visible; // 2
+}
+
+
+//
+// Typography
+//
+
+// Remove top margins from headings
+//
+// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+// margin for easier control within type scales as it avoids margin collapsing.
+// stylelint-disable-next-line selector-list-comma-newline-after
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: $headings-margin-bottom;
+}
+
+// Reset margins on paragraphs
+//
+// Similarly, the top margin on `<p>`s get reset. However, we also reset the
+// bottom margin to use `rem` units instead of `em`.
+p {
+  margin-top: 0;
+  margin-bottom: $paragraph-margin-bottom;
+}
+
+// Abbreviations
+//
+// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
+// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+// 3. Add explicit cursor to indicate changed behavior.
+// 4. Remove the bottom border in Firefox 39-.
+// 5. Prevent the text-decoration to be skipped.
+
+abbr[title],
+abbr[data-original-title] { // 1
+  text-decoration: underline; // 2
+  text-decoration: underline dotted; // 2
+  cursor: help; // 3
+  border-bottom: 0; // 4
+  text-decoration-skip-ink: none; // 5
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: $dt-font-weight;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0; // Undo browser default
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
+}
+
+small {
+  @include font-size(80%); // Add the correct font size in all browsers
+}
+
+//
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+//
+
+sub,
+sup {
+  position: relative;
+  @include font-size(75%);
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub { bottom: -.25em; }
+sup { top: -.5em; }
+
+
+//
+// Links
+//
+
+a {
+  color: $link-color;
+  text-decoration: $link-decoration;
+  background-color: transparent; // Remove the gray background on active links in IE 10.
+
+  @include hover() {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+}
+
+// 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([class]) {
+  color: inherit;
+  text-decoration: none;
+
+  @include hover() {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+
+//
+// Code
+//
+
+pre,
+code,
+kbd,
+samp {
+  font-family: $font-family-monospace;
+  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+}
+
+pre {
+  // Remove browser default top margin
+  margin-top: 0;
+  // Reset browser default of `1em` to use `rem`s
+  margin-bottom: 1rem;
+  // Don't allow content to break outside
+  overflow: auto;
+  // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
+  // making it impossible to interact with the content
+  -ms-overflow-style: scrollbar;
+}
+
+
+//
+// Figures
+//
+
+figure {
+  // Apply a consistent margin strategy (matches our type styles).
+  margin: 0 0 1rem;
+}
+
+
+//
+// Images and content
+//
+
+img {
+  vertical-align: middle;
+  border-style: none; // Remove the border on images inside links in IE 10-.
+}
+
+svg {
+  // Workaround for the SVG overflow bug in IE10/11 is still required.
+  // See https://github.com/twbs/bootstrap/issues/26878
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+
+//
+// Tables
+//
+
+table {
+  border-collapse: collapse; // Prevent double borders
+}
+
+caption {
+  padding-top: $table-cell-padding;
+  padding-bottom: $table-cell-padding;
+  color: $table-caption-color;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
+  // closest parent with a set `text-align`.
+  text-align: inherit;
+}
+
+
+//
+// Forms
+//
+
+label {
+  // Allow labels to use `margin` for spacing.
+  display: inline-block;
+  margin-bottom: $label-margin-bottom;
+}
+
+// Remove the default `border-radius` that macOS Chrome adds.
+//
+// Details at https://github.com/twbs/bootstrap/issues/24093
+button {
+  // stylelint-disable-next-line property-blacklist
+  border-radius: 0;
+}
+
+// Work around a Firefox/IE bug where the transparent `button` background
+// results in a loss of the default `button` focus styles.
+//
+// Credit: https://github.com/suitcss/base/
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0; // Remove the margin in Firefox and Safari
+  font-family: inherit;
+  @include font-size(inherit);
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible; // Show the overflow in Edge
+}
+
+button,
+select {
+  text-transform: none; // Remove the inheritance of text transform in Firefox
+}
+
+// Set the cursor for non-`<button>` buttons
+//
+// Details at https://github.com/twbs/bootstrap/pull/30562
+[role="button"] {
+  cursor: pointer;
+}
+
+// Remove the inheritance of word-wrap in Safari.
+//
+// Details at https://github.com/twbs/bootstrap/issues/24990
+select {
+  word-wrap: normal;
+}
+
+
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+//    controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
+button,
+[type="button"], // 1
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; // 2
+}
+
+// Opinionated: add "hand" cursor to non-disabled button elements.
+@if $enable-pointer-cursor-for-buttons {
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+  }
+}
+
+// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
+  padding: 0; // 2. Remove the padding in IE 10-
+}
+
+
+textarea {
+  overflow: auto; // Remove the default vertical scrollbar in IE.
+  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
+  resize: vertical;
+}
+
+fieldset {
+  // Browsers set a default `min-width: min-content;` on fieldsets,
+  // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
+  // So we reset that to ensure fieldsets behave more like a standard block element.
+  // See https://github.com/twbs/bootstrap/issues/12359
+  // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+  min-width: 0;
+  // Reset the default outline behavior of fieldsets so they don't affect page layout.
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%; // 1
+  padding: 0;
+  margin-bottom: .5rem;
+  @include font-size(1.5rem);
+  line-height: inherit;
+  color: inherit; // 2
+  white-space: normal; // 1
+}
+
+progress {
+  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+}
+
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  // This overrides the extra rounded corners on search inputs in iOS so that our
+  // `.form-control` class can properly style them. Note that this cannot simply
+  // be added to `.form-control` as it's not specific enough. For details, see
+  // https://github.com/twbs/bootstrap/issues/11586.
+  outline-offset: -2px; // 2. Correct the outline style in Safari.
+  -webkit-appearance: none;
+}
+
+//
+// Remove the inner padding in Chrome and Safari on macOS.
+//
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+  font: inherit; // 2
+  -webkit-appearance: button; // 1
+}
+
+//
+// Correct element displays
+//
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item; // Add the correct display in all browsers
+  cursor: pointer;
+}
+
+template {
+  display: none; // Add the correct display in IE
+}
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+// Needed for proper display in IE 10-.
+[hidden] {
+  display: none !important;
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/_variables.scss b/themes/fid_bbi/vendor/bootstrap/scss/_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3ff0c65b359a5ad5ca7e082a503bca7be6a6844b
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/_variables.scss
@@ -0,0 +1,1140 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Color system
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$grays: () !default;
+$grays: map-merge(
+  (
+    "100": $gray-100,
+    "200": $gray-200,
+    "300": $gray-300,
+    "400": $gray-400,
+    "500": $gray-500,
+    "600": $gray-600,
+    "700": $gray-700,
+    "800": $gray-800,
+    "900": $gray-900
+  ),
+  $grays
+);
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #28a745 !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$colors: () !default;
+$colors: map-merge(
+  (
+    "blue":       $blue,
+    "indigo":     $indigo,
+    "purple":     $purple,
+    "pink":       $pink,
+    "red":        $red,
+    "orange":     $orange,
+    "yellow":     $yellow,
+    "green":      $green,
+    "teal":       $teal,
+    "cyan":       $cyan,
+    "white":      $white,
+    "gray":       $gray-600,
+    "gray-dark":  $gray-800
+  ),
+  $colors
+);
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge(
+  (
+    "primary":    $primary,
+    "secondary":  $secondary,
+    "success":    $success,
+    "info":       $info,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
+    "dark":       $dark
+  ),
+  $theme-colors
+);
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval:      8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold:  150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$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"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;
+
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret:                                true !default;
+$enable-rounded:                              true !default;
+$enable-shadows:                              false !default;
+$enable-gradients:                            false !default;
+$enable-transitions:                          true !default;
+$enable-prefers-reduced-motion-media-query:   true !default;
+$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes:                         true !default;
+$enable-pointer-cursor-for-buttons:           true !default;
+$enable-print-styles:                         true !default;
+$enable-responsive-font-sizes:                false !default;
+$enable-validation-icons:                     true !default;
+$enable-deprecation-messages:                 true !default;
+
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem !default;
+$spacers: () !default;
+$spacers: map-merge(
+  (
+    0: 0,
+    1: ($spacer * .25),
+    2: ($spacer * .5),
+    3: $spacer,
+    4: ($spacer * 1.5),
+    5: ($spacer * 3)
+  ),
+  $spacers
+);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: () !default;
+$sizes: map-merge(
+  (
+    25: 25%,
+    50: 50%,
+    75: 75%,
+    100: 100%,
+    auto: auto
+  ),
+  $sizes
+);
+
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:                   $white !default;
+$body-color:                $gray-900 !default;
+
+
+// Links
+//
+// Style anchor elements.
+
+$link-color:                              theme-color("primary") !default;
+$link-decoration:                         none !default;
+$link-hover-color:                        darken($link-color, 15%) !default;
+$link-hover-decoration:                   underline !default;
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+$emphasized-link-hover-darken-percentage: 15% !default;
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom:   1rem !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px
+) !default;
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns:                12 !default;
+$grid-gutter-width:           30px !default;
+$grid-row-columns:            6 !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg:              1.5 !default;
+$line-height-sm:              1.5 !default;
+
+$border-width:                1px !default;
+$border-color:                $gray-300 !default;
+
+$border-radius:               .25rem !default;
+$border-radius-lg:            .3rem !default;
+$border-radius-sm:            .2rem !default;
+
+$rounded-pill:                50rem !default;
+
+$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
+
+$component-active-color:      $white !default;
+$component-active-bg:         theme-color("primary") !default;
+
+$caret-width:                 .3em !default;
+$caret-vertical-align:        $caret-width * .85 !default;
+$caret-spacing:               $caret-width * .85 !default;
+
+$transition-base:             all .2s ease-in-out !default;
+$transition-fade:             opacity .15s linear !default;
+$transition-collapse:         height .35s ease !default;
+
+$embed-responsive-aspect-ratios: () !default;
+$embed-responsive-aspect-ratios: join(
+  (
+    (21 9),
+    (16 9),
+    (4 3),
+    (1 1),
+  ),
+  $embed-responsive-aspect-ratios
+);
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base:            $font-family-sans-serif !default;
+// stylelint-enable value-keyword-case
+
+$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg:                $font-size-base * 1.25 !default;
+$font-size-sm:                $font-size-base * .875 !default;
+
+$font-weight-lighter:         lighter !default;
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-bold:            700 !default;
+$font-weight-bolder:          bolder !default;
+
+$font-weight-base:            $font-weight-normal !default;
+$line-height-base:            1.5 !default;
+
+$h1-font-size:                $font-size-base * 2.5 !default;
+$h2-font-size:                $font-size-base * 2 !default;
+$h3-font-size:                $font-size-base * 1.75 !default;
+$h4-font-size:                $font-size-base * 1.5 !default;
+$h5-font-size:                $font-size-base * 1.25 !default;
+$h6-font-size:                $font-size-base !default;
+
+$headings-margin-bottom:      $spacer / 2 !default;
+$headings-font-family:        null !default;
+$headings-font-weight:        500 !default;
+$headings-line-height:        1.2 !default;
+$headings-color:              null !default;
+
+$display1-size:               6rem !default;
+$display2-size:               5.5rem !default;
+$display3-size:               4.5rem !default;
+$display4-size:               3.5rem !default;
+
+$display1-weight:             300 !default;
+$display2-weight:             300 !default;
+$display3-weight:             300 !default;
+$display4-weight:             300 !default;
+$display-line-height:         $headings-line-height !default;
+
+$lead-font-size:              $font-size-base * 1.25 !default;
+$lead-font-weight:            300 !default;
+
+$small-font-size:             80% !default;
+
+$text-muted:                  $gray-600 !default;
+
+$blockquote-small-color:      $gray-600 !default;
+$blockquote-small-font-size:  $small-font-size !default;
+$blockquote-font-size:        $font-size-base * 1.25 !default;
+
+$hr-border-color:             rgba($black, .1) !default;
+$hr-border-width:             $border-width !default;
+
+$mark-padding:                .2em !default;
+
+$dt-font-weight:              $font-weight-bold !default;
+
+$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
+$nested-kbd-font-weight:      $font-weight-bold !default;
+
+$list-inline-padding:         .5rem !default;
+
+$mark-bg:                     #fcf8e3 !default;
+
+$hr-margin-y:                 $spacer !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding:          .75rem !default;
+$table-cell-padding-sm:       .3rem !default;
+
+$table-color:                 $body-color !default;
+$table-bg:                    null !default;
+$table-accent-bg:             rgba($black, .05) !default;
+$table-hover-color:           $table-color !default;
+$table-hover-bg:              rgba($black, .075) !default;
+$table-active-bg:             $table-hover-bg !default;
+
+$table-border-width:          $border-width !default;
+$table-border-color:          $border-color !default;
+
+$table-head-bg:               $gray-200 !default;
+$table-head-color:            $gray-700 !default;
+
+$table-dark-color:            $white !default;
+$table-dark-bg:               $gray-800 !default;
+$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-striped-order:         odd !default;
+
+$table-caption-color:         $text-muted !default;
+
+$table-bg-level:              -9 !default;
+$table-border-level:          -6 !default;
+
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y:         .375rem !default;
+$input-btn-padding-x:         .75rem !default;
+$input-btn-font-family:       null !default;
+$input-btn-font-size:         $font-size-base !default;
+$input-btn-line-height:       $line-height-base !default;
+
+$input-btn-focus-width:       .2rem !default;
+$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
+$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm:      .25rem !default;
+$input-btn-padding-x-sm:      .5rem !default;
+$input-btn-font-size-sm:      $font-size-sm !default;
+$input-btn-line-height-sm:    $line-height-sm !default;
+
+$input-btn-padding-y-lg:      .5rem !default;
+$input-btn-padding-x-lg:      1rem !default;
+$input-btn-font-size-lg:      $font-size-lg !default;
+$input-btn-line-height-lg:    $line-height-lg !default;
+
+$input-btn-border-width:      $border-width !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y:               $input-btn-padding-y !default;
+$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;
+$btn-font-size-sm:            $input-btn-font-size-sm !default;
+$btn-line-height-sm:          $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
+$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
+$btn-font-size-lg:            $input-btn-font-size-lg !default;
+$btn-line-height-lg:          $input-btn-line-height-lg !default;
+
+$btn-border-width:            $input-btn-border-width !default;
+
+$btn-font-weight:             $font-weight-normal !default;
+$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width:             $input-btn-focus-width !default;
+$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity:        .65 !default;
+$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
+
+$btn-link-disabled-color:     $gray-600 !default;
+
+$btn-block-spacing-y:         .5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius:           $border-radius !default;
+$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius-sm:        $border-radius-sm !default;
+
+$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+
+// Forms
+
+$label-margin-bottom:                   .5rem !default;
+
+$input-padding-y:                       $input-btn-padding-y !default;
+$input-padding-x:                       $input-btn-padding-x !default;
+$input-font-family:                     $input-btn-font-family !default;
+$input-font-size:                       $input-btn-font-size !default;
+$input-font-weight:                     $font-weight-base !default;
+$input-line-height:                     $input-btn-line-height !default;
+
+$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
+$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
+$input-font-size-sm:                    $input-btn-font-size-sm !default;
+$input-line-height-sm:                  $input-btn-line-height-sm !default;
+
+$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
+$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
+$input-font-size-lg:                    $input-btn-font-size-lg !default;
+$input-line-height-lg:                  $input-btn-line-height-lg !default;
+
+$input-bg:                              $white !default;
+$input-disabled-bg:                     $gray-200 !default;
+
+$input-color:                           $gray-700 !default;
+$input-border-color:                    $gray-400 !default;
+$input-border-width:                    $input-btn-border-width !default;
+$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
+
+$input-border-radius:                   $border-radius !default;
+$input-border-radius-lg:                $border-radius-lg !default;
+$input-border-radius-sm:                $border-radius-sm !default;
+
+$input-focus-bg:                        $input-bg !default;
+$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
+$input-focus-color:                     $input-color !default;
+$input-focus-width:                     $input-btn-focus-width !default;
+$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color:               $gray-600 !default;
+$input-plaintext-color:                 $body-color !default;
+
+$input-height-border:                   $input-border-width * 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:                          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;
+
+$form-text-margin-top:                  .25rem !default;
+
+$form-check-input-gutter:               1.25rem !default;
+$form-check-input-margin-y:             .3rem !default;
+$form-check-input-margin-x:             .25rem !default;
+
+$form-check-inline-margin-x:            .75rem !default;
+$form-check-inline-input-margin-x:      .3125rem !default;
+
+$form-grid-gutter-width:                10px !default;
+$form-group-margin-bottom:              1rem !default;
+
+$input-group-addon-color:               $input-color !default;
+$input-group-addon-bg:                  $gray-200 !default;
+$input-group-addon-border-color:        $input-border-color !default;
+
+$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$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;
+
+$custom-control-indicator-bg-size:      50% 50% !default;
+$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;
+
+$custom-control-indicator-checked-color:        $component-active-color !default;
+$custom-control-indicator-checked-bg:           $component-active-bg !default;
+$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
+$custom-control-indicator-checked-box-shadow:   null !default;
+$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
+
+$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;
+$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
+
+$custom-control-indicator-active-color:         $component-active-color !default;
+$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
+$custom-control-indicator-active-box-shadow:    null !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:        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:         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:   null !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:           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:                  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;
+$custom-select-font-family:         $input-font-family !default;
+$custom-select-font-size:           $input-font-size !default;
+$custom-select-height:              $input-height !default;
+$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-font-weight:         $input-font-weight !default;
+$custom-select-line-height:         $input-line-height !default;
+$custom-select-color:               $input-color !default;
+$custom-select-disabled-color:      $gray-600 !default;
+$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:           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: 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;
+
+$custom-select-border-width:        $input-border-width !default;
+$custom-select-border-color:        $input-border-color !default;
+$custom-select-border-radius:       $border-radius !default;
+$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
+
+$custom-select-focus-border-color:  $input-focus-border-color !default;
+$custom-select-focus-width:         $input-focus-width !default;
+$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
+
+$custom-select-padding-y-sm:        $input-padding-y-sm !default;
+$custom-select-padding-x-sm:        $input-padding-x-sm !default;
+$custom-select-font-size-sm:        $input-font-size-sm !default;
+$custom-select-height-sm:           $input-height-sm !default;
+
+$custom-select-padding-y-lg:        $input-padding-y-lg !default;
+$custom-select-padding-x-lg:        $input-padding-x-lg !default;
+$custom-select-font-size-lg:        $input-font-size-lg !default;
+$custom-select-height-lg:           $input-height-lg !default;
+
+$custom-range-track-width:          100% !default;
+$custom-range-track-height:         .5rem !default;
+$custom-range-track-cursor:         pointer !default;
+$custom-range-track-bg:             $gray-300 !default;
+$custom-range-track-border-radius:  1rem !default;
+$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;
+
+$custom-range-thumb-width:                   1rem !default;
+$custom-range-thumb-height:                  $custom-range-thumb-width !default;
+$custom-range-thumb-bg:                      $component-active-bg !default;
+$custom-range-thumb-border:                  0 !default;
+$custom-range-thumb-border-radius:           1rem !default;
+$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
+$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
+$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
+$custom-range-thumb-disabled-bg:             $gray-500 !default;
+
+$custom-file-height:                $input-height !default;
+$custom-file-height-inner:          $input-height-inner !default;
+$custom-file-focus-border-color:    $input-focus-border-color !default;
+$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
+$custom-file-disabled-bg:           $input-disabled-bg !default;
+
+$custom-file-padding-y:             $input-padding-y !default;
+$custom-file-padding-x:             $input-padding-x !default;
+$custom-file-line-height:           $input-line-height !default;
+$custom-file-font-family:           $input-font-family !default;
+$custom-file-font-weight:           $input-font-weight !default;
+$custom-file-color:                 $input-color !default;
+$custom-file-bg:                    $input-bg !default;
+$custom-file-border-width:          $input-border-width !default;
+$custom-file-border-color:          $input-border-color !default;
+$custom-file-border-radius:         $input-border-radius !default;
+$custom-file-box-shadow:            $input-box-shadow !default;
+$custom-file-button-color:          $custom-file-color !default;
+$custom-file-button-bg:             $input-group-addon-bg !default;
+$custom-file-text: (
+  en: "Browse"
+) !default;
+
+
+// Form validation
+
+$form-feedback-margin-top:          $form-text-margin-top !default;
+$form-feedback-font-size:           $small-font-size !default;
+$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:          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:        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;
+$form-validation-states: map-merge(
+  (
+    "valid": (
+      "color": $form-feedback-valid-color,
+      "icon": $form-feedback-icon-valid
+    ),
+    "invalid": (
+      "color": $form-feedback-invalid-color,
+      "icon": $form-feedback-icon-invalid
+    ),
+  ),
+  $form-validation-states
+);
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+$zindex-dropdown:                   1000 !default;
+$zindex-sticky:                     1020 !default;
+$zindex-fixed:                      1030 !default;
+$zindex-modal-backdrop:             1040 !default;
+$zindex-modal:                      1050 !default;
+$zindex-popover:                    1060 !default;
+$zindex-tooltip:                    1070 !default;
+
+
+// Navs
+
+$nav-link-padding-y:                .5rem !default;
+$nav-link-padding-x:                1rem !default;
+$nav-link-disabled-color:           $gray-600 !default;
+
+$nav-tabs-border-color:             $gray-300 !default;
+$nav-tabs-border-width:             $border-width !default;
+$nav-tabs-border-radius:            $border-radius !default;
+$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        $gray-700 !default;
+$nav-tabs-link-active-bg:           $body-bg !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius:           $border-radius !default;
+$nav-pills-link-active-color:       $component-active-color !default;
+$nav-pills-link-active-bg:          $component-active-bg !default;
+
+$nav-divider-color:                 $gray-200 !default;
+$nav-divider-margin-y:              $spacer / 2 !default;
+
+
+// Navbar
+
+$navbar-padding-y:                  $spacer / 2 !default;
+$navbar-padding-x:                  $spacer !default;
+
+$navbar-nav-link-padding-x:         .5rem !default;
+
+$navbar-brand-font-size:            $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+
+$navbar-toggler-padding-y:          .25rem !default;
+$navbar-toggler-padding-x:          .75rem !default;
+$navbar-toggler-font-size:          $font-size-lg !default;
+$navbar-toggler-border-radius:      $btn-border-radius !default;
+
+$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:       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:      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;
+$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
+$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width:                10rem !default;
+$dropdown-padding-y:                .5rem !default;
+$dropdown-spacer:                   .125rem !default;
+$dropdown-font-size:                $font-size-base !default;
+$dropdown-color:                    $body-color !default;
+$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:      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;
+
+$dropdown-link-color:               $gray-900 !default;
+$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg:            $gray-100 !default;
+
+$dropdown-link-active-color:        $component-active-color !default;
+$dropdown-link-active-bg:           $component-active-bg !default;
+
+$dropdown-link-disabled-color:      $gray-600 !default;
+
+$dropdown-item-padding-y:           .25rem !default;
+$dropdown-item-padding-x:           1.5rem !default;
+
+$dropdown-header-color:             $gray-600 !default;
+$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
+
+
+// Pagination
+
+$pagination-padding-y:              .5rem !default;
+$pagination-padding-x:              .75rem !default;
+$pagination-padding-y-sm:           .25rem !default;
+$pagination-padding-x-sm:           .5rem !default;
+$pagination-padding-y-lg:           .75rem !default;
+$pagination-padding-x-lg:           1.5rem !default;
+$pagination-line-height:            1.25 !default;
+
+$pagination-color:                  $link-color !default;
+$pagination-bg:                     $white !default;
+$pagination-border-width:           $border-width !default;
+$pagination-border-color:           $gray-300 !default;
+
+$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
+$pagination-focus-outline:          0 !default;
+
+$pagination-hover-color:            $link-hover-color !default;
+$pagination-hover-bg:               $gray-200 !default;
+$pagination-hover-border-color:     $gray-300 !default;
+
+$pagination-active-color:           $component-active-color !default;
+$pagination-active-bg:              $component-active-bg !default;
+$pagination-active-border-color:    $pagination-active-bg !default;
+
+$pagination-disabled-color:         $gray-600 !default;
+$pagination-disabled-bg:            $white !default;
+$pagination-disabled-border-color:  $gray-300 !default;
+
+
+// Jumbotron
+
+$jumbotron-padding:                 2rem !default;
+$jumbotron-color:                   null !default;
+$jumbotron-bg:                      $gray-200 !default;
+
+
+// Cards
+
+$card-spacer-y:                     .75rem !default;
+$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:          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;
+
+$card-img-overlay-padding:          1.25rem !default;
+
+$card-group-margin:                 $grid-gutter-width / 2 !default;
+$card-deck-margin:                  $card-group-margin !default;
+
+$card-columns-count:                3 !default;
+$card-columns-gap:                  1.25rem !default;
+$card-columns-margin:               $card-spacer-y !default;
+
+
+// Tooltips
+
+$tooltip-font-size:                 $font-size-sm !default;
+$tooltip-max-width:                 200px !default;
+$tooltip-color:                     $white !default;
+$tooltip-bg:                        $black !default;
+$tooltip-border-radius:             $border-radius !default;
+$tooltip-opacity:                   .9 !default;
+$tooltip-padding-y:                 .25rem !default;
+$tooltip-padding-x:                 .5rem !default;
+$tooltip-margin:                    0 !default;
+
+$tooltip-arrow-width:               .8rem !default;
+$tooltip-arrow-height:              .4rem !default;
+$tooltip-arrow-color:               $tooltip-bg !default;
+
+// Form tooltips must come after regular tooltips
+$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
+$form-feedback-tooltip-line-height:   $line-height-base !default;
+$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+
+
+// Popovers
+
+$popover-font-size:                 $font-size-sm !default;
+$popover-bg:                        $white !default;
+$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;
+$popover-header-color:              $headings-color !default;
+$popover-header-padding-y:          .5rem !default;
+$popover-header-padding-x:          .75rem !default;
+
+$popover-body-color:                $body-color !default;
+$popover-body-padding-y:            $popover-header-padding-y !default;
+$popover-body-padding-x:            $popover-header-padding-x !default;
+
+$popover-arrow-width:               1rem !default;
+$popover-arrow-height:              .5rem !default;
+$popover-arrow-color:               $popover-bg !default;
+
+$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+
+
+// Toasts
+
+$toast-max-width:                   350px !default;
+$toast-padding-x:                   .75rem !default;
+$toast-padding-y:                   .25rem !default;
+$toast-font-size:                   .875rem !default;
+$toast-color:                       null !default;
+$toast-background-color:            rgba($white, .85) !default;
+$toast-border-width:                1px !default;
+$toast-border-color:                rgba(0, 0, 0, .1) !default;
+$toast-border-radius:               .25rem !default;
+$toast-box-shadow:                  0 .25rem .75rem rgba($black, .1) !default;
+
+$toast-header-color:                $gray-600 !default;
+$toast-header-background-color:     rgba($white, .85) !default;
+$toast-header-border-color:         rgba(0, 0, 0, .05) !default;
+
+
+// Badges
+
+$badge-font-size:                   75% !default;
+$badge-font-weight:                 $font-weight-bold !default;
+$badge-padding-y:                   .25em !default;
+$badge-padding-x:                   .4em !default;
+$badge-border-radius:               $border-radius !default;
+
+$badge-transition:                  $btn-transition !default;
+$badge-focus-width:                 $input-btn-focus-width !default;
+
+$badge-pill-padding-x:              .6em !default;
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$badge-pill-border-radius:          10rem !default;
+
+
+// Modals
+
+// 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;
+
+$modal-title-line-height:           $line-height-base !default;
+
+$modal-content-color:               null !default;
+$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;
+
+$modal-backdrop-bg:                 $black !default;
+$modal-backdrop-opacity:            .5 !default;
+$modal-header-border-color:         $border-color !default;
+$modal-footer-border-color:         $modal-header-border-color !default;
+$modal-header-border-width:         $modal-content-border-width !default;
+$modal-footer-border-width:         $modal-header-border-width !default;
+$modal-header-padding-y:            1rem !default;
+$modal-header-padding-x:            1rem !default;
+$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-xl:                          1140px !default;
+$modal-lg:                          800px !default;
+$modal-md:                          500px !default;
+$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
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y:                   .75rem !default;
+$alert-padding-x:                   1.25rem !default;
+$alert-margin-bottom:               1rem !default;
+$alert-border-radius:               $border-radius !default;
+$alert-link-font-weight:            $font-weight-bold !default;
+$alert-border-width:                $border-width !default;
+
+$alert-bg-level:                    -10 !default;
+$alert-border-level:                -9 !default;
+$alert-color-level:                 6 !default;
+
+
+// Progress bars
+
+$progress-height:                   1rem !default;
+$progress-font-size:                $font-size-base * .75 !default;
+$progress-bg:                       $gray-200 !default;
+$progress-border-radius:            $border-radius !default;
+$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
+$progress-bar-color:                $white !default;
+$progress-bar-bg:                   theme-color("primary") !default;
+$progress-bar-animation-timing:     1s linear infinite !default;
+$progress-bar-transition:           width .6s ease !default;
+
+
+// List group
+
+$list-group-color:                  null !default;
+$list-group-bg:                     $white !default;
+$list-group-border-color:           rgba($black, .125) !default;
+$list-group-border-width:           $border-width !default;
+$list-group-border-radius:          $border-radius !default;
+
+$list-group-item-padding-y:         .75rem !default;
+$list-group-item-padding-x:         1.25rem !default;
+
+$list-group-hover-bg:               $gray-100 !default;
+$list-group-active-color:           $component-active-color !default;
+$list-group-active-bg:              $component-active-bg !default;
+$list-group-active-border-color:    $list-group-active-bg !default;
+
+$list-group-disabled-color:         $gray-600 !default;
+$list-group-disabled-bg:            $list-group-bg !default;
+
+$list-group-action-color:           $gray-700 !default;
+$list-group-action-hover-color:     $list-group-action-color !default;
+
+$list-group-action-active-color:    $body-color !default;
+$list-group-action-active-bg:       $gray-200 !default;
+
+
+// Image thumbnails
+
+$thumbnail-padding:                 .25rem !default;
+$thumbnail-bg:                      $body-bg !default;
+$thumbnail-border-width:            $border-width !default;
+$thumbnail-border-color:            $gray-300 !default;
+$thumbnail-border-radius:           $border-radius !default;
+$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
+
+
+// Figures
+
+$figure-caption-font-size:          90% !default;
+$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;
+
+$breadcrumb-margin-bottom:          1rem !default;
+
+$breadcrumb-bg:                     $gray-200 !default;
+$breadcrumb-divider-color:          $gray-600 !default;
+$breadcrumb-active-color:           $gray-600 !default;
+$breadcrumb-divider:                quote("/") !default;
+
+$breadcrumb-border-radius:          $border-radius !default;
+
+
+// Carousel
+
+$carousel-control-color:             $white !default;
+$carousel-control-width:             15% !default;
+$carousel-control-opacity:           .5 !default;
+$carousel-control-hover-opacity:     .9 !default;
+$carousel-control-transition:        opacity .15s ease !default;
+
+$carousel-indicator-width:           30px !default;
+$carousel-indicator-height:          3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer:          3px !default;
+$carousel-indicator-active-bg:       $white !default;
+$carousel-indicator-transition:      opacity .6s ease !default;
+
+$carousel-caption-width:             70% !default;
+$carousel-caption-color:             $white !default;
+
+$carousel-control-icon-width:        20px !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`)
+
+
+// Spinners
+
+$spinner-width:         2rem !default;
+$spinner-height:        $spinner-width !default;
+$spinner-border-width:  .25em !default;
+
+$spinner-width-sm:        1rem !default;
+$spinner-height-sm:       $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;
+
+
+// Close
+
+$close-font-size:                   $font-size-base * 1.5 !default;
+$close-font-weight:                 $font-weight-bold !default;
+$close-color:                       $black !default;
+$close-text-shadow:                 0 1px 0 $white !default;
+
+
+// Code
+
+$code-font-size:                    87.5% !default;
+$code-color:                        $pink !default;
+
+$kbd-padding-y:                     .2rem !default;
+$kbd-padding-x:                     .4rem !default;
+$kbd-font-size:                     $code-font-size !default;
+$kbd-color:                         $white !default;
+$kbd-bg:                            $gray-900 !default;
+
+$pre-color:                         $gray-900 !default;
+$pre-scrollable-max-height:         340px !default;
+
+
+// Utilities
+
+$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
+$overflows: auto, hidden !default;
+$positions: static, relative, absolute, fixed, sticky !default;
+$user-selects: all, auto, none !default;
+
+
+// Printing
+
+$print-page-size:                   a3 !default;
+$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/bootstrap-reboot.scss b/themes/fid_bbi/vendor/bootstrap/scss/bootstrap-reboot.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d922d75fb46243aad64a19f2fb7962eaca0a2981
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/bootstrap-reboot.scss
@@ -0,0 +1,12 @@
+/*!
+ * Bootstrap Reboot v4.5.2 (https://getbootstrap.com/)
+ * Copyright 2011-2020 The Bootstrap Authors
+ * Copyright 2011-2020 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+
+@import "functions";
+@import "variables";
+@import "mixins";
+@import "reboot";
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_alert.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_alert.scss
new file mode 100644
index 0000000000000000000000000000000000000000..db5a7eb4549ec1406985347113efa74287a2f219
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_alert.scss
@@ -0,0 +1,13 @@
+@mixin alert-variant($background, $border, $color) {
+  color: $color;
+  @include gradient-bg($background);
+  border-color: $border;
+
+  hr {
+    border-top-color: darken($border, 5%);
+  }
+
+  .alert-link {
+    color: darken($color, 10%);
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_background-variant.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_background-variant.scss
new file mode 100644
index 0000000000000000000000000000000000000000..80580189ad7f5453a16cbdf5f5c84824baa0ebcc
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_background-variant.scss
@@ -0,0 +1,23 @@
+// stylelint-disable declaration-no-important
+
+// Contextual backgrounds
+
+@mixin bg-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    background-color: $color !important;
+  }
+  a#{$parent},
+  button#{$parent} {
+    @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, $ignore-warning: false) {
+  #{$parent} {
+    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+  }
+  @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_badge.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_badge.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f1c499141accb569142e67a5ffff52ea1fb22cf1
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_badge.scss
@@ -0,0 +1,17 @@
+@mixin badge-variant($bg) {
+  color: color-yiq($bg);
+  background-color: $bg;
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      color: color-yiq($bg);
+      background-color: darken($bg, 10%);
+    }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
+    }
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_border-radius.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_border-radius.scss
new file mode 100644
index 0000000000000000000000000000000000000000..aee9bf3d3e1adf4ad0516db9229746938af6b373
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_border-radius.scss
@@ -0,0 +1,76 @@
+// stylelint-disable property-blacklist
+// Single side border-radius
+
+// Helper function to replace negative values with 0
+@function valid-radius($radius) {
+  $return: ();
+  @each $value in $radius {
+    @if type-of($value) == number {
+      $return: append($return, max($value, 0));
+    } @else {
+      $return: append($return, $value);
+    }
+  }
+  @return $return;
+}
+
+@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
+  @if $enable-rounded {
+    border-radius: valid-radius($radius);
+  }
+  @else if $fallback-border-radius != false {
+    border-radius: $fallback-border-radius;
+  }
+}
+
+@mixin border-top-radius($radius) {
+  @if $enable-rounded {
+    border-top-left-radius: valid-radius($radius);
+    border-top-right-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-right-radius($radius) {
+  @if $enable-rounded {
+    border-top-right-radius: valid-radius($radius);
+    border-bottom-right-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-bottom-radius($radius) {
+  @if $enable-rounded {
+    border-bottom-right-radius: valid-radius($radius);
+    border-bottom-left-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-left-radius($radius) {
+  @if $enable-rounded {
+    border-top-left-radius: valid-radius($radius);
+    border-bottom-left-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-top-left-radius($radius) {
+  @if $enable-rounded {
+    border-top-left-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-top-right-radius($radius) {
+  @if $enable-rounded {
+    border-top-right-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-bottom-right-radius($radius) {
+  @if $enable-rounded {
+    border-bottom-right-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-bottom-left-radius($radius) {
+  @if $enable-rounded {
+    border-bottom-left-radius: valid-radius($radius);
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_box-shadow.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_box-shadow.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0726d4359a8f30eef0d0ca097a17994456343675
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_box-shadow.scss
@@ -0,0 +1,20 @@
+@mixin box-shadow($shadow...) {
+  @if $enable-shadows {
+    $result: ();
+
+    @if (length($shadow) == 1) {
+      // We can pass `@include box-shadow(none);`
+      $result: $shadow;
+    } @else {
+      // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
+      @for $i from 1 through length($shadow) {
+        @if nth($shadow, $i) != "none" {
+          $result: append($result, nth($shadow, $i), "comma");
+        }
+      }
+    }
+    @if (length($result) > 0) {
+      box-shadow: $result;
+    }
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_breakpoints.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_breakpoints.scss
new file mode 100644
index 0000000000000000000000000000000000000000..23a5de96be0dfd0bcbf342a67ef62b1039500a77
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_breakpoints.scss
@@ -0,0 +1,123 @@
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767.98px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_buttons.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_buttons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d6235aa27ca6ff6dd5991328ca4c6b8ec791faeb
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_buttons.scss
@@ -0,0 +1,110 @@
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
+  color: color-yiq($background);
+  @include gradient-bg($background);
+  border-color: $border;
+  @include box-shadow($btn-box-shadow);
+
+  @include hover() {
+    color: color-yiq($hover-background);
+    @include gradient-bg($hover-background);
+    border-color: $hover-border;
+  }
+
+  &:focus,
+  &.focus {
+    color: color-yiq($hover-background);
+    @include gradient-bg($hover-background);
+    border-color: $hover-border;
+    @if $enable-shadows {
+      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+    }
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    color: color-yiq($background);
+    background-color: $background;
+    border-color: $border;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: color-yiq($active-background);
+    background-color: $active-background;
+    @if $enable-gradients {
+      background-image: none; // Remove the gradient for the pressed/active state
+    }
+    border-color: $active-border;
+
+    &:focus {
+      @if $enable-shadows and $btn-active-box-shadow != none {
+        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+      }
+    }
+  }
+}
+
+@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+  color: $color;
+  border-color: $color;
+
+  @include hover() {
+    color: $color-hover;
+    background-color: $active-background;
+    border-color: $active-border;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: color-yiq($active-background);
+    background-color: $active-background;
+    border-color: $active-border;
+
+    &:focus {
+      @if $enable-shadows and $btn-active-box-shadow != none {
+        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+      }
+    }
+  }
+}
+
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+  padding: $padding-y $padding-x;
+  @include font-size($font-size);
+  line-height: $line-height;
+  // Manually declare to provide an override to the browser default
+  @include border-radius($border-radius, 0);
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_caret.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_caret.scss
new file mode 100644
index 0000000000000000000000000000000000000000..27466495b28aa9630b01cbe6aa625c8e5e5d0e12
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_caret.scss
@@ -0,0 +1,62 @@
+@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() {
+  border-top: 0;
+  border-right: $caret-width solid transparent;
+  border-bottom: $caret-width solid;
+  border-left: $caret-width solid transparent;
+}
+
+@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() {
+  border-top: $caret-width solid transparent;
+  border-right: $caret-width solid;
+  border-bottom: $caret-width solid transparent;
+}
+
+@mixin caret($direction: down) {
+  @if $enable-caret {
+    &::after {
+      display: inline-block;
+      margin-left: $caret-spacing;
+      vertical-align: $caret-vertical-align;
+      content: "";
+      @if $direction == down {
+        @include caret-down();
+      } @else if $direction == up {
+        @include caret-up();
+      } @else if $direction == right {
+        @include caret-right();
+      }
+    }
+
+    @if $direction == left {
+      &::after {
+        display: none;
+      }
+
+      &::before {
+        display: inline-block;
+        margin-right: $caret-spacing;
+        vertical-align: $caret-vertical-align;
+        content: "";
+        @include caret-left();
+      }
+    }
+
+    &:empty::after {
+      margin-left: 0;
+    }
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_clearfix.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_clearfix.scss
new file mode 100644
index 0000000000000000000000000000000000000000..11a977b7373dab15046354e1b27b88f29acdf44f
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_clearfix.scss
@@ -0,0 +1,7 @@
+@mixin clearfix() {
+  &::after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_deprecate.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_deprecate.scss
new file mode 100644
index 0000000000000000000000000000000000000000..df070bc59634213b5f9d49b4d6169d61dd6ac40d
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_deprecate.scss
@@ -0,0 +1,10 @@
+// Deprecate mixin
+//
+// This mixin can be used to deprecate mixins or functions.
+// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
+// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
+@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
+  @if ($enable-deprecation-messages != false and $ignore-warning != true) {
+    @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_float.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_float.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6b376a2580c8821ceceb09fc4ee1f274130510f8
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_float.scss
@@ -0,0 +1,14 @@
+// stylelint-disable declaration-no-important
+
+@mixin float-left() {
+  float: left !important;
+  @include deprecate("The `float-left` mixin", "v4.3.0", "v5");
+}
+@mixin float-right() {
+  float: right !important;
+  @include deprecate("The `float-right` mixin", "v4.3.0", "v5");
+}
+@mixin float-none() {
+  float: none !important;
+  @include deprecate("The `float-none` mixin", "v4.3.0", "v5");
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_forms.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_forms.scss
new file mode 100644
index 0000000000000000000000000000000000000000..39b52f3cae23b6ea00da6da67fcf4b4e2bf97e8c
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_forms.scss
@@ -0,0 +1,178 @@
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `$input-focus-border-color` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+@mixin form-control-focus($ignore-warning: false) {
+  &:focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      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 {
+    display: none;
+    width: 100%;
+    margin-top: $form-feedback-margin-top;
+    @include font-size($form-feedback-font-size);
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+    margin-top: .1rem;
+    @include font-size($form-feedback-tooltip-font-size);
+    line-height: $form-feedback-tooltip-line-height;
+    color: color-yiq($color);
+    background-color: rgba($color, $form-feedback-tooltip-opacity);
+    @include border-radius($form-feedback-tooltip-border-radius);
+  }
+
+  @include form-validation-state-selector($state) {
+    ~ .#{$state}-feedback,
+    ~ .#{$state}-tooltip {
+      display: block;
+    }
+  }
+
+  .form-control {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-image: escape-svg($icon);
+        background-repeat: no-repeat;
+        background-position: right $input-height-inner-quarter center;
+        background-size: $input-height-inner-half $input-height-inner-half;
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+      }
+    }
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  textarea.form-control {
+    @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;
+      }
+    }
+  }
+
+  .custom-select {
+    @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, 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);
+      }
+    }
+  }
+
+  .form-check-input {
+    @include form-validation-state-selector($state) {
+      ~ .form-check-label {
+        color: $color;
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .custom-control-input {
+    @include form-validation-state-selector($state) {
+      ~ .custom-control-label {
+        color: $color;
+
+        &::before {
+          border-color: $color;
+        }
+      }
+
+      &:checked {
+        ~ .custom-control-label::before {
+          border-color: lighten($color, 10%);
+          @include gradient-bg(lighten($color, 10%));
+        }
+      }
+
+      &:focus {
+        ~ .custom-control-label::before {
+          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        }
+
+        &:not(:checked) ~ .custom-control-label::before {
+          border-color: $color;
+        }
+      }
+    }
+  }
+
+  // custom file
+  .custom-file-input {
+    @include form-validation-state-selector($state) {
+      ~ .custom-file-label {
+        border-color: $color;
+      }
+
+      &:focus {
+        ~ .custom-file-label {
+          border-color: $color;
+          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        }
+      }
+    }
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_gradients.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_gradients.scss
new file mode 100644
index 0000000000000000000000000000000000000000..88c4d64b7f7ef50faabf977b168076bb9750da17
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_gradients.scss
@@ -0,0 +1,45 @@
+// Gradients
+
+@mixin gradient-bg($color) {
+  @if $enable-gradients {
+    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
+  } @else {
+    background-color: $color;
+  }
+}
+
+// Horizontal gradient, from left to right
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
+  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
+  background-repeat: repeat-x;
+}
+
+// Vertical gradient, from top to bottom
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
+  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
+  background-repeat: repeat-x;
+}
+
+@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
+  background-image: linear-gradient($deg, $start-color, $end-color);
+  background-repeat: repeat-x;
+}
+@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
+  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+  background-repeat: no-repeat;
+}
+@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
+  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
+  background-repeat: no-repeat;
+}
+@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
+  background-image: radial-gradient(circle, $inner-color, $outer-color);
+  background-repeat: no-repeat;
+}
+@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
+  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_grid-framework.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_grid-framework.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6fc8e856122c4f523a85c2cb55352a1a79dbedb8
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_grid-framework.scss
@@ -0,0 +1,80 @@
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+  // Common properties for all breakpoints
+  %grid-column {
+    position: relative;
+    width: 100%;
+    padding-right: $gutter / 2;
+    padding-left: $gutter / 2;
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @if $columns > 0 {
+      // Allow columns to stretch full width below their breakpoints
+      @for $i from 1 through $columns {
+        .col#{$infix}-#{$i} {
+          @extend %grid-column;
+        }
+      }
+    }
+
+    .col#{$infix},
+    .col#{$infix}-auto {
+      @extend %grid-column;
+    }
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .col#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+
+      @if $grid-row-columns > 0 {
+        @for $i from 1 through $grid-row-columns {
+          .row-cols#{$infix}-#{$i} {
+            @include row-cols($i);
+          }
+        }
+      }
+
+      .col#{$infix}-auto {
+        @include make-col-auto();
+      }
+
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .col#{$infix}-#{$i} {
+            @include make-col($i, $columns);
+          }
+        }
+      }
+
+      .order#{$infix}-first { order: -1; }
+
+      .order#{$infix}-last { order: $columns + 1; }
+
+      @for $i from 0 through $columns {
+        .order#{$infix}-#{$i} { order: $i; }
+      }
+
+      @if $columns > 0 {
+        // `$columns - 1` because offsetting by the width of an entire row isn't possible
+        @for $i from 0 through ($columns - 1) {
+          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+            .offset#{$infix}-#{$i} {
+              @include make-col-offset($i, $columns);
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_grid.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_grid.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b72d150e4d8cc02a0c06df48ea33308c5ee9b6de
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_grid.scss
@@ -0,0 +1,69 @@
+/// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+@mixin make-container($gutter: $grid-gutter-width) {
+  width: 100%;
+  padding-right: $gutter / 2;
+  padding-left: $gutter / 2;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@mixin make-row($gutter: $grid-gutter-width) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -$gutter / 2;
+  margin-left: -$gutter / 2;
+}
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      max-width: $container-max-width;
+    }
+  }
+  @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
+}
+
+@mixin make-col-ready($gutter: $grid-gutter-width) {
+  position: relative;
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  width: 100%;
+  padding-right: $gutter / 2;
+  padding-left: $gutter / 2;
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+  flex: 0 0 percentage($size / $columns);
+  // Add a `max-width` to ensure content within each column does not blow out
+  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+  // do not appear to require this.
+  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/themes/fid_bbi/vendor/bootstrap/scss/mixins/_hover.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_hover.scss
new file mode 100644
index 0000000000000000000000000000000000000000..409f8244e126b580df1b3a76b1efb62e4eb58951
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_hover.scss
@@ -0,0 +1,37 @@
+// Hover mixin and `$enable-hover-media-query` are deprecated.
+//
+// Originally added during our alphas and maintained during betas, this mixin was
+// designed to prevent `:hover` stickiness on iOS-an issue where hover styles
+// would persist after initial touch.
+//
+// For backward compatibility, we've kept these mixins and updated them to
+// always return their regular pseudo-classes instead of a shimmed media query.
+//
+// Issue: https://github.com/twbs/bootstrap/issues/25195
+
+@mixin hover() {
+  &:hover { @content; }
+}
+
+@mixin hover-focus() {
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+@mixin plain-hover-focus() {
+  &,
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+@mixin hover-focus-active() {
+  &:hover,
+  &:focus,
+  &:active {
+    @content;
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_image.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_image.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c971e038be4e0e4e2565142e2dcc2f4838de99fb
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_image.scss
@@ -0,0 +1,36 @@
+// Image Mixins
+// - Responsive image
+// - Retina image
+
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+
+@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
+  // when setting a width and height attribute on the img element.
+  height: auto;
+}
+
+
+// Retina image
+//
+// Short retina mixin for setting background-image and -size.
+
+@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
+  background-image: url($file-1x);
+
+  // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
+  // but doesn't convert dppx=>dpi.
+  // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
+  // Compatibility info: https://caniuse.com/#feat=css-media-resolution
+  @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
+    only screen and (min-resolution: 2dppx) { // Standardized
+    background-image: url($file-2x);
+    background-size: $width-1x $height-1x;
+  }
+  @include deprecate("`img-retina()`", "v4.3.0", "v5");
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_list-group.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_list-group.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0da35315611c5d920cdbc74697abbbcd26a826d1
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_list-group.scss
@@ -0,0 +1,21 @@
+// List Groups
+
+@mixin list-group-item-variant($state, $background, $color) {
+  .list-group-item-#{$state} {
+    color: $color;
+    background-color: $background;
+
+    &.list-group-item-action {
+      @include hover-focus() {
+        color: $color;
+        background-color: darken($background, 5%);
+      }
+
+      &.active {
+        color: $white;
+        background-color: $color;
+        border-color: $color;
+      }
+    }
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_lists.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_lists.scss
new file mode 100644
index 0000000000000000000000000000000000000000..251cb07331902de38e84348ee57b73e7f8f79249
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_lists.scss
@@ -0,0 +1,7 @@
+// Lists
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+@mixin list-unstyled() {
+  padding-left: 0;
+  list-style: none;
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_nav-divider.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_nav-divider.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3e0cceafef73f63da68b14be2cd777f4f062e980
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_nav-divider.scss
@@ -0,0 +1,11 @@
+// Horizontal dividers
+//
+// Dividers (basically an hr) within dropdowns and nav lists
+
+@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/themes/fid_bbi/vendor/bootstrap/scss/mixins/_pagination.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_pagination.scss
new file mode 100644
index 0000000000000000000000000000000000000000..af8e16d6a911c097666e54a7abcb091187b07f0c
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_pagination.scss
@@ -0,0 +1,22 @@
+// Pagination
+
+@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+  .page-link {
+    padding: $padding-y $padding-x;
+    @include font-size($font-size);
+    line-height: $line-height;
+  }
+
+  .page-item {
+    &:first-child {
+      .page-link {
+        @include border-left-radius($border-radius);
+      }
+    }
+    &:last-child {
+      .page-link {
+        @include border-right-radius($border-radius);
+      }
+    }
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_reset-text.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_reset-text.scss
new file mode 100644
index 0000000000000000000000000000000000000000..15b4407a0a00e53b17409dde65875ed387a672d7
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_reset-text.scss
@@ -0,0 +1,17 @@
+@mixin reset-text() {
+  font-family: $font-family-base;
+  // We deliberately do NOT reset font-size or word-wrap.
+  font-style: normal;
+  font-weight: $font-weight-normal;
+  line-height: $line-height-base;
+  text-align: left; // Fallback for where `start` is not supported
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_resize.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_resize.scss
new file mode 100644
index 0000000000000000000000000000000000000000..66f233a63c988deb5a59dde3bba962082fbdfd57
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_resize.scss
@@ -0,0 +1,6 @@
+// Resize anything
+
+@mixin resizable($direction) {
+  overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+  resize: $direction; // Options: horizontal, vertical, both
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_screen-reader.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_screen-reader.scss
new file mode 100644
index 0000000000000000000000000000000000000000..21230390eba85aba1eb022a49d87d4ec275e7ce7
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_screen-reader.scss
@@ -0,0 +1,34 @@
+// Only display content to screen readers
+//
+// See: https://a11yproject.com/posts/how-to-hide-content/
+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+
+@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;
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable() {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_size.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_size.scss
new file mode 100644
index 0000000000000000000000000000000000000000..69e056d2c1ef94f63abe42f9fba78fbcd85feae0
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_size.scss
@@ -0,0 +1,7 @@
+// Sizing shortcuts
+
+@mixin size($width, $height: $width) {
+  width: $width;
+  height: $height;
+  @include deprecate("`size()`", "v4.3.0", "v5");
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_table-row.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_table-row.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1ccde6b6c5671b375885083ea58c4b9c73619c87
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_table-row.scss
@@ -0,0 +1,39 @@
+// Tables
+
+@mixin table-row-variant($state, $background, $border: null) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table-#{$state} {
+    &,
+    > th,
+    > td {
+      background-color: $background;
+    }
+
+    @if $border != null {
+      th,
+      td,
+      thead th,
+      tbody + tbody {
+        border-color: $border;
+      }
+    }
+  }
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover {
+    $hover-background: darken($background, 5%);
+
+    .table-#{$state} {
+      @include hover() {
+        background-color: $hover-background;
+
+        > td,
+        > th {
+          background-color: $hover-background;
+        }
+      }
+    }
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_text-emphasis.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_text-emphasis.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5eb8a5515412053d335ca360aa51f0722616b80f
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_text-emphasis.scss
@@ -0,0 +1,17 @@
+// stylelint-disable declaration-no-important
+
+// Typography
+
+@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() {
+        color: darken($color, $emphasized-link-hover-darken-percentage) !important;
+      }
+    }
+  }
+  @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_text-hide.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_text-hide.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3a923011ec73de336b6d89f731b0a81dcc14c4a7
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_text-hide.scss
@@ -0,0 +1,11 @@
+// CSS image replacement
+@mixin text-hide($ignore-warning: false) {
+  // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+
+  @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning);
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_text-truncate.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_text-truncate.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3504bb1aa5d7aa2c3d75aedd4a03916afaa7e4d9
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_text-truncate.scss
@@ -0,0 +1,8 @@
+// Text truncate
+// Requires inline-block or block for proper styling
+
+@mixin text-truncate() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_transition.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_transition.scss
new file mode 100644
index 0000000000000000000000000000000000000000..54553deb9c67c3e3c573d4fbc770dd47c9710029
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_transition.scss
@@ -0,0 +1,26 @@
+// stylelint-disable property-blacklist
+@mixin transition($transition...) {
+  @if length($transition) == 0 {
+    $transition: $transition-base;
+  }
+
+  @if length($transition) > 1 {
+    @each $value in $transition {
+      @if $value == null or $value == none {
+        @warn "The keyword 'none' or 'null' must be used as a single argument.";
+      }
+    }
+  }
+
+  @if $enable-transitions {
+    @if nth($transition, 1) != null {
+      transition: $transition;
+    }
+
+    @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+  }
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/mixins/_visibility.scss b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_visibility.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f174673117839c3ff29949edf212248fe3132e3a
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/mixins/_visibility.scss
@@ -0,0 +1,8 @@
+// stylelint-disable declaration-no-important
+
+// Visibility
+
+@mixin invisible($visibility) {
+  visibility: $visibility !important;
+  @include deprecate("`invisible()`", "v4.3.0", "v5");
+}
diff --git a/themes/fid_bbi/vendor/bootstrap/scss/vendor/_rfs.scss b/themes/fid_bbi/vendor/bootstrap/scss/vendor/_rfs.scss
new file mode 100644
index 0000000000000000000000000000000000000000..497e07eda913871b1d61e8488e70cf156d038ccf
--- /dev/null
+++ b/themes/fid_bbi/vendor/bootstrap/scss/vendor/_rfs.scss
@@ -0,0 +1,204 @@
+// stylelint-disable property-blacklist, scss/dollar-variable-default
+
+// SCSS RFS mixin
+//
+// Automated font-resizing
+//
+// See https://github.com/twbs/rfs
+
+// Configuration
+
+// Base font size
+$rfs-base-font-size: 1.25rem !default;
+$rfs-font-size-unit: rem !default;
+
+// Breakpoint at where font-size starts decreasing if screen width is smaller
+$rfs-breakpoint: 1200px !default;
+$rfs-breakpoint-unit: px !default;
+
+// Resize font-size based on screen height and width
+$rfs-two-dimensional: false !default;
+
+// Factor of decrease
+$rfs-factor: 10 !default;
+
+@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
+  @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
+}
+
+// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
+$rfs-class: false !default;
+
+// 1 rem = $rfs-rem-value px
+$rfs-rem-value: 16 !default;
+
+// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
+$rfs-safari-iframe-resize-bug-fix: false !default;
+
+// Disable RFS by setting $enable-responsive-font-sizes to false
+$enable-responsive-font-sizes: true !default;
+
+// Cache $rfs-base-font-size unit
+$rfs-base-font-size-unit: unit($rfs-base-font-size);
+
+// Remove px-unit from $rfs-base-font-size for calculations
+@if $rfs-base-font-size-unit == "px" {
+  $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
+}
+@else if $rfs-base-font-size-unit == "rem" {
+  $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
+}
+
+// Cache $rfs-breakpoint unit to prevent multiple calls
+$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
+
+// Remove unit from $rfs-breakpoint for calculations
+@if $rfs-breakpoint-unit-cache == "px" {
+  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
+}
+@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
+  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+}
+
+// Responsive font-size mixin
+@mixin rfs($fs, $important: false) {
+  // Cache $fs unit
+  $fs-unit: if(type-of($fs) == "number", unit($fs), false);
+
+  // Add !important suffix if needed
+  $rfs-suffix: if($important, " !important", "");
+
+  // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
+  @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
+    font-size: #{$fs}#{$rfs-suffix};
+  }
+  @else {
+    // Variables for storing static and fluid rescaling
+    $rfs-static: null;
+    $rfs-fluid: null;
+
+    // Remove px-unit from $fs for calculations
+    @if $fs-unit == "px" {
+      $fs: $fs / ($fs * 0 + 1);
+    }
+    @else if $fs-unit == "rem" {
+      $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
+    }
+
+    // Set default font-size
+    @if $rfs-font-size-unit == rem {
+      $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
+    }
+    @else if $rfs-font-size-unit == px {
+      $rfs-static: #{$fs}px#{$rfs-suffix};
+    }
+    @else {
+      @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
+    }
+
+    // Only add media query if font-size is bigger as the minimum font-size
+    // If $rfs-factor == 1, no rescaling will take place
+    @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {
+      $min-width: null;
+      $variable-unit: null;
+
+      // Calculate minimum font-size for given font-size
+      $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;
+
+      // Calculate difference between given font-size and minimum font-size for given font-size
+      $fs-diff: $fs - $fs-min;
+
+      // Base font-size formatting
+      // No need to check if the unit is valid, because we did that before
+      $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);
+
+      // If two-dimensional, use smallest of screen width and height
+      $variable-unit: if($rfs-two-dimensional, vmin, vw);
+
+      // Calculate the variable width between 0 and $rfs-breakpoint
+      $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};
+
+      // Set the calculated font-size.
+      $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
+    }
+
+    // Rendering
+    @if $rfs-fluid == null {
+      // Only render static font-size if no fluid font-size is available
+      font-size: $rfs-static;
+    }
+    @else {
+      $mq-value: null;
+
+      // RFS breakpoint formatting
+      @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
+        $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
+      }
+      @else if $rfs-breakpoint-unit == px {
+        $mq-value: #{$rfs-breakpoint}px;
+      }
+      @else {
+        @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
+      }
+
+      @if $rfs-class == "disable" {
+        // Adding an extra class increases specificity,
+        // which prevents the media query to override the font size
+        &,
+        .disable-responsive-font-size &,
+        &.disable-responsive-font-size {
+          font-size: $rfs-static;
+        }
+      }
+      @else {
+        font-size: $rfs-static;
+      }
+
+      @if $rfs-two-dimensional {
+        @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
+          @if $rfs-class == "enable" {
+            .enable-responsive-font-size &,
+            &.enable-responsive-font-size {
+              font-size: $rfs-fluid;
+            }
+          }
+          @else {
+            font-size: $rfs-fluid;
+          }
+
+          @if $rfs-safari-iframe-resize-bug-fix {
+            // stylelint-disable-next-line length-zero-no-unit
+            min-width: 0vw;
+          }
+        }
+      }
+      @else {
+        @media (max-width: #{$mq-value}) {
+          @if $rfs-class == "enable" {
+            .enable-responsive-font-size &,
+            &.enable-responsive-font-size {
+              font-size: $rfs-fluid;
+            }
+          }
+          @else {
+            font-size: $rfs-fluid;
+          }
+
+          @if $rfs-safari-iframe-resize-bug-fix {
+            // stylelint-disable-next-line length-zero-no-unit
+            min-width: 0vw;
+          }
+        }
+      }
+    }
+  }
+}
+
+// The font-size & responsive-font-size mixin uses RFS to rescale font sizes
+@mixin font-size($fs, $important: false) {
+  @include rfs($fs, $important);
+}
+
+@mixin responsive-font-size($fs, $important: false) {
+  @include rfs($fs, $important);
+}
diff --git a/themes/fid_bbi/vendor/slim-select/LICENSE b/themes/fid_bbi/vendor/slim-select/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..bfc0c5643f4dab10fe8c5734a96e4053b8056edb
--- /dev/null
+++ b/themes/fid_bbi/vendor/slim-select/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Brian Voelker
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/themes/fid_bbi/vendor/slim-select/README.md b/themes/fid_bbi/vendor/slim-select/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..e00b8f7287438fd5225ed2da90b762d19d11b51a
--- /dev/null
+++ b/themes/fid_bbi/vendor/slim-select/README.md
@@ -0,0 +1,64 @@
+# Slim Select 
+## slimselectjs.com
+Slim advanced select dropdown
+
+[![Build Status](https://travis-ci.org/brianvoe/slim-select.svg?branch=master)](https://travis-ci.org/brianvoe/slim-select)
+[![NPM Downloads](https://img.shields.io/npm/dt/slim-select.svg)](https://www.npmjs.com/package/slim-select)
+
+<a href="https://www.buymeacoffee.com/brianvoe" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
+
+For documentation and examples on all features see: http://slimselectjs.com
+
+![](https://raw.githubusercontent.com/brianvoe/slim-select/master/slimselect.gif)
+
+## Features
+- No Dependencies
+- 20kb - 5kb gzip
+- Single Select
+- Multi Select
+- User Addable Options
+- Html Options
+- Settable Data
+- Callback Events
+- Placeholders
+- Search
+- Disable Options
+- Light CSS
+- Light Color Scheme
+- Style and Class Inheritance
+- Clean Animations
+- Performant
+
+## Browsers
+- IE 11+
+- Edge 13+
+- Chrome 30+
+- FireFox 25+
+- Opera 25+
+- Safari 9+
+
+## Installation
+```bash
+npm install slim-select
+```
+
+### or
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/<version>/slimselect.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/<version>/slimselect.min.css"> 
+```
+
+## Usage
+```javascript
+import SlimSelect from 'slim-select'
+
+new SlimSelect({
+  select: '#slim-select'
+})
+```
+
+## Testing
+Browser testing has been provided by
+
+<img src="https://digitalscientists.com/system/images/1448/original/logo-browserstack.png" width="300" />
diff --git a/themes/fid_bbi/vendor/slim-select/dist/slimselect.css b/themes/fid_bbi/vendor/slim-select/dist/slimselect.css
new file mode 100644
index 0000000000000000000000000000000000000000..3a795bad302fb57f80a51fbe11f0324172997b68
--- /dev/null
+++ b/themes/fid_bbi/vendor/slim-select/dist/slimselect.css
@@ -0,0 +1,2 @@
+.ss-main{position:relative;display:inline-block;user-select:none;color:#666;width:100%}.ss-main .ss-single-selected{display:flex;cursor:pointer;width:100%;height:30px;padding:6px;border:1px solid #dcdee2;border-radius:4px;background-color:#fff;outline:0;box-sizing:border-box;transition:background-color .2s}.ss-main .ss-single-selected.ss-disabled{background-color:#dcdee2;cursor:not-allowed}.ss-main .ss-single-selected.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main .ss-single-selected.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-single-selected .placeholder{display:flex;flex:1 1 100%;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;width:calc(100% - 30px);line-height:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ss-main .ss-single-selected .placeholder *{display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:auto}.ss-main .ss-single-selected .placeholder .ss-disabled{color:#dedede}.ss-main .ss-single-selected .ss-deselect{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;margin:0 6px 0 6px;font-weight:bold}.ss-main .ss-single-selected .ss-deselect.ss-hide{display:none}.ss-main .ss-single-selected .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;margin:0 6px 0 6px}.ss-main .ss-single-selected .ss-arrow span{border:solid #666;border-width:0 2px 2px 0;display:inline-block;padding:3px;transition:transform .2s, margin .2s}.ss-main .ss-single-selected .ss-arrow span.arrow-up{transform:rotate(-135deg);margin:3px 0 0 0}.ss-main .ss-single-selected .ss-arrow span.arrow-down{transform:rotate(45deg);margin:-3px 0 0 0}.ss-main .ss-multi-selected{display:flex;flex-direction:row;cursor:pointer;min-height:30px;width:100%;padding:0 0 0 3px;border:1px solid #dcdee2;border-radius:4px;background-color:#fff;outline:0;box-sizing:border-box;transition:background-color .2s}.ss-main .ss-multi-selected.ss-disabled{background-color:#dcdee2;cursor:not-allowed}.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-disabled{color:#666}.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main .ss-multi-selected.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main .ss-multi-selected.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-multi-selected .ss-values{display:flex;flex-wrap:wrap;justify-content:flex-start;flex:1 1 100%;width:calc(100% - 30px)}.ss-main .ss-multi-selected .ss-values .ss-disabled{display:flex;padding:4px 5px;margin:2px 0px;line-height:1em;align-items:center;width:100%;color:#dedede;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes scaleIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes scaleOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-main .ss-multi-selected .ss-values .ss-value{display:flex;user-select:none;align-items:center;font-size:12px;padding:3px 5px;margin:3px 5px 3px 0px;color:#fff;background-color:#5897fb;border-radius:4px;animation-name:scaleIn;animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-multi-selected .ss-values .ss-value.ss-out{animation-name:scaleOut;animation-duration:.2s;animation-timing-function:ease-out}.ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete{margin:0 0 0 5px;cursor:pointer}.ss-main .ss-multi-selected .ss-add{display:flex;flex:0 1 3px;margin:9px 12px 0 5px}.ss-main .ss-multi-selected .ss-add .ss-plus{display:flex;justify-content:center;align-items:center;background:#666;position:relative;height:10px;width:2px;transition:transform .2s}.ss-main .ss-multi-selected .ss-add .ss-plus:after{background:#666;content:"";position:absolute;height:2px;width:10px;left:-4px;top:4px}.ss-main .ss-multi-selected .ss-add .ss-plus.ss-cross{transform:rotate(45deg)}.ss-content{position:absolute;width:100%;margin:-1px 0 0 0;box-sizing:border-box;border:solid 1px #dcdee2;z-index:1010;background-color:#fff;transform-origin:center top;transition:transform .2s, opacity .2s;opacity:0;transform:scaleY(0)}.ss-content.ss-open{display:block;opacity:1;transform:scaleY(1)}.ss-content .ss-search{display:flex;flex-direction:row;padding:8px 8px 6px 8px}.ss-content .ss-search.ss-hide{height:0px;opacity:0;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px}.ss-content .ss-search.ss-hide input{height:0px;opacity:0;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;height:30px;padding:6px 8px;margin:0;border:1px solid #dcdee2;border-radius:4px;background-color:#fff;outline:0;text-align:left;box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-appearance:textfield}.ss-content .ss-search input::placeholder{color:#8a8a8a;vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px #5897fb}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;font-size:22px;font-weight:bold;flex:0 0 30px;height:30px;margin:0 0 0 8px;border:1px solid #dcdee2;border-radius:4px;box-sizing:border-box}.ss-content .ss-addable{padding-top:0px}.ss-content .ss-list{max-height:200px;overflow-x:hidden;overflow-y:auto;text-align:left}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{padding:6px 10px 6px 10px;font-weight:bold}.ss-content .ss-list .ss-optgroup .ss-option{padding:6px 6px 6px 25px}.ss-content .ss-list .ss-optgroup-label-selectable{cursor:pointer}.ss-content .ss-list .ss-optgroup-label-selectable:hover{color:#fff;background-color:#5897fb}.ss-content .ss-list .ss-option{padding:6px 10px 6px 10px;cursor:pointer;user-select:none}.ss-content .ss-list .ss-option *{display:inline-block}.ss-content .ss-list .ss-option:hover,.ss-content .ss-list .ss-option.ss-highlighted{color:#fff;background-color:#5897fb}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;color:#dedede;background-color:#fff}.ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected{color:#666;background-color:rgba(88,151,251,0.1)}.ss-content .ss-list .ss-option.ss-hide{display:none}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:#fffb8c}
+