diff --git a/config/sync/block.block.languageswitcher.yml b/config/sync/block.block.languageswitcher.yml
index 2960e32..2bb9bc5 100644
--- a/config/sync/block.block.languageswitcher.yml
+++ b/config/sync/block.block.languageswitcher.yml
@@ -9,7 +9,7 @@ dependencies:
 id: languageswitcher
 theme: materiotheme
 region: header_right
-weight: 0
+weight: -1
 provider: null
 plugin: 'language_block:language_interface'
 settings:
diff --git a/config/sync/block.block.userblock.yml b/config/sync/block.block.userblock.yml
index ab33461..93e08c5 100644
--- a/config/sync/block.block.userblock.yml
+++ b/config/sync/block.block.userblock.yml
@@ -1,20 +1,28 @@
-uuid: f6ac7bc7-be23-4375-a237-1d9a36edb17e
+uuid: 7d7e2454-1d8e-4e95-8110-985088634608
 langcode: en
 status: true
 dependencies:
   module:
-    - user_block
+    - materio_user
+    - user
   theme:
     - materiotheme
 id: userblock
 theme: materiotheme
 region: header_right
-weight: -1
+weight: -2
 provider: null
 plugin: user_block
 settings:
   id: user_block
   label: 'User block'
-  provider: user_block
+  provider: materio_user
   label_display: visible
-visibility: {  }
+visibility:
+  user_role:
+    id: user_role
+    roles:
+      authenticated: authenticated
+    negate: false
+    context_mapping:
+      user: '@user.current_user_context:current_user'
diff --git a/config/sync/block.block.userlogin.yml b/config/sync/block.block.userlogin.yml
index c7edae2..d4fdbd6 100644
--- a/config/sync/block.block.userlogin.yml
+++ b/config/sync/block.block.userlogin.yml
@@ -9,7 +9,7 @@ dependencies:
 id: userlogin
 theme: materiotheme
 region: header_right
-weight: -2
+weight: -3
 provider: null
 plugin: user_login_block
 settings:
diff --git a/config/sync/core.extension.yml b/config/sync/core.extension.yml
index 3cb401e..cfeef60 100644
--- a/config/sync/core.extension.yml
+++ b/config/sync/core.extension.yml
@@ -96,6 +96,7 @@ module:
   materio_migrate: 0
   materio_samples: 0
   materio_sapi: 0
+  materio_user: 0
   matomo: 0
   maxlength: 0
   menu_block: 0
@@ -146,7 +147,6 @@ module:
   update: 0
   url_to_video_filter: 0
   user: 0
-  user_block: 0
   video_embed_field: 0
   video_embed_wysiwyg: 0
   views_bulk_edit: 0
diff --git a/web/modules/custom/materio_sapi/materio_sapi.routing.yml b/web/modules/custom/materio_sapi/materio_sapi.routing.yml
index 8c874f1..cd43f9c 100644
--- a/web/modules/custom/materio_sapi/materio_sapi.routing.yml
+++ b/web/modules/custom/materio_sapi/materio_sapi.routing.yml
@@ -13,7 +13,7 @@ materio_sapi.search_form:
     _format: json
   requirements:
     _permission: 'access materio search'
-#
+
 # materio_sapi.materio_sapi_search_form:
 #   path: '/materio_sapi/form/materio_sapi_search'
 #   defaults:
@@ -21,4 +21,3 @@ materio_sapi.search_form:
 #     _title: 'MaterioSapiSearchForm'
 #   requirements:
 #     _access: 'TRUE'
