[hidden]{display:none}.demo{margin-top:20px;margin-bottom:40px}.demo--intro{border-bottom:1px solid #ddd}.btn{display:inline-block;text-align:center;vertical-align:middle;cursor:pointer;border:1px solid #bbb;padding:4px 12px 6px;font-size:18px;background-color:#fff;border-radius:4px;transition:background-color .3s,color .3s}.btn:hover,.btn:active{background-color:#f3f3f3}.btn-white{color:#fff;border-color:#fff;background-color:transparent}.install .btn{margin-right:15px;margin-bottom:15px}pre{display:block;padding:10px 15px;margin:0 0 20px;overflow:auto;font-family:cutive mono,monospace;font-size:14px;word-break:break-all;word-wrap:break-word;background-color:#f3f3f3;border:1px solid #bbb;border-radius:4px}.swing--in-top .direction-reveal__overlay{-webkit-animation-name:swing--in-top;animation-name:swing--in-top}.swing--in-bottom .direction-reveal__overlay{-webkit-animation-name:swing--in-bottom;animation-name:swing--in-bottom}.swing--in-left .direction-reveal__overlay{-webkit-animation-name:swing--in-left;animation-name:swing--in-left}.swing--in-right .direction-reveal__overlay{-webkit-animation-name:swing--in-right;animation-name:swing--in-right}.swing--out-top .direction-reveal__overlay{-webkit-animation-name:swing--out-top;animation-name:swing--out-top}.swing--out-bottom .direction-reveal__overlay{-webkit-animation-name:swing--out-bottom;animation-name:swing--out-bottom}.swing--out-left .direction-reveal__overlay{-webkit-animation-name:swing--out-left;animation-name:swing--out-left}.swing--out-right .direction-reveal__overlay{-webkit-animation-name:swing--out-right;animation-name:swing--out-right}.direction-reveal [class*=swing--] .direction-reveal__overlay{-webkit-transform:rotate3d(0,0,0,0);transform:rotate3d(0,0,0,0);-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}.swing--in-top,.swing--out-top{-webkit-perspective-origin:center top;perspective-origin:center top}.swing--in-top .direction-reveal__overlay,.swing--out-top .direction-reveal__overlay{-webkit-transform-origin:center top;transform-origin:center top}.swing--in-bottom,.swing--out-bottom{-webkit-perspective-origin:center bottom;perspective-origin:center bottom}.swing--in-bottom .direction-reveal__overlay,.swing--out-bottom .direction-reveal__overlay{-webkit-transform-origin:center bottom;transform-origin:center bottom}.swing--in-left,.swing--out-left{-webkit-perspective-origin:left center;perspective-origin:left center}.swing--in-left .direction-reveal__overlay,.swing--out-left .direction-reveal__overlay{-webkit-transform-origin:left center;transform-origin:left center}.swing--in-right,.swing--out-right{-webkit-perspective-origin:right center;perspective-origin:right center}.swing--in-right .direction-reveal__overlay,.swing--out-right .direction-reveal__overlay{-webkit-transform-origin:right center;transform-origin:right center}@-webkit-keyframes swing--in-top{0%{-webkit-transform:rotate3d(-1,0,0,90deg);transform:rotate3d(-1,0,0,90deg)}}@keyframes swing--in-top{0%{-webkit-transform:rotate3d(-1,0,0,90deg);transform:rotate3d(-1,0,0,90deg)}}@-webkit-keyframes swing--out-top{100%{-webkit-transform:rotate3d(-1,0,0,90deg);transform:rotate3d(-1,0,0,90deg)}}@keyframes swing--out-top{100%{-webkit-transform:rotate3d(-1,0,0,90deg);transform:rotate3d(-1,0,0,90deg)}}@-webkit-keyframes swing--in-bottom{0%{-webkit-transform:rotate3d(1,0,0,90deg);transform:rotate3d(1,0,0,90deg)}}@keyframes swing--in-bottom{0%{-webkit-transform:rotate3d(1,0,0,90deg);transform:rotate3d(1,0,0,90deg)}}@-webkit-keyframes swing--out-bottom{100%{-webkit-transform:rotate3d(1,0,0,90deg);transform:rotate3d(1,0,0,90deg)}}@keyframes swing--out-bottom{100%{-webkit-transform:rotate3d(1,0,0,90deg);transform:rotate3d(1,0,0,90deg)}}@-webkit-keyframes swing--in-left{0%{-webkit-transform:rotate3d(0,1,0,90deg);transform:rotate3d(0,1,0,90deg)}}@keyframes swing--in-left{0%{-webkit-transform:rotate3d(0,1,0,90deg);transform:rotate3d(0,1,0,90deg)}}@-webkit-keyframes swing--out-left{100%{-webkit-transform:rotate3d(0,1,0,90deg);transform:rotate3d(0,1,0,90deg)}}@keyframes swing--out-left{100%{-webkit-transform:rotate3d(0,1,0,90deg);transform:rotate3d(0,1,0,90deg)}}@-webkit-keyframes swing--in-right{0%{-webkit-transform:rotate3d(0,-1,0,90deg);transform:rotate3d(0,-1,0,90deg)}}@keyframes swing--in-right{0%{-webkit-transform:rotate3d(0,-1,0,90deg);transform:rotate3d(0,-1,0,90deg)}}@-webkit-keyframes swing--out-right{100%{-webkit-transform:rotate3d(0,-1,0,90deg);transform:rotate3d(0,-1,0,90deg)}}@keyframes swing--out-right{100%{-webkit-transform:rotate3d(0,-1,0,90deg);transform:rotate3d(0,-1,0,90deg)}}.slide--in-top .direction-reveal__overlay{-webkit-animation-name:slide--in-top;animation-name:slide--in-top}.slide--in-bottom .direction-reveal__overlay{-webkit-animation-name:slide--in-bottom;animation-name:slide--in-bottom}.slide--in-left .direction-reveal__overlay{-webkit-animation-name:slide--in-left;animation-name:slide--in-left}.slide--in-right .direction-reveal__overlay{-webkit-animation-name:slide--in-right;animation-name:slide--in-right}.slide--out-top .direction-reveal__overlay{-webkit-animation-name:slide--out-top;animation-name:slide--out-top}.slide--out-bottom .direction-reveal__overlay{-webkit-animation-name:slide--out-bottom;animation-name:slide--out-bottom}.slide--out-left .direction-reveal__overlay{-webkit-animation-name:slide--out-left;animation-name:slide--out-left}.slide--out-right .direction-reveal__overlay{-webkit-animation-name:slide--out-right;animation-name:slide--out-right}.direction-reveal [class*=slide--] .direction-reveal__overlay{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-timing-function:cubic-bezier(.25,.46,.45,.94)}@-webkit-keyframes slide--in-top{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slide--in-top{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes slide--out-top{100%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slide--out-top{100%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes slide--in-bottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slide--in-bottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes slide--out-bottom{100%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slide--out-bottom{100%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes slide--in-left{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slide--in-left{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes slide--out-left{100%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slide--out-left{100%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes slide--in-right{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slide--in-right{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes slide--out-right{100%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slide--out-right{100%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.rotate--in-top .direction-reveal__overlay{-webkit-animation-name:rotate--in-top;animation-name:rotate--in-top}.rotate--in-bottom .direction-reveal__overlay{-webkit-animation-name:rotate--in-bottom;animation-name:rotate--in-bottom}.rotate--in-left .direction-reveal__overlay{-webkit-animation-name:rotate--in-left;animation-name:rotate--in-left}.rotate--in-right .direction-reveal__overlay{-webkit-animation-name:rotate--in-right;animation-name:rotate--in-right}.rotate--out-top .direction-reveal__overlay{-webkit-animation-name:rotate--out-top;animation-name:rotate--out-top}.rotate--out-bottom .direction-reveal__overlay{-webkit-animation-name:rotate--out-bottom;animation-name:rotate--out-bottom}.rotate--out-left .direction-reveal__overlay{-webkit-animation-name:rotate--out-left;animation-name:rotate--out-left}.rotate--out-right .direction-reveal__overlay{-webkit-animation-name:rotate--out-right;animation-name:rotate--out-right}.direction-reveal [class*=rotate--] .direction-reveal__overlay{-webkit-transform:rotate(0);transform:rotate(0);-webkit-animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-timing-function:cubic-bezier(.25,.46,.45,.94)}.rotate--in-top .direction-reveal__overlay,.rotate--out-top .direction-reveal__overlay{-webkit-transform-origin:left top;transform-origin:left top}.rotate--in-bottom .direction-reveal__overlay,.rotate--out-bottom .direction-reveal__overlay{-webkit-transform-origin:left bottom;transform-origin:left bottom}.rotate--in-left .direction-reveal__overlay,.rotate--out-left .direction-reveal__overlay{-webkit-transform-origin:left top;transform-origin:left top}.rotate--in-right .direction-reveal__overlay,.rotate--out-right .direction-reveal__overlay{-webkit-transform-origin:right top;transform-origin:right top}@-webkit-keyframes rotate--in-top{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}@keyframes rotate--in-top{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}@-webkit-keyframes rotate--out-top{100%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}@keyframes rotate--out-top{100%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}@-webkit-keyframes rotate--in-bottom{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotate--in-bottom{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes rotate--out-bottom{100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotate--out-bottom{100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes rotate--in-left{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotate--in-left{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes rotate--out-left{100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotate--out-left{100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes rotate--in-right{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}@keyframes rotate--in-right{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}@-webkit-keyframes rotate--out-right{100%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}@keyframes rotate--out-right{100%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}.direction-reveal__card{display:inline-block;position:relative;overflow:hidden;-webkit-perspective:400px;perspective:400px}.direction-reveal__overlay{position:absolute;top:0;left:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);width:91%;height:100%;padding:15px;color:#fff;overflow:hidden;background-color:rgba(0,0,0,.6);-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-timing-function:cubic-bezier(.25,.46,.45,.94);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.direction-reveal__title{margin-top:0}.direction-reveal__text{margin-bottom:0}.direction-reveal--3-grid-flexbox{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-10px;margin-left:-10px}.direction-reveal--3-grid-flexbox .direction-reveal__card{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:23.333%;border:10px solid transparent}.direction-reveal--3-grid-flexbox .direction-reveal__card img{width:100%}.direction-reveal--3-grid-cssgrid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);margin-right:-10px;margin-left:-10px}.direction-reveal--3-grid-cssgrid .direction-reveal__card{border:10px solid transparent}.direction-reveal--grid-bootstrap .direction-reveal__card{margin-top:15px;margin-bottom:15px}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}