[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 12px;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 0;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(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.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(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.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(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.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,0.6);-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);animation-timing-function:cubic-bezier(0.25,0.46,0.45,0.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;}