-#
diff --git a/web/modules/custom/materio_user/materio_user.info.yml b/web/modules/custom/materio_user/materio_user.info.yml
new file mode 100644
index 0000000..1098bb0
--- /dev/null
+++ b/web/modules/custom/materio_user/materio_user.info.yml
@@ -0,0 +1,5 @@
+name: 'materio_user'
+type: module
+description: ''
+core: 8.x
+package: 'Materio'
diff --git a/web/modules/custom/materio_user/materio_user.module b/web/modules/custom/materio_user/materio_user.module
new file mode 100644
index 0000000..4f30a5c
--- /dev/null
+++ b/web/modules/custom/materio_user/materio_user.module
@@ -0,0 +1,57 @@
+<?php
+
+/**
+ * @file
+ * Contains materio_user.module.
+ */
+
+use \Drupal\Core\Form\FormStateInterface;
+use \Drupal\Core\Block\BlockPluginInterface;
+
+/**
+ * implements hook_form_FORM_ID_alter()
+ *
+ */
+function materio_user_form_user_login_form_alter(&$form, FormStateInterface $form_state, $form_id) {
+  // Drupal::logger('materio_user')->notice(print_r($form, true));
+  $form['name']['#attributes'] += array(
+    "v-model" => "mail",
+    "@keyup.enter" => "login"
+  );
+
+  $form['pass']['#attributes'] = array(
+    "v-model" => "password",
+    "@keyup.enter" => "login"
+  );
+
+  $form['actions']['submit']['#attributes'] = array(
+    "@click.prevent" => "login"
+  );
+
+}
+
+/**
+ * implements hook_block_view_BASE_BLOCK_ID_alter()
+ *
+ * https://www.drupal.org/project/drupal/issues/2626224
+ */
+function materio_user_block_view_user_login_block_alter(array &$build, BlockPluginInterface $block) {
+  $build['#pre_render'][] = '_materio_user_user_login_block_pre_render';
+}
+
+function _materio_user_user_login_block_pre_render(array $build){
+  $user_links = &$build['content']['user_links'];
+  $items = &$user_links['#items'];
+  // ksm($items);
+  $items['create_account']['#url']->mergeOptions(array(
+    "attributes" => array(
+      "@click.prevent" => "create_account"
+    )
+  ));
+  $items['request_password']['#url']->mergeOptions(array(
+    'attributes' => array(
+      "@click.prevent" => "request_password"
+    )
+  ));
+  return $build;
+}
diff --git a/web/modules/custom/materio_user/materio_user.routing.yml b/web/modules/custom/materio_user/materio_user.routing.yml
new file mode 100644
index 0000000..f8b21bb
--- /dev/null
+++ b/web/modules/custom/materio_user/materio_user.routing.yml
@@ -0,0 +1,15 @@
+materio_user.login_form:
+  path: '/materio_user/login_form'
+  defaults:
+    _controller: '\Drupal\materio_user\Controller\AjaxLoginForm::getForm'
+    _format: json
+  requirements:
+    _access: 'TRUE'
+
+materio_user.login_block:
+  path: '/materio_user/login_block'
+  defaults:
+    _controller: '\Drupal\materio_user\Controller\AjaxLoginBlock::getBlock'
+    _format: json
+  requirements:
+    _access: 'TRUE'
diff --git a/web/modules/custom/materio_user/src/Controller/AjaxLoginBlock.php b/web/modules/custom/materio_user/src/Controller/AjaxLoginBlock.php
new file mode 100644
index 0000000..a4be55d
--- /dev/null
+++ b/web/modules/custom/materio_user/src/Controller/AjaxLoginBlock.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace Drupal\materio_user\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Symfony\Component\HttpFoundation\Request;
+use Drupal\block\Entity\Block;
+use Symfony\Component\HttpFoundation\JsonResponse;
+// use Drupal\Core\Cache\CacheableJsonResponse;
+// use Drupal\Core\Cache\CacheableMetadata;
+// use Drupal\core\render\RenderContext;
+
+
+/**
+ * Defines a route controller.
+ */
+class AjaxLoginBlock extends ControllerBase {
+
+  private function getBlockDefinition(){
+    // $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
+    // \Drupal::logger('materio_user')->notice($language);
+    $this->bid = "userlogin";
+    $this->block = Block::load($this->bid);
+    $this->block_builded = \Drupal::entityManager()->getViewBuilder('block')->view($this->block);
+  }
+
+  /**
+   * Handler for getBlock request.
+   */
+  public function getBlock(Request $request) {
+
+    $this->getBlockDefinition();
+
+    $rendered = \Drupal::service('renderer')->renderRoot($this->block_builded);
+    $data = [
+      'rendered' => $rendered,
+      // '#cache' => [
+      //   'max-age' => \Drupal\Core\Cache\Cache::PERMANENT,
+      //   'tags' => [
+      //     'materio_sapi-search_form-cache',
+      //   ]
+      // ]
+    ];
+
+    $response = new JsonResponse();
+    $response->setData($data);
+    // $response = new CacheableJsonResponse($data);
+    // $response->addCacheableDependency(CacheableMetadata::createFromRenderArray($data));
+
+    return $response;
+  }
+
+
+}
diff --git a/web/modules/custom/materio_user/src/Controller/AjaxLoginForm.php b/web/modules/custom/materio_user/src/Controller/AjaxLoginForm.php
new file mode 100644
index 0000000..f06c982
--- /dev/null
+++ b/web/modules/custom/materio_user/src/Controller/AjaxLoginForm.php
@@ -0,0 +1,82 @@
+<?php
+// https://www.qed42.com/blog/autocomplete-drupal-8
+// https://www.drupal.org/docs/8/modules/search-api/developer-documentation/executing-a-search-in-code
+
+namespace Drupal\materio_user\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Drupal\Core\Form\FormBuilder;
+use Drupal\Core\Form\FormState;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+// use Drupal\Core\Cache\CacheableJsonResponse;
+// use Drupal\Core\Cache\CacheableMetadata;
+use Drupal\core\render\RenderContext;
+
+
+/**
+ * Defines a route controller for entity autocomplete form elements.
+ */
+class AjaxLoginForm extends ControllerBase {
+
+  /**
+   * The form builder.
+   *
+   * @var \Drupal\Core\Form\FormBuilder
+   */
+  protected $formBuilder;
+
+  /**
+   * Construct.
+   */
+  public function __construct(FormBuilder $formBuilder) {
+    $this->formBuilder = $formBuilder;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('form_builder')
+    );
+  }
+
+  private function getFormDefinition(){
+    // $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
+    // \Drupal::logger('materio_user')->notice($language);
+    $this->form_builded = $this->formBuilder->getForm('Drupal\user\Form\UserLoginForm');
+  }
+
+  /**
+   * Handler for getform request.
+   */
+  public function getForm(Request $request) {
+
+    $this->getFormDefinition();
+
+    $rendered = render($this->form_builded);
+    // $form_builded = $this->form_builded;
+    // $rendered = \Drupal::service('renderer')->executeInRenderContext(new RenderContext(), function () use ($form_builded) {
+    //     return render($form_builded);
+    //   });
+    $data = [
+      'rendered' => $rendered,
+      // '#cache' => [
+      //   'max-age' => \Drupal\Core\Cache\Cache::PERMANENT,
+      //   'tags' => [
+      //     'materio_sapi-search_form-cache',
+      //   ]
+      // ]
+    ];
+
+    $response = new JsonResponse();
+    $response->setData($data);
+    // $response = new CacheableJsonResponse($data);
+    // $response->addCacheableDependency(CacheableMetadata::createFromRenderArray($data));
+
+    return $response;
+  }
+
+}
diff --git a/web/modules/custom/user_block/src/Plugin/Block/UserBlock.php b/web/modules/custom/materio_user/src/Plugin/Block/UserBlock.php
similarity index 98%
rename from web/modules/custom/user_block/src/Plugin/Block/UserBlock.php
rename to web/modules/custom/materio_user/src/Plugin/Block/UserBlock.php
index f1574ee..5ee87b3 100644
--- a/web/modules/custom/user_block/src/Plugin/Block/UserBlock.php
+++ b/web/modules/custom/materio_user/src/Plugin/Block/UserBlock.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\user_block\Plugin\Block;
+namespace Drupal\materio_user\Plugin\Block;
 
 use Drupal\Core\Session\AccountProxy;
 use Drupal\Core\Session\AccountProxyInterface;
