Index: modules/open-science-observatory-ui/trunk/src/app/pages/methodology/methodology.component.ts
===================================================================
--- modules/open-science-observatory-ui/trunk/src/app/pages/methodology/methodology.component.ts	(revision 60842)
+++ modules/open-science-observatory-ui/trunk/src/app/pages/methodology/methodology.component.ts	(revision 60843)
@@ -1,4 +1,6 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-methodology',
@@ -7,5 +9,35 @@
   encapsulation: ViewEncapsulation.None
 })
 
-export class MethodologyPageComponent {
+export class MethodologyPageComponent implements OnInit, OnDestroy {
+
+  private subscriptions: any[] = [];
+
+  constructor(private route: ActivatedRoute) {
+  }
+
+  ngOnInit(): void {
+    this.subscriptions.push(this.route.fragment.subscribe(fragment => {
+      setTimeout(() => {
+        this.goTo(fragment);
+      }, 100);
+    }));
+  }
+
+  goTo(id: string) {
+    const yOffset = -100;
+    const element = document.getElementById(id);
+    if (element) {
+      const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+      window.scrollTo({top: y, behavior: 'smooth'});
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(subscription => {
+      if (subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      }
+    });
+  }
 }
Index: modules/open-science-observatory-ui/trunk/src/app/pages/methodology/methodology.component.html
===================================================================
--- modules/open-science-observatory-ui/trunk/src/app/pages/methodology/methodology.component.html	(revision 60842)
+++ modules/open-science-observatory-ui/trunk/src/app/pages/methodology/methodology.component.html	(revision 60843)
@@ -1,347 +1,271 @@
-<section class="section greySection" id="sect-overview">
+<section class="section greySection terminologySection">
 
-  <div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
-
-    <div style="min-height: 500px;">
-      <h4>Coming soon....</h4>
+  <div id="how" class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
+    <h2 class="uk-text-center">
+      Overview
+    </h2>
+    <div class="uk-margin-large-top">
+      <div class="how uk-h6">
+        <div class="uk-flex uk-flex-wrap">
+          <div class="uk-width-1-3@s first uk-text-muted">
+            <div>
+              <img src="../../../assets/img/methodology/1.png">
+            </div>
+            <div class="uk-text-center">
+              <span class="uk-text-bold uk-text-uppercase">Starting</span> from existing<br>research-related data sources
+            </div>
+          </div>
+          <div class="uk-width-1-3@s second uk-text-muted">
+            <div>
+              <img src="../../../assets/img/methodology/2.png">
+            </div>
+          </div>
+          <div class="uk-width-1-3@s third uk-text-muted">
+            <div>
+              <img src="../../../assets/img/methodology/3.png">
+            </div>
+            <div class="uk-text-center">
+              build an open, global<br>and trusted Research graph
+            </div>
+          </div>
+        </div>
+        <div class="uk-flex uk-flex-wrap">
+          <div class="uk-width-1-3@s fourth uk-flex-last@s uk-text-muted">
+            <div>
+              <img src="../../../assets/img/methodology/4.png">
+            </div>
+            <div class="uk-text-center">
+              we perform <span class="uk-text-bold uk-text-uppercase">Statistical Analysis</span> and produce
+              <span class="portal-color">Open Science Indicators</span>
+            </div>
+          </div>
+          <div class="uk-width-1-3@s fifth uk-text-muted">
+            <div>
+              <img src="../../../assets/img/methodology/5.png">
+            </div>
+            <div class="uk-text-center">
+              furthermore <span class="uk-text-bold uk-text-uppercase">Network<br>Analysis</span> producing
+              <span class="portal-color">Collaboration Indicators</span>
+            </div>
+          </div>
+          <div class="uk-width-1-3@s sixth uk-flex-first@s uk-text-muted">
+            <div>
+              <img src="../../../assets/img/methodology/6.png">
+            </div>
+            <div class="uk-text-center">
+              Often combine with external data
+              (patents, social, company) and
+              perform <span class="uk-text-bold uk-text-uppercase">Impact Analysis</span> to
+              produce <span class="portal-color">Innovation Indicators</span>
+            </div>
+          </div>
+        </div>
+        <div class="final uk-text-muted">
+          <div>
+            <img src="../../../assets/img/methodology/Asset%201.png">
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 
+</section>
 
-    <!--&lt;!&ndash;Introduction&ndash;&gt;-->
-    <!--<div class="">-->
-      <!--<h2>Introduction</h2>-->
+<section class="section greySection terminologySection" id="sect-tabs">
 
-      <!--<div class="md-card uk-margin-bottom">-->
-        <!--<div class="md-card-content large-padding">-->
-          <!--<p>-->
-            <!--This document describes the methodology , terms, and definitions of the indicators presented in Open Science Observatory.-->
-            <!--The Open Science Observatory combines data gathered from OpenAIRE and other data sources to develop and operate an-->
-            <!--interactive and dynamic portal, which informs users via rich visualizations and reports on different Open Science-->
-            <!--aspects and facets in Europe. The Observatory is an extendable monitor portal with indicators on open science and-->
-            <!--the framework uptake by national and sectoral set.-->
-          <!--</p>-->
-          <!--<p>-->
-            <!--The dynamic <strong>Open Science Observatory</strong> leverages existing information collected by OpenAIRE and-->
-            <!--<strong>at little additional cost or effort, produces and reports value added metrics</strong> regarding Open Science-->
-            <!--trends and evolution for Horizon 2020 and other funding sources. The goal is to provide an EU Open Science Observatory-->
-            <!--as key OpenAIRE product, and employing open metrics based on open data gathered by OpenAire to measure the openness-->
-            <!--of publications and data on various aspects (e.g., gold/green/fair), the metadata completeness, the regional or-->
-            <!--thematic distributions and will test out preliminary metrics for their FAIRness. This will ensure that research can-->
-            <!--be evaluated at the right level (including article-level metrics and altmetrics), in an <strong>open and transparent-->
-            <!--manner</strong>. Such services will deliver accurate metrics for European Research and enable informed recommendations-->
-            <!--to high-level decision makers.-->
-          <!--</p>-->
-        <!--</div>-->
-      <!--</div>-->
+  <div id="terminology" class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
+    <h2 class="uk-text-center">
+      Terminology and construction
+    </h2>
+    <div class="uk-margin-large-top">
 
-    <!--</div>-->
+      <!--LAPTOP & PAD LANDSCAPE-->
+      <ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#terminology_tabbed',animation: 'slide-bottom'}">
+        <li class="uk-active" aria-expanded="true"><a>Entities</a></li>
+        <li aria-expanded="false"><a>Attributes of Entities</a></li>
+      </ul>
 
-    <!--&lt;!&ndash;Methodological Approach and Indicators&ndash;&gt;-->
-    <!--<div class="">-->
-      <!--<h2>Methodological Approach and Indicators</h2>-->
+      <!--MOBILE & PAD PORTRAIT-->
+      <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#terminology_tabbed',animation: 'slide-bottom'}">
+        <li class="uk-active" aria-expanded="true"><a>Entities</a></li>
+        <li aria-expanded="false"><a>Attributes of Entities</a></li>
+      </ul>
 
-      <!--<div class="md-card uk-margin-bottom">-->
-        <!--<div class="md-card-content large-padding">-->
-          <!--<p>-->
-            <!--Monitoring and evaluating the advancements, trends and impact of OS in Europe is recognised as one of the most-->
-            <!--important steps towards the realisation of the EOSC vision. The implementation of the Open Science Observatory-->
-            <!--follows the guidelines and <a target="_blank" href="https://eoscpilot.eu/wp3-policy/eosc-open-science-monitor-specifications/methodological-approach-monitoring-open-science">-->
-            <!--methodological approach</a> which was specified by the EOSCPilot project and more specifically the-->
-            <!--<a target="_blank" href="https://eoscpilot.eu/content/d32-eosc-open-science-monitor-specifications">EOSCpilot Open Science Monitor Framework (EOSCpilot OSMF)</a>.-->
-            <!--It aimed to build a model and initial high-level specifications for providing useful analytics to researchers as well-->
-            <!--as enabling research performing and funding organizations within EOSC to monitor and gain insights about the OS movement,-->
-            <!--regardless of their service management systems and the technology behind them. The six core steps of the specified methodology are:-->
-          <!--</p>-->
-          <!--<ul style="font-style: italic">-->
-            <!--<li>Step 1. Identification of the Open Science Activities;</li>-->
-            <!--<li>Step 2. Policy-driven derivation of monitoring targets;</li>-->
-            <!--<li>Step 3. Identification of the main Open Science Resources and Indicators;</li>-->
-            <!--<li>Step 4. Design of monitoring processes, tasks and workflows;</li>-->
-            <!--<li>Step 5. Modelling and implementation of the framework;</li>-->
-            <!--<li>Step 6. Continuous validation of the monitoring targets;</li>-->
-          <!--</ul>-->
+      <ul id="terminology_tabbed" class="uk-switcher">
 
-          <!--<p>-->
-            <!--<span style="font-style: italic">Step 1. Identification of the Open Science Activities:</span> The first step addresses the need to identify-->
-            <!--which parts of the OS lifecycle are of interest in the monitoring process. These can include the conceptualization-->
-            <!--of a research task, the data and literature collection, the analysis and development of the research output, the-->
-            <!--publication, the review and evaluation of the research result as well as the reuse and reproducibility of results-->
-            <!--by the scientific community. These phases entail different open access practices and elements which are being considered-->
-            <!--by the monitor, with a special focus on the policies that these elements fall under.-->
-          <!--</p>-->
-          <!--<p>-->
-            <!--<span style="font-style: italic">Step 2. Policy-driven derivation of monitoring targets:</span> The proposed monitoring-->
-            <!--framework adopts a policy-driven approach for deriving high level objectives, i.e., target dimensions to be measured-->
-            <!--in the monitoring process. Policies on Open Access at different levels, such as the international, national and-->
-            <!--regional levels, as well as micro policies are considered as primary sources for deriving more concrete measurable-->
-            <!--targets (e.g., Openness, FAIRness, etc.) that should be monitored in the framework. Furthermore, monitoring targets-->
-            <!--can be organised into more specialised sub-targets, to measure more specific aspects of OS. For example, a policy-->
-            <!--recommendation stating that research data repositories should follow a data archiving plan indicates the monitoring-->
-            <!--target for long-term preservation of OS artefacts monitored by a set of indicators, such as whether an organization-->
-            <!--applies such a plan, or the period (e.g., months, years) for which preservation is guaranteed.-->
-          <!--</p>-->
-          <!--<p>-->
-            <!--<span style="font-style: italic">Step 3. Identification of the main Open Science Resources and Indicators:</span>-->
-            <!--In the next step, the monitoring targets are being mapped to OS elements they apply to, as well as to indicators-->
-            <!--that quantify these targets. OS elements are well-defined artefacts of OS practices, such as publication in open-->
-            <!--access journals, research data made available in open access repositories, open source software, open educational-->
-            <!--material, etc. In the context of this framework, these elements are called OS resources to state the importance-->
-            <!--of their contribution for the development of the “Open Science World”.-->
-          <!--</p>-->
-          <!--<p>-->
-            <!--<span style="font-style: italic">Step 4. Design of monitoring processes, tasks and workflows:</span> Each indicator-->
-            <!--must be associated with a set of processes, which are employed for the collection of data, the validation and-->
-            <!--scoring of metrics (e.g., combination and aggregation of metrics for deriving an accumulated score for a target-->
-            <!--dimension), the visualization of the results, and so on. These processes must be well documented in the form of-->
-            <!--workflows and tasks, to be performed for the collection and quantification of the indicators.-->
-          <!--</p>-->
-          <!--<p>-->
-            <!--<span style="font-style: italic">Step 5. Modelling and implementation of the framework:</span> The next step-->
-            <!--involves the detailed design, implementation, and customization of the framework, which includes the design of-->
-            <!--the functionality at its whole, as well as all added value services offered by the framework.-->
-          <!--</p>-->
-          <!--<p>-->
-            <!--<span style="font-style: italic">Step 6. Continuous validation of the monitoring targets:</span> The last step-->
-            <!--follows the operation of the OS monitoring framework and refers to the continuous validation and refinement of-->
-            <!--the monitoring methodology (i.e., targets and indicators) and results in EOSC. Α monitoring process, to be effective,-->
-            <!--must adapt to new OS practices and new policies, validating and readjusting its target goals as well as the indicators-->
-            <!--for their evaluation.-->
-          <!--</p>-->
+        <!--OVERVIEW tab-->
+        <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+          <table>
+            <tr>
+              <th class="important">Research Outcomes</th>
+              <td>
+                <div>There are currently four different types of research outcomes in the OpenAIRE Research
+                  Graph:
+                </div>
+                <ul class="portal-circle">
+                  <li>Publication</li>
+                  <li>Dataset</li>
+                  <li>Software</li>
+                  <li>Other Research Product</li>
+                </ul>
+                <div class="uk-margin-small-top">
+                  OpenAIRE deduplicates (merges) different records of research outcomes and keeps the metadata of all
+                  instances.
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th>Publication</th>
+              <td>Research outcomes intended for human reading (published articles, pre-prints, conference papers,
+                presentations, technical reports, etc.)
+              </td>
+            </tr>
+            <tr>
+              <th>Dataset</th>
+              <td>
+                <p>Research data</p>
+                <p>Granularity is not defined by OpenAIRE, it reflects the granularity supported by
+                  the sources from which the description of the dataset has been collected.</p>
+              </td>
+            </tr>
+            <tr>
+              <th>Software</th>
+              <td>Source code or software package developed and/or used in a research context</td>
+            </tr>
+            <tr>
+              <th>Other Research Product</th>
+              <td>Anything that does not fall in the previous categories (e.g. workflow, methods, protocols)</td>
+            </tr>
+          </table>
+          <div class="uk-text-small uk-margin-small-top">
+            <img src="../../../assets/img/Open_Research_Graph.svg" style="opacity: 0.4">
+            <span class="uk-margin-small-left uk-text-baseline uk-text-muted">More information for <a
+              href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a>.</span>
+          </div>
+        </li>
 
-          <!--<p>-->
-            <!--<strong>The Open Science Observatory of the OpenAIRE is the first implementation</strong> of these specifications-->
-            <!--and it aspires to become a dynamic tool in the future, with benefits both to the organisations using it to measure-->
-            <!--the OA levels of implementation and impact to their community and for the High Level Stakeholders which are the-->
-            <!--European Union’s Legal Entities and Bodies, including the Member States and their respective Units. Gaps, implications-->
-            <!--and new ways of performing OS are among the elements that could be identified through OA Open Science Observatory-->
-            <!--which could then be easily incorporated within the stakeholders’ scope and strategic planning for OS.-->
-          <!--</p>-->
-        <!--</div>-->
-      <!--</div>-->
+        <!--OPEN SCIENCE tab-->
+        <li aria-hidden="true" style="animation-duration: 200ms;">
+          <table>
+            <tr>
+              <th>Organization & Country</th>
+              <td>
+                <p><span class="uk-text-bold">For research outcomes:</span> the affiliated organizations of its
+                  authors (and their country)</p>
+                <p><span class="uk-text-bold">For projects:</span> the organizations participating in the project
+                  (i.e. beneficiaries of the grant) and
+                  their countries
+                </p>
+                <p>
+                  <span class="uk-text-bold">Country code mapping: </span>
+                  <a href="https://api.openaire.eu/vocabularies/dnet:countries" target="_blank">
+                    https://api.openaire.eu/vocabularies/dnet:countries</a>
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <th>Type</th>
+              <td>
+                <p>The sub-type of a research outcome (e.g., a publication can be a pre-print, conference proceeding,
+                  article,
+                  etc.)</p>
+                <p><span class="uk-text-bold">Resource type mapping: </span>
+                  <a href="https://api.openaire.eu/vocabularies/dnet:result_typologies" target="_blank">https://api.openaire.eu/vocabularies/dnet:result_typologies</a>
+                  (click on the code to see the specific types for each result type)
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <th>Access mode</th>
+              <td>
+                <p>The best available (across all instances) access rights of a research outcome</p>
+                <p>Types: open, restricted, closed, embargo (= closed for a specific period of time, then open)</p>
+                <p><span class="uk-text-bold">Note:</span> definition of <span class="uk-text-bold">restricted</span>
+                  may vary by data source.</p>
+              </td>
+            </tr>
+            <tr>
+              <th>PID (persistent identifier)</th>
+              <td>
+                <p>A long-lasting reference to a resource</p>
+                <p><span class="uk-text-bold">Types: </span> <a
+                  href="http://api.openaire.eu/vocabularies/dnet:pid_types" target="_blank">http://api.openaire.eu/vocabularies/dnet:pid_types</a>
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <th>Context</th>
+              <td>Related research community, initiative or infrastructure</td>
+            </tr>
+            <tr>
+              <th>Journal</th>
+              <td>The scientific journal an article is published in.</td>
+            </tr>
+            <tr>
+              <th>Publisher</th>
+              <td>The publisher of the venue (journal, book, etc.) of a research outcome</td>
+            </tr>
+            <tr>
+              <th class="important">Content Providers (Datasources)</th>
+              <td>
+                <p>The different data sources ingested in the OpenAIRE Research Graph.</p>
+                <div class="uk-text-bold">Content Provider Types:</div>
+                <ul class="portal-circle">
+                  <li>Repositories</li>
+                  <li>Open Access Publishers & Journals</li>
+                  <li>Aggregators</li>
+                  <li>Entity Registries</li>
+                  <li>Journal Aggregators</li>
+                  <li>CRIS (Current Research Information System)</li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
+              <th>Repositories</th>
+              <td>Information systems where scientists upload the bibliographic metadata and payloads of their
+                research outcomes (e.g. PDFs of their scientific articles, CSVs of their data, archive with their
+                software), due to obligations from their organizations, their funders, or due to community practices
+                (e.g. ArXiv, Europe PMC, Zenodo).
+              </td>
+            </tr>
+            <tr>
+              <th>Open Access Publishers & Journals</th>
+              <td>Information systems of open access publishers or relative journals, which offer bibliographic
+                metadata and PDFs of their published articles.
+              </td>
+            </tr>
+            <tr>
+              <th>Aggregators</th>
+              <td>Information systems that collect descriptive metadata about research products from multiple sources
+                in order to enable cross-data source discovery of given research products (e,g, DataCite,
+                BASE, DOAJ).
+              </td>
+            </tr>
+            <tr>
+              <th>Entity Registries</th>
+              <td>Information systems created with the intent of maintaining authoritative registries of given
+                entities in the scholarly communication, such as OpenDOAR for the institutional repositories, re3data
+                for the data repositories, CORDA and other funder databases for projects and funding information.
+              </td>
+            </tr>
+            <tr>
+              <th>CRIS (Current Research Information System)</th>
+              <td>Information systems adopted by research and academic organizations to keep track of their research
+                administration records and relative results; examples of CRIS content are articles or datasets funded
+                by projects, their principal investigators, facilities acquired thanks to funding, etc.
+              </td>
+            </tr>
+          </table>
+          <div class="uk-text-small uk-margin-small-top">
+            <img src="../../../assets/img/Open_Research_Graph.svg" style="opacity: 0.4">
+            <span class="uk-margin-small-left uk-text-baseline uk-text-muted">More information for <a
+              href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a>.</span>
+          </div>
+        </li>
 
-    <!--</div>-->
+      </ul>
 
-    <!--&lt;!&ndash;Indicators&ndash;&gt;-->
-    <!--<div class="">-->
-      <!--<h2>Indicators</h2>-->
+    </div>
+  </div>
 
-      <!--<div class="md-card uk-margin-bottom">-->
-        <!--<div class="md-card-content large-padding">-->
-
-          <!--<div class="">-->
-            <!--<ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#tabs',animation: 'slide-bottom'}">-->
-              <!--<li class="uk-active" aria-expanded="true"><a href="#">Terms and definitions</a></li>-->
-              <!--<li aria-expanded="false"><a href="#">Continent overview</a></li>-->
-              <!--<li aria-expanded="false"><a href="#">COuntry page</a></li>-->
-            <!--</ul>-->
-
-            <!--<ul id="tabs" class="uk-switcher">-->
-
-              <!--&lt;!&ndash;OVERVIEW tab&ndash;&gt;-->
-              <!--<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">-->
-                <!--<div class="uk-margin">-->
-
-                  <!--&lt;!&ndash;Terms and definitions&ndash;&gt;-->
-                  <!--<div>-->
-                    <!--&lt;!&ndash;<h3>Terms and definitions</h3>&ndash;&gt;-->
-                    <!--<dl>-->
-                      <!--<dt>Publication</dt>-->
-                      <!--<dd>a scientific publication</dd>-->
-
-                      <!--<dt>Repository</dt>-->
-                      <!--<dd>a repository of publications</dd>-->
-
-                      <!--<dt>Dataset</dt>-->
-                      <!--<dd>a dataset, usually associated with a publication</dd>-->
-
-                      <!--<dt>Software</dt>-->
-                      <!--<dd>software (e.g., open source), usually associated with a publication/dataset</dd>-->
-
-                      <!--<dt>Other Research Products</dt>-->
-                      <!--<dd>Other research outputs (e.g., dissemination or educational material) associated with a publication, dataset or software.</dd>-->
-
-                      <!--<dt>Journal</dt>-->
-                      <!--<dd>a scientific journal where authors publish their results in the form of publications</dd>-->
-
-                      <!--<dt>Policy</dt>-->
-                      <!--<dd>an Open Science mandate that organizations follow in order to engage in Open Science best practices</dd>-->
-
-                      <!--<dt>Organization</dt>-->
-                      <!--<dd>an academic institution, company, or any other legal entity with the context of OpenAIRE</dd>-->
-
-                      <!--<dt>Vocabularies</dt>-->
-                      <!--<dd>used in the Observatory are described in <a target="_blank" href="http://api.openaire.eu/vocabularies">http://api.openaire.eu/vocabularies</a></dd>-->
-                    <!--</dl>-->
-                  <!--</div>-->
-
-                <!--</div>-->
-              <!--</li>-->
-
-              <!--&lt;!&ndash;OPEN SCIENCE tab&ndash;&gt;-->
-              <!--<li aria-hidden="true" style="animation-duration: 200ms;">-->
-                <!--<div class="uk-margin">-->
-
-                  <!--&lt;!&ndash;Continent overview&ndash;&gt;-->
-                  <!--<div>-->
-                    <!--&lt;!&ndash;<h3>Continent overview</h3>&ndash;&gt;-->
-                    <!--<dl>-->
-                      <!--<dt>Number of OA publications</dt>-->
-                      <!--<dd>The total number of open access publications currently in OpenAIRE, along with the percentage they represent with respect to the total number of publications.</dd>-->
-
-                      <!--<dt>Number of OA datasets</dt>-->
-                      <!--<dd>The total number of open access datasets currently in OpenAIRE, along with the percentage they represent with respect to the total number of datasets.</dd>-->
-
-                      <!--<dt>Number of OA repositories</dt>-->
-                      <!--<dd>The total number of open access repositories currently in OpenAIRE.</dd>-->
-
-                      <!--<dt>Number of OA journals</dt>-->
-                      <!--<dd>The total number of open access journals currently in OpenAIRE, along with the percentage they represent with respect to the total number of journals. Source: DOAJ.</dd>-->
-
-                      <!--<dt>Number of organizations with OA policies</dt>-->
-                      <!--<dd>The total number of organizations in OpenAIRE that have Open Access policies associated with them. Source: RoarMap.</dd>-->
-                    <!--</dl>-->
-
-                    <!--&lt;!&ndash;Overview&ndash;&gt;-->
-                    <!--<div>-->
-                      <!--<h4>Overview</h4>-->
-                      <!--<p>Each table row refers to a country. For each country, the table shows <span style="font-style: italic">total numbers of OA repositories,-->
-          <!--journals, policies, publications, datasets, software and other research products.</span><br>-->
-                        <!--The total numbers and percentages are computed as described in the continent overview.-->
-                      <!--</p>-->
-                    <!--</div>-->
-
-                    <!--&lt;!&ndash;Open Science&ndash;&gt;-->
-                    <!--<div>-->
-                      <!--<h4>Open Science</h4>-->
-                      <!--<p>Open science related resources, specifically OA publications, datasets, software and other research products.</p>-->
-                    <!--</div>-->
-
-                  <!--</div>-->
-
-                <!--</div>-->
-              <!--</li>-->
-
-              <!--<li aria-hidden="true" style="animation-duration: 200ms;">-->
-                <!--<div class="uk-margin">-->
-
-                  <!--&lt;!&ndash;Country page&ndash;&gt;-->
-                  <!--<div>-->
-                    <!--&lt;!&ndash;<h3>Country page</h3>&ndash;&gt;-->
-
-                    <!--&lt;!&ndash;Country overview&ndash;&gt;-->
-                    <!--<div>-->
-                      <!--<h4>Country overview</h4>-->
-                      <!--<dl>-->
-                        <!--<dt>Number of OA publications</dt>-->
-                        <!--<dd>The total number of open access publications currently in OpenAIRE for this country, along with the-->
-                          <!--percentage they represent with respect to the total number of publications of this country.</dd>-->
-
-                        <!--<dt>Number of OA datasets</dt>-->
-                        <!--<dd>The total number of open access datasets currently in OpenAIRE for this country, along with the percentage-->
-                          <!--they represent with respect to the total number of datasets of this country.-->
-                        <!--</dd>-->
-
-                        <!--<dt>Number of OA repositories</dt>-->
-                        <!--<dd>The total number of open access repositories currently in OpenAIRE for this country.</dd>-->
-
-                        <!--<dt>Number of OA journals</dt>-->
-                        <!--<dd>The total number of open access journals currently in OpenAIRE for this country, along with the percentage-->
-                          <!--they represent with respect to the total number of journals. Source: DOAJ.</dd>-->
-
-                        <!--<dt>Number of organizations with OA policies</dt>-->
-                        <!--<dd>The total number of organizations in OpenAIRE for this country that have Open Access policies associated-->
-                          <!--with them. Source: RoarMap.</dd>-->
-                      <!--</dl>-->
-                    <!--</div>-->
-
-                    <!--&lt;!&ndash;Info Box&ndash;&gt;-->
-                    <!--<div>-->
-                      <!--<h4>Info Box</h4>-->
-                      <!--<dl>-->
-                        <!--<dt>R&D Expenditure</dt>-->
-                        <!--<dd>The total R&D expenditure for this country since 2008. Source: Eurostat.</dd>-->
-
-                        <!--<dt>Funding sources</dt>-->
-                        <!--<dd></dd>-->
-
-                        <!--<dt>Funding Organizations</dt>-->
-                        <!--<dd></dd>-->
-
-                        <!--<dt>Organizations funded by the European Commission since 2013</dt>-->
-                        <!--<dd>The total number of organizations in this country that have participated/participate in a project that was/is-->
-                          <!--funded by the European Commission.</dd>-->
-                      <!--</dl>-->
-                    <!--</div>-->
-
-                    <!--&lt;!&ndash;Green vs. Gold&ndash;&gt;-->
-                    <!--<div>-->
-                      <!--<h4>Green vs. Gold</h4>-->
-                      <!--<dl>-->
-                        <!--<dt>Green vs Gold Publications</dt>-->
-                        <!--<dd>The line shows the evolution of the total number of publications that have been published through a green-->
-                          <!--open access route, vs the total number of publications that have been published through a gold open access route.</dd>-->
-
-                        <!--<dt>Gold Open Access</dt>-->
-                        <!--<dd>The chart shows a ranking of the top 15 organizations of this country in descending order of their total-->
-                          <!--count of gold open access publications.</dd>-->
-
-                        <!--<dt>Green Open Access</dt>-->
-                        <!--<dd>The chart shows a ranking of the top 15 organizations of this country in descending order of their total-->
-                          <!--count of green open access publications. </dd>-->
-                      <!--</dl>-->
-                    <!--</div>-->
-
-                    <!--&lt;!&ndash;EU Funded Open Science&ndash;&gt;-->
-                    <!--<div>-->
-                      <!--<h4>EU Funded Open Science</h4>-->
-                      <!--<dl>-->
-                        <!--<dt>Publications vs Datasets vs Software</dt>-->
-                        <!--<dd>The chart shows a per-year count and comparison of open access publications, datasets and software for this country.</dd>-->
-
-                        <!--<dt>Organizations</dt>-->
-                        <!--<dd>This table shows all organizations from this country, along with the total number of publications, datasets and-->
-                          <!--software that have authors that are affiliated with each organization. The rows can be ordered by any of the three numbers.</dd>-->
-
-                        <!--<dt>Repositories</dt>-->
-                        <!--<dd>This table shows all repositories from this country, along with the total number of publications, datasets-->
-                          <!--and software that reside in each repository. The rows can be ordered by any of the three numbers.</dd>-->
-                      <!--</dl>-->
-                    <!--</div>-->
-
-                    <!--&lt;!&ndash;Funding Sources&ndash;&gt;-->
-                    <!--<div>-->
-                      <!--<h4>Funding Sources</h4>-->
-                      <!--<dl>-->
-                        <!--<dt>Publications vs Datasets vs Software</dt>-->
-                        <!--<dd>This chart shows colored horizontal bars representing total number of publications, datasets and software-->
-                          <!--for each funder organization associated with this country.</dd>-->
-                      <!--</dl>-->
-                    <!--</div>-->
-
-                    <!--&lt;!&ndash;Project Performance&ndash;&gt;-->
-                    <!--<div>-->
-                      <!--<h4>Project Performance</h4>-->
-                      <!--<dl>-->
-                        <!--<dt>Top 10 Projects by publications / datasets / software</dt>-->
-                        <!--<dd>A ranking of the top 10 projects in descending order of their associated publication/dataset/software count.-->
-                          <!--Publication/dataset/software count is computed as the total number of publications/datasets/software that have-->
-                          <!--been funded by a project.</dd>-->
-                      <!--</dl>-->
-                    <!--</div>-->
-
-
-                  <!--</div>-->
-
-                <!--</div>-->
-              <!--</li>-->
-            <!--</ul>-->
-          <!--</div>-->
-
-
-        <!--</div>-->
-      <!--</div>-->
-
-    <!--</div>-->
-
-  </div>
 </section>
Index: modules/open-science-observatory-ui/trunk/src/app/shared/topmenu/top-menu.component.html
===================================================================
--- modules/open-science-observatory-ui/trunk/src/app/shared/topmenu/top-menu.component.html	(revision 60842)
+++ modules/open-science-observatory-ui/trunk/src/app/shared/topmenu/top-menu.component.html	(revision 60843)
@@ -14,20 +14,20 @@
 
             <ul class="uk-navbar-nav">
               <li>
-                <a class="" href="#">
+                <a class="" href="#offcanvas-nav" uk-toggle>
                   <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon">
                   </div>
                 </a>
-                <div class="uk-navbar-dropdown">
-                  <ul class="uk-nav uk-navbar-dropdown-nav">
-                    <li class="uk-active"><a routerLink="/home">Home</a></li>
-                    <li class="uk-active"><a [routerLink]="['/overview','europe']">OA in Europe</a></li>
-                    <!--<li class="uk-active"><a href="#">About</a></li>-->
-                    <li class="uk-active"><a routerLink="/methodology">Methodology</a></li>
-                    <!--<li class="uk-nav-divider"></li>-->
-                    <!--<li class="uk-active"><a routerLink="/home">Sign In</a></li>-->
-                  </ul>
-                </div>
+                <!--<div class="uk-navbar-dropdown">-->
+                  <!--<ul class="uk-nav uk-navbar-dropdown-nav">-->
+                    <!--<li class="uk-active"><a routerLink="/home">Home</a></li>-->
+                    <!--<li class="uk-active"><a [routerLink]="['/overview','europe']">OA in Europe</a></li>-->
+                    <!--&lt;!&ndash;<li class="uk-active"><a href="#">About</a></li>&ndash;&gt;-->
+                    <!--<li class="uk-active"><a routerLink="/methodology">Methodology</a></li>-->
+                    <!--&lt;!&ndash;<li class="uk-nav-divider"></li>&ndash;&gt;-->
+                    <!--&lt;!&ndash;<li class="uk-active"><a routerLink="/home">Sign In</a></li>&ndash;&gt;-->
+                  <!--</ul>-->
+                <!--</div>-->
               </li>
             </ul>
 
@@ -90,20 +90,20 @@
           <div class="uk-navbar-right">
             <ul class="uk-navbar-nav">
               <li>
-                <a class="" href="#">
+                <a class="" href="#offcanvas-nav" uk-toggle>
                   <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon">
                   </div>
                 </a>
-                <div class="uk-navbar-dropdown">
-                  <ul class="uk-nav uk-navbar-dropdown-nav">
-                    <li class="uk-active"><a routerLink="/home">Home</a></li>
-                    <li class="uk-active"><a [routerLink]="['/overview', 'europe']">OA in Europe</a></li>
-                    <!--<li class="uk-active"><a href="#">About</a></li>-->
-                    <li class="uk-active"><a routerLink="/methodology">Methodology</a></li>
-                    <!--<li class="uk-nav-divider"></li>-->
-                    <!--<li class="uk-active"><a routerLink="/home">Sign In</a></li>-->
-                  </ul>
-                </div>
+                <!--<div class="uk-navbar-dropdown">-->
+                  <!--<ul class="uk-nav uk-navbar-dropdown-nav">-->
+                    <!--<li class="uk-active"><a routerLink="/home">Home</a></li>-->
+                    <!--<li class="uk-active"><a [routerLink]="['/overview', 'europe']">OA in Europe</a></li>-->
+                    <!--&lt;!&ndash;<li class="uk-active"><a href="#">About</a></li>&ndash;&gt;-->
+                    <!--<li class="uk-active"><a routerLink="/methodology">Methodology</a></li>-->
+                    <!--&lt;!&ndash;<li class="uk-nav-divider"></li>&ndash;&gt;-->
+                    <!--&lt;!&ndash;<li class="uk-active"><a routerLink="/home">Sign In</a></li>&ndash;&gt;-->
+                  <!--</ul>-->
+                <!--</div>-->
               </li>
             </ul>
 
@@ -115,7 +115,32 @@
 
     </div>
 
+    <div id="offcanvas-nav" class="tm-mobile uk-hidden@m" uk-offcanvas="flip: true; overlay: true;">
+      <!--<div class="uk-offcanvas-bar">-->
+      <div class="uk-offcanvas-bar-light">
 
+        <button class="uk-offcanvas-close" type="button" uk-close></button>
+
+        <ul class="uk-nav uk-nav-default">
+          <li [routerLinkActive]="['uk-active']"><a routerLink="/home" [routerLinkActive]="['uk-active']" class="uk-offcanvas-close custom-offcanvas-close">Home</a></li>
+          <li [routerLinkActive]="['uk-active']"><a [routerLink]="['/overview', 'europe']" [routerLinkActive]="['uk-active']" class="uk-offcanvas-close custom-offcanvas-close">OA in Europe</a></li>
+          <li class="uk-parent" [routerLinkActive]="['uk-active']">
+            <a href="#">Methodology</a>
+            <ul class="uk-nav-sub">
+              <li><a routerLink="/methodology" routerLinkActive="uk-active" class="uk-offcanvas-close custom-offcanvas-close">Overview</a></li>
+              <li><a routerLink="/methodology" fragment="terminology" routerLinkActive="uk-active" class="uk-offcanvas-close custom-offcanvas-close">Terminology and construction</a></li>
+            </ul>
+          </li>
+          <!--<li class="uk-nav-header">Header</li>-->
+          <!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>-->
+          <!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>-->
+          <!--<li class="uk-nav-divider"></li>-->
+          <!--<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>-->
+        </ul>
+
+      </div>
+    </div>
+
     <!--LAPTOP & PAD LANDSCAPE-->
     <div class="uk-visible@m">
       <a *ngIf="environmentName==='beta'" href="/"><img alt="BETA" class="large-beta-indication" src="../../../assets/img/beta_flag.svg"></a>
@@ -145,10 +170,26 @@
                     OA in Europe
                   </a>
                 </li>
+                <!--<li class="uk-parent" [routerLinkActive]="['uk-active']">-->
+                  <!--<a routerLink="/methodology" [routerLinkActive]="['uk-active']">-->
+                    <!--Methodology-->
+                  <!--</a>-->
+                <!--</li>-->
                 <li class="uk-parent" [routerLinkActive]="['uk-active']">
-                  <a routerLink="/methodology" [routerLinkActive]="['uk-active']">
+                  <a href="#" class="" aria-expanded="false">
                     Methodology
                   </a>
+                  <div class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" style="top: 80px; left: 106.55px;" id="methodology" uk-toggle>
+                    <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
+                      <div class="uk-first-column">
+                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                          <!--<li><a [routerLink]="['/support/faqs']" routerLinkActive="uk-active">FAQs</a></li>-->
+                          <li><a routerLink="/methodology" routerLinkActive="uk-active">Overview</a></li>
+                          <li><a routerLink="/methodology" fragment="terminology" routerLinkActive="uk-active">Terminology and construction</a></li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
                 </li>
                 <!--<li class="uk-parent" [routerLinkActive]="['uk-active']">-->
                   <!--<a routerLink="/home" [routerLinkActive]="['uk-active']">-->
Index: modules/open-science-observatory-ui/trunk/src/app/app-routing.module.ts
===================================================================
--- modules/open-science-observatory-ui/trunk/src/app/app-routing.module.ts	(revision 60842)
+++ modules/open-science-observatory-ui/trunk/src/app/app-routing.module.ts	(revision 60843)
@@ -35,7 +35,12 @@
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {
+    // preloadingStrategy: PreloadAllModules,
+    scrollPositionRestoration: 'top',
+    onSameUrlNavigation: 'reload',
+    // relativeLinkResolution: 'corrected'
+  })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }
Index: modules/open-science-observatory-ui/trunk/src/assets/css/os-observatory-custom.css
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/css/os-observatory-custom.css	(revision 60842)
+++ modules/open-science-observatory-ui/trunk/src/assets/css/os-observatory-custom.css	(revision 60843)
@@ -2,6 +2,9 @@
 
 :root {
   --primary-color: #EC4386;
+  /*fixme I need a pinkish color*/
+  /*--primary-color-background: #eff6e6;*/
+  --primary-color-background: #F6D6E5;
   --secondary-color: #CA4D9A;
 
   --link-color: #EC4386;
@@ -29,6 +32,8 @@
   --journal-background-color: #FBE8B1;
   --policies-color: #639C66;
   --policies-background-color: #D4ECD6;
+
+  --muted-color: #4d4d4d;
 }
 
 html {
@@ -48,6 +53,11 @@
   font-size: 24px;
 }
 
