From 6c5f4961caa11c682508eb511bf7c1ed505567e5 Mon Sep 17 00:00:00 2001
From: Eric Bidelman
Date: Sun, 22 Apr 2012 10:31:40 -0700
Subject: image compress. reflect/center/more flexbox classes

---
 images/chart.png            | Bin 91914 -> 94688 bytes
 images/chrome-logo-tiny.png | Bin 4125 -> 1381 bytes
 template.html               |  12 +-
 theme/css/default.css       | 299 ++++++++++++++++++++++++--------------------
 theme/scss/_base.scss       |   6 +
 theme/scss/default.scss     |  16 ++-
 6 files changed, 188 insertions(+), 145 deletions(-)

diff --git a/images/chart.png b/images/chart.png
index 09b5451..016ca90 100644
Binary files a/images/chart.png and b/images/chart.png differ
diff --git a/images/chrome-logo-tiny.png b/images/chrome-logo-tiny.png
index 6dcf46e..88ef9bd 100644
Binary files a/images/chrome-logo-tiny.png and b/images/chrome-logo-tiny.png differ
diff --git a/template.html b/template.html
index 3b81007..070b539 100644
--- a/template.html
+++ b/template.html
@@ -26,9 +26,9 @@ URL: https://code.google.com/p/io-2012-slides
 <slides class="layout-widescreen">
 
   <slide class="logoslide nobackground">
-    <section class="flexbox vcenter">
+    <article class="flexbox vcenter">
       <span><img src="images/google_developers_logo.png"></span>
-    </section>
+    </article>
   </slide>
 
   <slide class="title-slide segue nobackground">
