diff --git a/app/styles/css/main.css b/app/styles/css/main.css
diff --git a/app/styles/scss/_base.scss b/app/styles/scss/_base.scss
@@ -66,4 +66,20 @@ a {
     color: $white;
     border-color: $white;
   }
+}
+
+.weather-info {
+  position: absolute;
+  right: 2em;
+  top: 0;
+  z-index: 1000;
+}
+
+.weather-info h1, .weather-info h2 {
+    text-align: right;
+    font-size: 4em;
+}
+.weatherIcon {
+  display: block;
+  text-align: right;
 }
diff --git a/app/styles/scss/_clouds.scss b/app/styles/scss/_clouds.scss
@@ -7,7 +7,7 @@
 
 #clouds{
     position: absolute;
-    padding: 100px 0;
+    padding: 0;
     // background: #c9dbe9;
     // background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
     // background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
@@ -16,38 +16,40 @@
 
 /*Time to finalise the cloud shape*/
 .cloud {
-    width: 200px; height: 60px;
-    background: #fff;
+    width: 400px; height: 250px;
+    // background: #fff;
+    background-image: url('../../images/cloud.png');
+    background-size: 100%;
 
-    box-shadow: 0 0 50px rgba($white, 100%);
+    // box-shadow: 0 0 50px rgba($white, 100%);
 
-    border-radius: 200px;
-    -moz-border-radius: 200px;
-    -webkit-border-radius: 200px;
+    // border-radius: 200px;
+    // -moz-border-radius: 200px;
+    // -webkit-border-radius: 200px;
 
-    position: relative; 
+    position: absolute; 
 }
 
-.cloud:before, .cloud:after {
-    content: '';
-    position: absolute; 
-    background: #fff;
-    width: 100px; height: 80px;
-    position: absolute; top: -15px; left: 10px;
+// .cloud:before, .cloud:after {
+//     content: '';
+//     position: absolute; 
+//     background: #fff;
+//     width: 100px; height: 80px;
+//     position: absolute; top: -15px; left: 10px;
 
-    border-radius: 100px;
-    -moz-border-radius: 100px;
-    -webkit-border-radius: 100px;
+//     border-radius: 100px;
+//     -moz-border-radius: 100px;
+//     -webkit-border-radius: 100px;
 
-    -webkit-transform: rotate(30deg);
-    transform: rotate(30deg);
-    -moz-transform: rotate(30deg);
-}
+//     -webkit-transform: rotate(30deg);
+//     transform: rotate(30deg);
+//     -moz-transform: rotate(30deg);
+// }
 
