diff --git a/static/css/base.css b/static/css/base.css
index d915017..75ef39c 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -50,10 +50,9 @@
 	15. Longform Elements
 	16. Safari Bug (flex-wrap)
 	17. Print
-	18. Zoom
+	18. Zoom: Index of slides (grid)
 
 ----------------------------------------------------------------------------------- */
-
 /*=========================================
 0. CSS Reset & Normalize
 =========================================== */
@@ -1594,7 +1593,7 @@ padding: 2.4rem;
   bottom: 0;
   left: 0;
   /* hover/visibility */
-  z-index: 3;
+  z-index: 4;
 }
 #navigation  {
   -webkit-animation: fadeIn 16s;
@@ -3332,23 +3331,34 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
 }
 
 /*=========================================
-18. ZOOM
+18. Zoom: Index of slides (grid)
 =========================================== */
-
-#webslides-zoomed.grid {
-  background: #ccc;
-}
-
-#webslides-zoomed.grid > .column {
-  position: relative;
+#webslides-zoomed.grid{
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  -webkit-align-content: flex-start;
+  align-content: flex-start;
+  -webkit-align-items: flex-start;
+  align-items: flex-start;
+  min-height: 100vh;
 }
 #webslides-zoomed.grid > .column > .wrap-zoom {
   position: relative;
-  background: #fff;
+  -webkit-transition: .3s;
+  transition: .3s;
 }
 #webslides-zoomed.grid > .column {
   width: 25%;
+      -webkit-order: 0;
+    order: 0;
+    -webkit-flex: 0 1 auto;
+    flex: 0 1 auto;
+    -webkit-align-self: auto;
+    align-self: auto;
 }
+
 #webslides-zoomed.grid > .column > .wrap-zoom > .slide {
   transform: scale(0.25) translate(-150%, -150vh);
   display: flex !important;
@@ -3357,6 +3367,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
   left: 0;
   clip: rect(0px auto auto 0);
 }
+
 #webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer {
   position: absolute;
   background: transparent;
@@ -3364,3 +3375,14 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
   height: 100%;
   cursor: pointer;
 }
+#webslides-zoomed.grid > .column > .wrap-zoom:hover {
+transform: scale(1.02);
+}
+
+.text-slide-number {
+  text-align: center;
+  display: inline-block;
+  /*border-radius: .3rem;
+  padding: 0 1.6rem;*/
+  margin: .8rem auto;
+ }
\ No newline at end of file
diff --git a/static/css/colors.css b/static/css/colors.css
index cfa3624..2cc48e5 100644
--- a/static/css/colors.css
+++ b/static/css/colors.css
@@ -81,27 +81,27 @@ hr:after {
   color: #333;
 }
 
