From ec9eded14359bec6bcd4e4f8d20d502d77dde454 Mon Sep 17 00:00:00 2001
From: Lazer <lasselvdbc@gmail.com>
Date: Thu, 7 May 2015 16:26:26 +0200
Subject: [PATCH] arrows added

---
 web/2015-Artyom.html              |  16 +-
 web/2015-Henk-Jelle_de_Groot.html |  16 +-
 web/2015-Lucia_Dossin.html        |  25 +--
 web/2015-Luther_Blisset.html      |  27 +--
 web/2015-Max_Dovey.html           |  19 +-
 web/css/style.css                 |   1 -
 web/css/style_projectpage.css     |  63 ++++++-
 web/img/arrowBack.svg             |  68 +++++++
 web/img/arrowDown.svg             |  71 +++++++
 web/img/arrowDownW.svg            |  72 +++++++
 web/img/arrowUp.svg               |  71 +++++++
 web/img/arrowUpW.svg              |  72 +++++++
 web/img/arrowa.svg                |  71 +++++++
 web/img/arrowb.svg                |  71 +++++++
 web/index.html                    |   6 +-
 web/js/mainScripts.js             | 300 +++++++++++++-----------------
 web/page-template.html            |   7 +-
 17 files changed, 724 insertions(+), 252 deletions(-)
 create mode 100644 web/img/arrowBack.svg
 create mode 100644 web/img/arrowDown.svg
 create mode 100644 web/img/arrowDownW.svg
 create mode 100644 web/img/arrowUp.svg
 create mode 100644 web/img/arrowUpW.svg
 create mode 100644 web/img/arrowa.svg
 create mode 100644 web/img/arrowb.svg

diff --git a/web/2015-Artyom.html b/web/2015-Artyom.html
index cb9d90c..1156b54 100644
--- a/web/2015-Artyom.html
+++ b/web/2015-Artyom.html
@@ -15,7 +15,7 @@
             <div id="sidebarInner">
                 <div id="sideBarDesc">
                     <div id="sideBarDescInfo">
-                        <p>Tempted by Tomorrow</p>
+                        <a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Tempted by Tomorrow</p>
                     </div>
 
                     <div id="sideBarDescInner">
@@ -26,14 +26,11 @@
 
                         <p id="title">Artyom-graduation-work 2015</p>
 
-                        <!-- moved up <p>Artyom&#8217;s work entitled &#8220;New Image&#8221; is a series of images of that have been made using Google Image search results. In his work Artyom explores the relations between images and the technology that is responsible for their production and distribution. Namely how technological endeavors came to affect the dynamics within image culture.</p>
-  -->
+                        <!-- moved up   -->
 
-                        <div id="description"><p>Artyom&#8217;s work entitled &#8220;New Image&#8221; is a series of images of that have been made using Google Image search results. In his work Artyom explores the relations between images and the technology that is responsible for their production and distribution. Namely how technological endeavors came to affect the dynamics within image culture.</p>
-</div>
+                        <div id="description" />
 
-                        <div id="bio"><p>Artyom Kocharyan (AM) is visual artist based in Rotterdam. His work explores the contemporary visual culture, namely the culture of images that increasingly dominate the world of communication. Artyom&#8217;s work is concerned with the representation aspect of images and their ability to determine our vision of the world. Artyom is engaged with the representation apparatus that is peculiar to current digital and online culture.</p>
-</div>
+                        <div id="bio" />
 
                         <p class="hightlightSidebar"><a href="www.artyomkocharyan.com" target="_blank">www.artyomkocharyan.com</a></p>
 
@@ -49,7 +46,7 @@
         <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
             <div class="fixedsticky" id="filter" style="top:0;">
               <div class="themes" id="sortArea">
-		<p>Artyom-graduation-work</p>
+		<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Artyom-graduation-work</p><img src="./img/arrowUpW.svg" />
                     <!--p>PZI: Master Media Design & Communication </p--> <a class="closeSidebar"><img src="./arrowUpW.svg" /></a>
                 </div>
             </div>
@@ -71,7 +68,8 @@
     <script src="./js/fixedsticky.js" /> 
     <script src="./js/isotope.pkgd.min.js" /> 
     <script src="./js/imagesloaded.pkgd.min.js" /> 
-    <script src="./js/mainScripts.js" />
+    <script src="./js/mainScripts_single.js" />
+
 
 
 </body></html>
\ No newline at end of file
diff --git a/web/2015-Henk-Jelle_de_Groot.html b/web/2015-Henk-Jelle_de_Groot.html
index 1397b9a..896ee40 100644
--- a/web/2015-Henk-Jelle_de_Groot.html
+++ b/web/2015-Henk-Jelle_de_Groot.html
@@ -15,7 +15,7 @@
             <div id="sidebarInner">
                 <div id="sideBarDesc">
                     <div id="sideBarDescInfo">
-                        <p>Tempted by Tomorrow</p>
+                        <a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Tempted by Tomorrow</p>
                     </div>
 
                     <div id="sideBarDescInner">
@@ -26,14 +26,11 @@
 
                         <p id="title">U ntitled 2015</p>
 
-                        <!-- moved up <p>Untitled is a work about visualizing non audible and non visual acoustic properties of a space. Every space has a certain acoustic reverberation, a property that can't be heard or seen on it's own. With this project I aim to visualize that property trough data visualization. Untitled contains a (few) examples of spaces that have been mapped and visualized in a new form and material. These sculptures are presented in a way that the viewer may contextualize on it's own what the nature of the sculpture is</p>
-  -->
+                        <!-- moved up   -->
 
-                        <div id="description"><p>Untitled is a work about visualizing non audible and non visual acoustic properties of a space. Every space has a certain acoustic reverberation, a property that can't be heard or seen on it's own. With this project I aim to visualize that property trough data visualization. Untitled contains a (few) examples of spaces that have been mapped and visualized in a new form and material. These sculptures are presented in a way that the viewer may contextualize on it's own what the nature of the sculpture is</p>
-</div>
+                        <div id="description" />
 
