diff --git a/tree/imgs/.DS_Store b/tree/imgs/.DS_Store
index 70c1cbb..399346c 100644
Binary files a/tree/imgs/.DS_Store and b/tree/imgs/.DS_Store differ
diff --git a/tree/imgs/river_bank/.DS_Store b/tree/imgs/river_bank/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/tree/imgs/river_bank/.DS_Store differ
diff --git a/tree/imgs/river_bank/army1.gif b/tree/imgs/river_bank/army1.gif
new file mode 100644
index 0000000..1dcfd27
Binary files /dev/null and b/tree/imgs/river_bank/army1.gif differ
diff --git a/tree/imgs/river_bank/boat.png b/tree/imgs/river_bank/boat.png
new file mode 100644
index 0000000..3c38669
Binary files /dev/null and b/tree/imgs/river_bank/boat.png differ
diff --git a/tree/imgs/river_bank/boat3.gif b/tree/imgs/river_bank/boat3.gif
new file mode 100644
index 0000000..3b4d0a0
Binary files /dev/null and b/tree/imgs/river_bank/boat3.gif differ
diff --git a/tree/imgs/river_bank/boat_empty.gif b/tree/imgs/river_bank/boat_empty.gif
new file mode 100644
index 0000000..99e7469
Binary files /dev/null and b/tree/imgs/river_bank/boat_empty.gif differ
diff --git a/tree/imgs/river_bank/boat_people.gif b/tree/imgs/river_bank/boat_people.gif
new file mode 100644
index 0000000..f337cf9
Binary files /dev/null and b/tree/imgs/river_bank/boat_people.gif differ
diff --git a/tree/imgs/river_bank/boat_people2.gif b/tree/imgs/river_bank/boat_people2.gif
new file mode 100644
index 0000000..07c150c
Binary files /dev/null and b/tree/imgs/river_bank/boat_people2.gif differ
diff --git a/tree/imgs/river_bank/house1.gif b/tree/imgs/river_bank/house1.gif
new file mode 100644
index 0000000..5663486
Binary files /dev/null and b/tree/imgs/river_bank/house1.gif differ
diff --git a/tree/imgs/river_bank/house2.gif b/tree/imgs/river_bank/house2.gif
new file mode 100644
index 0000000..a1ed601
Binary files /dev/null and b/tree/imgs/river_bank/house2.gif differ
diff --git a/tree/imgs/river_bank/house3.gif b/tree/imgs/river_bank/house3.gif
new file mode 100644
index 0000000..7eb8e6b
Binary files /dev/null and b/tree/imgs/river_bank/house3.gif differ
diff --git a/tree/imgs/river_bank/house4.gif b/tree/imgs/river_bank/house4.gif
new file mode 100644
index 0000000..154c128
Binary files /dev/null and b/tree/imgs/river_bank/house4.gif differ
diff --git a/tree/imgs/river_bank/house5.gif b/tree/imgs/river_bank/house5.gif
new file mode 100644
index 0000000..12ac2f2
Binary files /dev/null and b/tree/imgs/river_bank/house5.gif differ
diff --git a/tree/imgs/river_bank/sailor1.gif b/tree/imgs/river_bank/sailor1.gif
new file mode 100644
index 0000000..baffbc5
Binary files /dev/null and b/tree/imgs/river_bank/sailor1.gif differ
diff --git a/tree/imgs/river_bank/sailor2.gif b/tree/imgs/river_bank/sailor2.gif
new file mode 100644
index 0000000..8a9ce42
Binary files /dev/null and b/tree/imgs/river_bank/sailor2.gif differ
diff --git a/tree/imgs/river_bank/water.png b/tree/imgs/river_bank/water.png
new file mode 100644
index 0000000..b272365
Binary files /dev/null and b/tree/imgs/river_bank/water.png differ
diff --git a/tree/imgs/river_bank/water_5.gif b/tree/imgs/river_bank/water_5.gif
new file mode 100644
index 0000000..44cc747
Binary files /dev/null and b/tree/imgs/river_bank/water_5.gif differ
diff --git a/tree/river_bank.css b/tree/river_bank.css
new file mode 100644
index 0000000..1449a56
--- /dev/null
+++ b/tree/river_bank.css
@@ -0,0 +1,199 @@
+
+
+
+@font-face {
+    font-family: sinistre;
+    src: url(fonts/Sinistre-S†Caroline.woff),
+    url(fonts/Sinistre-S†Caroline.otf);
+}
+@font-face {
+    font-family: jolybolditalic;
+    src: url(fonts/JolyDisplay-BoldDisplayItalic.woff),
+    url(fonts/JolyDisplay-BoldDisplayItalic.otf);
+}
+
+@font-face {
+    font-family: jolyregularitalic;
+    src: url(fonts/JolyDisplay-RegularDisplayItalic.woff),
+    url(fonts/JolyDisplay-RegularDisplayItalic.otf);
+}
+@font-face {
+    font-family: jolyregular;
+    src: url(fonts/JolyDisplay-RegularDisplay.woff),
+    url(fonts/JolyDisplay-RegularDisplay.otf);
+}
+
+@font-face {
+    font-family: jolybold;
+    src: url(fonts/JolyDisplay-BoldDisplay.woff),
+    url(fonts/JolyDisplay-BoldDisplay.otf);
+}
+  
+  ::-moz-selection { /* Code for Firefox */   
+    background: transparent;
+  }
+  ::selection {
+    background: transparent;
+  }
+
+ body {
+     font-family: jolyregular;
+     font-size: 1.8vw;
+ }
+
+ #ground {
+    width: 120%;
+    height: 120%;
+    position:fixed;
+    margin:-100px;
+    background-color: white;
+    z-index:-10;
+}
+.ground_line{
+    position: fixed;
+    top: 130px;
+    bottom: 0px;
+    height: inherit;
+    width: 100%;
+    border-top: 0.1vw solid;
+    z-index: -1;
+}
+
+.instructions{
+    font-family:jolyregularitalic;
+
+ }
+    span.instructions_arrow{
+    padding-left:40px;
+    font-size: 2.4vw;
+    font-family:jolybolditalic;
+}
+
+div.text_container {
+    bottom: 40px;
+    left:40px;
+    right:40px;
+    position:fixed;
+    margin: auto; 
+    line-height: 1.4em;   
+
+}
+button{
+    -webkit-appearance: none;
+    background-color: white;
+    border: 0.11vw black solid;
+    border-radius: 25vw;
+    color:black;
+    cursor:pointer;
+    font-family: jolybolditalic;
+}
+
+button:hover{
+border: 0.11vw transparent solid;
+-webkit-box-shadow: 0px 0px 8px 2px  black;
+-moz-box-shadow: 0px 0px 8px 2px  black;
+box-shadow: 0px 0px 8px 2px  black;
+    
+}
+
+span.button_text{
+    font-size: 1.6vw;
+    padding: 8px;
+}
+
+#player_img {
+    top: 55%;
+    left: 38%;
+    position:absolute;
+}
+
+.invert{
+    filter: invert(100%);
+}
+
+/*images*/
+
+#river{
+    top:16%;
+    left: 0px;
+    max-width:100%;
+    height: inherit;
+    position:absolute;
+    z-index: 0;
+}
+
+.boat{
+    top:6%;
+    left: 0%;
+    position: absolute;
+    z-index: 1;
+}
+
+#army{
+    top:42%;
+    left: 8%;
+    position: absolute;
+    z-index: 3;
+}
+
+.sailor{
+    top:50%;
+    left: 48%;
+    position: absolute;
+    z-index: 3;
+}
+
+
+/*baloon*/
+
+.bubble {
+    top:45%;
+    left:40%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    text-align: center;
+    width: 40px;
+    height: 18px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index: 10;
+}
+.bubble:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-width: 20px 15px 0 0;
+    border-color: #ffffff transparent transparent transparent;
+    bottom: -20px;
+    left: 42%;
+    margin-left: -7.5px;
+}
+.bubble:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-width: 21px 16px 0 0;
+    border-color: #000000 transparent transparent transparent;
+    bottom: -22px;
+    left: 42%;
+    margin-left: -8.5px;
+    display: block;
+}
+
+
+
+
+
+
+
+
+  
diff --git a/tree/river_bank.html b/tree/river_bank.html
new file mode 100644
index 0000000..b0892f9
--- /dev/null
+++ b/tree/river_bank.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+      <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+    <title>river bank</title>
+    <link rel="icon" href="imgs/river_bank/water.png">
+    <link rel="stylesheet" href="river_bank.css">
+    
+</head>
+<body>
+    <div id="ground" class="invert"></div>
+   <!--<div class="ground_line invert"></div>-->
+
+<!--characters-->
+    <div id="player_img" class="moving_duo"></div>
+    <img id="army" class="moving_duo" src="imgs/river_bank/army1.gif" height="270px">
+    <div class="sailor"> 
+    <img id="sailor_good" src="imgs/river_bank/sailor1.gif" height="110px">
+    <img id="sailor_warrior" src="imgs/river_bank/sailor2.gif" height="110px" style="display: none;">
+    </div>
+
+    <img id="river" src="imgs/river_bank/water.png">
+    <div class="boat moving_duo"> 
+        <img id="boat_empty" src="imgs/river_bank/boat.png" width="440px" >
+        <img id="boat_full" src="imgs/river_bank/boat_people.gif" width="440px" style="display: none;">
+    </div>
+
+<!--baloons-->
+    <div class="bubble invert" style="display: none;">!!!</div>
+
+
+
+
+<!--bottom text-->
+    <div class="text_container invert"> 
+        <div class="message1">
+            You are now at the River Bank. According to the newspaper, this is where the school trip started. <br>
+            <span class="instructions"><span class="instructions_arrow">→</span> Click on the ferryman to persuade him to take you to the Spring River Park to liberate the children!</span>
+            </div>
+   </div>
+
+
+<script src="jquery.min.js"></script>
+  <script>
+
+// saves game step in the local storage 
+  window.onload = function() {
+      window.localStorage.setItem("river_bank","opened");
+      console.log ("river bank:",localStorage.river_bank);
+      $(".fighters").html("0");
+    }
+
+  //get player avatar from local storage
+    console.log (localStorage.myavatar)
+    var img = document.createElement("img");
+    img.src = localStorage.myavatar;
+    var player_img = document.querySelector("#player_img");
+    player_img.appendChild(img);
+    
+ 
+    
+ 
+ </script>
+
+<script type="text/javascript" src="index.js" ></script>
+
+    
+</body>
\ No newline at end of file
diff --git a/tree/square_satanism.html b/tree/square_satanism.html
index 96ede99..db97e8d 100644
--- a/tree/square_satanism.html
+++ b/tree/square_satanism.html
@@ -266,9 +266,10 @@
 
     function end_recluting() { 
         if (villagers == 9) {
-            $(".message1").hide();
-            $(".message2").show();  
+ 
             setTimeout ( function (){
+                $(".message1").hide();
+            $(".message2").show();  
                 $(".invert").addClass("invert_style");
                 $("#thunder1, #thunder2 ").show();  
                 check_flipping();