Update vid links for typography-helpers

diff --git a/docs/pages/typography-helpers.md b/docs/pages/typography-helpers.md
index 1632b7345e2e2bdfe0268cca3cca64e2278e0557..d671b4913db1f091b5bdc988aacee255243c8409 100644 (file)
--- a/docs/pages/typography-helpers.md
+++ b/docs/pages/typography-helpers.md
@@ -19,7 +19,7 @@ You can change the text alignment of an element by adding `.text-left`, `.text-r
 Adding a breakpoint to the front of a text alignment class will cause it to only be applied on that size screen or larger. For example, `.medium-text-center` will keep text left-aligned on the smallest screens, but switch to center-aligned on medium screens and larger.
 
 <p>
-  <a class="" data-open-video="5:45"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="1:01"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
@@ -48,7 +48,7 @@ Adding a breakpoint to the front of a text alignment class will cause it to only
 Lighten up your headers by adding a class of `.subheader` to any header element.
 
 <p>
-  <a class="" data-open-video="5:45"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="3:50"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
@@ -71,7 +71,7 @@ Lighten up your headers by adding a class of `.subheader` to any header element.
 A slightly-larger-than-normal block of text, useful for decks, blurbs, or other descriptive text.
 
 <p>
-  <a class="" data-open-video="5:45"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="3:24"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
@@ -89,7 +89,7 @@ A slightly-larger-than-normal block of text, useful for decks, blurbs, or other
 In Foundation, the `<ul>` is a bulleted list by default, but you can add the class `.no-bullet` to remove the bullets.
 
 <p>
-  <a class="" data-open-video="5:45"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="5:18"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
@@ -120,7 +120,7 @@ In Foundation, the `<ul>` is a bulleted list by default, but you can add the cla
 If you're building a dashboard, you might need to display some important numbers *real big*. Just add the `.stat` class to any element to amp up the font size.
 
 <p>
-  <a class="" data-open-video="5:45"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="4:38"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">