-                        <div id="bio"><p>Henk-Jelle de Groot is a Rotterdam based sound designer and musician. After graduating with an Audio / Visual design bachelor Henk-Jelle setup a sound studio in Rotterdam to work in the Audio / Visual industry. After 7 years of working he returned to the Piet Zwart Institute to graduate in a Master of comm design something something. In addition to working in the Audio / Visual industry, he is muscian and builder of electronic instruments.</p>
-</div>
+                        <div id="bio" />
 
                         <p class="hightlightSidebar" />
 
@@ -49,7 +46,7 @@
         <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
             <div class="fixedsticky" id="filter" style="top:0;">
               <div class="themes" id="sortArea">
-		<p>U ntitled</p>
+		<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a><p>U ntitled</p><img src="./img/arrowUpW.svg" />
                     <!--p>PZI: Master Media Design & Communication </p--> <a class="closeSidebar"><img src="./arrowUpW.svg" /></a>
                 </div>
             </div>
@@ -71,7 +68,8 @@
     <script src="./js/fixedsticky.js" /> 
     <script src="./js/isotope.pkgd.min.js" /> 
     <script src="./js/imagesloaded.pkgd.min.js" /> 
-    <script src="./js/mainScripts.js" />
+    <script src="./js/mainScripts_single.js" />
+
 
 
 </body></html>
\ No newline at end of file
diff --git a/web/2015-Lucia_Dossin.html b/web/2015-Lucia_Dossin.html
index 5be9dc9..c555b71 100644
--- a/web/2015-Lucia_Dossin.html
+++ b/web/2015-Lucia_Dossin.html
@@ -15,7 +15,7 @@
             <div id="sidebarInner">
                 <div id="sideBarDesc">
                     <div id="sideBarDescInfo">
-                        <p>Tempted by Tomorrow</p>
+                        <a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Tempted by Tomorrow</p>
                     </div>
 
                     <div id="sideBarDescInner">
@@ -26,14 +26,11 @@
 
                         <p id="title">Mina 2015</p>
 
-                        <!-- moved up <p>Mina is a smart chat bot, a commercial project designed by a promising startup to fulfill humans' need of talking to someone else in a world where communication has become almost completely mediated by social media services. To keep the illusion alive, the software aims to be invisible.</p>
-  -->
+                        <!-- moved up   -->
 
-                        <div id="description"><p>Mina is a smart chat bot, a commercial project designed by a promising startup to fulfill humans' need of talking to someone else in a world where communication has become almost completely mediated by social media services. To keep the illusion alive, the software aims to be invisible.</p>
-</div>
+                        <div id="description" />
 
-                        <div id="bio"><p>The bio is coming soon.</p>
-</div>
+                        <div id="bio" />
 
                         <p class="hightlightSidebar"><a href="www.example.com" target="_blank">www.example.com</a></p>
 
@@ -49,7 +46,7 @@
         <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
             <div class="fixedsticky" id="filter" style="top:0;">
               <div class="themes" id="sortArea">
-		<p>Mina</p>
+		<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Mina</p><img src="./img/arrowUpW.svg" />
                     <!--p>PZI: Master Media Design & Communication </p--> <a class="closeSidebar"><img src="./arrowUpW.svg" /></a>
                 </div>
             </div>
@@ -58,14 +55,7 @@
 
             <div class="project" id="extra">
 	      <img id="thumnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/5/59/3legs.jpg" />