+.uk-h6, h6 {
+  font-size: 18px;
+  font-weight: 400;
+}
+
 .uk-flex-space-between {
   justify-content: space-between;
 }
@@ -96,6 +106,10 @@
   z-index: 10000;
 }
 
+.uk-text-muted {
+  color: var(--muted-color) !important;
+}
+
 /*#sect-overview, #sect-tabs {*/
   /*padding: 20px 0;*/
 /*}*/
@@ -1060,6 +1074,514 @@
 
 /*********************************/
 
+/********* MENU ********/
+
+.uk-navbar-dropdown {
+  width: 280px;
+  padding: 25px 0px;
+}
+
+.uk-navbar-dropdown-nav > li {
+  padding: 0px 25px;
+}
+
+.uk-navbar-dropdown-nav > li > a, .uk-navbar-dropdown-nav > li > a:hover {
+  color: #212121;
+}
+
+.uk-navbar-dropdown-nav > li:hover {
+  color: #212121;
+  background: var(--primary-color-background) 0% 0% no-repeat padding-box;
+  opacity: 1;
+}
+
+
+/*********************************/
+
+
+/**************** OFF-Canvas menu ****************/
+
+.custom-offcanvas-close {
+  position: relative;
+  right: 0;
+  top: 0;
+}
+
+.uk-offcanvas-bar-light {
+  text-transform: uppercase;
+}
+
+.uk-offcanvas-bar-light {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -270px;
+  box-sizing: border-box;
+  width: 270px;
+  padding: 20px 20px;
+  background: #fff;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.uk-nav-sub a {
+  padding: 2px 15px;
+}
+
+.uk-offcanvas-bar-light .uk-nav-default > li > a, .uk-offcanvas-bar-light .uk-nav-default .uk-nav-sub a {
+  color: #333;
+}
+
+.uk-nav-default .uk-nav-sub a:hover {
+  color: var(--secondary-color);
+}
+
+.uk-offcanvas-bar-light .uk-nav-default > li.uk-active > a, .uk-offcanvas-bar-light .uk-nav-default > li > a:hover,
+.uk-offcanvas-bar-light .uk-nav-default > li > a.uk-active, .uk-offcanvas-bar-light .uk-nav-default > li > a:focus,
+.uk-offcanvas-bar-light .uk-nav-default > li > a:active {
+  color: var(--secondary-color);
+}
+
+.uk-offcanvas-bar-animation {
+  transition: left 0.3s ease-out;
+}
+
+@media (min-width: 960px) {
+  .uk-offcanvas-bar-light {
+    left: -350px;
+    width: 350px;
+    padding: 40px 40px;
+  }
+}
+
+.uk-offcanvas-flip .uk-offcanvas-bar-light {
+  left: auto;
+  right: -270px;
+}
+
+.uk-offcanvas-flip .uk-offcanvas-bar-animation {
+  transition-property: right;
+}
+
+.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar-light {
+  left: auto;
+  right: 0;
+}
+
+@media (min-width: 960px) {
+  .uk-offcanvas-flip .uk-offcanvas-bar-light {
+    right: -350px;
+  }
+}
+
+.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar-light {
+  left: auto;
+  right: 0;
+}
+
+.uk-offcanvas-reveal .uk-offcanvas-bar-light {
+  left: 0;
+}
+
+.uk-open > .uk-offcanvas-bar-light {
+  left: 0;
+}
+
+.uk-close::after {
+  opacity: 0 !important;
+  color: #fff;
+  content: '';
+  font-family: "Material Icons";
+}
+
+/********************************************/
+
+
+/********* METHODOLOGY ********/
+
+/********* Terminology ********/
+
+.terminologySection table {
+  font-size: 14px;
+  background-color: #FFFFFF;
+  width:100%;
+  table-layout: fixed;
+  overflow-wrap: break-word;
+}
+
+.terminologySection table th {
+  width: 20%;
+}
+
+.terminologySection table th, .terminologySection table td {
+  border: 1px solid #DEDEDE;
+  padding: 25px 40px;
+  vertical-align: top;
+  text-align: start;
+}
+
+.terminologySection table th.important {
+  background-color: var(--primary-color-background);
+}
+
+.terminologySection ul.portal-circle {
+  list-style: none;
+  padding-left: 40px;
+  font-family: "Open Sans", sans-serif;
+}
+
+.terminologySection ul.portal-circle li {
+  margin: 0 0 2px 0;
+  position: relative;
+}
+
+.terminologySection ul.portal-circle li:before {
+  content: "";
+  border: 5px var(--primary-color) solid !important;
+  border-radius: 50px;
+  line-height: 21px;
+  margin-left: -20px;
+  position: absolute;
+  top: 7px;
+}
+
+@media only screen and (max-width: 959px) {
+  /*.terminologySection table th {*/
+    /*width: 50%;*/
+  /*}*/
+
+  .terminologySection ul.portal-circle {
+    padding-left: 20px;
+  }
+}
+
+/********* Overview ********/
+
+@media only screen and (min-width: 640px) {
+  .how .first > div:first-child {
+    position: relative;
+  }
+
+  .how .first > div:first-child:after {
+    content: "we";
+    text-align: center;
+    padding-bottom: 5%;
+    position: absolute;
+    background-image: url("../img/methodology/arrows/1.svg");
+    right: -21%;
+    top: 33%;
+    width: 20%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom center;
+  }
+
+  .how .second > div:first-child {
+    position: relative;
+    padding: 0 22% 0 22%;
+  }
+
+  .how .second > div:first-child:after {
+    content: "and";
+    text-align: center;
+    padding-bottom: 5%;
+    position: absolute;
+    background-image: url("../img/methodology/arrows/2.svg");
+    right: -10%;
+    top: 31%;
+    width: 30%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom center;
+  }
+
+  .how .third {
+    position:  relative;
+  }
+
+  .how .third > div:first-child {
+    padding: 0 12% 0 12%;
+  }
+
+  .how .third:after {
+    content: "on which";
+    padding-right: 30%;
+    padding-top: 5%;
+    padding-bottom: 5%;
+    position: absolute;
+    background-image: url("../img/methodology/arrows/3.svg");
+    bottom: 6%;
+    left: 6%;
+    transform: translateY(100%);
+    width: 55%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .how .fourth {
+    padding: 10% 3% 0 3%;
+  }
+
+  .how .fourth > div:first-child {
+    position:  relative;
+    padding: 0 15% 0 15%;
+  }
+
+  .how .fourth> div:first-child:after {
+    content: "and";
+    text-align: center;
+    padding-bottom: 5%;
+    position: absolute;
+    background-image: url("../img/methodology/arrows/4.svg");
+    left: -18%;
+    top: 35%;
+    width: 30%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom center;
+  }
+
+  .how .fifth {
+    padding: 10% 2% 0 2%;
+  }
+
+  .how .fifth > div:first-child {
+    position:  relative;
+  }
+
+  .how .fifth > div:first-child:after {
+    content: "We";
+    text-align: center;
+    padding-bottom: 5%;
+    position: absolute;
+    background-image: url("../img/methodology/arrows/5.svg");
+    left: -35%;
+    top: 36%;
+    width: 30%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom center;
+  }
+
+  .how .sixth {
+    padding: 10% 5% 0 0;
+  }
+
+  .how .sixth > div:first-child {
+    padding: 0 15% 0 15%;
+  }
+
+  .how .final {
+    padding: 10% 20% 0 20%;
+  }
+
+  .how .final > div:first-child {
+    position: relative;
+  }
+
+  .how .final img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .how .final > div:first-child:before {
+    content: "";
+    position: absolute;
+    background-image: url("../img/methodology/arrows/6.svg");
+    left: -20%;
+    /*top: -20%;*/
+    /*height: 70%;*/
+    top: -8%;
+    height: 42%;
+    /*width: 30%;*/
+    width: 34%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom center;
+  }
+
+  .how .final > div:first-child:after {
+    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
+    position: absolute;
+    background-image: url("../img/methodology/circle.png");
+    /*right: -220px;*/
+    /*top: -20%;*/
+    right: -203px;
+    top: -8%;
+    width: 300px;
+    padding: 8% 0 5% 220px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom center;
+  }
+}
+
+@media only screen and (min-width: 960px) {
+  .how .third:after {
+    bottom: -6%;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .how .third:after {
+    bottom: -10%;
+    left: 25%;
+    width: 25%;
+  }
+}
+
+@media only screen and (max-width: 639px) {
+  .how .first {
+    position: relative;
+    padding-bottom: 30%;
+  }
+
+  .how .first:after {
+    content: "we";
+    text-align: center;
+    padding: 25px 105px 25px 0;
+    position: absolute;
+    background-image: url("../img/methodology/arrows/3.svg");
+    /*left: 26%;*/
+    left: 33%;
+    top: 72%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .how .second {
+    position: relative;
+    padding: 0 15% 30% 15%;
+  }
+
+  .how .second:after {
+    content: "and";
+    text-align: center;
+    padding: 25px 105px 25px 0;
+    position: absolute;
+    background-image: url("../img/methodology/arrows/3.svg");
+    /*left: 25%;*/
+    left: 32%;
+    top: 70%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .how .third {
+    position:  relative;
+    padding: 0 5% 30% 5%;
+  }
+
+  .how .third:after {
+    content: "on which";
+    text-align: center;
+    padding: 25px 105px 25px 0;
+    position: absolute;
+    background-image: url("../img/methodology/arrows/3.svg");
+    /*left: 17%;*/
+    left: 27%;
+    top: 75%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .how .fourth {
+    position:  relative;
+    padding: 0 0 30% 0;
+  }
+
+  .how .fourth > div:first-child {
+    padding: 0 10% 0 10%;
+  }
+
+  .how .fourth:after {
+    content: "and";
+    text-align: center;
+    padding: 25px 105px 25px 0;
+    position: absolute;
+    background-image: url("../img/methodology/arrows/3.svg");
+    /*left: 26%;*/
+    left: 32%;
+    top: 79%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .how .fifth {
+    position:  relative;
+    padding: 0 2% 30% 2%;
+  }
+
+  .how .fifth:after {
+    content: "We";
+    text-align: center;
+    padding: 25px 105px 25px 0;
+    position: absolute;
+    background-image: url("../img/methodology/arrows/3.svg");
+    /*left: 27%;*/
+    left: 33%;
+    top: 76%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .how .sixth {
+    padding: 0 5% 30% 0;
+  }
+
+  .how .sixth > div:first-child {
+    padding: 0 15% 0 15%;
+  }
+
+  .how .final {
+    padding: 20% 0 20% 0;
+  }
+
+  .how .final > div:first-child {
+    position: relative;
+  }
+
+  .how .final > div:first-child:before {
+    content: "";
+    position: absolute;
+    background-image: url("../img/methodology/arrows/6.svg");
+    left: 32%;
+    /*top: -80%;*/
+    /*height: 70%;*/
+    top: -37%;
+    height: 33%;
+    width: 30%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .how .final > div:first-child:after {
+    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
+    position: absolute;
+    background-image: url("../img/methodology/circle.png");
+    /*left: -62%;*/
+    /*top: 85%;*/
+    left: -52%;
+    top: 91%;
+    width: 300px;
+    padding: 12% 0 0 70%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+}
+
+
+/*********************************/
+
 /********* MOBILE ********/
 @media only screen and (max-width: 960px) {
 
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/Asset 1.png
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/Asset 1.png
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/Asset 1.png	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/Asset 1.png	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/Asset 1.png
___________________________________________________________________
Added: svn:mime-type
## -0,0 +1 ##
+image/png
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/1.png
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/1.png
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/1.png	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/1.png	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/1.png
___________________________________________________________________
Added: svn:mime-type
## -0,0 +1 ##
+image/png
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/2.png
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/2.png
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/2.png	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/2.png	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/2.png
___________________________________________________________________
Added: svn:mime-type
## -0,0 +1 ##
+image/png
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/circle.png
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/circle.png
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/circle.png	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/circle.png	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/circle.png
___________________________________________________________________
Added: svn:mime-type
## -0,0 +1 ##
+image/png
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/3.png
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/3.png
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/3.png	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/3.png	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/3.png
___________________________________________________________________
Added: svn:mime-type
## -0,0 +1 ##
+image/png
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/4.png
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/4.png
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/4.png	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/4.png	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/4.png
___________________________________________________________________
Added: svn:mime-type
## -0,0 +1 ##
+image/png
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/5.png
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/5.png
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/5.png	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/5.png	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/5.png
___________________________________________________________________
Added: svn:mime-type
## -0,0 +1 ##
+image/png
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrow.svg
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/svg+xml
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrow.svg
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrow.svg	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrow.svg	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrow.svg
___________________________________________________________________
Added: svn:mime-type
## -0,0 +1 ##
+image/svg+xml
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/6.png
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/6.png
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/6.png	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/6.png	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/6.png
___________________________________________________________________
Added: svn:mime-type
## -0,0 +1 ##
+image/png
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/2.svg
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/svg+xml
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/2.svg
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/2.svg	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/2.svg	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/2.svg
___________________________________________________________________
Added: svn:executable
## -0,0 +1 ##
+*
\ No newline at end of property
Added: svn:mime-type
## -0,0 +1 ##
+image/svg+xml
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/3.svg
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/svg+xml
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/3.svg
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/3.svg	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/3.svg	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/3.svg
___________________________________________________________________
Added: svn:executable
## -0,0 +1 ##
+*
\ No newline at end of property
Added: svn:mime-type
## -0,0 +1 ##
+image/svg+xml
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/4.svg
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/svg+xml
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/4.svg
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/4.svg	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/4.svg	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/4.svg
___________________________________________________________________
Added: svn:executable
## -0,0 +1 ##
+*
\ No newline at end of property
Added: svn:mime-type
## -0,0 +1 ##
+image/svg+xml
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/5.svg
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/svg+xml
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/5.svg
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/5.svg	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/5.svg	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/5.svg
___________________________________________________________________
Added: svn:executable
## -0,0 +1 ##
+*
\ No newline at end of property
Added: svn:mime-type
## -0,0 +1 ##
+image/svg+xml
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/6.svg
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/svg+xml
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/6.svg
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/6.svg	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/6.svg	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/6.svg
___________________________________________________________________
Added: svn:executable
## -0,0 +1 ##
+*
\ No newline at end of property
Added: svn:mime-type
## -0,0 +1 ##
+image/svg+xml
\ No newline at end of property
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/1.svg
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/svg+xml
Index: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/1.svg
===================================================================
--- modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/1.svg	(nonexistent)
+++ modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/1.svg	(revision 60843)

Property changes on: modules/open-science-observatory-ui/trunk/src/assets/img/methodology/arrows/1.svg
___________________________________________________________________
Added: svn:executable
## -0,0 +1 ##
+*
\ No newline at end of property
Added: svn:mime-type
## -0,0 +1 ##
+image/svg+xml
\ No newline at end of property