diff --git a/web/modules/custom/user_block/user_block.info.yml b/web/modules/custom/user_block/user_block.info.yml
deleted file mode 100644
index 9e0208e..0000000
--- a/web/modules/custom/user_block/user_block.info.yml
+++ /dev/null
@@ -1,5 +0,0 @@
-name: 'user_block'
-type: module
-description: 'Provide a block with user name/email and logout link'
-core: 8.x
-package: 'Custom'
diff --git a/web/modules/custom/user_block/user_block.module b/web/modules/custom/user_block/user_block.module
deleted file mode 100644
index e3d4532..0000000
--- a/web/modules/custom/user_block/user_block.module
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/**
- * @file
- * Contains user_block.module.
- */
-
-use Drupal\Core\Routing\RouteMatchInterface;
-
-/**
- * Implements hook_help().
- */
-// function user_block_help($route_name, RouteMatchInterface $route_match) {
-//   switch ($route_name) {
-//     // Main module help for the user_block module.
-//     case 'help.page.user_block':
-//       $output = '';
-//       $output .= '<h3>' . t('About') . '</h3>';
-//       $output .= '<p>' . t('Provide a block with user name/email and logout link') . '</p>';
-//       return $output;
-//
-//     default:
-//   }
-// }
diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js
index fce4c22..3b99d38 100644
--- a/web/themes/custom/materiotheme/assets/dist/main.js
+++ b/web/themes/custom/materiotheme/assets/dist/main.js
@@ -385,6 +385,18 @@ eval("\n\nvar bind = __webpack_require__(/*! ./helpers/bind */ \"./node_modules/
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=script&lang=js&":
+/*!*****************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=script&lang=js& ***!
+  \*****************************************************************************************************************************************************************************************/
+/*! no static exports found */
+/***/ (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 _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  props: ['title', 'block'],\n  data: function data() {\n    return {\n      template: null,\n      mail: '',\n      password: ''\n    };\n  },\n  computed: _objectSpread({}, (0, _vuex.mapState)(['User'])),\n  methods: _objectSpread({}, (0, _vuex.mapActions)({\n    userLogin: 'User/userLogin'\n  }), {\n    login: function login() {\n      this.userLogin({\n        mail: this.mail,\n        pass: this.password\n      });\n    },\n    request_password: function request_password() {\n      console.log('request_password');\n    },\n    create_account: function create_account() {\n      console.log('create_account');\n    }\n  }),\n  beforeMount: function beforeMount() {\n    var _this = this;\n\n    console.log('LoginBlock beforeMount', this._props.block);\n\n    if (this._props.block) {\n      // console.log('LoginBlock beforeMount if this._props.block ok');\n      this.template = _vue.default.compile(this._props.block);\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  mounted: function mounted() {\n    // console.log('LoginBlock mounted');\n    Drupal.attachBehaviors(this.$el);\n  },\n  render: function render(h) {\n    // console.log('LoginBlock render');\n    if (!this.template) {\n      // console.log('LoginBlock render NAN');\n      return h('span', 'Loading ...');\n    } else {\n      // console.log('LoginBlock render template');\n      return this.template.render.call(this);\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue?vue&type=script&lang=js&":
 /*!******************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue?vue&type=script&lang=js& ***!
@@ -393,7 +405,7 @@ eval("\n\nvar bind = __webpack_require__(/*! ./helpers/bind */ \"./node_modules/
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _SearchForm = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Form/SearchForm */ \"./web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nvar _msapiAxios = __webpack_require__(/*! vuejs/api/msapi-axios */ \"./web/themes/custom/materiotheme/vuejs/api/msapi-axios.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  props: ['blockid', 'formhtml'],\n  data: function data() {\n    return {\n      form: null\n    };\n  },\n  computed: _objectSpread({}, (0, _vuex.mapState)({\n    canSearch: function canSearch(state) {\n      return state.User.canSearch;\n    }\n  }), {\n    displayform: function displayform() {\n      console.log('computed displayform');\n      return this.canSearch && this.form;\n    }\n  }),\n  beforeMount: function beforeMount() {\n    console.log('SearchBlock beforeMount');\n    this.form = this.formhtml;\n  },\n  watch: {\n    canSearch: function canSearch(new_value, old_value) {\n      console.log('canSearch changed, old: ' + old_value + \", new: \" + new_value);\n\n      if (new_value && !this.form) {\n        this.getSearchForm();\n      }\n\n      if (!new_value && this.form) {\n        this.form = null;\n      }\n    }\n  },\n  methods: {\n    getSearchForm: function getSearchForm() {\n      var _this = this;\n\n      _msapiAxios.MSAPI.get(\"/search_form\").then(function (_ref) {\n        var data = _ref.data;\n        console.log(\"getSearchForm\");\n        _this.form = data.rendered;\n      }).catch(function (error) {\n        console.warn('Issue with get searchform', error);\n      });\n    }\n  },\n  components: {\n    SearchForm: _SearchForm.default\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.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 _SearchForm = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Form/SearchForm */ \"./web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.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  props: ['blockid', 'formhtml'],\n  data: function data() {\n    return {\n      form: null\n    };\n  },\n  computed: _objectSpread({}, (0, _vuex.mapState)({\n    canSearch: function canSearch(state) {\n      return state.User.canSearch;\n    }\n  }), {\n    displayform: function displayform() {\n      // console.log('computed displayform');\n      return this.canSearch && this.form;\n    }\n  }),\n  beforeMount: function beforeMount() {\n    // console.log('SearchBlock beforeMount');\n    this.form = this.formhtml;\n  },\n  watch: {\n    canSearch: function canSearch(new_value, old_value) {\n      // console.log('canSearch changed, old: '+old_value+\", new: \"+new_value);\n      if (new_value && !this.form) {\n        this.getSearchForm();\n      }\n\n      if (!new_value && this.form) {\n        this.form = null;\n      }\n    }\n  },\n  methods: {\n    getSearchForm: function getSearchForm() {\n      var _this = this;\n\n      _maAxios.MA.get(\"/materio_sapi/search_form\").then(function (_ref) {\n        var data = _ref.data;\n        // console.log(\"getSearchForm\");\n        _this.form = data.rendered;\n      }).catch(function (error) {\n        console.warn('Issue with get searchform', error);\n      });\n    }\n  },\n  components: {\n    SearchForm: _SearchForm.default\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -405,7 +417,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 _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nvar _Login = _interopRequireDefault(__webpack_require__(/*! vuejs/components/User/Login */ \"./web/themes/custom/materiotheme/vuejs/components/User/Login.vue\"));\n\nvar _UserTools = _interopRequireDefault(__webpack_require__(/*! vuejs/components/User/UserTools */ \"./web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue\"));\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  props: ['title', 'form'],\n  computed: _objectSpread({}, (0, _vuex.mapState)({\n    isloggedin: function isloggedin(state) {\n      return state.User.isloggedin;\n    }\n  })),\n  components: {\n    Login: _Login.default,\n    UserTools: _UserTools.default\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.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 _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nvar _LoginBlock = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Block/LoginBlock */ \"./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue\"));\n\nvar _UserTools = _interopRequireDefault(__webpack_require__(/*! vuejs/components/User/UserTools */ \"./web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue\"));\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.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  props: ['title', 'loginblock'],\n  data: function data() {\n    return {\n      block: null\n    };\n  },\n  computed: _objectSpread({}, (0, _vuex.mapState)({\n    isloggedin: function isloggedin(state) {\n      return state.User.isloggedin;\n    }\n  })),\n  beforeMount: function beforeMount() {\n    console.log('UserBlock beforeMount');\n\n    if (this.loginblock) {\n      this.block = this.loginblock;\n    } else {\n      this.getLoginBlock();\n    }\n  },\n  methods: {\n    getLoginBlock: function getLoginBlock() {\n      var _this = this;\n\n      _maAxios.MA.get(\"/materio_user/login_block\").then(function (_ref) {\n        var data = _ref.data;\n        // console.log(\"getLoginBlock data\", data);\n        _this.block = data.rendered;\n      }).catch(function (error) {\n        console.warn('Issue with getLoginBlock', error);\n      });\n    }\n  },\n  components: {\n    LoginBlock: _LoginBlock.default,\n    UserTools: _UserTools.default\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -429,19 +441,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 _msapiAxios = __webpack_require__(/*! vuejs/api/msapi-axios */ \"./web/themes/custom/materiotheme/vuejs/api/msapi-axios.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n  data: function data() {\n    return {\n      template: null,\n      typed: \"\"\n    };\n  },\n  props: ['form'],\n  methods: {\n    keyup: function keyup() {\n      console.log(\"search typed\", this.typed);\n    },\n    submit: function submit() {\n      console.log(\"search clicked\");\n    }\n  },\n  beforeMount: function beforeMount() {\n    console.log('SearchForm beforeMount');\n\n    if (this._props.form) {\n      console.log('SearchForm beforeMount if this._props.form ok');\n      this.template = _vue.default.compile(this._props.form).render;\n    }\n  },\n  beforeUpdate: function beforeUpdate() {\n    console.log('SearchForm beforeUpdate');\n\n    if (this._props.form) {\n      console.log('SearchForm beforeUpdate if this._props.form ok');\n      this.template = _vue.default.compile(this._props.form).render;\n    }\n  },\n  mounted: function mounted() {\n    console.log('SearchForm mounted'); // Drupal.attachBehaviors(this.$el);\n  },\n  updated: function updated() {\n    console.log('SearchForm updated'); // Drupal.attachBehaviors(this.$el);\n  },\n  render: function render(h) {\n    console.log('searchForm render');\n\n    if (!this.template) {\n      return h('span', 'Loading ...');\n    } else {\n      return this.template();\n    }\n  }\n}; // searchform: (resolve, reject) => (\n//   MSAPI.get(`/search_form`)\n//     .then(({data}) => {\n//       // console.log(\"materiosapisearchform\", data);\n//       resolve({\n//         data() {\n//           return {\n//             typed:\"\"\n//           }\n//         },\n//         methods: {\n//           keyup() {\n//             console.log(\"search typed\", this.typed);\n//           },\n//           submit() {\n//             console.log(\"search clicked\");\n//           }\n//         },\n//         mounted() {\n//           Drupal.attachBehaviors(this.$el);\n//         },\n//         template: data.rendered\n//       })\n//     })\n//     .catch(( error ) => {\n//         console.warn('Issue with get searchform', error)\n//         Promise.reject(error)\n//     })\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");
-
-/***/ }),
-
-/***/ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=script&lang=js&":
-/*!***********************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=script&lang=js& ***!
-  \***********************************************************************************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\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  data: function data() {\n    return {\n      mail: '',\n      password: ''\n    };\n  },\n  props: ['title', 'form'],\n  computed: _objectSpread({}, (0, _vuex.mapState)(['User'])),\n  methods: _objectSpread({}, (0, _vuex.mapActions)({\n    userLogin: 'User/userLogin'\n  }), {\n    login: function login() {\n      this.userLogin({\n        mail: this.mail,\n        pass: this.password\n      });\n    }\n  })\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/Login.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\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n  props: ['form'],\n  data: function data() {\n    return {\n      template: null,\n      typed: \"\"\n    };\n  },\n  methods: {\n    keyup: function keyup() {\n      console.log(\"search typed\", this.typed);\n    },\n    submit: function submit() {\n      console.log(\"search clicked\");\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  mounted: function mounted() {\n    // console.log('SearchForm mounted');\n    Drupal.attachBehaviors(this.$el);\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");
 
 /***/ }),
 