-              <p>thumbnail is TEMPORARY (since it is mandatory to have a thumbnail for making this page, I used a temporary placeholder).</p>
-<h3 id="free-text---short-version-203-words">free text - short version 203 words</h3>
-<p>In a future not so far away, most humans were deprived from communicating with other humans through voice. Increased intolerance to raw subjective matters combined to a competitive labour market that practically forced every adult to work 12 to 16 hours everyday resulted in that most of human communication happened through written text messages or images using online social media services. As a side effect, the complexity of human conversation decreased to a level in which computers and people could understand each other reasonably well (an issue of Artificial Intelligence solved in an unexpectedly simple way, after many decades and much money spent on Natural Language research). Children were trained from early age to perform well in this environment. However, a parcel of the population still had the need to engage in conversation using their voices, like humans used to do 'in the good old times' (that's what they read somewhere online). Within this group, a few actually met other humans to talk. Others did not manage to find time or energy, despite their longings. With this group of people in mind, a promising startup company launched Mina, a chat bot that was able to fulfill this need for voice interaction remarkably well.</p>
-<h3 id="free-text---full-version-601-words">free text - full version 601 words</h3>
-<p>In a future not so far away, most humans were deprived from communicating with other humans through voice. Increased intolerance to raw subjective matters combined to a competitive labour market that practically forced every adult to work 12 to 16 hours everyday resulted in that most of human communication happened through written text messages or images using online social media services. As a side effect, the complexity of human conversation decreased to a level in which computers and people could understand each other reasonably well (an issue of Artificial Intelligence solved in an unexpectedly simple way, after many decades and much money spent on Natural Language research). Children were trained from early age to perform well in this environment. However, a parcel of the population still had the need to engage in conversation using their voices, like humans used to do 'in the good old times' (that's what they read somewhere online). Within this group, a few actually met other humans to talk. Others did not manage to find time or energy, despite their longings. With this group of people in mind, a promising startup company launched Mina, a chat bot that was able to fulfill this need for voice interaction remarkably well. Mina was presented as high technology, a product of years of research done by the brightest minds in the tech world. But in fact, it was a very old program, written in the infancy of digital electronic computing. This program worked quite well, since humans did not communicate too complex ideas anymore. But admitting the re-use of something old was completely out of question. Recycling was highly encouraged in matters like packaging, for example, but unthinkable for products and ideas. (That was regarded as not creative.) So, Mina was presented as a contemporary creation.</p>
-<p>Mina was a program that managed natural language in a quite rudimentary fashion. When the program was initiated, it loaded a script. This script contained a specific set of instructions for a conversation. It was able to identify some language patterns and according to these patterns, it chose a response that would sound plausible. But in order for the program to have the desired effect, these scripts would have to contain changes in the responses on a regular basis. These changes would keep alive the illusion of talking to another human being. Without them, subscribers would probably notice they were talking to a robot and would cancel their subscriptions. Also, scripts would be changed according to the calendar and the news - and would count on social media profile data to increase the (sanitized) subjectivity rate of the conversation. So for example, on Christmas season, the scripts would be almost completely different than scripts loaded along the year. For some subscribers, according to their profile data, Christmas scripts would contain emotional and inspiring words in a frequency higher than usual. For others, they would transmit the subscriber a sense of belonging to a group that hates Christmas.</p>
-<p>From time to time, the words database that was used to feed the scripts was attacked and the connections between words were switched or corrupted. That caused the script to reply using weird language constructs, and in many cases Mina's talk would not only unmask the robot but could also ignite a self-reflection process in the subscriber. Some would use this wake-up chance to try to find a way of having actual human contact back in their lives, others would instead sue the company and ask the subscription fee back. Nobody never found out if the ones responsible for these attacks were hackers or a business competitor.</p>
-
+              
             </div>
 
             <!---->
@@ -78,7 +68,8 @@
     <script src="./js/fixedsticky.js" /> 
     <script src="./js/isotope.pkgd.min.js" /> 
     <script src="./js/imagesloaded.pkgd.min.js" /> 
-    <script src="./js/mainScripts.js" />
+    <script src="./js/mainScripts_single.js" />
+
 
 
 </body></html>
\ No newline at end of file
diff --git a/web/2015-Luther_Blisset.html b/web/2015-Luther_Blisset.html
index 25d1cb7..02014ea 100644
--- a/web/2015-Luther_Blisset.html
+++ b/web/2015-Luther_Blisset.html
@@ -15,7 +15,7 @@
             <div id="sidebarInner">
                 <div id="sideBarDesc">
                     <div id="sideBarDescInfo">
-                        <p>Tempted by Tomorrow</p>
+                        <a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Tempted by Tomorrow</p>
                     </div>
 
                     <div id="sideBarDescInner">
@@ -26,14 +26,11 @@
 
                         <p id="title">Qq 2015</p>
 
-                        <!-- moved up <p>The novel <strong>Q</strong> was written by four Bologna-based members of the LBP, as a final contribution to the project, and published in Italy in 1999. So far, it has been translated into English (British and American), Spanish, German, Dutch, French, Portuguese (Brazilian), Danish, Polish, Greek, Czech, Russian, Turkish, Basque and Korean. In August 2003 the book was nominated for the Guardian First Book Prize.</p>
-  -->
+                        <!-- moved up   -->
 
-                        <div id="description"><p>The novel <strong>Q</strong> was written by four Bologna-based members of the LBP, as a final contribution to the project, and published in Italy in 1999. So far, it has been translated into English (British and American), Spanish, German, Dutch, French, Portuguese (Brazilian), Danish, Polish, Greek, Czech, Russian, Turkish, Basque and Korean. In August 2003 the book was nominated for the Guardian First Book Prize.</p>
-</div>
+                        <div id="description" />
 
-                        <div id="bio"><p>Luther Blissett is a multiple-use name, an open pop star informally adopted and shared by hundreds of artists and activists all over Europe and the Americas since 1994. The pseudonym first appeared in Bologna, Italy, in mid-1994, when a number of cultural activists began using it for staging a series of urban and media pranks and to experiment with new forms of authorship and identity. From Bologna the multiple-use name spread to other European cities, such as Rome and London, as well as countries such as Germany, Spain, and Slovenia.[1] Sporadic appearances of Luther Blissett have been also noted in Canada, the United States, and Brazil.</p>
-</div>
+                        <div id="bio" />
 
                         <p class="hightlightSidebar"><a href="https://en.wikipedia.org/wiki/Luther_Blissett_(nom_de_plume)" target="_blank">https://en.wikipedia.org/wiki/Luther_Blissett_(nom_de_plume)</a></p>
 
@@ -49,7 +46,7 @@
         <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
             <div class="fixedsticky" id="filter" style="top:0;">
               <div class="themes" id="sortArea">
-		<p>Qq</p>
+		<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Qq</p><img src="./img/arrowUpW.svg" />
                     <!--p>PZI: Master Media Design & Communication </p--> <a class="closeSidebar"><img src="./arrowUpW.svg" /></a>
                 </div>
             </div>
@@ -58,16 +55,7 @@
 
             <div class="project" id="extra">
 	      <img id="thumnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/thumb/8/85/Luther-blissett-300.jpg/500px-Luther-blissett-300.jpg" />
-              <p>While the folk heroes of the early-modern period and the nineteenth century served a variety of social and political purposes, the <strong>Luther Blissett Project (LBP)</strong> were able to utilize the media and communication strategies unavailable to their predecessors. According to Marco Deseriis, the main purpose of the LBP was to create a folk hero of the information society whereby knowledge workers and immaterial workers could organize and recognize themselves.[5] Thus, rather than being understood only as a media prankster and culture jammer, Luther Blissett became a positive mythic figure that was supposed to embody the very process of community and cross-media storytelling. Roberto Bui&#8212;one of the co-founders of the LBP and Wu Ming&#8212;explains the function of Luther Blissett and other radical folk heroes as mythmaking or mythopoesis</p>
-<p><iframe height="450px" src="https://player.vimeo.com/video/114218234" width="600px"> </iframe></p>
-<p><iframe height="450px" src="https://www.youtube.com/embed/oXxZnL5HokA" width="600px"> </iframe></p>
-<h2 id="gallery">gallery</h2>
-<p><img alt="WWWonopoly_Board.png" src="http://pzwiki.wdka.nl/mw-mediadesign/images/c/ce/WWWonopoly_Board.png" title="fig:WWWonopoly_Board.png" /> <img alt="Mb-WordNet-tour-version2-08.png" src="http://pzwiki.wdka.nl/mw-mediadesign/images/8/82/Mb-WordNet-tour-version2-08.png" title="fig:Mb-WordNet-tour-version2-08.png" /> <img alt="Labanotation1.jpg" src="http://pzwiki.wdka.nl/mw-mediadesign/images/4/46/Labanotation1.jpg" title="fig:Labanotation1.jpg" /></p>
-<h2 id="other-radical-folk">other radical folk</h2>
-<p>Are you the radical folk?</p>
-<p><iframe height="450px" src="https://player.vimeo.com/video/115381750" width="600px"> </iframe></p>
-<p><iframe height="450px" src="https://www.youtube.com/embed/ihReeJg08ns" width="600px"> </iframe></p>
-
+              
             </div>
 
             <!---->
@@ -80,7 +68,8 @@
     <script src="./js/fixedsticky.js" /> 
     <script src="./js/isotope.pkgd.min.js" /> 
     <script src="./js/imagesloaded.pkgd.min.js" /> 
-    <script src="./js/mainScripts.js" />
+    <script src="./js/mainScripts_single.js" />
+
 
 
 </body></html>
\ No newline at end of file
diff --git a/web/2015-Max_Dovey.html b/web/2015-Max_Dovey.html
index 406d0cd..3ec2f56 100644
--- a/web/2015-Max_Dovey.html
+++ b/web/2015-Max_Dovey.html
@@ -15,7 +15,7 @@
             <div id="sidebarInner">
                 <div id="sideBarDesc">
                     <div id="sideBarDescInfo">
-                        <p>Tempted by Tomorrow</p>
+                        <a class="hoverBackA" href="index.html"><img src="./img/arrowBack.svg" /></a><p>Tempted by Tomorrow</p>
                     </div>
 
                     <div id="sideBarDescInner">
@@ -26,14 +26,11 @@
 
                         <p id="title">User:Max Dovey/maxgradbio 2015</p>
 
-                        <!-- moved up <p>How to be more or less human.</p>
-  -->
+                        <!-- moved up   -->
 
-                        <div id="description"><p>How to be more or less human.</p>
-</div>
+                        <div id="description" />
 
-                        <div id="bio"><p>My Bio</p>
-</div>
+                        <div id="bio" />
 
                         <p class="hightlightSidebar"><a href="http://maxdovey.com" target="_blank">http://maxdovey.com</a></p>
 
@@ -49,7 +46,7 @@
         <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
             <div class="fixedsticky" id="filter" style="top:0;">
               <div class="themes" id="sortArea">
-		<p>User:Max Dovey/maxgradbio</p>
+		<a class="hoverBackB" href="index.html"><img src="./img/arrowBack.svg" /></a><p>User:Max Dovey/maxgradbio</p><img src="./img/arrowUpW.svg" />
                     <!--p>PZI: Master Media Design & Communication </p--> <a class="closeSidebar"><img src="./arrowUpW.svg" /></a>
                 </div>
             </div>
@@ -58,8 +55,7 @@
 
             <div class="project" id="extra">
 	      <img id="thumnail" src="http://pzwiki.wdka.nl/mw-mediadesign/images/1/16/Pointer.gif" />
-              <p>A solo performance exploring identity, perception and representation through automatic image analysis software. Software that is used to automatically tag online images is used to direct a live performance. Each scene is performed alongside software that reacts and interprets the performers actions. The performance explores the potential threat of computer vision and automated image perception on the human body. Every movement of the performance is analysed in detail to reductive categorisation.</p>
-
+              
             </div>
 
             <!---->
@@ -72,7 +68,8 @@
     <script src="./js/fixedsticky.js" /> 
     <script src="./js/isotope.pkgd.min.js" /> 
     <script src="./js/imagesloaded.pkgd.min.js" /> 
-    <script src="./js/mainScripts.js" />
+    <script src="./js/mainScripts_single.js" />
+
 
 
 </body></html>
\ No newline at end of file
diff --git a/web/css/style.css b/web/css/style.css
index 8c09922..ea99dca 100644
--- a/web/css/style.css
+++ b/web/css/style.css
@@ -4,7 +4,6 @@
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
-          color: red;
 }
 
 html, body{
diff --git a/web/css/style_projectpage.css b/web/css/style_projectpage.css
index 0b97317..6c242b4 100644
--- a/web/css/style_projectpage.css
+++ b/web/css/style_projectpage.css
@@ -67,6 +67,20 @@ h2 {
   border-bottom: 3px double white;
 }
 
+#sideBarDescInner a,
+#sideBarDescInner a:active,
+#sideBarDescInner a:visited,
+#sideBarDescInner a:hover{
+  color: white;
+  text-decoration: none;
+  border: 0;
+}
+
+#sideBarDescInfo img {
+  width: 25px;
+  display: initial !important; 
+}
+
 #sidebarInner{
   display: block;
 }