@@ -197,7 +197,7 @@ function helloWorld(world) {
       <h2>Slide with Image</h2>
     </hgroup>
     <article>
-      <img src="images/chart.png" alt="Description" title="Description">
+      <img src="images/chart.png" class="reflect" alt="Description" title="Description">
       <footer class="source">source: place source info here</footer>
     </article>
   </slide>
@@ -206,7 +206,7 @@ function helloWorld(world) {
     <hgroup>
       <h2>Slide with Image (Centered horz/vert)</h2>
     </hgroup>
-    <article class="flexbox vcenter" style="height: 80%;">
+    <article class="flexbox vcenter">
       <img src="images/barchart.png" alt="Description" title="Description">
       <footer class="source">source: place source info here</footer>
     </article>
@@ -323,8 +323,8 @@ function helloWorld(world) {
           <li class="gray4">class="gray4"</li>
         </ul>
       </div>
-      <div>
-        <button>Button</button> <button disabled>Disabled</button>
+      <div class="centered" style="margin-top:2em">
+        I am centered text with a <button>Button</button> and <button disabled>Disabled</button> button.
       </div>
     </article>
   </slide>
diff --git a/theme/css/default.css b/theme/css/default.css
index 722620f..7cfbdb1 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -66,13 +66,13 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 /**
  * Base SlideDeck Styles
  */
-/* line 42, ../scss/_base.scss */
+/* line 48, ../scss/_base.scss */
 html {
   height: 100%;
   overflow: hidden;
 }
 
-/* line 47, ../scss/_base.scss */
+/* line 53, ../scss/_base.scss */
 body {
   margin: 0;
   padding: 0;
@@ -92,22 +92,22 @@ body {
   -o-transition: opacity 800ms ease-in 100ms;
   transition: opacity 800ms ease-in 100ms;
 }
-/* line 63, ../scss/_base.scss */
+/* line 69, ../scss/_base.scss */
 body.loaded {
   opacity: 1;
 }
 
-/* line 68, ../scss/_base.scss */
+/* line 74, ../scss/_base.scss */
 input, button {
   vertical-align: middle;
 }
 
-/* line 72, ../scss/_base.scss */
+/* line 78, ../scss/_base.scss */
 slides > slide[hidden] {
   display: none !important;
 }
 
-/* line 76, ../scss/_base.scss */
+/* line 82, ../scss/_base.scss */
 slides {
   width: 100%;
   height: 100%;
@@ -125,7 +125,7 @@ slides {
   transform-style: preserve-3d;
 }
 
-/* line 87, ../scss/_base.scss */
+/* line 93, ../scss/_base.scss */
 slides > slide {
   display: block;
   position: absolute;
@@ -346,31 +346,35 @@ slides > slide.backdrop:after, slides > slide.backdrop:before {
 slides > slide > hgroup + article {
   margin-top: 45px;
 }
-/* line 213, ../scss/default.scss */
+/* line 214, ../scss/default.scss */
+slides > slide > hgroup + article.flexbox.vcenter, slides > slide > hgroup + article.flexbox.vleft, slides > slide > hgroup + article.flexbox.vright {
+  height: 80%;
+}
+/* line 219, ../scss/default.scss */
 slides > slide > hgroup + article p {
   margin-bottom: 1em;
 }
-/* line 218, ../scss/default.scss */
+/* line 224, ../scss/default.scss */
 slides > slide > article:only-child {
   height: 100%;
 }
-/* line 221, ../scss/default.scss */
+/* line 227, ../scss/default.scss */
 slides > slide > article:only-child > iframe {
   height: 100%;
 }
 
-/* line 227, ../scss/default.scss */
+/* line 233, ../scss/default.scss */
 slides.layout-faux-widescreen > slide {
   padding: 40px 160px;
 }
 
-/* line 236, ../scss/default.scss */
+/* line 242, ../scss/default.scss */
 slides.layout-widescreen > slide,
 slides.layout-faux-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
 }
-/* line 241, ../scss/default.scss */
+/* line 247, ../scss/default.scss */
 slides.layout-widescreen > slide.far-past,
 slides.layout-faux-widescreen > slide.far-past {
   display: block;
@@ -386,26 +390,26 @@ slides.layout-faux-widescreen > slide.far-past {
   -o-transform: translate3d(-2260px, 0, 0);
   transform: translate3d(-2260px, 0, 0);
 }
-/* line 248, ../scss/default.scss */
+/* line 254, ../scss/default.scss */
 slides.layout-widescreen > slide.past,
 slides.layout-faux-widescreen > slide.past {
   display: block;
   opacity: 0;
 }
-/* line 255, ../scss/default.scss */
+/* line 261, ../scss/default.scss */
 slides.layout-widescreen > slide.current,
 slides.layout-faux-widescreen > slide.current {
   display: block;
   opacity: 1;
 }
-/* line 262, ../scss/default.scss */
+/* line 268, ../scss/default.scss */
 slides.layout-widescreen > slide.next,
 slides.layout-faux-widescreen > slide.next {
   display: block;
   opacity: 0;
   pointer-events: none;
 }
-/* line 270, ../scss/default.scss */
+/* line 276, ../scss/default.scss */
 slides.layout-widescreen > slide.far-next,
 slides.layout-faux-widescreen > slide.far-next {
   display: block;
@@ -421,39 +425,39 @@ slides.layout-faux-widescreen > slide.far-next {
   -o-transform: translate3d(2260px, 0, 0);
   transform: translate3d(2260px, 0, 0);
 }
-/* line 277, ../scss/default.scss */
+/* line 283, ../scss/default.scss */
 slides.layout-widescreen #prev-slide-area,
 slides.layout-faux-widescreen #prev-slide-area {
   margin-left: -650px;
 }
-/* line 281, ../scss/default.scss */
+/* line 287, ../scss/default.scss */
 slides.layout-widescreen #next-slide-area,
 slides.layout-faux-widescreen #next-slide-area {
   margin-left: 550px;
 }
 
-/* line 286, ../scss/default.scss */
+/* line 292, ../scss/default.scss */
 b {
   font-weight: 600;
 }
 
-/* line 290, ../scss/default.scss */
+/* line 296, ../scss/default.scss */
 a {
   color: #2a7cdf;
   text-decoration: none;
   border-bottom: 1px solid rgba(42, 124, 223, 0.5);
 }
-/* line 295, ../scss/default.scss */
+/* line 301, ../scss/default.scss */
 a:hover {
   color: black !important;
 }
 
-/* line 300, ../scss/default.scss */
+/* line 306, ../scss/default.scss */
 h1, h2, h3 {
   font-weight: 600;
 }
 
-/* line 304, ../scss/default.scss */
+/* line 310, ../scss/default.scss */
 h2 {
   font-size: 45px;
   line-height: 45px;
@@ -461,7 +465,7 @@ h2 {
   color: #515151;
 }
 
-/* line 311, ../scss/default.scss */
+/* line 317, ../scss/default.scss */
 h3 {
   font-size: 30px;
   letter-spacing: -1px;
@@ -470,39 +474,39 @@ h3 {
   color: #797979;
 }
 
-/* line 319, ../scss/default.scss */
+/* line 325, ../scss/default.scss */
 ul {
   margin-left: 1.2em;
   margin-bottom: 1em;
   position: relative;
 }
-/* line 324, ../scss/default.scss */
+/* line 330, ../scss/default.scss */
 ul li {
   margin-bottom: 0.5em;
 }
-/* line 327, ../scss/default.scss */
+/* line 333, ../scss/default.scss */
 ul li ul {
   margin-left: 2em;
   margin-bottom: 0;
 }
-/* line 331, ../scss/default.scss */
+/* line 337, ../scss/default.scss */
 ul li ul li:before {
   content: '-';
   font-weight: 600;
 }
-/* line 338, ../scss/default.scss */
+/* line 344, ../scss/default.scss */
 ul > li:before {
   content: '·';
   margin-left: -1em;
   position: absolute;
   font-weight: 600;
 }
-/* line 345, ../scss/default.scss */
+/* line 351, ../scss/default.scss */
 ul ul {
   margin-top: .5em;
 }
 
-/* line 352, ../scss/default.scss */
+/* line 358, ../scss/default.scss */
 .highlight-code slide.current pre > * {
   opacity: 0.25;
   -webkit-transition: opacity 0.5s ease-in;
@@ -511,12 +515,12 @@ ul ul {
   -o-transition: opacity 0.5s ease-in;
   transition: opacity 0.5s ease-in;
 }
-/* line 356, ../scss/default.scss */
+/* line 362, ../scss/default.scss */
 .highlight-code slide.current b {
   opacity: 1;
 }
 
-/* line 361, ../scss/default.scss */
+/* line 367, ../scss/default.scss */
 pre {
   font-family: 'Inconsolata', 'Courier New', monospace;
   font-size: 20px;
@@ -533,7 +537,7 @@ pre {
   box-sizing: border-box;
   /*overflow: hidden;*/
 }
-/* line 375, ../scss/default.scss */
+/* line 381, ../scss/default.scss */
 pre:after {
   content: attr(data-lang);
   background-color: #a9a9a9;
@@ -546,14 +550,14 @@ pre:after {
   text-transform: uppercase;
 }
 
-/* line 388, ../scss/default.scss */
+/* line 394, ../scss/default.scss */
 code {
   font-size: 95%;
   font-family: 'Inconsolata', 'Courier New', monospace;
   color: black;
 }
 
-/* line 394, ../scss/default.scss */
+/* line 400, ../scss/default.scss */
 iframe {
   width: 100%;
   height: 530px;
@@ -564,12 +568,12 @@ iframe {
   box-sizing: border-box;
 }
 
-/* line 402, ../scss/default.scss */
+/* line 408, ../scss/default.scss */
 dt {
   font-weight: bold;
 }
 
-/* line 406, ../scss/default.scss */
+/* line 412, ../scss/default.scss */
 button {
   display: inline-block;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3));
@@ -595,12 +599,12 @@ button {
   font-size: 10pt;
 }
 
-/* line 420, ../scss/default.scss */
+/* line 426, ../scss/default.scss */
 button:not(:disabled):hover {
   border-color: #515151;
 }
 
-/* line 424, ../scss/default.scss */
+/* line 430, ../scss/default.scss */
 button:not(:disabled):active {
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9));
   background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%);
@@ -610,102 +614,102 @@ button:not(:disabled):active {
   background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%);
 }
 
-/* line 428, ../scss/default.scss */
+/* line 434, ../scss/default.scss */
 :disabled {
   color: #a9a9a9;
 }
 
-/* line 432, ../scss/default.scss */
+/* line 438, ../scss/default.scss */
 .blue {
   color: #4387fd;
 }
 
-/* line 435, ../scss/default.scss */
+/* line 441, ../scss/default.scss */
 .blue2 {
   color: #3c8ef3;
 }
 
-/* line 438, ../scss/default.scss */
+/* line 444, ../scss/default.scss */
 .blue3 {
   color: #2a7cdf;
 }
 
-/* line 441, ../scss/default.scss */
+/* line 447, ../scss/default.scss */
 .yellow {
   color: #ffd14d;
 }
 
-/* line 444, ../scss/default.scss */
+/* line 450, ../scss/default.scss */
 .yellow2 {
   color: #f9cc46;
 }
 
-/* line 447, ../scss/default.scss */
+/* line 453, ../scss/default.scss */
 .yellow3 {
   color: #f6c000;
 }
 
-/* line 450, ../scss/default.scss */
+/* line 456, ../scss/default.scss */
 .green {
   color: #0da861;
 }
 
-/* line 453, ../scss/default.scss */
+/* line 459, ../scss/default.scss */
 .green2 {
   color: #00a86d;
 }
 
-/* line 456, ../scss/default.scss */
+/* line 462, ../scss/default.scss */
 .green3 {
   color: #009f5d;
 }
 
-/* line 459, ../scss/default.scss */
+/* line 465, ../scss/default.scss */
 .red {
   color: #f44a3f;
 }
 
-/* line 462, ../scss/default.scss */
+/* line 468, ../scss/default.scss */
 .red2 {
   color: #e0543e;
 }
 
-/* line 465, ../scss/default.scss */
+/* line 471, ../scss/default.scss */
 .red3 {
   color: #d94d3a;
 }
 
-/* line 468, ../scss/default.scss */
+/* line 474, ../scss/default.scss */
 .gray {
   color: #e6e6e6;
 }
 
-/* line 471, ../scss/default.scss */
+/* line 477, ../scss/default.scss */
 .gray2 {
   color: #a9a9a9;
 }
 
-/* line 474, ../scss/default.scss */
+/* line 480, ../scss/default.scss */
 .gray3 {
   color: #797979;
 }
 
-/* line 477, ../scss/default.scss */
+/* line 483, ../scss/default.scss */
 .gray4 {
   color: #515151;
 }
 
-/* line 481, ../scss/default.scss */
+/* line 487, ../scss/default.scss */
 .white {
   color: white !important;
 }
 
-/* line 484, ../scss/default.scss */
+/* line 490, ../scss/default.scss */
 .black {
   color: black !important;
 }
 
-/* line 488, ../scss/default.scss */
+/* line 494, ../scss/default.scss */
 .columns-2 {
   -webkit-column-count: 2;
   -moz-column-count: 2;
@@ -713,7 +717,7 @@ button:not(:disabled):active {
   column-count: 2;
 }
 
-/* line 492, ../scss/default.scss */
+/* line 498, ../scss/default.scss */
 table {
   width: 100%;
   border-collapse: -moz-initial;
@@ -721,16 +725,16 @@ table {
   border-spacing: 2px;
   border-bottom: 1px solid #797979;
 }
-/* line 499, ../scss/default.scss */
+/* line 505, ../scss/default.scss */
 table tr > td:first-child, table th {
   font-weight: 600;
   color: #515151;
 }
-/* line 504, ../scss/default.scss */
+/* line 510, ../scss/default.scss */
 table tr:nth-child(odd) {
   background-color: #e6e6e6;
 }
-/* line 508, ../scss/default.scss */
+/* line 514, ../scss/default.scss */
 table th {
   color: white;
   font-size: 18px;
@@ -741,12 +745,12 @@ table th {
   background: -ms-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
   background: linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
 }
-/* line 514, ../scss/default.scss */
+/* line 520, ../scss/default.scss */
 table td, table th {
   font-size: 18px;
   padding: 1em 0.5em;
 }
-/* line 519, ../scss/default.scss */
+/* line 525, ../scss/default.scss */
 table td.highlight {
   color: #515151;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #ffd14d), color-stop(80%, #f6c000)) no-repeat;
@@ -756,31 +760,31 @@ table td.highlight {
   background: -ms-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
   background: linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
 }
-/* line 524, ../scss/default.scss */
+/* line 530, ../scss/default.scss */
 table.rows {
   border-bottom: none;
   border-right: 1px solid #797979;
 }
 
-/* line 530, ../scss/default.scss */
+/* line 536, ../scss/default.scss */
 q {
   font-size: 45px;
   line-height: 72px;
 }
-/* line 534, ../scss/default.scss */
+/* line 540, ../scss/default.scss */
 q:before {
   content: '“';
   position: absolute;
   margin-left: -0.5em;
 }
-/* line 539, ../scss/default.scss */
+/* line 545, ../scss/default.scss */
 q:after {
   content: '”';
   position: absolute;
   margin-left: 0.1em;
 }
 
-/* line 546, ../scss/default.scss */
+/* line 552, ../scss/default.scss */
 slide.fill {
   background-repeat: no-repeat;
   -webkit-border-radius: 5px;
@@ -795,34 +799,34 @@ slide.fill {
 }
 
 /* Size variants */
-/* line 555, ../scss/default.scss */
+/* line 561, ../scss/default.scss */
 article.smaller p, article.smaller ul {
   font-size: 20px;
   line-height: 24px;
   letter-spacing: 0;
 }
-/* line 561, ../scss/default.scss */
+/* line 567, ../scss/default.scss */
 article.smaller table td, article.smaller table th {
   font-size: 14px;
 }
-/* line 565, ../scss/default.scss */
+/* line 571, ../scss/default.scss */
 article.smaller pre {
   font-size: 15px;
   line-height: 20px;
   letter-spacing: 0;
 }
-/* line 570, ../scss/default.scss */
+/* line 576, ../scss/default.scss */
 article.smaller q {
   font-size: 40px;
   line-height: 48px;
 }
-/* line 574, ../scss/default.scss */
+/* line 580, ../scss/default.scss */
 article.smaller q:before, article.smaller q:after {
   font-size: 60px;
 }
 
 /* Builds */
-/* line 583, ../scss/default.scss */
+/* line 589, ../scss/default.scss */
 .build > * {
   -webkit-transition: opacity 0.5s ease-in-out 0.2s;
   -moz-transition: opacity 0.5s ease-in-out 0.2s;
@@ -830,55 +834,55 @@ article.smaller q:before, article.smaller q:after {
   -o-transition: opacity 0.5s ease-in-out 0.2s;
   transition: opacity 0.5s ease-in-out 0.2s;
 }
-/* line 587, ../scss/default.scss */
+/* line 593, ../scss/default.scss */
 .build .to-build {
   opacity: 0;
 }
-/* line 591, ../scss/default.scss */
+/* line 597, ../scss/default.scss */
 .build .build-fade {
   opacity: 0.3;
 }
-/* line 594, ../scss/default.scss */
+/* line 600, ../scss/default.scss */
 .build .build-fade:hover {
   opacity: 1.0;
 }
 
 /* Pretty print */
-/* line 603, ../scss/default.scss */
+/* line 609, ../scss/default.scss */
 .prettyprint .str,
 .prettyprint .atv {
   /* a markup attribute value */
   color: #009f5d;
 }
 
-/* line 607, ../scss/default.scss */
+/* line 613, ../scss/default.scss */
 .prettyprint .kwd,
 .prettyprint .tag {
   /* a markup tag name */
   color: #0066cc;
 }
 
-/* line 610, ../scss/default.scss */
+/* line 616, ../scss/default.scss */
 .prettyprint .com {
   /* a comment */
   color: #797979;
   font-style: italic;
 }
 
-/* line 614, ../scss/default.scss */
+/* line 620, ../scss/default.scss */
 .prettyprint .lit {
   /* a literal value */
   color: #7f0000;
 }
 
-/* line 619, ../scss/default.scss */
+/* line 625, ../scss/default.scss */
 .prettyprint .pun,
 .prettyprint .opn,
 .prettyprint .clo {
   color: #515151;
 }
 
-/* line 625, ../scss/default.scss */
+/* line 631, ../scss/default.scss */
 .prettyprint .typ,
 .prettyprint .atn,
 .prettyprint .dec,
@@ -887,12 +891,12 @@ article.smaller q:before, article.smaller q:after {
   color: #d94d3a;
 }
 
-/* line 628, ../scss/default.scss */
+/* line 634, ../scss/default.scss */
 .prettyprint .pln {
   color: #515151;
 }
 
-/* line 632, ../scss/default.scss */
+/* line 638, ../scss/default.scss */
 .note {
   position: absolute;
   z-index: 100;
@@ -940,7 +944,7 @@ article.smaller q:before, article.smaller q:after {
   -o-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
 }
-/* line 650, ../scss/default.scss */
+/* line 656, ../scss/default.scss */
 .note > section {
   background: #fff;
   -webkit-border-radius: 5px;
@@ -955,7 +959,7 @@ article.smaller q:before, article.smaller q:after {
   padding: 2em;
 }
 
-/* line 667, ../scss/default.scss */
+/* line 673, ../scss/default.scss */
 .with-notes.popup slides.layout-widescreen slide.next,
 .with-notes.popup slides.layout-faux-widescreen slide.next {
   -webkit-transform: translate3d(690px, 80px, 0) scale(0.35);
@@ -964,7 +968,7 @@ article.smaller q:before, article.smaller q:after {
   -o-transform: translate3d(690px, 80px, 0) scale(0.35);
   transform: translate3d(690px, 80px, 0) scale(0.35);
 }
-/* line 670, ../scss/default.scss */
+/* line 676, ../scss/default.scss */
 .with-notes.popup slides.layout-widescreen slide .note,
 .with-notes.popup slides.layout-faux-widescreen slide .note {
   -webkit-transform: translate3d(300px, 800px, 0) scale(1.5);
@@ -973,7 +977,7 @@ article.smaller q:before, article.smaller q:after {
   -o-transform: translate3d(300px, 800px, 0) scale(1.5);
   transform: translate3d(300px, 800px, 0) scale(1.5);
 }
-/* line 676, ../scss/default.scss */
+/* line 682, ../scss/default.scss */
 .with-notes.popup slide {
   overflow: visible;
   background: white;
@@ -989,7 +993,7 @@ article.smaller q:before, article.smaller q:after {
   -o-transform-origin: 0 0;
   transform-origin: 0 0;
 }
-/* line 683, ../scss/default.scss */
+/* line 689, ../scss/default.scss */
 .with-notes.popup slide:not(.backdrop) {
   -webkit-transform: scale(0.6) translate3d(0.5em, 0.5em, 0);
   -moz-transform: scale(0.6) translate3d(0.5em, 0.5em, 0);
@@ -1000,7 +1004,7 @@ article.smaller q:before, article.smaller q:after {
   -moz-box-shadow: 0 0 10px #797979;
   box-shadow: 0 0 10px #797979;
 }
-/* line 688, ../scss/default.scss */
+/* line 694, ../scss/default.scss */
 .with-notes.popup slide.backdrop {
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #4387fd));
   background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px);
@@ -1009,7 +1013,7 @@ article.smaller q:before, article.smaller q:after {
   background-image: -ms-radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px);
   background-image: radial-gradient(50% 50%, #b1dfff 0%, #4387fd 600px);
 }
-/* line 694, ../scss/default.scss */
+/* line 700, ../scss/default.scss */
 .with-notes.popup slide.next {
   -webkit-transform: translate3d(570px, 80px, 0) scale(0.35);
   -moz-transform: translate3d(570px, 80px, 0) scale(0.35);
@@ -1018,11 +1022,11 @@ article.smaller q:before, article.smaller q:after {
   transform: translate3d(570px, 80px, 0) scale(0.35);
   opacity: 1 !important;
 }
-/* line 698, ../scss/default.scss */
+/* line 704, ../scss/default.scss */
 .with-notes.popup slide.next .note {
   display: none !important;
 }
-/* line 704, ../scss/default.scss */
+/* line 710, ../scss/default.scss */
 .with-notes.popup .note {
   width: 109%;
   height: 260px;
@@ -1042,7 +1046,7 @@ article.smaller q:before, article.smaller q:after {
   -o-transition: opacity 400ms ease-in-out;
   transition: opacity 400ms ease-in-out;
 }
-/* line 715, ../scss/default.scss */
+/* line 721, ../scss/default.scss */
 .with-notes.popup .note > section {
   background: #fff;
   -webkit-border-radius: 5px;
@@ -1061,7 +1065,7 @@ article.smaller q:before, article.smaller q:after {
   overflow: auto;
   padding: 1em;
 }
-/* line 728, ../scss/default.scss */
+/* line 734, ../scss/default.scss */
 .with-notes .note {
   opacity: 1;
   -webkit-transform: translateY(0);
@@ -1072,7 +1076,7 @@ article.smaller q:before, article.smaller q:after {
   pointer-events: auto;
 }
 
-/* line 735, ../scss/default.scss */
+/* line 741, ../scss/default.scss */
 .source {
   font-size: 14px;
   color: #a9a9a9;
@@ -1081,18 +1085,21 @@ article.smaller q:before, article.smaller q:after {
   left: 60px;
 }
 
-/*.centered {
+/* line 749, ../scss/default.scss */
+.centered {
   text-align: center;
 }
 
+/* line 753, ../scss/default.scss */
 .reflect {
-  -webkit-box-reflect: below 3px -webkit-linear-gradient(rgba(255,255,255,0) 85%, white 150%);
-  -moz-box-reflect: below 3px -moz-linear-gradient(rgba(255,255,255,0) 85%, white 150%);
-  -o-box-reflect: below 3px -o-linear-gradient(rgba(255,255,255,0) 85%, white 150%);
-  -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%);
-  box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%);
-}*/
-/* line 755, ../scss/default.scss */
+  -webkit-box-reflect: below 3px -webkit-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%);
+  -moz-box-reflect: below 3px -moz-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%);
+  -o-box-reflect: below 3px -o-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%);
+  -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%);
+  box-reflect: below 3px linear-gradient(rgba(255, 255, 255, 0) 85%, #ffffff 150%);
+}
+
+/* line 761, ../scss/default.scss */
 .flexbox {
   display: -webkit-box !important;
   display: -moz-box !important;
@@ -1101,7 +1108,7 @@ article.smaller q:before, article.smaller q:after {
   display: box !important;
 }
 
-/* line 759, ../scss/default.scss */
+/* line 765, ../scss/default.scss */
 .flexbox.vcenter {
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
@@ -1119,7 +1126,7 @@ article.smaller q:before, article.smaller q:after {
   width: 100%;
 }
 
-/* line 765, ../scss/default.scss */
+/* line 771, ../scss/default.scss */
 .flexbox.vleft {
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
@@ -1137,7 +1144,25 @@ article.smaller q:before, article.smaller q:after {
   width: 100%;
 }
 
-/* line 771, ../scss/default.scss */
+/* line 777, ../scss/default.scss */
+.flexbox.vright {
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -ms-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-box-align: end;
+  -moz-box-align: end;
+  -ms-box-align: end;
+  box-align: end;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  -ms-box-pack: center;
+  box-pack: center;
+  height: 100%;
+  width: 100%;
+}
+
+/* line 783, ../scss/default.scss */
 .auto-fadein {
   -webkit-transition: opacity 0.6s ease-in 1s;
   -moz-transition: opacity 0.6s ease-in 1s;
@@ -1148,7 +1173,7 @@ article.smaller q:before, article.smaller q:after {
 }
 
 /* Clickable/tappable areas */
-/* line 777, ../scss/default.scss */
+/* line 789, ../scss/default.scss */
 .slide-area {
   z-index: 1000;
   position: absolute;
@@ -1162,59 +1187,59 @@ article.smaller q:before, article.smaller q:after {
   margin-top: -350px;
 }
 
-/* line 794, ../scss/default.scss */
+/* line 806, ../scss/default.scss */
 #prev-slide-area {
   margin-left: -550px;
 }
 
-/* line 799, ../scss/default.scss */
+/* line 811, ../scss/default.scss */
 #next-slide-area {
   margin-left: 450px;
 }
 
 /* ===== SLIDE CONTENT ===== */
-/* line 807, ../scss/default.scss */
+/* line 819, ../scss/default.scss */
 .logoslide img {
   width: 383px;
   height: 92px;
 }
 
-/* line 813, ../scss/default.scss */
+/* line 825, ../scss/default.scss */
 .segue {
   padding: 60px 120px;
 }
-/* line 816, ../scss/default.scss */
+/* line 828, ../scss/default.scss */
 .segue h2 {
   color: #e6e6e6;
   font-size: 60px;
 }
-/* line 820, ../scss/default.scss */
+/* line 832, ../scss/default.scss */
 .segue h3 {
   color: #e6e6e6;
   line-height: 2.8;
 }
-/* line 824, ../scss/default.scss */
+/* line 836, ../scss/default.scss */
 .segue hgroup {
   position: absolute;
   bottom: 225px;
 }
 
-/* line 830, ../scss/default.scss */
+/* line 842, ../scss/default.scss */
 .thank-you-slide {
   background: #4387fd !important;
   color: white;
 }
-/* line 834, ../scss/default.scss */
+/* line 846, ../scss/default.scss */
 .thank-you-slide h2 {
   font-size: 60px;
   color: inherit;
 }
-/* line 839, ../scss/default.scss */
+/* line 851, ../scss/default.scss */
 .thank-you-slide article > p {
   margin-top: 2em;
   font-size: 20pt;
 }
-/* line 844, ../scss/default.scss */
+/* line 856, ../scss/default.scss */
 .thank-you-slide > p {
   position: absolute;
   bottom: 80px;
@@ -1222,7 +1247,7 @@ article.smaller q:before, article.smaller q:after {
   line-height: 1.3;
 }
 
-/* line 852, ../scss/default.scss */
+/* line 864, ../scss/default.scss */
 aside.gdbar {
   height: 97px;
   width: 215px;
@@ -1251,7 +1276,7 @@ aside.gdbar {
   transition: all 0.5s ease-out 0.5s;
   /* Better to transition only on background-size, but not sure how to do that with the mixin. */
 }
-/* line 863, ../scss/default.scss */
+/* line 875, ../scss/default.scss */
 aside.gdbar.right {
   right: 0;
   left: -moz-initial;
@@ -1264,7 +1289,7 @@ aside.gdbar.right {
   -o-transform: rotateZ(180deg);
   transform: rotateZ(180deg);
 }
-/* line 870, ../scss/default.scss */
+/* line 882, ../scss/default.scss */
 aside.gdbar.right img {
   -webkit-transform: rotateZ(180deg);
   -moz-transform: rotateZ(180deg);
@@ -1272,13 +1297,13 @@ aside.gdbar.right img {
   -o-transform: rotateZ(180deg);
   transform: rotateZ(180deg);
 }
-/* line 875, ../scss/default.scss */
+/* line 887, ../scss/default.scss */
 aside.gdbar.bottom {
   top: -moz-initial;
   top: initial;
   bottom: 60px;
 }
-/* line 881, ../scss/default.scss */
+/* line 893, ../scss/default.scss */
 aside.gdbar img {
   width: 85px;
   height: 85px;
@@ -1287,24 +1312,24 @@ aside.gdbar img {
   margin: 8px 15px;
 }
 
-/* line 892, ../scss/default.scss */
+/* line 904, ../scss/default.scss */
 .title-slide hgroup {
   bottom: 100px;
 }
-/* line 895, ../scss/default.scss */
+/* line 907, ../scss/default.scss */
 .title-slide hgroup h1 {
   font-size: 65px;
   line-height: 1.4;
   letter-spacing: -3px;
   color: #515151;
 }
-/* line 902, ../scss/default.scss */
+/* line 914, ../scss/default.scss */
 .title-slide hgroup h2 {
   font-size: 34px;
   color: #a9a9a9;
   font-weight: inherit;
 }
-/* line 908, ../scss/default.scss */
+/* line 920, ../scss/default.scss */
 .title-slide hgroup p {
   font-size: 20px;
   color: #797979;
@@ -1312,11 +1337,11 @@ aside.gdbar img {
   margin-top: 2em;
 }
 
-/* line 917, ../scss/default.scss */
+/* line 929, ../scss/default.scss */
 .quote {
   color: #e6e6e6;
 }
-/* line 920, ../scss/default.scss */
+/* line 932, ../scss/default.scss */
 .quote .author {
   font-size: 24px;
   position: absolute;
@@ -1324,12 +1349,12 @@ aside.gdbar img {
   line-height: 1.4;
 }
 
-/* line 929, ../scss/default.scss */
+/* line 941, ../scss/default.scss */
 [data-config-contact] a {
   color: white;
   border-bottom: none;
 }
-/* line 933, ../scss/default.scss */
+/* line 945, ../scss/default.scss */
 [data-config-contact] span {
   width: 115px;
   display: inline-block;
diff --git a/theme/scss/_base.scss b/theme/scss/_base.scss
index a3b00a8..ce9ee06 100644
--- a/theme/scss/_base.scss
+++ b/theme/scss/_base.scss
@@ -36,6 +36,12 @@
   @include box-pack(center);
 }
 
+@mixin flex-right-center {
+  @include box-orient(vertical);
+  @include box-align(end);
+  @include box-pack(center);
+}
+
 /**
  * Base SlideDeck Styles
  */
diff --git a/theme/scss/default.scss b/theme/scss/default.scss
index 0cc6e47..df96778 100644
--- a/theme/scss/default.scss
+++ b/theme/scss/default.scss
@@ -210,6 +210,12 @@ slides > slide {
   > hgroup + article {
     margin-top: $article-content-top-padding;
 
+    &.flexbox {
+      &.vcenter, &.vleft, &.vright {
+        height: 80%;
+      }
+    }
+
     p {
       margin-bottom: 1em;
     }
@@ -740,7 +746,7 @@ article.smaller {
   left: $slide-left-right-padding;
 }
 
-/*.centered {
+.centered {
   text-align: center;
 }
 
@@ -750,7 +756,7 @@ article.smaller {
   -o-box-reflect: below 3px -o-linear-gradient(rgba(255,255,255,0) 85%, white 150%);
   -ms-box-reflect: below 3px -ms-linear-gradient(rgba(255,255,255,0) 85%, white 150%);
   box-reflect: below 3px linear-gradient(rgba(255,255,255,0) 85%, white 150%);
-}*/
+}
 
 .flexbox {
   @include flexbox;
@@ -768,6 +774,12 @@ article.smaller {
   width: 100%;
 }
 
+.flexbox.vright {
+  @include flex-right-center;
+  height: 100%;
+  width: 100%;
+}
+
 .auto-fadein {
   @include transition(opacity 0.6s ease-in 1s);
   opacity: 0;
-- 
cgit v1.2.3