diff --git a/composer.json b/composer.json
index 5d076db..7a54af3 100644
--- a/composer.json
+++ b/composer.json
@@ -32,11 +32,13 @@
         "drupal/computed_field": "^2.0@beta",
         "drupal/config_split": "^1.4",
         "drupal/console": "^1.0.2",
+        "drupal/consumer_image_styles": "3.x-dev",
         "drupal/core": "^8.7.1",
         "drupal/entity_clone": "^1.0",
         "drupal/error_log": "^1.0",
         "drupal/genpass": "1.x-dev",
         "drupal/image_delta_formatter": "1.x-dev",
+        "drupal/jsonapi_extras": "^3.7",
         "drupal/jsonrpc": "1.x-dev",
         "drupal/login_history": "1.x-dev",
         "drupal/mailgun": "1.x-dev",
diff --git a/composer.lock b/composer.lock
index 568e970..d797002 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "659326ced02c2fe78453f4b0f66d7e4e",
+    "content-hash": "e67674c8f819a51a74785fddb76fb1d5",
     "packages": [
         {
             "name": "alchemy/zippy",
@@ -4774,6 +4774,99 @@
             "description": "Drupal Console Extend Plugin",
             "time": "2017-07-28T17:11:54+00:00"
         },
+        {
+            "name": "drupal/consumer_image_styles",
+            "version": "dev-3.x",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/consumer_image_styles.git",
+                "reference": "dde88d03caf59911eab3a744d90975bb119ce03c"
+            },
+            "require": {
+                "drupal/consumers": "^1.2",
+                "drupal/core": "*",
+                "drupal/jsonapi": "*",
+                "drupal/jsonapi_extras": "^3.3"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "branch-alias": {
+                    "dev-3.x": "3.x-dev"
+                },
+                "drupal": {
+                    "version": "8.x-3.0-rc2+0-dev",
+                    "datestamp": "1556657885",
+                    "security-coverage": {
+                        "status": "not-covered",
+                        "message": "Dev releases are not covered by Drupal security advisories."
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0+"
+            ],
+            "authors": [
+                {
+                    "name": "Mateu Aguiló Bosch",
+                    "homepage": "https://www.drupal.org/user/550110",
+                    "email": "mateu.aguilo.bosch@gmail.com"
+                }
+            ],
+            "description": "Consumer Image Styles integrates with JSON API to provide image styles to your images in your decoupled project.",
+            "homepage": "https://www.drupal.org/project/consumer_image_styles",
+            "support": {
+                "source": "https://git.drupalcode.org/project/consumer_image_styles"
+            },
+            "time": "2019-04-30T20:55:34+00:00"
+        },
+        {
+            "name": "drupal/consumers",
+            "version": "1.9.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/consumers.git",
+                "reference": "8.x-1.9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/consumers-8.x-1.9.zip",
+                "reference": "8.x-1.9",
+                "shasum": "c0fbff0b88da87ae5d5c980f4c9aed15db4301f6"
+            },
+            "require": {
+                "drupal/core": "*"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "branch-alias": {
+                    "dev-1.x": "1.x-dev"
+                },
+                "drupal": {
+                    "version": "8.x-1.9",
+                    "datestamp": "1549832280",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "e0ipso",
+                    "homepage": "https://www.drupal.org/user/550110"
+                }
+            ],
+            "description": "Declare all the consumers of your API",
+            "homepage": "https://www.drupal.org/project/consumers",
+            "support": {
+                "source": "https://git.drupalcode.org/project/consumers"
+            }
+        },
         {
             "name": "drupal/content_lock",
             "version": "1.0.0-alpha8",
@@ -6949,6 +7042,67 @@
                 "source": "https://git.drupalcode.org/project/interval"
             }
         },
+        {
+            "name": "drupal/jsonapi_extras",
+            "version": "3.7.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/jsonapi_extras.git",
+                "reference": "8.x-3.7"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/jsonapi_extras-8.x-3.7.zip",
+                "reference": "8.x-3.7",
+                "shasum": "9987918f7b8a814de267231006f25cff2eb7cb26"
+            },
+            "require": {
+                "drupal/core": "~8.0",
+                "drupal/jsonapi": "*",
+                "e0ipso/shaper": "^1"
+            },
+            "require-dev": {
+                "drupal/jsonapi": "*"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "branch-alias": {
+                    "dev-3.x": "3.x-dev"
+                },
+                "drupal": {
+                    "version": "8.x-3.7",
+                    "datestamp": "1558388885",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0+"
+            ],
+            "authors": [
+                {
+                    "name": "Mateu Aguiló Bosch",
+                    "homepage": "https://www.drupal.org/user/550110",
+                    "email": "mateu.aguilo.bosch@gmail.com"
+                },
+                {
+                    "name": "Martin Kolar",
+                    "homepage": "https://www.drupal.org/u/mkolar"
+                },
+                {
+                    "name": "Karel Majzlik",
+                    "homepage": "https://www.drupal.org/u/karlos007"
+                }
+            ],
+            "description": "JSON:API Extras provides a means to override and provide limited configurations to the default zero-configuration implementation provided by the JSON:API module.",
+            "homepage": "https://www.drupal.org/project/jsonapi_extras",
+            "support": {
+                "source": "https://git.drupalcode.org/project/jsonapi_extras"
+            }
+        },
         {
             "name": "drupal/jsonrpc",
             "version": "dev-1.x",
@@ -17369,6 +17523,7 @@
         "drupal/commerce_recurring": 20,
         "drupal/commerce_variation_cart_form": 20,
         "drupal/computed_field": 10,
+        "drupal/consumer_image_styles": 20,
         "drupal/genpass": 20,
         "drupal/image_delta_formatter": 20,
         "drupal/jsonrpc": 20,
diff --git a/config/sync/autologout.settings.yml b/config/sync/autologout.settings.yml
index 341660d..c9be0d0 100644
--- a/config/sync/autologout.settings.yml
+++ b/config/sync/autologout.settings.yml
@@ -5,7 +5,7 @@ role_logout: true
 redirect_url: /
 no_dialog: false
 message: 'Your session is about to expire. Do you want to reset it?'
-inactivity_message: 'You have been logged out due to inactivity.'
+inactivity_message: ''
 enforce_admin: false
 jstimer_format: '%hours%:%mins%:%secs%'
 jstimer_js_load_option: false
diff --git a/config/sync/core.extension.yml b/config/sync/core.extension.yml
index d165bcb..34a4e22 100644
--- a/config/sync/core.extension.yml
+++ b/config/sync/core.extension.yml
@@ -42,6 +42,8 @@ module:
   config_split: 0
   config_translation: 0
   config_update: 0
+  consumer_image_styles: 0
+  consumers: 0
   contact: 0
   content_lock: 0
   content_lock_timeout: 0
@@ -77,6 +79,7 @@ module:
   inline_entity_form: 0
   interval: 0
   jsonapi: 0
+  jsonapi_extras: 0
   kint: 0
   language: 0
   link: 0
diff --git a/config/sync/image.style.card_medium.yml b/config/sync/image.style.card_medium.yml
new file mode 100644
index 0000000..038db2b
--- /dev/null
+++ b/config/sync/image.style.card_medium.yml
@@ -0,0 +1,15 @@
+uuid: 6f2b50e1-db9e-47b4-9a65-f3a81b06165f
+langcode: en
+status: true
+dependencies: {  }
+name: card_medium
+label: card-medium
+effects:
+  34e936a0-1fee-4327-9553-b4f48bde14e6:
+    uuid: 34e936a0-1fee-4327-9553-b4f48bde14e6
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 210
+      height: 295
+      anchor: center-center
diff --git a/config/sync/jsonapi_extras.jsonapi_resource_config.advancedqueue_queue--advancedqueue_queue.yml b/config/sync/jsonapi_extras.jsonapi_resource_config.advancedqueue_queue--advancedqueue_queue.yml
new file mode 100644
index 0000000..045bcfb
--- /dev/null
+++ b/config/sync/jsonapi_extras.jsonapi_resource_config.advancedqueue_queue--advancedqueue_queue.yml
@@ -0,0 +1,89 @@
+uuid: a11d30de-143c-4de1-8f39-f03875cc136d
+langcode: en
+status: true
+dependencies:
+  module:
+    - advancedqueue
+id: advancedqueue_queue--advancedqueue_queue
+disabled: true
+path: advancedqueue_queue/advancedqueue_queue
+resourceType: advancedqueue_queue--advancedqueue_queue
+resourceFields:
+  uuid:
+    fieldName: uuid
+    publicName: uuid
+    enhancer:
+      id: ''
+    disabled: false
+  langcode:
+    fieldName: langcode
+    publicName: langcode
+    enhancer:
+      id: ''
+    disabled: false
+  status:
+    fieldName: status
+    publicName: status
+    enhancer:
+      id: ''
+    disabled: false
+  dependencies:
+    fieldName: dependencies
+    publicName: dependencies
+    enhancer:
+      id: ''
+    disabled: false
+  third_party_settings:
+    fieldName: third_party_settings
+    publicName: third_party_settings
+    enhancer:
+      id: ''
+    disabled: false
+  _core:
+    fieldName: _core
+    publicName: _core
+    enhancer:
+      id: ''
+    disabled: false
+  id:
+    fieldName: id
+    publicName: id
+    enhancer:
+      id: ''
+    disabled: false
+  label:
+    fieldName: label
+    publicName: label
+    enhancer:
+      id: ''
+    disabled: false
+  backend:
+    fieldName: backend
+    publicName: backend
+    enhancer:
+      id: ''
+    disabled: false
+  backend_configuration:
+    fieldName: backend_configuration
+    publicName: backend_configuration
+    enhancer:
+      id: ''
+    disabled: false
+  processor:
+    fieldName: processor
+    publicName: processor
+    enhancer:
+      id: ''
+    disabled: false
+  processing_time:
+    fieldName: processing_time
+    publicName: processing_time
+    enhancer:
+      id: ''
+    disabled: false
+  locked:
+    fieldName: locked
+    publicName: locked
+    enhancer:
+      id: ''
+    disabled: false
diff --git a/config/sync/jsonapi_extras.jsonapi_resource_config.node--materiau.yml b/config/sync/jsonapi_extras.jsonapi_resource_config.node--materiau.yml
new file mode 100644
index 0000000..87acea6
--- /dev/null
+++ b/config/sync/jsonapi_extras.jsonapi_resource_config.node--materiau.yml
@@ -0,0 +1,268 @@
+uuid: 57bab5e2-229d-4e0d-886a-e20b693a70b0
+langcode: en
+status: true
+dependencies:
+  config:
+    - node.type.materiau
+id: node--materiau
+disabled: false
+path: node/materiau
+resourceType: node--materiau
+resourceFields:
+  nid:
+    disabled: true
+    fieldName: nid
+    publicName: nid
+    enhancer:
+      id: ''
+  uuid:
+    fieldName: uuid
+    publicName: uuid
+    enhancer:
+      id: ''
+    disabled: false
+  vid:
+    disabled: true
+    fieldName: vid
+    publicName: vid
+    enhancer:
+      id: ''
+  langcode:
+    disabled: true
+    fieldName: langcode
+    publicName: langcode
+    enhancer:
+      id: ''
+  type:
+    disabled: true
+    fieldName: type
+    publicName: type
+    enhancer:
+      id: ''
+  revision_timestamp:
+    fieldName: revision_timestamp
+    publicName: revision_timestamp
+    enhancer:
+      id: ''
+    disabled: false
+  revision_uid:
+    disabled: true
+    fieldName: revision_uid
+    publicName: revision_uid
+    enhancer:
+      id: ''
+  revision_log:
+    disabled: true
+    fieldName: revision_log
+    publicName: revision_log
+    enhancer:
+      id: ''
+  status:
+    disabled: true
+    fieldName: status
+    publicName: status
+    enhancer:
+      id: ''
+  uid:
+    disabled: true
+    fieldName: uid
+    publicName: uid
+    enhancer:
+      id: ''
+  title:
+    fieldName: title
+    publicName: title
+    enhancer:
+      id: ''
+    disabled: false
+  created:
+    disabled: true
+    fieldName: created
+    publicName: created
+    enhancer:
+      id: ''
+  changed:
+    disabled: true
+    fieldName: changed
+    publicName: changed
+    enhancer:
+      id: ''
+  promote:
+    disabled: true
+    fieldName: promote
+    publicName: promote
+    enhancer:
+      id: ''
+  sticky:
+    disabled: true
+    fieldName: sticky
+    publicName: sticky
+    enhancer:
+      id: ''
+  default_langcode:
+    disabled: true
+    fieldName: default_langcode
+    publicName: default_langcode
+    enhancer:
+      id: ''
+  revision_default:
+    disabled: true
+    fieldName: revision_default
+    publicName: revision_default
+    enhancer:
+      id: ''
+  revision_translation_affected:
+    disabled: true
+    fieldName: revision_translation_affected
+    publicName: revision_translation_affected
+    enhancer:
+      id: ''
+  path:
+    fieldName: path
+    publicName: path
+    enhancer:
+      id: ''
+    disabled: false
+  synonyms:
+    fieldName: synonyms
+    publicName: synonyms
+    enhancer:
+      id: ''
+    disabled: false
+  menu_link:
+    disabled: true
+    fieldName: menu_link
+    publicName: menu_link
+    enhancer:
+      id: ''
+  content_translation_source:
+    disabled: true
+    fieldName: content_translation_source
+    publicName: content_translation_source
+    enhancer:
+      id: ''
+  content_translation_outdated:
+    disabled: true
+    fieldName: content_translation_outdated
+    publicName: content_translation_outdated
+    enhancer:
+      id: ''
+  body:
+    fieldName: body
+    publicName: body
+    enhancer:
+      id: ''
+    disabled: false
+  field_attachments:
+    fieldName: field_attachments
+    publicName: field_attachments
+    enhancer:
+      id: ''
+    disabled: false
+  field_distributor:
+    fieldName: field_distributor
+    publicName: field_distributor
+    enhancer:
+      id: ''
+    disabled: false
+  field_famille:
+    fieldName: field_famille
+    publicName: field_famille
+    enhancer:
+      id: ''
+    disabled: false
+  field_index:
+    fieldName: field_index
+    publicName: field_index
+    enhancer:
+      id: ''
+    disabled: false
+  field_linked_articles:
+    fieldName: field_linked_articles
+    publicName: field_linked_articles
+    enhancer:
+      id: ''
+    disabled: false
+  field_linked_materials:
+    fieldName: field_linked_materials
+    publicName: field_linked_materials
+    enhancer:
+      id: ''
+    disabled: false
+  field_localisation_old:
+    disabled: true
+    fieldName: field_localisation_old
+    publicName: field_localisation_old
+    enhancer:
+      id: ''
+  field_manufacturer:
+    fieldName: field_manufacturer
+    publicName: field_manufacturer
+    enhancer:
+      id: ''
+    disabled: false
+  field_materiau_images:
+    fieldName: field_materiau_images
+    publicName: images
+    enhancer:
+      id: image_styles
+      settings:
+        styles:
+          refine: true
+          custom_selection:
+            - card_medium
+    disabled: false
+  field_memo:
+    disabled: true
+    fieldName: field_memo
+    publicName: field_memo
+    enhancer:
+      id: ''
+  field_migration:
+    disabled: true
+    fieldName: field_migration
+    publicName: field_migration
+    enhancer:
+      id: ''
+  field_reference:
+    fieldName: field_reference
+    publicName: field_reference
+    enhancer:
+      id: ''
+    disabled: false
+  field_samples:
+    fieldName: field_samples
+    publicName: field_samples
+    enhancer:
+      id: ''
+    disabled: false
+  field_short_description:
+    fieldName: field_short_description
+    publicName: field_short_description
+    enhancer:
+      id: ''
+    disabled: false
+  field_tags:
+    fieldName: field_tags
+    publicName: field_tags
+    enhancer:
+      id: ''
+    disabled: false
+  field_thesaurus:
+    fieldName: field_thesaurus
+    publicName: field_thesaurus
+    enhancer:
+      id: ''
+    disabled: false
+  field_video:
+    fieldName: field_video
+    publicName: field_video
+    enhancer:
+      id: ''
+    disabled: false
+  field_workflow:
+    disabled: true
+    fieldName: field_workflow
+    publicName: field_workflow
+    enhancer:
+      id: ''
diff --git a/config/sync/jsonapi_extras.settings.yml b/config/sync/jsonapi_extras.settings.yml
new file mode 100644
index 0000000..e8d3333
--- /dev/null
+++ b/config/sync/jsonapi_extras.settings.yml
@@ -0,0 +1,4 @@
+path_prefix: jsonapi
+include_count: false
+_core:
+  default_config_hash: eZ7KZ6nM56SRhfriFWCo1372Z9UiKufhSLRbkdhVmUg
diff --git a/config/sync/search_api.index.database.yml b/config/sync/search_api.index.database.yml
index bbf53bd..3be6695 100644
--- a/config/sync/search_api.index.database.yml
+++ b/config/sync/search_api.index.database.yml
@@ -8,8 +8,8 @@ dependencies:
     - taxonomy
     - search_api
   config:
-    - field.storage.node.field_famille
     - field.storage.node.body
+    - field.storage.node.field_famille
     - field.storage.node.field_tags
     - field.storage.taxonomy_term.field_synonyms
     - field.storage.node.field_thesaurus
@@ -176,6 +176,14 @@ field_settings:
     dependencies:
       module:
         - node
+  uuid:
+    label: UUID
+    datasource_id: 'entity:node'
+    property_path: uuid
+    type: string
+    dependencies:
+      module:
+        - node
 datasource_settings:
   'entity:node':
     bundles:
@@ -222,6 +230,7 @@ processor_settings:
       - thesaurus_synonyms
       - thesaurus_tid
       - title
+      - uuid
     title: true
     alt: true
     tags:
diff --git a/package-lock.json b/package-lock.json
index adb2931..51ce509 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1107,6 +1107,21 @@
         }
       }
     },