@@ -75,19 +89,26 @@ h2 {
   display: block;
 }
 
+.hoverBackA {
+  display: initial !important; 
+}
+
+.hoverBackB {
+  display: none; 
+}
 
 #sidebar {
-  background-color: black;
+  background-color: black;   
 }
 
 .sidebarBorderLeft {
   border-left: 3px solid white;
 }
 
-#sideBarDescInner a,
-#sideBarDescInner a:hover,
-#sideBarDescInner a:active,
-#sideBarDescInner a:visited{
+#sideBarDescInfo a,
+#sideBarDescInfo a:hover,
+#sideBarDescInfo a:active,
+#sideBarDescInfo a:visited{
   color: white;
   text-decoration: none;
 }
@@ -150,6 +171,11 @@ h2 {
       font-family: "inconsolata", monospace;
       border-bottom: 3px double white;
     }
+
+  #sideBarDescInfo img {
+      width: 20px;
+      display: initial !important; 
+    }
   }
 
 @media only screen and (max-width:1280px){
@@ -188,4 +214,31 @@ h2 {
          -moz-box-shadow: inset 0px -3px 0px 0px white;
               box-shadow: inset 0px -3px 0px 0px white;
     }
+
+  .hoverBackA {
+    display: none !important; 
+  }
+
+  .hoverBackB {
+    display: initial !important; 
+  }
+
+  #filter img {
+    width: 20px;
+    display: initial !important;
+  }
+
+  #filter p {
+    display: initial !important;
+  }
+}
+
+
+@media only screen and (min-width:0px) and (max-width:459px){
+
+  #filter img {
+    width: 16px;
+    display: initial !important;
+  }
+
 }
