pageflow 15.1.0.beta6 → 15.1.0.rc0

data/entry_types/scrolled/package/frontend.js

@@ -205,83 +205,151 @@ function useNativeScrollPrevention(ref) {
   }, [ref]);
 }
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  if (!css || typeof document === 'undefined') { return; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var PREFIX = 'PAGEFLOW_SCROLLED_COLLECTION';
+var RESET = "".concat(PREFIX, "_RESET");
+var ADD = "".concat(PREFIX, "_ADD");
+var CHANGE = "".concat(PREFIX, "_CHANGE");
+var REMOVE = "".concat(PREFIX, "_REMOVE");
+var SORT = "".concat(PREFIX, "_SORT");
+function useCollections() {
+  var seed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      keyAttribute = _ref.keyAttribute;
 
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
+  return useReducer(reducer, Object.keys(seed).reduce(function (result, key) {
+    result[key] = init(seed[key], keyAttribute);
+    return result;
+  }, {}));
+}
+
+function reducer(state, action) {
+  var collectionName = action.payload.collectionName;
+  var keyAttribute = action.payload.keyAttribute;
+
+  switch (action.type) {
+    case RESET:
+      return _objectSpread({}, state, _defineProperty({}, collectionName, init(action.payload.items, keyAttribute)));
+
+    case ADD:
+      return _objectSpread({}, state, _defineProperty({}, collectionName, {
+        order: action.payload.order,
+        items: _objectSpread({}, state[collectionName].items, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
+      }));
+
+    case CHANGE:
+      return _objectSpread({}, state, _defineProperty({}, collectionName, {
+        order: state[collectionName].order,
+        items: _objectSpread({}, state[collectionName].items, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
+      }));
+
+    case REMOVE:
+      var clonedItems = _objectSpread({}, state[collectionName].items);
+
+      delete clonedItems[action.payload.key];
+      return _objectSpread({}, state, _defineProperty({}, collectionName, {
+        order: action.payload.order,
+        items: clonedItems
+      }));
+
+    case SORT:
+      return _objectSpread({}, state, _defineProperty({}, collectionName, {
+        order: action.payload.order,
+        items: state[collectionName].items
+      }));
+
+    default:
+      return state;
   }
+}
 
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
+function init(items) {
+  var keyAttribute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
+  return {
+    order: items.map(function (item) {
+      return item[keyAttribute];
+    }),
+    items: items.reduce(function (result, item) {
+      result[item[keyAttribute]] = item;
+      return result;
+    }, {})
+  };
+}
+
+function getItems(state, collectionName) {
+  if (state[collectionName]) {
+    var items = state[collectionName].items;
+    return state[collectionName].order.map(function (key) {
+      return items[key];
+    });
   } else {
-    style.appendChild(document.createTextNode(css));
+    return [];
+  }
+}
+function getItem(state, collectionName, key) {
+  if (state[collectionName]) {
+    return state[collectionName].items[key];
   }
 }
 
-var css = ".ChapterLink-module_chapterLink__v5VRl {\n  line-height: 3rem;\n  color: rgb(0, 55, 90);\n  text-decoration: none;\n  position: relative;\n  display: block;\n  font-family: inherit;\n  font-weight: 700;\n  font-size: 1rem;\n}\n\n.ChapterLink-module_chapterLink__v5VRl:hover,\n.ChapterLink-module_chapterLinkActive__jl4h5 {\n  color: #e10028;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n  .ChapterLink-module_chapterLink__v5VRl,\n  .ChapterLink-module_chapterLink__v5VRl:hover {\n    padding: 10px 0px;\n  }\n}";
-var styles = {"chapterLink":"ChapterLink-module_chapterLink__v5VRl","chapterLinkActive":"ChapterLink-module_chapterLinkActive__jl4h5"};
-styleInject(css);
+var Context = React.createContext();
+function EntryStateProvider(_ref) {
+  var seed = _ref.seed,
+      children = _ref.children;
 
-var css$1 = ".navigationTooltip {\n  opacity: 1 !important;\n  border-bottom: 3px solid #e10028;\n  box-shadow: 0 0 0.3125rem rgba(0,0,0,.2);\n  width: 200px;\n}\n\n.AppHeaderTooltip-module_tooltipHeadline__pul87 {\n  margin: 5px 0 0px;\n  color: #e10028;\n}\n\n@media (max-width: 780px) {\n  .navigationTooltip {\n    display: none !important;\n  }\n}\n";
-var styles$1 = {"tooltipHeadline":"AppHeaderTooltip-module_tooltipHeadline__pul87"};
-styleInject(css$1);
+  var _useCollections = useCollections(seed.collections, {
+    keyAttribute: 'permaId'
+  }),
+      _useCollections2 = _slicedToArray(_useCollections, 2),
+      collections = _useCollections2[0],
+      dispatch = _useCollections2[1];
 
-function AppHeaderTooltip(props) {
-  return React.createElement(ReactTooltip, {
-    id: props.chapterLinkId,
-    type: "light",
-    effect: "solid",
-    className: "navigationTooltip",
-    overridePosition: function overridePosition(_ref) {
-      var left = _ref.left,
-          top = _ref.top;
-      top = 48;
-      return {
-        top: top,
-        left: left
-      };
-    }
-  }, React.createElement("div", null, React.createElement("h3", {
-    className: styles$1.tooltipHeadline
-  }, "Kapitel ", props.chapterIndex), React.createElement("p", null, props.summary)));
+  var value = useMemo(function () {
+    return {
+      entryState: {
+        collections: collections,
+        config: seed.config
+      },
+      dispatch: dispatch
+    };
+  }, [collections, dispatch, seed]);
+  return React.createElement(Context.Provider, {
+    value: value
+  }, children);
 }
-
-function ChapterLink(props) {
-  return React.createElement("div", null, React.createElement("a", {
-    className: classnames(styles.chapterLink, _defineProperty({}, styles.chapterLinkActive, props.active)),
-    href: "#chapter-".concat(props.permaId),
-    onClick: function onClick() {
-      return props.handleMenuClick(props.chapterLinkId);
-    },
-    "data-tip": true,
-    "data-for": props.chapterLinkId
-  }, props.title), React.createElement(AppHeaderTooltip, Object.assign({
-    chapterIndex: props.chapterIndex,
-    chapterLinkId: props.chapterLinkId
-  }, props)));
+function useEntryState() {
+  var value = useContext(Context);
+  return value.entryState;
+}
+function useEntryStateDispatch() {
+  var value = useContext(Context);
+  return value.dispatch;
 }
 
-var css$2 = "/*!\n * Hamburgers\n * @description Tasty CSS-animated hamburgers\n * @author Jonathan Suh @jonsuh\n * @site https://jonsuh.com/hamburgers\n * @link https://github.com/jonsuh/hamburgers\n */\n.hamburgerIcons-module_hamburger__3XwKv {\n  display: inline-block;\n  cursor: pointer;\n  transition-property: opacity, filter;\n  transition-duration: 0.15s;\n  transition-timing-function: linear;\n  font: inherit;\n  color: inherit;\n  text-transform: none;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  overflow: visible;\n}\n\n.hamburgerIcons-module_hamburger__3XwKv.hamburgerIcons-module_is-active__3OTNl .hamburgerIcons-module_hamburger-inner__2Colj,\n.hamburgerIcons-module_hamburger__3XwKv.hamburgerIcons-module_is-active__3OTNl .hamburgerIcons-module_hamburger-inner__2Colj::before,\n.hamburgerIcons-module_hamburger__3XwKv.hamburgerIcons-module_is-active__3OTNl .hamburgerIcons-module_hamburger-inner__2Colj::after {\n  background-color: #e10028;\n}\n\n.hamburgerIcons-module_hamburger-box__38Ldp {\n  width: 40px;\n  height: 24px;\n  display: inline-block;\n  position: relative;\n}\n\n.hamburgerIcons-module_hamburger-inner__2Colj {\n  display: block;\n  top: 50%;\n  margin-top: -2px;\n}\n\n.hamburgerIcons-module_hamburger-inner__2Colj, .hamburgerIcons-module_hamburger-inner__2Colj::before, .hamburgerIcons-module_hamburger-inner__2Colj::after {\n  width: 30px;\n  height: 4px;\n  background-color: rgb(0, 55, 90);\n  border-radius: 4px;\n  position: absolute;\n  transition-property: transform;\n  transition-duration: 0.15s;\n  transition-timing-function: ease;\n}\n\n.hamburgerIcons-module_hamburger-inner__2Colj::before, .hamburgerIcons-module_hamburger-inner__2Colj::after {\n  content: \"\";\n  display: block;\n}\n\n.hamburgerIcons-module_hamburger-inner__2Colj::before {\n  top: -10px;\n}\n\n.hamburgerIcons-module_hamburger-inner__2Colj::after {\n  bottom: -10px;\n}\n\n/*\n * Collapse\n */\n.hamburgerIcons-module_hamburger--collapse__3Dqee .hamburgerIcons-module_hamburger-inner__2Colj {\n  top: auto;\n  bottom: 0;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.hamburgerIcons-module_hamburger--collapse__3Dqee .hamburgerIcons-module_hamburger-inner__2Colj::after {\n  top: -20px;\n  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;\n}\n\n.hamburgerIcons-module_hamburger--collapse__3Dqee .hamburgerIcons-module_hamburger-inner__2Colj::before {\n  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.hamburgerIcons-module_hamburger--collapse__3Dqee.hamburgerIcons-module_is-active__3OTNl .hamburgerIcons-module_hamburger-inner__2Colj {\n  transform: translate3d(0, -10px, 0) rotate(-45deg);\n  transition-delay: 0.22s;\n  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.hamburgerIcons-module_hamburger--collapse__3Dqee.hamburgerIcons-module_is-active__3OTNl .hamburgerIcons-module_hamburger-inner__2Colj::after {\n  top: 0;\n  opacity: 0;\n  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;\n}\n\n.hamburgerIcons-module_hamburger--collapse__3Dqee.hamburgerIcons-module_is-active__3OTNl .hamburgerIcons-module_hamburger-inner__2Colj::before {\n  top: 0;\n  transform: rotate(-90deg);\n  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n";
-var hamburgerIcons = {"hamburger":"hamburgerIcons-module_hamburger__3XwKv","is-active":"hamburgerIcons-module_is-active__3OTNl","hamburger-inner":"hamburgerIcons-module_hamburger-inner__2Colj","hamburger-box":"hamburgerIcons-module_hamburger-box__38Ldp","hamburger--collapse":"hamburgerIcons-module_hamburger--collapse__3Dqee"};
-styleInject(css$2);
+/**
+ * Returns a nested data structure representing the metadata of the entry.
+ *
+ * @example
+ *
+ * const metaData = useEntryMetadata();
+ * metaData // =>
+ *   {
+ *     id: 5,
+ *     shareProviders: {email: false, facebook: true},
+ *     share_url: 'http://test.host/test',
+ *     credits: 'Credits: Pageflow'
+ *   }
+ */
 
-var css$3 = "header svg {\n  fill: #c2c2c2;\n  cursor: pointer;\n}\n\nheader svg:hover {\n  fill: rgb(0, 55, 90);;\n}\n\n.AppHeader-module_navigationBar__2EFHw {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n    \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n    sans-serif;\n  position: sticky;\n  top: -50px;\n  transition: top .15s;\n  z-index: 10000;\n  width: 100%;\n  text-align: center;\n}\n\n.AppHeader-module_navigationBarExpanded__18nbf {\n  top: 0;\n}\n\n.AppHeader-module_navigationBarContentWrapper__2Sf8y {\n  position: relative;\n  z-index: 2;\n  background-color: #fff;\n  height: 50px;\n}\n\n.AppHeader-module_menuIcon__5JKuj {\n  position: absolute;\n}\n\n.AppHeader-module_wdrLogo__3XGNI {\n  position: absolute;\n  top: 12px;\n  left: 15px;\n  width: 80px;\n}\n\n.AppHeader-module_burgerMenuIcon__3isKe {\n  display: none;\n  top: 12px;\n  left: 12px;\n  outline: none;\n}\n\n.AppHeader-module_infoIcon__XMTFH {\n  top: 12px;\n  right: 55px;\n  width: 26px;\n}\n\n.AppHeader-module_shareIcon__2lPNl {\n  top: 5px;\n  right: 10px;\n  width: 40px;\n}\n\n.AppHeader-module_chapterList__2lMMD {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.AppHeader-module_chapterListItem__28zrc {\n  position: relative;\n  display: inline-block;\n  padding: 0 15px;\n  border-right: 1px solid #e9e9e9;\n}\n\n.AppHeader-module_chapterListItem__28zrc:last-of-type {\n  border-right: none;\n}\n\n.AppHeader-module_progressBar__17IVu {\n  background-color: rgba(194,194,194,0.8);\n  height: 8px;\n  width: 100%;\n}\n\n.AppHeader-module_progressIndicator__3SlYz {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0vw;\n  height: 100%;\n  background-color: #e10028;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n  .AppHeader-module_burgerMenuIcon__3isKe {\n    display: block;\n  }\n\n  .AppHeader-module_wdrLogo__3XGNI {\n    position: inherit;\n  }\n\n  .AppHeader-module_navigationChapters__1dzyV {\n    touch-action: none;\n    display: block;\n    position: fixed;\n    top: 60px;\n    left: 0px;\n    background: rgba(255, 255, 255, 0.95);\n    width: 100vw;\n    height: 100vh;\n  }\n\n  .AppHeader-module_navigationChaptersHidden__8AEPA {\n    display: none;\n  }\n\n  .AppHeader-module_chapterList__2lMMD {\n    margin-top: 50px;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc {\n    display: list-item;\n    width: 80vw;\n    padding: 25px 10vw;\n    border-right: none;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc::before,\n  .AppHeader-module_chapterListItem__28zrc::after {\n    display: table;\n    content: \" \";\n    border-top: 1px solid rgb(100, 100, 100);\n    width: 30%;\n    margin: 0 35%;\n    transition: width .15s, margin .15s;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc:hover::before,\n  .AppHeader-module_chapterListItem__28zrc:hover::after {\n    border-top: 1px solid rgb(0, 55, 90);\n    width: 80%;\n    margin: 0 10%;\n  }\n\n  .AppHeader-module_chapterLink__1Q-ee,\n  .AppHeader-module_chapterLink__1Q-ee:hover {\n    padding: 10px 0px;\n  }\n\n  .AppHeader-module_progressBar__17IVu {\n    height: 10px;\n  }\n}\n";
-var styles$2 = {"navigationBar":"AppHeader-module_navigationBar__2EFHw","navigationBarExpanded":"AppHeader-module_navigationBarExpanded__18nbf","navigationBarContentWrapper":"AppHeader-module_navigationBarContentWrapper__2Sf8y","menuIcon":"AppHeader-module_menuIcon__5JKuj","wdrLogo":"AppHeader-module_wdrLogo__3XGNI","burgerMenuIcon":"AppHeader-module_burgerMenuIcon__3isKe","infoIcon":"AppHeader-module_infoIcon__XMTFH","shareIcon":"AppHeader-module_shareIcon__2lPNl","chapterList":"AppHeader-module_chapterList__2lMMD","chapterListItem":"AppHeader-module_chapterListItem__28zrc","progressBar":"AppHeader-module_progressBar__17IVu","progressIndicator":"AppHeader-module_progressIndicator__3SlYz","navigationChapters":"AppHeader-module_navigationChapters__1dzyV","navigationChaptersHidden":"AppHeader-module_navigationChaptersHidden__8AEPA","chapterLink":"AppHeader-module_chapterLink__1Q-ee"};
-styleInject(css$3);
+function useEntryMetadata() {
+  var entryState = useEntryState();
+  return useMemo(function () {
+    return getItems(entryState.collections, 'entries')[0];
+  }, [entryState]);
+}
 
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -334,15 +402,15 @@ function _extends() {
 
   return _extends.apply(this, arguments);
 }
-var WDRlogo = (function (_ref) {
+var EmailIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
   return React.createElement("svg", _extends({
-    viewBox: "-0.445 -0.445 51.921 15.721"
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 612 612"
   }, props), React.createElement("path", {
-    d: "M31.189 14.83h3.731v-4.772h.285c.425 0 1.496-.023 2.079.919l2.292 3.854h4.015l-2.088-3.509c-.69-1.176-1.258-1.806-1.704-2.13v-.039c1.259-.446 2.636-1.522 2.636-3.715 0-2.716-1.946-4.116-5.394-4.116H31.19v4.689h-.038c-.708-2.829-3.095-4.689-7.453-4.689h-8.253l-1.257 5.516a42.42 42.42 0 00-.488 2.578h-.04s-.284-1.603-.547-2.74l-1.077-5.354h-4.53L6.43 6.676c-.264 1.137-.547 2.74-.547 2.74H5.84s-.222-1.442-.486-2.578L4.097 1.322H0L3.61 14.83h4.121L9.78 6.169h.041l2.048 8.662h4.056L18.93 3.614h.04v11.217h4.606c4.42 0 6.86-2.028 7.577-4.927h.036v4.927zm-7.309-3.062h-1.135V4.384h1.034c2.475 0 3.59 1.095 3.59 3.612 0 2.473-1.115 3.772-3.489 3.772m13.08-4.565h-2.04V4.182h1.918c1.278 0 1.806.506 1.806 1.52 0 .934-.548 1.501-1.684 1.501m12.003-2.317V1.404L45.48 2.66v.865l1.153-.418v2.616l2.33-.838zM47.573 0a3.469 3.469 0 013.459 3.478 3.468 3.468 0 01-3.46 3.477 3.468 3.468 0 01-3.458-3.478A3.469 3.469 0 0147.573 0m0 .51a2.96 2.96 0 00-2.951 2.967 2.96 2.96 0 002.95 2.968 2.96 2.96 0 002.953-2.967A2.96 2.96 0 0047.573.51",
-    fill: "#00375a"
+    d: "M573.75 57.375H38.25C17.136 57.375 0 74.511 0 95.625v420.75c0 21.133 17.136 38.25 38.25 38.25h535.5c21.133 0 38.25-17.117 38.25-38.25V95.625c0-21.114-17.117-38.25-38.25-38.25zM554.625 497.25H57.375V204.657l224.03 187.999c7.134 5.967 15.874 8.97 24.595 8.97 8.74 0 17.461-3.003 24.595-8.97l224.03-187.999V497.25zm0-367.487L306 338.379 57.375 129.763V114.75h497.25v15.013z"
   }));
 });
 
@@ -363,15 +431,15 @@ function _extends$1() {
 
   return _extends$1.apply(this, arguments);
 }
-var ShareIcon = (function (_ref) {
+var FacebookIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
   return React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 96 96"
+    viewBox: "0 0 430.113 430.114"
   }, props), React.createElement("path", {
-    d: "M67.5 18c-5.1 0-9.3 4.2-9.3 9.3 0 .5.1 1.1.2 1.6l-23 12.9c-1.7-1.8-4.1-3-6.8-3-5.1 0-9.3 4.1-9.3 9.3 0 5.1 4.1 9.3 9.3 9.3 2.7 0 5.2-1.2 6.9-3.1l22.8 13.4c0 .4-.1.7-.1 1.1 0 5.1 4.1 9.3 9.3 9.3 5.1 0 9.3-4.1 9.3-9.3 0-5.1-4.1-9.3-9.3-9.3-2.8 0-5.4 1.3-7.1 3.3L37.7 49.4c.1-.4.1-.9.1-1.3 0-.5 0-1-.1-1.5l23.1-13c1.7 1.8 4.1 3 6.8 3 5.1 0 9.3-4.1 9.3-9.3-.1-5.1-4.3-9.3-9.4-9.3z"
+    d: "M158.081 83.3v59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805s5.601-34.721 8.316-72.685H247.54V92.74c0-7.4 9.717-17.354 19.321-17.354h48.557V.001h-66.021C155.878-.004 158.081 72.48 158.081 83.3z"
   }));
 });
 
@@ -392,142 +460,200 @@ function _extends$2() {
 
   return _extends$2.apply(this, arguments);
 }
-var InfoIcon = (function (_ref) {
+var LinkedInIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
   return React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 330 330"
+    viewBox: "0 0 430.117 430.117"
   }, props), React.createElement("path", {
-    d: "M165 0C74.019 0 0 74.02 0 165.001 0 255.982 74.019 330 165 330s165-74.018 165-164.999S255.981 0 165 0zm0 300c-74.44 0-135-60.56-135-134.999S90.56 30 165 30s135 60.562 135 135.001C300 239.44 239.439 300 165 300z"
-  }), React.createElement("path", {
-    d: "M164.998 70c-11.026 0-19.996 8.976-19.996 20.009 0 11.023 8.97 19.991 19.996 19.991 11.026 0 19.996-8.968 19.996-19.991 0-11.033-8.97-20.009-19.996-20.009zm.002 70c-8.284 0-15 6.716-15 15v90c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15v-90c0-8.284-6.716-15-15-15z"
+    d: "M430.117 261.543V420.56h-92.188V272.193c0-37.271-13.334-62.707-46.703-62.707-25.473 0-40.632 17.142-47.301 33.724-2.432 5.928-3.058 14.179-3.058 22.477V420.56h-92.219s1.242-251.285 0-277.32h92.21v39.309c-.187.294-.43.611-.606.896h.606v-.896c12.251-18.869 34.13-45.824 83.102-45.824 60.673-.001 106.157 39.636 106.157 124.818zM52.183 9.558C20.635 9.558 0 30.251 0 57.463c0 26.619 20.038 47.94 50.959 47.94h.616c32.159 0 52.159-21.317 52.159-47.94-.606-27.212-20-47.905-51.551-47.905zM5.477 420.56h92.184V143.24H5.477v277.32z"
   }));
 });
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _extends$3() {
+  _extends$3 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var PREFIX = 'PAGEFLOW_SCROLLED_COLLECTION';
-var RESET = "".concat(PREFIX, "_RESET");
-var ADD = "".concat(PREFIX, "_ADD");
-var CHANGE = "".concat(PREFIX, "_CHANGE");
-var REMOVE = "".concat(PREFIX, "_REMOVE");
-var SORT = "".concat(PREFIX, "_SORT");
-function useCollections() {
-  var seed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      keyAttribute = _ref.keyAttribute;
+    return target;
+  };
 
-  return useReducer(reducer, Object.keys(seed).reduce(function (result, key) {
-    result[key] = init(seed[key], keyAttribute);
-    return result;
-  }, {}));
+  return _extends$3.apply(this, arguments);
 }
