Browse Source

first commit

alequa 2 years ago
parent
commit
9d17cd1105

BIN
assets/.DS_Store


BIN
assets/juli/map-juli.jpeg


+ 7 - 0
database.rules.json

@@ -0,0 +1,7 @@
+{
+  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
+  "rules": {
+    ".read": false,
+    ".write": false
+  }
+}

+ 6 - 0
firebase.json

@@ -0,0 +1,6 @@
+{
+  "firestore": {
+    "rules": "firestore.rules",
+    "indexes": "firestore.indexes.json"
+  }
+}

+ 4 - 0
firestore.indexes.json

@@ -0,0 +1,4 @@
+{
+  "indexes": [],
+  "fieldOverrides": []
+}

+ 8 - 0
firestore.rules

@@ -0,0 +1,8 @@
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /{document=**} {
+      allow read, write: if false;
+    }
+  }
+}

BIN
fonts/HelveticaLTStd-Obl.otf


BIN
fonts/HelveticaLTStd-Roman.otf


BIN
fonts/Self Modern Italic.otf


BIN
fonts/URWBookman-Light.otf


BIN
fonts/happy-times-NG_italic_master.otf


BIN
fonts/happy-times-NG_regular_master.otf


+ 14 - 0
functions/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    es6: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "google",
+  ],
+  rules: {
+    quotes: ["error", "double"],
+  },
+};

+ 1 - 0
functions/.gitignore

@@ -0,0 +1 @@
+node_modules/

+ 9 - 0
functions/index.js

@@ -0,0 +1,9 @@
+const functions = require("firebase-functions");
+
+// // Create and Deploy Your First Cloud Functions
+// // https://firebase.google.com/docs/functions/write-firebase-functions
+//
+// exports.helloWorld = functions.https.onRequest((request, response) => {
+//   functions.logger.info("Hello logs!", {structuredData: true});
+//   response.send("Hello from Firebase!");
+// });

+ 26 - 0
functions/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "functions",
+  "description": "Cloud Functions for Firebase",
+  "scripts": {
+    "lint": "eslint .",
+    "serve": "firebase emulators:start --only functions",
+    "shell": "firebase functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
+  },
+  "engines": {
+    "node": "14"
+  },
+  "main": "index.js",
+  "dependencies": {
+    "firebase-admin": "^9.8.0",
+    "firebase-functions": "^3.14.1"
+  },
+  "devDependencies": {
+    "eslint": "^7.6.0",
+    "eslint-config-google": "^0.14.0",
+    "firebase-functions-test": "^0.2.0"
+  },
+  "private": true
+}

+ 159 - 11
index.html

@@ -4,28 +4,176 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <title>cocoatlas</title>
-        <meta name="description" content="test">
-        <meta name="keywords" content="chocolate, cocoa">
+        <title>Women scientists for climate justice</title>
+        <meta name="description" content="Women scientists for climate justice videos">
+        <meta name="keywords" content="science, indigenous, knowledge   ">
         <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
-        
         <link rel="stylesheet" href="styles.css">
 
         <script src="js/jquery-3.6.0.min.js"></script>
         <script src="js/jquery-ui.min.js"></script>
         <script src="js/application.js"></script>
 
+        <link rel="stylesheet" href=
+        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+          
     </head>
-    <body class="home">
+    <body>
+          <!-- <button class="openbtn" onclick="openNav()">☰ Toggle Sidepanel</button>   -->
+        <img  class="openbtn" onclick="openNav()" id="logotsz" src="pictures/logotsz.png" alt="Logo The Science Zone">
 
+          <!-- Add font awesome icons
+          <a href="#" class="fa fa-linkedin"></a>
+          <a href="#" class="fa fa-pinterest"></a>
+          <a href="#" class="fa fa-reddit"></a> -->
 
-        <div class=landingPage>
-            <h1>Cocoa Catalogue</h1>
-            <p>
-                The Cocoa Catalogue unites various routes throughout the world of cocoa and chocolate. Unpacking it through various times, locations and access points that aim to diversify the picture of cocoa and the individuals involved. Adding to a usually sweetly perceived food other tastes that are part of cocoa.</p>
-            <a href="netherlands.html"><div class=buttonEnter>enter</div></a>
+          <div id="mySidepanel" class="sidepanel">
+            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
+            <a href="https://thesciencezoneblog.wordpress.com/">The Science Zone blog</a>
+            <a href="#">Facebook</a>
+            <a href="#">Instagram</a>
+            <a href="#">Email</a>
+          </div>
+          
+        <div class="languageSwitch">
+                    <button id="enButton" >EN</button><button id="itButton" >IT</button>
         </div>
+        <!-- <div class="container"> -->
+
+        <span id="en" class="en language">
+            <div class="text">
+                <h1 class="title"> Women scientists for environmental justice</h1>
+                <h3>Indigenous knowledge and science for a truly sustainable future.</h3>
+                <img id="worldmap" src="pictures/worldmap.png" alt="World map">
+                Over the last century, humanity has seen an explosion of scientific progress and commodities production.                 Correspondigly, part of the world population experienced an improvement of life conditions. This transformation happened, and still does, at the expense of people and territories located far from the urban metropoles, where most of the resources are consumed. 
+                <br>
+                In these remote places, countless living organisms have adapted in equilibrium with their ecosystems. So did human indigenous populations, these ancestral communities thrived for centuries, living in harmony with Nature, depending on it in a respectfull and sustainaible relationshion. The abrupt changes that Earth faces today threaten ecosystems survival as well as indigenous populations life and legacy.
+                <br>
+                <br>
+                The contemporary and exponentially increasing technological power, that originates from and is boosted by scientific knowledge and progress, allows to extract resources at extremely fast and unsustainable rates. The price to pay for such a seemingly unlimited growth is poverty and inequity for large part of the global population, together with environmental degradation, pollution and anthropogenic climate change.
+                Indigenous populations and rural communities living in close contact with Nature pay the highest price for contemporary development. They are the most vulnerable and exposed to the effects of climate change, resource predation, and unsustainable growth.  
+                These people are forced to change their lifestyles, to resettle, relocate and even migrate or die because of their homes and living source being compromised and disrupted by the greed of post-industrial economical powers.
+                
+                <br>
+                In this scenario, science can become a transformative force if used in cooperation and respect of traditional knowledge. Decolonizing science is a crucial step in the long way to environmental and social justice.
+                <br>
+                <br>
+                In this interviews series, we speak with women scientists and activists that work every day in close contact with indigenous populations to let science and law be an instrument to achieve environmental, gender and social justice. Women that live in first person the risks and the damages caused by resource predation and anthropogenic climate change. Women that fight every day from the local to the global scale for human and environmental rights to limit and stop the extractive machine.
+                <br>
+                <br>
+
+                <div class="container">
+                    <div class=videos>
+                        <iframe width="150" height="80" src="https://www.youtube.com/embed/OjapsV-Tcgc" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                    <div class="description">
+                     <b> Introduction</b> <br> </a>
+                     Science and activism for environmental and gender justice.<br>
+                    </div>
+                    <br>
+                </div>
+                    <br>
+
+                <div class="container">
+                    <div class=videos>
+                        <iframe width="150" height="80" src="https://www.youtube.com/embed/OjapsV-Tcgc" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                    <div class="description">
+                        <b>Forests and supermarkets</b><br>                                                                                                                                                                                                  
+                        Why is the lifestyle of indigenous populations truly sustainable?<br>                                                                                                                                                               
+                    </div>
+                    <br>
+                </div>
+                    <br>
+
+                <div class="container">
+                    <div class=videos>
+                        <iframe width="150" height="80" src="https://www.youtube.com/embed/OjapsV-Tcgc" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                    <div class="description">
+                        <b>Rich lands but poor people</b><br>                                                                                                                                                                                                
+                        How do extractivism and climate change threaten life of indigenous population and rural communities.<br>                                                                                                                            
+                    </div>
+                    <br>
+                </div>
+                    <br>
+
+                <div class="container">
+                    <div class=videos>
+                        <iframe width="150" height="80" src="https://www.youtube.com/embed/OjapsV-Tcgc" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                    <div class="description">
+                        <b>Another science is possible</b><br>                                                                                                                                                                                               
+                        Taking action on a changing Earth.                                                                                                                                                                                                  
+                        <br>                                                                                                                                                                                                                                 
+                    </div>
+                    <br>
+                </div>
+                    <br>
+
+                <div class="container">
+                    <div class=videos>
+                        <iframe width="150" height="80" src="https://www.youtube.com/embed/OjapsV-Tcgc" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                    <div class="description">
+                        <b>Conclusions.</b><br>                                                                                                                                                                                                              
+                        Pathways for sustainable futures.<br>                                                                                                                                                                                               
+                    </div>
+                    <br>
+                </div>
+                    <br>
+            All interviews have been carried out by The Scienze Zone, within the european project Boosting Green Education at School (KA2 strategic partnership). Editing and video production by Laboratorio Fujakkà.
+
+            </div>
+            <div class="title">Women Scientist for climate justice</div>
+        </span>
+        <span id="it" class="language">
+            <div class="text">
+                <h1 class="title"> Scienziate per la giustizia ambientale</h1>
+                <h3> Saperi indigeni tradizionali e conoscenza scientifica per un futuro sostenibile.</h3>
+                <img id="worldmap" src="pictures/worldmap.png" alt="World map">
+                                
+                Nell'ultimo secolo vi è stata un'esplosione del progresso scientifico e della produzione di merci e, per parte della popolazione mondiale, questo ha significato un generale miglioramento delle condizioni di vita. 
+                Queste trasformazioni sono avvenute, ed avvengono tuttora, a spese di territori ed ecosistemi lontani dalle città e dalle popolazioni che ne beneficiano. Le foreste, i fiumi, le montagne, le praterie e gli oceani che forniscono le materie prime necessarie al benessere delle nazioni sviluppate sono le stesse che ospitano la più grande varietà di specie animali e vegetali sul pianeta. Ecosistemi che hanno raggiunto un florido equilibrio vitale e per secoli hanno offerto riparo e nutrimento a migliaia di popolazioni indigene in tutto il mondo. Ecosistemi che sono sul punto di scomparire, assieme agli esseri viventi che li abitano.
+
+                    <br>                                                                                                                                                                                                                                 
+                    <br>                                                                                                                                                                                                                                 
+
+                La potenza tecnologica moderna ha permesso di estrarre risorse da questi luoghi a ritmi insostenibili per la natura, lasciando dietro di sé un'infertile povertà e aggravando gli effetti dei cambiamenti climatici in atto su scala globale.
+                D'altra parte, la stessa conoscenza scientifica, se svestita dei suoi soliti abiti coloniali ed usata in cooperazione con le conoscenze delle popolazioni locali, può aiutare a ristabilire la giustizia sociale e ambientale. 
+                    <br>                                                                                                                                                                                                                                 
+                    <br>                                                                                                                                                                                                                                 
+
+                In questa serie di interviste abbiamo parlato con scienziate e attiviste che collaborano quotidianemente con alcune comunità indigene per porre la scienza e la legge al servizio degli ecosistemi e degli esseri viventi che li abitano.
+                Donne che vivono in prima persona i disastri ambientali causati dalla predazione delle risorse e si battono a livello locale e globale per arginare la voracità della macchina capitalista.
+                    <br>                                                                                                                                                                                                                                 
+                    <br>                                                                                                                                                                                                                                 
+
+
+                Abbiamo diviso questo mini documentario in 5 capitoli:
+                1. Introduzione. Scienza e attivismo per la giustizia ambientale.
+                2. La foresta è il nostro supermercato. Perché lo stile di vita indigeno è sostenibile?
+                3. Schiavi delle nostre risorse: Come la predazione delle risorse e i cambiamenti climatici mettono a rischio la vita delle comunità indigene.
+                4. Un'altra scienza è possible: Cambiare la legge e la cultura scientifica per un futuro sostenibile.
+                5. Conclusioni: Obiettivi per un futuro sostenibile.
+                <br>
+                <br>
+
+                Le interviste sono state realizzate da The Science Zone nella cornice del progetto Boosting Green Education at School (KA2 strategic partnership), montaggio a cura del Laboratorio Fujakkà.
+ 
+            </div>
+            <div class="title">Women Scientist for climate justice</div>
+        </span>
+
+        <div id="closing">
+        <!-- <div> <b> Laboratorio <br>Fujakkà </b> </div> -->
+        <a href="https://thesciencezoneblog.wordpress.com/" title="The Science Zone blog" ><img id="riferimenti" src="pictures/intestata.png" alt="Riferimenti tsz"> </a>
+        <a href="https://www.facebook.com/fujakkacinema"> <img   id="fujakka" src="pictures/fujakka.png" title="Laboratorio Fujakkà" alt="Laboratorio Fujakkà"> </a>
+        <img id="boosting" src="pictures/Boosting.jpg" alt="Boosting Green Science"> 
+        <img id="erasmus" src="pictures/erasmus.png" alt="Erasmus+"> 
+        </div>
+        <!-- </div> -->
+
 
