.card-wrapper{display:inline-block;background-color:transparent;perspective:1000px;width:100%;height:300px}.card-wrapper .card{position:relative;width:100%;height:100%;text-align:center;transition:transform .6s;transform-style:preserve-3d;border:0}.card-wrapper .card .back,.card-wrapper .card .front{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;transform:rotateX(0deg)}.card-wrapper .card .front{z-index:2}.card-wrapper .card .back,.card-wrapper.flip-right .card .back,.card-wrapper.flip-right:hover .card,.card-wrapper:hover .card{transform:rotateY(180deg)}.card-wrapper.flip-left .card .back,.card-wrapper.flip-left:hover .card{transform:rotateY(-180deg)}.card-wrapper.flip-up .card .back,.card-wrapper.flip-up:hover .card{transform:rotateX(180deg)}.card-wrapper.flip-down .card .back,.card-wrapper.flip-down:hover .card{transform:rotateX(-180deg)}.card-wrapper.flip-diagonal-right .card .back,.card-wrapper.flip-diagonal-right:hover .card{transform:rotate3d(1,1,0,180deg)}.card-wrapper.flip-diagonal-left .card .back,.card-wrapper.flip-diagonal-left:hover .card{transform:rotate3d(1,1,0,-180deg)}.card-wrapper.flip-inverted-diagonal-right .card .back,.card-wrapper.flip-inverted-diagonal-right:hover .card{transform:rotate3d(-1,1,0,180deg)}.card-wrapper.flip-inverted-diagonal-left .card .back,.card-wrapper.flip-inverted-diagonal-left:hover .card{transform:rotate3d(1,-1,0,180deg)}.front h4{position:absolute;bottom:20px;left:0;right:0;color:#fff;padding:0 20px}.img-height,.img-height img{line-height:0}.img-height img{width:100%;height:300px}.back{background-color:#b6246e;color:#fff;transform:rotateY(180deg);padding:50px;display:table}.back .middle{display:table-cell;vertical-align:middle}