Revert "Revert to previous design"

This reverts commit b667c23.

css/mainsection.css

@@ -0,0 +1,69 @@
+@import url('https://fonts.googleapis.com/css?family=Rakkas');
+
+@media (max-width: 767px){
+  #pixiCanvas{
+    display: none;
+  }
+  #imgheader{
+    display: auto;
+  }
+}
+@media (min-width: 767px){
+  #imgheader{
+    display: none;
+  }
+}
+#pixiCanvas{
+  position:auto;
+}
+.title{
+  position:absolute;
+  left:50%;
+  top:50%;
+  text-align:center;
+  transform:translate(-50%, -50%);
+  color:white;
+  font-size:5em;
+}
+.title{
+  position:absolute;
+  left:50%;
+  top:50%;
+  text-align:center;
+  transform:translate(-50%, -50%);
+  color:#DBAB4C;
+  font-size:4em;
+}
+
+.paragraph{
+  position:absolute;
+  left:50%;
+  top:70%;
+  text-align:center;
+  transform:translate(-50%, -50%);
+  color:white;
+  font-size:1em;
+}
+
+
+#credits{
+  position:absolute;
+  width:100%;
+  margin: auto;
+  bottom:0;
+  margin-bottom:12px;
+  font-family:'Rakkas', sans-serif;
+  letter-spacing:0.1rem;
+  color:#777;
+  font-size:0.7em;
+  text-transform: uppercase;
+  text-align : center;
+}
+#credits a {
+  color:#777;
+  text-decoration:none;
+}
+
+#credits a:hover {
+  color:#DBAB4C;
+}

css/new-age.css

@@ -175,7 +175,8 @@ header {
   position: relative;
   width: 100%;
   overflow-y: hidden;
-  background-color: #220B0D;
+  /*background-color: #220B0D;*/
+  background-image: url("../images/bg.png");
   /*background: url("../images/bg-pattern.png"), #943A24;*/
   /*!* fallback for old browsers *!*/
   /*background: url("../images/bg-pattern.png"), -webkit-linear-gradient(to left, #F9AD36, #943A24);*/
@@ -551,7 +552,7 @@ body {
 }
 
 #about {
-  background-color: #220B0D;
+  background-color: #1b2a2b;
   color: #F4C976;
   padding: 1em;
   padding-bottom:3em;
@@ -582,33 +583,39 @@ body {
     height: 100vh;
   }
   #hero {
-      background-image: url("../images/mobile_images/miniscreen.png");
+        background-image: url("../images/bg.png");
       background-position: bottom;
-      background-repeat: no-repeat;
+
       background-color: #FAAE17;
   }
   .layer-01 {
-    background-image: url("../images/mobile_images/miniscreen.png");
+      background-image: url("../images/bg.png");
     height: 100vh;
     display:none;
     /*background-color: #ffaf1b;*/
   }
   .layer-02 {
+      background-image: url("../images/bg.png");
       display:none;
   }
   .layer-03 {
+      background-image: url("../images/bg.png");
       display:none;
   }
   .layer-04 {
+      background-image: url("../images/bg.png");
       display:none;
   }
   .layer-05 {
+      background-image: url("../images/bg.png");
       display:none;
   }
   .layer-06 {
+    background-image: url("../images/bg.png");
       display:none;
   }
   .layer-07 {
+      background-image: url("../images/bg.png");
       display:none;
   }
 }
@@ -643,7 +650,7 @@ body {
       position: static !important;
   }
   .layer-01 {
-    background-image: url("../images/smallscreen_images/smallscreen6.png");
+      background-image: url("../images/bg.png");
     background-width: 100%;
     -webkit-background-size: cover;
     -moz-background-size: cover;
@@ -653,43 +660,43 @@ body {
 
   }
   .layer-02 {
-    background-image: url("../images/smallscreen_images/smallscreen5.png");
+      background-image: url("../images/bg.png");
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
   }
   .layer-03 {
-    background-image: url("../images/smallscreen_images/smallscreen4.png");
+      background-image: url("../images/bg.png");
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
   }
   .layer-04 {
-    background-image: url("../images/smallscreen_images/smallscreen3.png");
+      background-image: url("../images/bg.png");
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
   }
   .layer-05 {
-    background-image: url("../images/smallscreen_images/smallscreen2.png");
+      background-image: url("../images/bg.png");
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
   }
   .layer-06 {
-    background-image: url("../images/smallscreen_images/smallscreen1.png");
+      background-image: url("../images/bg.png");
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     padding-top:138em;
   }
   .layer-07 {
-    background-image: url("../images/smallscreen_images/smallscreenbackground.png");
+      background-image: url("../images/bg.png");
     width: 100%;
     -webkit-background-size: cover;
     -moz-background-size: cover;
@@ -949,4 +956,4 @@ body {
   filter: grayscale(100%);
   -webkit-filter: grayscale(100%);
   -mozfilter: grayscale(100%);
-}
+}