+    "@babel/runtime": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
+      "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+      "requires": {
+        "regenerator-runtime": "^0.13.2"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.2",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+        }
+      }
+    },
     "@babel/template": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.0.tgz",
@@ -9466,6 +9481,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-autofocus-directive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vue-autofocus-directive/-/vue-autofocus-directive-1.0.3.tgz",
+      "integrity": "sha512-f+tNZOaPDSTGjak74h/PAcn35yn14bnwKmIap8vKNqF0MEof9mr+iKY53EVgNAuFdPEQKwlQZeDGFpgZ2VAh+g==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "vue-eslint-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
diff --git a/package.json b/package.json
index 323e19a..f7123ee 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "axios": "^0.18.1",
     "vue": "^2.6.10",
+    "vue-autofocus-directive": "^1.0.3",
     "vue-meta": "^1.6.0",
     "vue-router": "^3.0.6",
     "vuex": "^3.1.1"
diff --git a/web/modules/custom/materio_sapi/src/Controller/Base.php b/web/modules/custom/materio_sapi/src/Controller/Base.php
index 978d31d..66fdb32 100644
--- a/web/modules/custom/materio_sapi/src/Controller/Base.php
+++ b/web/modules/custom/materio_sapi/src/Controller/Base.php
@@ -102,9 +102,11 @@ class Base extends ControllerBase {
       $items = [];
       foreach ($this->results as $result) {
         $nid = $result->getField('nid')->getValues()[0];
+        $uuid = $result->getField('uuid')->getValues()[0];
         $title = $result->getField('title')->getValues()[0]->getText();
         $items[] = [
           'nid' => $nid,
+          'uuid' => $uuid,
           'title' => $title,
         ];
       }
diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js
index f812326..45c7600 100644
--- a/web/themes/custom/materiotheme/assets/dist/main.js
+++ b/web/themes/custom/materiotheme/assets/dist/main.js
@@ -429,7 +429,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n//\n//\n//\n//\n//\n//\nvar _default = {\n  name: \"Card\",\n  props: ['item'],\n  data: function data() {\n    return {};\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar _default = {\n  name: \"Card\",\n  props: ['item'],\n  data: function data() {\n    return {};\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -465,7 +465,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n  router: _route.default,\n  props: ['form'],\n  data: function data() {\n    return {\n      template: null,\n      typed: null,\n      autocomplete: null // basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix\n\n    };\n  },\n  computed: _objectSpread({}, (0, _vuex.mapState)({\n    keys: function keys(state) {\n      return state.Search.keys;\n    },\n    term: function term(state) {\n      return state.Search.term;\n    }\n  })),\n  methods: {\n    submit: function submit() {\n      console.log(\"search clicked\", this.typed, this.autocomplete); // New search is triggered by Base.vue with router (which will also fill the store)\n\n      this.$router.push({\n        name: 'base',\n        query: {\n          keys: this.typed,\n          term: this.autocomplete\n        }\n      }); // this.$router.push({\n      //   path:`${this.basePath}/base`,\n      //   query:{keys:this.typed,term:this.autocomplete}\n      // })\n    },\n    onAutoCompleteSelect: function onAutoCompleteSelect(event, ui) {\n      event.preventDefault(); // console.log('autoCompleteSelect', event, ui);\n\n      this.typed = ui.item.label;\n      this.autocomplete = ui.item.value;\n    }\n  },\n  beforeMount: function beforeMount() {\n    var _this = this;\n\n    // console.log('SearchForm beforeMount');\n    if (this._props.form) {\n      // console.log('SearchForm beforeMount if this._props.form ok');\n      this.template = _vue.default.compile(this._props.form); // https://github.com/vuejs/vue/issues/9911\n\n      this.$options.staticRenderFns = [];\n      this._staticTrees = [];\n      this.template.staticRenderFns.map(function (fn) {\n        return _this.$options.staticRenderFns.push(fn);\n      });\n    }\n  },\n  watch: {\n    keys: function keys(n, o) {\n      console.log('keys changed', n, o);\n      this.typed = n;\n    },\n    term: function term(n, o) {\n      console.log('autocomplete changed', n, o);\n      this.autocomplete = n;\n    }\n  },\n  created: function created() {\n    this.typed = this.keys;\n    this.autocomplete = this.term;\n  },\n  mounted: function mounted() {\n    // console.log('SearchForm mounted');\n    Drupal.attachBehaviors(this.$el); // Catch the jquery ui events for autocmplete widget\n\n    jQuery(this.$el.querySelector('#edit-search')).on('autocompleteselect', this.onAutoCompleteSelect);\n  },\n  render: function render(h) {\n    // console.log('searchForm render');\n    if (!this.template) {\n      return h('span', 'Loading ...');\n    } else {\n      return this.template.render.call(this);\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n  router: _route.default,\n  props: ['form'],\n  data: function data() {\n    return {\n      template: null,\n      typed: null,\n      autocomplete: null // basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix\n\n    };\n  },\n  computed: _objectSpread({}, (0, _vuex.mapState)({\n    keys: function keys(state) {\n      return state.Search.keys;\n    },\n    term: function term(state) {\n      return state.Search.term;\n    }\n  })),\n  methods: {\n    submit: function submit() {\n      console.log(\"search clicked\", this.typed, this.autocomplete); // New search is triggered by Base.vue with router (which will also fill the store)\n\n      this.$router.push({\n        name: 'base',\n        query: {\n          keys: this.typed,\n          term: this.autocomplete\n        }\n      }); // this.$router.push({\n      //   path:`${this.basePath}/base`,\n      //   query:{keys:this.typed,term:this.autocomplete}\n      // })\n    },\n    onAutoCompleteSelect: function onAutoCompleteSelect(event, ui) {\n      event.preventDefault(); // console.log('autoCompleteSelect', event, ui);\n\n      this.typed = ui.item.label;\n      this.autocomplete = ui.item.value;\n    }\n  },\n  beforeMount: function beforeMount() {\n    var _this = this;\n\n    // console.log('SearchForm beforeMount');\n    if (this._props.form) {\n      // console.log('SearchForm beforeMount if this._props.form ok');\n      this.template = _vue.default.compile(this._props.form); // https://github.com/vuejs/vue/issues/9911\n\n      this.$options.staticRenderFns = [];\n      this._staticTrees = [];\n      this.template.staticRenderFns.map(function (fn) {\n        return _this.$options.staticRenderFns.push(fn);\n      });\n    }\n  },\n  watch: {\n    keys: function keys(n, o) {\n      console.log('keys changed', n, o);\n      this.typed = n;\n    },\n    term: function term(n, o) {\n      console.log('autocomplete changed', n, o);\n      this.autocomplete = n;\n    }\n  },\n  created: function created() {\n    this.typed = this.keys;\n    this.autocomplete = this.term;\n  },\n  mounted: function mounted() {\n    // console.log('SearchForm mounted');\n    Drupal.attachBehaviors(this.$el); // get the search input\n\n    var $input = this.$el.querySelector('#edit-search'); // focus on input\n\n    $input.focus(); // Catch the jquery ui events for autocmplete widget\n\n    jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect);\n  },\n  render: function render(h) {\n    // console.log('searchForm render');\n    if (!this.template) {\n      return h('span', 'Loading ...');\n    } else {\n      return this.template.render.call(this);\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -488,7 +488,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("exports = module.exports = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\")(false);\n// Module\nexports.push([module.i, \"body {\\n  background: white; }\\n\\na {\\n  color: inherit;\\n  text-decoration: none; }\\n\\na, a:focus, a:active {\\n  outline: none; }\\n\\na:focus {\\n  -moz-outline-style: none; }\\n\\n.col-1, .small-col-1, .med-col-1, .large-col-1, .col-2, .small-col-2, .med-col-2, .large-col-2, .col-3, .small-col-3, .med-col-3, .large-col-3, .col-4, .small-col-4, .med-col-4, .large-col-4, .col-5, .small-col-5, .med-col-5, .large-col-5, .col-6, .small-col-6, .med-col-6, .large-col-6, .col-7, .small-col-7, .med-col-7, .large-col-7, .col-8, .small-col-8, .med-col-8, .large-col-8, .col-9, .small-col-9, .med-col-9, .large-col-9, .col-10, .small-col-10, .med-col-10, .large-col-10, .col-11, .small-col-11, .med-col-11, .large-col-11, .col-12, .small-col-12, .med-col-12, .large-col-12, .col-1-offset-1, .col-1-offset-2, .col-1-offset-3, .col-1-offset-4, .col-1-offset-5, .col-1-offset-6, .col-1-offset-7, .col-1-offset-8, .col-1-offset-9, .col-1-offset-10, .col-1-offset-11, .col-2-offset-1, .col-2-offset-2, .col-2-offset-3, .col-2-offset-4, .col-2-offset-5, .col-2-offset-6, .col-2-offset-7, .col-2-offset-8, .col-2-offset-9, .col-2-offset-10, .col-3-offset-1, .col-3-offset-2, .col-3-offset-3, .col-3-offset-4, .col-3-offset-5, .col-3-offset-6, .col-3-offset-7, .col-3-offset-8, .col-3-offset-9, .col-4-offset-1, .col-4-offset-2, .col-4-offset-3, .col-4-offset-4, .col-4-offset-5, .col-4-offset-6, .col-4-offset-7, .col-4-offset-8, .col-5-offset-1, .col-5-offset-2, .col-5-offset-3, .col-5-offset-4, .col-5-offset-5, .col-5-offset-6, .col-5-offset-7, .col-6-offset-1, .col-6-offset-2, .col-6-offset-3, .col-6-offset-4, .col-6-offset-5, .col-6-offset-6, .col-7-offset-1, .col-7-offset-2, .col-7-offset-3, .col-7-offset-4, .col-7-offset-5, .col-8-offset-1, .col-8-offset-2, .col-8-offset-3, .col-8-offset-4, .col-9-offset-1, .col-9-offset-2, .col-9-offset-3, .col-10-offset-1, .col-10-offset-2, .col-11-offset-1 {\\n  width: 100%;\\n  float: left;\\n  box-sizing: border-box; }\\n\\n.row {\\n  position: relative; }\\n  .row > * {\\n    font-size: 16px; }\\n\\n.col-1 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 8.33333%; }\\n  .col-1:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-1 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 8.33333%; }\\n    .small-col-1:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-1 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 8.33333%; }\\n    .med-col-1:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-1 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 8.33333%; }\\n    .large-col-1:last-child {\\n      padding-right: 0; } }\\n\\n.col-2 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 16.66667%; }\\n  .col-2:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-2 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 16.66667%; }\\n    .small-col-2:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-2 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 16.66667%; }\\n    .med-col-2:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-2 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 16.66667%; }\\n    .large-col-2:last-child {\\n      padding-right: 0; } }\\n\\n.col-3 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 25%; }\\n  .col-3:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-3 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 25%; }\\n    .small-col-3:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-3 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 25%; }\\n    .med-col-3:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-3 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 25%; }\\n    .large-col-3:last-child {\\n      padding-right: 0; } }\\n\\n.col-4 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 33.33333%; }\\n  .col-4:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-4 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 33.33333%; }\\n    .small-col-4:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-4 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 33.33333%; }\\n    .med-col-4:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-4 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 33.33333%; }\\n    .large-col-4:last-child {\\n      padding-right: 0; } }\\n\\n.col-5 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 41.66667%; }\\n  .col-5:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-5 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 41.66667%; }\\n    .small-col-5:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-5 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 41.66667%; }\\n    .med-col-5:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-5 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 41.66667%; }\\n    .large-col-5:last-child {\\n      padding-right: 0; } }\\n\\n.col-6 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 50%; }\\n  .col-6:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-6 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 50%; }\\n    .small-col-6:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-6 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 50%; }\\n    .med-col-6:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-6 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 50%; }\\n    .large-col-6:last-child {\\n      padding-right: 0; } }\\n\\n.col-7 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 58.33333%; }\\n  .col-7:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-7 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 58.33333%; }\\n    .small-col-7:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-7 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 58.33333%; }\\n    .med-col-7:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-7 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 58.33333%; }\\n    .large-col-7:last-child {\\n      padding-right: 0; } }\\n\\n.col-8 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 66.66667%; }\\n  .col-8:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-8 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 66.66667%; }\\n    .small-col-8:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-8 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 66.66667%; }\\n    .med-col-8:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-8 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 66.66667%; }\\n    .large-col-8:last-child {\\n      padding-right: 0; } }\\n\\n.col-9 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 75%; }\\n  .col-9:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-9 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 75%; }\\n    .small-col-9:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-9 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 75%; }\\n    .med-col-9:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-9 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 75%; }\\n    .large-col-9:last-child {\\n      padding-right: 0; } }\\n\\n.col-10 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 83.33333%; }\\n  .col-10:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-10 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 83.33333%; }\\n    .small-col-10:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-10 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 83.33333%; }\\n    .med-col-10:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-10 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 83.33333%; }\\n    .large-col-10:last-child {\\n      padding-right: 0; } }\\n\\n.col-11 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 91.66667%; }\\n  .col-11:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-11 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 91.66667%; }\\n    .small-col-11:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-11 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 91.66667%; }\\n    .med-col-11:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-11 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 91.66667%; }\\n    .large-col-11:last-child {\\n      padding-right: 0; } }\\n\\n.col-12 {\\n  padding-left: 0em;\\n  padding-right: 0;\\n  margin-left: 0%;\\n  width: 100%; }\\n  .col-12:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-12 {\\n    padding-left: 0em;\\n    padding-right: 0;\\n    margin-left: 0%;\\n    width: 100%; }\\n    .small-col-12:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-12 {\\n    padding-left: 0em;\\n    padding-right: 0;\\n    margin-left: 0%;\\n    width: 100%; }\\n    .med-col-12:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-12 {\\n    padding-left: 0em;\\n    padding-right: 0;\\n    margin-left: 0%;\\n    width: 100%; }\\n    .large-col-12:last-child {\\n      padding-right: 0; } }\\n\\n.col-1-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 8.33333%;\\n  width: 8.33333%; }\\n  .col-1-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 16.66667%;\\n  width: 8.33333%; }\\n  .col-1-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 25%;\\n  width: 8.33333%; }\\n  .col-1-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 33.33333%;\\n  width: 8.33333%; }\\n  .col-1-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 41.66667%;\\n  width: 8.33333%; }\\n  .col-1-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-6 {\\n  padding-left: 6em;\\n  padding-right: 1em;\\n  margin-left: 50%;\\n  width: 8.33333%; }\\n  .col-1-offset-6:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-7 {\\n  padding-left: 7em;\\n  padding-right: 1em;\\n  margin-left: 58.33333%;\\n  width: 8.33333%; }\\n  .col-1-offset-7:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-8 {\\n  padding-left: 8em;\\n  padding-right: 1em;\\n  margin-left: 66.66667%;\\n  width: 8.33333%; }\\n  .col-1-offset-8:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-9 {\\n  padding-left: 9em;\\n  padding-right: 1em;\\n  margin-left: 75%;\\n  width: 8.33333%; }\\n  .col-1-offset-9:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-10 {\\n  padding-left: 10em;\\n  padding-right: 1em;\\n  margin-left: 83.33333%;\\n  width: 8.33333%; }\\n  .col-1-offset-10:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-11 {\\n  padding-left: 11em;\\n  padding-right: 1em;\\n  margin-left: 91.66667%;\\n  width: 8.33333%; }\\n  .col-1-offset-11:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 16.66667%;\\n  width: 16.66667%; }\\n  .col-2-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 33.33333%;\\n  width: 16.66667%; }\\n  .col-2-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 50%;\\n  width: 16.66667%; }\\n  .col-2-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 66.66667%;\\n  width: 16.66667%; }\\n  .col-2-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 83.33333%;\\n  width: 16.66667%; }\\n  .col-2-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-6 {\\n  padding-left: 6em;\\n  padding-right: 1em;\\n  margin-left: 100%;\\n  width: 16.66667%; }\\n  .col-2-offset-6:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-7 {\\n  padding-left: 7em;\\n  padding-right: 1em;\\n  margin-left: 116.66667%;\\n  width: 16.66667%; }\\n  .col-2-offset-7:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-8 {\\n  padding-left: 8em;\\n  padding-right: 1em;\\n  margin-left: 133.33333%;\\n  width: 16.66667%; }\\n  .col-2-offset-8:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-9 {\\n  padding-left: 9em;\\n  padding-right: 1em;\\n  margin-left: 150%;\\n  width: 16.66667%; }\\n  .col-2-offset-9:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-10 {\\n  padding-left: 10em;\\n  padding-right: 1em;\\n  margin-left: 166.66667%;\\n  width: 16.66667%; }\\n  .col-2-offset-10:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 25%;\\n  width: 25%; }\\n  .col-3-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 50%;\\n  width: 25%; }\\n  .col-3-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 75%;\\n  width: 25%; }\\n  .col-3-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 100%;\\n  width: 25%; }\\n  .col-3-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 125%;\\n  width: 25%; }\\n  .col-3-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-6 {\\n  padding-left: 6em;\\n  padding-right: 1em;\\n  margin-left: 150%;\\n  width: 25%; }\\n  .col-3-offset-6:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-7 {\\n  padding-left: 7em;\\n  padding-right: 1em;\\n  margin-left: 175%;\\n  width: 25%; }\\n  .col-3-offset-7:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-8 {\\n  padding-left: 8em;\\n  padding-right: 1em;\\n  margin-left: 200%;\\n  width: 25%; }\\n  .col-3-offset-8:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-9 {\\n  padding-left: 9em;\\n  padding-right: 1em;\\n  margin-left: 225%;\\n  width: 25%; }\\n  .col-3-offset-9:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 33.33333%;\\n  width: 33.33333%; }\\n  .col-4-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 66.66667%;\\n  width: 33.33333%; }\\n  .col-4-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 100%;\\n  width: 33.33333%; }\\n  .col-4-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 133.33333%;\\n  width: 33.33333%; }\\n  .col-4-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 166.66667%;\\n  width: 33.33333%; }\\n  .col-4-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-6 {\\n  padding-left: 6em;\\n  padding-right: 1em;\\n  margin-left: 200%;\\n  width: 33.33333%; }\\n  .col-4-offset-6:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-7 {\\n  padding-left: 7em;\\n  padding-right: 1em;\\n  margin-left: 233.33333%;\\n  width: 33.33333%; }\\n  .col-4-offset-7:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-8 {\\n  padding-left: 8em;\\n  padding-right: 1em;\\n  margin-left: 266.66667%;\\n  width: 33.33333%; }\\n  .col-4-offset-8:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 41.66667%;\\n  width: 41.66667%; }\\n  .col-5-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 83.33333%;\\n  width: 41.66667%; }\\n  .col-5-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 125%;\\n  width: 41.66667%; }\\n  .col-5-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 166.66667%;\\n  width: 41.66667%; }\\n  .col-5-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 208.33333%;\\n  width: 41.66667%; }\\n  .col-5-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-6 {\\n  padding-left: 6em;\\n  padding-right: 1em;\\n  margin-left: 250%;\\n  width: 41.66667%; }\\n  .col-5-offset-6:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-7 {\\n  padding-left: 7em;\\n  padding-right: 1em;\\n  margin-left: 291.66667%;\\n  width: 41.66667%; }\\n  .col-5-offset-7:last-child {\\n    padding-right: 0; }\\n\\n.col-6-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 50%;\\n  width: 50%; }\\n  .col-6-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-6-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 100%;\\n  width: 50%; }\\n  .col-6-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-6-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 150%;\\n  width: 50%; }\\n  .col-6-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-6-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 200%;\\n  width: 50%; }\\n  .col-6-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-6-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 250%;\\n  width: 50%; }\\n  .col-6-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-6-offset-6 {\\n  padding-left: 6em;\\n  padding-right: 1em;\\n  margin-left: 300%;\\n  width: 50%; }\\n  .col-6-offset-6:last-child {\\n    padding-right: 0; }\\n\\n.col-7-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 58.33333%;\\n  width: 58.33333%; }\\n  .col-7-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-7-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 116.66667%;\\n  width: 58.33333%; }\\n  .col-7-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-7-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 175%;\\n  width: 58.33333%; }\\n  .col-7-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-7-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 233.33333%;\\n  width: 58.33333%; }\\n  .col-7-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-7-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 291.66667%;\\n  width: 58.33333%; }\\n  .col-7-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-8-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 66.66667%;\\n  width: 66.66667%; }\\n  .col-8-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-8-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 133.33333%;\\n  width: 66.66667%; }\\n  .col-8-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-8-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 200%;\\n  width: 66.66667%; }\\n  .col-8-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-8-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 266.66667%;\\n  width: 66.66667%; }\\n  .col-8-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-9-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 75%;\\n  width: 75%; }\\n  .col-9-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-9-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 150%;\\n  width: 75%; }\\n  .col-9-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-9-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 225%;\\n  width: 75%; }\\n  .col-9-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-10-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 83.33333%;\\n  width: 83.33333%; }\\n  .col-10-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-10-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 166.66667%;\\n  width: 83.33333%; }\\n  .col-10-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-11-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 91.66667%;\\n  width: 91.66667%; }\\n  .col-11-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col.float-right {\\n  float: right;\\n  padding-right: 0;\\n  padding-left: 1em; }\\n\\nbody, html {\\n  position: relative;\\n  width: 100%;\\n  height: 100%;\\n  font-family: sans-serif;\\n  font-style: normal;\\n  margin: 0;\\n  padding: 0; }\\n\\nbody.toolbar-horizontal.toolbar-themes.toolbar-no-tabs {\\n  padding-top: 24px !important; }\\n\\nheader[role=\\\"banner\\\"] {\\n  background-color: #fff;\\n  overflow: visible;\\n  position: fixed;\\n  z-index: 10;\\n  width: 100vw;\\n  height: 80px; }\\n  header[role=\\\"banner\\\"] .wrapper .header-block {\\n    min-height: 15px;\\n    font-size: 0; }\\n    header[role=\\\"banner\\\"] .wrapper .header-block.header-right {\\n      text-align: right; }\\n    header[role=\\\"banner\\\"] .wrapper .header-block > * {\\n      display: inline-block;\\n      vertical-align: top;\\n      font-size: 16px;\\n      text-align: left; }\\n\\nmain[role=\\\"main\\\"] {\\n  padding-top: 80px; }\\n\\nbody {\\n  font-size: 16px;\\n  font-family: \\\"Ubuntu\\\",Arial,\\\"MS Trebuchet\\\",sans-serif;\\n  font-weight: 500;\\n  font-style: normal;\\n  line-height: 1.3; }\\n\\naside.messages {\\n  border: none; }\\n\\nheader[role=\\\"banner\\\"] {\\n  padding: 0.2em 0 0 0; }\\n  header[role=\\\"banner\\\"] #block-sitebranding h1 {\\n    margin: 0;\\n    line-height: 1; }\\n  header[role=\\\"banner\\\"] #block-userlogin {\\n    position: relative;\\n    width: 8em;\\n    overflow: visible; }\\n    header[role=\\\"banner\\\"] #block-userlogin h2 {\\n      margin: 0;\\n      font-size: 1em;\\n      font-weight: 400; }\\n    header[role=\\\"banner\\\"] #block-userlogin > section {\\n      background-color: #fff;\\n      overflow: hidden;\\n      width: 11em;\\n      height: 1px;\\n      padding: 0.01em 1em;\\n      box-sizing: content-box;\\n      transition: all 0.4s ease-in-out;\\n      transition-delay: 2s;\\n      position: absolute;\\n      right: 0;\\n      top: 1.7em;\\n      box-sizing: content-box; }\\n    header[role=\\\"banner\\\"] #block-userlogin:hover > section {\\n      transition-delay: 0s;\\n      height: 12em;\\n      padding: 1em 1em;\\n      box-shadow: 0 0 10px #ccc; }\\n    header[role=\\\"banner\\\"] #block-userlogin .form-item {\\n      margin: 0;\\n      position: relative;\\n      width: 100%; }\\n      header[role=\\\"banner\\\"] #block-userlogin .form-item.form-item-name {\\n        margin: 2px 0 0.5em 0; }\\n        header[role=\\\"banner\\\"] #block-userlogin .form-item.form-item-name input {\\n          width: 90%;\\n          padding: 0;\\n          box-sizing: content-box; }\\n      header[role=\\\"banner\\\"] #block-userlogin .form-item.form-item-pass {\\n        margin: 0 0 0.5em 0; }\\n        header[role=\\\"banner\\\"] #block-userlogin .form-item.form-item-pass input {\\n          width: 90%;\\n          padding: 0;\\n          box-sizing: content-box; }\\n      header[role=\\\"banner\\\"] #block-userlogin .form-item.form-item-persistent-login {\\n        font-size: 0.756em; }\\n        header[role=\\\"banner\\\"] #block-userlogin .form-item.form-item-persistent-login label {\\n          vertical-align: top; }\\n    header[role=\\\"banner\\\"] #block-userlogin #edit-actions {\\n      margin: 0; }\\n    header[role=\\\"banner\\\"] #block-userlogin .item-list ul {\\n      margin: 0; }\\n      header[role=\\\"banner\\\"] #block-userlogin .item-list ul li {\\n        list-style: none;\\n        margin: 0; }\\n        header[role=\\\"banner\\\"] #block-userlogin .item-list ul li a {\\n          font-size: 0.756em; }\\n  header[role=\\\"banner\\\"] #block-languageswitcher h2 {\\n    margin: 0.1em 0 0 0;\\n    font-size: 0.756em;\\n    font-weight: 400;\\n    padding: 0.1em 0.4em 0.2em;\\n    border-radius: 3px;\\n    background-color: #444;\\n    color: #fff;\\n    display: inline-block;\\n    vertical-align: top; }\\n  header[role=\\\"banner\\\"] #block-languageswitcher > ul.links {\\n    overflow: hidden;\\n    width: 5em;\\n    height: 1px;\\n    padding: 0.01em 0;\\n    margin: 0;\\n    box-sizing: content-box;\\n    transition: all 0.4s ease-in-out; }\\n  header[role=\\\"banner\\\"] #block-languageswitcher:hover > ul.links {\\n    transition-delay: 0s;\\n    height: 2em;\\n    padding: 0.3em 0; }\\n  header[role=\\\"banner\\\"] #block-languageswitcher li {\\n    list-style: none;\\n    padding: 0; }\\n    header[role=\\\"banner\\\"] #block-languageswitcher li.is-active {\\n      display: none; }\\n    header[role=\\\"banner\\\"] #block-languageswitcher li a {\\n      margin: 0;\\n      font-size: 0.756em;\\n      font-weight: 400;\\n      padding: 0.2em 0.4em;\\n      border-radius: 3px;\\n      background-color: #444;\\n      color: #fff; }\\n\\naside.messages {\\n  padding: 0; }\\n\\n#materio-sapi-search-form .form-item, #materio-sapi-search-form input.button {\\n  display: inline-block; }\\n\\narticle.node--type-frontpage .node__content .field--name-field-what-is-materio:not(:nth-child(1)),\\narticle.node--type-frontpage .node__content .field--name-field-a-database:not(:nth-child(1)),\\narticle.node--type-frontpage .node__content .field--name-field-showrooms:not(:nth-child(1)),\\narticle.node--type-frontpage .node__content .field--name-field-blabla:not(:nth-child(1)),\\narticle.node--type-frontpage .node__content .field--name-field-pricing:not(:nth-child(1)) {\\n  margin-top: 1em; }\\n\\narticle.node--type-frontpage .node__content .field--name-field-what-is-materio .field__label,\\narticle.node--type-frontpage .node__content .field--name-field-a-database .field__label,\\narticle.node--type-frontpage .node__content .field--name-field-showrooms .field__label,\\narticle.node--type-frontpage .node__content .field--name-field-blabla .field__label,\\narticle.node--type-frontpage .node__content .field--name-field-pricing .field__label {\\n  font-size: 2.2em;\\n  font-weight: bold; }\\n\\narticle.node--type-frontpage .node__content .field--name-computed-materials-reference .field__item,\\narticle.node--type-frontpage .node__content .field--name-computed-showrooms-reference .field__item,\\narticle.node--type-frontpage .node__content .field--name-computed-articles-reference .field__item {\\n  display: inline-block;\\n  vertical-align: top;\\n  max-width: 250px; }\\n\", \"\"]);\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/assets/styles/main.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js");
+eval("exports = module.exports = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\")(false);\n// Module\nexports.push([module.i, \"body {\\n  background: white; }\\n\\na {\\n  color: inherit;\\n  text-decoration: none; }\\n\\na, a:focus, a:active {\\n  outline: none; }\\n\\na:focus {\\n  -moz-outline-style: none; }\\n\\n.col-1, .small-col-1, .med-col-1, .large-col-1, .col-2, .small-col-2, .med-col-2, .large-col-2, .col-3, .small-col-3, .med-col-3, .large-col-3, .col-4, .small-col-4, .med-col-4, .large-col-4, .col-5, .small-col-5, .med-col-5, .large-col-5, .col-6, .small-col-6, .med-col-6, .large-col-6, .col-7, .small-col-7, .med-col-7, .large-col-7, .col-8, .small-col-8, .med-col-8, .large-col-8, .col-9, .small-col-9, .med-col-9, .large-col-9, .col-10, .small-col-10, .med-col-10, .large-col-10, .col-11, .small-col-11, .med-col-11, .large-col-11, .col-12, .small-col-12, .med-col-12, .large-col-12, .col-1-offset-1, .col-1-offset-2, .col-1-offset-3, .col-1-offset-4, .col-1-offset-5, .col-1-offset-6, .col-1-offset-7, .col-1-offset-8, .col-1-offset-9, .col-1-offset-10, .col-1-offset-11, .col-2-offset-1, .col-2-offset-2, .col-2-offset-3, .col-2-offset-4, .col-2-offset-5, .col-2-offset-6, .col-2-offset-7, .col-2-offset-8, .col-2-offset-9, .col-2-offset-10, .col-3-offset-1, .col-3-offset-2, .col-3-offset-3, .col-3-offset-4, .col-3-offset-5, .col-3-offset-6, .col-3-offset-7, .col-3-offset-8, .col-3-offset-9, .col-4-offset-1, .col-4-offset-2, .col-4-offset-3, .col-4-offset-4, .col-4-offset-5, .col-4-offset-6, .col-4-offset-7, .col-4-offset-8, .col-5-offset-1, .col-5-offset-2, .col-5-offset-3, .col-5-offset-4, .col-5-offset-5, .col-5-offset-6, .col-5-offset-7, .col-6-offset-1, .col-6-offset-2, .col-6-offset-3, .col-6-offset-4, .col-6-offset-5, .col-6-offset-6, .col-7-offset-1, .col-7-offset-2, .col-7-offset-3, .col-7-offset-4, .col-7-offset-5, .col-8-offset-1, .col-8-offset-2, .col-8-offset-3, .col-8-offset-4, .col-9-offset-1, .col-9-offset-2, .col-9-offset-3, .col-10-offset-1, .col-10-offset-2, .col-11-offset-1 {\\n  width: 100%;\\n  float: left;\\n  box-sizing: border-box; }\\n\\n.row {\\n  position: relative; }\\n  .row > * {\\n    font-size: 16px; }\\n\\n.col-1 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 8.33333%; }\\n  .col-1:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-1 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 8.33333%; }\\n    .small-col-1:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-1 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 8.33333%; }\\n    .med-col-1:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-1 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 8.33333%; }\\n    .large-col-1:last-child {\\n      padding-right: 0; } }\\n\\n.col-2 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 16.66667%; }\\n  .col-2:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-2 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 16.66667%; }\\n    .small-col-2:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-2 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 16.66667%; }\\n    .med-col-2:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-2 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 16.66667%; }\\n    .large-col-2:last-child {\\n      padding-right: 0; } }\\n\\n.col-3 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 25%; }\\n  .col-3:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-3 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 25%; }\\n    .small-col-3:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-3 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 25%; }\\n    .med-col-3:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-3 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 25%; }\\n    .large-col-3:last-child {\\n      padding-right: 0; } }\\n\\n.col-4 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 33.33333%; }\\n  .col-4:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-4 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 33.33333%; }\\n    .small-col-4:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-4 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 33.33333%; }\\n    .med-col-4:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-4 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 33.33333%; }\\n    .large-col-4:last-child {\\n      padding-right: 0; } }\\n\\n.col-5 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 41.66667%; }\\n  .col-5:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-5 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 41.66667%; }\\n    .small-col-5:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-5 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 41.66667%; }\\n    .med-col-5:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-5 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 41.66667%; }\\n    .large-col-5:last-child {\\n      padding-right: 0; } }\\n\\n.col-6 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 50%; }\\n  .col-6:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-6 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 50%; }\\n    .small-col-6:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-6 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 50%; }\\n    .med-col-6:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-6 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 50%; }\\n    .large-col-6:last-child {\\n      padding-right: 0; } }\\n\\n.col-7 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 58.33333%; }\\n  .col-7:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-7 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 58.33333%; }\\n    .small-col-7:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-7 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 58.33333%; }\\n    .med-col-7:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-7 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 58.33333%; }\\n    .large-col-7:last-child {\\n      padding-right: 0; } }\\n\\n.col-8 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 66.66667%; }\\n  .col-8:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-8 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 66.66667%; }\\n    .small-col-8:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-8 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 66.66667%; }\\n    .med-col-8:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-8 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 66.66667%; }\\n    .large-col-8:last-child {\\n      padding-right: 0; } }\\n\\n.col-9 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 75%; }\\n  .col-9:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-9 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 75%; }\\n    .small-col-9:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-9 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 75%; }\\n    .med-col-9:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-9 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 75%; }\\n    .large-col-9:last-child {\\n      padding-right: 0; } }\\n\\n.col-10 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 83.33333%; }\\n  .col-10:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-10 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 83.33333%; }\\n    .small-col-10:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-10 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 83.33333%; }\\n    .med-col-10:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-10 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 83.33333%; }\\n    .large-col-10:last-child {\\n      padding-right: 0; } }\\n\\n.col-11 {\\n  padding-left: 0em;\\n  padding-right: 1em;\\n  margin-left: 0%;\\n  width: 91.66667%; }\\n  .col-11:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-11 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 91.66667%; }\\n    .small-col-11:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-11 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 91.66667%; }\\n    .med-col-11:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-11 {\\n    padding-left: 0em;\\n    padding-right: 1em;\\n    margin-left: 0%;\\n    width: 91.66667%; }\\n    .large-col-11:last-child {\\n      padding-right: 0; } }\\n\\n.col-12 {\\n  padding-left: 0em;\\n  padding-right: 0;\\n  margin-left: 0%;\\n  width: 100%; }\\n  .col-12:last-child {\\n    padding-right: 0; }\\n\\n@media only screen and (max-width: 768px) {\\n  .small-col-12 {\\n    padding-left: 0em;\\n    padding-right: 0;\\n    margin-left: 0%;\\n    width: 100%; }\\n    .small-col-12:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 769px) and (max-width: 1080px) {\\n  .med-col-12 {\\n    padding-left: 0em;\\n    padding-right: 0;\\n    margin-left: 0%;\\n    width: 100%; }\\n    .med-col-12:last-child {\\n      padding-right: 0; } }\\n\\n@media only screen and (min-width: 1081px) {\\n  .large-col-12 {\\n    padding-left: 0em;\\n    padding-right: 0;\\n    margin-left: 0%;\\n    width: 100%; }\\n    .large-col-12:last-child {\\n      padding-right: 0; } }\\n\\n.col-1-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 8.33333%;\\n  width: 8.33333%; }\\n  .col-1-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 16.66667%;\\n  width: 8.33333%; }\\n  .col-1-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 25%;\\n  width: 8.33333%; }\\n  .col-1-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 33.33333%;\\n  width: 8.33333%; }\\n  .col-1-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 41.66667%;\\n  width: 8.33333%; }\\n  .col-1-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-6 {\\n  padding-left: 6em;\\n  padding-right: 1em;\\n  margin-left: 50%;\\n  width: 8.33333%; }\\n  .col-1-offset-6:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-7 {\\n  padding-left: 7em;\\n  padding-right: 1em;\\n  margin-left: 58.33333%;\\n  width: 8.33333%; }\\n  .col-1-offset-7:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-8 {\\n  padding-left: 8em;\\n  padding-right: 1em;\\n  margin-left: 66.66667%;\\n  width: 8.33333%; }\\n  .col-1-offset-8:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-9 {\\n  padding-left: 9em;\\n  padding-right: 1em;\\n  margin-left: 75%;\\n  width: 8.33333%; }\\n  .col-1-offset-9:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-10 {\\n  padding-left: 10em;\\n  padding-right: 1em;\\n  margin-left: 83.33333%;\\n  width: 8.33333%; }\\n  .col-1-offset-10:last-child {\\n    padding-right: 0; }\\n\\n.col-1-offset-11 {\\n  padding-left: 11em;\\n  padding-right: 1em;\\n  margin-left: 91.66667%;\\n  width: 8.33333%; }\\n  .col-1-offset-11:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 16.66667%;\\n  width: 16.66667%; }\\n  .col-2-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 33.33333%;\\n  width: 16.66667%; }\\n  .col-2-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 50%;\\n  width: 16.66667%; }\\n  .col-2-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 66.66667%;\\n  width: 16.66667%; }\\n  .col-2-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 83.33333%;\\n  width: 16.66667%; }\\n  .col-2-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-6 {\\n  padding-left: 6em;\\n  padding-right: 1em;\\n  margin-left: 100%;\\n  width: 16.66667%; }\\n  .col-2-offset-6:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-7 {\\n  padding-left: 7em;\\n  padding-right: 1em;\\n  margin-left: 116.66667%;\\n  width: 16.66667%; }\\n  .col-2-offset-7:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-8 {\\n  padding-left: 8em;\\n  padding-right: 1em;\\n  margin-left: 133.33333%;\\n  width: 16.66667%; }\\n  .col-2-offset-8:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-9 {\\n  padding-left: 9em;\\n  padding-right: 1em;\\n  margin-left: 150%;\\n  width: 16.66667%; }\\n  .col-2-offset-9:last-child {\\n    padding-right: 0; }\\n\\n.col-2-offset-10 {\\n  padding-left: 10em;\\n  padding-right: 1em;\\n  margin-left: 166.66667%;\\n  width: 16.66667%; }\\n  .col-2-offset-10:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 25%;\\n  width: 25%; }\\n  .col-3-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 50%;\\n  width: 25%; }\\n  .col-3-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 75%;\\n  width: 25%; }\\n  .col-3-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 100%;\\n  width: 25%; }\\n  .col-3-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 125%;\\n  width: 25%; }\\n  .col-3-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-6 {\\n  padding-left: 6em;\\n  padding-right: 1em;\\n  margin-left: 150%;\\n  width: 25%; }\\n  .col-3-offset-6:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-7 {\\n  padding-left: 7em;\\n  padding-right: 1em;\\n  margin-left: 175%;\\n  width: 25%; }\\n  .col-3-offset-7:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-8 {\\n  padding-left: 8em;\\n  padding-right: 1em;\\n  margin-left: 200%;\\n  width: 25%; }\\n  .col-3-offset-8:last-child {\\n    padding-right: 0; }\\n\\n.col-3-offset-9 {\\n  padding-left: 9em;\\n  padding-right: 1em;\\n  margin-left: 225%;\\n  width: 25%; }\\n  .col-3-offset-9:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 33.33333%;\\n  width: 33.33333%; }\\n  .col-4-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 66.66667%;\\n  width: 33.33333%; }\\n  .col-4-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 100%;\\n  width: 33.33333%; }\\n  .col-4-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 133.33333%;\\n  width: 33.33333%; }\\n  .col-4-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 166.66667%;\\n  width: 33.33333%; }\\n  .col-4-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-6 {\\n  padding-left: 6em;\\n  padding-right: 1em;\\n  margin-left: 200%;\\n  width: 33.33333%; }\\n  .col-4-offset-6:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-7 {\\n  padding-left: 7em;\\n  padding-right: 1em;\\n  margin-left: 233.33333%;\\n  width: 33.33333%; }\\n  .col-4-offset-7:last-child {\\n    padding-right: 0; }\\n\\n.col-4-offset-8 {\\n  padding-left: 8em;\\n  padding-right: 1em;\\n  margin-left: 266.66667%;\\n  width: 33.33333%; }\\n  .col-4-offset-8:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 41.66667%;\\n  width: 41.66667%; }\\n  .col-5-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 83.33333%;\\n  width: 41.66667%; }\\n  .col-5-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 125%;\\n  width: 41.66667%; }\\n  .col-5-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 166.66667%;\\n  width: 41.66667%; }\\n  .col-5-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 208.33333%;\\n  width: 41.66667%; }\\n  .col-5-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-6 {\\n  padding-left: 6em;\\n  padding-right: 1em;\\n  margin-left: 250%;\\n  width: 41.66667%; }\\n  .col-5-offset-6:last-child {\\n    padding-right: 0; }\\n\\n.col-5-offset-7 {\\n  padding-left: 7em;\\n  padding-right: 1em;\\n  margin-left: 291.66667%;\\n  width: 41.66667%; }\\n  .col-5-offset-7:last-child {\\n    padding-right: 0; }\\n\\n.col-6-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 50%;\\n  width: 50%; }\\n  .col-6-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-6-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 100%;\\n  width: 50%; }\\n  .col-6-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-6-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 150%;\\n  width: 50%; }\\n  .col-6-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-6-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 200%;\\n  width: 50%; }\\n  .col-6-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-6-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 250%;\\n  width: 50%; }\\n  .col-6-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-6-offset-6 {\\n  padding-left: 6em;\\n  padding-right: 1em;\\n  margin-left: 300%;\\n  width: 50%; }\\n  .col-6-offset-6:last-child {\\n    padding-right: 0; }\\n\\n.col-7-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 58.33333%;\\n  width: 58.33333%; }\\n  .col-7-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-7-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 116.66667%;\\n  width: 58.33333%; }\\n  .col-7-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-7-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 175%;\\n  width: 58.33333%; }\\n  .col-7-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-7-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 233.33333%;\\n  width: 58.33333%; }\\n  .col-7-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-7-offset-5 {\\n  padding-left: 5em;\\n  padding-right: 1em;\\n  margin-left: 291.66667%;\\n  width: 58.33333%; }\\n  .col-7-offset-5:last-child {\\n    padding-right: 0; }\\n\\n.col-8-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 66.66667%;\\n  width: 66.66667%; }\\n  .col-8-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-8-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 133.33333%;\\n  width: 66.66667%; }\\n  .col-8-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-8-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 200%;\\n  width: 66.66667%; }\\n  .col-8-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-8-offset-4 {\\n  padding-left: 4em;\\n  padding-right: 1em;\\n  margin-left: 266.66667%;\\n  width: 66.66667%; }\\n  .col-8-offset-4:last-child {\\n    padding-right: 0; }\\n\\n.col-9-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 75%;\\n  width: 75%; }\\n  .col-9-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-9-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 150%;\\n  width: 75%; }\\n  .col-9-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-9-offset-3 {\\n  padding-left: 3em;\\n  padding-right: 1em;\\n  margin-left: 225%;\\n  width: 75%; }\\n  .col-9-offset-3:last-child {\\n    padding-right: 0; }\\n\\n.col-10-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 83.33333%;\\n  width: 83.33333%; }\\n  .col-10-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col-10-offset-2 {\\n  padding-left: 2em;\\n  padding-right: 1em;\\n  margin-left: 166.66667%;\\n  width: 83.33333%; }\\n  .col-10-offset-2:last-child {\\n    padding-right: 0; }\\n\\n.col-11-offset-1 {\\n  padding-left: 1em;\\n  padding-right: 1em;\\n  margin-left: 91.66667%;\\n  width: 91.66667%; }\\n  .col-11-offset-1:last-child {\\n    padding-right: 0; }\\n\\n.col.float-right {\\n  float: right;\\n  padding-right: 0;\\n  padding-left: 1em; }\\n\\nbody, html {\\n  position: relative;\\n  width: 100%;\\n  height: 100%;\\n  font-family: sans-serif;\\n  font-style: normal;\\n  margin: 0;\\n  padding: 0; }\\n\\nbody.toolbar-horizontal.toolbar-themes.toolbar-no-tabs {\\n  padding-top: 24px !important; }\\n\\nheader[role=\\\"banner\\\"] {\\n  background-color: #fff;\\n  overflow: visible;\\n  position: fixed;\\n  z-index: 10;\\n  width: 100vw;\\n  height: 80px; }\\n  header[role=\\\"banner\\\"] .wrapper .header-block {\\n    min-height: 15px;\\n    font-size: 0; }\\n    header[role=\\\"banner\\\"] .wrapper .header-block.header-right {\\n      text-align: right; }\\n    header[role=\\\"banner\\\"] .wrapper .header-block > * {\\n      display: inline-block;\\n      vertical-align: top;\\n      font-size: 16px;\\n      text-align: left; }\\n\\nmain[role=\\\"main\\\"] {\\n  padding-top: 80px; }\\n\\nbody {\\n  font-size: 16px;\\n  font-family: \\\"Ubuntu\\\",Arial,\\\"MS Trebuchet\\\",sans-serif;\\n  font-weight: 500;\\n  font-style: normal;\\n  line-height: 1.3; }\\n\\naside.messages {\\n  border: none; }\\n\\nheader[role=\\\"banner\\\"] {\\n  padding: 0.2em 0 0 0; }\\n  header[role=\\\"banner\\\"] #block-sitebranding h1 {\\n    margin: 0;\\n    line-height: 1; }\\n  header[role=\\\"banner\\\"] #block-userlogin {\\n    position: relative;\\n    width: 8em;\\n    overflow: visible; }\\n    header[role=\\\"banner\\\"] #block-userlogin h2 {\\n      margin: 0;\\n      font-size: 1em;\\n      font-weight: 400; }\\n    header[role=\\\"banner\\\"] #block-userlogin > section {\\n      background-color: #fff;\\n      overflow: hidden;\\n      width: 11em;\\n      height: 1px;\\n      padding: 0.01em 1em;\\n      box-sizing: content-box;\\n      transition: all 0.4s ease-in-out;\\n      transition-delay: 2s;\\n      position: absolute;\\n      right: 0;\\n      top: 1.7em;\\n      box-sizing: content-box; }\\n    header[role=\\\"banner\\\"] #block-userlogin:hover > section {\\n      transition-delay: 0s;\\n      height: 12em;\\n      padding: 1em 1em;\\n      box-shadow: 0 0 10px #ccc; }\\n    header[role=\\\"banner\\\"] #block-userlogin .form-item {\\n      margin: 0;\\n      position: relative;\\n      width: 100%; }\\n      header[role=\\\"banner\\\"] #block-userlogin .form-item.form-item-name {\\n        margin: 2px 0 0.5em 0; }\\n        header[role=\\\"banner\\\"] #block-userlogin .form-item.form-item-name input {\\n          width: 90%;\\n          padding: 0;\\n          box-sizing: content-box; }\\n      header[role=\\\"banner\\\"] #block-userlogin .form-item.form-item-pass {\\n        margin: 0 0 0.5em 0; }\\n        header[role=\\\"banner\\\"] #block-userlogin .form-item.form-item-pass input {\\n          width: 90%;\\n          padding: 0;\\n          box-sizing: content-box; }\\n      header[role=\\\"banner\\\"] #block-userlogin .form-item.form-item-persistent-login {\\n        font-size: 0.756em; }\\n        header[role=\\\"banner\\\"] #block-userlogin .form-item.form-item-persistent-login label {\\n          vertical-align: top; }\\n    header[role=\\\"banner\\\"] #block-userlogin #edit-actions {\\n      margin: 0; }\\n    header[role=\\\"banner\\\"] #block-userlogin .item-list ul {\\n      margin: 0; }\\n      header[role=\\\"banner\\\"] #block-userlogin .item-list ul li {\\n        list-style: none;\\n        margin: 0; }\\n        header[role=\\\"banner\\\"] #block-userlogin .item-list ul li a {\\n          font-size: 0.756em; }\\n  header[role=\\\"banner\\\"] #block-languageswitcher h2 {\\n    margin: 0.1em 0 0 0;\\n    font-size: 0.756em;\\n    font-weight: 400;\\n    padding: 0.1em 0.4em 0.2em;\\n    border-radius: 3px;\\n    background-color: #444;\\n    color: #fff;\\n    display: inline-block;\\n    vertical-align: top; }\\n  header[role=\\\"banner\\\"] #block-languageswitcher > ul.links {\\n    overflow: hidden;\\n    width: 5em;\\n    height: 1px;\\n    padding: 0.01em 0;\\n    margin: 0;\\n    box-sizing: content-box;\\n    transition: all 0.4s ease-in-out; }\\n  header[role=\\\"banner\\\"] #block-languageswitcher:hover > ul.links {\\n    transition-delay: 0s;\\n    height: 2em;\\n    padding: 0.3em 0; }\\n  header[role=\\\"banner\\\"] #block-languageswitcher li {\\n    list-style: none;\\n    padding: 0; }\\n    header[role=\\\"banner\\\"] #block-languageswitcher li.is-active {\\n      display: none; }\\n    header[role=\\\"banner\\\"] #block-languageswitcher li a {\\n      margin: 0;\\n      font-size: 0.756em;\\n      font-weight: 400;\\n      padding: 0.2em 0.4em;\\n      border-radius: 3px;\\n      background-color: #444;\\n      color: #fff; }\\n\\naside.messages {\\n  padding: 0; }\\n\\n#materio-sapi-search-form .form-item, #materio-sapi-search-form input.button {\\n  display: inline-block; }\\n\\narticle.node--type-frontpage .node__content .field--name-field-what-is-materio:not(:nth-child(1)),\\narticle.node--type-frontpage .node__content .field--name-field-a-database:not(:nth-child(1)),\\narticle.node--type-frontpage .node__content .field--name-field-showrooms:not(:nth-child(1)),\\narticle.node--type-frontpage .node__content .field--name-field-blabla:not(:nth-child(1)),\\narticle.node--type-frontpage .node__content .field--name-field-pricing:not(:nth-child(1)) {\\n  margin-top: 1em; }\\n\\narticle.node--type-frontpage .node__content .field--name-field-what-is-materio .field__label,\\narticle.node--type-frontpage .node__content .field--name-field-a-database .field__label,\\narticle.node--type-frontpage .node__content .field--name-field-showrooms .field__label,\\narticle.node--type-frontpage .node__content .field--name-field-blabla .field__label,\\narticle.node--type-frontpage .node__content .field--name-field-pricing .field__label {\\n  font-size: 2.2em;\\n  font-weight: bold; }\\n\\narticle.node--type-frontpage .node__content .field--name-computed-materials-reference .field__item,\\narticle.node--type-frontpage .node__content .field--name-computed-showrooms-reference .field__item,\\narticle.node--type-frontpage .node__content .field--name-computed-articles-reference .field__item {\\n  display: inline-block;\\n  vertical-align: top;\\n  max-width: 250px; }\\n\\n.cards-list > ul {\\n  margin: 0;\\n  padding: 0; }\\n  .cards-list > ul > li {\\n    list-style: none;\\n    margin: 0 1em 1em 0;\\n    padding: 0;\\n    display: inline-block;\\n    vertical-align: top; }\\n\\n.card {\\n  position: relative;\\n  width: 200px;\\n  height: 295px; }\\n  .card header {\\n    position: absolute;\\n    bottom: 0;\\n    z-index: 10;\\n    color: #fff;\\n    background-color: rgba(0, 0, 0, 0.5);\\n    width: 100%; }\\n    .card header h1, .card header h4 {\\n      margin: 0;\\n      padding: 0; }\\n    .card header h1 {\\n      font-size: 1.5em; }\\n    .card header h4 {\\n      font-size: 1em;\\n      font-weight: normal; }\\n  .card section.images {\\n    position: relative; }\\n    .card section.images img:first-of-type {\\n      z-index: 5; }\\n    .card section.images img:not(:first-of-type) {\\n      position: absolute;\\n      top: 0;\\n      left: 0; }\\n\", \"\"]);\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/assets/styles/main.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js");
 
 /***/ }),
 