+var TelegramIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
 
-function reducer(state, action) {
-  var collectionName = action.payload.collectionName;
-  var keyAttribute = action.payload.keyAttribute;
+  return React.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512.004 512.004"
+  }, props), React.createElement("path", {
+    d: "M508.194 20.517c-4.43-4.96-11.42-6.29-17.21-3.76l-482 211a15.01 15.01 0 00-8.98 13.41 15.005 15.005 0 008.38 13.79l115.09 56.6 28.68 172.06c.93 6.53 6.06 11.78 12.74 12.73 4.8.69 9.57-1 12.87-4.4l90.86-90.86 129.66 92.62a15.02 15.02 0 0014.24 1.74 15.01 15.01 0 009.19-11.01l90-451c.89-4.47-.26-9.26-3.52-12.92zm-372.84 263.45l-84.75-41.68 334.82-146.57-250.07 188.25zm46.94 44.59l-13.95 69.75-15.05-90.3 183.97-138.49-150.88 151.39c-2.12 2.12-3.53 4.88-4.09 7.65zm9.13 107.3l15.74-78.67 36.71 26.22-52.45 52.45zm205.41 19.94l-176.73-126.23 252.47-253.31-75.74 379.54z"
+  }));
+});
 
-  switch (action.type) {
-    case RESET:
-      return _objectSpread({}, state, _defineProperty({}, collectionName, init(action.payload.items, keyAttribute)));
+function _extends$4() {
+  _extends$4 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-    case ADD:
-      return _objectSpread({}, state, _defineProperty({}, collectionName, {
-        order: action.payload.order,
-        items: _objectSpread({}, state[collectionName].items, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
-      }));
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-    case CHANGE:
-      return _objectSpread({}, state, _defineProperty({}, collectionName, {
-        order: state[collectionName].order,
-        items: _objectSpread({}, state[collectionName].items, _defineProperty({}, action.payload.attributes[keyAttribute], action.payload.attributes))
-      }));
+    return target;
+  };
 
-    case REMOVE:
-      var clonedItems = _objectSpread({}, state[collectionName].items);
+  return _extends$4.apply(this, arguments);
+}
+var TwitterIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
 
-      delete clonedItems[action.payload.key];
-      return _objectSpread({}, state, _defineProperty({}, collectionName, {
-        order: action.payload.order,
-        items: clonedItems
-      }));
+  return React.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 612 612"
+  }, props), React.createElement("path", {
+    d: "M612 116.258a250.714 250.714 0 01-72.088 19.772c25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.551 56.217-125.551 125.513 0 9.828 1.109 19.427 3.251 28.606-104.326-5.24-196.835-55.223-258.75-131.174-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.479a125.556 125.556 0 01-56.867-15.756v1.568c0 60.806 43.291 111.554 100.693 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.199 117.253 87.194-42.947 33.654-97.099 53.655-155.916 53.655-10.134 0-20.116-.612-29.944-1.721 55.567 35.681 121.536 56.485 192.438 56.485 230.948 0 357.188-191.291 357.188-357.188l-.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z"
+  }));
+});
 
-    case SORT:
-      return _objectSpread({}, state, _defineProperty({}, collectionName, {
-        order: action.payload.order,
-        items: state[collectionName].items
-      }));
+function _extends$5() {
+  _extends$5 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-    default:
-      return state;
-  }
-}
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-function init(items) {
-  var keyAttribute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
-  return {
-    order: items.map(function (item) {
-      return item[keyAttribute];
-    }),
-    items: items.reduce(function (result, item) {
-      result[item[keyAttribute]] = item;
-      return result;
-    }, {})
+    return target;
   };
+
+  return _extends$5.apply(this, arguments);
 }
+var WhatsAppIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
 
