.flipwrapper{width:200px;height:220px;position:relative;-webkit-perspective:700px;perspective:700px;margin-top:1.5rem}.flipwrapper .flipcontainer{width:100%;height:100%;position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform 1s;transition:-webkit-transform 1s;transition:transform 1s;transition:transform 1s, -webkit-transform 1s}.flipwrapper .flipcontainer .front,.flipwrapper .flipcontainer .back{margin:0;display:block;position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.flipwrapper .flipcontainer .front.flip3d,.flipwrapper .flipcontainer .back.flip3d{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.flipwrapper .flipcontainer .front.flip3d>*,.flipwrapper .flipcontainer .back.flip3d>*{-webkit-transform:translateZ(40px);transform:translateZ(40px)}.flipwrapper .flipcontainer .front>img,.flipwrapper .flipcontainer .back>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.flipwrapper .flipcontainer .front{background-color:#fff}.flipwrapper .flipcontainer .back{background-color:#fff;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.flipwrapper:hover .flipcontainer{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.flipwrapper.vertical .flipcontainer .back{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.flipwrapper.vertical:hover .flipcontainer{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}