big refactoring

css/dist/main.css

@@ -4,20 +4,22 @@ html, body {
   background-color: #1A1A1A; }
 
 #root {
-  height: 207.26mm;
-  margin: 0 auto;
   position: relative;
-  width: 475.04741mm; }
+  width: 475.52246mm;
+  height: 237.26mm;
+  margin: 0 auto;
+  letter-spacing: -.25em; }
+  #root > * {
+    letter-spacing: normal; }
 
 #header {
-  display: absolute;
-  top: 0;
-  left: 0;
+  display: inline-block;
   width: 15mm;
-  height: 100%;
+  height: 207.26mm;
+  margin-right: 5mm;
   background-color: white; }
   #header h1 {
-    margin: 0;
+    margin: 0 0 15mm 0;
     padding: 0.3em;
     position: absolute;
     bottom: 0;
@@ -26,10 +28,9 @@ html, body {
     transform: rotate(270deg); }
 
 #main {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 455.04741mm; }
+  display: inline-block;
+  width: 455.04741mm;
+  overflow: hidden; }
   #main #page-left {
     float: left;
     background-position: right; }
@@ -61,57 +62,74 @@ html, body {
         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"); }
-  #main #navigation {
-    position: absolute;
-    z-index: 3;
-    bottom: 0;
-    width: 100%;
-    padding: 2mm 0;
-    background-color: rgba(26, 26, 26, 0.7);
-    overflow: hidden;
-    text-align: center;
-    opacity: 0;
-    transition: opacity .3s ease-in-out; }
-    #main #navigation:hover {
-      opacity: 1; }
-  #main #pagination {
-    color: #fff;
-    font-size: 1em;
-    padding: 0 0 2mm 0; }
-    #main #pagination div {
-      display: inline-block;
-      width: 49%; }
-      #main #pagination div.wrapper-l {
-        left: 0;
-        text-align: left; }
-      #main #pagination div.wrapper-r {
-        right: 0;
-        text-align: right; }
-      #main #pagination div span.l {
-        cursor: pointer;
-        line-height: -1; }
-  #main #railway ul {
-    padding: 1mm;
-    margin: 0; }
-    #main #railway ul li {
+
+#navigation {
+  width: 455.04741mm;
+  height: 30mm;
+  overflow: hidden;
+  margin: 0 0 0 20mm;
+  padding: 0;
+  background-color: rgba(26, 26, 26, 0.7);
+  text-align: center;
+  transition: opacity .3s ease-in-out; }
+
+#pagination {
+  color: #fff;
+  font-size: 1em;
+  padding: 1mm 0;
+  letter-spacing: -.25em;
+  opacity: 0.3;
+  transition: opacity .3s ease-in-out; }
+  #pagination > * {
+    letter-spacing: normal; }
+  #pagination div {
+    display: inline-block;
+    width: 49.9%; }
+    #pagination div span.p {
       display: inline-block;
       vertical-align: middle;
+      min-width: 3em;
+      text-align: center; }
+    #pagination div span.l {
+      cursor: pointer;
+      line-height: -1em; }
+      #pagination div span.l.hidden {
+        visibility: hidden; }
+    #pagination div.wrapper-l {
+      left: 0;
+      text-align: right; }
+    #pagination div.wrapper-r {
+      right: 0;
+      text-align: left;
+      border-left: 1px solid white; }
+  #pagination:hover {
+    opacity: 1; }
+
+#railway ul {
+  padding: 1mm 0;
+  margin: 0;
+  text-align: justify;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-flow: row nowrap;
+  flex-flow: row nowrap;
+  -ms-flex-pack: justify;
+  justify-content: space-between; }
+  #railway ul li {
+    list-style: none;
+    opacity: 0.2;
+    transition: opacity 0.3s ease-in-out; }
+    #railway ul li.current, #railway ul li.active:hover {
+      opacity: 1; }
+    #railway ul li span {
+      display: inline-block;
       background-color: white;
       width: 1mm;
       height: 7mm;
-      margin-left: 0.5mm;
       background-position: center;
-      background-size: cover;
-      opacity: 0.2;
-      transition: opacity 0.3s ease-in-out; }
-      #main #railway ul li.active {
+      background-size: cover; }
+      #railway ul li span.active {
         width: 7mm;
         cursor: pointer; }
-      #main #railway ul li.page-right {
-        margin-right: 1mm; }
-      #main #railway ul li.current, #main #railway ul li.active:hover {
-        opacity: 1; }
-    #main #railway ul:hover li {
-      opacity: 1; }
+  #railway ul:hover span {
+    opacity: 1; }