-function getItems(state, collectionName) {
-  if (state[collectionName]) {
-    var items = state[collectionName].items;
-    return state[collectionName].order.map(function (key) {
-      return items[key];
+  return React.createElement("svg", _extends$5({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 90 90"
+  }, props), React.createElement("path", {
+    d: "M90 43.841c0 24.213-19.779 43.841-44.182 43.841a44.256 44.256 0 01-21.357-5.455L0 90l7.975-23.522a43.38 43.38 0 01-6.34-22.637C1.635 19.628 21.416 0 45.818 0 70.223 0 90 19.628 90 43.841zM45.818 6.982c-20.484 0-37.146 16.535-37.146 36.859 0 8.065 2.629 15.534 7.076 21.61L11.107 79.14l14.275-4.537A37.122 37.122 0 0045.819 80.7c20.481 0 37.146-16.533 37.146-36.857S66.301 6.982 45.818 6.982zm22.311 46.956c-.273-.447-.994-.717-2.076-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.358-1.717-.538-2.438.537-.721 1.076-2.797 3.495-3.43 4.212-.632.719-1.263.809-2.347.271-1.082-.537-4.571-1.673-8.708-5.333-3.219-2.848-5.393-6.364-6.025-7.441-.631-1.075-.066-1.656.475-2.191.488-.482 1.084-1.255 1.625-1.882.543-.628.723-1.075 1.082-1.793.363-.717.182-1.344-.09-1.883-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.792-2.436-1.792-.631 0-1.354-.09-2.076-.09s-1.896.269-2.889 1.344c-.992 1.076-3.789 3.676-3.789 8.963 0 5.288 3.879 10.397 4.422 11.113.541.716 7.49 11.92 18.5 16.223C58.2 65.771 58.2 64.336 60.186 64.156c1.984-.179 6.406-2.599 7.312-5.107.9-2.512.9-4.663.631-5.111z"
+  }));
+});
+
+/**
+ * Returns a list of attributes (icon, name and url) of all configured share providers of the entry.
+ * The url provides a %{url} placeholder where the link can be inserted.
+ *
+ * @example
+ *
+ * const shareProviders = useShareProviders();
+ * shareProviders // =>
+ *   [
+ *     {
+ *       icon: <FacebookSVGIcon />,
+ *       name: 'Facebook',
+ *       url: http://www.facebook.com/sharer/sharer.php?u=%{url}
+ *     },
+ *     {
+ *       icon: <TwitterSVGIcon />,
+ *       name: 'Twitter',
+ *       url: https://twitter.com/intent/tweet?url=%{url}
+ *     }
+ *   ]
+ */
+
+function useShareProviders() {
+  var entryState = useEntryState();
+  var entryMetadata = useEntryMetadata();
+  var shareProviders = entryMetadata ? entryMetadata.shareProviders : {};
+  var urlTemplates = entryState.config.shareUrlTemplates;
+  var sharing = {
+    email: {
+      icon: EmailIcon,
+      name: 'Email',
+      url: urlTemplates.email
+    },
+    facebook: {
+      icon: FacebookIcon,
+      name: 'Facebook',
+      url: urlTemplates.facebook
+    },
+    linked_in: {
+      icon: LinkedInIcon,
+      name: 'LinkedIn',
+      url: urlTemplates.linked_in
+    },
+    telegram: {
+      icon: TelegramIcon,
+      name: 'Telegram',
+      url: urlTemplates.telegram
+    },
+    twitter: {
+      icon: TwitterIcon,
+      name: 'Twitter',
+      url: urlTemplates.twitter
+    },
+    whats_app: {
+      icon: WhatsAppIcon,
+      name: 'WhatsApp',
+      url: urlTemplates.whats_app
+    }
+  };
+  return useMemo(function () {
+    return activeShareProviders(shareProviders).map(function (provider) {
+      var config = sharing[provider];
+      return {
+        name: config.name,
+        icon: config.icon,
+        url: config.url
+      };
     });
-  } else {
-    return [];
-  }
+  }, [shareProviders]);
 }
-function getItem(state, collectionName, key) {
-  if (state[collectionName]) {
-    return state[collectionName].items[key];
-  }
+
+function activeShareProviders(shareProvidersConfig) {
+  return Object.keys(shareProvidersConfig).filter(function (provider) {
+    return shareProvidersConfig[provider] !== false;
+  });
 }
+/**
+ * Returns the share url of the entry.
+ *
+ * @example
+ *
+ * const shareUrl = useShareUrl();
+ * shareUrl // => "http://test.host/test"
+ */
 
-var Context = React.createContext();
-function EntryStateProvider(_ref) {
-  var seed = _ref.seed,
-      children = _ref.children;
 
-  var _useCollections = useCollections(seed.collections, {
-    keyAttribute: 'permaId'
-  }),
-      _useCollections2 = _slicedToArray(_useCollections, 2),
-      collections = _useCollections2[0],
-      dispatch = _useCollections2[1];
+function useShareUrl() {
+  var entryMetadata = useEntryMetadata();
+  var entryState = useEntryState();
 
-  var value = useMemo(function () {
-    return {
-      entryState: {
-        collections: collections,
-        config: seed.config
-      },
-      dispatch: dispatch
-    };
-  }, [collections, dispatch, seed]);
-  return React.createElement(Context.Provider, {
-    value: value
-  }, children);
-}
-function useEntryState() {
-  var value = useContext(Context);
-  return value.entryState;
-}
-function useEntryStateDispatch() {
-  var value = useContext(Context);
-  return value.dispatch;
+  if (entryMetadata) {
+    return entryMetadata.shareUrl ? entryMetadata.shareUrl : entryState.config.prettyUrl;
+  } else {
+    return entryState.config.shareUrl;
+  }
 }
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -602,100 +728,468 @@ function useEntryStructure() {
   }, [entryState]);
 }
 
-function sectionStructure(collections, section) {
-  return section && _objectSpread$1({
-    permaId: section.permaId
-  }, section.configuration, {
-    foreground: getItems(collections, 'contentElements').filter(function (item) {
-      return item.sectionId === section.id;
-    }).map(function (item) {
-      return {
-        type: item.typeName,
-        position: item.configuration.position,
-        props: item.configuration
-      };
-    })
-  });
+function sectionStructure(collections, section) {
+  return section && _objectSpread$1({
+    permaId: section.permaId
+  }, section.configuration, {
+    foreground: getItems(collections, 'contentElements').filter(function (item) {
+      return item.sectionId === section.id;
+    }).map(function (item) {
+      return {
+        type: item.typeName,
+        position: item.configuration.position,
+        props: item.configuration
+      };
+    })
+  });
+}
+
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function expandUrls(collectionName, file, urlTemplates) {
+  if (!file) {
+    return null;
+  }
+
+  if (!urlTemplates[collectionName]) {
+    throw new Error("No file url templates found for ".concat(collectionName));
+  }
+
+  var variants = file.variants || Object.keys(urlTemplates[collectionName]);
+  var urls = variants.reduce(function (result, variant) {
+    var url = getFileUrl(collectionName, file, variant, urlTemplates);
+
+    if (url) {
+      result[variant] = url;
+    }
+
+    return result;
+  }, {});
+  return _objectSpread$2({
+    urls: urls
+  }, file);
+}
+
+function getFileUrl(collectionName, file, quality, urlTemplates) {
+  var templates = urlTemplates[collectionName];
+  var template = templates[quality];
+
+  if (template) {
+    return template.replace(':id_partition', idPartition(file.id)).replace(':basename', file.basename);
+  }
+}
+
+function idPartition(id) {
+  return partition(pad(id, 9));
+}
+
+function partition(string, separator) {
+  return string.replace(/./g, function (c, i, a) {
+    return i && (a.length - i) % 3 === 0 ? '/' + c : c;
+  });
+}
+
+function pad(string, size) {
+  return (Array(size).fill(0).join('') + string).slice(-size);
+}
+
+/**
+ * Look up a file by its collection and perma id.
+ *
+ * @param {Object} options
+ * @param {String} options.collectionName - Collection name of file type to look for (in camel case).
+ * @param {String} options.permaId - Perma id of file look up
+ *
+ * @example
+ * const imageFile = useFile({collectionName: 'imageFiles', permaId: 5});
+ * imageFile // =>
+ *   {
+ *     id: 102,
+ *     permaId: 5,
+ *     width: 1000,
+ *     height: 500,
+ *     urls: {
+ *       large: 'https://...'
+ *     },
+ *   }
+ */
+
+function useFile(_ref) {
+  var collectionName = _ref.collectionName,
+      permaId = _ref.permaId;
+  var entryState = useEntryState();
+  return expandUrls(collectionName, getItem(entryState.collections, collectionName, permaId), entryState.config.fileUrlTemplates);
+}
+
+/**
+ * Returns a string (comma-separated list) of copyrights of
+ * all images used in the entry.
+ * If none of the images has a rights attribute configured,
+ * it falls back to the default file rights of the entry's account,
+ * otherwise returns an empty string
+ *
+ * @example
+ *
+ * const fileRights = useFileRights();
+ * fileRights // => "author of image 1, author of image 2"
+ */
+
+function useFileRights() {
+  var entryState = useEntryState();
+  var defaultFileRights = entryState.config.defaultFileRights;
+  var imageFiles = getItems(entryState.collections, 'imageFiles');
+  var imageFileRights = imageFiles.map(function (imageConfig) {
+    return imageConfig.rights ? imageConfig.rights.trim() : undefined;
+  }).filter(Boolean).join(', ');
+  var fileRights = !!imageFileRights ? imageFileRights : defaultFileRights.trim();
+  var fileRightsString = !!fileRights ? 'Bildrechte: ' + fileRights : '';
+  return fileRightsString;
+}
+/**
+ * Returns a nested data structure representing the legal info of the entry.
+ * Each legal info is separated into label and url to use in links.
+ * Both label and url can be blank, depending on the configuration.
+ *
+ * @example
+ *
+ * const legalInfo = useLegalInfo();
+ * legalInfo // =>
+ *   {
+ *     imprint: {
+ *       label: '',
+ *       url: ''
+ *     },
+ *     copyright: {
+ *       label: '',
+ *       url: ''
+ *     },
+ *     privacy: {
+ *       label: '',
+ *       url: ''
+ *     }
+ *   }
+ */
+
+function useLegalInfo() {
+  var entryState = useEntryState();
+  return entryState.config.legalInfo;
+}
+/**
+ * Returns the credits string (rich text) of the entry.
+ *
+ * @example
+ *
+ * const credits = useCredits();
+ * credits // => "Credits: <a href="http://pageflow.com">pageflow.com</a>"
+ */
+
+function useCredits() {
+  var entryMetadata = useEntryMetadata();
+  var credits = '';
+
+  if (entryMetadata) {
+    credits = entryMetadata.credits;
+  }
+
+  return credits;
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css = "header svg {\n  fill: #c2c2c2;\n  cursor: pointer;\n}\n\nheader svg:hover {\n  fill: rgb(0, 55, 90);;\n}\n\n.AppHeader-module_navigationBar__2EFHw {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n    \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n    sans-serif;\n  position: sticky;\n  top: -50px;\n  transition: top .15s;\n  z-index: 10000;\n  width: 100%;\n  text-align: center;\n}\n\n.AppHeader-module_navigationBarExpanded__18nbf {\n  top: 0;\n}\n\n.AppHeader-module_navigationBarContentWrapper__2Sf8y {\n  position: relative;\n  z-index: 2;\n  background-color: #fff;\n  height: 50px;\n}\n\n.AppHeader-module_menuIcon__5JKuj {\n  position: absolute;\n}\n\n.AppHeader-module_wdrLogo__3XGNI {\n  top: 12px;\n  left: 15px;\n  width: 80px;\n}\n\n.AppHeader-module_chapterList__2lMMD {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.AppHeader-module_chapterListItem__28zrc {\n  position: relative;\n  display: inline-block;\n  padding: 0 15px;\n  border-right: 1px solid #e9e9e9;\n}\n\n.AppHeader-module_chapterListItem__28zrc:last-of-type {\n  border-right: none;\n}\n\n.AppHeader-module_navigationTooltip__1EvCy {\n  opacity: 1 !important;\n  box-shadow: 0 0 0.3125rem rgba(0,0,0,.2);\n}\n\n.AppHeader-module_progressBar__17IVu {\n  background-color: rgba(194,194,194,0.8);\n  height: 8px;\n  width: 100%;\n}\n\n.AppHeader-module_progressIndicator__3SlYz {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0vw;\n  height: 100%;\n  background-color: #e10028;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n  .AppHeader-module_wdrLogo__3XGNI {\n    position: inherit;\n  }\n\n  .AppHeader-module_navigationChapters__1dzyV {\n    touch-action: none;\n    display: block;\n    position: fixed;\n    top: 60px;\n    left: 0px;\n    background: rgba(255, 255, 255, 0.95);\n    width: 100vw;\n    height: 100vh;\n  }\n\n  .AppHeader-module_navigationChaptersHidden__8AEPA {\n    display: none;\n  }\n\n  .AppHeader-module_chapterList__2lMMD {\n    margin-top: 50px;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc {\n    display: list-item;\n    width: 80vw;\n    padding: 25px 10vw;\n    border-right: none;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc::before,\n  .AppHeader-module_chapterListItem__28zrc::after {\n    display: table;\n    content: \" \";\n    border-top: 1px solid rgb(100, 100, 100);\n    width: 30%;\n    margin: 0 35%;\n    transition: width .15s, margin .15s;\n  }\n\n  .AppHeader-module_chapterListItem__28zrc:hover::before,\n  .AppHeader-module_chapterListItem__28zrc:hover::after {\n    border-top: 1px solid rgb(0, 55, 90);\n    width: 80%;\n    margin: 0 10%;\n  }\n\n  .AppHeader-module_chapterLink__1Q-ee,\n  .AppHeader-module_chapterLink__1Q-ee:hover {\n    padding: 10px 0px;\n  }\n\n  .AppHeader-module_progressBar__17IVu {\n    height: 10px;\n  }\n}\n";
+var styles = {"navigationBar":"AppHeader-module_navigationBar__2EFHw","navigationBarExpanded":"AppHeader-module_navigationBarExpanded__18nbf","navigationBarContentWrapper":"AppHeader-module_navigationBarContentWrapper__2Sf8y","menuIcon":"AppHeader-module_menuIcon__5JKuj","wdrLogo":"AppHeader-module_wdrLogo__3XGNI","chapterList":"AppHeader-module_chapterList__2lMMD","chapterListItem":"AppHeader-module_chapterListItem__28zrc","navigationTooltip":"AppHeader-module_navigationTooltip__1EvCy","progressBar":"AppHeader-module_progressBar__17IVu","progressIndicator":"AppHeader-module_progressIndicator__3SlYz","navigationChapters":"AppHeader-module_navigationChapters__1dzyV","navigationChaptersHidden":"AppHeader-module_navigationChaptersHidden__8AEPA","chapterLink":"AppHeader-module_chapterLink__1Q-ee"};
+styleInject(css);
+
+var css$1 = ".HamburgerIcon-module_burgerMenuIconContainer__26RY4 {\n  display: none;\n}\n\n.HamburgerIcon-module_burgerMenuIcon__24t-5 {\n  top: 12px;\n  left: 12px;\n  outline: none;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n  .HamburgerIcon-module_burgerMenuIconContainer__26RY4 {\n    display: block;\n  }\n}\n";
+var styles$1 = {"burgerMenuIconContainer":"HamburgerIcon-module_burgerMenuIconContainer__26RY4","burgerMenuIcon":"HamburgerIcon-module_burgerMenuIcon__24t-5"};
+styleInject(css$1);
+
+var css$2 = "/*!\n * Hamburgers\n * @description Tasty CSS-animated hamburgers\n * @author Jonathan Suh @jonsuh\n * @site https://jonsuh.com/hamburgers\n * @link https://github.com/jonsuh/hamburgers\n */\n.HamburgerIcons-module_hamburger__NnCze {\n  display: inline-block;\n  cursor: pointer;\n  transition-property: opacity, filter;\n  transition-duration: 0.15s;\n  transition-timing-function: linear;\n  font: inherit;\n  color: inherit;\n  text-transform: none;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  overflow: visible;\n}\n\n.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg,\n.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg::before,\n.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg::after {\n  background-color: #e10028;\n}\n\n.HamburgerIcons-module_hamburger-box__34rgF {\n  width: 40px;\n  height: 24px;\n  display: inline-block;\n  position: relative;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg {\n  display: block;\n  top: 50%;\n  margin-top: -2px;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg, .HamburgerIcons-module_hamburger-inner__187lg::before, .HamburgerIcons-module_hamburger-inner__187lg::after {\n  width: 30px;\n  height: 4px;\n  background-color: rgb(0, 55, 90);\n  border-radius: 4px;\n  position: absolute;\n  transition-property: transform;\n  transition-duration: 0.15s;\n  transition-timing-function: ease;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg::before, .HamburgerIcons-module_hamburger-inner__187lg::after {\n  content: \"\";\n  display: block;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg::before {\n  top: -10px;\n}\n\n.HamburgerIcons-module_hamburger-inner__187lg::after {\n  bottom: -10px;\n}\n\n/*\n * Collapse\n */\n.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg {\n  top: auto;\n  bottom: 0;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg::after {\n  top: -20px;\n  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg::before {\n  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg {\n  transform: translate3d(0, -10px, 0) rotate(-45deg);\n  transition-delay: 0.22s;\n  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg::after {\n  top: 0;\n  opacity: 0;\n  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;\n}\n\n.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg::before {\n  top: 0;\n  transform: rotate(-90deg);\n  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n";
+var hamburgerIconStyles = {"hamburger":"HamburgerIcons-module_hamburger__NnCze","is-active":"HamburgerIcons-module_is-active__10qoY","hamburger-inner":"HamburgerIcons-module_hamburger-inner__187lg","hamburger-box":"HamburgerIcons-module_hamburger-box__34rgF","hamburger--collapse":"HamburgerIcons-module_hamburger--collapse__gRQFa"};
+styleInject(css$2);
+
+function HamburgerIcon(props) {
+  return React.createElement("div", {
+    className: styles$1.burgerMenuIconContainer
+  }, React.createElement("button", {
+    className: classnames(styles.menuIcon, styles$1.burgerMenuIcon, hamburgerIconStyles.hamburger, hamburgerIconStyles['hamburger--collapse'], _defineProperty({}, hamburgerIconStyles['is-active'], !props.mobileNavHidden)),
+    type: "button",
+    onClick: props.onClick
+  }, React.createElement("span", {
+    className: hamburgerIconStyles['hamburger-box']
+  }, React.createElement("span", {
+    className: hamburgerIconStyles['hamburger-inner']
+  }))));
+}
+
+var css$3 = ".ChapterLink-module_chapterLink__v5VRl {\n  line-height: 3rem;\n  color: rgb(0, 55, 90);\n  text-decoration: none;\n  position: relative;\n  display: block;\n  font-family: inherit;\n  font-weight: 700;\n  font-size: 1rem;\n  height: 48px;\n}\n\n.ChapterLink-module_chapterLink__v5VRl:hover,\n.ChapterLink-module_chapterLinkActive__jl4h5 {\n  color: #e10028;\n}\n\n/* mobile view */\n@media (max-width: 780px) {\n  .ChapterLink-module_chapterLink__v5VRl,\n  .ChapterLink-module_chapterLink__v5VRl:hover {\n    padding: 10px 0px;\n  }\n}";
+var styles$2 = {"chapterLink":"ChapterLink-module_chapterLink__v5VRl","chapterLinkActive":"ChapterLink-module_chapterLinkActive__jl4h5"};
+styleInject(css$3);
+
+var css$4 = ".ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw {\n  border-bottom: 3px solid #e10028;\n  width: 200px;\n}\n\n.ChapterLinkTooltip-module_tooltipHeadline__reew_ {\n  margin: 5px 0 0px;\n  color: #e10028;\n}\n\n@media (max-width: 780px) {\n  .ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw {\n    display: none !important;\n  }\n}\n";
+var styles$3 = {"chapterLinkTooltip":"ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw","tooltipHeadline":"ChapterLinkTooltip-module_tooltipHeadline__reew_"};
+styleInject(css$4);
+
+function ChapterLinkTooltip(props) {
+  return React.createElement(ReactTooltip, {
+    id: props.chapterLinkId,
+    type: "light",
+    place: "bottom",
+    effect: "solid",
+    className: classnames(styles.navigationTooltip, styles$3.chapterLinkTooltip)
+  }, React.createElement("div", null, React.createElement("h3", {
+    className: styles$3.tooltipHeadline
+  }, "Kapitel ", props.chapterIndex), React.createElement("p", {
+    dangerouslySetInnerHTML: {
+      __html: props.summary
+    }
+  })));
+}
+
+function ChapterLink(props) {
+  return React.createElement("div", null, React.createElement("a", {
+    className: classnames(styles$2.chapterLink, _defineProperty({}, styles$2.chapterLinkActive, props.active)),
+    href: "#chapter-".concat(props.permaId),
+    onClick: function onClick() {
+      return props.handleMenuClick(props.chapterLinkId);
+    },
+    "data-tip": true,
+    "data-for": props.chapterLinkId
+  }, props.title), React.createElement(ChapterLinkTooltip, Object.assign({
+    chapterIndex: props.chapterIndex,
+    chapterLinkId: props.chapterLinkId
+  }, props)));
+}
+
+var css$5 = ".LegalInfoMenu-module_infoIcon__1kTnt {\n  top: 12px;\n  right: 55px;\n  width: 26px;\n}\n\n";
+var styles$4 = {"infoIcon":"LegalInfoMenu-module_infoIcon__1kTnt"};
+styleInject(css$5);
+
+function _extends$6() {
+  _extends$6 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$6.apply(this, arguments);
 }
+var InfoIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  return React.createElement("svg", _extends$6({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 330 330"
+  }, props), React.createElement("path", {
+    d: "M165 0C74.019 0 0 74.02 0 165.001 0 255.982 74.019 330 165 330s165-74.018 165-164.999S255.981 0 165 0zm0 300c-74.44 0-135-60.56-135-134.999S90.56 30 165 30s135 60.562 135 135.001C300 239.44 239.439 300 165 300z"
+  }), React.createElement("path", {
+    d: "M164.998 70c-11.026 0-19.996 8.976-19.996 20.009 0 11.023 8.97 19.991 19.996 19.991 11.026 0 19.996-8.968 19.996-19.991 0-11.033-8.97-20.009-19.996-20.009zm.002 70c-8.284 0-15 6.716-15 15v90c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15v-90c0-8.284-6.716-15-15-15z"
+  }));
+});
 
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var css$6 = ".LegalInfoTooltip-module_legalInfoTooltip__ChzOS {\n  width: 200px;\n  max-width: 200px;\n  text-align: left;\n  margin-top: 12px !important;\n  margin-bottom: 12px !important;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS:after {\n  left: 90% !important;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS p {\n  margin: 0 0 0.5em;\n}\n\n.LegalInfoTooltip-module_legalInfoTooltip__ChzOS a {\n  color: #e10028;\n}\n";
+var styles$5 = {"legalInfoTooltip":"LegalInfoTooltip-module_legalInfoTooltip__ChzOS"};
+styleInject(css$6);
 
-function expandUrls(collectionName, file, urlTemplates) {
-  if (!file) {
-    return null;
-  }
+function LegalInfoLink(props) {
+  return React.createElement("div", null, props.label && props.url && React.createElement("a", {
+    target: "_blank",
+    href: props.url,
+    dangerouslySetInnerHTML: {
+      __html: props.label
+    }
+  }));
+}
 
-  if (!urlTemplates[collectionName]) {
-    throw new Error("No file url templates found for ".concat(collectionName));
-  }
+function LegalInfoTooltip() {
+  var fileRights = useFileRights();
+  var legalInfo = useLegalInfo();
+  var credits = useCredits();
+  return React.createElement(ReactTooltip, {
+    id: 'legalInfoTooltip',
+    type: 'light',
+    place: 'bottom',
+    effect: 'solid',
+    event: 'click',
+    globalEventOff: 'click',
+    clickable: true,
+    offset: {
+      bottom: 5,
+      right: -97
+    },
+    className: classnames(styles.navigationTooltip, styles$5.legalInfoTooltip)
+  }, React.createElement("div", {
+    onMouseLeave: function onMouseLeave() {
+      ReactTooltip.hide();
+    }
+  }, credits && React.createElement("p", {
+    dangerouslySetInnerHTML: {
+      __html: credits
+    }
+  }), fileRights && React.createElement("p", null, fileRights), React.createElement(LegalInfoLink, legalInfo.imprint), React.createElement(LegalInfoLink, legalInfo.copyright), React.createElement(LegalInfoLink, legalInfo.privacy)));
+}
 
-  var variants = file.variants || Object.keys(urlTemplates[collectionName]);
-  var urls = variants.reduce(function (result, variant) {
-    var url = getFileUrl(collectionName, file, variant, urlTemplates);
+function LegalInfoMenu(props) {
+  return React.createElement("div", null, React.createElement("a", {
+    className: classnames(styles.menuIcon, styles$4.infoIcon),
+    "data-tip": true,
+    "data-for": 'legalInfoTooltip',
+    onMouseEnter: function onMouseEnter() {
+      ReactTooltip.hide();
+    }
+  }, React.createElement(InfoIcon, null)), React.createElement(LegalInfoTooltip, null));
+}
 
-    if (url) {
-      result[variant] = url;
+var css$7 = ".SharingMenu-module_shareIcon__1AlDL {\n  top: 5px;\n  right: 10px;\n  width: 40px;\n}";
+var styles$6 = {"shareIcon":"SharingMenu-module_shareIcon__1AlDL"};
+styleInject(css$7);
+
+function _extends$7() {
+  _extends$7 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
 
-    return result;
-  }, {});
-  return _objectSpread$2({
-    urls: urls
-  }, file);
+    return target;
+  };
+
+  return _extends$7.apply(this, arguments);
 }
+var ShareIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
 
-function getFileUrl(collectionName, file, quality, urlTemplates) {
-  var templates = urlTemplates[collectionName];
-  var template = templates[quality];
+  return React.createElement("svg", _extends$7({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 96 96"
+  }, props), React.createElement("path", {
+    d: "M67.5 18c-5.1 0-9.3 4.2-9.3 9.3 0 .5.1 1.1.2 1.6l-23 12.9c-1.7-1.8-4.1-3-6.8-3-5.1 0-9.3 4.1-9.3 9.3 0 5.1 4.1 9.3 9.3 9.3 2.7 0 5.2-1.2 6.9-3.1l22.8 13.4c0 .4-.1.7-.1 1.1 0 5.1 4.1 9.3 9.3 9.3 5.1 0 9.3-4.1 9.3-9.3 0-5.1-4.1-9.3-9.3-9.3-2.8 0-5.4 1.3-7.1 3.3L37.7 49.4c.1-.4.1-.9.1-1.3 0-.5 0-1-.1-1.5l23.1-13c1.7 1.8 4.1 3 6.8 3 5.1 0 9.3-4.1 9.3-9.3-.1-5.1-4.3-9.3-9.4-9.3z"
+  }));
+});
 
-  if (template) {
-    return template.replace(':id_partition', idPartition(file.id)).replace(':basename', file.basename);
+var css$8 = "header .share svg {\n  fill: rgb(0, 55, 90);\n}\n\nheader .share:hover svg {\n  fill: #e10028;\n}\n\n.SharingTooltip-module_sharingTooltip__1cljv {\n  width: 160px;\n  padding: 0 !important;\n}\n\n.SharingTooltip-module_sharingTooltip__1cljv:after {\n  left: 90% !important;\n}\n\n.SharingTooltip-module_shareLinkContainer__2MnKN {\n  float: left;\n  width: 80px;\n  height: 60px;\n  cursor: pointer;\n  color: transparent;\n  text-align: center;\n}\n\n.SharingTooltip-module_shareLink__2ySSX {\n  position: relative;\n  color: rgb(0, 55, 90);\n  text-decoration: none;\n}\n\n.SharingTooltip-module_shareLink__2ySSX:hover {\n  color: #e10028;\n}\n\n.SharingTooltip-module_shareIcon__3igrs {\n  width: 80px;\n  height: 25px;\n  margin-top: 5px;\n  margin-bottom: 3px;\n}\n";
+var styles$7 = {"sharingTooltip":"SharingTooltip-module_sharingTooltip__1cljv","shareLinkContainer":"SharingTooltip-module_shareLinkContainer__2MnKN","shareLink":"SharingTooltip-module_shareLink__2ySSX","shareIcon":"SharingTooltip-module_shareIcon__3igrs"};
+styleInject(css$8);
+
+function SharingTooltip() {
+  var shareUrl = useShareUrl();
+  var shareProviders = useShareProviders();
+
+  function renderShareLinks(shareProviders) {
+    return shareProviders.map(function (shareProvider) {
+      var Icon = shareProvider.icon;
+      return React.createElement("div", {
+        key: shareProvider.name,
+        className: styles$7.shareLinkContainer
+      }, React.createElement("a", {
+        className: classnames('share', styles$7.shareLink),
+        href: shareProvider.url.replace('%{url}', shareUrl),
+        target: '_blank'
+      }, React.createElement(Icon, {
+        className: styles$7.shareIcon
+      }), shareProvider.name));
+    });
   }
+  return React.createElement(ReactTooltip, {
+    id: 'sharingTooltip',
+    type: 'light',
+    place: 'bottom',
+    effect: 'solid',
+    event: 'click',
+    globalEventOff: 'click',
+    clickable: true,
+    offset: {
+      right: -64
+    },
+    className: classnames(styles.navigationTooltip, styles$7.sharingTooltip)
+  }, React.createElement("div", {
+    onMouseLeave: function onMouseLeave() {
+      ReactTooltip.hide();
+    }
+  }, renderShareLinks(shareProviders)));
 }
 
-function idPartition(id) {
-  return partition(pad(id, 9));
+function SharingMenu() {
+  return React.createElement("div", null, React.createElement("a", {
+    className: classnames(styles.menuIcon, styles$6.shareIcon),
+    "data-tip": true,
+    "data-for": 'sharingTooltip',
+    onMouseEnter: function onMouseEnter() {
+      ReactTooltip.hide();
+    }
+  }, React.createElement(ShareIcon, null)), React.createElement(SharingTooltip, null));
 }
 
-function partition(string, separator) {
-  return string.replace(/./g, function (c, i, a) {
-    return i && (a.length - i) % 3 === 0 ? '/' + c : c;
-  });
-}
+function _extends$8() {
+  _extends$8 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-function pad(string, size) {
-  return (Array(size).fill(0).join('') + string).slice(-size);
-}
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-/**
- * Look up a file by its collection and perma id.
- *
- * @param {Object} options
- * @param {String} options.collectionName - Collection name of file type to look for (in camel case).
- * @param {String} options.permaId - Perma id of file look up
- *
- * @example
- * const imageFile = useFile({collectionName: 'imageFiles', permaId: 5});
- * imageFile // =>
- *   {
- *     id: 102,
- *     permaId: 5,
- *     width: 1000,
- *     height: 500,
- *     urls: {
- *       large: 'https://...'
- *     },
- *   }
- */
+    return target;
+  };
 
-function useFile(_ref) {
-  var collectionName = _ref.collectionName,
-      permaId = _ref.permaId;
-  var entryState = useEntryState();
-  return expandUrls(collectionName, getItem(entryState.collections, collectionName, permaId), entryState.config.fileUrlTemplates);
+  return _extends$8.apply(this, arguments);
 }
+var WDRlogo = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return React.createElement("svg", _extends$8({
+    viewBox: "-0.445 -0.445 51.921 15.721"
+  }, props), React.createElement("path", {
+    d: "M31.189 14.83h3.731v-4.772h.285c.425 0 1.496-.023 2.079.919l2.292 3.854h4.015l-2.088-3.509c-.69-1.176-1.258-1.806-1.704-2.13v-.039c1.259-.446 2.636-1.522 2.636-3.715 0-2.716-1.946-4.116-5.394-4.116H31.19v4.689h-.038c-.708-2.829-3.095-4.689-7.453-4.689h-8.253l-1.257 5.516a42.42 42.42 0 00-.488 2.578h-.04s-.284-1.603-.547-2.74l-1.077-5.354h-4.53L6.43 6.676c-.264 1.137-.547 2.74-.547 2.74H5.84s-.222-1.442-.486-2.578L4.097 1.322H0L3.61 14.83h4.121L9.78 6.169h.041l2.048 8.662h4.056L18.93 3.614h.04v11.217h4.606c4.42 0 6.86-2.028 7.577-4.927h.036v4.927zm-7.309-3.062h-1.135V4.384h1.034c2.475 0 3.59 1.095 3.59 3.612 0 2.473-1.115 3.772-3.489 3.772m13.08-4.565h-2.04V4.182h1.918c1.278 0 1.806.506 1.806 1.52 0 .934-.548 1.501-1.684 1.501m12.003-2.317V1.404L45.48 2.66v.865l1.153-.418v2.616l2.33-.838zM47.573 0a3.469 3.469 0 013.459 3.478 3.468 3.468 0 01-3.46 3.477 3.468 3.468 0 01-3.458-3.478A3.469 3.469 0 0147.573 0m0 .51a2.96 2.96 0 00-2.951 2.967 2.96 2.96 0 002.95 2.968 2.96 2.96 0 002.953-2.967A2.96 2.96 0 0047.573.51",
+    fill: "#00375a"
+  }));
+});
 
 function AppHeader(props) {
   var _useState = useState(true),
@@ -757,13 +1251,13 @@ function AppHeader(props) {
     setMobileNavHidden(true);
   }
 
-  function renderMenuLinks(chapters) {
+  function renderChapterLinks(chapters) {
     return chapters.map(function (chapter, index) {
       var chapterIndex = index + 1;
       var chapterLinkId = "chapterLink".concat(chapterIndex);
       return React.createElement("li", {
         key: index,
-        className: styles$2.chapterListItem
+        className: styles.chapterListItem
       }, React.createElement(ChapterLink, Object.assign({}, chapter, {
         chapterIndex: chapterIndex,
         chapterLinkId: chapterLinkId,
@@ -773,34 +1267,25 @@ function AppHeader(props) {
     });
   }
   return React.createElement("header", {
-    className: classnames(styles$2.navigationBar, _defineProperty({}, styles$2.navigationBarExpanded, navExpanded))
+    className: classnames(styles.navigationBar, _defineProperty({}, styles.navigationBarExpanded, navExpanded))
   }, React.createElement("div", {
-    className: styles$2.navigationBarContentWrapper
-  }, React.createElement("button", {
-    className: classnames(styles$2.menuIcon, styles$2.burgerMenuIcon, hamburgerIcons.hamburger, hamburgerIcons['hamburger--collapse'], _defineProperty({}, hamburgerIcons['is-active'], !mobileNavHidden)),
-    type: "button",
-    onClick: handleBurgerMenuClick
-  }, React.createElement("span", {
-    className: hamburgerIcons['hamburger-box']
-  }, React.createElement("span", {
-    className: hamburgerIcons['hamburger-inner']
-  }))), React.createElement(WDRlogo, {
-    className: classnames(styles$2.wdrLogo)
+    className: styles.navigationBarContentWrapper
+  }, React.createElement(HamburgerIcon, {
+    onClick: handleBurgerMenuClick,
+    mobileNavHidden: mobileNavHidden
+  }), React.createElement(WDRlogo, {
+    className: classnames(styles.menuIcon, styles.wdrLogo)
   }), React.createElement("nav", {
-    className: classnames(styles$2.navigationChapters, _defineProperty({}, styles$2.navigationChaptersHidden, mobileNavHidden)),
+    className: classnames(styles.navigationChapters, _defineProperty({}, styles.navigationChaptersHidden, mobileNavHidden)),
     role: "navigation",
     ref: ref
   }, React.createElement("ul", {
-    className: styles$2.chapterList
-  }, renderMenuLinks(chapters))), React.createElement("a", {
-    className: classnames(styles$2.menuIcon, styles$2.infoIcon)
-  }, React.createElement(InfoIcon, null)), React.createElement("a", {
-    className: classnames(styles$2.menuIcon, styles$2.shareIcon)
-  }, React.createElement(ShareIcon, null))), React.createElement("div", {
-    className: styles$2.progressBar,
+    className: styles.chapterList
+  }, renderChapterLinks(chapters))), React.createElement(LegalInfoMenu, null), React.createElement(SharingMenu, null)), React.createElement("div", {
+    className: styles.progressBar,
     onMouseEnter: handleProgressBarMouseEnter
   }, React.createElement("span", {
-    className: styles$2.progressIndicator,
+    className: styles.progressIndicator,
     style: {
       width: readingProgress + '%'
     }
@@ -842,20 +1327,20 @@ function useOnScreen(ref) {
   return isIntersecting;
 }
 
-var css$4 = ".Fullscreen-module_root__1N3CI {\n  width: 100%;\n  height: 100vh;\n  position: relative;\n  overflow: hidden;\n}\n";
-var styles$3 = {"root":"Fullscreen-module_root__1N3CI"};
-styleInject(css$4);
+var css$9 = ".Fullscreen-module_root__1N3CI {\n  width: 100%;\n  height: 100vh;\n  position: relative;\n  overflow: hidden;\n}\n";
+var styles$8 = {"root":"Fullscreen-module_root__1N3CI"};
+styleInject(css$9);
 
 var Fullscreen = React.forwardRef(function Fullscreen(props, ref) {
   return React.createElement("div", {
     ref: ref,
-    className: styles$3.root
+    className: styles$8.root
   }, props.children);
 });
 
-var css$5 = ".Image-module_root__1ef3j {\n  background-size: cover;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n\n@media (orientation: landscape) {\n  .Image-module_portrait__1mRha {\n    display: none;\n  }\n}\n\n@media (orientation: portrait) {\n  .Image-module_portrait__1mRha {\n    display: block;\n  }\n}";
-var styles$4 = {"root":"Image-module_root__1ef3j","portrait":"Image-module_portrait__1mRha"};
-styleInject(css$5);
+var css$a = ".Image-module_root__1ef3j {\n  background-size: cover;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n\n@media (orientation: landscape) {\n  .Image-module_portrait__1mRha {\n    display: none;\n  }\n}\n\n@media (orientation: portrait) {\n  .Image-module_portrait__1mRha {\n    display: block;\n  }\n}";
+var styles$9 = {"root":"Image-module_root__1ef3j","portrait":"Image-module_portrait__1mRha"};
+styleInject(css$a);
 
 /**
  * Render an image file.
@@ -874,7 +1359,7 @@ function Image(props) {
     var focusX = typeof image.configuration.focusX === 'undefined' ? 50 : image.configuration.focusX;
     var focusY = typeof image.configuration.focusY === 'undefined' ? 50 : image.configuration.focusY;
     return React.createElement("div", {
-      className: classnames(styles$4.root, _defineProperty({}, styles$4.portrait, props.mobile)),
+      className: classnames(styles$9.root, _defineProperty({}, styles$9.portrait, props.mobile)),
       role: "img",
       style: {
         backgroundImage: "url(".concat(image.urls.large, ")"),
@@ -886,13 +1371,17 @@ function Image(props) {
   return null;
 }
 
-var ScrollToSectionContext = React.createContext();
+var ScrollToSectionContext = React.createContext(function () {});
 
-var MutedContext = React.createContext();
+var MutedContext = React.createContext({
+  muted: true,
+  setMuted: function setMuted() {},
+  mediaOff: true
+});
 
-var css$6 = ".Video-module_root__30u0y {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.Video-module_video__3FJvj {\n  width: 100%;\n  height: 100%;\n  transition: transform ease 0.2s;\n  outline: none;\n}\n\n.Video-module_video__3FJvj:focus {\n  outline: none;\n}\n\n.Video-module_backdrop__1R7f4 {\n  object-fit: cover;\n}\n";
-var styles$5 = {"root":"Video-module_root__30u0y","video":"Video-module_video__3FJvj","backdrop":"Video-module_backdrop__1R7f4"};
-styleInject(css$6);
+var css$b = ".Video-module_root__30u0y {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.Video-module_video__3FJvj {\n  width: 100%;\n  height: 100%;\n  transition: transform ease 0.2s;\n  outline: none;\n}\n\n.Video-module_video__3FJvj:focus {\n  outline: none;\n}\n\n.Video-module_backdrop__1R7f4 {\n  object-fit: cover;\n}\n";
+var styles$a = {"root":"Video-module_root__30u0y","video":"Video-module_video__3FJvj","backdrop":"Video-module_backdrop__1R7f4"};
+styleInject(css$b);
 
 function Video(props) {
   var awsBucket = '//s3-eu-west-1.amazonaws.com/de.codevise.pageflow.development/pageflow-next/presentation-videos/';
@@ -930,10 +1419,12 @@ function Video(props) {
   }['poster_' + props.id];
   var videoRef = useRef();
   var state = props.state;
+  var mutedSettings = useContext(MutedContext);
+  var mediaOff = mutedSettings.mediaOff;
   useEffect(function () {
     var video = videoRef.current;
 
-    if (video) {
+    if (video && !mediaOff) {
       if (state === 'active') {
         if (video.readyState > 0) {
           video.play();
@@ -951,24 +1442,22 @@ function Video(props) {
     function play() {
       video.play();
     }
-  }, [state, videoRef]);
+  }, [state, videoRef, mediaOff]);
   return React.createElement("div", {
-    className: styles$5.root
-  }, React.createElement(MutedContext.Consumer, null, function (mutedSettings) {
-    return React.createElement(ScrollToSectionContext.Consumer, null, function (scrollToSection) {
-      return React.createElement("video", {
-        src: videoUrl,
-        ref: videoRef,
-        className: classnames(styles$5.video, _defineProperty({}, styles$5.backdrop, !props.interactive)),
-        controls: props.controls,
-        playsInline: true,
-        onEnded: function onEnded() {
-          return props.nextSectionOnEnd && scrollToSection('next');
-        },
-        loop: !props.interactive,
-        muted: mutedSettings.muted,
-        poster: posterUrl
-      });
+    className: styles$a.root
+  }, React.createElement(ScrollToSectionContext.Consumer, null, function (scrollToSection) {
+    return React.createElement("video", {
+      src: videoUrl,
+      ref: videoRef,
+      className: classnames(styles$a.video, _defineProperty({}, styles$a.backdrop, !props.interactive)),
+      controls: props.controls,
+      playsInline: true,
+      onEnded: function onEnded() {
+        return props.nextSectionOnEnd && scrollToSection('next');
+      },
+      loop: !props.interactive,
+      muted: mutedSettings.muted,
+      poster: posterUrl
     });
   }));
 }
@@ -977,22 +1466,22 @@ Video.defaultProps = {
   controls: false
 };
 
-var css$7 = ".FillColor-module_FillColor__S1uEG {\n  width: 100%;\n  height: 100vh;\n}\n";
-var styles$6 = {"FillColor":"FillColor-module_FillColor__S1uEG"};
-styleInject(css$7);
+var css$c = ".FillColor-module_FillColor__S1uEG {\n  width: 100%;\n  height: 100vh;\n}\n";
+var styles$b = {"FillColor":"FillColor-module_FillColor__S1uEG"};
+styleInject(css$c);
 
 function FillColor(props) {
   return React.createElement("div", {
-    className: styles$6.FillColor,
+    className: styles$b.FillColor,
     style: {
       backgroundColor: props.color
     }
   });
 }
 
-var css$8 = ".MotifArea-module_root__1_ACd {\n  position: absolute;\n  background: hsla(0, 0%, 100%, 0.2);\n  z-index: 2;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.MotifArea-module_active__1q4z2 {\n  opacity: 1;\n}\n\n.MotifArea-module_corner__3hB5t {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n}\n\n.MotifArea-module_topLeft__3vHHi {\n  border-top: solid 2px #fff;\n  border-left: solid 2px #fff;\n}\n\n.MotifArea-module_topRight__2gNmC {\n  right: 0;\n  border-top: solid 2px #fff;\n  border-right: solid 2px #fff;\n}\n\n.MotifArea-module_bottomLeft__2qEqb {\n  bottom: 0;\n  border-bottom: solid 2px #fff;\n  border-left: solid 2px #fff;\n}\n\n.MotifArea-module_bottomRight__3OjTb {\n  right: 0;\n  bottom: 0;\n  border-bottom: solid 2px #fff;\n  border-right: solid 2px #fff;\n}\n";
-var styles$7 = {"root":"MotifArea-module_root__1_ACd","active":"MotifArea-module_active__1q4z2","corner":"MotifArea-module_corner__3hB5t","topLeft":"MotifArea-module_topLeft__3vHHi MotifArea-module_corner__3hB5t","topRight":"MotifArea-module_topRight__2gNmC MotifArea-module_corner__3hB5t","bottomLeft":"MotifArea-module_bottomLeft__2qEqb MotifArea-module_corner__3hB5t","bottomRight":"MotifArea-module_bottomRight__3OjTb MotifArea-module_corner__3hB5t"};
-styleInject(css$8);
+var css$d = ".MotifArea-module_root__1_ACd {\n  position: absolute;\n  background: hsla(0, 0%, 100%, 0.2);\n  z-index: 2;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.MotifArea-module_active__1q4z2 {\n  opacity: 1;\n}\n\n.MotifArea-module_corner__3hB5t {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n}\n\n.MotifArea-module_topLeft__3vHHi {\n  border-top: solid 2px #fff;\n  border-left: solid 2px #fff;\n}\n\n.MotifArea-module_topRight__2gNmC {\n  right: 0;\n  border-top: solid 2px #fff;\n  border-right: solid 2px #fff;\n}\n\n.MotifArea-module_bottomLeft__2qEqb {\n  bottom: 0;\n  border-bottom: solid 2px #fff;\n  border-left: solid 2px #fff;\n}\n\n.MotifArea-module_bottomRight__3OjTb {\n  right: 0;\n  bottom: 0;\n  border-bottom: solid 2px #fff;\n  border-right: solid 2px #fff;\n}\n";
+var styles$c = {"root":"MotifArea-module_root__1_ACd","active":"MotifArea-module_active__1q4z2","corner":"MotifArea-module_corner__3hB5t","topLeft":"MotifArea-module_topLeft__3vHHi MotifArea-module_corner__3hB5t","topRight":"MotifArea-module_topRight__2gNmC MotifArea-module_corner__3hB5t","bottomLeft":"MotifArea-module_bottomLeft__2qEqb MotifArea-module_corner__3hB5t","bottomRight":"MotifArea-module_bottomRight__3OjTb MotifArea-module_corner__3hB5t"};
+styleInject(css$d);
 
 var MotifArea = React.forwardRef(function MotifArea(props, ref) {
   var image = useFile({
@@ -1006,18 +1495,18 @@ var MotifArea = React.forwardRef(function MotifArea(props, ref) {
 
   return React.createElement("div", {
     ref: ref,
-    className: classnames(styles$7.root, _defineProperty({}, styles$7.active, props.active)),
+    className: classnames(styles$c.root, _defineProperty({}, styles$c.active, props.active)),
     style: position(props, image),
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave
   }, React.createElement("div", {
-    className: styles$7.topLeft
+    className: styles$c.topLeft
   }), React.createElement("div", {
-    className: styles$7.topRight
+    className: styles$c.topRight
   }), React.createElement("div", {
-    className: styles$7.bottomLeft
+    className: styles$c.bottomLeft
   }), React.createElement("div", {
-    className: styles$7.bottomRight
+    className: styles$c.bottomRight
   }));
 });
 
@@ -1859,9 +2348,9 @@ function ReactCompareImage(props) {
 
 ReactCompareImage.defaultProps = defaultProps;
 
-var css$9 = ".BeforeAfter-module_container__38Dru {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.wiggle {\n  animation: BeforeAfter-module_shake__3iLe8 1.5s cubic-bezier(.36,.07,.19,.97) both;\n}\n\n@keyframes BeforeAfter-module_shake__3iLe8 {\n  10%, 90% {\n    transform: translate3d(-20%, 0, 0);\n  }\n\n  20%, 80% {\n    transform: translate3d(40%, 0, 0);\n  }\n\n  30%, 50%, 70% {\n    transform: translate3d(-80%, 0, 0);\n  }\n\n  40%, 60% {\n    transform: translate3d(80%, 0, 0);\n  }\n}";
-var styles$8 = {"container":"BeforeAfter-module_container__38Dru","shake":"BeforeAfter-module_shake__3iLe8"};
-styleInject(css$9);
+var css$e = ".BeforeAfter-module_container__38Dru {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.wiggle {\n  animation: BeforeAfter-module_shake__3iLe8 1.5s cubic-bezier(.36,.07,.19,.97) both;\n}\n\n@keyframes BeforeAfter-module_shake__3iLe8 {\n  10%, 90% {\n    transform: translate3d(-20%, 0, 0);\n  }\n\n  20%, 80% {\n    transform: translate3d(40%, 0, 0);\n  }\n\n  30%, 50%, 70% {\n    transform: translate3d(-80%, 0, 0);\n  }\n\n  40%, 60% {\n    transform: translate3d(80%, 0, 0);\n  }\n}";
+var styles$d = {"container":"BeforeAfter-module_container__38Dru","shake":"BeforeAfter-module_shake__3iLe8"};
+styleInject(css$e);
 
 var BeforeAfter = (function (_ref) {
   var state = _ref.state,
@@ -1974,7 +2463,7 @@ var BeforeAfter = (function (_ref) {
   var afterImage = awsBucket + 'before_after/haldern_church2.jpg';
   return React.createElement("div", {
     ref: beforeAfterRef,
-    className: styles$8.container
+    className: styles$d.container
   }, React.createElement(ReactCompareImage, {
     leftImage: beforeImage,
     rightImage: afterImage,
@@ -1989,9 +2478,9 @@ var BeforeAfter = (function (_ref) {
   }));
 });
 
-var css$a = ".Backdrop-module_Backdrop__1w4UZ {\n  width: 100%;\n  z-index: 2;\n}\n\n.Backdrop-module_offScreen__2_FYZ {\n}\n";
-var styles$9 = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","offScreen":"Backdrop-module_offScreen__2_FYZ"};
-styleInject(css$a);
+var css$f = ".Backdrop-module_Backdrop__1w4UZ {\n  width: 100%;\n  z-index: 2;\n}\n\n.Backdrop-module_offScreen__2_FYZ {\n}\n";
+var styles$e = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","offScreen":"Backdrop-module_offScreen__2_FYZ"};
+styleInject(css$f);
 
 function Backdrop(props) {
   var _useDimension = useDimension(),
@@ -2000,7 +2489,7 @@ function Backdrop(props) {
       setContainerRef = _useDimension2[1];
 
   return React.createElement("div", {
-    className: classnames(styles$9.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)], _defineProperty({}, styles$9.offScreen, props.offScreen))
+    className: classnames(styles$e.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)], _defineProperty({}, styles$e.offScreen, props.offScreen))
   }, React.createElement("div", {
     className: props.transitionStyles.backdropInner
   }, React.createElement("div", {
@@ -2059,9 +2548,9 @@ function renderContent(props, containerDimension, setContainerRef) {
   }
 }
 
-var css$b = ".Foreground-module_Foreground__13ODU {\n  position: relative;\n  z-index: 3;\n\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.Foreground-module_fullFadeHeight__2p9dx {\n  min-height: 51vh;\n}\n\n.Foreground-module_fullHeight__1vMXb {\n  min-height: 100vh;\n}\n\n.Foreground-module_fullFadeHeight__2p9dx.Foreground-module_enlarge__14Plm,\n.Foreground-module_fullHeight__1vMXb.Foreground-module_enlarge__14Plm {\n  min-height: 130vh;\n}\n\n.Foreground-module_hidden__2dmAx {\n  visibility: hidden;\n}\n";
-var styles$a = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","enlarge":"Foreground-module_enlarge__14Plm","hidden":"Foreground-module_hidden__2dmAx"};
-styleInject(css$b);
+var css$g = ".Foreground-module_Foreground__13ODU {\n  position: relative;\n  z-index: 3;\n\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.Foreground-module_fullFadeHeight__2p9dx {\n  min-height: 51vh;\n}\n\n.Foreground-module_fullHeight__1vMXb {\n  min-height: 100vh;\n}\n\n.Foreground-module_fullFadeHeight__2p9dx.Foreground-module_enlarge__14Plm,\n.Foreground-module_fullHeight__1vMXb.Foreground-module_enlarge__14Plm {\n  min-height: 130vh;\n}\n\n.Foreground-module_hidden__2dmAx {\n  visibility: hidden;\n}\n";
+var styles$f = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","enlarge":"Foreground-module_enlarge__14Plm","hidden":"Foreground-module_hidden__2dmAx"};
+styleInject(css$g);
 
 function Foreground(props) {
   return React.createElement("div", {
@@ -2072,7 +2561,7 @@ function Foreground(props) {
 function className(props) {
   var _classNames;
 
-  return classnames(styles$a.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], styles$a["".concat(props.heightMode, "Height")], (_classNames = {}, _defineProperty(_classNames, styles$a.hidden, props.hidden), _defineProperty(_classNames, styles$a.enlarge, props.hidden && !props.disableEnlarge), _classNames));
+  return classnames(styles$f.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], styles$f["".concat(props.heightMode, "Height")], (_classNames = {}, _defineProperty(_classNames, styles$f.hidden, props.hidden), _defineProperty(_classNames, styles$f.enlarge, props.hidden && !props.disableEnlarge), _classNames));
 }
 
 function _arrayWithoutHoles(arr) {
@@ -2097,24 +2586,24 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
 }
 
-var css$c = "\n\n.Heading-module_Heading__1YSiy {\n  font-size: 66px;\n  font-weight: 700;\n  margin-top: 0;\n  margin-bottom: 0.5em;\n  padding-top: 0.5em;\n}\n\n.Heading-module_first__1yPxD {\n  font-size: 110px;\n  line-height: 1;\n}\n\n@media (orientation: landscape) {\n  .Heading-module_first__1yPxD {\n    padding-top: 25%;\n  }\n}\n\n@media (max-width: 600px) {\n  .Heading-module_Heading__1YSiy {\n    font-size: 40px;\n  }\n\n  .Heading-module_first__1yPxD {\n    font-size: 66px;\n  }\n}\n";
-var styles$b = {"text-l":"40px","text-xl":"66px","text-2xl":"110px","Heading":"Heading-module_Heading__1YSiy","first":"Heading-module_first__1yPxD"};
-styleInject(css$c);
+var css$h = "\n\n.Heading-module_Heading__1YSiy {\n  font-size: 66px;\n  font-weight: 700;\n  margin-top: 0;\n  margin-bottom: 0.5em;\n  padding-top: 0.5em;\n}\n\n.Heading-module_first__1yPxD {\n  font-size: 110px;\n  line-height: 1;\n}\n\n@media (orientation: landscape) {\n  .Heading-module_first__1yPxD {\n    padding-top: 25%;\n  }\n}\n\n@media (max-width: 600px) {\n  .Heading-module_Heading__1YSiy {\n    font-size: 40px;\n  }\n\n  .Heading-module_first__1yPxD {\n    font-size: 66px;\n  }\n}\n";
+var styles$g = {"text-l":"40px","text-xl":"66px","text-2xl":"110px","Heading":"Heading-module_Heading__1YSiy","first":"Heading-module_first__1yPxD"};
+styleInject(css$h);
 
 function Heading(props) {
   return React.createElement("h1", {
-    className: classnames(styles$b.Heading, _defineProperty({}, styles$b.first, props.first)),
+    className: classnames(styles$g.Heading, _defineProperty({}, styles$g.first, props.first)),
     style: props.style
   }, props.children);
 }
 
-var css$d = "\n\n.TextBlock-module_TextBlock__5Zpj7 {\n  font-size: 22px;\n  line-height: 1.4;\n\n  padding: 1em 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  text-shadow: none;\n}\n\n.TextBlock-module_dummy__3W5ls {\n  opacity: 0.7;\n}\n\n.TextBlock-module_TextBlock__5Zpj7 a {\n  color: #fff;\n  word-wrap: break-word;\n}\n\n.TextBlock-module_TextBlock__5Zpj7 ol,\n.TextBlock-module_TextBlock__5Zpj7 ul {\n  padding-left: 20px;\n}\n";
-var styles$c = {"text-base":"22px","TextBlock":"TextBlock-module_TextBlock__5Zpj7","dummy":"TextBlock-module_dummy__3W5ls"};
-styleInject(css$d);
+var css$i = "\n\n.TextBlock-module_TextBlock__5Zpj7 {\n  font-size: 22px;\n  line-height: 1.4;\n\n  padding: 1em 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  text-shadow: none;\n}\n\n.TextBlock-module_dummy__3W5ls {\n  opacity: 0.7;\n}\n\n.TextBlock-module_TextBlock__5Zpj7 a {\n  color: #fff;\n  word-wrap: break-word;\n}\n\n.TextBlock-module_TextBlock__5Zpj7 ol,\n.TextBlock-module_TextBlock__5Zpj7 ul {\n  padding-left: 20px;\n}\n";
+var styles$h = {"text-base":"22px","TextBlock":"TextBlock-module_TextBlock__5Zpj7","dummy":"TextBlock-module_dummy__3W5ls"};
+styleInject(css$i);
 
 function TextBlock(props) {
   return React.createElement("div", {
-    className: classnames(styles$c.TextBlock, _defineProperty({}, styles$c.dummy, props.dummy)),
+    className: classnames(styles$h.TextBlock, _defineProperty({}, styles$h.dummy, props.dummy)),
     style: props.style,
     dangerouslySetInnerHTML: {
       __html: props.children
@@ -2122,83 +2611,83 @@ function TextBlock(props) {
   });
 }
 
-var css$e = ".InlineCaption-module_root__1R8Ib {\n  padding: 3px 10px 5px;\n  background-color: #fff;\n  color: #222;\n  font-size: text-s;\n  line-height: 1.4;\n  text-shadow: none;\n}\n";
-var styles$d = {"text-base":"22px","root":"InlineCaption-module_root__1R8Ib"};
-styleInject(css$e);
+var css$j = ".InlineCaption-module_root__1R8Ib {\n  padding: 3px 10px 5px;\n  background-color: #fff;\n  color: #222;\n  font-size: text-s;\n  line-height: 1.4;\n  text-shadow: none;\n}\n";
+var styles$i = {"text-base":"22px","root":"InlineCaption-module_root__1R8Ib"};
+styleInject(css$j);
 
 function InlineCaption(props) {
   if (props.text) {
     return React.createElement("div", {
-      className: styles$d.root
+      className: styles$i.root
     }, props.text);
   } else {
     return null;
   }
 }
 
-var css$f = ".InlineImage-module_root__1DvUb {\n  position: relative;\n  margin-top: 1em;\n}\n\n.InlineImage-module_container__Pui7E {\n  position: relative;\n  margin-top: 1em;\n}\n\n.InlineImage-module_spacer__2rMkE {\n  padding-top: 75%;\n}\n\n.InlineImage-module_inner__2AMK- {\n  border: solid 2px #fff;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n";
-var styles$e = {"root":"InlineImage-module_root__1DvUb","container":"InlineImage-module_container__Pui7E","spacer":"InlineImage-module_spacer__2rMkE","inner":"InlineImage-module_inner__2AMK-"};
-styleInject(css$f);
+var css$k = ".InlineImage-module_root__1DvUb {\n  position: relative;\n  margin-top: 1em;\n}\n\n.InlineImage-module_container__Pui7E {\n  position: relative;\n  margin-top: 1em;\n}\n\n.InlineImage-module_spacer__2rMkE {\n  padding-top: 75%;\n}\n\n.InlineImage-module_inner__2AMK- {\n  border: solid 2px #fff;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n";
+var styles$j = {"root":"InlineImage-module_root__1DvUb","container":"InlineImage-module_container__Pui7E","spacer":"InlineImage-module_spacer__2rMkE","inner":"InlineImage-module_inner__2AMK-"};
+styleInject(css$k);
 
 function InlineImage(props) {
   return React.createElement("div", {
-    className: classnames(styles$e.root)
+    className: classnames(styles$j.root)
   }, React.createElement("div", {
-    className: styles$e.container
+    className: styles$j.container
   }, React.createElement("div", {
-    className: styles$e.spacer
+    className: styles$j.spacer
   }, React.createElement("div", {
-    className: styles$e.inner
+    className: styles$j.inner
   }, React.createElement(Image, props)))), React.createElement(InlineCaption, {
     text: props.caption
   }));
 }
 
-var css$g = ".InlineVideo-module_root__2UD3D {\n  position: relative;\n  max-height: 98vh;\n}\n\n.InlineVideo-module_inner__H81_g {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n";
-var styles$f = {"root":"InlineVideo-module_root__2UD3D","inner":"InlineVideo-module_inner__H81_g"};
-styleInject(css$g);
+var css$l = ".InlineVideo-module_root__2UD3D {\n  position: relative;\n  max-height: 98vh;\n}\n\n.InlineVideo-module_inner__H81_g {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n";
+var styles$k = {"root":"InlineVideo-module_root__2UD3D","inner":"InlineVideo-module_inner__H81_g"};
+styleInject(css$l);
 
 function InlineVideo(props) {
   var ref = useRef();
   var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
   return React.createElement("div", {
     ref: ref,
-    className: classnames(styles$f.root)
+    className: classnames(styles$k.root)
   }, React.createElement("div", {
     style: {
       paddingTop: props.wideFormat ? '41.15%' : '56.25%'
     }
   }, React.createElement("div", {
-    className: styles$f.inner
+    className: styles$k.inner
   }, React.createElement(Video, Object.assign({}, props, {
     state: onScreen ? 'active' : 'inactive',
     interactive: true
   })))));
 }
 
-var css$h = ".InlineBeforeAfter-module_root__2O9F8 {\n  position: relative;\n  margin: 0 auto;\n}\n";
-var styles$g = {"root":"InlineBeforeAfter-module_root__2O9F8"};
-styleInject(css$h);
+var css$m = ".InlineBeforeAfter-module_root__2O9F8 {\n  position: relative;\n  margin: 0 auto;\n}\n";
+var styles$l = {"root":"InlineBeforeAfter-module_root__2O9F8"};
+styleInject(css$m);
 
 function InlineBeforeAfter(props) {
   var ref = useRef();
   var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
   return React.createElement("div", {
     ref: ref,
-    className: styles$g.root
+    className: styles$l.root
   }, React.createElement(BeforeAfter, Object.assign({}, props, {
     state: onScreen ? 'active' : 'inactive'
   })));
 }
 
-var css$i = ".SoundDisclaimer-module_soundDisclaimer__1sAiH {\n  text-align: center;\n  border: 1px solid white;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: inherit;\n}\n\n.SoundDisclaimer-module_soundDisclaimer__1sAiH:hover {\n  background: rgba(255, 255, 255, 0.25);\n}";
-var styles$h = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__1sAiH"};
-styleInject(css$i);
+var css$n = ".SoundDisclaimer-module_soundDisclaimer__1sAiH {\n  text-align: center;\n  border: 1px solid white;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: inherit;\n}\n\n.SoundDisclaimer-module_soundDisclaimer__1sAiH:hover {\n  background: rgba(255, 255, 255, 0.25);\n}";
+var styles$m = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__1sAiH"};
+styleInject(css$n);
 
 function UnmuteButton() {
   return React.createElement(MutedContext.Consumer, null, function (mutedSettings) {
     return React.createElement("div", {
-      className: classnames(styles$h.soundDisclaimer),
+      className: classnames(styles$m.soundDisclaimer),
       onClick: function onClick() {
         return mutedSettings.setMuted(false);
       }
@@ -2288,16 +2777,16 @@ ForegroundItems.defaultProps = {
   }
 };
 
-var css$j = ".TwoColumn-module_root__37EqL {\n}\n\n.TwoColumn-module_group__3Hg2y {\n  clear: right;\n  margin-left: 8%;\n  margin-right: 8%;\n}\n\n.TwoColumn-module_group-full__2OT4o {\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.TwoColumn-module_sticky__4LCDO,\n.TwoColumn-module_inline__1fPfM {\n  max-width: 500px;\n}\n\n.TwoColumn-module_right__Fr52a .TwoColumn-module_inline__1fPfM {\n  margin-left: auto;\n}\n\n@media (max-width: 949px) {\n  .TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO {\n    margin-left: auto;\n  }\n}\n\n@media (min-width: 950px) {\n  .TwoColumn-module_sticky__4LCDO {\n    position: sticky;\n    float: right;\n    top: 33%;\n    width: 30%;\n    max-width: 600px;\n  }\n\n  .TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO {\n    float: left;\n  }\n}\n";
-var styles$i = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","sticky":"TwoColumn-module_sticky__4LCDO","inline":"TwoColumn-module_inline__1fPfM","right":"TwoColumn-module_right__Fr52a"};
-styleInject(css$j);
+var css$o = ".TwoColumn-module_root__37EqL {\n}\n\n.TwoColumn-module_group__3Hg2y {\n  clear: right;\n  margin-left: 8%;\n  margin-right: 8%;\n}\n\n.TwoColumn-module_group-full__2OT4o {\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.TwoColumn-module_sticky__4LCDO,\n.TwoColumn-module_inline__1fPfM {\n  max-width: 500px;\n}\n\n.TwoColumn-module_right__Fr52a .TwoColumn-module_inline__1fPfM {\n  margin-left: auto;\n}\n\n@media (max-width: 949px) {\n  .TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO {\n    margin-left: auto;\n  }\n}\n\n@media (min-width: 950px) {\n  .TwoColumn-module_sticky__4LCDO {\n    position: sticky;\n    float: right;\n    top: 33%;\n    width: 30%;\n    max-width: 600px;\n  }\n\n  .TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO {\n    float: left;\n  }\n}\n";
+var styles$n = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","sticky":"TwoColumn-module_sticky__4LCDO","inline":"TwoColumn-module_inline__1fPfM","right":"TwoColumn-module_right__Fr52a"};
+styleInject(css$o);
 
 var availablePositions = ['inline', 'sticky', 'full'];
 function TwoColumn(props) {
   return React.createElement("div", {
-    className: classnames(styles$i.root, styles$i[props.align])
+    className: classnames(styles$n.root, styles$n[props.align])
   }, React.createElement("div", {
-    className: styles$i.inline,
+    className: styles$n.inline,
     ref: props.contentAreaRef
   }), renderItems(props));
 }
@@ -2309,7 +2798,7 @@ function renderItems(props) {
   return groupItemsByPosition(props.items).map(function (group, index) {
     return React.createElement("div", {
       key: index,
-      className: classnames(styles$i.group, styles$i["group-".concat(group.position)])
+      className: classnames(styles$n.group, styles$n["group-".concat(group.position)])
     }, renderItemGroup(props, group, 'sticky'), renderItemGroup(props, group, 'inline'), renderItemGroup(props, group, 'full'));
   });
 }
@@ -2317,7 +2806,7 @@ function renderItems(props) {
 function renderItemGroup(props, group, position) {
   if (group[position].length) {
     return React.createElement("div", {
-      className: styles$i[position]
+      className: styles$n[position]
     }, props.children(React.createElement(ForegroundItems, {
       items: group[position]
     })));
@@ -2346,13 +2835,13 @@ function groupItemsByPosition(items) {
   return groups;
 }
 
-var css$k = ".Center-module_outer__3Rr0H {\n  margin-left: 8%;\n  margin-right: 8%;\n}\n\n.Center-module_outer-full__3dknO {\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.Center-module_item__1KSs3 {\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 700px;\n}\n\n.Center-module_item-full__1cEuv {\n  margin-left: 0;\n  margin-right: 0;\n  max-width: none;\n}\n\n@media (min-width: 950px) {\n  .Center-module_inner-left__2z9Ea {\n    float: left;\n    width: 60%;\n    margin-left: -10%;\n    margin-right: 1em;\n    margin-bottom: 1em;\n  }\n\n  .Center-module_inner-right__KBkVt {\n    float: right;\n    width: 60%;\n    margin-right: -10%;\n    margin-left: 1em;\n    margin-bottom: 1em;\n  }\n}\n";
-var styles$j = {"outer":"Center-module_outer__3Rr0H","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-full":"Center-module_item-full__1cEuv","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt"};
-styleInject(css$k);
+var css$p = ".Center-module_outer__3Rr0H {\n  margin-left: 8%;\n  margin-right: 8%;\n}\n\n.Center-module_outer-full__3dknO {\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.Center-module_item__1KSs3 {\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 700px;\n}\n\n.Center-module_item-full__1cEuv {\n  margin-left: 0;\n  margin-right: 0;\n  max-width: none;\n}\n\n@media (min-width: 950px) {\n  .Center-module_inner-left__2z9Ea {\n    float: left;\n    width: 60%;\n    margin-left: -10%;\n    margin-right: 1em;\n    margin-bottom: 1em;\n  }\n\n  .Center-module_inner-right__KBkVt {\n    float: right;\n    width: 60%;\n    margin-right: -10%;\n    margin-left: 1em;\n    margin-bottom: 1em;\n  }\n}\n";
+var styles$o = {"outer":"Center-module_outer__3Rr0H","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-full":"Center-module_item-full__1cEuv","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt"};
+styleInject(css$p);
 
 function Center(props) {
   return React.createElement("div", {
-    className: classnames(styles$j.root)
+    className: classnames(styles$o.root)
   }, React.createElement("div", {
     ref: props.contentAreaRef
   }), React.createElement(ForegroundItems, {
@@ -2360,11 +2849,11 @@ function Center(props) {
   }, function (item, child) {
     return React.createElement("div", {
       key: item.index,
-      className: classnames(styles$j.outer, styles$j["outer-".concat(item.position)])
+      className: classnames(styles$o.outer, styles$o["outer-".concat(item.position)])
     }, React.createElement("div", {
-      className: classnames(styles$j.item, styles$j["item-".concat(item.position)])
+      className: classnames(styles$o.item, styles$o["item-".concat(item.position)])
     }, props.children(React.createElement("div", {
-      className: styles$j["inner-".concat(item.position)]
+      className: styles$o["inner-".concat(item.position)]
     }, child))));
   }));
 }
@@ -2448,75 +2937,79 @@ function useScrollTarget(ref, isScrollTarget) {
   }, [ref, isScrollTarget]);
 }
 
-var css$l = ".Section-module_Section__Yo58b {\n  position: relative;\n}\n\n.Section-module_invert__3_p7F {\n  color: #222;\n}\n\n.Section-module_activityProbe__Fsklh {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 2px;\n  width: 1px;\n}\n";
-var styles$k = {"Section":"Section-module_Section__Yo58b","invert":"Section-module_invert__3_p7F","activityProbe":"Section-module_activityProbe__Fsklh"};
-styleInject(css$l);
+var css$q = ".Section-module_Section__Yo58b {\n  position: relative;\n}\n\n.Section-module_invert__3_p7F {\n  color: #222;\n}\n\n.Section-module_activityProbe__Fsklh {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 2px;\n  width: 1px;\n}\n";
+var styles$p = {"Section":"Section-module_Section__Yo58b","invert":"Section-module_invert__3_p7F","activityProbe":"Section-module_activityProbe__Fsklh"};
+styleInject(css$q);
 
-var css$m = "\n\n.fadeInBgConceal-module_backdrop__11JGO {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInBgConceal-module_backdropInner__1IAYD {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInBgConceal-module_backdrop__11JGO {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgConceal-module_backdrop-below__3E6Uk {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+var css$r = "\n\n.fadeInBgConceal-module_backdrop__11JGO {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInBgConceal-module_backdropInner__1IAYD {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInBgConceal-module_backdrop__11JGO {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgConceal-module_backdrop-below__3E6Uk {\n  opacity: 0;\n  visibility: hidden;\n}\n";
 var fadeInBgConceal = {"fade-duration":"0.5s","backdrop":"fadeInBgConceal-module_backdrop__11JGO","backdropInner":"fadeInBgConceal-module_backdropInner__1IAYD","backdrop-below":"fadeInBgConceal-module_backdrop-below__3E6Uk"};
-styleInject(css$m);
+styleInject(css$r);
 
-var css$n = "\n\n.fadeInBgFadeOut-module_backdrop__r0YXp {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInBgFadeOut-module_backdropInner__IQp87 {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInBgFadeOut-module_backdrop__r0YXp .fadeInBgFadeOut-module_backdropInner__IQp87,\n.fadeInBgFadeOut-module_foreground__Q2vkT {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgFadeOut-module_foreground-above__3pmz9,\n.fadeInBgFadeOut-module_backdrop-below__2G-Ic .fadeInBgFadeOut-module_backdropInner__IQp87 {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInBgFadeOut-module_bbackdrop__1thge::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInBgFadeOut-module_bbackdrop-below__yaeMc::before {\n  visibility: hidden;\n}\n";
+var css$s = "\n\n.fadeInBgFadeOut-module_backdrop__r0YXp {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInBgFadeOut-module_backdropInner__IQp87 {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInBgFadeOut-module_backdrop__r0YXp .fadeInBgFadeOut-module_backdropInner__IQp87,\n.fadeInBgFadeOut-module_foreground__Q2vkT {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgFadeOut-module_foreground-above__3pmz9,\n.fadeInBgFadeOut-module_backdrop-below__2G-Ic .fadeInBgFadeOut-module_backdropInner__IQp87 {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInBgFadeOut-module_bbackdrop__1thge::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInBgFadeOut-module_bbackdrop-below__yaeMc::before {\n  visibility: hidden;\n}\n";
 var fadeInBgFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOut-module_backdrop__r0YXp","backdropInner":"fadeInBgFadeOut-module_backdropInner__IQp87","foreground":"fadeInBgFadeOut-module_foreground__Q2vkT","foreground-above":"fadeInBgFadeOut-module_foreground-above__3pmz9","backdrop-below":"fadeInBgFadeOut-module_backdrop-below__2G-Ic","bbackdrop":"fadeInBgFadeOut-module_bbackdrop__1thge","bbackdrop-below":"fadeInBgFadeOut-module_bbackdrop-below__yaeMc"};
-styleInject(css$n);
+styleInject(css$s);
 
-var css$o = "\n\n.fadeInBgFadeOutBg-module_backdrop__15ocl {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInBgFadeOutBg-module_boxShadow__xUKyj,\n.fadeInBgFadeOutBg-module_backdrop__15ocl .fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgFadeOutBg-module_boxShadow-above__2bY0E,\n.fadeInBgFadeOutBg-module_backdrop-below__1rDT6 .fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInBgFadeOutBg-module_bbackdrop__25Ux-::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInBgFadeOutBg-module_bbackdrop-below__2MPgj::before {\n  visibility: hidden;\n}\n";
+var css$t = "\n\n.fadeInBgFadeOutBg-module_backdrop__15ocl {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInBgFadeOutBg-module_boxShadow__xUKyj,\n.fadeInBgFadeOutBg-module_backdrop__15ocl .fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgFadeOutBg-module_boxShadow-above__2bY0E,\n.fadeInBgFadeOutBg-module_backdrop-below__1rDT6 .fadeInBgFadeOutBg-module_backdropInner__sAnz6 {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInBgFadeOutBg-module_bbackdrop__25Ux-::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInBgFadeOutBg-module_bbackdrop-below__2MPgj::before {\n  visibility: hidden;\n}\n";
 var fadeInBgFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOutBg-module_backdrop__15ocl","backdropInner":"fadeInBgFadeOutBg-module_backdropInner__sAnz6","boxShadow":"fadeInBgFadeOutBg-module_boxShadow__xUKyj","boxShadow-above":"fadeInBgFadeOutBg-module_boxShadow-above__2bY0E","backdrop-below":"fadeInBgFadeOutBg-module_backdrop-below__1rDT6","bbackdrop":"fadeInBgFadeOutBg-module_bbackdrop__25Ux-","bbackdrop-below":"fadeInBgFadeOutBg-module_bbackdrop-below__2MPgj"};
-styleInject(css$o);
+styleInject(css$t);
 
-var css$p = "\n\n.fadeInBgScrollOut-module_backdrop__1bSsb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.fadeInBgScrollOut-module_backdropInner__3JZBG {\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInBgScrollOut-module_backdropInner2__q-00L {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInBgScrollOut-module_foreground__1ODH9 {\n  min-height: 100vh;\n}\n\n.fadeInBgScrollOut-module_backdrop__1bSsb {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgScrollOut-module_backdrop-below__2Dbkr {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+var css$u = "\n\n.fadeInBgScrollOut-module_backdrop__1bSsb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.fadeInBgScrollOut-module_backdropInner__3JZBG {\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInBgScrollOut-module_backdropInner2__q-00L {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInBgScrollOut-module_foreground__1ODH9 {\n  min-height: 100vh;\n}\n\n.fadeInBgScrollOut-module_backdrop__1bSsb {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInBgScrollOut-module_backdrop-below__2Dbkr {\n  opacity: 0;\n  visibility: hidden;\n}\n";
 var fadeInBgScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInBgScrollOut-module_backdrop__1bSsb","backdropInner":"fadeInBgScrollOut-module_backdropInner__3JZBG","backdropInner2":"fadeInBgScrollOut-module_backdropInner2__q-00L","foreground":"fadeInBgScrollOut-module_foreground__1ODH9","backdrop-below":"fadeInBgScrollOut-module_backdrop-below__2Dbkr"};
-styleInject(css$p);
+styleInject(css$u);
 
-var css$q = "\n\n.fadeInConceal-module_backdrop__1zaRO {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInConceal-module_backdropInner__1AIvq {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInConceal-module_backdrop__1zaRO,\n.fadeInConceal-module_foreground__3giM9 {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInConceal-module_backdrop-below__AWyQe,\n.fadeInConceal-module_foreground-below__2z5Op {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+var css$v = "\n\n.fadeInConceal-module_backdrop__1zaRO {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInConceal-module_backdropInner__1AIvq {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInConceal-module_backdrop__1zaRO,\n.fadeInConceal-module_foreground__3giM9 {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInConceal-module_backdrop-below__AWyQe,\n.fadeInConceal-module_foreground-below__2z5Op {\n  opacity: 0;\n  visibility: hidden;\n}\n";
 var fadeInConceal = {"fade-duration":"0.5s","backdrop":"fadeInConceal-module_backdrop__1zaRO","backdropInner":"fadeInConceal-module_backdropInner__1AIvq","foreground":"fadeInConceal-module_foreground__3giM9","backdrop-below":"fadeInConceal-module_backdrop-below__AWyQe","foreground-below":"fadeInConceal-module_foreground-below__2z5Op"};
-styleInject(css$q);
+styleInject(css$v);
 
-var css$r = "\n\n.fadeInFadeOut-module_backdrop__Y4xOA {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInFadeOut-module_backdropInner__1oRfP {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInFadeOut-module_backdrop__Y4xOA .fadeInFadeOut-module_backdropInner__1oRfP,\n.fadeInFadeOut-module_foreground__1eleZ {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInFadeOut-module_foreground-above__249wa,\n.fadeInFadeOut-module_backdrop-below__1h2I4 .fadeInFadeOut-module_backdropInner__1oRfP,\n.fadeInFadeOut-module_foreground-below__3mE6f {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInFadeOut-module_bbackdrop__WJjFl::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInFadeOut-module_bbackdrop-below__1Htkz::before {\n  visibility: hidden;\n}\n";
+var css$w = "\n\n.fadeInFadeOut-module_backdrop__Y4xOA {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInFadeOut-module_backdropInner__1oRfP {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInFadeOut-module_backdrop__Y4xOA .fadeInFadeOut-module_backdropInner__1oRfP,\n.fadeInFadeOut-module_foreground__1eleZ {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInFadeOut-module_foreground-above__249wa,\n.fadeInFadeOut-module_backdrop-below__1h2I4 .fadeInFadeOut-module_backdropInner__1oRfP,\n.fadeInFadeOut-module_foreground-below__3mE6f {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInFadeOut-module_bbackdrop__WJjFl::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInFadeOut-module_bbackdrop-below__1Htkz::before {\n  visibility: hidden;\n}\n";
 var fadeInFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInFadeOut-module_backdrop__Y4xOA","backdropInner":"fadeInFadeOut-module_backdropInner__1oRfP","foreground":"fadeInFadeOut-module_foreground__1eleZ","foreground-above":"fadeInFadeOut-module_foreground-above__249wa","backdrop-below":"fadeInFadeOut-module_backdrop-below__1h2I4","foreground-below":"fadeInFadeOut-module_foreground-below__3mE6f","bbackdrop":"fadeInFadeOut-module_bbackdrop__WJjFl","bbackdrop-below":"fadeInFadeOut-module_bbackdrop-below__1Htkz"};
-styleInject(css$r);
+styleInject(css$w);
 
-var css$s = "\n\n.fadeInFadeOutBg-module_backdrop__2-IF3 {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInFadeOutBg-module_backdropInner__3r_bo {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInFadeOutBg-module_backdrop__2-IF3 .fadeInFadeOutBg-module_backdropInner__3r_bo,\n.fadeInFadeOutBg-module_boxShadow__3x7Ki,\n.fadeInFadeOutBg-module_foreground__24f_M {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInFadeOutBg-module_backdrop-below__4Ys_2 .fadeInFadeOutBg-module_backdropInner__3r_bo,\n.fadeInFadeOutBg-module_boxShadow-above__3T2K5,\n.fadeInFadeOutBg-module_foreground-below__3pTRc {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInFadeOutBg-module_bbackdrop__MVdvw::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInFadeOutBg-module_bbackdrop-below__30mpF::before {\n  visibility: hidden;\n}\n";
+var css$x = "\n\n.fadeInFadeOutBg-module_backdrop__2-IF3 {\n  position: absolute;\n  height: 100%;\n}\n\n.fadeInFadeOutBg-module_backdropInner__3r_bo {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n}\n\n.fadeInFadeOutBg-module_backdrop__2-IF3 .fadeInFadeOutBg-module_backdropInner__3r_bo,\n.fadeInFadeOutBg-module_boxShadow__3x7Ki,\n.fadeInFadeOutBg-module_foreground__24f_M {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInFadeOutBg-module_backdrop-below__4Ys_2 .fadeInFadeOutBg-module_backdropInner__3r_bo,\n.fadeInFadeOutBg-module_boxShadow-above__3T2K5,\n.fadeInFadeOutBg-module_foreground-below__3pTRc {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.fadeInFadeOutBg-module_bbackdrop__MVdvw::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.fadeInFadeOutBg-module_bbackdrop-below__30mpF::before {\n  visibility: hidden;\n}\n";
 var fadeInFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInFadeOutBg-module_backdrop__2-IF3","backdropInner":"fadeInFadeOutBg-module_backdropInner__3r_bo","boxShadow":"fadeInFadeOutBg-module_boxShadow__3x7Ki","foreground":"fadeInFadeOutBg-module_foreground__24f_M","backdrop-below":"fadeInFadeOutBg-module_backdrop-below__4Ys_2","boxShadow-above":"fadeInFadeOutBg-module_boxShadow-above__3T2K5","foreground-below":"fadeInFadeOutBg-module_foreground-below__3pTRc","bbackdrop":"fadeInFadeOutBg-module_bbackdrop__MVdvw","bbackdrop-below":"fadeInFadeOutBg-module_bbackdrop-below__30mpF"};
-styleInject(css$s);
+styleInject(css$x);
 
-var css$t = "\n\n.fadeInScrollOut-module_backdrop__2FhBb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.fadeInScrollOut-module_backdropInner__1OfNZ {\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInScrollOut-module_backdropInner2__5bNPT {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInScrollOut-module_foreground__3h0EX {\n  min-height: 100vh;\n}\n\n.fadeInScrollOut-module_backdrop__2FhBb,\n.fadeInScrollOut-module_foreground__3h0EX {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInScrollOut-module_backdrop-below__3cRLH,\n.fadeInScrollOut-module_foreground-below__1Jcql {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+var css$y = "\n\n.fadeInScrollOut-module_backdrop__2FhBb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.fadeInScrollOut-module_backdropInner__1OfNZ {\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInScrollOut-module_backdropInner2__5bNPT {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.fadeInScrollOut-module_foreground__3h0EX {\n  min-height: 100vh;\n}\n\n.fadeInScrollOut-module_backdrop__2FhBb,\n.fadeInScrollOut-module_foreground__3h0EX {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.fadeInScrollOut-module_backdrop-below__3cRLH,\n.fadeInScrollOut-module_foreground-below__1Jcql {\n  opacity: 0;\n  visibility: hidden;\n}\n";
 var fadeInScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInScrollOut-module_backdrop__2FhBb","backdropInner":"fadeInScrollOut-module_backdropInner__1OfNZ","backdropInner2":"fadeInScrollOut-module_backdropInner2__5bNPT","foreground":"fadeInScrollOut-module_foreground__3h0EX","backdrop-below":"fadeInScrollOut-module_backdrop-below__3cRLH","foreground-below":"fadeInScrollOut-module_foreground-below__1Jcql"};
-styleInject(css$t);
+styleInject(css$y);
 
-var css$u = ".revealConceal-module_backdrop__dLUhU {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  height: 100%;\n}\n\n.revealConceal-module_backdropInner__2k1Z- {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n";
+var css$z = ".revealConceal-module_backdrop__dLUhU {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  height: 100%;\n}\n\n.revealConceal-module_backdropInner__2k1Z- {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n";
 var revealConceal = {"backdrop":"revealConceal-module_backdrop__dLUhU","backdropInner":"revealConceal-module_backdropInner__2k1Z-"};
-styleInject(css$u);
+styleInject(css$z);
 
-var css$v = "\n\n.revealFadeOut-module_backdrop___Q1QF {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  height: 200%;\n}\n\n.revealFadeOut-module_backdropInner__17qRn {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n.revealFadeOut-module_foreground__1GzBs {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.revealFadeOut-module_foreground-above__3GxOf {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+var css$A = "\n\n.revealFadeOut-module_backdrop___Q1QF {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  height: 200%;\n}\n\n.revealFadeOut-module_backdropInner__17qRn {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n.revealFadeOut-module_foreground__1GzBs {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.revealFadeOut-module_foreground-above__3GxOf {\n  opacity: 0;\n  visibility: hidden;\n}\n";
 var revealFadeOut = {"fade-duration":"0.5s","backdrop":"revealFadeOut-module_backdrop___Q1QF","backdropInner":"revealFadeOut-module_backdropInner__17qRn","foreground":"revealFadeOut-module_foreground__1GzBs","foreground-above":"revealFadeOut-module_foreground-above__3GxOf"};
-styleInject(css$v);
+styleInject(css$A);
 
-var css$w = "\n\n.revealFadeOutBg-module_backdrop__30OCF {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  height: 200%;\n}\n\n.revealFadeOutBg-module_backdropInner__3v3tM {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n.revealFadeOutBg-module_boxShadow__1NZRz {\n  transition: opacity 1s ease, visibility 1s;\n}\n\n.revealFadeOutBg-module_boxShadow-above__2r4ov {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+var css$B = "\n\n.revealFadeOutBg-module_backdrop__30OCF {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  height: 200%;\n}\n\n.revealFadeOutBg-module_backdropInner__3v3tM {\n  position: fixed;\n  top: 0;\n  height: 100vh;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n.revealFadeOutBg-module_boxShadow__1NZRz {\n  transition: opacity 1s ease, visibility 1s;\n}\n\n.revealFadeOutBg-module_boxShadow-above__2r4ov {\n  opacity: 0;\n  visibility: hidden;\n}\n";
 var revealFadeOutBg = {"fade-duration":"0.5s","backdrop":"revealFadeOutBg-module_backdrop__30OCF","backdropInner":"revealFadeOutBg-module_backdropInner__3v3tM","boxShadow":"revealFadeOutBg-module_boxShadow__1NZRz","boxShadow-above":"revealFadeOutBg-module_boxShadow-above__2r4ov"};
-styleInject(css$w);
+styleInject(css$B);
 
-var css$x = ".revealScrollOut-module_backdrop__2yOXd {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  top: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.revealScrollOut-module_backdropInner__211p3 {\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n.revealScrollOut-module_backdropInner2__v6WqM {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.revealScrollOut-module_foreground__3z-hw {\n}\n";
+var css$C = ".revealScrollOut-module_backdrop__2yOXd {\n  position: absolute;\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\n  top: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.revealScrollOut-module_backdropInner__211p3 {\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n.revealScrollOut-module_backdropInner2__v6WqM {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n\n.revealScrollOut-module_foreground__3z-hw {\n}\n";
 var revealScrollOut = {"backdrop":"revealScrollOut-module_backdrop__2yOXd","backdropInner":"revealScrollOut-module_backdropInner__211p3","backdropInner2":"revealScrollOut-module_backdropInner2__v6WqM","foreground":"revealScrollOut-module_foreground__3z-hw"};
-styleInject(css$x);
+styleInject(css$C);
 
-var css$y = ".scrollInConceal-module_backdrop__2OJJC {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n";
+var css$D = ".scrollInConceal-module_backdrop__2OJJC {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n";
 var scrollInConceal = {"backdrop":"scrollInConceal-module_backdrop__2OJJC"};
-styleInject(css$y);
+styleInject(css$D);
 
-var css$z = "\n\n.scrollInFadeOut-module_backdrop__1vXJd {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n\n.scrollInFadeOut-module_foreground__3Ikxb {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.scrollInFadeOut-module_foreground-above__6ipm- {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.scrollInFadeOut-module_bbackdrop__2C-bf::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.scrollInFadeOut-module_bbackdrop-below__3tq0M::before {\n  visibility: hidden;\n}\n";
+var css$E = "\n\n.scrollInFadeOut-module_backdrop__1vXJd {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n\n.scrollInFadeOut-module_foreground__3Ikxb {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.scrollInFadeOut-module_foreground-above__6ipm- {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.scrollInFadeOut-module_bbackdrop__2C-bf::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.scrollInFadeOut-module_bbackdrop-below__3tq0M::before {\n  visibility: hidden;\n}\n";
 var scrollInFadeOut = {"fade-duration":"0.5s","backdrop":"scrollInFadeOut-module_backdrop__1vXJd","foreground":"scrollInFadeOut-module_foreground__3Ikxb","foreground-above":"scrollInFadeOut-module_foreground-above__6ipm-","bbackdrop":"scrollInFadeOut-module_bbackdrop__2C-bf","bbackdrop-below":"scrollInFadeOut-module_bbackdrop-below__3tq0M"};
-styleInject(css$z);
+styleInject(css$E);
 
-var css$A = "\n\n.scrollInFadeOutBg-module_backdrop__zw95c {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n\n.scrollInFadeOutBg-module_boxShadow__3UxCQ {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.scrollInFadeOutBg-module_boxShadow-above__3kfau {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.scrollInFadeOutBg-module_bbackdrop__2pO9o::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.scrollInFadeOutBg-module_bbackdrop-below__1Ky2w::before {\n  visibility: hidden;\n}\n";
+var css$F = "\n\n.scrollInFadeOutBg-module_backdrop__zw95c {\n  position: sticky;\n  top: 0;\n  height: 0;\n}\n\n.scrollInFadeOutBg-module_boxShadow__3UxCQ {\n  transition: opacity 0.5s ease, visibility 0.5s;\n}\n\n.scrollInFadeOutBg-module_boxShadow-above__3kfau {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.scrollInFadeOutBg-module_bbackdrop__2pO9o::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: #000;\n}\n\n.scrollInFadeOutBg-module_bbackdrop-below__1Ky2w::before {\n  visibility: hidden;\n}\n";
 var scrollInFadeOutBg = {"fade-duration":"0.5s","backdrop":"scrollInFadeOutBg-module_backdrop__zw95c","boxShadow":"scrollInFadeOutBg-module_boxShadow__3UxCQ","boxShadow-above":"scrollInFadeOutBg-module_boxShadow-above__3kfau","bbackdrop":"scrollInFadeOutBg-module_bbackdrop__2pO9o","bbackdrop-below":"scrollInFadeOutBg-module_bbackdrop-below__1Ky2w"};
-styleInject(css$A);
+styleInject(css$F);
 
-var css$B = ".scrollInScrollOut-module_backdrop__XzCge {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n}\n\n.scrollInScrollOut-module_foreground__1yyY8 {\n  margin-top: -100vh;\n}\n";
+var css$G = ".scrollInScrollOut-module_backdrop__XzCge {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n}\n\n.scrollInScrollOut-module_foreground__1yyY8 {\n  margin-top: -100vh;\n}\n";
 var scrollInScrollOut = {"backdrop":"scrollInScrollOut-module_backdrop__XzCge","foreground":"scrollInScrollOut-module_foreground__1yyY8"};
-styleInject(css$B);
+styleInject(css$G);
+
+var css$H = ".previewScrollOut-module_scene__W9bDl {\n  height: 100%;\n}\n\n.previewScrollOut-module_backdrop__2-Bl_ {\n  position: absolute;\n  top: 0;\n}\n";
+var previewScrollOut = {"scene":"previewScrollOut-module_scene__W9bDl","backdrop":"previewScrollOut-module_backdrop__2-Bl_"};
+styleInject(css$H);
 
-var styles$l = {
+var styles$q = {
   fadeInBgConceal: fadeInBgConceal,
   fadeInBgFadeOut: fadeInBgFadeOut,
   fadeInBgFadeOutBg: fadeInBgFadeOutBg,
@@ -2532,7 +3025,8 @@ var styles$l = {
   scrollInConceal: scrollInConceal,
   scrollInFadeOut: scrollInFadeOut,
   scrollInFadeOutBg: scrollInFadeOutBg,
-  scrollInScrollOut: scrollInScrollOut
+  scrollInScrollOut: scrollInScrollOut,
+  previewScrollOut: previewScrollOut
 };
 var enterTransitions = {
   fade: 'fadeIn',
@@ -2540,7 +3034,8 @@ var enterTransitions = {
   scroll: 'scrollIn',
   scrollOver: 'scrollIn',
   reveal: 'reveal',
-  beforeAfter: 'reveal'
+  beforeAfter: 'reveal',
+  preview: 'preview'
 };
 var exitTransitions = {
   fade: 'fadeOut',
@@ -2555,11 +3050,11 @@ function getTransitionStyles(section, previousSection, nextSection) {
   var exitTransition = exitTransitions[nextSection ? nextSection.transition : 'scroll'];
   var name = "".concat(enterTransition).concat(capitalize(exitTransition));
 
-  if (!styles$l[name]) {
+  if (!styles$q[name]) {
     throw new Error("Unknown transition ".concat(name));
   }
 
-  return styles$l[name];
+  return styles$q[name];
 }
 
 function capitalize(string) {
@@ -2570,18 +3065,18 @@ function NoOpShadow(props) {
   return React.createElement("div", null, props.children);
 }
 
-var css$C = ".GradientShadow-module_shadow__2UiDH {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  z-index: 1;\n  transition: opacity 1s ease;\n}\n\n.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadow__2UiDH,\n.GradientShadow-module_align-left__3qcNM .GradientShadow-module_shadow__2UiDH {\n  background: linear-gradient(to right, #000 0%,rgba(0, 0, 0, 0) 100%);\n}\n\n@media (min-width: 950px) {\n  .GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadow__2UiDH {\n    background: linear-gradient(to left, #000 0%,rgba(0, 0, 0, 0) 100%);\n  }\n}\n\n.GradientShadow-module_intersecting__h6vpz .GradientShadow-module_shadow__2UiDH,\n.GradientShadow-module_align-center__2C7cl .GradientShadow-module_shadow__2UiDH {\n  background: #000;\n}\n";
-var styles$m = {"shadow":"GradientShadow-module_shadow__2UiDH","align-right":"GradientShadow-module_align-right__3iXZs","align-left":"GradientShadow-module_align-left__3qcNM","intersecting":"GradientShadow-module_intersecting__h6vpz","align-center":"GradientShadow-module_align-center__2C7cl"};
-styleInject(css$C);
+var css$I = ".GradientShadow-module_shadow__2UiDH {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  z-index: 1;\n  transition: opacity 1s ease;\n}\n\n.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadow__2UiDH,\n.GradientShadow-module_align-left__3qcNM .GradientShadow-module_shadow__2UiDH {\n  background: linear-gradient(to right, #000 0%,rgba(0, 0, 0, 0) 100%);\n}\n\n@media (min-width: 950px) {\n  .GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadow__2UiDH {\n    background: linear-gradient(to left, #000 0%,rgba(0, 0, 0, 0) 100%);\n  }\n}\n\n.GradientShadow-module_intersecting__h6vpz .GradientShadow-module_shadow__2UiDH,\n.GradientShadow-module_align-center__2C7cl .GradientShadow-module_shadow__2UiDH {\n  background: #000;\n}\n";
+var styles$r = {"shadow":"GradientShadow-module_shadow__2UiDH","align-right":"GradientShadow-module_align-right__3iXZs","align-left":"GradientShadow-module_align-left__3qcNM","intersecting":"GradientShadow-module_intersecting__h6vpz","align-center":"GradientShadow-module_align-center__2C7cl"};
+styleInject(css$I);
 
 function GradientShadow(props) {
   var maxOpacityOverlap = props.motifAreaRect.height / 2;
   var motifAreaOverlap = Math.min(maxOpacityOverlap, props.motifAreaRect.bottom - props.contentAreaRect.top);
   var opacityFactor = props.intersecting && props.motifAreaRect.height > 0 ? motifAreaOverlap / maxOpacityOverlap : 1;
   return React.createElement("div", {
-    className: classnames(styles$m.root, styles$m["align-".concat(props.align)], _defineProperty({}, styles$m.intersecting, props.intersecting))
+    className: classnames(styles$r.root, styles$r["align-".concat(props.align)], _defineProperty({}, styles$r.intersecting, props.intersecting))
   }, React.createElement("div", {
-    className: styles$m.shadow,
+    className: styles$r.shadow,
     style: {
       opacity: props.opacity * Math.round(opacityFactor * 10) / 10
     }
@@ -2596,38 +3091,38 @@ function NoOpBoxWrapper(props) {
   return React.createElement("div", null, props.children);
 }
 
-var css$D = ".GradientBox-module_wrapper__1Jj7N {\n  padding-bottom: 50px;\n}\n\n.GradientBox-module_shadow__2XilX {\n  --background: rgba(0, 0, 0, 0.7);\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.GradientBox-module_long__10s6v .GradientBox-module_shadow__2XilX {\n  bottom: -100vh;\n}\n\n.GradientBox-module_gradient__31tJ- {\n  text-shadow: 0px 1px 5px black;\n}\n\n.GradientBox-module_gradient__31tJ- .GradientBox-module_shadow__2XilX {\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px,rgba(0, 0, 0, 0.3) 100px,rgba(0, 0, 0, 0.3) 100%);\n}\n\n.GradientBox-module_content__96lDk {\n  position: relative;\n}\n";
-var styles$n = {"wrapper":"GradientBox-module_wrapper__1Jj7N","shadow":"GradientBox-module_shadow__2XilX","long":"GradientBox-module_long__10s6v","gradient":"GradientBox-module_gradient__31tJ-","content":"GradientBox-module_content__96lDk"};
-styleInject(css$D);
+var css$J = ".GradientBox-module_wrapper__1Jj7N {\n  padding-bottom: 50px;\n}\n\n.GradientBox-module_shadow__2XilX {\n  --background: rgba(0, 0, 0, 0.7);\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.GradientBox-module_long__10s6v .GradientBox-module_shadow__2XilX {\n  bottom: -100vh;\n}\n\n.GradientBox-module_gradient__31tJ- {\n  text-shadow: 0px 1px 5px black;\n}\n\n.GradientBox-module_gradient__31tJ- .GradientBox-module_shadow__2XilX {\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px,rgba(0, 0, 0, 0.3) 100px,rgba(0, 0, 0, 0.3) 100%);\n}\n\n.GradientBox-module_content__96lDk {\n  position: relative;\n}\n";
+var styles$s = {"wrapper":"GradientBox-module_wrapper__1Jj7N","shadow":"GradientBox-module_shadow__2XilX","long":"GradientBox-module_long__10s6v","gradient":"GradientBox-module_gradient__31tJ-","content":"GradientBox-module_content__96lDk"};
+styleInject(css$J);
 
 function GradientBox(props) {
   var _classNames;
 
   var padding = props.active ? props.padding : 0;
   return React.createElement("div", {
-    className: classnames(styles$n.root, (_classNames = {}, _defineProperty(_classNames, styles$n.gradient, padding > 0), _defineProperty(_classNames, styles$n["long"], props.coverInvisibleNextSection), _classNames)),
+    className: classnames(styles$s.root, (_classNames = {}, _defineProperty(_classNames, styles$s.gradient, padding > 0), _defineProperty(_classNames, styles$s["long"], props.coverInvisibleNextSection), _classNames)),
     style: {
       paddingTop: padding
     }
   }, React.createElement("div", {
-    className: styles$n.wrapper
+    className: styles$s.wrapper
   }, React.createElement("div", {
-    className: classnames(styles$n.shadow, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
+    className: classnames(styles$s.shadow, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
     style: {
       top: padding,
       opacity: props.opacity
     }
   }), React.createElement("div", {
-    className: styles$n.content
+    className: styles$s.content
   }, props.children)));
 }
 GradientBox.defaultProps = {
   opacity: 1
 };
 
-var css$E = ".CardBox-module_wrapper__3vnaH {\n}\n\n.CardBox-module_content__36v7J {\n  position: relative;\n}\n";
-var styles$o = {"wrapper":"CardBox-module_wrapper__3vnaH","content":"CardBox-module_content__36v7J"};
-styleInject(css$E);
+var css$K = ".CardBox-module_wrapper__3vnaH {\n}\n\n.CardBox-module_content__36v7J {\n  position: relative;\n}\n";
+var styles$t = {"wrapper":"CardBox-module_wrapper__3vnaH","content":"CardBox-module_content__36v7J"};
+styleInject(css$K);
 
 function CardBox(props) {
   var padding = props.active ? props.padding : 0;
@@ -2636,23 +3131,23 @@ function CardBox(props) {
       paddingTop: padding
     }
   }, React.createElement("div", {
-    className: styles$o.wrapper
+    className: styles$t.wrapper
   }, React.createElement("div", {
     style: {
       top: padding
     }
   }), React.createElement("div", {
-    className: styles$o.content
+    className: styles$t.content
   }, props.children)));
 }
 
-var css$F = ".CardBoxWrapper-module_cardBg__154o2 {\n  background: white;\n  color: black;\n  padding: 4%;\n  margin: 0 -4% 50px 0;\n  border-radius: 15px;\n  opacity: 1;\n}\n";
-var styles$p = {"cardBg":"CardBoxWrapper-module_cardBg__154o2"};
-styleInject(css$F);
+var css$L = ".CardBoxWrapper-module_cardBg__154o2 {\n  background: white;\n  color: black;\n  padding: 4%;\n  margin: 0 -4% 50px 0;\n  border-radius: 15px;\n  opacity: 1;\n}\n";
+var styles$u = {"cardBg":"CardBoxWrapper-module_cardBg__154o2"};
+styleInject(css$L);
 
 function CardBoxWrapper(props) {
   return React.createElement("div", {
-    className: styles$p.cardBg
+    className: styles$u.cardBg
   }, props.children);
 }
 
@@ -2716,11 +3211,12 @@ function Section(props) {
   var Box = appearance.foreground;
   var BoxWrapper = appearance.foregroundWrapper;
   return React.createElement("section", {
+    id: "section-".concat(props.permaId),
     ref: ref,
-    className: classnames(styles$k.Section, transitionStyles.section, _defineProperty({}, styles$k.invert, props.invert))
+    className: classnames(styles$p.Section, transitionStyles.section, _defineProperty({}, styles$p.invert, props.invert))
   }, React.createElement("div", {
     ref: activityProbeRef,
-    className: styles$k.activityProbe
+    className: styles$p.activityProbe
   }), React.createElement(Backdrop, Object.assign({}, props.backdrop, {
     motifAreaRef: setMotifAreaRefs,
     onScreen: onScreen,
@@ -2804,15 +3300,15 @@ function renderSections(sections, currentSectionIndex, setCurrentSectionIndex, s
   });
 }
 
-var css$G = "\n\n.Entry-module_Entry__1nDGh {\n  font-family: 'Source Sans Pro', sans-serif;\n  background-color: #000;\n  color: #fff;\n}\n\n.Entry-module_exampleSelect__1uAJs {\n  position: absolute;\n  top: 5px;\n  left: 50%;\n  z-index: 10;\n  transform: translateX(-50%);\n}\n";
-var styles$q = {"font-sans":"'Source Sans Pro', sans-serif","Entry":"Entry-module_Entry__1nDGh","exampleSelect":"Entry-module_exampleSelect__1uAJs"};
-styleInject(css$G);
+var css$M = "\n\n.Entry-module_Entry__1nDGh {\n  font-family: 'Source Sans Pro', sans-serif;\n  background-color: #000;\n  color: #fff;\n}\n\n.Entry-module_exampleSelect__1uAJs {\n  position: absolute;\n  top: 5px;\n  left: 50%;\n  z-index: 10;\n  transform: translateX(-50%);\n}\n";
+var styles$v = {"font-sans":"'Source Sans Pro', sans-serif","Entry":"Entry-module_Entry__1nDGh","exampleSelect":"Entry-module_exampleSelect__1uAJs"};
+styleInject(css$M);
 
 function Entry(props) {
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
       currentSectionIndex = _useState2[0],
-      setCurrentSectionIndex = _useState2[1];
+      setCurrentSectionIndexState = _useState2[1];
 
   var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -2826,6 +3322,18 @@ function Entry(props) {
 
   var dispatch = useEntryStateDispatch();
   var entryStructure = useEntryStructure();
+  var setCurrentSectionIndex = useCallback(function (index) {
+    if (window.parent) {
+      window.parent.postMessage({
+        type: 'CHANGE_SECTION',
+        payload: {
+          index: index
+        }
+      }, window.location.origin);
+    }
+
+    setCurrentSectionIndexState(index);
+  }, [setCurrentSectionIndexState]);
   useEffect(function () {
     if (window.parent) {
       window.addEventListener('message', receive);
@@ -2839,8 +3347,12 @@ function Entry(props) {
     };
 
     function receive(message) {
-      if (window.location.href.indexOf(message.origin) === 0 && message.data.type === 'ACTION') {
-        dispatch(message.data.payload);
+      if (window.location.href.indexOf(message.origin) === 0) {
+        if (message.data.type === 'ACTION') {
+          dispatch(message.data.payload);
+        } else if (message.data.type === 'SCROLL_TO_SECTION') {
+          setScrollTargetSectionIndex(message.data.payload.index);
+        }
       }
     }
   }, [dispatch]);
@@ -2854,7 +3366,7 @@ function Entry(props) {
   }
 
   return React.createElement("div", {
-    className: styles$q.Entry
+    className: styles$v.Entry
   }, React.createElement(MutedContext.Provider, {
     value: {
       muted: muted,
@@ -2879,8 +3391,8 @@ function renderChapters(entryStructure, currentSectionIndex, setCurrentSectionIn
   });
 }
 
-var css$H = "body {\n  margin: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n";
-styleInject(css$H);
+var css$N = "body {\n  margin: 0;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n";
+styleInject(css$N);
 
 function Root() {
   return React.createElement(React.Fragment, null, React.createElement(EntryStateProvider, {