automated maps and overlays in js

css/dist/main.css

@@ -18,12 +18,29 @@ html, body {
     float: right;
     background-position: left; }
   #main .page {
-    background-color: green;
+    position: relative;
     width: 227.41mm;
     height: 207.26mm;
     background-repeat: no-repeat;
     background-size: contain; }
-    #main .page .inner {
+    #main .page .overlay {
+      position: relative;
       width: 100%;
       height: 100%;
-      border: 1px solid blue; }
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      z-index: 1; }
+    #main .page .maps {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2; }
+      #main .page .maps .map {
+        position: absolute;
+        background-color: rgba(50, 50, 50, 0.8);
+        cursor: pointer; }
+    #main .page.page-6 .overlay {
+      background-image: url("../../images/vectos/04_chance-RB.svg"); }

css/main.scss

@@ -3,7 +3,7 @@ html,body{
   background-color: #1A1A1A;
 }
 
-$debug:true;
+$debug:false;
 $pw:227.41mm;
 $ph:207.26mm;
 $mt:1cm;
@@ -33,6 +33,7 @@ $mi:1cm;
     background-position: left;
   }
   .page{
+    position: relative;
     @if $debug {
       background-color: green;
     }
@@ -42,13 +43,38 @@ $mi:1cm;
     background-repeat: no-repeat;
     background-size: contain;
 
-    .inner{
-      // display:none;
+    .overlay{
+      position: relative;
       width:100%; height:100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      z-index: 1;
+
       @if $debug {
         border: 1px solid blue;
       }
+
+      // img{max-width: 100%;}
+    }
+
+    .maps{
+      position:absolute;
+      top:0; left:0;
+      width:100%; height:100%;
+      z-index: 2;
+      .map{
+        position: absolute;
+        background-color: rgba(50, 50, 50, 0.8);
+        cursor: pointer;
+      }
+    }
+
+    &.page-6 .overlay{
+      background-image: url("../../images/vectos/04_chance-RB.svg")
     }
   }
 
+
+
 }