-.cloud:after {
-    width: 120px; height: 120px;
-    top: -55px; left: auto; right: 15px;
-}
+// .cloud:after {
+//     width: 120px; height: 120px;
+//     top: -55px; left: auto; right: 15px;
+// }
 
 /*Time to animate*/
 .x1 {

diff --git a/app/styles/scss/_painting.scss b/app/styles/scss/_painting.scss
@@ -1,24 +1,39 @@
 .painting {
   position: relative;
   width: 1024px;
+  height: 1240px;
   margin: 0 auto;
   text-align: center;
   overflow: hidden;
 
   .inactive {
     display: none;
   }
-  
+
   img {
     width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
     z-index: -1;
+    opacity: 1;
+    // transition: opacity 6s;
+
+    .special {
+      // z-index: -9999;
+    }
+    &.faded {
+      opacity: 0;
+      transition: opacity 6s;
+    }
   }
   .eye {
     position: absolute;
     background-color: $black;
     width: 10px;
     height: 10px;
     border-radius: 50%;
+    z-index: 0;
   }
   .woman {
     width: 80px;

diff --git a/app/styles/scss/_rain.scss b/app/styles/scss/_rain.scss
@@ -22,4 +22,24 @@
 }
 @-moz-keyframes fall {
   to {margin-top:900px;}
-}
+}
+
+
+
+// SNOW
+
+.snowflake {
+  // @include linearGradient(rgba(13,52,58,1),rgba(255,255,255,0.6) );
+  // background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
+  // background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
+  background-color: $white;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  position: absolute;
+  bottom:200px;
+  opacity: 0;
+  -webkit-animation: fall 8s linear infinite;
+  -moz-animation: fall 8s linear infinite;
+
+}
diff --git a/app/styles/scss/_sun.scss b/app/styles/scss/_sun.scss
@@ -1,89 +1,203 @@
-.sun {
-  position: absolute;
-  top: -15%;
-  left: -10%;
-  display: block;
-  width: 400px;
-  height: 400px;
-  border-radius: 50%;
-  background-color: $yellow; 
-  box-shadow: 0 0 50px $yellow;
-
-  .ray {
-    width: 5px;
-    height: 200px;
-    background-color: $yellow;
-    box-shadow: 0 0 5px $yellow;
-    border-radius: 10px;
-    display: block;
-    position: absolute;
-
-    &.r1 {
-      top: 95%;
-      left: 30%;
-      animation: sunBeamsOne 2s linear infinite;
-    }
-    &.r2 {
-      top: 95%;
-      left: 65%;
-      transform: rotate(-15deg);
-      animation: sunBeamsTwo 3s linear infinite;
-    }
-    &.r3 {
-      top: 80%;
-      right: 0px;
-      transform: rotate(-45deg);
-      animation: sunBeamsThree 2s linear infinite;
-    }
-    &.r4 {
-      top: 50%;
-      right: -10%;
-      transform: rotate(-65deg);
-      animation: sunBeamsFour 4s linear infinite;
-    }
-    &.r5 {
-      top: 25%;
-      left: 110%;
-      transform: rotate(-90deg);
-      animation: sunBeamsFive 3s linear infinite;
-    }
-  }
-}
+// .sun {
+//   position: absolute;
+//   top: -15%;
+//   left: -10%;
+//   display: block;
+//   width: 400px;
+//   height: 400px;
+//   border-radius: 50%;
+//   background: radial-gradient(ellipse at center, #f90 0%,#fc0 60%,#ff0 100%);
+//   box-shadow: 0 0 50px $yellow;
+
+//   .ray {
+//     width: 5px;
+//     height: 200px;
+//     background: radial-gradient(ellipse at center, #f90 0%,#fc0 60%,#ff0 100%);
+//     box-shadow: 0 0 5px $yellow;
+//     border-radius: 10px;
+//     display: block;
+//     position: absolute;
+
+//     &.r1 {
+//       top: 95%;
+//       left: 30%;
+//       animation: sunBeamsOne 2s linear infinite;
+//     }
+//     &.r2 {
+//       top: 95%;
+//       left: 65%;
+//       transform: rotate(-15deg);
+//       animation: sunBeamsTwo 3s linear infinite;
+//     }
+//     &.r3 {
+//       top: 80%;
+//       right: 0px;
+//       transform: rotate(-45deg);
+//       animation: sunBeamsThree 2s linear infinite;
+//     }
+//     &.r4 {
+//       top: 50%;
+//       right: -10%;
+//       transform: rotate(-65deg);
+//       animation: sunBeamsFour 4s linear infinite;
+//     }
+//     &.r5 {
+//       top: 25%;
+//       left: 110%;
+//       transform: rotate(-90deg);
+//       animation: sunBeamsFive 3s linear infinite;
+//     }
+//   }
+// }
+
+
+
+// @keyframes sunBeamsOne {
+//     0% { transform: translateY(3%); }
+//     25% { transform: translateY(0); }
+//     75% { transform: translateY(-3%); }
+//     100% { transform: translateY(0); }
+// }
+
+
+// @keyframes sunBeamsTwo {
+//     0% { transform: rotate(-15deg) translateY(5%); }
+//     25% { transform: rotate(-15deg) translateY(0); }
+//     75% { transform: rotate(-15deg) translateY(-5%); }
+//     100% { transform: rotate(-15deg) translateY(0); }
+// }
+
+// @keyframes sunBeamsThree {
+//     0% { transform: rotate(-45deg) translateY(3%); }
+//     25% { transform: rotate(-45deg) translateY(0); }
+//     75% { transform: rotate(-45deg) translateY(-3%); }
+//     100% { transform: rotate(-45deg) translateY(0); }
+// }
+
+// @keyframes sunBeamsFour {
+//     0% { transform: rotate(-65deg) translateY(5%); }
+//     25% { transform: rotate(-65deg) translateY(0); }
+//     75% { transform: rotate(-65deg) translateY(-5%); }
+//     100% { transform: rotate(-65deg) translateY(0); }
+// }
+
+// @keyframes sunBeamsFive {
+//     0% { transform: rotate(-90deg) translateY(5%); }
+//     25% { transform: rotate(-90deg) translateY(0); }
+//     75% { transform: rotate(-90deg) translateY(-5%); }
+//     100% { transform: rotate(-90deg) translateY(0); }
+// }
 
 
 
-@keyframes sunBeamsOne {
-    0% { transform: translateY(3%); }
-    25% { transform: translateY(0); }
-    75% { transform: translateY(-3%); }
-    100% { transform: translateY(0); }
+.sun { 
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;  
+  background: radial-gradient(ellipse at center, #f90 0%,#fc0 60%,#ff0 100%);
+  opacity:1;      
+  box-shadow: 0 0 50px $yellow;  
+  z-index: 0;
 }
 
 
-@keyframes sunBeamsTwo {
-    0% { transform: rotate(-15deg) translateY(5%); }
-    25% { transform: rotate(-15deg) translateY(0); }
-    75% { transform: rotate(-15deg) translateY(-5%); }
-    100% { transform: rotate(-15deg) translateY(0); }
+.ray_box {
+  position: absolute;
+  top: 50px;
+  left:150px;
+  width:300px;  
+  transform-origin: center;
+  animation: ray_anim 120s linear infinite;
 }
+.ray {  
+    // background: $yellow;
+    background: linear-gradient(rgba($yellow, 80%), rgba($white, 0));
+    // background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
+    // background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
+    margin-left:10px;
+    border-radius:80% 80% 0 0;
+    position:absolute;
+    opacity:0.4;
 
-@keyframes sunBeamsThree {
-    0% { transform: rotate(-45deg) translateY(3%); }
-    25% { transform: rotate(-45deg) translateY(0); }
-    75% { transform: rotate(-45deg) translateY(-3%); }
-    100% { transform: rotate(-45deg) translateY(0); }
 }
 
-@keyframes sunBeamsFour {
-    0% { transform: rotate(-65deg) translateY(5%); }
-    25% { transform: rotate(-65deg) translateY(0); }
-    75% { transform: rotate(-65deg) translateY(-5%); }
-    100% { transform: rotate(-65deg) translateY(0); }
+.ray1 {    
+    height:370px;
+    width:30px;
+   -webkit-transform: rotate(180deg);
+    top:-200px;
+    left: 15px;
+}
+.ray2 {
+    height:300px;
+    width:8px;
+   -webkit-transform: rotate(220deg);
+    top:-90px;
+    left: 75px;
+}
+.ray3 {
+    height:370px;
+    width:50px;
+   -webkit-transform: rotate(250deg);
+    top:-80px;
+    left: 100px;
+}
+.ray4 {
+    height:320px;
+    width:14px;
+   -webkit-transform: rotate(305deg);
+    top:30px;
+    left: 100px;
+}
+.ray5 {
+    height:340px;
+    width:30px;
+   -webkit-transform: rotate(-15deg);
+    top:60px;
+    left: 40px;
 }
+.ray6 {
+    height:330px;
+    width:50px;
+   -webkit-transform: rotate(30deg);
+    top:60px;
+    left: -40px;
+}
+.ray7 {
+    height:380px;
+    width:10px;
+   -webkit-transform: rotate(70deg);
+    top:-35px;
+    left: -40px;
+}
+.ray8 {
+    height:320px;
+    width:30px;
+   -webkit-transform: rotate(100deg);
+    top:-45px;
+    left:-175px;
+}
+.ray9 {
+    height:330px;
+    width:10px;
+   -webkit-transform: rotate(120deg);
+    top:-123px;
+    left:-140px;
+}
+.ray10 {
+    height:390px;
+    width:23px;
+   -webkit-transform: rotate(150deg);
+    top:-185px;
+    left: -60px;
+}
+
 
-@keyframes sunBeamsFive {
-    0% { transform: rotate(-90deg) translateY(5%); }
-    25% { transform: rotate(-90deg) translateY(0); }
-    75% { transform: rotate(-90deg) translateY(-5%); }
-    100% { transform: rotate(-90deg) translateY(0); }
+@-webkit-keyframes ray_anim { 
+    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}    
+    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
 }