-       
     </body>
 </html>

BIN
js/.DS_Store


+ 21 - 225
js/application.js

@@ -1,227 +1,23 @@
 $(document).ready(function(){
-    
-    $(".object").draggable({
-        start: function(){
-            $(".object").css({"z-index": 0});
-            $(this).css({"z-index": 100});
-        }
-    });
-
-    $(".thoughtsWindows").draggable({
-        start: function(){
-            $(".thoughtsWindows").css({"z-index": 0});
-            $(this).css({"z-index": 100});
-        }
-    });
-
-    $(".quotes, #images, .objectTestIndex, #trigger, #trigger2").draggable({
-        start: function(){
-            $(".quotes, #images, .objectTestIndex, #trigger").css({"z-index": 0});
-            $(this).css({"z-index": 100});
-        }
-    });
-
-    $(".wholeBoxEditable").draggable();
-
-    // $(".personnalText").draggable({
-    //     start: function(){
-    //         $(".personnalText").css({"z-index": 0});
-    //         $(this).css({"z-index": 100});
-    //     }
-    // });
-
-        $(".personnalText").draggable()
-    .click(function() {
-        $(this).draggable( {disabled: false});
-    }).dblclick(function() {
-        $(this).draggable({ disabled: true });
-    });
-
-    function nombre(value){
-        return  Math.floor(Math.random() * value);
-    }
-    
-    $(".object").each(function(){
-        $(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"}); 
-    });
-
-    function positionFloating(id){
-        $(id).css({"top": nombre(70) + "%", "left": nombre(70) + "%"}); 
-    }
-
-    function floating(id){
-        setTimeout(function(){
-            positionFloating(id);
-        }, 100);
-        setInterval(function(){
-            positionFloating(id);
-        }, 10000);
-        
-    }
-
-    $(".objectCamille, .texteGM").each(function(){
-        floating($(this));
-    }); 
-
-
-
-    $("#trigger").each(function(){
-        $(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"}); 
-    });
-    $("#trigger2").each(function(){
-        $(this).css({"top": nombre(80) + "%", "left": nombre(90) + "%"}); 
-    });
-
-    $(".buttonEnter").click(function(){
-        $(".landingPage").fadeOut(600);
-    })
-
-
-    $(".objectCamille, .texteGM").each(function(){
-        $(this).css({"top": nombre(70) + "%", "left": nombre(70) + "%"}); 
-    });
-
-
-
-
-    $("#Episode01").on("click",function(){
-
-        $(".ImgEpisode1").css("display","block")
-    
-    });
-
-    $(".closeButton").on("click",function(){
-
-        $(".ImgEpisode1").css("display","none")
-    
-    });
-
-    $("#Episode02").on("click",function(){
-
-        $(".ImgEpisode2").css("display","block")
-    
-    });
-
-    $(".closeButton").on("click",function(){
-
-        $(".ImgEpisode2").css("display","none")
-    
-    });
-
-    $("#aboutUs").on("click",function(){
-
-        $(".hoverAboutUs").css("display","block")
-    
-    });
-
-    $(".closeButton").on("click",function(){
-
-        $(".hoverAboutUs").css("display","none")
-    
-    });
-
-    $(".map-pointer").click(function(){
-        var id = $(this).attr("id");
-        $(".imgEpisode").hide();
-        $(".Img"+ id).show();
-    })
-
-    // episodes hover Juli
-
-    $("#Episode03").on("click",function(){
-
-        $(".ImgEpisode3").css("display","block")
-    
-    });
-
-    $(".closeButton").on("click",function(){
-
-        $(".ImgEpisode3").css("display","none")
-    
-    });
-
-    $("#Episode04").on("click",function(){
-
-        $(".ImgEpisode4").css("display","block")
-    
-    });
-
-    $(".closeButton").on("click",function(){
-
-        $(".ImgEpisode4").css("display","none")
-    
-    });
-
-    $("#Episode05").on("click",function(){
-
-        $(".ImgEpisode5").css("display","block")
-    
-    });
-
-    $(".closeButton").on("click",function(){
-
-        $(".ImgEpisode5").css("display","none")
-    
-    });
-
-    $("#Episode06").on("click",function(){
-
-        $(".ImgEpisode6").css("display","block")
-    
-    });
-
-    $(".closeButton").on("click",function(){
-
-        $(".ImgEpisode6").css("display","none")
-    
-    });
-
-    $(".LienEpisode7").on("click",function(){
-
-        $(".ImgEpisode7").css("display","block")
-    
-    });
-
-    $(".closeButton").on("click",function(){
-
-        $(".ImgEpisode7").css("display","none")
-    
-    });
-
-    $("#Episode001").on("click",function(){
-
-        $(".ImgEpisode1").css("display","block")
-    
-    });
-
-    $("#Episode002").on("click",function(){
-
-        $(".ImgEpisode2").css("display","block")
-    
-    });
-
-    $("#Episode003").on("click",function(){
-
-        $(".ImgEpisode3").css("display","block")
-    
-    });
-
-    $("#Episode004").on("click",function(){
-
-        $(".ImgEpisode4").css("display","block")
-    
-    });
-
-    $("#Episode005").on("click",function(){
-
-        $(".ImgEpisode5").css("display","block")
-    
-    });
-
-    $("#Episode006").on("click",function(){
-
-        $(".ImgEpisode6").css("display","block")
-    
-    });
 
-});
+	$("#en").css("display","block")
+	$("#it").css("display","none")
+
+	$("#enButton").on("click", function(){
+		$("#en").css("display","block")
+		$("#it").css("display","none")
+	});
+
+	$("#itButton").on("click", function(){
+		$("#en").css("display","none")
+		$("#it").css("display","block")
+	})
+    
+});
+		function openNav() {
+			document.getElementById("mySidepanel").style.width = "250px";
+		}
+		
+		function closeNav() {
+			document.getElementById("mySidepanel").style.width = "0";
+		} 

BIN
pictures/Boosting.jpg


BIN
pictures/amCharts.jpg


BIN
pictures/cropped-logotsz.png


BIN
pictures/erasmus.png


BIN
pictures/fujakka.png


BIN
pictures/intestata.png


BIN
pictures/logotsz.png


BIN
pictures/worldmap.png


+ 89 - 0
public/index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Welcome to Firebase Hosting</title>
+
+    <!-- update the version number as needed -->
+    <script defer src="/__/firebase/9.1.0/firebase-app-compat.js"></script>
+    <!-- include only the Firebase features as you need -->
+    <script defer src="/__/firebase/9.1.0/firebase-auth-compat.js"></script>
+    <script defer src="/__/firebase/9.1.0/firebase-database-compat.js"></script>
+    <script defer src="/__/firebase/9.1.0/firebase-firestore-compat.js"></script>
+    <script defer src="/__/firebase/9.1.0/firebase-functions-compat.js"></script>
+    <script defer src="/__/firebase/9.1.0/firebase-messaging-compat.js"></script>
+    <script defer src="/__/firebase/9.1.0/firebase-storage-compat.js"></script>
+    <script defer src="/__/firebase/9.1.0/firebase-analytics-compat.js"></script>
+    <script defer src="/__/firebase/9.1.0/firebase-remote-config-compat.js"></script>
+    <script defer src="/__/firebase/9.1.0/firebase-performance-compat.js"></script>
+    <!-- 
+      initialize the SDK after all desired features are loaded, set useEmulator to false
+      to avoid connecting the SDK to running emulators.
+    -->
+    <script defer src="/__/firebase/init.js?useEmulator=true"></script>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>Welcome</h2>
+      <h1>Firebase Hosting Setup Complete</h1>
+      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
+      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
+    </div>
+    <p id="load">Firebase SDK Loading&hellip;</p>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        const loadEl = document.querySelector('#load');
+        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+        // // The Firebase SDK is initialized and available here!
+        //
+        // firebase.auth().onAuthStateChanged(user => { });
+        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
+        // firebase.firestore().doc('/foo/bar').get().then(() => { });
+        // firebase.functions().httpsCallable('yourFunction')().then(() => { });
+        // firebase.messaging().requestPermission().then(() => { });
+        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
+        // firebase.analytics(); // call to activate
+        // firebase.analytics().logEvent('tutorial_completed');
+        // firebase.performance(); // call to activate
+        //
+        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
+
+        try {
+          let app = firebase.app();
+          let features = [
+            'auth', 
+            'database', 
+            'firestore',
+            'functions',
+            'messaging', 
+            'storage', 
+            'analytics', 
+            'remoteConfig',
+            'performance',
+          ].filter(feature => typeof app[feature] === 'function');
+          loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
+        } catch (e) {
+          console.error(e);
+          loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
+        }
+      });
+    </script>
+  </body>
+</html>

+ 156 - 1663
styles.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 * {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -17,26 +16,6 @@
   src: url("fonts/HelveticaLTStd-Roman.otf") format("opentype");
 }
 
-@font-face {
-  font-family: 'HelveticaOblique';
-  src: url("fonts/HelveticaLTStd-Obl.otf") format("opentype");
-}
-
-@font-face {
-  font-family: 'HappyTimes';
-  src: url("fonts/happy-times-NG_regular_master.otf") format("opentype");
-}
-
-@font-face {
-  font-family: 'HappyTimesOblique';
-  src: url("fonts/happy-times-NG_italic_master.otf") format("opentype");
-}
-
-@font-face {
-  font-family: 'SelfModern';
-  src: url("fonts/Self Modern Italic.otf") format("opentype");
-}
-
 html {
   height: 100%;
 }