@@ -638,7 +638,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"Base\" } }, [\n    _c(\"h1\", { staticClass: \"page-title\" }, [_vm._v(_vm._s(_vm.pagetitle))]),\n    _vm._v(\" \"),\n    _c(\"aside\", { staticClass: \"search-info\" }, [\n      _vm._v(\"\\n    \" + _vm._s(_vm.searchinfos) + \"\\n  \")\n    ]),\n    _vm._v(\" \"),\n    _c(\"div\", { staticClass: \"results\" }, [\n      _c(\n        \"ul\",\n        _vm._l(_vm.items, function(item) {\n          return _c(\n            \"li\",\n            { key: item.nid },\n            [_c(\"Card\", { attrs: { item: item } })],\n            1\n          )\n        }),\n        0\n      )\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"Base\" } }, [\n    _c(\"h1\", { staticClass: \"page-title\" }, [_vm._v(_vm._s(_vm.pagetitle))]),\n    _vm._v(\" \"),\n    !_vm.items.length\n      ? _c(\"div\", { staticClass: \"loading\" }, [\n          _c(\"span\", [_vm._v(\"Loading ...\")])\n        ])\n      : _c(\"div\", { staticClass: \"cards-list\" }, [\n          _c(\"aside\", { staticClass: \"search-info\" }, [\n            _vm._v(\"\\n      \" + _vm._s(_vm.searchinfos) + \"\\n    \")\n          ]),\n          _vm._v(\" \"),\n          _c(\n            \"ul\",\n            _vm._l(_vm.items, function(item) {\n              return _c(\n                \"li\",\n                { key: item.nid },\n                [_c(\"Card\", { attrs: { item: item } })],\n                1\n              )\n            }),\n            0\n          )\n        ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -650,7 +650,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { staticClass: \"card\" }, [\n    _c(\"h1\", [_vm._v(_vm._s(_vm.item.title))])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { staticClass: \"card\" }, [\n    _c(\"header\", [\n      _c(\"h1\", [_vm._v(_vm._s(_vm.item.title))]),\n      _vm._v(\" \"),\n      _c(\"h4\", [_vm._v(_vm._s(_vm.item.description))])\n    ]),\n    _vm._v(\" \"),\n    _c(\n      \"section\",\n      { staticClass: \"images\" },\n      _vm._l(_vm.item.images, function(img) {\n        return _c(\"img\", {\n          staticClass: \"images\",\n          attrs: { src: img.url, title: img.title }\n        })\n      }),\n      0\n    )\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -790,7 +790,7 @@ eval("var g; // This works in non-strict mode\n\ng = function () {\n  return thi
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _store = _interopRequireDefault(__webpack_require__(/*! vuejs/store */ \"./web/themes/custom/materiotheme/vuejs/store/index.js\"));\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _UserBlock = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Block/UserBlock */ \"./web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue\"));\n\nvar _MainContent = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/MainContent */ \"./web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue\"));\n\nvar _SearchBlock = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Block/SearchBlock */ \"./web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\n__webpack_require__(/*! theme/assets/styles/main.scss */ \"./web/themes/custom/materiotheme/assets/styles/main.scss\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n// require('theme/assets/styles/main.scss');\n(function (Drupal, drupalSettings) {\n  var MaterioTheme = function MaterioTheme() {\n    var _v_sitebranding_block, _v_user_block, _v_main_content, _v_search_block;\n\n    var _is_front = drupalSettings.path.isFront;\n    console.log('drupalSettings', drupalSettings); //  ___      _ _\n    // |_ _|_ _ (_) |_\n    //  | || ' \\| |  _|\n    // |___|_||_|_|\\__|\n\n    function init() {\n      console.log(\"MaterioTheme init()\");\n      initVues();\n    }\n\n    function initVues() {\n      initVSiteBrandingBlock();\n      initVUserBlock();\n      initVMainContent();\n      initVSearchBlock();\n    }\n\n    function initVSiteBrandingBlock() {\n      _v_sitebranding_block = new _vue.default({\n        store: _store.default,\n        router: _route.default,\n        el: '#block-sitebranding',\n        methods: {\n          onclick: function onclick(event) {\n            // console.log(\"Clicked on logo event\", event);\n            var href = event.target.getAttribute('href'); // console.log(\"Clicked on logo href\", href);\n\n            this.$router.push(href);\n          }\n        }\n      });\n    }\n\n    function initVUserBlock() {\n      var mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';\n      var props = {\n        title: \"\",\n        loginblock: \"\"\n      };\n\n      switch (mount_point) {\n        case 'block-userlogin':\n          var $block = document.getElementById(mount_point);\n          console.log('initVUserBlock login form html', $block);\n          props.loginblock = $block.outerHTML.trim();\n          break;\n\n        case 'block-userblock':\n        default:\n          break;\n      }\n\n      _v_user_block = new _vue.default({\n        store: _store.default,\n        // computed: {\n        //   ...mapState({\n        //     isloggedin: state => state.User.isloggedin\n        //   })\n        // },\n        created: function created() {\n          // if already loggedin, call store.user to get the user infos\n          if (drupalSettings.user.uid !== 0) {\n            this.$store.commit('User/setUid', drupalSettings.user.uid);\n            this.$store.dispatch('User/getUser');\n          }\n        },\n        render: function render(h) {\n          return h(_UserBlock.default, {\n            props: props\n          });\n        }\n      }).$mount('#' + mount_point); // console.log('initVUserBlock', _v_user_block);\n    }\n\n    function initVMainContent() {\n      var id = \"main-content\";\n      var $main_content = document.querySelector('#' + id); // console.log('main-content', $main_content);\n\n      var main_html = $main_content.innerHTML;\n      _v_main_content = new _vue.default({\n        store: _store.default,\n        render: function render(h) {\n          return h(_MainContent.default, {\n            props: {\n              id: id,\n              html: main_html,\n              isfront: drupalSettings.path.isFront\n            }\n          });\n        }\n      }).$mount('#' + id); // console.log('initTestVContent', v_test_content);\n    }\n\n    function initVSearchBlock() {\n      // console.log('initVSearchBlock');\n      var id = \"block-materiosapisearchblock\";\n      var $search_block = document.getElementById(id);\n      var formhtml = null;\n\n      if ($search_block) {\n        // get the search form html to pass it as template to the vue\n        // we gain display speed vs async downloaded data\n        formhtml = $search_block.innerHTML;\n      } else {\n        // else create the empty block to fill it later with async data\n        $search_block = document.createElement('div');\n        $search_block.setAttribute('id', id);\n        var $region = document.getElementById('content-top');\n        $region.appendChild($search_block);\n      } // in any case create the vue\n\n\n      _v_search_block = new _vue.default({\n        store: _store.default,\n        render: function render(h) {\n          return h(_SearchBlock.default, {\n            props: {\n              blockid: id,\n              formhtml: formhtml\n            }\n          });\n        }\n      }).$mount('#' + id);\n    }\n\n    init();\n  }; // end MaterioTheme()\n\n\n  var materiotheme = new MaterioTheme();\n})(Drupal, drupalSettings);\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/assets/scripts/main.js?");
+eval("\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _store = _interopRequireDefault(__webpack_require__(/*! vuejs/store */ \"./web/themes/custom/materiotheme/vuejs/store/index.js\"));\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _UserBlock = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Block/UserBlock */ \"./web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue\"));\n\nvar _MainContent = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/MainContent */ \"./web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue\"));\n\nvar _SearchBlock = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Block/SearchBlock */ \"./web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\n__webpack_require__(/*! theme/assets/styles/main.scss */ \"./web/themes/custom/materiotheme/assets/styles/main.scss\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n// import autofocus from 'vue-autofocus-directive';\n// Vue.directive('autofocus', autofocus);\n// require('theme/assets/styles/main.scss');\n(function (Drupal, drupalSettings) {\n  var MaterioTheme = function MaterioTheme() {\n    var _v_sitebranding_block, _v_user_block, _v_main_content, _v_search_block;\n\n    var _is_front = drupalSettings.path.isFront;\n    console.log('drupalSettings', drupalSettings); //  ___      _ _\n    // |_ _|_ _ (_) |_\n    //  | || ' \\| |  _|\n    // |___|_||_|_|\\__|\n\n    function init() {\n      console.log(\"MaterioTheme init()\");\n      initVues();\n    }\n\n    function initVues() {\n      initVSiteBrandingBlock();\n      initVUserBlock();\n      initVMainContent();\n      initVSearchBlock();\n    }\n\n    function initVSiteBrandingBlock() {\n      _v_sitebranding_block = new _vue.default({\n        store: _store.default,\n        router: _route.default,\n        el: '#block-sitebranding',\n        methods: {\n          onclick: function onclick(event) {\n            // console.log(\"Clicked on logo event\", event);\n            var href = event.target.getAttribute('href'); // console.log(\"Clicked on logo href\", href);\n\n            this.$router.push(href);\n          }\n        }\n      });\n    }\n\n    function initVUserBlock() {\n      var mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';\n      var props = {\n        title: \"\",\n        loginblock: \"\"\n      };\n\n      switch (mount_point) {\n        case 'block-userlogin':\n          var $block = document.getElementById(mount_point);\n          console.log('initVUserBlock login form html', $block);\n          props.loginblock = $block.outerHTML.trim();\n          break;\n\n        case 'block-userblock':\n        default:\n          break;\n      }\n\n      _v_user_block = new _vue.default({\n        store: _store.default,\n        // computed: {\n        //   ...mapState({\n        //     isloggedin: state => state.User.isloggedin\n        //   })\n        // },\n        created: function created() {\n          // if already loggedin, call store.user to get the user infos\n          if (drupalSettings.user.uid !== 0) {\n            this.$store.commit('User/setUid', drupalSettings.user.uid);\n            this.$store.dispatch('User/getUser');\n          }\n        },\n        render: function render(h) {\n          return h(_UserBlock.default, {\n            props: props\n          });\n        }\n      }).$mount('#' + mount_point); // console.log('initVUserBlock', _v_user_block);\n    }\n\n    function initVMainContent() {\n      var id = \"main-content\";\n      var $main_content = document.querySelector('#' + id); // console.log('main-content', $main_content);\n\n      var main_html = $main_content.innerHTML;\n      _v_main_content = new _vue.default({\n        store: _store.default,\n        render: function render(h) {\n          return h(_MainContent.default, {\n            props: {\n              id: id,\n              html: main_html,\n              isfront: drupalSettings.path.isFront\n            }\n          });\n        }\n      }).$mount('#' + id); // console.log('initTestVContent', v_test_content);\n    }\n\n    function initVSearchBlock() {\n      // console.log('initVSearchBlock');\n      var id = \"block-materiosapisearchblock\";\n      var $search_block = document.getElementById(id);\n      var formhtml = null;\n\n      if ($search_block) {\n        // get the search form html to pass it as template to the vue\n        // we gain display speed vs async downloaded data\n        formhtml = $search_block.innerHTML;\n      } else {\n        // else create the empty block to fill it later with async data\n        $search_block = document.createElement('div');\n        $search_block.setAttribute('id', id);\n        var $region = document.getElementById('content-top');\n        $region.appendChild($search_block);\n      } // in any case create the vue\n\n\n      _v_search_block = new _vue.default({\n        store: _store.default,\n        render: function render(h) {\n          return h(_SearchBlock.default, {\n            props: {\n              blockid: id,\n              formhtml: formhtml\n            }\n          });\n        }\n      }).$mount('#' + id);\n    }\n\n    init();\n  }; // end MaterioTheme()\n\n\n  var materiotheme = new MaterioTheme();\n})(Drupal, drupalSettings);\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/assets/scripts/main.js?");
 
 /***/ }),
 
