.flip-box{height:130px;margin:1em auto;-webkit-perspective:600px;-moz-perspective:600px;position:relative;width:100%}.flip-box--back-content,.flip-box--front-content{padding:2em 3em}.flip-vertical .flip-box--back-content,.flip-vertical .flip-box--front-content{padding:3em 4em}.flip-box--back,.flip-box--front{bottom:0;display:flex;flex-direction:column;height:inherit;left:0;position:absolute;right:0;top:0;width:100%}.flip-box--front{-webkit-transform:rotateX(0deg) rotateY(0deg);-moz-transform:rotateX(0deg) rotateY(0deg);z-index:900}.flip-box--back,.flip-box--front{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.flip-box--back{z-index:1000}.flip-horizontal .flip-box--back{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg)}.flip-horizontal:hover .flip-box--front{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);z-index:900}.flip-horizontal:hover .flip-box--back{-webkit-transform:rotateX(0deg) rotateY(0deg);-moz-transform:rotateX(0deg) rotateY(0deg);z-index:1000}.flip-vertical .flip-box--back{-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg)}.flip-vertical:hover .flip-box--front{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);z-index:900}.flip-vertical:hover .flip-box--back{-webkit-transform:rotateX(0deg) rotateY(0deg);-moz-transform:rotateX(0deg) rotateY(0deg);z-index:1000}