Folder structure and first implementation of changes...

css/main.css

@@ -14,6 +14,21 @@
 html {
     overflow-x: hidden;
 }
+/** 
+* Hack to preload background images 
+* Not working in Firefox!!
+**/
+div#preload {
+    /*display: none;*/
+    width: 0;
+    height: 0;
+    z-index: -10;
+    overflow-y: hidden;
+}
+div#preload img {
+    opacity: 0;
+    display: inline;
+}
 /** General utils **/
 .of-hidden {
     overflow: hidden;
@@ -48,9 +63,11 @@ html {
     font-size: 14pt;
 }
 video {
-    max-width: 100%;
     cursor: pointer;
 }
+#mod-cont {
+    overflow: hidden;
+}
 /** Font classes **/
 .arvo {
     font-family: 'arvoregular'/*Fallback??*/;
@@ -103,7 +120,7 @@ header {
     padding: 0;
 }
 .main-header.home {
-    min-height: 930px;
+    min-height: 80vh;
 }
 .main-header.prog {
     min-height: 60vh;
@@ -122,7 +139,7 @@ header {
 }
 .main-header.itin {
     background: none;
-    min-height: 25vh;
+    min-height: 40vh;
 }
 @media (max-width: 840px) {
     .main-header.itin {
@@ -226,15 +243,17 @@ header {
     font-weight:bold;
 }
 #nav {
-    max-height: 50px;
+    max-height: 90px;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 10;
 }
-#nav > div {
-    vertical-align: middle;
-    line-height: 2.3rem;
+@media (min-width: 860px) {
+    #nav {
+        vertical-align: middle;
+        line-height: 90px;
+    }    
 }
 #nav i {
     padding-top: 2rem;
@@ -281,8 +300,9 @@ header {
     border-bottom: 1px solid rgba(204,204,204,1);
 }
 #logo {
-    max-height: 41%;
-    padding: 7px 0 10px 20px;
+    max-height: 55%;
+    padding-left: 10px;
+    padding-top: 10px;
 }
 .nav-light a:hover {
     color: #fff;
@@ -402,6 +422,7 @@ section.poi h3 {
     top: 0;
     width: 100%;    
 }
+/*****/
 canvas {
     width: 100%;
     height: 100%;

css/spectre.css

@@ -2570,7 +2570,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .modal:target .modal-overlay,
 .modal.active .modal-overlay {
-  background: rgba(247, 248, 249, .75);
+  background: rgba(91, 96, 100, 0.75);
   bottom: 0;
   cursor: default;
   display: block;
@@ -2597,11 +2597,14 @@ summary.accordion-header::-webkit-details-marker {
 
 .modal.modal-lg .modal-container {
   box-shadow: none;
-  max-width: 960px;
+  /* Custom max-width*/
+  max-width: 100%;
+  max-height: 100vh;
 }
 
 .modal-container {
-  background: #fff;
+  /*background: #fff;*/
+  color: #fff;
   border-radius: .1rem;
   box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3);
   display: -ms-flexbox;
@@ -2619,12 +2622,12 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .modal-container .modal-header {
-  color: #303742;
+  /*color: #303742;*/
   padding: .8rem;
 }
 
 .modal-container .modal-body {
-  overflow-y: auto;
+  overflow: hidden;
   padding: .8rem;
   position: relative;
 }