@@ -1185,7 +1185,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n  namespaced: true,\n  // initial state\n  state: {\n    keys: \"\",\n    term: \"\",\n    items: [],\n    offset: 0,\n    limit: 15,\n    infos: null,\n    count: 0\n  },\n  // getters\n  getters: {},\n  // mutations\n  mutations: {\n    setItems: function setItems(state, items) {\n      state.items = items;\n    },\n    setKeys: function setKeys(state, keys) {\n      state.keys = keys;\n    },\n    setTerm: function setTerm(state, term) {\n      state.term = term;\n    },\n    setInfos: function setInfos(state, infos) {\n      state.infos = infos;\n    },\n    setCount: function setCount(state, count) {\n      state.count = count;\n    },\n    resetOffset: function resetOffset(state) {\n      state.offset = 0;\n    },\n    incrementOffset: function incrementOffset(state) {\n      state.offset += state.limit;\n    }\n  },\n  // actions\n  actions: {\n    newSearch: function newSearch(_ref) {\n      var dispatch = _ref.dispatch,\n          commit = _ref.commit,\n          state = _ref.state;\n      console.log('Search newSearch');\n      commit('resetOffset');\n      dispatch('getResults');\n    },\n    getResults: function getResults(_ref2) {\n      var dispatch = _ref2.dispatch,\n          commit = _ref2.commit,\n          state = _ref2.state;\n      var params = {\n        keys: state.keys,\n        term: state.term,\n        offset: state.offset,\n        limit: state.limit // console.log('Search getResults params', params);\n\n      };\n\n      var q = _querystring.default.stringify(params);\n\n      return _maAxios.MA.get(\"/materio_sapi/getresults?\" + q).then(function (_ref3) {\n        var data = _ref3.data;\n        console.log('search MA getresults data', data);\n        commit('setItems', data.items);\n        commit('setInfos', data.infos);\n        commit('setCount', data.count);\n      }).catch(function (error) {\n        console.warn('Issue with getResults', error);\n        Promise.reject(error);\n      });\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/store/modules/search.js?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n  namespaced: true,\n  // initial state\n  state: {\n    keys: \"\",\n    term: \"\",\n    items: [],\n    offset: 0,\n    limit: 15,\n    infos: null,\n    count: 0\n  },\n  // getters\n  getters: {},\n  // mutations\n  mutations: {\n    setItems: function setItems(state, items) {\n      state.items = items;\n    },\n    resetItems: function resetItems(state) {\n      state.items = [];\n    },\n    setKeys: function setKeys(state, keys) {\n      state.keys = keys;\n    },\n    setTerm: function setTerm(state, term) {\n      state.term = term;\n    },\n    setInfos: function setInfos(state, infos) {\n      state.infos = infos;\n    },\n    setCount: function setCount(state, count) {\n      state.count = count;\n    },\n    resetOffset: function resetOffset(state) {\n      state.offset = 0;\n    },\n    incrementOffset: function incrementOffset(state) {\n      state.offset += state.limit;\n    }\n  },\n  // actions\n  actions: {\n    newSearch: function newSearch(_ref) {\n      var dispatch = _ref.dispatch,\n          commit = _ref.commit,\n          state = _ref.state;\n      console.log('Search newSearch');\n      commit('resetItems');\n      commit('resetOffset');\n      dispatch('getResults');\n    },\n    getResults: function getResults(_ref2) {\n      var dispatch = _ref2.dispatch,\n          commit = _ref2.commit,\n          state = _ref2.state;\n      var params = {\n        keys: state.keys,\n        term: state.term,\n        offset: state.offset,\n        limit: state.limit // console.log('Search getResults params', params);\n\n      };\n\n      var q = _querystring.default.stringify(params);\n\n      return _maAxios.MA.get(\"/materio_sapi/getresults?\" + q).then(function (_ref3) {\n        var data = _ref3.data;\n        console.log('search MA getresults data', data); // commit('setItems', data.items)\n\n        commit('setInfos', data.infos);\n        commit('setCount', data.count);\n        dispatch('getItems', data.items);\n      }).catch(function (error) {\n        console.warn('Issue with getResults', error);\n        Promise.reject(error);\n      });\n    },\n    getItems: function getItems(_ref4, itemslist) {\n      var dispatch = _ref4.dispatch,\n          commit = _ref4.commit,\n          state = _ref4.state;\n      var params = {\n        // include: 'images', // no needs to include thanks to consumers_image_styles module\n        'filter[uuids-groupe][group][conjunction]': 'OR'\n      };\n\n      for (var i = 0; i < itemslist.length; i++) {\n        var uuid = itemslist[i].uuid;\n        params[\"filter[\".concat(uuid, \"][condition][path]\")] = 'id';\n        params[\"filter[\".concat(uuid, \"][condition][value]\")] = uuid;\n        params[\"filter[\".concat(uuid, \"][condition][operator]\")] = '=';\n        params[\"filter[\".concat(uuid, \"][condition][memberOf]\")] = 'uuids-groupe';\n      }\n\n      console.log('search JSONAPI params', params);\n\n      var q = _querystring.default.stringify(params);\n\n      return _jsonAxios.JSONAPI.get('node/materiau?' + q).then(function (_ref5) {\n        var data = _ref5.data;\n        console.log('search getItems data', data);\n        dispatch('parseItems', data); // commit('setItems', data.items)\n      }).catch(function (error) {\n        console.warn('Issue with getItems', error);\n        Promise.reject(error);\n      });\n    },\n    parseItems: function parseItems(_ref6, _ref7) {\n      var dispatch = _ref6.dispatch,\n          commit = _ref6.commit,\n          state = _ref6.state;\n      var data = _ref7.data;\n      console.log('search parseItems data', data);\n      var items = [];\n\n      for (var i = 0; i < data.length; i++) {\n        var itemsrc = data[i];\n        var attrs = itemsrc.attributes;\n        var relations = itemsrc.relationships; // get field values\n\n        var item = {\n          title: attrs.title,\n          description: attrs.field_short_description,\n          body: attrs.body,\n          reference: attrs.field_reference // get images included values\n\n        };\n        var imgsrc = relations.images.data;\n        item.images = [];\n\n        for (var j = 0; j < imgsrc.length; j++) {\n          //   // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array\n          //   let index = included.findIndex(p => p.id == imgsrc[j].id)\n          //   let img = included[index]\n          item.images.push({\n            title: imgsrc[j].meta.title,\n            url: imgsrc[j].meta.imageDerivatives.links.card_medium.href\n          });\n        }\n\n        items.push(item);\n      }\n\n      console.log('items', items);\n      commit('setItems', items);\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/store/modules/search.js?");
 
 /***/ }),
 