@@ -44,1696 +23,210 @@ html {
 body {
   margin: 0;
   padding: 0;
-  background: black;
-  overflow: hidden;
+  background: darkgreen;
+  /* overflow: hidden; */
 }
 
-.home {
-  margin: 0;
-  padding: 0;
-  background: black;
-  background-image: url(outlinebg.png);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
+.title{
+  font-size: 40px;
+  text-align: center;
+  color:darkgreen;
+  padding-bottom: 24px;
 }
 
-.noScroll {
-  width: 100%;
+.text{
+  position: relative;
+  width: 70%;
   height: 100%;
-  position: absolute;
-  overflow: hidden;
-}
-
-.menu {
-  font-family: Helvetica;
-  font-size: 9pt;
-  font-weight: normal;
-  position: fixed;
-  top: 3px;
-  left: 3px;
-}
-
-.menu .buttonsMenu {
-  background: black;
-  color: white;
-  display: inline-block;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 1vw;
-  border-color: white;
-  padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-  cursor: pointer;
-}
-
-.menu .buttonsMenu:hover {
-  background: #ff3f1d;
-  color: black;
-  border-color: #ff3f1d;
-}
-
-#aboutUs {
-  background: black;
-  color: white;
-  display: inline-block;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 1vw;
-  border-color: white;
-  padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-  cursor: pointer;
-}
-
-#aboutUs:hover {
-  background: #ff3f1d;
-  color: black;
-  border-color: #ff3f1d;
-}
-
-.hoverAboutUs {
-  display: none;
-  position: absolute;
-  top: 2vw;
-  left: 6.5vw;
-}
-
-.hoverAboutUs img {
-  width: 45vw;
-}
-
-.hoverAboutUs .closeButton {
-  position: absolute;
-  margin: 3px;
-  background: black;
-  color: white;
-  display: inline-block;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 1vw;
-  border-color: white;
-  padding: 0.2vw 0.4vw 0.2vw 0.4vw;
-  cursor: pointer;
-  top: 7px;
-  right: 7px;
-  font-family: Helvetica;
-  font-size: 0.8vw;
-}
+  top: 30%;
+  left:50%;
+  transform: translate(-50%,0%);
+  margin-top:9%;
 
-.hoverAboutUs .closeButton:hover {
   background: white;
-  color: black;
-  border-color: white;
-}
 
-.iconsSideMenu {
-  font-family: Helvetica;
-  font-size: 9pt;
-  font-weight: normal;
-  position: fixed;
-  display: block;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  left: 3px;
+  font-size: 24px;
+  text-align: justify;
+  padding: 8%;
+  line-height: 1.25cm;
+  border-radius: 8px;
+  padding-top: 5%;
 }
 
-.iconsSideMenu img {
-  width: 5vw;
-  margin: 5px;
+.language{
   display: block;
 }
 
-.object {
-  position: absolute;
-  width: 10vw;
-  cursor: move;
-  color: white;
-  text-align: center;
-  font-family: SelfModern;
-  font-size: 1.2 vw;
-  font-weight: normal;
-}
-
-.object #Rd {
-  display: none;
-}
-
-.object p {
-  /*opacity: 0;
-        transform: translateY(-50%);
-        transition: transform 500ms ease-in-out, opacity 300ms ease-in-out; */
-  display: none;
-  margin: 0;
-}
-
-.object:hover p {
-  /*opacity: 1;
-        transform: translateY(0);*/
-  display: block;
-}
 
-.object:hover #Rd {
-  display: block;
+.button{
+    color:white;
+    position: center;
 }
+/*# sourceMappingURL=styles.css.map */
 
-.object:hover #BW {
-  display: none;
-}
 
-.object img {
-  width: 100%;
-  display: inline;
+.languageSwitch{
+  position: fixed;
+  right:5%;
+  top:5%;
+  /* font-size: 40px; */
+  text-align: right;
 }
 
-.object a {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 30%;
-  height: 30%;
-  cursor: pointer;
-  display: block;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+#logotsz{
+  position: fixed;
+  left:3%;
+  top:2%;
+  width:9%
 }
 
-.landingPage {
-  position: relative;
-  padding: 9vw 20vw 0 20vw;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  background: black;
-  background-image: url(backgroundLandingpage.gif);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  color: white;
+button {
+  /* font-family: Arial,Helvetica,sans-serif; */
+  width: inherit;
+  font-size: 2.1vw;
+  background: white;
+  color: darkgreen;
+  border-radius: 8px;
+  cursor: pointer;
+ }
+
+ #worldmap{
+  float:right;
+  width:50%;
+  padding: 2%;
+  /* height:; */
+ }
+
+ .video{
+  /* float:right; */
+  width:50%;
+  padding: 5%;
+  /* height:; */
+ }
+
+ #closing{
+   background: white;
+   position: relative;
+  /* font-size: 24px; */
+   bottom: 5%;
+   height: 25%;
+   padding-left: 2%;
+ }
+
+ #erasmus{
+   background: inherit;
+   float: right;
+   width: 30%;
+   margin-right: 2%;
+   margin-top:1%;
+ }
+
+ #riferimenti{
+   background: inherit;
+   /* float: right; */
+   width: 38%;
+ }
+
+ #fujakka{
+   background: inherit;
+   /* float: left; */
+   width: 10.5%;
+ }
+/* Style all font awesome icons */
+.fa {
+  /* padding: 10px; */
+  /* width: 9%;
+  height: 9%; */
+  /* width: 50px; */
+  /* padding: 20px;
+  font-size: 30px;
+  width: 30px;
   text-align: center;
-  font-family: Helvetica;
-  font-size: 1vw;
-  font-weight: normal;
+  text-decoration: none; */ 
+  /* padding: 20px; */
+  border-radius: 8%;
+  /* font-size: 240px; */
+  width: 2vw;
+  height: 2vw;
+  text-decoration: none;
+  text-align: center;
+  margin: 5px 80px;
+  right:1%;
+  border: 1vw;
 }
 