@@ -464,18 +464,18 @@ 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: 14em;\\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    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-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\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");
 
 /***/ }),
 
-/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=style&index=0&id=0419cc67&lang=scss&scoped=true&":
-/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=style&index=0&id=0419cc67&lang=scss&scoped=true& ***!
-  \****************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=style&index=0&id=08f975e8&lang=scss&scoped=true&":
+/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=style&index=0&id=08f975e8&lang=scss&scoped=true& ***!
+  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
 /*! 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, \"section[data-v-0419cc67] {\\n  max-width: 300px;\\n}\\ninput[data-v-0419cc67] {\\n  display: block;\\n  max-width: 100%;\\n  margin: 0.5em 0 0 0;\\n}\\nbutton[data-v-0419cc67] {\\n  margin: 0.5em 0 0 0;\\n}\\nul[data-v-0419cc67] {\\n  margin: 0;\\n  padding: 0.5em 0 0 0;\\n}\\nli[data-v-0419cc67] {\\n  list-style: none;\\n  margin: 0.5em 0 0 0;\\n  padding: 0;\\n  font-size: 0.882em;\\n}\\n\", \"\"]);\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options");
+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, \"\", \"\"]);\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -602,7 +602,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 _vm.isloggedin\n    ? _c(\"UserTools\")\n    : _c(\"Login\", { attrs: { title: _vm.title, form: _vm.form } })\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.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 _vm.isloggedin\n    ? _c(\"UserTools\")\n    : _c(\"LoginBlock\", { attrs: { title: _vm.title, block: _vm.block } })\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -618,18 +618,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 
 /***/ }),
 
