style adjust - hero heading , nav dropdown type

vue-theme/src/components/hero.vue

@@ -13,7 +13,7 @@
             button(v-if="showPlaybutton" @click="isPlaying = true") play
     .hero--image(v-else-if="heroType === 'image'")
         .hero--image--overlay.f-col
-            div(v-html="heroText")
+            h2.t-up.t-cntr(v-html="heroText")
         img(:src="showHero" alt="hero alt image")
     .hero--image(v-else)
         .hero--image--overlay.f-col
@@ -77,6 +77,8 @@ export default {
 </script>
 
 <style lang="postcss">
+@import './../sss/theme.sss'
+
 .hero
     /* background-color: rebeccapurple */
     min-height: 35%
@@ -86,10 +88,14 @@ export default {
         > img
             width: 100%
         &--overlay
-            color: #ffffff
+            color: $cia_white
             position: absolute
             top: 30%
             width: 100%
+            h2 
+                color: $cia_white
+                text-shadow: 1px 1px $cia_black
+                max-width: 80vh
     .embedded
         height: 100%
         width: 100%

vue-theme/src/components/navigation/navigation.vue

@@ -26,7 +26,7 @@ nav.main.w-max
         ul.drop-down.w-max
             li(v-for="item in menuItems")
                 router-link(:to="`/${item}`")
-                    h5.t-up {{ item }}
+                    h6.t-up {{ item }}
 </template>
 
 <script>