*{margin:0;padding:0;font-weight:inherit;font-size:inherit;font-family:Geometria}main{min-height:100vh;display:flex;justify-content:center;align-items:center}@media screen and (max-width:960px){main{flex-direction:column;padding:150px 0}}.card{width:200px;height:200px;min-width:200px;min-height:200px;position:relative;margin:50px;border-radius:10px}.card .bg-face,.card .fg-face{display:flex;align-items:center;justify-content:center}.card .fg-face{background:#e64b3d;z-index:2;color:#fff}.card .fg-face i{width:100%;height:100%;font-size:90px}.card .bg-face{background:#fff;font-size:12px;box-shadow:0 0 30px 0 #eee}.card .bg-face .content{padding:0 20px;text-align:center}.card .bg-face h3{font-size:16px;font-weight:600;padding-bottom:10px}.card .bg-face p{font-weight:400}.card .bg-face,.card .fg-face{border-radius:10px;position:absolute;width:100%;height:100%;transition:.3s;min-width:200px;min-height:200px}.card .fg-face:active,.card .fg-face:focus,.card .fg-face:hover,.card:hover .fg-face{transform:translate(-25%,-43%)}.card .bg-face:active,.card .bg-face:focus,.card .bg-face:hover,.card:hover .bg-face{transform:translate(25%,43%)}