-/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=template&id=0419cc67&scoped=true&lang=html&":
-/*!***********************************************************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=template&id=0419cc67&scoped=true&lang=html& ***!
-  \***********************************************************************************************************************************************************************************************************************************************************/
-/*! exports provided: render, staticRenderFns */
-/***/ (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: \"block-userlogin\" } }, [\n    _c(\"h2\", [_vm._v(_vm._s(_vm.title))]),\n    _vm._v(\" \"),\n    _c(\"section\", [\n      _c(\"input\", {\n        directives: [\n          {\n            name: \"model\",\n            rawName: \"v-model\",\n            value: _vm.mail,\n            expression: \"mail\"\n          }\n        ],\n        staticClass: \"form-email\",\n        attrs: {\n          id: \"edit-name\",\n          type: \"text\",\n          placeholder: _vm.form.ph_email,\n          name: \"name\"\n        },\n        domProps: { value: _vm.mail },\n        on: {\n          keyup: function($event) {\n            if (\n              !$event.type.indexOf(\"key\") &&\n              _vm._k($event.keyCode, \"enter\", 13, $event.key, \"Enter\")\n            ) {\n              return null\n            }\n            return _vm.login($event)\n          },\n          input: function($event) {\n            if ($event.target.composing) {\n              return\n            }\n            _vm.mail = $event.target.value\n          }\n        }\n      }),\n      _vm._v(\" \"),\n      _c(\"input\", {\n        directives: [\n          {\n            name: \"model\",\n            rawName: \"v-model\",\n            value: _vm.password,\n            expression: \"password\"\n          }\n        ],\n        staticClass: \"form-text\",\n        attrs: {\n          id: \"edit-pass\",\n          type: \"password\",\n          placeholder: _vm.form.ph_pass,\n          name: \"pass\"\n        },\n        domProps: { value: _vm.password },\n        on: {\n          keyup: function($event) {\n            if (\n              !$event.type.indexOf(\"key\") &&\n              _vm._k($event.keyCode, \"enter\", 13, $event.key, \"Enter\")\n            ) {\n              return null\n            }\n            return _vm.login($event)\n          },\n          input: function($event) {\n            if ($event.target.composing) {\n              return\n            }\n            _vm.password = $event.target.value\n          }\n        }\n      }),\n      _vm._v(\" \"),\n      _c(\n        \"button\",\n        {\n          staticClass: \"button\",\n          attrs: { id: \"edit-submit\" },\n          on: {\n            click: function($event) {\n              $event.stopPropagation()\n              return _vm.login($event)\n            }\n          }\n        },\n        [_vm._v(\"\\n      \" + _vm._s(_vm.form.btn_value) + \"\\n    \")]\n      ),\n      _vm._v(\" \"),\n      _c(\"ul\", [\n        _c(\"li\", [\n          _c(\"a\", { attrs: { href: _vm.form.register.href } }, [\n            _vm._v(\"\\n        \" + _vm._s(_vm.form.register.title) + \"\\n      \")\n          ])\n        ]),\n        _vm._v(\" \"),\n        _c(\"li\", [\n          _c(\"a\", { attrs: { href: _vm.form.reset.href } }, [\n            _vm._v(\"\\n        \" + _vm._s(_vm.form.reset.title) + \"\\n      \")\n          ])\n        ])\n      ])\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
-
-/***/ }),
-
 /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue?vue&type=template&id=4e9a834e&scoped=true&lang=html&":
 /*!***************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue?vue&type=template&id=4e9a834e&scoped=true&lang=html& ***!
@@ -654,14 +642,14 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 
 /***/ }),
 
-/***/ "./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=style&index=0&id=0419cc67&lang=scss&scoped=true&":
-/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=style&index=0&id=0419cc67&lang=scss&scoped=true& ***!
-  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ "./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=style&index=0&id=08f975e8&lang=scss&scoped=true&":
+/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=style&index=0&id=08f975e8&lang=scss&scoped=true& ***!
+  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = __webpack_require__(/*! !../../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../node_modules/sass-loader/lib/loader.js!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./Login.vue?vue&type=style&index=0&id=0419cc67&lang=scss&scoped=true& */ \"./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=style&index=0&id=0419cc67&lang=scss&scoped=true&\");\nif(typeof content === 'string') content = [[module.i, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = __webpack_require__(/*! ../../../../../../../node_modules/vue-style-loader/lib/addStylesClient.js */ \"./node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"96d6c9b6\", content, false, {});\n// Hot Module Replacement\nif(false) {}\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options");
+eval("// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = __webpack_require__(/*! !../../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../node_modules/sass-loader/lib/loader.js!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./LoginBlock.vue?vue&type=style&index=0&id=08f975e8&lang=scss&scoped=true& */ \"./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=style&index=0&id=08f975e8&lang=scss&scoped=true&\");\nif(typeof content === 'string') content = [[module.i, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = __webpack_require__(/*! ../../../../../../../node_modules/vue-style-loader/lib/addStylesClient.js */ \"./node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"5b021d7e\", content, false, {});\n// Hot Module Replacement\nif(false) {}\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -742,7 +730,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 _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_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      initUserVBlock();\n      initVMainContent();\n      initVSearchBlock();\n    }\n\n    function initUserVBlock() {\n      var mount_point = drupalSettings.user.uid !== 0 ? '#block-userblock' : '#block-userlogin';\n      var props = {\n        title: \"\",\n        form: \"\"\n      };\n\n      switch (mount_point) {\n        case '#block-userlogin':\n          // let $form = document.getElementById('user-login-form');\n          // console.log('login form html', $form);\n          // props.form = $form.outerHTML\n          var $block = document.querySelector(mount_point);\n          props = {\n            title: $block.querySelector('h2').textContent,\n            form: {\n              ph_email: $block.querySelector('input#edit-name').getAttribute('placeholder'),\n              ph_pass: $block.querySelector('input#edit-pass').getAttribute('placeholder'),\n              btn_value: $block.querySelector('input#edit-submit').getAttribute('value'),\n              register: {\n                title: $block.querySelector('a.create-account-link').textContent,\n                href: $block.querySelector('a.create-account-link').getAttribute('href')\n              },\n              reset: {\n                title: $block.querySelector('a.request-password-link').textContent,\n                href: $block.querySelector('a.request-password-link').getAttribute('href')\n              }\n            }\n          };\n          break;\n\n        case '#block-userblock':\n        default:\n          break;\n      } // console.log(props);\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 (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('initUserVBlock', _v_user_block);\n    }\n\n    function initVMainContent() {\n      var $main_content = document.querySelector('#main-content'); // 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              html: main_html\n            }\n          });\n        }\n      }).$mount('#main-content'); // 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 _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_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      initVUserBlock();\n      initVMainContent();\n      initVSearchBlock();\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 $main_content = document.querySelector('#main-content'); // 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              html: main_html\n            }\n          });\n        }\n      }).$mount('#main-content'); // 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?");
 
 /***/ }),
 
@@ -769,15 +757,15 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 
 /***/ }),
 
-/***/ "./web/themes/custom/materiotheme/vuejs/api/msapi-axios.js":
-/*!*****************************************************************!*\
-  !*** ./web/themes/custom/materiotheme/vuejs/api/msapi-axios.js ***!
-  \*****************************************************************/
+/***/ "./web/themes/custom/materiotheme/vuejs/api/ma-axios.js":
+/*!**************************************************************!*\
+  !*** ./web/themes/custom/materiotheme/vuejs/api/ma-axios.js ***!
+  \**************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.MSAPI = void 0;\n\nvar _axios = _interopRequireDefault(__webpack_require__(/*! axios */ \"./node_modules/axios/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n// https://github.com/alvar0hurtad0/drupal-vuejs-todo/blob/master/frontend/src/api/axiosInterceptor.js\n// console.log('drupalSettings', drupalSettings);\nvar MSAPI = _axios.default.create({\n  baseURL: window.location.origin + '/' + drupalSettings.path.pathPrefix + \"materio_sapi\",\n  withCredentials: true,\n  headers: {\n    \"Content-Type\": \"application/json\"\n  }\n});\n\nexports.MSAPI = MSAPI;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/api/msapi-axios.js?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.MA = void 0;\n\nvar _axios = _interopRequireDefault(__webpack_require__(/*! axios */ \"./node_modules/axios/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n// https://github.com/alvar0hurtad0/drupal-vuejs-todo/blob/master/frontend/src/api/axiosInterceptor.js\n// console.log('drupalSettings', drupalSettings);\nvar MA = _axios.default.create({\n  baseURL: window.location.origin + '/' + drupalSettings.path.pathPrefix,\n  withCredentials: true,\n  headers: {\n    \"Content-Type\": \"application/json\"\n  }\n});\n\nexports.MA = MA;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/api/ma-axios.js?");
 
 /***/ }),
 