-.landingPage p {
-  padding: 2vw 5vw;
+/* Add a hover effect if you want */
+.fa:hover {
+  opacity: 0.7;
 }
 
-.landingPage h1 {
-  font-family: SelfModern;
-  font-size: 400%;
-  font-weight: normal;
-  margin: 0 0 30w 0;
-  padding: 1vw;
-}
+/* Set a specific color for each brand */
 
-.landingPage .buttonEnter {
-  margin: 5% 0 0 0;
-  background: black;
+/* Facebook */
+.fa-facebook {
+  background: #3B5998;
   color: white;
-  display: inline-block;
   position: fixed;
-  top: 60%;
-  right: 50%;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 3vw;
-  border-color: white;
-  padding: 1.5vw 1vw 1.5vw 1vw;
-  cursor: pointer;
-}
-
-.landingPage .buttonEnter:hover {
-  background: #ff3f1d;
-  color: black;
-  border-color: #ff3f1d;
-}
-
-.object:nth-child(1) {
-  left: 25%;
-  top: 60%;
-}
-
-.object:nth-child(2) {
-  left: 4%;
-  top: 30%;
-}
-
-.object:nth-child(3) {
-  left: 71%;
-  top: 52%;
-}
-
-.object:nth-child(4) {
-  left: 15%;
-  top: 59%;
-}
-
-.object:nth-child(5) {
-  left: 58%;
-  top: 34%;
-}
-
-.netherlands {
-  position: relative;
-  background: black;
-  background-image: url(backgroundnetherlands.jpg);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  color: white;
-  font-family: Helvetica;
-  font-size: 0.8vw;
-  font-weight: normal;
-}
-
-.netherlands p {
-  position: absolute;
-  left: 48vw;
-  width: 20vw;
-  top: 11vw;
 }
 
-.netherlands .buttonEnter {
-  margin: 1% 0 0 0;
-  background: black;
-  color: white;
-  display: inline-block;
-  top: 70%;
-  left: 50%;
+/* Twitter */
+.fa-instagram {
   position: fixed;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 3vw;
-  border-color: white;
-  font-size: 1vw;
-  padding: 0.5vw 0.7vw 0.5vw 0.7vw;
-  cursor: pointer;
-}
-
-.netherlands .buttonEnter:hover {
-  background: #ff3f1d;
+  font-size: 35%;
+  background: #c04eb1;
   color: black;
-  border-color: #ff3f1d;
-}
-
-.producerscountries {
-  position: relative;
-  background: black;
-  background-image: url(backgroundproducercountries.jpg);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  color: white;
-  text-align: center;
-  font-family: Helvetica;
-  font-size: 0.8vw;
-  font-weight: normal;
-}
-
-.producerscountries p {
-  position: absolute;
-  width: 30vw;
-  left: 35vw;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  top: 27vw;
-}
-
-.producerscountries .buttonEnter {
-  margin: 1% 0 0 0;
-  background: black;
-  color: white;
-  display: inline-block;
-  top: 70%;
-  left: 50%;
+} 
+.sidepanel  {
+  width: 0;
   position: fixed;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 3vw;
-  border-color: white;
-  font-size: 1vw;
-  padding: 0.5vw 0.7vw 0.5vw 0.7vw;
-  cursor: pointer;
-}
-
-.producerscountries .buttonEnter:hover {
-  background: #ff3f1d;
-  color: black;
-  border-color: #ff3f1d;
-}
-
-.hpGianmarco {
-  margin: 0;
-  padding: 0;
-  background: black;
-  background-image: url(outlinebg.png);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-}
-
-.hpCamille {
-  margin: 0;
-  padding: 0;
-  background: black;
-  background-image: url(backgroundLandingpageCamille.jpg);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-}
-
-.homepage {
-  margin: 0;
-  padding: 0;
-  background: black;
-  background-image: url(backgroundproducercountries.jpg);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-}
-
-.landingPageJuli {
-  position: absolute;
-  background: black;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  color: white;
-  font-family: Helvetica;
-  font-size: 1vw;
-  font-weight: normal;
-}
-
-.landingPageJuli .texte {
-  position: absolute;
-  text-align: left;
-  width: 30vw;
-  margin: 10vw 20vw;
-}
-
-.landingPageJuli .ImgEpisode1 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-
-.landingPageJuli .ImgEpisode1 img {
-  width: 60vw;
-}
-
-.landingPageJuli .ImgEpisode2 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-
-.landingPageJuli .ImgEpisode2 img {
-  width: 60vw;
-}
-
-.landingPageJuli .ImgEpisode3 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-
-.landingPageJuli .ImgEpisode3 img {
-  width: 60vw;
-}
-
-.landingPageJuli .ImgEpisode4 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-
-.landingPageJuli .ImgEpisode4 img {
-  width: 60vw;
-}
-
-.landingPageJuli .ImgEpisode5 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-
-.landingPageJuli .ImgEpisode5 img {
-  width: 60vw;
-}
-
-.landingPageJuli .ImgEpisode6 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-
-.landingPageJuli .ImgEpisode6 img {
-  width: 60vw;
-}
-
-.landingPageJuli .ImgEpisode7 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-
-.landingPageJuli .ImgEpisode7 img {
-  width: 60vw;
-}
-
-.landingPageJuli .closeButton {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background: #ff3f1d;
-  color: white;
-  display: inline-block;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 1vw;
-  border-color: white;
-  padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-  cursor: pointer;
-}
-
-.landingPageJuli .closeButton:hover {
-  background: white;
-  color: black;
-  border-color: white;
-}
-
-.landingPageJuli .nextButton1 {
-  position: absolute;
-  bottom: 13px;
-  right: 8px;
-  background: #ff3f1d;
-  color: white;
-  display: inline-block;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 1vw;
-  border-color: white;
-  padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-  cursor: pointer;
-}
-
-.landingPageJuli .nextButton1:hover {
-  background: white;
-  color: black;
-  border-color: white;
-}
-
-.landingPageRaph {
-  position: absolute;
-  background: black;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  color: white;
-  font-family: Helvetica;
-  font-size: 1vw;
-  font-weight: normal;
-}
-
-.landingPageRaph .texte {
-  position: absolute;
-  text-align: left;
-  width: 30vw;
-  margin: 10vw 20vw;
-}
-
-.landingPageRaph .ImgEpisode1 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 10%;
-}
-
-.landingPageRaph .ImgEpisode1 img {
-  width: 30vw;
-}
-
-.landingPageRaph .ImgEpisode2 {
-  display: none;
-  position: absolute;
-  top: 45%;
-  left: 25%;
-}
-
-.landingPageRaph .ImgEpisode2 img {
-  width: 30vw;
-}
-
-.landingPageRaph .ImgEpisode3 {
-  display: none;
-  position: absolute;
-  top: 5%;
-  left: 35%;
-}
-
-.landingPageRaph .ImgEpisode3 img {
-  width: 30vw;
-}
-
-.landingPageRaph .ImgEpisode4 {
-  display: none;
-  position: absolute;
-  top: 15%;
-  left: 40%;
-}
-
-.landingPageRaph .ImgEpisode4 img {
-  width: 30vw;
-}
-
-.landingPageRaph .ImgEpisode5 {
-  display: none;
-  position: absolute;
-  top: 5%;
-  left: 33%;
-}
-
-.landingPageRaph .ImgEpisode5 img {
-  width: 30vw;
+  z-index: 1;
+  height: 37vh;
+  top: 0;
+  left: 0;
+  background-color: #111;
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 60px;
 }
 
-.landingPageRaph .ImgEpisode6 {
-  display: none;
-  position: absolute;
-  top: 2vw;
-  right: 2vw;
+.sidepanel a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
 }
 
-.landingPageRaph .ImgEpisode6 img {
-  width: 55vw;
+.sidepanel a:hover {
+  color: #f1f1f1;
 }
 
-.landingPageRaph .ImgEpisode7 {
-  display: none;
+.sidepanel .closebtn {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-
-.landingPageRaph .ImgEpisode7 img {
-  width: 60vw;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
 }
 
-.landingPageRaph .closeButton {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  background: black;
-  color: #ff3f1d;
-  display: inline-block;
-  padding: 0.3vw 0.6vw 0.3vw 0.6vw;
+.openbtn {
   cursor: pointer;
 }
 
-.landingPageRaph .closeButton:hover {
-  color: white;
-}
-
-.landingPageLison {
-  position: absolute;
-  background: black;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  color: white;
-  font-family: Helvetica;
-  font-size: 1vw;
-  font-weight: normal;
-}
-
-.landingPageLison .texte {
-  position: absolute;
-  text-align: left;
-  width: 30vw;
-  margin: 10vw 20vw;
-}
-
-.landingPageLison .ImgEpisode1 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-45%, -50%);
-          transform: translate(-45%, -50%);
-}
-
-.landingPageLison .ImgEpisode1 img {
-  width: 70vw;
-}
+ #boosting{
+   background: inherit;
+   width: 13%;
+   margin-left: 3%;
+ }
 
-.landingPageLison .ImgEpisode2 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-45%, -50%);
-          transform: translate(-45%, -50%);
+ .container {
+  display: flex;
 }
 
-.landingPageLison .ImgEpisode2 img {
-  width: 70vw;
+.description{
+  margin-left: 4%;
 }
 
-.landingPageLison .ImgEpisode3 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-45%, -50%);
-          transform: translate(-45%, -50%);
-}
-
-.landingPageLison .ImgEpisode3 img {
-  width: 70vw;
-}
-
-.landingPageLison .ImgEpisode4 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-45%, -50%);
-          transform: translate(-45%, -50%);
-}
-
-.landingPageLison .ImgEpisode4 img {
-  width: 70vw;
-}
-
-.landingPageLison .ImgEpisode5 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-45%, -50%);
-          transform: translate(-45%, -50%);
-}
-
-.landingPageLison .ImgEpisode5 img {
-  width: 70vw;
-}
-
-.landingPageLison .ImgEpisode6 {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-45%, -50%);
-          transform: translate(-45%, -50%);
-}
-
-.landingPageLison .ImgEpisode6 img {
-  width: 70vw;
-}
-
-.landingPageLison .closeButton {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  background: black;
-  color: #ff3f1d;
-  display: inline-block;
-  padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-  cursor: pointer;
-}
-
-.landingPageLison .closeButton:hover {
-  color: white;
-}
-
-.objectCamille {
-  position: absolute;
-  display: block;
-  color: white;
-  text-align: center;
-  height: 10vw;
-  -webkit-transition: top 10s linear, left 10s linear;
-  transition: top 10s linear, left 10s linear;
-}
-
-.objectCamille:nth-child(1) {
-  height: 11vw;
-}
-
-.objectCamille:nth-child(2) {
-  height: 8vw;
-}
-
-.objectCamille:nth-child(3) {
-  height: 13vw;
-}
-
-.objectCamille:nth-child(4) {
-  height: 7vw;
-}
-
-.objectCamille:nth-child(5) {
-  height: 10vw;
-}
-
-.objectCamille:nth-child(6) {
-  height: 12vw;
-}
-
-.objectCamille img {
-  height: 100%;
-  display: none;
-}
-
-.objectCamille img:first-child {
-  display: block;
-}
-
-.objectCamille .hover {
-  display: block;
-}
-
-.objectCamille:hover img:first-child {
-  display: none;
-}
-
-.objectCamille:hover img:last-child {
-  display: block;
-}
-
-.bodyManifestoPage {
-  margin: 0;
-  padding: 0;
-  background: black;
-  background-image: url(bgthoughts.jpg);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.april {
-  width: 30%;
-  position: absolute;
-  top: 7vw;
-  right: 9vw;
-  overflow: hidden;
-}
-
-.april .texte {
-  font-family: HelveticaOblique;
-}
-
-.definitions {
-  width: 30%;
-  position: absolute;
-  top: 7vw;
-  right: 9vw;
-  overflow: hidden;
-}
-
-.definitions .texte {
-  font-family: Helvetica;
-}
-
-.mots1 {
-  width: 30%;
-  position: absolute;
-  top: 30vw;
-  right: 22vw;
-  overflow: hidden;
-}
-
-.mots1 .texte {
-  font-family: HelveticaOblique;
-}
-
-.mots2 {
-  width: 30%;
-  position: absolute;
-  top: 15vw;
-  left: 9vw;
-  overflow: hidden;
-}
-
-.mots2 .texte {
-  font-family: HelveticaOblique;
-}
-
-.mots3 {
-  width: 60%;
-  position: absolute;
-  top: 3vw;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-}
-
-.mots3 .texte {
-  font-family: HelveticaOblique;
-}
-
-.mots3 .texte .regular {
-  font-family: Helvetica;
-}
-
-.juin {
-  width: 50%;
-  position: absolute;
-  top: 15vw;
-  left: 7vw;
-  overflow: hidden;
-}
-
-.juin .texte {
-  font-family: HelveticaOblique;
-}
-
-.beantobar {
-  width: 25%;
-  position: absolute;
-  top: 18vw;
-  left: 5vw;
-  overflow: hidden;
-}
-
-.tonys {
-  width: 45%;
-  position: absolute;
-  top: 3vw;
-  left: 33vw;
-  overflow: hidden;
-}
-
-.issues {
-  width: 50%;
-  position: absolute;
-  top: 35vw;
-  right: 5vw;
-  overflow: hidden;
-}
-
-.issues a:link {
-  color: white;
-}
-
-.issues a:visited {
-  color: white;
-}
-
-.issues a:active {
-  color: #4505fa;
-}
-
-.thoughtsWindows {
-  font-family: Helvetica;
-  font-size: 11pt;
-  font-weight: normal;
-}
-
-.thoughtsWindows .entête {
-  text-transform: uppercase;
-  font-size: 10pt;
-  background: black;
-  border-width: 1px;
-  border-style: solid;
-  color: white;
-  padding: 3px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.thoughtsWindows .entête .titre {
-  text-align: left;
-  width: 50%;
-}
-
-.thoughtsWindows .entête .date {
-  text-align: right;
-  width: 50%;
-}
-
-.thoughtsWindows .texte {
-  background: white;
-  padding: 20px;
-}
-
-.titlePagesEpisode {
-  position: absolute;
-  width: 50vw;
-  top: 3vw;
-  left: 2vw;
-}
-
-.titlePagesEpisode1 {
-  position: absolute;
-  width: 50vw;
-  top: 26vw;
-  right: 20vw;
-}
-
-.titlePagesEpisode2 {
-  position: absolute;
-  width: 50vw;
-  top: 0vw;
-  left: 2vw;
-}
-
-.titlePagesEpisode3 {
-  position: absolute;
-  width: 40vw;
-  top: 3vw;
-  left: 2vw;
-}
-
-.titlePagesEpisode5 {
-  position: absolute;
-  width: 25vw;
-  top: 0vw;
-  left: 2vw;
-}
-
-.titlePagesEpisode4 {
-  position: absolute;
-  width: 40vw;
-  bottom: 0vw;
-  right: 2vw;
-}
-
-.bodyPageDraggeable {
-  margin: 0;
-  padding: 0;
-  background: black;
-  overflow: auto;
-}
-
-.quotes {
-  width: 40%;
-  position: absolute;
-  font-family: Helvetica;
-  font-size: 11pt;
-  font-weight: normal;
-  cursor: move;
-}
-
-.quotes:hover .entête {
-  opacity: 1;
-}
-
-.quotes .entête {
-  text-transform: uppercase;
-  font-size: 10pt;
-  background: black;
-  border-width: 1px;
-  border-style: solid;
-  color: white;
-  padding: 3px;
-  opacity: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.quotes .entête .titre {
-  text-align: left;
-  font-family: HelveticaOblique;
-  width: 50%;
-}
-
-.quotes .entête .linksource {
-  text-align: right;
-  width: 50%;
-}
-
-.quotes .texte {
-  background: white;
-  padding: 3px;
-}
-
-.quotes mark {
-  background-color: #4505fa;
-  color: white;
-  padding: 1px 6px 1px 6px;
-}
-
-.quotes a:link {
-  color: white;
-}
-
-.quotes a:visited {
-  color: white;
-}
-
-.quotes a:active {
-  color: #4505fa;
-}
-
-.moreResources {
-  font-family: HelveticaOblique;
-  font-size: 11pt;
-  font-weight: normal;
-  position: absolute;
-}
-
-.moreResources .entête {
-  text-transform: uppercase;
-  font-size: 10pt;
-  background: black;
-  border-width: 1px;
-  border-style: solid;
-  border-color: white;
-  color: #4505fa;
-  padding: 3px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.moreResources .entête .titre {
-  text-align: left;
-  width: 50%;
-}
-
-.moreResources .texte {
-  background: white;
-  padding: 3px;
-}
-
-.moreResources a:link {
-  color: #4505fa;
-}
-
-.moreResources a:visited {
-  color: #4505fa;
-}
-
-.moreResources a:active {
-  color: black;
-}
-
-#inapril2018 {
-  top: 5vw;
-  right: 13vw;
-}
-
-#theharkinengel {
-  top: 7vw;
-  left: 10vw;
-}
-
-#theprotocollaidout {
-  top: 20vw;
-  left: 2vw;
-}
-
-#in2009 {
-  top: 15vw;
-  right: 4vw;
-}
-
-.personnalText {
-  position: absolute;
-  font-family: HelveticaOblique;
-  font-size: 11pt;
-  font-weight: normal;
-  color: white;
-  cursor: move;
-  padding: 2px;
-  left: 20vw;
-  top: 33vw;
-}
-
-.personnalText:hover {
-  border-width: 1px;
-  border-style: dashed;
-  border-color: white;
-  border-radius: 0.5vw;
-}
-
-.personnalText:hover .personnal-hover {
-  display: block;
-}
-
-.personnalText .personnal-hover {
-  position: absolute;
-  top: -2vw;
-  left: 50%;
-  padding: .5vw;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  text-align: center;
-  display: none;
-  background-color: white;
-  color: black;
-  font-size: 8pt;
-  line-height: .2;
-}
-
-.personnalText .personnalTextHarkinEngel {
-  -webkit-column-count: 3;
-          column-count: 3;
-  -webkit-column-gap: 20px;
-          column-gap: 20px;
-  width: 60vw;
-}
-
-.personnalText .personnalTextLivingIncome {
-  -webkit-column-count: 1;
-          column-count: 1;
-  -webkit-column-gap: 20px;
-          column-gap: 20px;
-  width: 40vw;
-}
-
-.personnalTextLivingIncome {
-  -webkit-column-count: 1;
-          column-count: 1;
-  -webkit-column-gap: 20px;
-          column-gap: 20px;
-  width: 40vw;
-}
-
-.personnalTextLivingIncome2 {
-  -webkit-column-count: 1;
-          column-count: 1;
-  -webkit-column-gap: 20px;
-          column-gap: 20px;
-  width: 40vw;
-}
-
-.personnalTextLivingIncome3 {
-  -webkit-column-count: 1;
-          column-count: 1;
-  -webkit-column-gap: 20px;
-          column-gap: 20px;
-  width: 40vw;
-}
-
-.wholeBoxEditable {
-  position: fixed;
-  display: block;
-  width: 15vw;
-  top: 36vw;
-  right: 9px;
-}
-
-.wholeBoxEditable .zoneDragBoxEditable {
-  height: 15px;
-  width: 100%;
-  cursor: move;
-}
-
-.wholeBoxEditable .boxEditable {
-  border-width: 1px;
-  border-style: dashed;
-  border-color: white;
-  border-radius: 0.5vw;
-  position: absolute;
-  font-family: Helvetica;
-  font-size: 11pt;
-  font-weight: normal;
-  color: #4505fa;
-  background: black;
-  margin: 2px;
-  width: 100%;
-}
-
-.instructions {
-  display: block;
-  width: 15vw;
-  bottom: 8px;
-  right: 5px;
-  font-family: Helvetica;
-  font-size: 9pt;
-  font-weight: normal;
-  position: fixed;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #4505fa;
-  background: black;
-  margin: 2px;
-  color: white;
-  padding: 5px;
-}
-
-.instructions .buttonGoogleDoc {
-  display: inline-table;
-  background: #4505fa;
-  color: white;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 1vw;
-  border-color: #4505fa;
-  padding: 0.2vw 0.5vw 0.2vw 0.5vw;
-  margin: 10px 40% 2px 40%;
-  cursor: pointer;
-  color: white;
-}
-
-.instructions .buttonGoogleDoc:hover {
-  background: white;
-  color: #4505fa;
-  border-color: white;
-}
-
-.bodyTestIndex {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-}
-
-#bg {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -20;
-  background: white;
-  font-family: Helvetica;
-  font-size: 11pt;
-  font-weight: normal;
-  text-align: center;
-  background-image: url(BGoutlineNoir.png);
-  background-position-y: 50px;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-#bg .title {
-  font-size: 40px;
-  margin: 5vw 10vw 0 10vw;
-}
-
-#bg .texte {
-  margin: 1vw 20vw 0 20vw;
-}
-
-#bg .title2 {
-  display: none;
-}
-
-#bg .texte2 {
-  display: none;
-}
-
-#bg .title3 {
-  display: none;
-}
-
-#bg .texte3 {
-  display: none;
-}
-
-#trigger {
-  position: absolute;
-  z-index: 3;
-  width: 10vw;
-  cursor: move;
-}
-
-#trigger img {
-  width: 100%;
-}
-
-#trigger a {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 30%;
-  height: 30%;
-  cursor: pointer;
-  display: block;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-
-#trigger2 {
-  position: absolute;
-  z-index: 4;
-  width: 10vw;
-  cursor: move;
-}
-
-#trigger2 img {
-  width: 100%;
-}
-
-#trigger2 a {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 30%;
-  height: 30%;
-  cursor: pointer;
-  display: block;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-
-#trigger:hover ~ #bg {
-  background: black;
-  background-image: url(BGoutlineBlc.png);
-  background-position-y: 50px;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-#trigger:hover ~ #bg .title {
-  display: none;
-}
-
-#trigger:hover ~ #bg .texte {
-  display: none;
-}
-
-#trigger:hover ~ #bg .title2 {
-  display: block;
-  font-size: 40px;
-  margin: 5vw 10vw 0 10vw;
-  color: white;
-}
-
-#trigger:hover ~ #bg .texte2 {
-  display: block;
-  margin: 1vw 20vw 0 20vw;
-  color: white;
-}
-
-#trigger:hover ~ #bg .title3 {
-  display: none;
-}
-
-#trigger:hover ~ #bg .texte3 {
-  display: none;
-}
-
-#trigger2:hover ~ #bg {
-  background: #ff58ab;
-  background-image: url(BGoutlineBlc.png);
-  background-position-y: 50px;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-#trigger2:hover ~ #bg .title3 {
-  display: block;
-  font-size: 40px;
-  margin: 5vw 10vw 0 10vw;
-  color: white;
-}
-
-#trigger2:hover ~ #bg .texte3 {
-  display: block;
-  margin: 1vw 20vw 0 20vw;
-  color: white;
-}
-
-#trigger2:hover ~ #bg .title {
-  display: none;
-}
-
-#trigger2:hover ~ #bg .texte {
-  display: none;
-}
-
-#trigger2:hover ~ #bg .title2 {
-  display: none;
-}
-
-#trigger2:hover ~ #bg .texte2 {
-  display: none;
-}
-
-.GM {
-  position: absolute;
-  background-image: url("backgroundLandingpageGianmarco.jpg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  color: white;
-  font-family: Helvetica;
-  font-size: 1vw;
-  font-weight: normal;
-}
-
-.texteGM {
-  position: absolute;
-  font-family: Helvetica;
-  font-size: 25pt;
-  font-weight: normal;
-  color: white;
-  width: 40%;
-  -webkit-transition: top 10s linear, left 10s linear;
-  transition: top 10s linear, left 10s linear;
-}
-
-.texteGM img {
-  width: 30%;
-  display: inline-block;
-}
-
-.map-container {
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-}
-
-.map-container img {
-  height: 100%;
-}
-
-.map-container .map-pointer {
-  position: absolute;
-  width: 5vh;
-  height: 5vh;
-  background-color: green;
-  opacity: 0;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-  cursor: pointer;
-}
-
-.map-container .map-pointerLison {
-  position: absolute;
-  width: 20vh;
-  height: 30vh;
-  background-color: green;
-  opacity: 0;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-  cursor: pointer;
-}
-
-.map-container .map-pointerRaph {
-  position: absolute;
-  width: 5vh;
-  height: 5vh;
-  background-color: green;
-  opacity: 0;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-  cursor: pointer;
-}
-
-.map-container #Episode1 {
-  left: 70%;
-  top: 9%;
-}
-
-.map-container #Episode2 {
-  left: 70%;
-  top: 23%;
-}
-
-.map-container #Episode3 {
-  left: 57.5%;
-  top: 37%;
-}
-
-.map-container #Episode4 {
-  left: 44%;
-  top: 67%;
-}
-
-.map-container #Episode5 {
-  left: 66%;
-  top: 81%;
-}
-
-.map-container #Episode6 {
-  left: 63.5%;
-  top: 77%;
-}
-
-.map-container #Episode7 {
-  left: 64%;
-  top: 71.5%;
-}
-
-.map-container #Episode01 {
-  left: 19%;
-  top: 56%;
-}
-
-.map-container #Episode02 {
-  left: 34%;
-  top: 57%;
-}
-
-.map-container #Episode03 {
-  left: 47%;
-  top: 57%;
-}
-
-.map-container #Episode04 {
-  left: 61%;
-  top: 57%;
-}
-
-.map-container #Episode05 {
-  left: 75%;
-  top: 57%;
-}
-
-.map-container #Episode06 {
-  left: 89%;
-  top: 57%;
-}
-
-.map-container #Episode001 {
-  left: 15%;
-  top: 44%;
-}
-
-.map-container #Episode002 {
-  left: 24%;
-  top: 63%;
-}
-
-.map-container #Episode003 {
-  left: 48%;
-  top: 60%;
-}
-
-.map-container #Episode004 {
-  left: 56%;
-  top: 69%;
-}
-
-.map-container #Episode005 {
-  left: 64%;
-  top: 49%;
-}
-
-.map-container #Episode006 {
-  left: 74%;
-  top: 58%;
-}
-
-.li-1 {
-  top: 3vw;
-  left: 2vw;
-}
-
-.li-2 {
-  top: 5vw;
-  left: 50vw;
-}
-
-.li-3 {
-  left: 44vw;
-  top: 21vw;
-}
-
-.li-4 {
-  left: 2vw;
-  top: 28vw;
-}
-
-.li-5 {
-  left: 15vw;
-  top: 38vw;
-}
-
-.li-6 {
-  left: 7vw;
-  top: 55vw;
-}
-
-.li-7 {
-  left: 54vw;
-  top: 57vw;
-}
-
-.li-9 {
-  left: 7vw;
-  top: 15vw;
-}
-
-.li-10 {
-  left: 57vw;
-  top: 43vw;
-}
-/*# sourceMappingURL=styles.css.map */
+.videos{
+  margin-top: 1%;
+}

