diff --git a/.gitignore b/.gitignore
index 4428b22..14a9b0d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
 spectre*/
 *.zip
 *.ttf
-*_old*
-README.md
\ No newline at end of file
+*_old*
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8522498
--- /dev/null
+++ b/README.md
@@ -0,0 +1,8 @@
+# _Nel cielo di Fara_ Front End Wep App...
+
+This project includes two versions of the same HTML5 app:
+
+- offline local installation (tracked by `master`)
+- online website _nelcielodifara.cnr.it_ (tracked by `online-site` branch)
+
+Let's hope this never happens again...
\ No newline at end of file
diff --git a/credits.html b/credits.html
index 5fb0f05..042ca3f 100644
--- a/credits.html
+++ b/credits.html
@@ -13,23 +13,21 @@
             <div class="container">
                 <div class="columns bg-white" id="nav">
                     <div class="column col-lg-7 col-sm-10 col-md-2">
-                        <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                        <img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
                     </div>
                     <div class="column col-sm-2 show-sm text-right">
                         <i class="icon icon-menu icon-2x"></i>
                     </div>
                     <div class="hide-sm column col-lg-5 col-sm-12 col-md-10 nav-menu" id="links">
-                        <a href="index.html" title="Torna alla home page">Home</a>
-                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </div>
                     <nav class="d-hide side-nav bg-white opensans">
                         <p id="close-nav"><i class="icon-close"></i></p>
-                        <a href="index.html" title="Torna alla home page">Home</a>
-                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </nav>
@@ -124,43 +122,49 @@
             </section>
             <section>
                 <div class="container">
-                    <h2>Informazioni sul sito web</h2>
-                    <p class="text-bold mb-1">
-                        Titolare del Sito, Concezione, Web Design e sviluppo:
-                    </p>
-                    <p>CNR ISPC - Istituto di Scienze del Patrimonio Culturale, sede di Roma<br>
-                    Via Salaria km 29, 300<br>
-                    00015 - Monterotondo St. (Roma)
-                    </p>
-                    <p>
-                        <strong>Concezione e testi:</strong> Eva Pietroni<br>
-                        <strong>Grafica e layout:</strong> Alfonsina Pagano, Nicolò Paraciani, Eva Pietroni<br>
-                        <strong>Sviluppo:</strong> Nicolò Paraciani<br>
-                    </p>
-                    <p>
-                        <strong>E-mail contatti:</strong> eva.pietroni@cnr.it
-                    </p>
-
-                    <h3 class="ochre-dark text-bold">Cookie e Privacy Policy</h3>
-                    <p>
-                        Il sito web <span class="text-bold">https://nelcielodifara.cnr.it</span> non utilizza cookie di terze parti di nessun tipo né sistemi
-                        di analitica o tracciamento, ma solo cookie tecnici strettamente necessari al corretto funzionamento del sito stesso.</p>
-                        <p>
-                        I video <em>embedded</em> sono ospitati sulle piattaforme <strong>YouTube</strong> e <strong>Vimeo</strong>, per le rispettive privacy policy fare riferimento
-                        alle seguenti pagine web:
-                        <ul class="mt-1">
-                            <li><a href="https://policies.google.com/privacy?hl=it">YouTube Privacy Policy (Google)</a></li>
-                            <li><a href="https://vimeo.com/privacy">Vimeo</a></li>
-                        </ul>
-                    </p>
-
-                    <h2>&copy; Copyright, diritto d'autore e dei segni distintivi</h2>
-                    <p>
-                        Tutto il contenuto di questo sito web è protetto da copyright e non può
-                        essere riprodotto o utilizzato in altre pubblicazioni stampate,
-                        elettroniche o informatiche senza l'espressa autorizzazione degli autori.
-                    </p>
-
+                    <div class="columns">
+                        <div class="col-lg-2 col-sm-12 col-md-12 column">
+                            <img src="img/Prologo-Annunciazione01.jpg">
+                        </div>
+                        <div class="col-lg-2 col-sm-12 col-md-12 column ml-lg">
+                            <h2>Informazioni sul sito web</h2>
+                            <p class="text-bold mb-1">
+                                Titolare del Sito, Concezione, Web Design e sviluppo:
+                            </p>
+                            <p>CNR ISPC - Istituto di Scienze del Patrimonio Culturale, sede di Roma<br>
+                            Via Salaria km 29, 300<br>
+                            00015 - Monterotondo St. (Roma)
+                            </p>
+                            <p>
+                                <strong>Concezione e testi:</strong> Eva Pietroni<br>
+                                <strong>Grafica e layout:</strong> Alfonsina Pagano, Nicolò Paraciani, Eva Pietroni<br>
+                                <strong>Sviluppo:</strong> Nicolò Paraciani<br>
+                            </p>
+                            <p>
+                                <strong>E-mail contatti:</strong> eva.pietroni@cnr.it
+                            </p>
+        
+                            <h3 class="ochre-dark text-bold">Cookie e Privacy Policy</h3>
+                            <p>
+                                Il sito web <span class="text-bold">https://nelcielodifara.cnr.it</span> non utilizza cookie di terze parti di nessun tipo né sistemi
+                                di analitica o tracciamento, ma solo cookie tecnici strettamente necessari al corretto funzionamento del sito stesso.</p>
+                                <p>
+                                I video <em>embedded</em> sono ospitati sulle piattaforme <strong>YouTube</strong> e <strong>Vimeo</strong>, per le rispettive privacy policy fare riferimento
+                                alle seguenti pagine web:
+                                <ul class="mt-1">
+                                    <li><a href="https://policies.google.com/privacy?hl=it">YouTube Privacy Policy (Google)</a></li>
+                                    <li><a href="https://vimeo.com/privacy">Vimeo</a></li>
+                                </ul>
+                            </p>
+        
+                            <h2>&copy; Copyright, diritto d'autore e dei segni distintivi</h2>
+                            <p>
+                                Tutto il contenuto di questo sito web è protetto da copyright e non può
+                                essere riprodotto o utilizzato in altre pubblicazioni stampate,
+                                elettroniche o informatiche senza l'espressa autorizzazione degli autori.
+                            </p>
+                        </div>
+                    </div>
                 </div>
             </section>
         </main>
diff --git a/css/main.css b/css/main.css
index 58a2ace..5c93cd5 100644
--- a/css/main.css
+++ b/css/main.css
@@ -14,6 +14,21 @@
 html {
     overflow-x: hidden;
 }