@@ -793,6 +781,42 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 
 /***/ }),
 
+/***/ "./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue":
+/*!******************************************************************************!*\
+  !*** ./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue ***!
+  \******************************************************************************/
+/*! no static exports found */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _LoginBlock_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./LoginBlock.vue?vue&type=script&lang=js& */ \"./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=script&lang=js&\");\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _LoginBlock_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _LoginBlock_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n/* harmony import */ var _LoginBlock_vue_vue_type_style_index_0_id_08f975e8_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./LoginBlock.vue?vue&type=style&index=0&id=08f975e8&lang=scss&scoped=true& */ \"./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=style&index=0&id=08f975e8&lang=scss&scoped=true&\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\nvar render, staticRenderFns\n\n\n\n\n\n/* normalize component */\n\nvar component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(\n  _LoginBlock_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"08f975e8\",\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue\"\n/* harmony default export */ __webpack_exports__[\"default\"] = (component.exports);\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?");
+
+/***/ }),
+
+/***/ "./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=script&lang=js&":
+/*!*******************************************************************************************************!*\
+  !*** ./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=script&lang=js& ***!
+  \*******************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_LoginBlock_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../../../node_modules/babel-loader/lib!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./LoginBlock.vue?vue&type=script&lang=js& */ \"./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=script&lang=js&\");\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_LoginBlock_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_LoginBlock_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_LoginBlock_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_LoginBlock_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_LoginBlock_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?");
+
+/***/ }),
+
+/***/ "./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=style&index=0&id=08f975e8&lang=scss&scoped=true&":
+/*!****************************************************************************************************************************************!*\
+  !*** ./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=style&index=0&id=08f975e8&lang=scss&scoped=true& ***!
+  \****************************************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_LoginBlock_vue_vue_type_style_index_0_id_08f975e8_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../../../node_modules/vue-style-loader!../../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../node_modules/sass-loader/lib/loader.js!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./LoginBlock.vue?vue&type=style&index=0&id=08f975e8&lang=scss&scoped=true& */ \"./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?vue&type=style&index=0&id=08f975e8&lang=scss&scoped=true&\");\n/* harmony import */ var _node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_LoginBlock_vue_vue_type_style_index_0_id_08f975e8_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_LoginBlock_vue_vue_type_style_index_0_id_08f975e8_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_LoginBlock_vue_vue_type_style_index_0_id_08f975e8_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_LoginBlock_vue_vue_type_style_index_0_id_08f975e8_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_LoginBlock_vue_vue_type_style_index_0_id_08f975e8_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue?");
+
+/***/ }),
+
 /***/ "./web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue":
 /*!*******************************************************************************!*\
   !*** ./web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue ***!
@@ -925,54 +949,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
 
 /***/ }),
 