\ No newline at end of file
diff --git a/web/img/arrowBack.svg b/web/img/arrowBack.svg
new file mode 100644
index 0000000..37c0604
--- /dev/null
+++ b/web/img/arrowBack.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="53.6875"
+   height="34.9375"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="arrowBack.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="383.27584"
+     inkscape:cy="-134.62402"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1151"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     showguides="false" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-59.96523,-126.58252)">
+    <path
+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Crimson Text;-inkscape-font-specification:Crimson Text"
+       d="m -188.59375,-104.625 -15.6875,15.6875 0,3.5625 15.6875,15.6875 4.78125,-4.78125 -9.28125,-9.28125 42.5,0 0,-6.78125 -42.5,0 9.28125,-9.3125 z"
+       transform="translate(264.24648,231.20752)"
+       id="path2994-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccccc" />
+  </g>
+</svg>
diff --git a/web/img/arrowDown.svg b/web/img/arrowDown.svg
new file mode 100644
index 0000000..9ebcfaf
--- /dev/null
+++ b/web/img/arrowDown.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="58.688324"
+   height="41.601223"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="arrow2.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="45.383594"
+     inkscape:cy="-124.96541"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1151"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     showguides="false" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-264.24648,-231.20752)">
+    <g
+       transform="matrix(9.7769443e-8,6.8051692,-6.8051692,9.7769443e-8,1249.5812,-1226.1354)"
+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Crimson Text;-inkscape-font-specification:Crimson Text"
+       id="flowRoot2985">
+      <path
+         d="m 220.26552,138.23638 0,6.55572 -0.99609,0 0,-5.55963 -3.47646,0 1.36523,1.36524 -0.70312,0.70312 -2.30274,-2.30273 0,-0.52734 2.30274,-2.30274 0.70312,0.70313 -1.36523,1.36523 4.47255,0"
+         id="path2994"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccccccccccc" />
+    </g>
+  </g>
+</svg>
diff --git a/web/img/arrowDownW.svg b/web/img/arrowDownW.svg
new file mode 100644
index 0000000..b01d622
--- /dev/null
+++ b/web/img/arrowDownW.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="58.688324"
+   height="41.601223"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="arrowDown.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="45.383594"
+     inkscape:cy="-124.96541"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1151"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     showguides="false" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-264.24648,-231.20752)">
+    <g
+       transform="matrix(9.7769443e-8,6.8051692,-6.8051692,9.7769443e-8,1249.5812,-1226.1354)"
+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Crimson Text;-inkscape-font-specification:Crimson Text"
+       id="flowRoot2985">
+      <path
+         d="m 220.26552,138.23638 0,6.55572 -0.99609,0 0,-5.55963 -3.47646,0 1.36523,1.36524 -0.70312,0.70312 -2.30274,-2.30273 0,-0.52734 2.30274,-2.30274 0.70312,0.70313 -1.36523,1.36523 4.47255,0"
+         id="path2994"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccccccccccc"
+         style="fill:#ffffff" />
+    </g>
+  </g>
+</svg>
diff --git a/web/img/arrowUp.svg b/web/img/arrowUp.svg
new file mode 100644
index 0000000..86334c7
--- /dev/null
+++ b/web/img/arrowUp.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="58.688324"
+   height="41.601223"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="arrowa.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="45.383592"
+     inkscape:cy="-124.96538"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1151"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     showguides="false" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-264.24648,-231.20755)">
+    <g
+       transform="matrix(9.7769443e-8,-6.8051692,-6.8051692,-9.7769443e-8,1249.5812,1730.1517)"
+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Crimson Text;-inkscape-font-specification:Crimson Text"
+       id="flowRoot2985">
+      <path
+         d="m 220.26552,138.23638 0,6.55572 -0.99609,0 0,-5.55963 -3.47646,0 1.36523,1.36524 -0.70312,0.70312 -2.30274,-2.30273 0,-0.52734 2.30274,-2.30274 0.70312,0.70313 -1.36523,1.36523 4.47255,0"
+         id="path2994"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccccccccccc" />
+    </g>
+  </g>
+</svg>
diff --git a/web/img/arrowUpW.svg b/web/img/arrowUpW.svg
new file mode 100644
index 0000000..0846683
--- /dev/null
+++ b/web/img/arrowUpW.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="58.688324"
+   height="41.601223"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="arrowUp.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="45.383592"
+     inkscape:cy="-124.96538"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1151"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     showguides="false" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-264.24648,-231.20755)">
+    <g
+       transform="matrix(9.7769443e-8,-6.8051692,-6.8051692,-9.7769443e-8,1249.5812,1730.1517)"
+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Crimson Text;-inkscape-font-specification:Crimson Text"
+       id="flowRoot2985">
+      <path
+         d="m 220.26552,138.23638 0,6.55572 -0.99609,0 0,-5.55963 -3.47646,0 1.36523,1.36524 -0.70312,0.70312 -2.30274,-2.30273 0,-0.52734 2.30274,-2.30274 0.70312,0.70313 -1.36523,1.36523 4.47255,0"
+         id="path2994"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccccccccccc"
+         style="fill:#ffffff" />
+    </g>
+  </g>
+</svg>
diff --git a/web/img/arrowa.svg b/web/img/arrowa.svg
new file mode 100644
index 0000000..9ebcfaf
--- /dev/null
+++ b/web/img/arrowa.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="58.688324"
+   height="41.601223"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="arrow2.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="45.383594"
+     inkscape:cy="-124.96541"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1151"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     showguides="false" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-264.24648,-231.20752)">
+    <g
+       transform="matrix(9.7769443e-8,6.8051692,-6.8051692,9.7769443e-8,1249.5812,-1226.1354)"
+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Crimson Text;-inkscape-font-specification:Crimson Text"
+       id="flowRoot2985">
+      <path
+         d="m 220.26552,138.23638 0,6.55572 -0.99609,0 0,-5.55963 -3.47646,0 1.36523,1.36524 -0.70312,0.70312 -2.30274,-2.30273 0,-0.52734 2.30274,-2.30274 0.70312,0.70313 -1.36523,1.36523 4.47255,0"
+         id="path2994"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccccccccccc" />
+    </g>
+  </g>
+</svg>
diff --git a/web/img/arrowb.svg b/web/img/arrowb.svg
new file mode 100644
index 0000000..86334c7
--- /dev/null
+++ b/web/img/arrowb.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="58.688324"
+   height="41.601223"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="arrowa.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="45.383592"
+     inkscape:cy="-124.96538"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1151"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     showguides="false" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-264.24648,-231.20755)">
+    <g
+       transform="matrix(9.7769443e-8,-6.8051692,-6.8051692,-9.7769443e-8,1249.5812,1730.1517)"
+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Crimson Text;-inkscape-font-specification:Crimson Text"
+       id="flowRoot2985">
+      <path
+         d="m 220.26552,138.23638 0,6.55572 -0.99609,0 0,-5.55963 -3.47646,0 1.36523,1.36524 -0.70312,0.70312 -2.30274,-2.30273 0,-0.52734 2.30274,-2.30274 0.70312,0.70313 -1.36523,1.36523 4.47255,0"
+         id="path2994"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccccccccccc" />
+    </g>
+  </g>
+</svg>
diff --git a/web/index.html b/web/index.html
index 38376e1..648222c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE HTML><html><head>
 