File diff suppressed because it is too large
+ 0 - 0
styles.css.map


+ 5 - 1778
styles.scss

@@ -13,39 +13,11 @@
 }
 
 @font-face {
-    font-family: 'Helvetica';
-    src:    url('fonts/HelveticaLTStd-Roman.otf') format('opentype');
+    font-family: 'URWBookman';
+    src:    url('fonts/URWBookman-Light.otf') format('opentype');
 }
 
-@font-face {
-    font-family: 'HelveticaOblique';
-    src:    url('fonts/HelveticaLTStd-Obl.otf') format('opentype');
-}
-
-@font-face {
-    font-family: 'HappyTimes';
-    src:    url('fonts/happy-times-NG_regular_master.otf') format('opentype');
-}
-
-@font-face {
-    font-family: 'HappyTimesOblique';
-    src:    url('fonts/happy-times-NG_italic_master.otf') format('opentype');
-}
-
-@font-face {
-    font-family: 'SelfModern';
-    src:    url('fonts/Self Modern Italic.otf') format('opentype');
-}
-
-
 
-// @font-face {
-//     font-family: 'Migra';
-//     src:    url('fonts/MigraItalic-ExtralightItalic.otf') format('opentype');
-// }
-
-$cuteviolet: rgb(69, 5, 250);
-$red: rgb(255, 63, 29);
 
 html{
     height: 100%;
@@ -58,1761 +30,16 @@ body{
     overflow: hidden;
 }
 
-
-// home page
-.home{
-    margin: 0;
-    padding: 0;
-    background: black;
-    background-image: url(outlinebg.png);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-}
-
-.noScroll{
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    overflow: hidden;
-}
-
-.menu {
-    font-family: Helvetica;
-    font-size: 9pt;
-    font-weight: normal;
-    position: fixed;
-    top: 3px;
-    left: 3px;
-
-    .buttonsMenu{
-        background: rgb(0, 0, 0);
-        color: rgb(255, 255, 255);
-        display: inline-block;
-        border-width: 1px;
-        border-style: solid;
-        border-radius: 1vw;
-        border-color: white;
-        padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-        cursor: pointer;
-
-        &:hover {
-            background: $red;
-            color: rgb(0, 0, 0);
-            border-color: $red;
-        }
-    }
-    
-}
-
-#aboutUs{background: rgb(0, 0, 0);
-    color: rgb(255, 255, 255);
-    display: inline-block;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 1vw;
-    border-color: white;
-    padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-    cursor: pointer;
-
-    &:hover {
-        background: $red;
-        color: rgb(0, 0, 0);
-        border-color: $red;
-    }
-}
-
-.hoverAboutUs{
-    display: none;
-    position: absolute;
-    top: 2vw;
-    left: 6.5vw;
-
-    img{
-        width: 45vw;
-    }
-
-    .closeButton {
-        position: absolute;
-        margin: 3px;
-        background: rgb(0, 0, 0);
-        color: rgb(255, 255, 255);
-        display: inline-block;
-        border-width: 1px;
-        border-style: solid;
-        border-radius: 1vw;
-        border-color: white;
-        padding: 0.2vw 0.4vw 0.2vw 0.4vw;
-        cursor: pointer;
-        top: 7px;
-        right: 7px;
-        font-family: Helvetica;
-        font-size: 0.8vw;
-
-        &:hover {
-            background: white;
-            color: rgb(0, 0, 0);
-            border-color: white;
-        }
-
-    }
-}
-
-
-
-
-
-.iconsSideMenu{
-    font-family: Helvetica;
-    font-size: 9pt;
-    font-weight: normal;
-    position: fixed;
-    display: block;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 3px;
-
-    img{
-        width: 5vw;
-        margin: 5px;
-        display: block;
-    }
-
-}
-
-.object {
-    position: absolute;
-    width: 10vw;
-    cursor: move;
-    color: white;
-    text-align: center;
-    font-family: SelfModern;
-    font-size: 1.2 vw;
-    font-weight: normal;
-
-    #Rd {
-        display: none;
-    }
-
-    p {
-        /*opacity: 0;
-        transform: translateY(-50%);
-        transition: transform 500ms ease-in-out, opacity 300ms ease-in-out; */
-        display: none;
-        margin: 0;
-    }
-
-    &:hover p {
-        /*opacity: 1;
-        transform: translateY(0);*/
-        display: block;
-    }
-
-    &:hover #Rd {
-        display: block;
-    }
-
-    &:hover #BW {
-        display: none;
-    }
-
-    img {
-       width: 100%;
-       display: inline;
-       }
-
-    a {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 30%;
-        height: 30%;
-        cursor: pointer;
-        display: block;
-        transform: translate(-50%, -50%);
-    }
-
-}
-
-// landing pages
-.landingPage {
-    position: relative;
-    padding: 9vw 20vw 0 20vw;
-    top: 50%;
-    transform: translateY(-50%);
-    background: rgb(0, 0, 0);
-    background-image: url(backgroundLandingpage.gif);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    color: white;
-    text-align: center;
-    font-family: Helvetica;
-    font-size: 1vw;
-    font-weight: normal;
-
-    p {
-        padding: 2vw 5vw;
-    }
-    
-
-    h1 {
-        font-family: SelfModern;
-        font-size: 400%;
-        font-weight: normal;
-        margin: 0 0 30w 0;
-        padding: 1vw;
-        
-    }
-
-    .buttonEnter {
-        // text-transform: uppercase;
-        margin: 5% 0 0 0;
-        background: rgb(0, 0, 0);
-        color: rgb(255, 255, 255);
-        display: inline-block;
-        position: fixed;
-        top: 60%;
-        right: 50%;
-        border-width: 1px;
-        border-style: solid;
-        border-radius:3vw;
-        border-color: white;
-        padding: 1.5vw 1vw 1.5vw 1vw;
-        cursor: pointer;
-
-        &:hover {
-            background: $red;
-            color: rgb(0, 0, 0);
-            border-color: $red;
-        }
-    }
-}
-
-@for $i from 1 through 5 {
-    .object:nth-child(#{$i}){
-        left: random(90) + % ;
-        top: random(90) + % ;
-    }
-
-}
-
-.netherlands{
-        position: relative;
-        // padding: 10vw 30vw 0 30vw;
-        // top: 50%;
-        // transform: translateY(-50%);
-        background: rgb(0, 0, 0);
-        background-image: url(backgroundnetherlands.jpg);
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        color: white;
-        // text-align: center;
-        font-family: Helvetica;
-        font-size: 0.8vw;
-        font-weight: normal;
-
-        p {
-            position: absolute;
-            left: 48vw;
-            width: 20vw;
-            top: 11vw;
-            // padding: 10vw 30vw 0 30vw;
-        }
-
-        .buttonEnter {
-            // text-transform: uppercase;
-            margin: 1% 0 0 0;
-            background: rgb(0, 0, 0);
-            color: rgb(255, 255, 255);
-            display: inline-block;
-            top: 70%;
-            left: 50%;
-            position: fixed;
-            transform: translateY(-50%);
-            transform: translateX(-50%);
-            border-width: 1px;
-            border-style: solid;
-            border-radius: 3vw;
-            border-color: white;
-            font-size: 1vw;
-            padding: 0.5vw 0.7vw 0.5vw 0.7vw;
-            cursor: pointer;
-    
-            &:hover {
-                background: $red;
-                color: rgb(0, 0, 0);
-                border-color: $red;
-            }
-        }
+.button{
+    color:white;
 }
 
-.producerscountries{
-    position: relative;
-    // padding: 10vw 30vw 0 30vw;
-    // top: 50%;
-    // transform: translateY(-50%);
-    background: rgb(0, 0, 0);
-    background-image: url(backgroundproducercountries.jpg);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    color: white;
-    text-align: center;
-    font-family: Helvetica;
-    font-size: 0.8vw;
-    font-weight: normal;
-
-    p {
-        position: absolute;
-        width: 30vw;
-        left: 35vw;
-        transform: translateY(-50%);
-        top: 27vw;
-        // padding: 10vw 30vw 0 30vw;
-    }
-
-    .buttonEnter {
-        // text-transform: uppercase;
-        margin: 1% 0 0 0;
-        background: rgb(0, 0, 0);
-        color: rgb(255, 255, 255);
-        display: inline-block;
-        top: 70%;
-        left: 50%;
-        position: fixed;
-        transform: translateY(-50%);
-        transform: translateX(-50%);
-        border-width: 1px;
-        border-style: solid;
-        border-radius: 3vw;
-        border-color: white;
-        font-size: 1vw;
-        padding: 0.5vw 0.7vw 0.5vw 0.7vw;
-        cursor: pointer;
-
-        &:hover {
-            background: $red;
-            color: rgb(0, 0, 0);
-            border-color: $red;
-        }
-    }
-}
-
-.hpGianmarco{
-    margin: 0;
-    padding: 0;
-    background: black;
-    background-image: url(outlinebg.png);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-}
-
-.hpCamille{
-    margin: 0;
-    padding: 0;
-    background: black;
-    background-image: url(backgroundLandingpageCamille.jpg);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-}
-
-.homepage{
-    margin: 0;
-    padding: 0;
-    background: black;
-    background-image: url(backgroundproducercountries.jpg);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-}
-
-.landingPageJuli {
-    position: absolute;
-    // top: 50%;
-    // transform: translateY(-50%);
-    // background: rgb(0, 0, 0);
-    background:rgb(0, 0, 0);
-    // background-position: center;
-    // background-repeat: no-repeat;
-    // background-size: cover;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    color: white;
-    font-family: Helvetica;
-    font-size: 1vw;
-    font-weight: normal;
-    
-
-    .texte {
-        position: absolute;
-        text-align: left;
-        width: 30vw;
-        margin: 10vw 20vw;
-    }
-
-    // .LienEpisode1 {
-    //     position: absolute;
-    //     width: 50px;
-    //     height: 50px;
-    //     cursor: pointer;
-    //     top: 20vw;
-    //     right: 30vw;
-
-    //     img {
-    //         width: 100%;
-    //     }
-    // }
-
-    .ImgEpisode1 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        img{
-            width: 60vw;
-        }
-
-    }
-
-    .ImgEpisode2 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        img{
-            width: 60vw;
-        }
-
-    }
-
-    .ImgEpisode3 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        img{
-            width: 60vw;
-        }
-
-    }
-
-    .ImgEpisode4 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        img{
-            width: 60vw;
-        }
-
-    }
-
-    .ImgEpisode5 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        img{
-            width: 60vw;
-        }
-
-    }
-
-    .ImgEpisode6 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        img{
-            width: 60vw;
-        }
-
-    }
-
-    .ImgEpisode7 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        img{
-            width: 60vw;
-        }
-
-    }
-
-    .closeButton {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        // margin: 3px;
-        background: $red;
-        color: rgb(255, 255, 255);
-        display: inline-block;
-        border-width: 1px;
-        border-style: solid;
-        border-radius: 1vw;
-        border-color: white;
-        padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-        cursor: pointer;
-
-        &:hover {
-            background: white;
-            color: rgb(0, 0, 0);
-            border-color: white;
-        }
-    }
-
-    .nextButton1 {
-        position: absolute;
-        bottom: 13px;
-        right: 8px;
-        // margin: 3px;
-        background: $red;
-        color: rgb(255, 255, 255);
-        display: inline-block;
-        border-width: 1px;
-        border-style: solid;
-        border-radius: 1vw;
-        border-color: white;
-        padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-        cursor: pointer;
-
-        &:hover {
-            background: white;
-            color: rgb(0, 0, 0);
-            border-color: white;
-        }
-    }
-
-    // .LienEpisode2 {
-    //     position: absolute;
-    //     top: 30vw;
-    //     left: 20vw;
-    //     width: 50px;
-    //     height: 50px;
-    //     cursor: pointer;
-
-    //     img {
-    //         width: 100%;
-    //     }
-    // }
-
-}
-
-.landingPageRaph {
-    position: absolute;
-    // top: 50%;
-    // transform: translateY(-50%);
-    // background: rgb(0, 0, 0);
-    background:rgb(0, 0, 0);
-    // background-position: center;
-    // background-repeat: no-repeat;
-    // background-size: cover;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    color: white;
-    font-family: Helvetica;
-    font-size: 1vw;
-    font-weight: normal;
-    
-
-    .texte {
-        position: absolute;
-        text-align: left;
-        width: 30vw;
-        margin: 10vw 20vw;
-    }
-
-    .ImgEpisode1 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 10%;
-
-        img{
-            width: 30vw;
-        }
-
-    }
-
-    .ImgEpisode2 {
-        display: none;
-        position: absolute;
-        top: 45%;
-        left: 25%;
-
-        img{
-            width: 30vw;
-        }
-
-    }
-
-    .ImgEpisode3 {
-        display: none;
-        position: absolute;
-        top: 5%;
-        left: 35%;
-
-        img{
-            width: 30vw;
-        }
-
-    }
-
-    .ImgEpisode4 {
-        display: none;
-        position: absolute;
-        top: 15%;
-        left: 40%;
-
-        img{
-            width: 30vw;
-        }
-
-    }
-
-    .ImgEpisode5 {
-        display: none;
-        position: absolute;
-        top: 5%;
-        left: 33%;
-
-        img{
-            width: 30vw;
-        }
-
-    }
-
-    .ImgEpisode6 {
-        display: none;
-        position: absolute;
-        top: 2vw;
-        right: 2vw;
-
-        img{
-            width: 55vw;
-        }
-
-    }
-
-    .ImgEpisode7 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        img{
-            width: 60vw;
-        }
-
-    }
-
-    .closeButton {
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        // margin: 3px;
-        background: rgb(0, 0, 0);
-        color: $red;
-        display: inline-block;
-        // border-width: 1px;
-        // border-style: solid;
-        // border-radius: 1vw;
-        // border-color: white;
-        padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-        cursor: pointer;
-
-        &:hover {
-            // background: white;
-            color: rgb(255, 255, 255);
-            // border-color: white;
-        }
-    }
-
-}
-
-.landingPageLison {
-    position: absolute;
-    // top: 50%;
-    // transform: translateY(-50%);
-    // background: rgb(0, 0, 0);
-    background:rgb(0, 0, 0);
-    // background-position: center;
-    // background-repeat: no-repeat;
-    // background-size: cover;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    color: white;
-    font-family: Helvetica;
-    font-size: 1vw;
-    font-weight: normal;
-    
-
-    .texte {
-        position: absolute;
-        text-align: left;
-        width: 30vw;
-        margin: 10vw 20vw;
-    }
-
-    .ImgEpisode1 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-45%, -50%);
-
-        img{
-            width: 70vw;
-        }
-
-    }
-
-    .ImgEpisode2 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-45%, -50%);
-
-        img{
-            width: 70vw;
-        }
-
-    }
-
-    .ImgEpisode3 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-45%, -50%);
-
-        img{
-            width: 70vw;
-        }
-
-    }
-
-    .ImgEpisode4 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-45%, -50%);
-
-        img{
-            width: 70vw;
-        }
-
-    }
-
-    .ImgEpisode5 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-45%, -50%);
-
-        img{
-            width: 70vw;
-        }
-
-    }
-
-    .ImgEpisode6 {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-45%, -50%);
-
-        img{
-            width: 70vw;
-        }
-
-    }
-
-    .closeButton {
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        // margin: 3px;
-        background: rgb(0, 0, 0);
-        color: $red;
-        display: inline-block;
-        // border-width: 1px;
-        // border-style: solid;
-        // border-radius: 1vw;
-        // border-color: white;
-        padding: 0.3vw 0.6vw 0.3vw 0.6vw;
-        cursor: pointer;
-
-        &:hover {
-            // background: white;
-            color: rgb(255, 255, 255);
-            // border-color: white;
-        }
-    }
-
-
-}
-
-.objectCamille {
-    position: absolute;
-    display: block;
-    color: white;
-    text-align: center;
-    height: 10vw;
-
-    transition: top 10s linear, left 10s linear;
-
-    &:nth-child(1){
-        height: 11vw;
-    }
-    &:nth-child(2){
-        height: 8vw;
-    }
-    &:nth-child(3){
-        height: 13vw;
-    }
-    &:nth-child(4){
-        height: 7vw;
-    }
-    &:nth-child(5){
-        height: 10vw;
-    }
-    &:nth-child(6){
-        height: 12vw;
-    }
-
-    img{            
-        height: 100%;
-        display: none;
-    }
-    img:first-child{
-        display: block;
-    }
-    .hover {
-       display: block;
-    }
-    &:hover img:first-child{
-        display: none;
-    }
-    &:hover img:last-child{
-        display: block;
-    }
-}
-
-
-// pages thoughts
-
-.bodyManifestoPage{
-    margin: 0;
-    padding: 0;
-    background: black;
-    background-image: url(bgthoughts.jpg);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
-
-.april{
-    width: 30%;
-    position: absolute;
-    top: 7vw;
-    right: 9vw;
-    overflow: hidden;
-
-    .texte{
-        font-family: HelveticaOblique;
-    }
-}
-
-.definitions{
-    width: 30%;
-    position: absolute;
-    top: 7vw;
-    right: 9vw;
-    overflow: hidden;
-
-    .texte{
-        font-family: Helvetica;
-    }
-}
-
-.mots1{
-    width: 30%;
-    position: absolute;
-    top: 30vw;
-    right: 22vw;
-    overflow: hidden;
-
-    .texte{
-        font-family: HelveticaOblique;
-    }
-}
-
-.mots2{
-    width: 30%;
-    position: absolute;
-    top: 15vw;
-    left: 9vw;
-    overflow: hidden;
-
-    .texte{
-        font-family: HelveticaOblique;
-    }
-}
-
-.mots3{
-    width: 60%;
-    position: absolute;
-    top: 3vw;
-    // overflow: hidden;
-    left: 50%;
-    transform: translateX(-50%);
-
-    .texte{
-        font-family: HelveticaOblique;
-
-        .regular{
-            font-family: Helvetica;
-        }
-    }
-}
-
-.juin{
-    width: 50%;
-    position: absolute;
-    top: 15vw;
-    left: 7vw;
-    overflow: hidden;
-
-    .texte{
-        font-family: HelveticaOblique;
-    }
-}
-
-.beantobar{
-    width: 25%;
-    position: absolute;
-    top: 18vw;
-    left: 5vw;
-    overflow: hidden;
-}
-
-.tonys{
-    width: 45%;
-    position: absolute;
-    top: 3vw;
-    left: 33vw;
-    overflow: hidden;
-}
-
-.issues{
-    width: 50%;
-    position: absolute;
-    top: 35vw;
-    right: 5vw;
-    overflow: hidden;
-
-    a:link{
-        color: white;
-    }
-    a:visited{
-        color: white;
-    }
-    a:active{
-        color: $cuteviolet;
-    }
-}
-
-.thoughtsWindows{
-    font-family: Helvetica;
-    font-size: 11pt;
-    font-weight: normal;
-    // cursor: move;
-
-    .entête{
-        text-transform: uppercase;
-        font-size: 10pt;
-        background: black;
-        border-width: 1px;
-        border-style: solid;
-        color: white;
-        padding: 3px;
-        display: flex;
-
-        .titre{
-            text-align: left;
-            width: 50%;
-        }
-        .date{
-            text-align: right;
-            width: 50%;
-        }
-    }
-
-    .texte{
-        background: white;
-        padding: 20px;
-    }
-
-}
-
-.titlePagesEpisode{
-    position: absolute;
-    width: 50vw;
-    top: 3vw;
-    left: 2vw;
-}
-
-.titlePagesEpisode1{
-    position: absolute;
-    width: 50vw;
-    top: 26vw;
-    right: 20vw;
-}
-
-.titlePagesEpisode2{
-    position: absolute;
-    width: 50vw;
-    top: 0vw;
-    left: 2vw;
-}
-
-.titlePagesEpisode3{
-    position: absolute;
-    width: 40vw;
-    top: 3vw;
-    left: 2vw;
-}
-
-.titlePagesEpisode5{
-    position: absolute;
-    width: 25vw;
-    top: 0vw;
-    left: 2vw;
-}
-
-.titlePagesEpisode4{
-    position: absolute;
-    width: 40vw;
-    bottom: 0vw;
-    right: 2vw;
-}
-
-
-
-// pages draggeable
-
-.bodyPageDraggeable{
-    margin: 0;
-    padding: 0;
-    background: black;
-    overflow: auto;
-}
-
-
-.quotes{
-    width: 40%;
-    position: absolute;
-    font-family: Helvetica;
-    font-size: 11pt;
-    font-weight: normal;
-    cursor: move;
-
-    &:hover .entête{
-        opacity: 1;
-    }
-
-    .entête{
-        text-transform: uppercase;
-        font-size: 10pt;
-        background: black;
-        border-width: 1px;
-        border-style: solid;
-        color: white;
-        padding: 3px;
-        opacity: 0;
-        display: flex;
-
-        .titre{
-            text-align: left;
-            font-family: HelveticaOblique;
-            width: 50%;
-        }
-        .linksource{
-            text-align: right;
-            width: 50%;
-        }
-    }
-
-    .texte{
-        background: white;
-        padding: 3px;
-    }
-
-    mark{
-        background-color: $cuteviolet;
-        color: white;
-        padding: 1px 6px 1px 6px;
-    }
-
-    a:link{
-        color: white;
-    }
-    a:visited{
-        color: white;
-    }
-    a:active{
-        color: $cuteviolet;
-    }
-}
-
-.moreResources{
-    font-family: HelveticaOblique;
-    font-size: 11pt;
-    font-weight: normal;
-    position: absolute;
-    // cursor: move;
-
-    .entête{
-        text-transform: uppercase;
-        font-size: 10pt;
-        background: black;
-        border-width: 1px;
-        border-style: solid;
-        border-color: white;
-        color: $cuteviolet;
-        padding: 3px;
-        display: flex;
-
-        .titre{
-            text-align: left;
-            width: 50%;
-        }
-    }
-
-    .texte{
-        background: white;
-        padding: 3px;
-    }
-
-    a:link{
-        color: $cuteviolet;
-    }
-    a:visited{
-        color: $cuteviolet;
-    }
-    a:active{
-        color: black;
-    }
-
-}
-
-#inapril2018{
-    top: 5vw;
-    right: 13vw;
-}
-
-#theharkinengel{
-    top: 7vw;
-    left: 10vw;
-}
-
-#theprotocollaidout{
-    top: 20vw;
-    left: 2vw;
-}
-
-#in2009{
-    top: 15vw;
-    right: 4vw;
-}
-
-
-.personnalText{
-    position: absolute;
-    font-family: HelveticaOblique;
-    font-size: 11pt;
-    font-weight: normal;
-    color: white;
-    cursor: move;
-    padding: 2px;
-    left: 20vw;
-    top: 33vw;
-
-    &:hover{
-        border-width: 1px;
-        border-style: dashed;
-        border-color: white;
-        border-radius: 0.5vw;
-
-        .personnal-hover {
-            display: block;
-        }
-    }
-
-    .personnal-hover {
-        position: absolute;
-        top: -2vw;
-        left: 50%;
-        padding: .5vw;
-        transform: translateX(-50%);
-        text-align: center;
-        display: none;
-        background-color: white;
-        color: black;
-        font-size: 8pt;
-        line-height: .2;
-    }
-
-
-    .personnalTextHarkinEngel{
-        column-count: 3;
-        column-gap: 20px;
-        width: 60vw;
-    }
-
-    .personnalTextLivingIncome{
-        column-count: 1;
-        column-gap: 20px;
-        width: 40vw;
-    }
-}
-
-.personnalTextLivingIncome{
-    column-count: 1;
-    column-gap: 20px;
-    width: 40vw;
-}
-.personnalTextLivingIncome2{
-    column-count: 1;
-    column-gap: 20px;
-    width: 40vw;
-}
-.personnalTextLivingIncome3{
-    column-count: 1;
-    column-gap: 20px;
-    width: 40vw;
-}
-
-.wholeBoxEditable{
-    position: fixed;
-    display: block;
-    width: 15vw;
-    top: 36vw;
-    right: 9px;
-
-    .zoneDragBoxEditable{
-        height: 15px;
-        width: 100%;
-        cursor: move;
-    }
-
-    .boxEditable{
-    border-width: 1px;
-    border-style: dashed;
-    border-color: white;
-    border-radius: 0.5vw;
-    position: absolute;
-    font-family: Helvetica;
-    font-size: 11pt;
-    font-weight: normal;
-    color: $cuteviolet;
-    background: black;
-    margin: 2px;
-    width: 100%;
-    }
-}
-
-.instructions{
-    display: block;
-    width: 15vw;
-    bottom: 8px;
-    right: 5px;
-    font-family: Helvetica;
-    font-size: 9pt;
-    font-weight: normal;
-    position: fixed;
-    border-width: 1px;
-    border-style: solid;
-    border-color: $cuteviolet;
-    // border-radius: 0.5vw;
-    background: black;
-    margin: 2px;
-    color: white;
-    padding: 5px;
-
-
-        .buttonGoogleDoc{
-        display: inline-table;
-        background: $cuteviolet;
-        color: white;
-        border-width: 1px;
-        border-style: solid;
-        border-radius:1vw;
-        border-color: $cuteviolet;
-        padding: 0.2vw 0.5vw 0.2vw 0.5vw;
-        margin: 10px 40% 2px 40%;
-        cursor: pointer;
-        color: white;
-
-        &:hover {
-            background: white;
-            color: $cuteviolet;
-            border-color: white;
-        }
-    }
-}
-
-
-// tests
-.bodyTestIndex{
-    margin: 0;
-    padding: 0;
-    // background-image: url(outlinebg.png);
-    // background-position: center;
-    // background-repeat: no-repeat;
-    // background-size: cover;
-    width: 100%;
-    height: 100%;
-
-}
-
-// .objectTestIndex{
-//     position: absolute;
-//     width: 10vw;
-//     cursor: move;
-
-//     img {
-//        width: 100%;
-//        }
-
-//     a {
-//         position: absolute;
-//         top: 50%;
-//         left: 50%;
-//         width: 30%;
-//         height: 30%;
-//         cursor: pointer;
-//         display: block;
-//         transform: translate(-50%, -50%);
-//     }
-// }
-
-#bg {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -20;
-    background: rgb(255, 255, 255);
-    font-family: Helvetica;
-    font-size: 11pt;
-    font-weight: normal;
-    text-align: center;
-    background-image: url(BGoutlineNoir.png);
-    background-position-y: 50px;
-    background-repeat: no-repeat;
-    background-size: cover;
-
-    .title{
-        font-size: 40px;
-        margin: 5vw 10vw 0 10vw;
-    }
-
-    .texte{
-        margin: 1vw 20vw 0 20vw;
-    }
-
-    .title2{
-        display: none;
-    }
-    .texte2{
-        display: none;
-    }
-    .title3{
-        display: none;
-    }
-    .texte3{
-        display: none;
-    }
-
-
-}
-
-#trigger {
-    position: absolute;
-    z-index: 3;
-    width: 10vw;
-    cursor: move;  
-
-    img {
-        width: 100%;
-        }
- 
-     a {
-         position: absolute;
-         top: 50%;
-         left: 50%;
-         width: 30%;
-         height: 30%;
-         cursor: pointer;
-         display: block;
-         transform: translate(-50%, -50%);
-     }
-
-}
-
-#trigger2 {
-    position: absolute;
-    z-index: 4;
-    width: 10vw;
-    cursor: move;
-
-    img {
-        width: 100%;
-        }
- 
-     a {
-         position: absolute;
-         top: 50%;
-         left: 50%;
-         width: 30%;
-         height: 30%;
-         cursor: pointer;
-         display: block;
-         transform: translate(-50%, -50%);
-     }
-
-}
-
-#trigger:hover ~ #bg {
-    background: rgb(0, 0, 0);
-    background-image: url(BGoutlineBlc.png);
-    background-position-y: 50px;
-    background-repeat: no-repeat;
-    background-size: cover;
-    .title{
-        display: none;
-    }
-    .texte{
-        display: none;
-    }
-    .title2{
-        display: block;
-        font-size: 40px;
-        margin: 5vw 10vw 0 10vw;
-        color: white;
-    }
-    .texte2{
-        display: block;
-        margin: 1vw 20vw 0 20vw;
-        color: white;
-    }
-    .title3{
-        display: none;
-    }
-    .texte3{
-        display: none;
-    }
-}
-
-
-#trigger2:hover ~ #bg {
-    background: rgb(255, 88, 171);
-    background-image: url(BGoutlineBlc.png);
-    background-position-y: 50px;
-    background-repeat: no-repeat;
-    background-size: cover;
-    .title3{
-        display: block;
-        font-size: 40px;
-        margin: 5vw 10vw 0 10vw;
-        color: rgb(255, 255, 255);
-    }
-    .texte3{
-        display: block;
-        margin: 1vw 20vw 0 20vw;
-        color: rgb(255, 255, 255);
-    }
-    .title{
-        display: none;
-    }
-    .texte{
-        display: none;
-    }
-    .title2{
-        display: none;
-    }
-    .texte2{
-        display: none;
-    }
-}
-
-.GM{
-    position: absolute;
-    // top: 50%;
-    // transform: translateY(-50%);
-    // background: rgb(0, 0, 0);
-    background-image: url("backgroundLandingpageGianmarco.jpg");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    color: white;
-    font-family: Helvetica;
-    font-size: 1vw;
-    font-weight: normal;
-
-}
-
-.texteGM{
-    position: absolute;
-    font-family: Helvetica;
-    font-size: 25pt;
-    font-weight: normal;
-    color: rgb(255, 255, 255);
-    width: 40%;
-
-    // left: 60%;
-    // top: 50%;
-    // transform: translate(-50%, -50%);
-
-    transition: top 10s linear, left 10s linear;
-
-    img{
-        width: 30%;
-        display: inline-block;
-    }
-}
-
-
-.map-container {
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    
-    img {
-        height: 100%;
-    }
-
-    .map-pointer {
-        position: absolute;
-        width: 5vh;
-        height: 5vh;
-        background-color: green;
-        opacity: 0;
-        transform: translate(-50%, -50%);
-        cursor: pointer;
-    }
-
-    .map-pointerLison {
-        position: absolute;
-        width: 20vh;
-        height: 30vh;
-        background-color: green;
-        opacity: 0;
-        transform: translate(-50%, -50%);
-        cursor: pointer;
-    }
-
-    .map-pointerRaph {
-        position: absolute;
-        width: 5vh;
-        height: 5vh;
-        background-color: green;
-        opacity: 0;
-        transform: translate(-50%, -50%);
-        cursor: pointer;
-    }
-
-    #Episode1 {
-        left: 70%;
-        top: 9%;
-    }
-    #Episode2 {
-        left: 70%;
-        top: 23%;
-    }
-    #Episode3 {
-        left: 57.5%;
-        top: 37%;
-    }
-    #Episode4 {
-        left: 44%;
-        top: 67%;
-    }
-    #Episode5 {
-        left: 66%;
-        top: 81%;
-    }
-    #Episode6 {
-        left: 63.5%;
-        top: 77%;
-    }
-    #Episode7 {
-        left: 64%;
-        top: 71.5%;
-    }
-
-    #Episode01 {
-        left: 19%;
-        top: 56%;
-    }
-    #Episode02 {
-        left: 34%;
-        top: 57%;
-    }
-    #Episode03 {
-        left: 47%;
-        top: 57%;
-    }
-    #Episode04 {
-        left: 61%;
-        top: 57%;
-    }
-    #Episode05 {
-        left: 75%;
-        top: 57%;
-    }
-    #Episode06 {
-        left: 89%;
-        top: 57%;
-    }
-
-    #Episode001 {
-        left: 15%;
-        top: 44%;
-    }
-    #Episode002 {
-        left: 24%;
-        top: 63%;
-    }
-    #Episode003 {
-        left: 48%;
-        top: 60%;
-    }
-    #Episode004 {
-        left: 56%;
-        top: 69%;
-    }
-    #Episode005 {
-        left: 64%;
-        top: 49%;
-    }
-    #Episode006 {
-        left: 74%;
-        top: 58%;
-    }
-
+@media screen and (min-width: 1000px) {
 
     
 }
 
-.li-1 {
-    top: 3vw;
-    left: 2vw;
-}
-
-.li-2 {
-    top: 5vw;
-    left: 50vw;
-}
-
-.li-3 {
-    left: 44vw;
-    top: 21vw;
-}
-
-.li-4 {
-    left: 2vw;
-    top: 28vw; 
-}
-
-.li-5 {
-    left: 15vw;
-    top: 38vw;
-}
-
-.li-6 {
-    left: 7vw;
-    top: 55vw;
-}
-
-.li-7{
-    left: 54vw;
-top: 57vw;
-}
-
-.li-9 {
-    left: 7vw;
-top: 15vw;
-
-}
 
-.li-10 {
-    left: 57vw;
-    top: 43vw;
-}
-// stuffs
-
-@media screen and (min-width: 1000px) {
-
-    
-}
 
 @media screen and (max-width: 999px) {
  

Some files were not shown because too many files changed in this diff