missing changes to reveal from before break

Former-commit-id: 0fad8437a4
Former-commit-id: 34b3960918

build/minified/modules/reveal.min.css

@@ -1 +1 @@
-.ui.reveal{position:relative!important;z-index:2!important}.ui.reveal>:first-child{-webkit-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;-moz-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;-ms-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s}.ui.reveal>:first-child{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;z-index:4!important;-webkit-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;-moz-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;-ms-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s}.ui.reveal>:last-child{position:relative!important;z-index:3!important}.ui.reveal.button{overflow:hidden}.ui.slide.reveal{position:relative!important;display:block!important;overflow:hidden!important;white-space:nowrap}.ui.slide.reveal>*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0 1em;-webkit-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s!important;-moz-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s!important;-ms-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s!important;transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s!important}.ui.slide.reveal>:first-child{position:relative!important}.ui.slide.reveal>:last-child{display:inline-block;position:absolute!important;top:0!important;left:100%!important;width:100%!important}.ui.slide.reveal:hover>:first-child{left:-100%!important}.ui.slide.reveal:hover>:last-child{left:0!important}.ui.right.slide.reveal>:first-child{left:0}.ui.right.slide.reveal>:last-child{left:auto!important;right:100%!important}.ui.right.slide.reveal:hover>:first-child{left:100%!important;right:auto!important}.ui.right.slide.reveal:hover>:last-child{left:auto!important;right:0!important}.ui.up.slide.reveal>:first-child{top:0!important;left:0!important;right:auto!important;bottom:auto!important}.ui.up.slide.reveal>:last-child{top:100%!important;left:0!important;right:auto!important;bottom:auto!important}.ui.slide.up.reveal:hover>:first-child{top:-100%!important;left:0!important}.ui.slide.up.reveal:hover>:last-child{top:0!important;left:0!important}.ui.down.slide.reveal>:first-child{top:auto!important;right:auto!important;bottom:auto!important;bottom:0!important}.ui.down.slide.reveal>:last-child{top:auto!important;right:auto!important;bottom:100%!important;left:0!important}.ui.slide.down.reveal:hover>:first-child{left:0!important;bottom:-100%!important}.ui.slide.down.reveal:hover>:last-child{left:0!important;bottom:0!important}.ui.fade.reveal>:first-child{opacity:1}.ui.fade.reveal:hover>:first-child{opacity:0}.ui.move.reveal>:first-child,.ui.move.left.reveal>:first-child{left:auto!important;top:auto!important;bottom:auto!important;right:0!important}.ui.move.reveal:hover>:first-child,.ui.move.left.reveal:hover>:first-child{right:100%!important}.ui.move.right.reveal>:first-child{right:auto!important;top:auto!important;bottom:auto!important;left:0!important}.ui.move.right.reveal:hover>:first-child{left:100%!important}.ui.move.up.reveal>:first-child{right:auto!important;left:auto!important;top:auto!important;bottom:0!important}.ui.move.up.reveal:hover>:first-child{bottom:100%!important}.ui.move.down.reveal>:first-child{right:auto!important;left:auto!important;top:0!important;bottom:auto!important}.ui.move.down.reveal:hover>:first-child{top:100%!important}.ui.rotate.reveal>:first-child{-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;-ms-transition-duration:.8s;transition-duration:.8s;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}.ui.rotate.reveal>:first-child,.ui.rotate.right.reveal>:first-child{-webkit-transform-origin:bottom right;-moz-transform-origin:bottom right;-o-transform-origin:bottom right;-ms-transform-origin:bottom right;transform-origin:bottom right}.ui.rotate.reveal:hover>:first-child,.ui.rotate.right.reveal:hover>:first-child{-webkit-transform:rotate(110deg);-moz-transform:rotate(110deg);-o-transform:rotate(110deg);-ms-transform:rotate(110deg);transform:rotate(110deg)}.ui.rotate.left.reveal>:first-child{-webkit-transform-origin:bottom left;-moz-transform-origin:bottom left;-o-transform-origin:bottom left;-ms-transform-origin:bottom left;transform-origin:bottom left}.ui.rotate.left.reveal:hover>:first-child{-webkit-transform:rotate(-110deg);-moz-transform:rotate(-110deg);-o-transform:rotate(-110deg);-ms-transform:rotate(-110deg);transform:rotate(-110deg)}.ui.masked.reveal{overflow:hidden}.ui.instant.reveal>*{-webkit-transition-delay:0s!important;-moz-transition-delay:0s!important;-o-transition-delay:0s!important;-ms-transition-delay:0s!important;transition-delay:0s!important}
+.ui.reveal{position:relative!important;z-index:3!important}.ui.reveal>.visible.content{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;z-index:4!important}.ui.reveal>.hidden.content{position:relative!important}.ui.reveal.button{overflow:hidden}.ui.slide.reveal{overflow:hidden!important;white-space:nowrap}.ui.slide.reveal>.content{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;margin:0}.ui.slide.reveal>.visible.content{position:relative!important;width:auto!important}.ui.slide.reveal>.hidden.content{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;padding:inherit!important;-webkit-transform:translate(100%,0);-moz-transform:translate(100%,0);-o-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0)}.ui.slide.reveal:hover>.visible.content{left:-100%!important}.ui.slide.reveal:hover>.hidden.content{-webkit-transform:translate(0%,0)!important;-moz-transform:translate(0%,0)!important;-o-transform:translate(0%,0)!important;-ms-transform:translate(0%,0)!important;transform:translate(0%,0)!important}.ui.slide.right.reveal:hover>.visible.content{left:100%!important}.ui.slide.right.reveal>.hidden.content{-webkit-transform:translate(-100%,0);-moz-transform:translate(-100%,0);-o-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.ui.slide.up.reveal:hover>.visible.content{top:-100%!important;left:0!important}.ui.slide.up.reveal>.hidden.content{-webkit-transform:translate(0,100%);-moz-transform:translate(0,100%);-o-transform:translate(0,100%);-ms-transform:translate(0,100%);transform:translate(0,100%)}.ui.slide.down.reveal:hover>.visible.content{top:100%!important;left:0!important}.ui.slide.down.reveal>.hidden.content{-webkit-transform:translate(0%,-100%);-moz-transform:translate(0%,-100%);-o-transform:translate(0%,-100%);-ms-transform:translate(0%,-100%);transform:translate(0%,-100%)}.ui.fade.reveal>.visible.content{opacity:1}.ui.fade.reveal:hover>.visible.content{opacity:0}.ui.move.reveal>.visible.content,.ui.move.left.reveal>.visible.content{-webkit-transform:translate(0%,0);-moz-transform:translate(0%,0);-o-transform:translate(0%,0);-ms-transform:translate(0%,0);transform:translate(0%,0)}.ui.move.reveal:hover>.visible.content,.ui.move.left.reveal:hover>.visible.content{-webkit-transform:translate(-100%,0);-moz-transform:translate(-100%,0);-o-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.ui.move.right.reveal:hover>.visible.content{-webkit-transform:translate(100%,0);-moz-transform:translate(100%,0);-o-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0)}.ui.move.up.reveal:hover>.visible.content{-webkit-transform:translate(0%,-100%);-moz-transform:translate(0%,-100%);-o-transform:translate(0%,-100%);-ms-transform:translate(0%,-100%);transform:translate(0%,-100%)}.ui.move.down.reveal:hover>.visible.content{-webkit-transform:translate(0%,100%);-moz-transform:translate(0%,100%);-o-transform:translate(0%,100%);-ms-transform:translate(0%,100%);transform:translate(0%,100%)}.ui.rotate.reveal>.visible.content{-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;-ms-transition-duration:.8s;transition-duration:.8s;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}.ui.rotate.reveal>.visible.content,.ui.rotate.right.reveal>.visible.content{-webkit-transform-origin:bottom right;-moz-transform-origin:bottom right;-o-transform-origin:bottom right;-ms-transform-origin:bottom right;transform-origin:bottom right}.ui.rotate.reveal:hover>.visible.content,.ui.rotate.right.reveal:hover>.visible.content{-webkit-transform:rotate(110deg);-moz-transform:rotate(110deg);-o-transform:rotate(110deg);-ms-transform:rotate(110deg);transform:rotate(110deg)}.ui.rotate.left.reveal>.visible.content{-webkit-transform-origin:bottom left;-moz-transform-origin:bottom left;-o-transform-origin:bottom left;-ms-transform-origin:bottom left;transform-origin:bottom left}.ui.rotate.left.reveal:hover>.visible.content{-webkit-transform:rotate(-110deg);-moz-transform:rotate(-110deg);-o-transform:rotate(-110deg);-ms-transform:rotate(-110deg);transform:rotate(-110deg)}.ui.masked.reveal{overflow:hidden}.ui.instant.reveal>*{-webkit-transition-delay:0s!important;-moz-transition-delay:0s!important;-o-transition-delay:0s!important;-ms-transition-delay:0s!important;transition-delay:0s!important}

build/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-504dbd6509fd1a2ae0d78f0db0850092730f5407
+c7a2188f54a6b10797665372e51464a682b8b458

build/packaged/semantic.min.js.REMOVED.git-id

@@ -1 +1 @@
-f571b5a0d25f7edf8968f37daaef53a631a25dc9
+29b691619ce36ba441a1b9cc80ea53b4de89e865

build/uncompressed/modules/reveal.css

@@ -14,29 +14,18 @@
 *******************************/
 .ui.reveal {
   position: relative !important;
-  z-index: 2 !important;
-}
-.ui.reveal > :first-child {
-  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
-  -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
-  -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
-  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  z-index: 3 !important;
 }
-.ui.reveal > :first-child {
+.ui.reveal > .visible.content {
   position: absolute !important;
   top: 0em !important;
   left: 0em !important;
   width: 100% !important;
   height: 100% !important;
   z-index: 4 !important;
-  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
-  -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
-  -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
-  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
 }
-.ui.reveal > :last-child {
+.ui.reveal > .hidden.content {
   position: relative !important;
-  z-index: 3 !important;
 }
 /*------------------
    Loose Coupling
@@ -51,148 +40,132 @@
       Slide
 ---------------*/
 .ui.slide.reveal {
-  position: relative !important;
-  display: block !important;
   overflow: hidden !important;
   white-space: nowrap;
 }
-.ui.slide.reveal > * {
+.ui.slide.reveal > .content {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0em;
-  padding: 0em 1em;
-  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s !important;
-  -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s !important;
-  -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s !important;
-  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s !important;
 }
-.ui.slide.reveal > :first-child {
+/* Slide Left */
+.ui.slide.reveal > .visible.content {
   position: relative !important;
+  width: auto !important;
 }
-.ui.slide.reveal > :last-child {
-  display: inline-block;
+.ui.slide.reveal > .hidden.content {
   position: absolute !important;
   top: 0% !important;
-  left: 100% !important;
+  left: 0% !important;
   width: 100% !important;
-}
-.ui.slide.reveal:hover > :first-child {
+  height: 100% !important;
+  padding: inherit !important;
+  -webkit-transform: translate(100%, 0%);
+  -moz-transform: translate(100%, 0%);
+  -o-transform: translate(100%, 0%);
+  -ms-transform: translate(100%, 0%);
+  transform: translate(100%, 0%);
+}
+.ui.slide.reveal:hover > .visible.content {
   left: -100% !important;
 }
-.ui.slide.reveal:hover > :last-child {
-  left: 0% !important;
+.ui.slide.reveal:hover > .hidden.content {
+  -webkit-transform: translate(0%, 0%) !important;
+  -moz-transform: translate(0%, 0%) !important;
+  -o-transform: translate(0%, 0%) !important;
+  -ms-transform: translate(0%, 0%) !important;
+  transform: translate(0%, 0%) !important;
 }
-.ui.right.slide.reveal > :first-child {
-  left: 0%;
-}
-.ui.right.slide.reveal > :last-child {
-  left: auto !important;
-  right: 100% !important;
-}
-.ui.right.slide.reveal:hover > :first-child {
+/* Slide Right */
+.ui.slide.right.reveal:hover > .visible.content {
   left: 100% !important;
-  right: auto !important;
-}
-.ui.right.slide.reveal:hover > :last-child {
-  left: auto !important;
-  right: 0% !important;
-}
-.ui.up.slide.reveal > :first-child {
-  top: 0% !important;
-  left: 0% !important;
-  right: auto !important;
-  bottom: auto !important;
 }
-.ui.up.slide.reveal > :last-child {
-  top: 100% !important;
-  left: 0% !important;
-  right: auto !important;
-  bottom: auto !important;
+.ui.slide.right.reveal > .hidden.content {
+  -webkit-transform: translate(-100%, 0%);
+  -moz-transform: translate(-100%, 0%);
+  -o-transform: translate(-100%, 0%);
+  -ms-transform: translate(-100%, 0%);
+  transform: translate(-100%, 0%);
 }
-.ui.slide.up.reveal:hover > :first-child {
+/* Slide Up */
+.ui.slide.up.reveal:hover > .visible.content {
   top: -100% !important;
   left: 0% !important;
 }
-.ui.slide.up.reveal:hover > :last-child {
-  top: 0% !important;
-  left: 0% !important;
-}
-.ui.down.slide.reveal > :first-child {
-  top: auto !important;
-  right: auto !important;
-  bottom: auto !important;
-  bottom: 0% !important;
-}
-.ui.down.slide.reveal > :last-child {
-  top: auto !important;
-  right: auto !important;
-  bottom: 100% !important;
-  left: 0% !important;
+.ui.slide.up.reveal > .hidden.content {
+  -webkit-transform: translate(0, 100%);
+  -moz-transform: translate(0, 100%);
+  -o-transform: translate(0, 100%);
+  -ms-transform: translate(0, 100%);
+  transform: translate(0, 100%);
 }
-.ui.slide.down.reveal:hover > :first-child {
+/* Slide Down */
+.ui.slide.down.reveal:hover > .visible.content {
+  top: 100% !important;
   left: 0% !important;
-  bottom: -100% !important;
 }
-.ui.slide.down.reveal:hover > :last-child {
-  left: 0% !important;
-  bottom: 0% !important;
+.ui.slide.down.reveal > .hidden.content {
+  -webkit-transform: translate(0%, -100%);
+  -moz-transform: translate(0%, -100%);
+  -o-transform: translate(0%, -100%);
+  -ms-transform: translate(0%, -100%);
+  transform: translate(0%, -100%);
 }
 /*--------------
       Fade
 ---------------*/
-.ui.fade.reveal > :first-child {
+.ui.fade.reveal > .visible.content {
   opacity: 1;
 }
-.ui.fade.reveal:hover > :first-child {
+.ui.fade.reveal:hover > .visible.content {
   opacity: 0;
 }
 /*--------------
       Move
 ---------------*/
-.ui.move.reveal > :first-child,
-.ui.move.left.reveal > :first-child {
-  left: auto !important;
-  top: auto !important;
-  bottom: auto !important;
-  right: 0% !important;
-}
-.ui.move.reveal:hover > :first-child,
-.ui.move.left.reveal:hover > :first-child {
-  right: 100% !important;
-}
-.ui.move.right.reveal > :first-child {
-  right: auto !important;
-  top: auto !important;
-  bottom: auto !important;
-  left: 0% !important;
-}
-.ui.move.right.reveal:hover > :first-child {
-  left: 100% !important;
-}
-.ui.move.up.reveal > :first-child {
-  right: auto !important;
-  left: auto !important;
-  top: auto !important;
-  bottom: 0% !important;
-}
-.ui.move.up.reveal:hover > :first-child {
-  bottom: 100% !important;
-}
-.ui.move.down.reveal > :first-child {
-  right: auto !important;
-  left: auto !important;
-  top: 0% !important;
-  bottom: auto !important;
-}
-.ui.move.down.reveal:hover > :first-child {
-  top: 100% !important;
+.ui.move.reveal > .visible.content,
+.ui.move.left.reveal > .visible.content {
+  -webkit-transform: translate(0%, 0%);
+  -moz-transform: translate(0%, 0%);
+  -o-transform: translate(0%, 0%);
+  -ms-transform: translate(0%, 0%);
+  transform: translate(0%, 0%);
+}
+.ui.move.reveal:hover > .visible.content,
+.ui.move.left.reveal:hover > .visible.content {
+  -webkit-transform: translate(-100%, 0%);
+  -moz-transform: translate(-100%, 0%);
+  -o-transform: translate(-100%, 0%);
+  -ms-transform: translate(-100%, 0%);
+  transform: translate(-100%, 0%);
+}
+.ui.move.right.reveal:hover > .visible.content {
+  -webkit-transform: translate(100%, 0%);
+  -moz-transform: translate(100%, 0%);
+  -o-transform: translate(100%, 0%);
+  -ms-transform: translate(100%, 0%);
+  transform: translate(100%, 0%);
+}
+.ui.move.up.reveal:hover > .visible.content {
+  -webkit-transform: translate(0%, -100%);
+  -moz-transform: translate(0%, -100%);
+  -o-transform: translate(0%, -100%);
+  -ms-transform: translate(0%, -100%);
+  transform: translate(0%, -100%);
+}
+.ui.move.down.reveal:hover > .visible.content {
+  -webkit-transform: translate(0%, 100%);
+  -moz-transform: translate(0%, 100%);
+  -o-transform: translate(0%, 100%);
+  -ms-transform: translate(0%, 100%);
+  transform: translate(0%, 100%);
 }
 /*--------------
      Rotate
 ---------------*/
-.ui.rotate.reveal > :first-child {
+.ui.rotate.reveal > .visible.content {
   -webkit-transition-duration: 0.8s;
   -moz-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
@@ -204,30 +177,30 @@
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
-.ui.rotate.reveal > :first-child,
-.ui.rotate.right.reveal > :first-child {
+.ui.rotate.reveal > .visible.content,
+.ui.rotate.right.reveal > .visible.content {
   -webkit-transform-origin: bottom right;
   -moz-transform-origin: bottom right;
   -o-transform-origin: bottom right;
   -ms-transform-origin: bottom right;
   transform-origin: bottom right;
 }
-.ui.rotate.reveal:hover > :first-child,
-.ui.rotate.right.reveal:hover > :first-child {
+.ui.rotate.reveal:hover > .visible.content,
+.ui.rotate.right.reveal:hover > .visible.content {
   -webkit-transform: rotate(110deg);
   -moz-transform: rotate(110deg);
   -o-transform: rotate(110deg);
   -ms-transform: rotate(110deg);
   transform: rotate(110deg);
 }
-.ui.rotate.left.reveal > :first-child {
+.ui.rotate.left.reveal > .visible.content {
   -webkit-transform-origin: bottom left;
   -moz-transform-origin: bottom left;
   -o-transform-origin: bottom left;
   -ms-transform-origin: bottom left;
   transform-origin: bottom left;
 }
-.ui.rotate.left.reveal:hover > :first-child {
+.ui.rotate.left.reveal:hover > .visible.content {
   -webkit-transform: rotate(-110deg);
   -moz-transform: rotate(-110deg);
   -o-transform: rotate(-110deg);

node/src/documents/guide/cssguide.html

@@ -187,6 +187,27 @@ type   : 'UI Guide'
       color: #009FDA;
     }
     </div>
+    
+    <h4 class="ui header">Inheritance is Magical</h4>
+    <p>Many CSS properties can use the value 'inherit' to specify, quite unintuitively, to take on the value of parent element for values that do not normally inherit. For example, an element can use inherit to double whatever its parents padding size is, or to receive the same type of border as a parent without knowing what it is beforehand.</p>
+    <div class="code" data-type="css">
+    /* inheriting borders */
+    .ui.widget {
+      border: 2px solid rgba(0, 0, 0, 0.1);
+    }
+    // will recieve same border treatment as parent
+    .ui.widget .foo {
+      border: inherit;
+    }
+    /* inheriting positioning */
+    .ui.widget {
+      padding: 0.5em 1em;
+    }
+    // will use the same padding as parent
+    .ui.widget .foo {
+      padding: inherit;
+    }
+    </div>
 
     <h4 class="ui header"><em>Relatively</em> Relative</h4>
     <p>EMs are defined so that 1em is equal to the current font size inside of an element. Using EMs can allow you to size content inside an element in proportion to the overall size of the element. Be careful though because this will stack with nested elements.</p>

node/src/documents/modules/reveal.html

@@ -29,11 +29,11 @@ type   : 'UI Module'
     <h4 class="ui header">Reveal</h4>
     <p>The markup for a reveal</p>
     <div class="ui message">
-      A reveal will take no action unless a type of reveal is specified and has no specific styling of its own. It can be used effectively with other elements like, <a href="/elements/message.html">message blocks</a>, <a href="/elements/button.html">button</a>, and <a href="/elements/images.html">images</a>.
+      A reveal will take no action unless a type of reveal is specified and has no specific styling of its own. It can be used effectively with other elements like, <a href="/elements/message.html">message blocks</a>, <a href="/elements/segment.html">segments</a>, and <a href="/elements/images.html">images</a>.
     </div>
     <div class="ui circular reveal image">
-      <img src="/images/demo/stickfigure.jpg">
-      <img src="/images/demo/photo2.jpg">
+      <img class="visible content" src="/images/demo/stickfigure.jpg">
+      <img class="hidden content" src="/images/demo/photo2.jpg">
     </div>
   </div>
 
@@ -42,60 +42,46 @@ type   : 'UI Module'
   <div class="example">
     <h4 class="ui header">Slide</h4>
     <p>An element can slide revealing content along-side it</p>
-    <div class="ui compact message">
-      <div class="ui slide reveal">
-        <div class="first">
-          <p>Do you want to check out a call to action just hover your mouse over this text block</p>
-          <p>It's actually right next to this one</p>
-          <p>Not obvious or anything</p>
-        </div>
-        <div class="second">
-          <p>Bam another message</p>
-            <div class="ui teal labeled icon button"><i class="sketchy x icon"></i> Bam here i am</div>
-          </p>
-        </div>
+    <div class="ui slide reveal compact message">
+      <div class="visible content">
+        <p>Do you want to check out a call to action just hover your mouse over this text block</p>
+        <p>It's actually right next to this one</p>
+        <p>Not obvious or anything</p>
+      </div>
+      <div class="hidden content">
+        <p>Bam another message</p>
+          <div class="ui teal labeled icon button"><i class="sketchy x icon"></i> Bam here i am</div>
+        </p>
       </div>
     </div>
   </div>
   <div class="another example">
-    <div class="ui compact message">
-      <div class="ui right slide reveal">
-        <div class="first">
-          <p>Do you want to check out a call to action just hover your mouse over this text block</p>
-          <p>It's actually right next to this one</p>
-        </div>
-        <div class="second">
-          Bam another message
-          <div class="ui teal labeled icon button"><i class="sketchy x icon"></i> Bam here i am</div>
-        </div>
-      </div>
+    <div class="ui green right slide reveal button">
+      <div class="visible content">Sign up for the newsletter</div>
+      <div class="hidden content">Thanks!</div>
     </div>
   </div>
   <div class="another example">
-    <div class="ui compact message">
-      <div class="ui slide up reveal">
-        <div class="first">
-          <p>Do you want to check out a call to action just hover your mouse over this text block</p>
-          <p>It's actually right next to this one</p>
-        </div>
-        <div class="second">
-          Bam another message
-          <div class="ui teal labeled icon button"><i class="sketchy x icon"></i> Bam here i am</div>
-        </div>
+    <div class="ui slide up reveal compact message">
+      <div class="visible content">
+        <p>Do you want to check out a call to action just hover your mouse over this text block</p>
+        <p>It's actually right next to this one</p>
+      </div>
+      <div class="hidden content">
+        Bam another message
+        <div class="ui teal labeled icon button"><i class="sketchy x icon"></i> Bam here i am</div>
       </div>
     </div>
   </div>
   <div class="another example">
-    <div class="ui compact message">
-      <div class="ui slide down reveal">
-        <div class="first">
-          <p>Do you want to check out a call to action just hover your mouse over this text block</p>
-          <p>It's actually right next to this one</p>
-        </div>
-        <div class="second">
-          Bam another message
-          <div class="ui teal labeled icon button"><i class="sketchy x icon"></i> Bam here i am</div>
-        </div>
+    <div class="ui slide down reveal compact message">
+      <div class="visible content">
+        <p>Do you want to check out a call to action just hover your mouse over this text block</p>
+        <p>It's actually right next to this one</p>
+      </div>
+      <div class="hidden content">
+        Bam another message
+        <div class="ui teal labeled icon button"><i class="sketchy x icon"></i> Bam here i am</div>
       </div>
     </div>
   </div>
@@ -104,8 +90,8 @@ type   : 'UI Module'
     <h4 class="ui header">Fade</h4>
     <p>An element can disappear to reveal content below</p>
     <div class="ui fade reveal image">
-      <img src="/images/demo/invention.jpg">
-      <img src="/images/demo/invention2.jpg">
+      <img class="visible content" src="/images/demo/invention.jpg">
+      <img class="hidden content" src="/images/demo/invention2.jpg">
     </div>
   </div>
   
@@ -113,28 +99,28 @@ type   : 'UI Module'
     <h4 class="ui header">Move</h4>
     <p>An element can move in a direction to reveal content</p>
     <div class="ui move reveal image">
-      <img src="/images/demo/invention.jpg">
-      <img src="/images/demo/invention2.jpg">
+      <img class="visible content" src="/images/demo/invention.jpg">
+      <img class="hidden content" src="/images/demo/invention2.jpg">
     </div>
   </div>
   <div class="another example">
     <div class="ui move right reveal image">
-      <img src="/images/demo/invention.jpg">
-      <img src="/images/demo/invention2.jpg">
+      <img class="visible content" src="/images/demo/invention.jpg">
+      <img class="hidden content" src="/images/demo/invention2.jpg">
     </div>
   </div>
   
   <div class="another example">
     <div class="ui move up reveal image">
-      <img src="/images/demo/invention.jpg">
-      <img src="/images/demo/invention2.jpg">
+      <img class="visible content" src="/images/demo/invention.jpg">
+      <img class="hidden content" src="/images/demo/invention2.jpg">
     </div>
   </div>
   
   <div class="another example">
     <div class="ui move down reveal image">
-      <img src="/images/demo/invention.jpg">
-      <img src="/images/demo/invention2.jpg">
+      <img class="visible content" src="/images/demo/invention.jpg">
+      <img class="hidden content" src="/images/demo/invention2.jpg">
     </div>
   </div>
   
@@ -142,14 +128,14 @@ type   : 'UI Module'
     <h4 class="ui header">Rotate</h4>
     <p>An element can rotate to reveal content below</p>
     <div class="ui circular rotate reveal image">
-      <img src="/images/demo/stickfigure.jpg">
-      <img src="/images/demo/photo2.jpg">
+      <img class="visible content" src="/images/demo/stickfigure.jpg">
+      <img class="hidden content" src="/images/demo/photo2.jpg">
     </div>
   </div>
   <div class="another example">
     <div class="ui circular rotate left reveal image">
-      <img src="/images/demo/stickfigure.jpg">
-      <img src="/images/demo/photo2.jpg">
+      <img class="visible content" src="/images/demo/stickfigure.jpg">
+      <img class="hidden content" src="/images/demo/photo2.jpg">
     </div>
   </div>
   
@@ -159,8 +145,8 @@ type   : 'UI Module'
     <h4 class="ui header">Masked</h4>
     <p>An element can mask its content so that an element does not escape its parent</p>
     <div class="ui circular masked move reveal image">
-      <img src="/images/demo/stickfigure.jpg">
-      <img src="/images/demo/photo2.jpg">
+      <img class="visible content" src="/images/demo/stickfigure.jpg">
+      <img class="hidden content" src="/images/demo/photo2.jpg">
     </div>
   </div>
   
@@ -168,8 +154,8 @@ type   : 'UI Module'
     <h4 class="ui header">Instant</h4>
     <p>An element can show its content without delay</p>
     <div class="ui circular instant move reveal image">
-      <img src="/images/demo/stickfigure.jpg">
-      <img src="/images/demo/photo2.jpg">
+      <img class="visible content" src="/images/demo/stickfigure.jpg">
+      <img class="hidden content" src="/images/demo/photo2.jpg">
     </div>
   </div>
    

node/src/files/components/semantic/modules/reveal.css

@@ -14,29 +14,18 @@
 *******************************/
 .ui.reveal {
   position: relative !important;
-  z-index: 2 !important;
-}
-.ui.reveal > :first-child {
-  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
-  -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
-  -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
-  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  z-index: 3 !important;
 }
-.ui.reveal > :first-child {
+.ui.reveal > .visible.content {
   position: absolute !important;
   top: 0em !important;
   left: 0em !important;
   width: 100% !important;
   height: 100% !important;
   z-index: 4 !important;
-  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
-  -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
-  -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
-  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
 }
-.ui.reveal > :last-child {
+.ui.reveal > .hidden.content {
   position: relative !important;
-  z-index: 3 !important;
 }
 /*------------------
    Loose Coupling
@@ -51,148 +40,132 @@
       Slide
 ---------------*/
 .ui.slide.reveal {
-  position: relative !important;
-  display: block !important;
   overflow: hidden !important;
   white-space: nowrap;
 }
-.ui.slide.reveal > * {
+.ui.slide.reveal > .content {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0em;
-  padding: 0em 1em;
-  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s !important;
-  -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s !important;
-  -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s !important;
-  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s !important;
 }
-.ui.slide.reveal > :first-child {
+/* Slide Left */
+.ui.slide.reveal > .visible.content {
   position: relative !important;
+  width: auto !important;
 }
-.ui.slide.reveal > :last-child {
-  display: inline-block;
+.ui.slide.reveal > .hidden.content {
   position: absolute !important;
   top: 0% !important;
-  left: 100% !important;
+  left: 0% !important;
   width: 100% !important;
-}
-.ui.slide.reveal:hover > :first-child {
+  height: 100% !important;
+  padding: inherit !important;
+  -webkit-transform: translate(100%, 0%);
+  -moz-transform: translate(100%, 0%);
+  -o-transform: translate(100%, 0%);
+  -ms-transform: translate(100%, 0%);
+  transform: translate(100%, 0%);
+}
+.ui.slide.reveal:hover > .visible.content {
   left: -100% !important;
 }
-.ui.slide.reveal:hover > :last-child {
-  left: 0% !important;
+.ui.slide.reveal:hover > .hidden.content {
+  -webkit-transform: translate(0%, 0%) !important;
+  -moz-transform: translate(0%, 0%) !important;
+  -o-transform: translate(0%, 0%) !important;
+  -ms-transform: translate(0%, 0%) !important;
+  transform: translate(0%, 0%) !important;
 }
-.ui.right.slide.reveal > :first-child {
-  left: 0%;
-}
-.ui.right.slide.reveal > :last-child {
-  left: auto !important;
-  right: 100% !important;
-}
-.ui.right.slide.reveal:hover > :first-child {
+/* Slide Right */
+.ui.slide.right.reveal:hover > .visible.content {
   left: 100% !important;
-  right: auto !important;
-}
-.ui.right.slide.reveal:hover > :last-child {
-  left: auto !important;
-  right: 0% !important;
-}
-.ui.up.slide.reveal > :first-child {
-  top: 0% !important;
-  left: 0% !important;
-  right: auto !important;
-  bottom: auto !important;
 }
-.ui.up.slide.reveal > :last-child {
-  top: 100% !important;
-  left: 0% !important;
-  right: auto !important;
-  bottom: auto !important;
+.ui.slide.right.reveal > .hidden.content {
+  -webkit-transform: translate(-100%, 0%);
+  -moz-transform: translate(-100%, 0%);
+  -o-transform: translate(-100%, 0%);
+  -ms-transform: translate(-100%, 0%);
+  transform: translate(-100%, 0%);
 }
-.ui.slide.up.reveal:hover > :first-child {
+/* Slide Up */
+.ui.slide.up.reveal:hover > .visible.content {
   top: -100% !important;
   left: 0% !important;
 }
-.ui.slide.up.reveal:hover > :last-child {
-  top: 0% !important;
-  left: 0% !important;
-}
-.ui.down.slide.reveal > :first-child {
-  top: auto !important;
-  right: auto !important;
-  bottom: auto !important;
-  bottom: 0% !important;
-}
-.ui.down.slide.reveal > :last-child {
-  top: auto !important;
-  right: auto !important;
-  bottom: 100% !important;
-  left: 0% !important;
+.ui.slide.up.reveal > .hidden.content {
+  -webkit-transform: translate(0, 100%);
+  -moz-transform: translate(0, 100%);
+  -o-transform: translate(0, 100%);
+  -ms-transform: translate(0, 100%);
+  transform: translate(0, 100%);
 }
-.ui.slide.down.reveal:hover > :first-child {
+/* Slide Down */
+.ui.slide.down.reveal:hover > .visible.content {
+  top: 100% !important;
   left: 0% !important;
-  bottom: -100% !important;
 }
-.ui.slide.down.reveal:hover > :last-child {
-  left: 0% !important;
-  bottom: 0% !important;
+.ui.slide.down.reveal > .hidden.content {
+  -webkit-transform: translate(0%, -100%);
+  -moz-transform: translate(0%, -100%);
+  -o-transform: translate(0%, -100%);
+  -ms-transform: translate(0%, -100%);
+  transform: translate(0%, -100%);
 }
 /*--------------
       Fade
 ---------------*/
-.ui.fade.reveal > :first-child {
+.ui.fade.reveal > .visible.content {
   opacity: 1;
 }
-.ui.fade.reveal:hover > :first-child {
+.ui.fade.reveal:hover > .visible.content {
   opacity: 0;
 }
 /*--------------
       Move
 ---------------*/
-.ui.move.reveal > :first-child,
-.ui.move.left.reveal > :first-child {
-  left: auto !important;
-  top: auto !important;
-  bottom: auto !important;
-  right: 0% !important;
-}
-.ui.move.reveal:hover > :first-child,
-.ui.move.left.reveal:hover > :first-child {
-  right: 100% !important;
-}
-.ui.move.right.reveal > :first-child {
-  right: auto !important;
-  top: auto !important;
-  bottom: auto !important;
-  left: 0% !important;
-}
-.ui.move.right.reveal:hover > :first-child {
-  left: 100% !important;
-}
-.ui.move.up.reveal > :first-child {
-  right: auto !important;
-  left: auto !important;
-  top: auto !important;
-  bottom: 0% !important;
-}
-.ui.move.up.reveal:hover > :first-child {
-  bottom: 100% !important;
-}
-.ui.move.down.reveal > :first-child {
-  right: auto !important;
-  left: auto !important;
-  top: 0% !important;
-  bottom: auto !important;
-}
-.ui.move.down.reveal:hover > :first-child {
-  top: 100% !important;
+.ui.move.reveal > .visible.content,
+.ui.move.left.reveal > .visible.content {
+  -webkit-transform: translate(0%, 0%);
+  -moz-transform: translate(0%, 0%);
+  -o-transform: translate(0%, 0%);
+  -ms-transform: translate(0%, 0%);
+  transform: translate(0%, 0%);
+}
+.ui.move.reveal:hover > .visible.content,
+.ui.move.left.reveal:hover > .visible.content {
+  -webkit-transform: translate(-100%, 0%);
+  -moz-transform: translate(-100%, 0%);
+  -o-transform: translate(-100%, 0%);
+  -ms-transform: translate(-100%, 0%);
+  transform: translate(-100%, 0%);
+}
+.ui.move.right.reveal:hover > .visible.content {
+  -webkit-transform: translate(100%, 0%);
+  -moz-transform: translate(100%, 0%);
+  -o-transform: translate(100%, 0%);
+  -ms-transform: translate(100%, 0%);
+  transform: translate(100%, 0%);
+}
+.ui.move.up.reveal:hover > .visible.content {
+  -webkit-transform: translate(0%, -100%);
+  -moz-transform: translate(0%, -100%);
+  -o-transform: translate(0%, -100%);
+  -ms-transform: translate(0%, -100%);
+  transform: translate(0%, -100%);
+}
+.ui.move.down.reveal:hover > .visible.content {
+  -webkit-transform: translate(0%, 100%);
+  -moz-transform: translate(0%, 100%);
+  -o-transform: translate(0%, 100%);
+  -ms-transform: translate(0%, 100%);
+  transform: translate(0%, 100%);
 }
 /*--------------
      Rotate
 ---------------*/
-.ui.rotate.reveal > :first-child {
+.ui.rotate.reveal > .visible.content {
   -webkit-transition-duration: 0.8s;
   -moz-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
@@ -204,30 +177,30 @@
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
-.ui.rotate.reveal > :first-child,
-.ui.rotate.right.reveal > :first-child {
+.ui.rotate.reveal > .visible.content,
+.ui.rotate.right.reveal > .visible.content {
   -webkit-transform-origin: bottom right;
   -moz-transform-origin: bottom right;
   -o-transform-origin: bottom right;
   -ms-transform-origin: bottom right;
   transform-origin: bottom right;
 }
-.ui.rotate.reveal:hover > :first-child,
-.ui.rotate.right.reveal:hover > :first-child {
+.ui.rotate.reveal:hover > .visible.content,
+.ui.rotate.right.reveal:hover > .visible.content {
   -webkit-transform: rotate(110deg);
   -moz-transform: rotate(110deg);
   -o-transform: rotate(110deg);
   -ms-transform: rotate(110deg);
   transform: rotate(110deg);
 }
-.ui.rotate.left.reveal > :first-child {
+.ui.rotate.left.reveal > .visible.content {
   -webkit-transform-origin: bottom left;
   -moz-transform-origin: bottom left;
   -o-transform-origin: bottom left;
   -ms-transform-origin: bottom left;
   transform-origin: bottom left;
 }
-.ui.rotate.left.reveal:hover > :first-child {
+.ui.rotate.left.reveal:hover > .visible.content {
   -webkit-transform: rotate(-110deg);
   -moz-transform: rotate(-110deg);
   -o-transform: rotate(-110deg);

src/collections/menu.less

@@ -286,7 +286,7 @@
 
 .ui.menu .item > .label,
 .ui.menu .item > a > .label {
-  font-size: 0.8em;
+  font-size: 0.875em;
   margin: -0.3em 0em -0.3em 0.3em;
   padding: 0.3em 0.8em;
   vertical-align: baseline;
@@ -515,7 +515,7 @@
   margin: 0em;
 }
 .ui.vertical.menu .dropdown.item .menu .item {
-  font-size: 0.9em;
+  font-size: 0.875em;
   padding: 0.75em 1em;
 }
 .ui.vertical.menu .dropdown.item .menu .item .icon {
@@ -528,7 +528,7 @@
 }
 .ui.vertical.menu .item > .menu > .item {
   padding: 0.5rem 1.5rem;
-  font-size: 0.85em;
+  font-size: 0.875em;
 }
 .ui.vertical.menu .item > .menu > .item:before {
   display: none;
@@ -565,7 +565,7 @@
   color: #FFFFFF;
 }
 .ui.tiered.menu .sub.menu .item {
-  font-size: 0.9rem;
+  font-size: 0.875rem;
 }
 .ui.tiered.menu .sub.menu .item:before {
   background-image: none;
@@ -937,7 +937,7 @@
 
   opacity: 1;
   color: rgba(50, 50, 50, 0.8);
-  font-size: 0.9rem;
+  font-size: 0.875rem;
   padding: 0em;
   text-transform: uppercase;
   font-weight: bold;
@@ -1508,9 +1508,15 @@
   ;
 }
 
+/* Don't double up pointers */
+.ui.pointing.menu .active.item .menu .active.item:after {
+  display: none;
+}
+
 .ui.vertical.pointing.menu .active.item:after {
   position: absolute;
   top: 50%;
+  margin-top: -0.3em;
   right: -0.4em;
   bottom: auto;
   left: auto;
@@ -1518,8 +1524,6 @@
   border: none;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-right: 1px solid rgba(0, 0, 0, 0.1);
-
-  margin-top: -0.3em;
 }
 
 /* Colors */

src/elements/label.less

@@ -636,10 +636,6 @@ a.ui.teal.tag.label:hover:before {
   top: -1em;
   left: 100%;
   margin: 0em 0em 0em -1.5em !important;
-  
-  -webkit-box-shadow: 0px -2px 0 0px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0px -2px 0 0px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px -2px 0 0px rgba(0, 0, 0, 0.1) inset;
 }
 
 /*-------------------

src/modules/accordion.js

@@ -90,6 +90,14 @@ $.fn.accordion = function(parameters) {
             else {
               module.open(activeIndex);
             }
+          },
+
+          resetStyle: function() {
+            $(this)
+              .removeAttr('style')
+              .children()
+                .removeAttr('style')
+            ;
           }
 
         },
@@ -113,7 +121,7 @@ $.fn.accordion = function(parameters) {
                 .children()
                   .animate({
                     opacity: 0
-                  }, settings.speed)
+                  }, settings.speed, module.event.resetStyle)
                   .end()
                 .slideUp(settings.speed , settings.easing, function() {
                   $previousContent
@@ -161,7 +169,7 @@ $.fn.accordion = function(parameters) {
             .children()
               .animate({
                 opacity: 0
-              }, settings.speed)
+              }, settings.speed, module.event.resetStyle)
               .end()
             .slideUp(settings.speed, settings.easing, function(){
               $activeContent
@@ -329,7 +337,7 @@ $.fn.accordion.settings = {
 
   debug       : true,
   verbose     : true,
-  performance : true,
+  performance : false,
   
   exclusive   : true,
   collapsible : true,

src/modules/accordion.less

@@ -69,6 +69,22 @@
 }
 
 
+/*--------------
+ Loose Coupling
+---------------*/
+
+.ui.basic.accordion.menu {
+  background-color: #FFFFFF;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+}
+.ui.basic.accordion.menu .title,
+.ui.basic.accordion.menu .content {
+  padding: 0em;
+}
+
+
 /*******************************
             States
 *******************************/

src/modules/reveal.less

@@ -17,47 +17,21 @@
 
 .ui.reveal  {
   position: relative !important;
-  z-index: 2 !important;
+  z-index: 3 !important;
 }
 
-.ui.reveal > :first-child {
-  -webkit-transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  -moz-transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  -ms-transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-}
 
-.ui.reveal > :first-child {
+.ui.reveal > .visible.content {
   position: absolute !important;
   top: 0em !important;
   left: 0em !important;
   width: 100% !important;
   height: 100% !important;
   z-index: 4 !important;
-  -webkit-transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  -moz-transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  -ms-transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
-  transition:
-    all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s
-  ;
 }
-.ui.reveal > :last-child {
+
+.ui.reveal > .hidden.content {
   position: relative !important;
-  z-index: 3 !important;
 }
 
 /*------------------
@@ -80,119 +54,85 @@
 ---------------*/
 
 .ui.slide.reveal {
-  position: relative !important;
-  display: block !important;
   overflow: hidden !important;
-
   white-space: nowrap;
 }
 
-.ui.slide.reveal > * {
+.ui.slide.reveal > .content {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-
   margin: 0em;
-  padding: 0em 1em;
-  -webkit-transition:
-    top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important,
-    left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important,
-    right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important,
-    bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important
-  ;
-  -moz-transition:
-    top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important,
-    left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important,
-    right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important,
-    bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important
-  ;
-  -ms-transition:
-    top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important,
-    left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important,
-    right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important,
-    bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important
-  ;
-  transition:
-    top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important,
-    left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important,
-    right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important,
-    bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s !important
-  ;
 }
-.ui.slide.reveal > :first-child {
+
+/* Slide Left */
+.ui.slide.reveal > .visible.content {
   position: relative !important;
+  width: auto !important;
 }
-.ui.slide.reveal > :last-child {
-  display: inline-block;
+.ui.slide.reveal > .hidden.content {
   position: absolute !important;
   top: 0% !important;
-  left: 100% !important;
+  left: 0% !important;
   width: 100% !important;
+  height: 100% !important;
+
+  padding: inherit !important;
+  
+  -webkit-transform: translate(100%, 0%);
+  -moz-transform: translate(100%, 0%);
+  -o-transform: translate(100%, 0%);
+  -ms-transform: translate(100%, 0%);
+  transform: translate(100%, 0%);
 }
-.ui.slide.reveal:hover > :first-child {
+.ui.slide.reveal:hover > .visible.content {
   left: -100% !important;
 }
-.ui.slide.reveal:hover > :last-child {
-  left: 0% !important;
+.ui.slide.reveal:hover > .hidden.content {
+  -webkit-transform: translate(0%, 0%) !important;
+  -moz-transform: translate(0%, 0%) !important;
+  -o-transform: translate(0%, 0%) !important;
+  -ms-transform: translate(0%, 0%) !important;
+  transform: translate(0%, 0%) !important;
 }
 
-.ui.right.slide.reveal > :first-child {
-  left: 0%;
-}
-.ui.right.slide.reveal > :last-child {
-  left: auto !important;
-  right: 100% !important;
-}
-.ui.right.slide.reveal:hover > :first-child {
+/* Slide Right */
+.ui.slide.right.reveal:hover > .visible.content {
   left: 100% !important;
-  right: auto !important;
 }
-.ui.right.slide.reveal:hover > :last-child {
-  left: auto !important;
-  right: 0% !important;
+.ui.slide.right.reveal > .hidden.content {
+  -webkit-transform: translate(-100%, 0%);
+  -moz-transform: translate(-100%, 0%);
+  -o-transform: translate(-100%, 0%);
+  -ms-transform: translate(-100%, 0%);
+  transform: translate(-100%, 0%);
 }
 
-.ui.up.slide.reveal > :first-child {
-  top: 0% !important;
-  left: 0% !important;
-  right: auto !important;
-  bottom: auto !important;
-}
-.ui.up.slide.reveal > :last-child {
-  top: 100% !important;
-  left: 0% !important;
-  right: auto !important;
-  bottom: auto !important;
-}
-.ui.slide.up.reveal:hover > :first-child {
+/* Slide Up */
+.ui.slide.up.reveal:hover > .visible.content {
   top: -100% !important;
   left: 0% !important;
 }
-.ui.slide.up.reveal:hover > :last-child {
-  top: 0% !important;
-  left: 0% !important;
+.ui.slide.up.reveal > .hidden.content {
+  -webkit-transform: translate(0, 100%);
+  -moz-transform: translate(0, 100%);
+  -o-transform: translate(0, 100%);
+  -ms-transform: translate(0, 100%);
+  transform: translate(0, 100%);
 }
 
-.ui.down.slide.reveal > :first-child {
-  top: auto !important;
-  right: auto !important;
-  bottom: auto !important;
-  bottom: 0% !important;
-}
-.ui.down.slide.reveal > :last-child {
-  top: auto !important;
-  right: auto !important;
-  bottom: 100% !important;
-  left: 0% !important;
-}
-.ui.slide.down.reveal:hover > :first-child {
+/* Slide Down */
+.ui.slide.down.reveal:hover > .visible.content {
+  top: 100% !important;
   left: 0% !important;
-  bottom: -100% !important;
 }
-.ui.slide.down.reveal:hover > :last-child {
-  left: 0% !important;
-  bottom: 0% !important;
+.ui.slide.down.reveal > .hidden.content {
+  -webkit-transform: translate(0%, -100%);
+  -moz-transform: translate(0%, -100%);
+  -o-transform: translate(0%, -100%);
+  -ms-transform: translate(0%, -100%);
+  transform: translate(0%, -100%);
 }
 
 
@@ -201,10 +141,10 @@
       Fade
 ---------------*/
 
-.ui.fade.reveal > :first-child {
+.ui.fade.reveal > .visible.content {
   opacity: 1;
 }
-.ui.fade.reveal:hover > :first-child {
+.ui.fade.reveal:hover > .visible.content {
   opacity: 0;
 }
 
@@ -213,49 +153,43 @@
       Move
 ---------------*/
 
-.ui.move.reveal > :first-child,
-.ui.move.left.reveal > :first-child {
-  left: auto !important;
-  top: auto !important;
-  bottom: auto !important;
-  right: 0% !important;
-}
-.ui.move.reveal:hover > :first-child,
-.ui.move.left.reveal:hover > :first-child {
-  right: 100% !important;
-}
-
-.ui.move.right.reveal > :first-child {
-  right: auto !important;
-  top: auto !important;
-  bottom: auto !important;
-  left: 0% !important;
-}
-.ui.move.right.reveal:hover > :first-child {
-  left: 100% !important;
-}
-
-.ui.move.up.reveal > :first-child {
-  right: auto !important;
-  left: auto !important;
-  top: auto !important;
-
-  bottom: 0% !important;
-}
-.ui.move.up.reveal:hover > :first-child {
-  bottom: 100% !important;
-}
-
-.ui.move.down.reveal > :first-child {
-  right: auto !important;
-  left: auto !important;
-  bottom: auto !important;
-
-  top: 0% !important;
-  bottom: auto !important;
-}
-.ui.move.down.reveal:hover > :first-child {
-  top: 100% !important;
+.ui.move.reveal > .visible.content,
+.ui.move.left.reveal > .visible.content {
+  -webkit-transform: translate(0%, 0%);
+  -moz-transform: translate(0%, 0%);
+  -o-transform: translate(0%, 0%);
+  -ms-transform: translate(0%, 0%);
+  transform: translate(0%, 0%);
+}
+.ui.move.reveal:hover > .visible.content,
+.ui.move.left.reveal:hover > .visible.content {
+  -webkit-transform: translate(-100%, 0%);
+  -moz-transform: translate(-100%, 0%);
+  -o-transform: translate(-100%, 0%);
+  -ms-transform: translate(-100%, 0%);
+  transform: translate(-100%, 0%);
+}
+
+.ui.move.right.reveal:hover > .visible.content {
+  -webkit-transform: translate(100%, 0%);
+  -moz-transform: translate(100%, 0%);
+  -o-transform: translate(100%, 0%);
+  -ms-transform: translate(100%, 0%);
+  transform: translate(100%, 0%);
+}
+.ui.move.up.reveal:hover > .visible.content {
+  -webkit-transform: translate(0%, -100%);
+  -moz-transform: translate(0%, -100%);
+  -o-transform: translate(0%, -100%);
+  -ms-transform: translate(0%, -100%);
+  transform: translate(0%, -100%);
+}
+.ui.move.down.reveal:hover > .visible.content {
+  -webkit-transform: translate(0%, 100%);
+  -moz-transform: translate(0%, 100%);
+  -o-transform: translate(0%, 100%);
+  -ms-transform: translate(0%, 100%);
+  transform: translate(0%, 100%);
 }
 
 
@@ -263,7 +197,7 @@
      Rotate
 ---------------*/
 
-.ui.rotate.reveal > :first-child {
+.ui.rotate.reveal > .visible.content {
   -webkit-transition-duration: 0.8s;
   -moz-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
@@ -277,16 +211,16 @@
   transform: rotate(0deg);
 }
 
-.ui.rotate.reveal > :first-child,
-.ui.rotate.right.reveal > :first-child {
+.ui.rotate.reveal > .visible.content,
+.ui.rotate.right.reveal > .visible.content {
   -webkit-transform-origin: bottom right;
   -moz-transform-origin: bottom right;
   -o-transform-origin: bottom right;
   -ms-transform-origin: bottom right;
   transform-origin: bottom right;
 }
-.ui.rotate.reveal:hover > :first-child,
-.ui.rotate.right.reveal:hover > :first-child {
+.ui.rotate.reveal:hover > .visible.content,
+.ui.rotate.right.reveal:hover > .visible.content {
   -webkit-transform: rotate(110deg);
   -moz-transform: rotate(110deg);
   -o-transform: rotate(110deg);
@@ -294,14 +228,14 @@
   transform: rotate(110deg);
 }
 
-.ui.rotate.left.reveal > :first-child {
+.ui.rotate.left.reveal > .visible.content {
   -webkit-transform-origin: bottom left;
   -moz-transform-origin: bottom left;
   -o-transform-origin: bottom left;
   -ms-transform-origin: bottom left;
   transform-origin: bottom left;
 }
-.ui.rotate.left.reveal:hover > :first-child {
+.ui.rotate.left.reveal:hover > .visible.content {
   -webkit-transform: rotate(-110deg);
   -moz-transform: rotate(-110deg);
   -o-transform: rotate(-110deg);