Add first interactive map attempt

css/main.css

@@ -343,6 +343,7 @@ section .container {
     line-height: 1.3rem;
     font-size: 12pt;
 }
+
 @media (min-width: 1280px) {
     section .container {
         width: 1280px;
@@ -369,7 +370,8 @@ section .container ul {
     margin-left: 0;
     margin-top: 2rem;
 }
-section .container img {
+section .container img,
+.modal img {
     width: 100%;
 }
 section.prj-logos img {
@@ -407,10 +409,16 @@ section.poi h3 {
     color: var(--lilac);
 }
 /** Modals **/
-#mod-vid .modal-overlay {
+#mod-vid {
     background-color: #555;
 }
-/** Temp **/
+
+.modal-container div {
+    font-family: 'roboto_slablight', sans-serif;
+    line-height: 1.3rem;
+}
+
+/** Temp
 .placeholder {
     background-color: rgba(0,0,0,.03);
     height: 70%;
@@ -420,11 +428,11 @@ section.poi h3 {
     top: 0;
     width: 100%;    
 }
-/*****/
 canvas {
     width: 100vw;
     height: 100vh;
 }
+*/
 /** Videos **/
 video, .open-vid {
     cursor: pointer;
@@ -433,12 +441,28 @@ video, .open-vid {
     color: var(--white);
     margin-top: 0.9rem;
 }
+/*
+.vid-thumb::before {
+   content: "";
+   border-left:rgba(75, 99, 207, 0.658) 85px solid;
+   border-top: 60px solid transparent;
+   border-bottom: 60px solid transparent;
+   visibility: visible;
+   display: block;
+   position: absolute;
+   width: 0;
+   height: 0;
+   left: 70vh;
+   top: 15vh;
+   cursor: pointer;
+}
+*/
 /** Slideshow... **/
 .hide, .slide {
     display: none;
 }
 .show {
-    display: block;
+    display: block !important;
 }
 /* Fading animation */
 .fadein {

css/spectre.css

@@ -2597,9 +2597,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .modal.modal-lg .modal-container {
   box-shadow: none;
-  /* Custom max-width*/
-  max-width: 100%;
-  max-height: 100vh;
+  max-width: 960px;
 }
 
 .modal-container {