-abbr,
+bbbr,
 acronym {
   border-bottom: 1px dotted #333;
 }
 
 mark,
 ins {
-  background-color: rgba(221,238,255, 0.8);
-  color: inherit;
+background-color: rgba(221,238,255, 0.8);
+color: inherit;
 }
 
 ::-moz-selection {
-  background-color: rgba(221,238,255, 0.8);
+    background-color: rgba(221,238,255, 0.8);
 }
 
 ::-webkit-selection {
-  background-color: rgba(221,238,255, 0.8);
+    background-color: rgba(221,238,255, 0.8);
 }
 
 ::selection {
-  background-color: rgba(221,238,255, 0.8);
+    background-color: rgba(221,238,255, 0.8);
 }
 
 pre {
@@ -119,7 +119,7 @@ code,[class*="bg-"] pre {
 }
 
 .bg-white code{
-  background: rgba(0, 20, 80, 0.03);
+    background: rgba(0, 20, 80, 0.03);
 }
 /*================================================
 Slides - Backgrounds <section class="bg-primary">
@@ -218,7 +218,7 @@ Slides - Backgrounds <section class="bg-primary">
 
 /*Covers/Longforms...*/
 .bg-trans-gradient{
-  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
+background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
 }
 
 /*Horizontal Gradient*/
@@ -250,9 +250,9 @@ Slides - Backgrounds <section class="bg-primary">
 
 /*Gray Gradient (horizontal)*/
 .bg-gradient-gray{
-  background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
-  color: #333;
-  text-shadow: none;
+background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
+color: #333;
+text-shadow: none;
 }
 /*Border/Frame*/
 .frame {
@@ -261,7 +261,7 @@ Slides - Backgrounds <section class="bg-primary">
 
 /*Layer/Box Shadow*/
 .shadow,.pre {
-  position: relative;
+position: relative;
 }
 .shadow:before,.shadow:after {
   box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
@@ -274,13 +274,16 @@ TYPOGRAPHY
 /* -- Horizontal separator  -- */
 
 .text-separator:before {
-  background-color: rgba(170, 0, 0, 0.8);
+    background-color: rgba(170, 0, 0, 0.8);
 }
 
 /* -- Pull Quote (Right/Left)  -- */
 
 [class*="text-pull-"] {
-  border-top: 4px solid rgba(0, 0, 0, 0.5);
+border-top: 4px solid rgba(0, 0, 0, 0.5);
+}
+img[class*="text-pull-"],figure[class*="text-pull-"] {
+border-top: none;
 }
 /* -- Context  -- */
 
@@ -374,7 +377,7 @@ nav li.email a:hover {
 }
 
 /*=========================================
-Features & Clients List
+Features & Clients List 
 =========================================== */
 
 .features li,.clients li  {
@@ -387,7 +390,7 @@ Features & Clients List
 }
 
 .features li:hover,.clients li:hover  {
-  box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
+box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
 }
 /*.features li span,.features li svg{color: #44d;}*/
 
@@ -410,7 +413,7 @@ Features & Clients List
 }
 
 /*===========================================
-flexblock.steps
+flexblock.steps 
 ============================================= */
 
 .steps li:nth-child(1) {
@@ -519,7 +522,7 @@ Gallery li+.overlay+image
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
 }
 .gallery li footer {
-  border-top:1px solid rgba(0,20,80,0.1);
+border-top:1px solid rgba(0,20,80,0.1);
 }
 
 .gallery li a {
@@ -684,13 +687,13 @@ Cards
 /*== Figure Background === */
 
 [class*="card-"][class*="bg-"] figure {
-  background-color: rgba(0, 20, 80, 0.06);
+background-color: rgba(0, 20, 80, 0.06);
 }
 
 /*== Ficaption Cards === */
 
-[class*="card-"] figcaption,
-[class*="card-"] figcaption a {
+[class*="card"] figcaption,
+[class*="card"] figcaption a {
   color: #fff;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
 }
@@ -703,7 +706,7 @@ Cards
     border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
     -webkit-border-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
     -moz-border-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
-
+    
   }
 }
 
@@ -737,7 +740,7 @@ tr:nth-child(even)>td:hover {
 
 
 /*============================
-Browser (Screenshots)
+Browser (Screenshots) 
 ============================== */
 
 .browser {
@@ -783,10 +786,10 @@ input:focus::-moz-placeholder {
 input:focus::-webkit-input-placeholder {
   color: #ddd;
 }
-a.button,[class*="badge-"],
+a.button,[class*="badge-"]
 button[type="submit"],
 input {
-  box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3);
+  box-shadow: 0px 10px 16px -8px rgba(0, 20, 80, 0.3);
 }
 
 button,
@@ -797,7 +800,7 @@ button[type="submit"],
 input[type="submit"],
 .button,.button:hover,
 button[type="submit"]:hover,
-input[type="submit"]:hover
+input[type="submit"]:hover 
 {
   border: 1px solid #44d;
 }
@@ -810,7 +813,7 @@ input[type="submit"],
   text-shadow: 0 1px 0 #123;
 }
 .button:active,button[type="submit"]:active,input[type="submit"]:active {
-  background-color: #17d;
+background-color: #17d;
 }
 .ghost,.ghost:hover {background: none;color: inherit;text-shadow: none;}
 .bg-primary select,
@@ -818,7 +821,7 @@ input[type="submit"],
 .bg-primary .button,
 .bg-primary button,.bg-primary button:hover,
 .bg-primary input,
-[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost
+[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost 
 {
   border-color: #fff;
 }
@@ -902,7 +905,6 @@ Slides (Counter/Arrows)
   background-color: rgba(0, 0, 0, 0.9);
 }
 
-
 /*============================
 Footer
 ============================== */
@@ -915,3 +917,24 @@ footer[role=contentinfo] {
 background-color:rgba(255,255,255 , 0.3);
 }
 */
+
+/*============================
+Zoom: Index of slides
+============================== */
+
+#webslides-zoomed.grid {
+  background: #e3e5e9;
+}
+
+#webslides-zoomed.grid > .column > .wrap-zoom {
+  background: #fff;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
+}
+#webslides-zoomed.grid > .column > .wrap-zoom:hover {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
+}
+.text-slide-number {
+  /*background-color: rgba(255, 255, 255, 0.1);*/
+  color: #456;
+  text-shadow: 0 1px 0 #fafafa;
+ }
\ No newline at end of file