diff --git a/web/themes/custom/materiotheme/assets/scripts/main.js b/web/themes/custom/materiotheme/assets/scripts/main.js
index 9443b33..a61ec39 100644
--- a/web/themes/custom/materiotheme/assets/scripts/main.js
+++ b/web/themes/custom/materiotheme/assets/scripts/main.js
@@ -3,6 +3,9 @@ import Vue from 'vue'
 import store from 'vuejs/store'
 import router from 'vuejs/route'
 
+// import autofocus from 'vue-autofocus-directive';
+// Vue.directive('autofocus', autofocus);
+
 import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss
index 63104c1..2bd8a44 100644
--- a/web/themes/custom/materiotheme/assets/styles/main.scss
+++ b/web/themes/custom/materiotheme/assets/styles/main.scss
@@ -210,3 +210,53 @@ article.node--type-frontpage{
     }
   }
 }
+
+
+ //   ___             _
+ //  / __|__ _ _ _ __| |___
+ // | (__/ _` | '_/ _` (_-<
+ //  \___\__,_|_| \__,_/__/
+
+.cards-list{
+  &>ul{
+    margin:0; padding:0;
+    &>li{
+      list-style: none;
+      margin:0 1em 1em 0; padding:0;
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
+}
+
+.card{
+  position: relative;
+  width:200px; height:295px;
+  header{
+    position: absolute;
+    bottom:0;
+    z-index:10;
+    color: #fff;
+    background-color: rgba(0,0,0,0.5);
+    width:100%;
+    h1, h4{ margin:0; padding:0; }
+    h1{
+      font-size: 1.5em;
+    }
+    h4{
+      font-size: 1em;
+      font-weight: normal;
+    }
+
+  }
+  section.images{
+    position: relative;
+    img:first-of-type{
+      z-index:5
+    }
+    img:not(:first-of-type){
+      position: absolute;
+      top:0; left:0;
+    }
+  }
+}
diff --git a/web/themes/custom/materiotheme/vuejs/components/Content/Base.vue b/web/themes/custom/materiotheme/vuejs/components/Content/Base.vue
index 3317a76..67b624e 100644
--- a/web/themes/custom/materiotheme/vuejs/components/Content/Base.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Content/Base.vue
@@ -1,10 +1,13 @@
 <template>
   <div id="Base">
     <h1 class="page-title">{{ pagetitle }}</h1>
-    <aside class="search-info">
-      {{ searchinfos }}
-    </aside>
-    <div class="results">
+    <div class="loading" v-if="!items.length">
+      <span>Loading ...</span>
+    </div>
+    <div class="cards-list" v-else>
+      <aside class="search-info">
+        {{ searchinfos }}
+      </aside>
       <ul>
         <li v-for="item in items" v-bind:key="item.nid">
           <Card :item="item"/>
diff --git a/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue b/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
index 6407847..7146ed6 100644
--- a/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="card">
-    <h1>{{ item.title }}</h1>
+    <header>
+      <h1>{{ item.title }}</h1>
+      <h4>{{ item.description }}</h4>
+    </header>
+    <section class=images>
+      <img class="images" v-for="img in item.images" :src="img.url" :title="img.title"/>
+    </section>
   </div>
 </template>
 
@@ -17,4 +23,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 </style>
diff --git a/web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue b/web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
index 721525e..083f1f3 100644
--- a/web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
@@ -68,8 +68,12 @@ export default {
   mounted(){
     // console.log('SearchForm mounted');
     Drupal.attachBehaviors(this.$el);
+    // get the search input
+    let $input = this.$el.querySelector('#edit-search')
+    // focus on input
+    $input.focus()
     // Catch the jquery ui events for autocmplete widget
-    jQuery(this.$el.querySelector('#edit-search')).on('autocompleteselect', this.onAutoCompleteSelect);
+    jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect);
   },
   render(h) {
     // console.log('searchForm render');
diff --git a/web/themes/custom/materiotheme/vuejs/store/modules/search.js b/web/themes/custom/materiotheme/vuejs/store/modules/search.js
index 900acac..90438a1 100644
--- a/web/themes/custom/materiotheme/vuejs/store/modules/search.js
+++ b/web/themes/custom/materiotheme/vuejs/store/modules/search.js
@@ -24,6 +24,9 @@ export default {
     setItems (state, items) {
       state.items = items
     },
+    resetItems(state) {
+      state.items = []
+    },
     setKeys (state, keys) {
       state.keys = keys
     },
@@ -48,6 +51,7 @@ export default {
   actions : {
     newSearch({ dispatch, commit, state }) {
       console.log('Search newSearch');
+      commit('resetItems')
       commit('resetOffset')
       dispatch('getResults')
     },
@@ -63,14 +67,74 @@ export default {
       return MA.get(`/materio_sapi/getresults?`+q)
         .then(({ data }) => {
           console.log('search MA getresults data', data)
-          commit('setItems', data.items)
+          // commit('setItems', data.items)
           commit('setInfos', data.infos)
           commit('setCount', data.count)
+          dispatch('getItems', data.items)
         })
         .catch(( error ) => {
             console.warn('Issue with getResults', error)
             Promise.reject(error)
         })
+    },
+    getItems({ dispatch, commit, state}, itemslist) {
+      let params = {
+        // include: 'images', // no needs to include thanks to consumers_image_styles module
+        'filter[uuids-groupe][group][conjunction]': 'OR'
+      };
+      for (var i = 0; i < itemslist.length; i++) {
+        let uuid = itemslist[i].uuid
+        params[`filter[${uuid}][condition][path]`] = 'id'
+        params[`filter[${uuid}][condition][value]`] = uuid
+        params[`filter[${uuid}][condition][operator]`] = '='
+        params[`filter[${uuid}][condition][memberOf]`] = 'uuids-groupe'
+      }
+      console.log('search JSONAPI params', params);
+      let q = qs.stringify(params)
+      return JSONAPI.get('node/materiau?'+q)
+        .then(({ data }) => {
+          console.log('search getItems data', data)
+          dispatch('parseItems', data)
+          // commit('setItems', data.items)
+        })
+        .catch(( error ) => {
+            console.warn('Issue with getItems', error)
+            Promise.reject(error)
+        })
+    },
+    parseItems({ dispatch, commit, state }, { data }) {
+      console.log('search parseItems data', data)
+      let items = []
+      for (var i = 0; i < data.length; i++) {
+        let itemsrc = data[i]
+        let attrs = itemsrc.attributes
+        let relations = itemsrc.relationships
+
+        // get field values
+        let item = {
+          title: attrs.title,
+          description: attrs.field_short_description,
+          body: attrs.body,
+          reference: attrs.field_reference,
+        }
+
+        // get images included values
+        let imgsrc = relations.images.data
+        item.images = []
+        for (var j = 0; j < imgsrc.length; j++) {
+        //   // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array
+        //   let index = included.findIndex(p => p.id == imgsrc[j].id)
+        //   let img = included[index]
+          item.images.push({
+            title: imgsrc[j].meta.title,
+            url: imgsrc[j].meta.imageDerivatives.links.card_medium.href
+          })
+        }
+
+        items.push(item)
+      }
+      console.log('items', items);
+      commit('setItems', items);
     }
   }
 }