+/** 
+* Hack to preload background images 
+* Not working in Firefox!!
+**/
+div#preload {
+    /*display: none;*/
+    width: 0;
+    height: 0;
+    z-index: -10;
+    overflow-y: hidden;
+}
+div#preload img {
+    opacity: 0;
+    display: inline;
+}
 /** General utils **/
 .of-hidden {
     overflow: hidden;
@@ -48,9 +63,11 @@ html {
     font-size: 14pt;
 }
 video {
-    max-width: 100%;
     cursor: pointer;
 }
+#mod-cont {
+    overflow: hidden;
+}
 /** Font classes **/
 .arvo {
     font-family: 'arvoregular'/*Fallback??*/;
@@ -103,7 +120,7 @@ header {
     padding: 0;
 }
 .main-header.home {
-    min-height: 930px;
+    min-height: 80vh;
 }
 .main-header.prog {
     min-height: 60vh;
@@ -122,7 +139,7 @@ header {
 }
 .main-header.itin {
     background: none;
-    min-height: 25vh;
+    min-height: 40vh;
 }
 @media (max-width: 840px) {
     .main-header.itin {
@@ -226,15 +243,17 @@ header {
     font-weight:bold;
 }
 #nav {
-    max-height: 50px;
+    max-height: 90px;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 10;
 }
-#nav > div {
-    vertical-align: middle;
-    line-height: 2.3rem;
+@media (min-width: 860px) {
+    #nav {
+        vertical-align: middle;
+        line-height: 90px;
+    }    
 }
 #nav i {
     padding-top: 2rem;
@@ -281,8 +300,9 @@ header {
     border-bottom: 1px solid rgba(204,204,204,1);
 }
 #logo {
-    max-height: 41%;
-    padding: 7px 0 10px 20px;
+    max-height: 55%;
+    padding-left: 10px;
+    padding-top: 10px;
 }
 .nav-light a:hover {
     color: #fff;
@@ -402,6 +422,7 @@ section.poi h3 {
     top: 0;
     width: 100%;    
 }
+/*****/
 canvas {
     width: 100%;
     height: 100%;
diff --git a/css/spectre.css b/css/spectre.css
index dcb9514..9b67bf2 100644
--- a/css/spectre.css
+++ b/css/spectre.css
@@ -2570,7 +2570,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .modal:target .modal-overlay,
 .modal.active .modal-overlay {
-  background: rgba(247, 248, 249, .75);
+  background: rgba(91, 96, 100, 0.75);
   bottom: 0;
   cursor: default;
   display: block;
@@ -2597,11 +2597,14 @@ summary.accordion-header::-webkit-details-marker {
 
 .modal.modal-lg .modal-container {
   box-shadow: none;
-  max-width: 960px;
+  /* Custom max-width*/
+  max-width: 100%;
+  max-height: 100vh;
 }
 
 .modal-container {
-  background: #fff;
+  /*background: #fff;*/
+  color: #fff;
   border-radius: .1rem;
   box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3);
   display: -ms-flexbox;
@@ -2619,12 +2622,12 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .modal-container .modal-header {
-  color: #303742;
+  /*color: #303742;*/
   padding: .8rem;
 }
 
 .modal-container .modal-body {
-  overflow-y: auto;
+  overflow: hidden;
   padding: .8rem;
   position: relative;
 }
diff --git a/img/Prologo-Annunziazione_backst.jpg b/img/Prologo-Annunziazione_backst.jpg
deleted file mode 100644
index 562f06f..0000000
Binary files a/img/Prologo-Annunziazione_backst.jpg and /dev/null differ
diff --git a/img/fara_background.jpg b/img/fara_background.jpg
deleted file mode 100644
index 669b6df..0000000
Binary files a/img/fara_background.jpg and /dev/null differ
diff --git a/img/fara_background_alt.jpg b/img/fara_background_alt.jpg
deleted file mode 100644
index 36d32b0..0000000
Binary files a/img/fara_background_alt.jpg and /dev/null differ
diff --git a/img/fara_bg_10.png b/img/fara_bg_10.png
deleted file mode 100644
index fe83199..0000000
Binary files a/img/fara_bg_10.png and /dev/null differ
diff --git a/img/fara_bg_11.jpg b/img/fara_bg_11.jpg
deleted file mode 100644
index cf6ca5b..0000000
Binary files a/img/fara_bg_11.jpg and /dev/null differ
diff --git a/img/fara_bg_2.jpg b/img/fara_bg_2.jpg
deleted file mode 100644
index e3793fb..0000000
Binary files a/img/fara_bg_2.jpg and /dev/null differ
diff --git a/img/fara_bg_3.jpg b/img/fara_bg_3.jpg
deleted file mode 100644
index 5e7f429..0000000
Binary files a/img/fara_bg_3.jpg and /dev/null differ
diff --git a/img/fara_bg_4.jpg b/img/fara_bg_4.jpg
deleted file mode 100644
index 5c77756..0000000
Binary files a/img/fara_bg_4.jpg and /dev/null differ
diff --git a/img/fara_bg_5.jpg b/img/fara_bg_5.jpg
deleted file mode 100644
index 9af7490..0000000
Binary files a/img/fara_bg_5.jpg and /dev/null differ
diff --git a/img/fara_bg_6.jpg b/img/fara_bg_6.jpg
deleted file mode 100644
index 62f6054..0000000
Binary files a/img/fara_bg_6.jpg and /dev/null differ
diff --git a/img/fara_bg_7.jpg b/img/fara_bg_7.jpg
deleted file mode 100644
index cc12be7..0000000
Binary files a/img/fara_bg_7.jpg and /dev/null differ
diff --git a/img/fara_bg_8.jpg b/img/fara_bg_8.jpg
deleted file mode 100644
index 11945ea..0000000
Binary files a/img/fara_bg_8.jpg and /dev/null differ
diff --git a/img/fara_bg_9.jpg b/img/fara_bg_9.jpg
deleted file mode 100644
index 874c1d2..0000000
Binary files a/img/fara_bg_9.jpg and /dev/null differ
diff --git a/img/InnovaPatrimonio_logo_transparent_bg_150x98.png b/img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png
similarity index 100%
rename from img/InnovaPatrimonio_logo_transparent_bg_150x98.png
rename to img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png
diff --git a/img/ispc_ext_large.png b/img/loghi/ispc_ext_large.png
similarity index 100%
rename from img/ispc_ext_large.png
rename to img/loghi/ispc_ext_large.png
diff --git a/img/loghi_ispc_potlach.png b/img/loghi/loghi_ispc_potlach.png
similarity index 100%
rename from img/loghi_ispc_potlach.png
rename to img/loghi/loghi_ispc_potlach.png
diff --git a/img/loghi_ispc_potlach_sd.png b/img/loghi/loghi_ispc_potlach_sd.png
similarity index 100%
rename from img/loghi_ispc_potlach_sd.png
rename to img/loghi/loghi_ispc_potlach_sd.png
diff --git a/img/logo_orpheo.png b/img/loghi/logo_orpheo.png
similarity index 100%
rename from img/logo_orpheo.png
rename to img/loghi/logo_orpheo.png
diff --git a/img/logo_potlach.jpg b/img/loghi/logo_potlach.jpg
similarity index 100%
rename from img/logo_potlach.jpg
rename to img/loghi/logo_potlach.jpg
diff --git a/img/logo_sillabe.jpg b/img/loghi/logo_sillabe.jpg
similarity index 100%
rename from img/logo_sillabe.jpg
rename to img/loghi/logo_sillabe.jpg
diff --git a/img/logo_theorema.png b/img/loghi/logo_theorema.png
similarity index 100%
rename from img/logo_theorema.png
rename to img/loghi/logo_theorema.png
diff --git a/img/lp-bg/fara_bg_1.jpg b/img/lp-bg/fara_bg_1.jpg
new file mode 100644
index 0000000..f6cea02
Binary files /dev/null and b/img/lp-bg/fara_bg_1.jpg differ
diff --git a/img/lp-bg/fara_bg_2.jpg b/img/lp-bg/fara_bg_2.jpg
new file mode 100644
index 0000000..4e22a21
Binary files /dev/null and b/img/lp-bg/fara_bg_2.jpg differ
diff --git a/img/lp-bg/fara_bg_3.jpg b/img/lp-bg/fara_bg_3.jpg
new file mode 100644
index 0000000..ed2922c
Binary files /dev/null and b/img/lp-bg/fara_bg_3.jpg differ
diff --git a/img/lp-bg/fara_bg_4.jpg b/img/lp-bg/fara_bg_4.jpg
new file mode 100644
index 0000000..e00b5b7
Binary files /dev/null and b/img/lp-bg/fara_bg_4.jpg differ
diff --git a/img/lp-bg/fara_bg_5.jpg b/img/lp-bg/fara_bg_5.jpg
new file mode 100644
index 0000000..937de31
Binary files /dev/null and b/img/lp-bg/fara_bg_5.jpg differ
diff --git a/img/progetto_header.jpg b/img/progetto_header.jpg
index 0158b53..255cec3 100644
Binary files a/img/progetto_header.jpg and b/img/progetto_header.jpg differ
diff --git a/img/slider/Acquisizione Carro.jpg b/img/slider/Acquisizione Carro.jpg
deleted file mode 100644
index c4e44b8..0000000
Binary files a/img/slider/Acquisizione Carro.jpg and /dev/null differ
diff --git a/img/slider/Angelo_backst.jpg b/img/slider/Angelo_backst.jpg
deleted file mode 100644
index 6af04ae..0000000
Binary files a/img/slider/Angelo_backst.jpg and /dev/null differ
diff --git a/img/slider/Rocco si è svegliato02 Backst.jpg b/img/slider/Rocco si è svegliato02 Backst.jpg
deleted file mode 100644
index 95f1a2d..0000000
Binary files a/img/slider/Rocco si è svegliato02 Backst.jpg and /dev/null differ
diff --git a/img/slider/Vicolo.jpg b/img/slider/Vicolo.jpg
deleted file mode 100644
index 227730f..0000000
Binary files a/img/slider/Vicolo.jpg and /dev/null differ
diff --git a/img/slider/slide_1.jpg b/img/slider/slide_1.jpg
new file mode 100644
index 0000000..8610472
Binary files /dev/null and b/img/slider/slide_1.jpg differ
diff --git a/img/slider/slide_2.jpg b/img/slider/slide_2.jpg
new file mode 100644
index 0000000..6f6a31a
Binary files /dev/null and b/img/slider/slide_2.jpg differ
diff --git a/img/slider/slide_3.jpg b/img/slider/slide_3.jpg
new file mode 100644
index 0000000..8d28cb5
Binary files /dev/null and b/img/slider/slide_3.jpg differ
diff --git a/img/slider/slide_4.jpg b/img/slider/slide_4.jpg
new file mode 100644
index 0000000..fa6868c
Binary files /dev/null and b/img/slider/slide_4.jpg differ
diff --git a/img/slider/slide_5.jpg b/img/slider/slide_5.jpg
new file mode 100644
index 0000000..b2b26ae
Binary files /dev/null and b/img/slider/slide_5.jpg differ
diff --git a/img/thumb_alberto.jpg b/img/thumb_alberto.jpg
deleted file mode 100644
index 386e333..0000000
Binary files a/img/thumb_alberto.jpg and /dev/null differ
diff --git a/img/thumb_antonio.jpg b/img/thumb_antonio.jpg
deleted file mode 100644
index a213c81..0000000
Binary files a/img/thumb_antonio.jpg and /dev/null differ
diff --git a/img/thumb_carro.jpg b/img/thumb_carro.jpg
deleted file mode 100644
index 4671c47..0000000
Binary files a/img/thumb_carro.jpg and /dev/null differ
diff --git a/img/thumb_castello.jpg b/img/thumb_castello.jpg
deleted file mode 100644
index 0bdb819..0000000
Binary files a/img/thumb_castello.jpg and /dev/null differ
diff --git a/img/thumb_disputa.jpg b/img/thumb_disputa.jpg
deleted file mode 100644
index 8fad56b..0000000
Binary files a/img/thumb_disputa.jpg and /dev/null differ
diff --git a/img/thumb_duomo.jpg b/img/thumb_duomo.jpg
deleted file mode 100644
index 3104e4e..0000000
Binary files a/img/thumb_duomo.jpg and /dev/null differ
diff --git a/img/thumb_eva.jpg b/img/thumb_eva.jpg
deleted file mode 100644
index cef1257..0000000
Binary files a/img/thumb_eva.jpg and /dev/null differ
diff --git a/img/thumb_faresi.jpg b/img/thumb_faresi.jpg
deleted file mode 100644
index 750d55e..0000000
Binary files a/img/thumb_faresi.jpg and /dev/null differ
diff --git a/img/thumb_francesco.jpg b/img/thumb_francesco.jpg
deleted file mode 100644
index 749697b..0000000
Binary files a/img/thumb_francesco.jpg and /dev/null differ
diff --git a/img/thumb_fuori.jpg b/img/thumb_fuori.jpg
deleted file mode 100644
index 323af15..0000000
Binary files a/img/thumb_fuori.jpg and /dev/null differ
diff --git a/img/thumb_loredana.jpg b/img/thumb_loredana.jpg
deleted file mode 100644
index eaa08c6..0000000
Binary files a/img/thumb_loredana.jpg and /dev/null differ
diff --git a/img/thumb_monumento.jpg b/img/thumb_monumento.jpg
deleted file mode 100644
index 1d9a615..0000000
Binary files a/img/thumb_monumento.jpg and /dev/null differ
diff --git a/img/thumb_nobili.jpg b/img/thumb_nobili.jpg
deleted file mode 100644
index 722c4b3..0000000
Binary files a/img/thumb_nobili.jpg and /dev/null differ
diff --git a/img/thumb_piazza.jpg b/img/thumb_piazza.jpg
deleted file mode 100644
index 37d23b1..0000000
Binary files a/img/thumb_piazza.jpg and /dev/null differ
diff --git a/img/thumb_pietro.jpg b/img/thumb_pietro.jpg
deleted file mode 100644
index 11945ea..0000000
Binary files a/img/thumb_pietro.jpg and /dev/null differ
diff --git a/img/thumb_prologo.jpg b/img/thumb_prologo.jpg
deleted file mode 100644
index 0dcaf5a..0000000
Binary files a/img/thumb_prologo.jpg and /dev/null differ
diff --git a/img/thumb_rocco.jpg b/img/thumb_rocco.jpg
deleted file mode 100644
index 4ba9793..0000000
Binary files a/img/thumb_rocco.jpg and /dev/null differ
diff --git a/img/thumb_sabini.jpg b/img/thumb_sabini.jpg
deleted file mode 100644
index bc2d153..0000000
Binary files a/img/thumb_sabini.jpg and /dev/null differ
diff --git a/img/thumb_toto.jpg b/img/thumb_toto.jpg
deleted file mode 100644
index 11c8918..0000000
Binary files a/img/thumb_toto.jpg and /dev/null differ
diff --git a/img/thumb_viaggiatore.jpg b/img/thumb_viaggiatore.jpg
deleted file mode 100644
index 5e7f429..0000000
Binary files a/img/thumb_viaggiatore.jpg and /dev/null differ
diff --git a/img/thumbs/thumb_alberto.jpg b/img/thumbs/thumb_alberto.jpg
new file mode 100644
index 0000000..63a15fa
Binary files /dev/null and b/img/thumbs/thumb_alberto.jpg differ
diff --git a/img/thumbs/thumb_antonio.jpg b/img/thumbs/thumb_antonio.jpg
new file mode 100644
index 0000000..bbc86b5
Binary files /dev/null and b/img/thumbs/thumb_antonio.jpg differ
diff --git a/img/thumbs/thumb_carro.jpg b/img/thumbs/thumb_carro.jpg
new file mode 100644
index 0000000..a3bcf47
Binary files /dev/null and b/img/thumbs/thumb_carro.jpg differ
diff --git a/img/thumbs/thumb_castello.jpg b/img/thumbs/thumb_castello.jpg
new file mode 100644
index 0000000..6fbad0d
Binary files /dev/null and b/img/thumbs/thumb_castello.jpg differ
diff --git a/img/thumbs/thumb_disputa.jpg b/img/thumbs/thumb_disputa.jpg
new file mode 100644
index 0000000..eea4173
Binary files /dev/null and b/img/thumbs/thumb_disputa.jpg differ
diff --git a/img/thumbs/thumb_duomo.jpg b/img/thumbs/thumb_duomo.jpg
new file mode 100644
index 0000000..11a462b
Binary files /dev/null and b/img/thumbs/thumb_duomo.jpg differ
diff --git a/img/thumbs/thumb_eva.jpg b/img/thumbs/thumb_eva.jpg
new file mode 100644
index 0000000..4f32dc2
Binary files /dev/null and b/img/thumbs/thumb_eva.jpg differ
diff --git a/img/thumbs/thumb_faresi.jpg b/img/thumbs/thumb_faresi.jpg
new file mode 100644
index 0000000..7ebe7fe
Binary files /dev/null and b/img/thumbs/thumb_faresi.jpg differ
diff --git a/img/thumbs/thumb_francesco.jpg b/img/thumbs/thumb_francesco.jpg
new file mode 100644
index 0000000..90a4f6f
Binary files /dev/null and b/img/thumbs/thumb_francesco.jpg differ
diff --git a/img/thumbs/thumb_fuori.jpg b/img/thumbs/thumb_fuori.jpg
new file mode 100644
index 0000000..af2a4ae
Binary files /dev/null and b/img/thumbs/thumb_fuori.jpg differ
diff --git a/img/thumbs/thumb_loredana.jpg b/img/thumbs/thumb_loredana.jpg
new file mode 100644
index 0000000..79b80c0
Binary files /dev/null and b/img/thumbs/thumb_loredana.jpg differ
diff --git a/img/thumbs/thumb_monumento.jpg b/img/thumbs/thumb_monumento.jpg
new file mode 100644
index 0000000..050b0e5
Binary files /dev/null and b/img/thumbs/thumb_monumento.jpg differ
diff --git a/img/thumbs/thumb_nobili.jpg b/img/thumbs/thumb_nobili.jpg
new file mode 100644
index 0000000..1b70cd1
Binary files /dev/null and b/img/thumbs/thumb_nobili.jpg differ
diff --git a/img/thumbs/thumb_piazza.jpg b/img/thumbs/thumb_piazza.jpg
new file mode 100644
index 0000000..a0be8fa
Binary files /dev/null and b/img/thumbs/thumb_piazza.jpg differ
diff --git a/img/thumbs/thumb_pietro.jpg b/img/thumbs/thumb_pietro.jpg
new file mode 100644
index 0000000..47de935
Binary files /dev/null and b/img/thumbs/thumb_pietro.jpg differ
diff --git a/img/thumbs/thumb_prologo.jpg b/img/thumbs/thumb_prologo.jpg
new file mode 100644
index 0000000..7ef17be
Binary files /dev/null and b/img/thumbs/thumb_prologo.jpg differ
diff --git a/img/thumbs/thumb_rocco.jpg b/img/thumbs/thumb_rocco.jpg
new file mode 100644
index 0000000..6c86ca5
Binary files /dev/null and b/img/thumbs/thumb_rocco.jpg differ
diff --git a/img/thumbs/thumb_sabini.jpg b/img/thumbs/thumb_sabini.jpg
new file mode 100644
index 0000000..b5b2785
Binary files /dev/null and b/img/thumbs/thumb_sabini.jpg differ
diff --git a/img/thumbs/thumb_toto.jpg b/img/thumbs/thumb_toto.jpg
new file mode 100644
index 0000000..e0017c2
Binary files /dev/null and b/img/thumbs/thumb_toto.jpg differ
diff --git a/img/thumbs/thumb_viaggiatore.jpg b/img/thumbs/thumb_viaggiatore.jpg
new file mode 100644
index 0000000..8308bf9
Binary files /dev/null and b/img/thumbs/thumb_viaggiatore.jpg differ
diff --git a/index.html b/index.html
index 16047c3..1d1c712 100644
--- a/index.html
+++ b/index.html
@@ -8,28 +8,26 @@
         <script src="js/ui.js" type="module"></script>
         <title>Nel cielo di Fara</title>
     </head>
-    <body>
+    <body>        
         <header class="main-header home">
             <div class="container">
                 <div class="columns text-gray" id="nav">
                     <div class="column col-lg-7 col-sm-10 col-md-2">
-                        <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                        <img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
                     </div>
                     <div class="column col-sm-2 show-sm text-right">
                         <i class="icon icon-menu icon-2x"></i>
                     </div>
                     <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
-                        <a href="index.html" title="Torna alla home page">Home</a>
-                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </div>
                     <nav class="d-hide side-nav bg-white opensans">
                         <p id="close-nav"><i class="icon-close"></i></p>
-                        <a href="index.html" title="Torna alla home page">Home</a>
-                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </nav>
@@ -37,7 +35,7 @@
             </div>
             <div id="title" class="text-center">
                 <h1 class="arvo">Nel cielo di Fara</h1>
-                <button>Entra</button>
+                <a href="itinerario.html"><button>Entra</button></a>
             </div>
         </header>
         <main></main>
@@ -46,5 +44,12 @@
             <p><img src="img/loghi_ispc_potlach.png" class="logos" alt="Loghi ISPC Potlach"></p>
             <p><img src="img/FESR_BARRA_BENEFICIARI_DEF.jpg" class="logos" alt="Loghi enti beneficiari"></p>
         </footer>
+        <div id="preload">
+            <img src="img/lp-bg/fara_bg_1.jpg" />
+            <img src="img/lp-bg/fara_bg_2.jpg" />
+            <img src="img/lp-bg/fara_bg_3.jpg" />
+            <img src="img/lp-bg/fara_bg_4.jpg" />
+            <img src="img/lp-bg/fara_bg_5.jpg" />
+        </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/itinerario.html b/itinerario.html
index eba66a2..2528327 100644
--- a/itinerario.html
+++ b/itinerario.html
@@ -13,23 +13,21 @@
             <div class="container">
                 <div class="columns bg-white" id="nav">
                     <div class="column col-lg-7 col-sm-10 col-md-2">
-                        <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                        <img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
                     </div>
                     <div class="column col-sm-2 show-sm text-right">
                         <i class="icon icon-menu icon-2x"></i>
                     </div>
                     <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-menu" id="links">
-                        <a href="index.html" title="Torna alla home page">Home</a>
-                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </div>
                     <nav class="d-hide side-nav bg-white opensans">
                         <p id="close-nav"><i class="icon-close"></i></p>
-                        <a href="index.html" title="Torna alla home page">Home</a>
-                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </nav>
@@ -84,7 +82,7 @@
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
                             <a href="#open-vid" title="Guarda il video">
-                                <img src="img/thumb_prologo.jpg" alt="Prologo">
+                                <img src="img/thumbs/thumb_prologo.jpg" alt="Prologo">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -100,7 +98,7 @@
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
                             <a href="#open-vid" title="Guarda il video del viaggiatore">
-                                <img src="img/thumb_viaggiatore.jpg" alt="Viaggiatore #1">
+                                <img src="img/thumbs/thumb_viaggiatore.jpg" alt="Viaggiatore #1">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -122,8 +120,8 @@
                 <div class="container">
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_faresi.jpg" alt="Prologo">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_faresi.jpg" alt="Prologo">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -140,8 +138,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video del viaggiatore">
-                                <img src="img/thumb_piazza.jpg" alt="Viaggiatore #1">
+                            <a href="#open-vid" title="Guarda il video del viaggiatore">
+                                <img src="img/thumbs/thumb_piazza.jpg" alt="Viaggiatore #1">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -161,8 +159,8 @@
                 <div class="container">
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_antonio.jpg" alt="Antonio">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_antonio.jpg" alt="Antonio">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -176,8 +174,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_francesco.jpg" alt="Francesco #3b">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_francesco.jpg" alt="Francesco #3b">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -197,8 +195,8 @@
                 <div class="container">
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_nobili.jpg" alt="I nobili di Fara">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_nobili.jpg" alt="I nobili di Fara">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -216,8 +214,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_rocco.jpg" alt="Rocco si è svegliato #5">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_rocco.jpg" alt="Rocco si è svegliato #5">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -230,7 +228,7 @@
                                 Passava tutto il tempo all'osteria del paese. Ora si è appena 
                                 risvegliato dal lungo sonno e  non riconosce più la sua Fara, 
                                 tutta vuota e silenziosa. Ma Ariel compie una magia e gli mostra 
-                                il borgo popolato come era allora 
+                                il borgo popolato come era allora. 
                             </p>
                         </div>
                     </div>
@@ -239,8 +237,8 @@
                 <div class="container">
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_alberto.jpg" alt="Alberto">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_alberto.jpg" alt="Alberto">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -255,8 +253,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_disputa.jpg" alt="Disputa sui dialetti e sui saperi">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_disputa.jpg" alt="Disputa sui dialetti e sui saperi">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -264,13 +262,11 @@
                                 Disputa sui dialetti e sui saperi #6
                             </h3>
                             <p class="text-small">
-                                Trilussa intrattiene con una piccola platea in una piazzetta,
-                                recitando poesie. Alberto, inizialmente seduto un po' in disparte,
-                                mal sopporta la lingua romanesca di Trilussa e improvvisamente 
-                                si accende, accusando il poeta di essere un forestiero,
-                                un sabotatore in terra sabina. I due intraprendono una 
-                                accesa disputa sui dialetti e sui saperi... finendo
-                                inevitabilmente per parlare di cucina. 
+                                Trilussa recita poesie davanti una piccola platea in una piazzetta.
+                                Alberto, inizialmente seduto un po' in disparte, mal sopporta la
+                                lingua romanesca di Trilussa e improvvisamente si accende,
+                                accusando il poeta di essere un forestiero in terra sabina.
+                                I due intraprendono una accesa disputa sui dialetti e sui cibi. 
                             </p>
                         </div>
                     </div>
@@ -279,8 +275,8 @@
                 <div class="container">
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_duomo.jpg" alt="Piazza Duomo">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_duomo.jpg" alt="Piazza Duomo">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -297,8 +293,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_loredana.jpg" alt="Loredana">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_loredana.jpg" alt="Loredana">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -320,8 +316,8 @@
                 <div class="container">
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_pietro.jpg" alt="Pietro">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_pietro.jpg" alt="Pietro">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -337,8 +333,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_castello.jpg" alt="Il castello">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_castello.jpg" alt="Il castello">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -347,10 +343,9 @@
                             </h3>
                             <p class="text-small">
                                 Fara ha un castello di nobili origini, più volte espugnato e ricostruito.
-                                Un tempo ospitava la scuola di musica, l'ospedale, e tante attività del paese.
-                                Oggi è quasi in abbandono ma ci sono ancora dei tesori. Due imbonitori
-                                sui trampoli convincono la popolazione ad entrare nel castello,
-                                promettendo che lì dentro potrà trovare risposta a tutti i suoi desideri.
+                                Un tempo ospitava le tante attività del paese. Oggi è quasi in abbandono.
+                                Due imbonitori convincono la popolazione ad entrare, promettendo che lì
+                                dentro potrà trovare risposta a tutti i suoi desideri.
                                 Così gli abitanti cominciano a dar voce ai loro desideri, fin quando…  
                             </p>
                         </div>
@@ -360,8 +355,8 @@
                 <div class="container">
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_sabini.jpg" alt="I sabini ieri e oggi">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_sabini.jpg" alt="I sabini ieri e oggi">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -377,8 +372,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_monumento.jpg" alt="Il monumento sacro">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_monumento.jpg" alt="Il monumento sacro">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -399,8 +394,8 @@
                 <div class="container">
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_eva.jpg" alt="Eva">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_eva.jpg" alt="Eva">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -417,8 +412,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_toto.jpg" alt="Toto">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_toto.jpg" alt="Toto">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -438,8 +433,8 @@
                 <div class="container">
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_fuori.jpg" alt="Fuori Porta">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_fuori.jpg" alt="Fuori Porta">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -455,8 +450,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
-                                <img src="img/thumb_carro.jpg" alt="Il ritorno del carro">
+                            <a href="#open-vid" title="Guarda il video">
+                                <img src="img/thumbs/thumb_carro.jpg" alt="Il ritorno del carro">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
diff --git a/js/fara.js b/js/fara.js
index b3c76ed..dbaa8d5 100644
--- a/js/fara.js
+++ b/js/fara.js
@@ -1,35 +1,49 @@
 //use strict;
-
-export function slider(nextimage) {
+/**
+ * 'Slide' background images
+ * in landing page
+ * @todo Preload iamges?? https://stackoverflow.com/questions/3646036/preloading-images-with-javascript
+ */
+export function sliderBg()
+{
+    let nextimage = 0;
     let header = document.querySelector('header');
+    slider();
+    
+    function slider() {
+        /*** Fade in??*/
+        //opacity = 1;
 
     let images = [
-        'img/fara_background.jpg',
-        //'img/fara_bg_2.jpg',
-        'img/fara_bg_3.jpg',
-        'img/fara_bg_4.jpg',
-        'img/fara_bg_5.jpg',
-        //'img/fara_bg_6.jpg',
-        'img/fara_bg_7.jpg',
-        'img/fara_bg_8.jpg',
-        'img/fara_bg_9.jpg',
-        'img/fara_bg_10.png',
-        'img/fara_bg_11.jpg',
-    ];
-
+            'img/lp-bg/fara_bg_1.jpg',
+            'img/lp-bg/fara_bg_2.jpg',
+            'img/lp-bg/fara_bg_3.jpg',
+            'img/lp-bg/fara_bg_4.jpg',
+            'img/lp-bg/fara_bg_5.jpg',
+        ];
+        
     if (nextimage >= images.length) {
-       nextimage = 0;
+        nextimage = 0;
+    }
+    header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
+    setTimeout(slider, 2000);
    }
-   header.setAttribute('style', 'background-image : url("' +images[nextimage++] + '");');
-   setTimeout(slider(nextimage), 2000);
 }
-
+/**
+ * @todo
+ * Simple slideshow (Credits page) 
+ */
+export function slideshow()
+{
+    // Write me...
+}
 /**
  * @todo
  * The canvas should be drawn into an overlay
  * container (always fullscreen)
  */
-export function interactiveMap() {
+export function interactiveMap() 
+{
     let canvas = document.createElement('canvas');
 
     let ctx = canvas.getContext('2d');
@@ -40,4 +54,149 @@ export function interactiveMap() {
     img.onload = () => {
         ctx.drawImage(img, 0, 0);
     }
+}
+/**
+ * Menu keys for accessibility
+ */
+export function menuKeys() 
+{
+    document.addEventListener('keypress', e => {
+        let keyCode = e.code;
+
+        if (keyCode.includes('Digit')) {
+            let numCode = keyCode.replace('Digit', '');
+
+            let menuK = {
+                '1' : 'itinerario.html',
+                '2' : 'progetto.html',
+                '3' : 'news.html',
+                '4':  'credits.html',
+            };
+
+            for (let k in menuK) {
+                if (k === numCode) 
+                    window.location.href = menuK[k];
+            }
+        }
+    });
+}
+/**
+ * Apply active class to nav links
+ * @todo Inefficient?
+ */
+export function activeNav()
+{
+    let navlinks = Array.from(document.querySelectorAll('#links a'));
+
+    navlinks.forEach(element => {
+        let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
+        
+        if (window.location.href.includes(ref)) {
+            element.setAttribute('class', 'active');
+        }
+    });
+}
+/**
+ * Show vertical nav on mobile
+ */
+export function mobileNav()
+{
+    let menu = document.querySelector('i');
+
+    if (menu) {
+        menu.addEventListener('click', () => {
+            document.querySelector('.side-nav').classList.remove('d-hide');
+            document.querySelector('.side-nav').classList.remove('slide-out');
+            document.querySelector('body').classList.add('opaque');
+        });
+    
+        let close = document.querySelector('#close-nav');
+    
+        close.addEventListener('click', () => {
+            document.querySelector('.side-nav').classList.add('d-hide');
+            document.querySelector('body').classList.remove('opaque');
+        });
+    }
+}
+/**
+ * Open / close modal for videos
+ * and apply video source
+ */
+export function openVideo(a)
+{
+    /**
+    let modal = document.querySelector('#mod-vid');
+    let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
+
+     * Dynamically change video source
+     * Note naming convention...
+    if (vidLinks.length) {
+        vidLinks.forEach(a => {
+        */
+
+    let aNodes = a.childNodes;
+    // Hacky??
+    let title = a.parentElement
+        .nextElementSibling
+        .firstElementChild
+        .innerHTML
+        .trim();
+    
+    console.log(aNodes);
+    let vStr = '';
+
+    aNodes.forEach(n => {
+        if (n.src) {
+            vStr = n.src;
+            vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length)
+                .replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
+        }
+    });
+
+    localStorage.setItem('vidURI', vStr);
+    localStorage.setItem('vidTitle', title);
+    /**
+     * Go to video page
+     */
+    window.location.href = 'video.html';
+    /* Close the modal when clicking on the
+    modal.classList.add('active');
+    document.querySelector('.modal-title').classList.add('roboto');
+    document.querySelector('.modal-title').innerHTML = title;
+    
+    let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
+    
+    close.addEventListener('click', () => {
+        modal.classList.remove('active');
+    });
+
+    *  overlay
+    overlay.addEventListener('click', () => {
+        modal.classList.remove('active');
+    })
+    */
+}
+/**
+ * Activate background on scroll for nav only
+ * if not small screen
+ */
+export function navOnScroll()
+{
+    let nav   = document.querySelector('#nav');
+    let links = document.querySelector('#links');
+
+    if (window.pageYOffset !== 0) {
+        nav.classList.add('bg-white', 'border');
+        nav.classList.remove('text-gray');
+        links.classList.add('nav-dark');
+        links.classList.remove('nav-light');
+    }
+    else {
+        if (!document.querySelector('header').classList.contains('itin')) {
+            nav.classList.add('text-gray');
+            links.classList.remove('nav-dark');
+            links.classList.add('nav-light');
+        }
+        nav.classList.remove('bg-white', 'border');
+    }
 }
\ No newline at end of file
diff --git a/js/ui.js b/js/ui.js
index e013c76..5caf2c3 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -2,165 +2,59 @@
 
 import * as Farapp from './fara.js';
 
-let homeRE = new RegExp(/(https?:\S+\/$|index.html$)/);
+let landing = new RegExp(/(https?:\S+\/$|index.html$)/);
 
-if (homeRE.test(window.location.href)) {
+if (landing.test(window.location.href)) {
+    window.addEventListener('load', () => {
+        Farapp.sliderBg();
+    });
+}
+
+if (!window.location.href.includes('video')) {
     document.addEventListener('readystatechange', () => {
-        let nextimage = 0;
-        let header = document.querySelector('header');
-        slider();
-        
-        function slider() {
-            /*** Fade in??*/
-            //opacity = 1;
+        Farapp.activeNav();
+        Farapp.menuKeys();
+        Farapp.mobileNav();
+    });
 
-        let images = [
-                'img/fara_background.jpg',
-                //'img/fara_bg_2.jpg',
-                'img/fara_bg_3.jpg',
-                'img/fara_bg_4.jpg',
-                'img/fara_bg_5.jpg',
-                //'img/fara_bg_6.jpg',
-                'img/fara_bg_7.jpg',
-                'img/fara_bg_8.jpg',
-                'img/fara_bg_9.jpg',
-                'img/fara_bg_10.png',
-                'img/fara_bg_11.jpg',
-            ];
-            
-        if (nextimage >= images.length) {
-            nextimage = 0;
-        }
-        header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
-        setTimeout(slider, 2000);
-       }
+    window.addEventListener('scroll', event => {
+        Farapp.navOnScroll();
     });
 }
 /**
- * Apply active class to selected link...
- * @todo Inefficient!!
+ * For itinerario.html...
+ * @todo What about the interactive map?!?
  */
-document.addEventListener('readystatechange', () => {
-    let navlinks = Array.from(document.querySelectorAll('#links a'));
-
-    navlinks.forEach(element => {
-        let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
-        
-        if (window.location.href.includes(ref)) {
-            element.setAttribute('class', 'active');
-        }
-        if (homeRE.test(window.location.href)) {
-            navlinks[0].setAttribute('class', 'active');
-        }
-    });
-});
-/**
- * Activate background on scroll for nav only
- * if not small screen
- */
-window.addEventListener('scroll', event => {
-    let nav = document.querySelector('#nav');
-    let links = document.querySelector('#links');
-
-    if (window.pageYOffset !== 0) {
-        nav.classList.add('bg-white', 'border');
-        nav.classList.remove('text-gray');
-        links.classList.add('nav-dark');
-        links.classList.remove('nav-light');
-    }
-    else {
-        if (!document.querySelector('header').classList.contains('itin')) {
-            nav.classList.add('text-gray');
-            links.classList.remove('nav-dark');
-            links.classList.add('nav-light');
-        }
-        nav.classList.remove('bg-white', 'border');
-    }
-});
-/**
-* Show horizontal nav on mobile
-*/
-document.addEventListener('readystatechange', () => {
-    let menu = document.querySelector('i');
-
-    menu.addEventListener('click', () => {
-        document.querySelector('.side-nav').classList.remove('d-hide');
-        document.querySelector('.side-nav').classList.remove('slide-out');
-        document.querySelector('body').classList.add('opaque');
-    });
-
-    let close = document.querySelector('#close-nav');
-
-    close.addEventListener('click', () => {
-        document.querySelector('.side-nav').classList.add('d-hide');
-        document.querySelector('body').classList.remove('opaque');
+if (window.location.href.includes('itinerario')) {
+    let vidLinks = document.querySelectorAll('a[href="#open-vid"]');
+    vidLinks.forEach(a => {
+        a.addEventListener('click', () => {
+            Farapp.openVideo(a);
+        });
     })
-})
+}
 /**
- * Open / close modal for videos
- * and apply video source
+ * For videos...
  */
-window.addEventListener('load', () => {
-    let modal = document.querySelector('#mod-vid');
-    let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
-    /**
-     * Dynamically change video source
-     * Note naming convention...
-     */
-    if (vidLinks.length) {
+if (window.location.href.includes('video')) {
+    document.addEventListener('readystatechange', () => {
+        let vStr = localStorage.getItem('vidURI');
+        let vidTitle = localStorage.getItem('vidTitle');
+
+        console.log(vStr, vidTitle);
+        document.querySelector('h1').innerHTML = vidTitle;
+
+        let close = document.querySelector('a[title="Close"]');
+
+        close.addEventListener('click', () => {
+            window.location.href = 'itinerario.html';
+        });
+
         let source = document.querySelector('source');
         let video = source.parentNode;
-        let overlay = document.querySelector('.modal-overlay');
-
-        vidLinks.forEach(a => {
-            let aNodes = a.childNodes;
-            // Hacky??
-            let title = a.parentElement
-                .nextElementSibling
-                .firstElementChild
-                .innerHTML
-                .trim();
-    
-            a.addEventListener('click', () => {
-                aNodes.forEach(n => {
-                    if (n.src) {
-                        let vStr = n.src
-                        .substr(n.src.lastIndexOf('/')+1, n.src.length)
-                        .replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
-                        
-                        source.src = `assets/video/${vStr}`;
-                        
-                        video.load();
-                    }
-                });
-                
-                modal.classList.add('active');
-                document.querySelector('.modal-title').classList.add('roboto');
-                document.querySelector('.modal-title').innerHTML = title;
-            });
-        });
-    
-        let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
-    
-        close.addEventListener('click', () => {
-            modal.classList.remove('active');
-        });
-
-        /* Close the modal when clicking on the
-        *  overlay
-        */
-       overlay.addEventListener('click', () => {
-            modal.classList.remove('active');
-       })
-    }
-});
-/**
- * Draw interactive map in canvas...
- if (window.location.href.includes('itinerario')) {
-     let mapImg = document.getElementById('map');
-
-     mapImg.addEventListener('click', () => {
-         Farapp.interactiveMap();
-        });
-    }
-*/
\ No newline at end of file
+            
+        source.src = `assets/video/${vStr}`;
+        
+        video.load();
+    });
+}
\ No newline at end of file
diff --git a/news.html b/news.html
index 9257799..15d0e95 100644
--- a/news.html
+++ b/news.html
@@ -13,23 +13,21 @@
             <div class="container">
                 <div class="columns text-gray" id="nav">
                     <div class="column col-lg-7 col-sm-10 col-md-2">
-                        <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                        <img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
                     </div>
                     <div class="column col-sm-2 show-sm text-right">
                         <i class="icon icon-menu icon-2x"></i>
                     </div>
                     <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
-                        <a href="index.html" title="Torna alla home page">Home</a>
-                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </div>
                     <nav class="d-hide side-nav bg-white opensans">
                         <p id="close-nav"><i class="icon-close"></i></p>
-                        <a href="index.html" title="Torna alla home page">Home</a>
-                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </nav>
diff --git a/progetto.html b/progetto.html
index 3cb44f6..9d259d9 100644
--- a/progetto.html
+++ b/progetto.html
@@ -13,30 +13,28 @@
             <div class="container">
                 <div class="columns text-gray" id="nav">
                     <div class="column col-lg-7 col-sm-10 col-md-2">
-                        <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
+                        <img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
                     </div>
                     <div class="column col-sm-2 show-sm text-right">
                         <i class="icon icon-menu icon-2x"></i>
                     </div>
                     <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
-                        <a href="index.html" title="Torna alla home page">Home</a>
-                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </div>
                     <nav class="d-hide side-nav bg-white opensans">
                         <p id="close-nav"><i class="icon-close"></i></p>
-                        <a href="index.html" title="Torna alla home page">Home</a>
-                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
+                        <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
                         <a href="credits.html" title="Credits del progetto">Credits</a>
                     </nav>
                 </div>
             </div>
             <div id="title" class="text-center">
-                <h1 class="roboto">Il progetto</h1>
+                <h1 class="arvo">Il progetto</h1>
             </div>
         </header>
         <main>
@@ -86,12 +84,14 @@
                                 <li>Un prodotto scalabile e ripetibile</li>
                             </ul>
                         </div>
-                        <div class="column col-lg-5 col-sm-12 col-md-12" id="vagg">
-                            <img src="img/Prologo-Annunziazione_backst.jpg">
-                         </div>
+                        <div class="column col-lg-7 col-sm-12 col-md-12 of-hidden">
+                            <iframe src="https://player.vimeo.com/video/578170143" 
+                            width="640" height="360" frameborder="0" allowfullscreen></iframe>
+                        </div>
                     </div>
                 </div>
             </section>
+            <!-- Solo versione online -->
             <section class="odd-stripe">
                 <div class="container">
                     <div class="columns mb-2">
@@ -100,21 +100,19 @@
                         </div>
                         <div class="column col-lg-6 col-sm-12 col-md-12 of-hidden mt-2 mb-2 pr-lg">
                             <p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Piattaforma web</p>
-                            <p class="text-left mb-2">
-                                Per la condivisione dei contenuti e la creazione gratuita di tour e visite guidate
-                            </p>
                             <a href="https://cms.innovapatrimonio.com/" title="Vai al sito di InnovaPatrimonio">
-                                <img src="img/sito_ip.PNG" alt="Sito di InnovaPatrimonio">
+                                <img class="mt-2" src="img/sito_ip.PNG" alt="Sito di InnovaPatrimonio">
                             </a>
                         </div>
                         <div class="column col-lg-6 col-sm-12 col-md-12 mt-2 mb-2 pr-lg">                            
                             <p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Web app</p>
                             <a href="https://pwa.innovapatrimonio.com/" title="Vai alla web app di InnovaPatrimonio">
-                                <img src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
+                                <img class="mt-2" src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
                             </a>
                         </div>
                     </div>
             </section>
+            <!-- Fine (versione online) -->
             <section class="prj-logos">
                 <div class="container">
                     <div class="columns mb-2">
@@ -126,21 +124,21 @@
                         <div class="col-2 col-sm-12 col-md-12"></div>
                         <div class="col-3 col-sm-12 col-md-12 pl-2 pr-2">
                             <figure class="figure">
-                                <img class="of-hidden" src="img/logo_theorema.png" alt="THEOREMA">
+                                <img class="of-hidden" src="img/loghi/logo_theorema.png" alt="THEOREMA">
                                 <figcaption class="figure-caption text-center opensans">THEOREMA</figcaption>
                             </figure>
                         </div>
                         <div class="col-3 col-sm-12 col-md-12 pl-2 pr-2">
                             <a href="https://orpheogroup.com">
                                 <figure class="figure">
-                                    <img class="of-hidden" src="img/logo_orpheo.png" alt="ORPHEO">
+                                    <img class="of-hidden" src="img/loghi/logo_orpheo.png" alt="ORPHEO">
                                     <figcaption class="figure-caption text-center opensans">ORPHEO</figcaption>
                                 </figure>
                             </a>
                         </div>
                         <div class="col-3 col-sm-12 col-md-12 pl-2 pr-2">
                             <figure class="figure">
-                                <img class="of-hidden" src="img/logo_sillabe.jpg" alt="SILLABE">
+                                <img class="of-hidden" src="img/loghi/logo_sillabe.jpg" alt="SILLABE">
                                 <figcaption class="figure-caption text-center opensans">SILLABE</figcaption>
                             </figure>
                         </div>
@@ -159,7 +157,7 @@
                         <div class="col-2 col-sm-12 col-md-12">
                             <a href="https://www.teatropotlach.org" title="Vai al sito del Teatro Potlach">
                                 <figure class="figure">
-                                    <img class="of-hidden" src="img/logo_potlach.jpg" alt="TEATRO POTLACH" id="potlach">
+                                    <img class="of-hidden" src="img/loghi/logo_potlach.jpg" alt="TEATRO POTLACH" id="potlach">
                                     <figcaption class="figure-caption text-center opensans">TEATRO POTLACH</figcaption>
                                 </figure>
                             </a>
diff --git a/video.html b/video.html
new file mode 100644
index 0000000..0d4a128
--- /dev/null
+++ b/video.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="it">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <link rel="stylesheet" href="css/main.css">      
+        <link rel="stylesheet" href="css/spectre-icons.css">      
+        <script src="js/ui.js" type="module"></script>
+        <title>Nel cielo di Fara</title>
+    </head>
+    <body class="bg-dark">
+        <main>
+            <div class="columns">
+                <div class="column col-11">
+                    <h1 class="roboto-slab mb-2 mt-2 ml-2"></h1>
+                </div>
+                <div class="column col-1">
+                    <a href="#close" class="btn btn-clear float-right" title="Close" aria-label="Close"></a>
+                </div>
+                </div>
+                <div class="container">
+                    <video class="video-responsive" controls>
+                        <source src="" type="video/mp4">
+                        Il browser non supporta i video integrati
+                    </video>
+                </div>
+            </div>
+        </main>
+    </body>
+</html>
\ No newline at end of file