Switched background image SVGs into regular images, made logo go over the top of the menu on mobile.

public/styles/components/_image-section.scss

@@ -5,10 +5,9 @@
  *  Dependencies:
  *
  *  Version:
- *    1.0.0 - 2018/05/11
+ *    1.1.0 - 2018/08/14
  */
 .c-image-section {
-  position: relative;
 
   &__image {
     display: block;
@@ -16,6 +15,8 @@
   }
 
   &.is-full {
+    position: relative;
+    
     .c-image-section__image {
       @include t-absolute-fill();
       object-fit: cover;
@@ -32,4 +33,28 @@
       width: 100%;
     }
   }
+
+  //Background Image
+  &.is-background {
+    position: relative;
+
+    .c-image-section {
+      &__image {
+        @include t-absolute-fill();
+        object-fit: cover;
+        object-position: bottom center;
+      }
+
+      &__content {
+        position: relative;
+
+        &-inner {
+          position: relative;
+          height: 100%;
+          width: 100%;
+        }
+      }
+    }
+  }
+
 }

public/styles/components/_navbar.scss

@@ -10,7 +10,7 @@
  *    styles/tool/list.scss
  *
  *  Version:
- *    1.0.0 - 2018/05/03
+ *    1.1.0 - 2018/08/14
  */
 $c-navbar--link-thickness: 5px;
 
@@ -40,6 +40,9 @@ $c-navbar--link-thickness: 5px;
   }
 
   &__logo {
+    //To Allow the logo to go over the top of the menu!~
+    position: relative;
+    z-index: $s-z--logo;
     width: 7em;
   }
 

public/styles/objects/_loadable-image.scss

@@ -22,7 +22,6 @@
 }
 
 .o-loadable-image {
-  position: relative;
 
   &__image-container {
     opacity: 1;
@@ -31,6 +30,8 @@
   }
 
   &.is-loading {
+    position: relative;
+    
     @include t-animation-name(o-loadable-image--load-flash);
     @include t-animation-timing-function(linear);
     @include t-animation-duration(2s);

public/styles/pages/_home-page.scss

@@ -8,9 +8,14 @@
  *    styles/tools/_responsive.scss
  *
  *  Version:
- *    1.0.0 - 2018/06/06
+ *    1.1.0 - 2018/08/14
  */
 .p-home-page {
+  &__banner,
+  &__promo {
+    position: relative;
+    //@extend %t-dp--shadow-3d;
+  }
 
   &__promo {
     padding: 6em 0;
@@ -18,22 +23,6 @@
 
     &-video {
       background-image: url('./../images/patterns/florida.svg');
-      @extend %t-dp--shadow-3d;
-    }
-
-    &-programming {
-      background-image: url('./../images/patterns/rhythm-heaven.svg');
-      @extend %t-dp--shadow-3d;
-    }
-
-    &-platforms {
-      background-image: url('./../images/patterns/game-show.svg');
-      @extend %t-dp--shadow-3d;
-    }
-
-    &-work {
-      background-image: url('./../images/patterns/arcade.svg');
-      @extend %t-dp--shadow-3d;
     }
   }
 

public/styles/settings/z.scss

@@ -10,5 +10,6 @@ $s-z--background: -1;   //Background Element
 $s-z--navbar: 10;       //Navbar
 $s-z--menu: 15;         //Hamburger Menu
 $s-z--menu-button: 16;  //Button to toggle menu.
+$s-z--logo: 16;         //Logo (Goes over top of menu)
 $s-z--modal: 100;       //Modals
 $s-z--transition: 1;    //The Z-Index of an element in transition