-    <meta charset="UTF-8">
-    <meta content="yes" name="apple-mobile-web-app-capable">
-    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+    <meta charset="UTF-8"></meta>
+    <meta content="yes" name="apple-mobile-web-app-capable"></meta>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"></meta>
 
 
     <title>Piet Zwart Institute: Master Media Design &amp; Communication</title>
diff --git a/web/js/mainScripts.js b/web/js/mainScripts.js
index ee588c8..5ed0019 100644
--- a/web/js/mainScripts.js
+++ b/web/js/mainScripts.js
@@ -1,228 +1,178 @@
 
+// DEFINE GLOBAL VARIABLES
 
 var hashOptions;
 hashOptions = window.location.hash.replace('#filters', '')
 var is_chrome = /chrome/i.test( navigator.userAgent );
 var slideLock = false;
-
-
 var isMobile = {
-    Android: function() {
-        return navigator.userAgent.match(/Android/i);
-    },
-    BlackBerry: function() {
-        return navigator.userAgent.match(/BlackBerry/i);
-    },
-    iOS: function() {
-        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
-    },
-    Opera: function() {
-        return navigator.userAgent.match(/Opera Mini/i);
-    },
-    Windows: function() {
-        return navigator.userAgent.match(/IEMobile/i);
-    },
-    any: function() {
-        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
-    }
+  Android: function() {
+    return navigator.userAgent.match(/Android/i);
+  },
+  BlackBerry: function() {
+    return navigator.userAgent.match(/BlackBerry/i);
+  },
+  iOS: function() {
+    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
+  },
+  Opera: function() {
+    return navigator.userAgent.match(/Opera Mini/i);
+  },
+  Windows: function() {
+    return navigator.userAgent.match(/IEMobile/i);
+  },
+  any: function() {
+    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
+  }
 };
 