-/***/ "./web/themes/custom/materiotheme/vuejs/components/User/Login.vue":
-/*!************************************************************************!*\
-  !*** ./web/themes/custom/materiotheme/vuejs/components/User/Login.vue ***!
-  \************************************************************************/
-/*! no static exports found */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Login_vue_vue_type_template_id_0419cc67_scoped_true_lang_html___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Login.vue?vue&type=template&id=0419cc67&scoped=true&lang=html& */ \"./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=template&id=0419cc67&scoped=true&lang=html&\");\n/* harmony import */ var _Login_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Login.vue?vue&type=script&lang=js& */ \"./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=script&lang=js&\");\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _Login_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _Login_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n/* harmony import */ var _Login_vue_vue_type_style_index_0_id_0419cc67_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Login.vue?vue&type=style&index=0&id=0419cc67&lang=scss&scoped=true& */ \"./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=style&index=0&id=0419cc67&lang=scss&scoped=true&\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n\n\n\n/* normalize component */\n\nvar component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\n  _Login_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  _Login_vue_vue_type_template_id_0419cc67_scoped_true_lang_html___WEBPACK_IMPORTED_MODULE_0__[\"render\"],\n  _Login_vue_vue_type_template_id_0419cc67_scoped_true_lang_html___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"],\n  false,\n  null,\n  \"0419cc67\",\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"web/themes/custom/materiotheme/vuejs/components/User/Login.vue\"\n/* harmony default export */ __webpack_exports__[\"default\"] = (component.exports);\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?");
-
-/***/ }),
-
-/***/ "./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=script&lang=js&":
-/*!*************************************************************************************************!*\
-  !*** ./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=script&lang=js& ***!
-  \*************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../../../node_modules/babel-loader/lib!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./Login.vue?vue&type=script&lang=js& */ \"./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=script&lang=js&\");\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?");
-
-/***/ }),
-
-/***/ "./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=style&index=0&id=0419cc67&lang=scss&scoped=true&":
-/*!**********************************************************************************************************************************!*\
-  !*** ./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=style&index=0&id=0419cc67&lang=scss&scoped=true& ***!
-  \**********************************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_style_index_0_id_0419cc67_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../../../node_modules/vue-style-loader!../../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../node_modules/sass-loader/lib/loader.js!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./Login.vue?vue&type=style&index=0&id=0419cc67&lang=scss&scoped=true& */ \"./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=style&index=0&id=0419cc67&lang=scss&scoped=true&\");\n/* harmony import */ var _node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_style_index_0_id_0419cc67_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_style_index_0_id_0419cc67_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_style_index_0_id_0419cc67_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_style_index_0_id_0419cc67_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_sass_loader_lib_loader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_style_index_0_id_0419cc67_lang_scss_scoped_true___WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?");
-
-/***/ }),
-
-/***/ "./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=template&id=0419cc67&scoped=true&lang=html&":
-/*!*****************************************************************************************************************************!*\
-  !*** ./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=template&id=0419cc67&scoped=true&lang=html& ***!
-  \*****************************************************************************************************************************/
-/*! exports provided: render, staticRenderFns */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_template_id_0419cc67_scoped_true_lang_html___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./Login.vue?vue&type=template&id=0419cc67&scoped=true&lang=html& */ \"./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?vue&type=template&id=0419cc67&scoped=true&lang=html&\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_template_id_0419cc67_scoped_true_lang_html___WEBPACK_IMPORTED_MODULE_0__[\"render\"]; });\n\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Login_vue_vue_type_template_id_0419cc67_scoped_true_lang_html___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"]; });\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/User/Login.vue?");
-
-/***/ }),
-
 /***/ "./web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue":
 /*!****************************************************************************!*\
   !*** ./web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue ***!
diff --git a/web/themes/custom/materiotheme/assets/scripts/main.js b/web/themes/custom/materiotheme/assets/scripts/main.js
index 79f72a3..531513e 100644
--- a/web/themes/custom/materiotheme/assets/scripts/main.js
+++ b/web/themes/custom/materiotheme/assets/scripts/main.js
@@ -30,45 +30,27 @@ import 'theme/assets/styles/main.scss'
     }
 
     function initVues(){
-      initUserVBlock()
+      initVUserBlock()
       initVMainContent()
       initVSearchBlock()
     }
 
-    function initUserVBlock(){
-      let mount_point = drupalSettings.user.uid !== 0 ? '#block-userblock' : '#block-userlogin';
+    function initVUserBlock(){
+      let mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';
       let props = {
         title: "",
-        form:""
+        loginblock:""
       };
       switch (mount_point) {
-        case '#block-userlogin':
-          // let $form = document.getElementById('user-login-form');
-          // console.log('login form html', $form);
-          // props.form = $form.outerHTML
-          let $block = document.querySelector(mount_point);
-          props = {
-            title: $block.querySelector('h2').textContent,
-            form: {
-              ph_email: $block.querySelector('input#edit-name').getAttribute('placeholder'),
-              ph_pass: $block.querySelector('input#edit-pass').getAttribute('placeholder'),
-              btn_value: $block.querySelector('input#edit-submit').getAttribute('value'),
-              register: {
-                title: $block.querySelector('a.create-account-link').textContent,
-                href: $block.querySelector('a.create-account-link').getAttribute('href')
-              },
-              reset: {
-                title: $block.querySelector('a.request-password-link').textContent,
-                href: $block.querySelector('a.request-password-link').getAttribute('href')
-              }
-            }
-          }
+        case 'block-userlogin':
+          let $block = document.getElementById(mount_point);
+          console.log('initVUserBlock login form html', $block);
+          props.loginblock = $block.outerHTML.trim()
           break;
-        case '#block-userblock':
+        case 'block-userblock':
         default:
           break;
       }
-      // console.log(props);
 
       _v_user_block = new Vue({
         store,
@@ -78,14 +60,15 @@ import 'theme/assets/styles/main.scss'
         //   })
         // },
         created () {
+          // if already loggedin, call store.user to get the user infos
           if(drupalSettings.user.uid !== 0){
             this.$store.commit('User/setUid', drupalSettings.user.uid)
             this.$store.dispatch('User/getUser')
           }
         },
         render: h => h(VUserBlock, {props:props})
-      }).$mount(mount_point)
-      // console.log('initUserVBlock', _v_user_block);
+      }).$mount('#'+mount_point)
+      // console.log('initVUserBlock', _v_user_block);
     }
 
     function initVMainContent(){
diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss
index 1752624..63104c1 100644
--- a/web/themes/custom/materiotheme/assets/styles/main.scss
+++ b/web/themes/custom/materiotheme/assets/styles/main.scss
@@ -52,7 +52,7 @@ header[role="banner"]{
     &>section{
       background-color: #fff;
       overflow: hidden;
-      width:14em;
+      width:11em;
       height:1px;
       padding:0.01em 1em;
       // margin:0 0 0 -1em;
@@ -63,6 +63,7 @@ header[role="banner"]{
       position: absolute;
       right:0;
       top:1.7em;
+      box-sizing: content-box;
     }
     &:hover{
       &>section{
@@ -72,6 +73,48 @@ header[role="banner"]{
         box-shadow: 0 0 10px #ccc;
       }
     }
+    .form-item{
+      margin:0;
+      position: relative;
+      width:100%;
+      &.form-item-name{
+        margin:2px 0 0.5em 0;
+        input{
+          width:90%;
+          padding:0;
+          box-sizing: content-box;
+        }
+      }
+      &.form-item-pass{
+        margin:0 0 0.5em 0;
+        input{
+          width:90%;
+          padding:0;
+          box-sizing: content-box;
+        }
+      }
+      &.form-item-persistent-login{
+        font-size: 0.756em;
+        label{
+          vertical-align: top;
+        }
+      }
+    }
+    #edit-actions{
+      margin:0;
+    }
+    .item-list{
+      ul{
+        margin:0;
+        li{
+          list-style: none;
+          margin:0;
+          a{
+            font-size: 0.756em;
+          }
+        }
+      }
+    }
   }
 
   #block-languageswitcher{
diff --git a/web/themes/custom/materiotheme/vuejs/api/msapi-axios.js b/web/themes/custom/materiotheme/vuejs/api/ma-axios.js
similarity index 83%
rename from web/themes/custom/materiotheme/vuejs/api/msapi-axios.js
rename to web/themes/custom/materiotheme/vuejs/api/ma-axios.js
index 57e8f2d..9910e73 100644
--- a/web/themes/custom/materiotheme/vuejs/api/msapi-axios.js
+++ b/web/themes/custom/materiotheme/vuejs/api/ma-axios.js
@@ -4,8 +4,8 @@ import axios from 'axios'
 
 // console.log('drupalSettings', drupalSettings);
 
-export const MSAPI = axios.create({
-  baseURL: window.location.origin + '/' + drupalSettings.path.pathPrefix + `materio_sapi`,
+export const MA = axios.create({
+  baseURL: window.location.origin + '/' + drupalSettings.path.pathPrefix,
   withCredentials: true,
   headers: {
     "Content-Type": "application/json"
diff --git a/web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue b/web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue
new file mode 100644
index 0000000..5b1194f
--- /dev/null
+++ b/web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue
@@ -0,0 +1,84 @@
+<script>
+
+import Vue from 'vue'
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  props: ['title', 'block'],
+  data () {
+    return {
+      template: null,
+      mail: '',
+      password: ''
+    }
+  },
+  computed: {
+    ...mapState(['User'])
+  },
+  methods: {
+    ...mapActions({
+      userLogin: 'User/userLogin'
+    }),
+    login () {
+      this.userLogin({
+        mail: this.mail,
+        pass: this.password
+      })
+    },
+    request_password () {
+      console.log('request_password');
+    },
+    create_account () {
+      console.log('create_account');
+    }
+  },
+  beforeMount() {
+    console.log('LoginBlock beforeMount', this._props.block);
+    if(this._props.block){
+      // console.log('LoginBlock beforeMount if this._props.block ok');
+      this.template = Vue.compile(this._props.block)
+      this.$options.staticRenderFns = [];
+      this._staticTrees = [];
+      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
+    }
+  },
+  mounted(){
+    // console.log('LoginBlock mounted');
+    Drupal.attachBehaviors(this.$el);
+  },
+  render(h) {
+    // console.log('LoginBlock render');
+    if(!this.template){
+      // console.log('LoginBlock render NAN');
+      return h('span', 'Loading ...')
+    }else{
+      // console.log('LoginBlock render template');
+      return this.template.render.call(this)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  // section{
+  //   max-width:300px;
+  // }
+  // input{
+  //   display:block;
+  //   max-width:100%;
+  //   margin:0.5em 0 0 0;
+  // }
+  // button{
+  //   margin:0.5em 0 0 0;
+  // }
+  // ul{
+  //   margin:0; padding:0.5em 0 0 0;
+  // }
+  // li{
+  //   list-style:none;
+  //   margin:0.5em 0 0 0; padding:0;
+  //   font-size:0.882em;
+  // }
+  // a{
+  // }
+</style>
diff --git a/web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue b/web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue
index baf919b..d052b92 100644
--- a/web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue
@@ -9,7 +9,7 @@
 <script>
 import SearchForm from 'vuejs/components/Form/SearchForm'
 import { mapState, mapActions } from 'vuex'
-import { MSAPI } from 'vuejs/api/msapi-axios'
+import { MA } from 'vuejs/api/ma-axios'
 
 export default {
   props: ['blockid', 'formhtml'],
@@ -23,17 +23,17 @@ export default {
       canSearch: state => state.User.canSearch
     }),
     displayform(){
-      console.log('computed displayform');
+      // console.log('computed displayform');
       return this.canSearch && this.form
     }
   },
   beforeMount() {
-    console.log('SearchBlock beforeMount');
+    // console.log('SearchBlock beforeMount');
     this.form = this.formhtml
   },
   watch: {
     canSearch(new_value, old_value) {
-      console.log('canSearch changed, old: '+old_value+", new: "+new_value);
+      // console.log('canSearch changed, old: '+old_value+", new: "+new_value);
       if(new_value && !this.form){
         this.getSearchForm()
       }
@@ -44,9 +44,9 @@ export default {
   },
   methods: {
     getSearchForm(){
-      MSAPI.get(`/search_form`)
+      MA.get(`/materio_sapi/search_form`)
         .then(({data}) => {
-          console.log("getSearchForm");
+          // console.log("getSearchForm");
           this.form = data.rendered
         })
         .catch(( error ) => {
diff --git a/web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue b/web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue
index 15b38db..3241954 100644
--- a/web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue
@@ -1,23 +1,51 @@
 <template lang="html">
   <UserTools v-if="isloggedin" />
-  <Login v-bind:title="title" v-bind:form="form" v-else />
+  <LoginBlock v-bind:title="title" v-bind:block="block" v-else/>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
 
-import Login from 'vuejs/components/User/Login'
+import LoginBlock from 'vuejs/components/Block/LoginBlock'
 import UserTools from 'vuejs/components/User/UserTools'
 
+import { MA } from 'vuejs/api/ma-axios'
+
 export default {
-  props: ['title', 'form'],
+  props: ['title', 'loginblock'],
+  data(){
+    return {
+      block: null
+    }
+  },
   computed: {
     ...mapState({
       isloggedin: state => state.User.isloggedin
     })
   },
+  beforeMount() {
+    console.log('UserBlock beforeMount');
+    if(this.loginblock){
+      this.block = this.loginblock
+    }else{
+      this.getLoginBlock()
+    }
+
+  },
+  methods: {
+    getLoginBlock(){
+      MA.get(`/materio_user/login_block`)
+        .then(({data}) => {
+          // console.log("getLoginBlock data", data);
+          this.block = data.rendered
+        })
+        .catch(( error ) => {
+          console.warn('Issue with getLoginBlock', error)
+        })
+    }
+  },
   components: {
-    Login,
+    LoginBlock,
     UserTools
   }
 }
diff --git a/web/themes/custom/materiotheme/vuejs/components/User/Login.vue b/web/themes/custom/materiotheme/vuejs/components/Form/LoginForm.back.vue
similarity index 100%
rename from web/themes/custom/materiotheme/vuejs/components/User/Login.vue
rename to web/themes/custom/materiotheme/vuejs/components/Form/LoginForm.back.vue
diff --git a/web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue b/web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
index a1462e2..3738ec0 100644
--- a/web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
@@ -1,16 +1,15 @@
 <script>
 
 import Vue from 'vue'
-import { MSAPI } from 'vuejs/api/msapi-axios'
 
 export default {
+  props: ['form'],
   data() {
     return {
       template: null,
       typed: ""
     }
   },
-  props: ['form'],
   methods: {
     keyup() {
       console.log("search typed", this.typed);
@@ -20,66 +19,29 @@ export default {
     }
   },
   beforeMount() {
-    console.log('SearchForm beforeMount');
+    // console.log('SearchForm beforeMount');
     if(this._props.form){
-      console.log('SearchForm beforeMount if this._props.form ok');
-      this.template = Vue.compile(this._props.form).render
-    }
-  },
-  beforeUpdate() {
-    console.log('SearchForm beforeUpdate');
-    if(this._props.form){
-      console.log('SearchForm beforeUpdate if this._props.form ok');
-      this.template = Vue.compile(this._props.form).render
+      // console.log('SearchForm beforeMount if this._props.form ok');
+      this.template = Vue.compile(this._props.form)
+      // https://github.com/vuejs/vue/issues/9911
+      this.$options.staticRenderFns = [];
+      this._staticTrees = [];
+      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
     }
   },
   mounted(){
-    console.log('SearchForm mounted');
-    // Drupal.attachBehaviors(this.$el);
-  },
-  updated(){
-    console.log('SearchForm updated');
-    // Drupal.attachBehaviors(this.$el);
+    // console.log('SearchForm mounted');
+    Drupal.attachBehaviors(this.$el);
   },
   render(h) {
-    console.log('searchForm render');
+    // console.log('searchForm render');
     if(!this.template){
       return h('span', 'Loading ...')
     }else{
-      return this.template()
+      return this.template.render.call(this)
     }
   }
 }
-// searchform: (resolve, reject) => (
-//   MSAPI.get(`/search_form`)
-//     .then(({data}) => {
-//       // console.log("materiosapisearchform", data);
-//       resolve({
-//         data() {
-//           return {
-//             typed:""
-//           }
-//         },
-//         methods: {
-//           keyup() {
-//             console.log("search typed", this.typed);
-//           },
-//           submit() {
-//             console.log("search clicked");
-//           }
-//         },
-//         mounted() {
-//           Drupal.attachBehaviors(this.$el);
-//         },
-//         template: data.rendered
-//       })
-//     })
-//     .catch(( error ) => {
-//         console.warn('Issue with get searchform', error)
-//         Promise.reject(error)
-//     })
-//
-// )
 </script>
 
 <style lang="scss" scoped>