-function windowHeightDivs(){
+// DEFINE FUNCTIONS
 
-	if(!isMobile.any()){
-		$("#logoWrap").css({"margin-top":$(window).height()-$("#logoWrap").outerHeight()-10+"px"})
-	}
-	$(".zwartArea").css({
-		"min-height": $(window).height()+"px"
-	})
-
-	$(".isotope").css({
-		"min-height": $(window).height()+200+"px"
-	})
+function windowHeightDivs(){
+  if(!isMobile.any()){
+    $("#logoWrap").css({"margin-top":$(window).height()-$("#logoWrap").outerHeight()-10+"px"})
+  }
+  $(".zwartArea").css({
+    "min-height": $(window).height()+75+"px"
+  })
+
+  $(".isotope").css({
+    "min-height": $(window).height()+200+"px"
+  })
 }
 
-
 function stickyElements(){
-	$('#filter').fixedsticky();
+  $('#filter').fixedsticky();
 }
 
-
 function initIsotope(){
   var $container = $('.isotope').isotope({
     masonry: {
-		columnWidth: '.grid-sizer'
+      columnWidth: '.grid-sizer'
     },
     transitionDuration: '0.2s',
-    filter: hashOptions,	
-
-
+    filter: hashOptions,    
   });
   
 }
 
-// function sidebarOn(){
-// 	if($(window).width()>768){
-// 		// $("#sidebarInner").slideDown(400)
-// 		// $("#sidebar").addClass("sidebarBorder");
-// 		// alert('slideDown')
-// 		// $('#filter').fixedsticky();
-// 	}
-// }
-
 function sidebarOff(){
-	if($(window).width()>768){
-		$(".closeSidebar").css('display','none')
-		// if($(document).scrollTop()>$('#zwartIntro').height()-1 && $(document).scrollTop()<$("#section03").offset().top){
-			$("#sidebarInner").slideDown(0)
-		// }
-	} else {
-		$(".closeSidebar").css('display','block')
-	}
+  if($(window).width()>768){
+    $(".closeSidebar").css('display','none')
+    if($(document).scrollTop()>$('#zwartIntro').height()-1 && $(document).scrollTop()<$("#section03").offset().top){
+      $("#sidebarInner").slideDown(0)
+    }
+  } else {
+    if(slideLock == false){
+      $("#sidebarInner").slideUp(0)
+    }
+    $(".closeSidebar").css('display','block')
+  }
 }
 
 function ifSticky(){
-	if (!$("#filter").hasClass('fixedsticky-on')){
-
-		if($(document).scrollTop()>$('#zwartIntro').height()-1 && $(document).scrollTop()<$("#section03").offset().top){
-
-			if(is_chrome){$('#filter').css({'position':'fixed'})}
-			if($(window).width()<768){
-				$(".closeSidebar").css('display','block')
-			if(slideLock == false){
-				$("#sidebarInner").slideDown(0)
-			}
-			}else{
-				$("#sidebarInner").slideDown(200)
-			}
-			
-			
-		} else{
-			if(is_chrome){$('#filter').css({'position':''})}
-			if($(window).width()<768){	
-				$(".closeSidebar").css('display','none')
-
-			if(slideLock == false){
-				$("#sidebarInner").slideUp(0)
-			}
-				
-			}else{
-				$("#sidebarInner").slideUp(200)
-			}
-		}	
-	}
-
+  if (!$("#filter").hasClass('fixedsticky-on')){
+    if($(document).scrollTop()>$('#zwartIntro').height()-1 && $(document).scrollTop()<$("#section03").offset().top){
+      if(is_chrome){$('#filter').css({'position':'fixed'})}
+      if($(window).width()<768){
+          $(".closeSidebar").css('display','block')
+      if(slideLock == false){
+        // $("#sidebarInner").slideDown(0)
+      }
+      }else{
+        $("#sidebarInner").slideDown(200)
+      } 
+    }else{
+      if(is_chrome){$('#filter').css({'position':''})}
+      if($(window).width()<768){  
+        $(".closeSidebar").css('display','none')
+        if(slideLock == false){
+          $("#sidebarInner").slideUp(0)
+        }
+      }else{
+        $("#sidebarInner").slideUp(200)
+      }
+    }   
+  }
 }
 
 $(".closeSidebar").click(function(){
     $("#sidebarInner").slideToggle()
-
     if(slideLock == false){
         slideLock = true
-        $(".closeSidebar").html('<img src="./arrowUpW.svg"/>')
+        $(".closeSidebar").html('<img src="./img/arrowDown.svg"/>')
     }else{
         slideLock = false
-        $(".closeSidebar").html('<img src="./arrowDownW.svg"/>')
+        $(".closeSidebar").html('<img src="./img/arrowUp.svg"/>')
     }
-    
 });
 
-
-function toggleDescInner(){	
-	$("#sideBarDescInnerToggle").on('click', function(){
-		$("#sideBarDescInner").slideToggle()
-	})
+function toggleDescInner(){ 
+    $("#sideBarDescInnerToggle").on('click', function(){
+        $("#sideBarDescInner").slideToggle()
+    })
 }
 
 function initUnderlineFilters(){
-	startfilter = window.location.hash.replace('#filters', '')
-	startfilterArray = startfilter.split(".")
-	startfilterArray.shift()
-
-	startfilterArray.forEach(function(afilter) {
-		$('input.'+afilter+'').next("p").toggleClass("underlineFilter")
-		moveToSide = $('input.'+afilter+'').next("p").outerWidth()
-		$('input.'+afilter+'').parent().next('label').css({"margin-left":moveToSide+"px"})
-		$('input.'+afilter+'').prop('checked', $(this).is(':checked'));
-		$('input.'+afilter+'').prop( "checked", true )
-
-		$("#sideBarDesc").find($("."+afilter)).prependTo("#sideBarDescInner").slideDown(50)
-
-	});
+    startfilter = window.location.hash.replace('#filters', '')
+    startfilterArray = startfilter.split(".")
+    startfilterArray.shift()
+    startfilterArray.forEach(function(afilter) {
+        $('input.'+afilter+'').next("p").toggleClass("underlineFilter")
+        moveToSide = $('input.'+afilter+'').next("p").outerWidth()
+        $('input.'+afilter+'').parent().next('label').css({"margin-left":moveToSide+"px"})
+        $('input.'+afilter+'').prop('checked', $(this).is(':checked'));
+        $('input.'+afilter+'').prop( "checked", true )
+        $("#sideBarDesc").find($("."+afilter)).prependTo("#sideBarDescInner").slideDown(50)
+    });
 }
 
-
-
 function filterByInput(){
-    var $checkboxes = $('.themes input');
-        
-      $checkboxes.change( function() {
-      	$(document).scrollTop($('#section02').offset().top);
-      	$("#sidebarInner").slideDown(400)
-      	// $('#pageWrap').scrollTop($("#filter").outerHeight()+$('#pageWrap').scrollTop()+$('#section02').offset().top);
-      	// $(document).scrollTop($(document).scrollTop()+$('#section02').offset().top);
-		// setTimeout(function(){
-	 //      	if($("#filter:visible").hasClass('fixedBar')){
-		// 		$("#sideBarDesc").slideDown(400)
-		// 	}
-		// }, 300);
-$('body').css({"opacity":'0'})
-
-		var thisSaved = $(this)
-		function layoutComplete(par01){
-		$('input.'+par01.attr("class")+'').next("p").toggleClass("underlineFilter")
-		$('input.'+par01.attr("class")+'').prop('checked', par01.is(':checked'));
-
-		if ($('input.'+par01.attr("class")+'').next("p").hasClass("underlineFilter")){
-			moveToSide = $('input.'+par01.attr("class")+'').next("p").outerWidth()
-			foundClass=par01.attr("class")
-			$("#sideBarDesc").find($("."+foundClass)).prependTo("#sideBarDescInner").slideDown(50)
-
-		}else{
-			moveToSide = 0
-			foundClass=par01.attr("class")
-			$("#sideBarDesc").find($("."+foundClass)).slideUp(50)
-		}
-		$('input.'+par01.attr("class")+'').parent().next('label').css({"margin-left":moveToSide+"px"})
-
-		
-		$('body').css({"opacity":'1'})
-		}
-
-		// $('input.'+$(this).attr("class")+'').next("p").toggleClass("underlineFilter")
-		// $('input.'+$(this).attr("class")+'').prop('checked', $(this).is(':checked'));
-
-
-		var checkboxesCheck = $('.themes input:checked');
-		var exclusives = [];
-		$checkboxes.each( function( i, elem ) {
-		if ( elem.checked ) {
-		  exclusives.push( elem.value );
-		}
-		});
-		exclusives = exclusives.join('');
-
-		var filterValue;
-		filterValue = exclusives;
-		location.hash = '#filters'+filterValue
-		hashOptions = window.location.hash.replace('#filters', '')
-
-		$container = $('.isotope').isotope({
-			filter: hashOptions
-		})
-
-		$container.on('layoutComplete', layoutComplete(thisSaved))
-
-    });		
+  var $checkboxes = $('.themes input');
+  $checkboxes.change( function() {
+    $(document).scrollTop($('#section02').offset().top);
+    $("#sidebarInner").slideDown(400)
+    $('body').css({"opacity":'0'})
+    var thisSaved = $(this)
+    function layoutComplete(par01){
+    $('input.'+par01.attr("class")+'').next("p").toggleClass("underlineFilter")
+    $('input.'+par01.attr("class")+'').prop('checked', par01.is(':checked'));
+    if ($('input.'+par01.attr("class")+'').next("p").hasClass("underlineFilter")){
+        moveToSide = $('input.'+par01.attr("class")+'').next("p").outerWidth()
+        foundClass=par01.attr("class")
+        $("#sideBarDesc").find($("."+foundClass)).prependTo("#sideBarDescInner").slideDown(50)
+    }else{
+        moveToSide = 0
+        foundClass=par01.attr("class")
+        $("#sideBarDesc").find($("."+foundClass)).slideUp(50)
+    }
+    $('input.'+par01.attr("class")+'').parent().next('label').css({"margin-left":moveToSide+"px"})
+    $('body').css({"opacity":'1'})
+    }
+    var checkboxesCheck = $('.themes input:checked');
+    var exclusives = [];
+    $checkboxes.each( function( i, elem ) {
+    if ( elem.checked ) {
+      exclusives.push( elem.value );
+    }
+    });
+    exclusives = exclusives.join('');
+    var filterValue;
+    filterValue = exclusives;
+    location.hash = '#filters'+filterValue
+    hashOptions = window.location.hash.replace('#filters', '')
+    $container = $('.isotope').isotope({
+        filter: hashOptions
+    })
+    $container.on('layoutComplete', layoutComplete(thisSaved))
+  });     
 }
 
-
 // RUN THE FUNCTIONS
 
 windowHeightDivs()
 initIsotope()
 stickyElements()
-// initUnderlineFilters()
-// filterByInput()
 toggleDescInner()
 sidebarOff()
 
@@ -231,6 +181,6 @@ document.onscroll = function() {
 };
 
 $( window ).resize(function() {
-	windowHeightDivs()
-	sidebarOff()
+    windowHeightDivs()
+    sidebarOff()
 })
diff --git a/web/page-template.html b/web/page-template.html
index 991fcc6..1ceff64 100644
--- a/web/page-template.html
+++ b/web/page-template.html
@@ -17,7 +17,7 @@
             <div id="sidebarInner">
                 <div id="sideBarDesc">
                     <div id="sideBarDescInfo">
-                        <p>Tempted by Tomorrow</p>
+                        <a href="index.html" class="hoverBackA"><img src="./img/arrowBack.svg"></a><p>Tempted by Tomorrow</p>
                     </div>
 
                     <div id="sideBarDescInner">
@@ -48,7 +48,7 @@
         <div class="zwartArea zwartAreaWhite sidebarBorderLeft" id="section02">
             <div class="fixedsticky" id="filter" style="top:0;">
               <div class="themes" id="sortArea">
-		<p>{title}</p>
+		<a href="index.html" class="hoverBackB"><img src="./img/arrowBack.svg"></a><p>{title}</p><img src="./img/arrowUpW.svg"/></a>
                     <!--p>PZI: Master Media Design & Communication </p--> <a class="closeSidebar"><img src="./arrowUpW.svg"></a>
                 </div>
             </div>
@@ -70,6 +70,7 @@
     <script src='./js/fixedsticky.js'></script> 
     <script src='./js/isotope.pkgd.min.js'></script> 
     <script src='./js/imagesloaded.pkgd.min.js'></script> 
-    <script src='./js/mainScripts.js'></script>
+    <script src='./js/mainScripts_single.js'></script>
+
 </body>
 </html>