*,:after,:before{box-sizing:border-box}html{color:#333;font-family:Nunito Sans,sans-serif;font-size:18px;font-weight:300;line-height:1.5}body{background-attachment:fixed;background-color:#ecf0f9;height:100vh;margin:0;padding:0}.content{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;max-width:1000px}.heading{font-size:2.25rem;font-weight:900;letter-spacing:.1ch;line-height:1;margin-bottom:1rem;margin-left:1rem;padding-bottom:.5em;position:relative;text-transform:uppercase;width:100%}.heading:after{background:linear-gradient(135deg,#1a9be6,#1a57e6);bottom:0;content:"";display:block;height:4px;position:absolute;width:60px}.description{margin-bottom:3rem;margin-left:1rem;margin-top:0;width:100%}.card{color:inherit;cursor:pointer;height:250px;margin:1rem;min-height:250px;min-width:250px;perspective:1000px;position:relative;width:250px}@media screen and (max-width:800px){.card{width:calc(50% - 2rem)}}@media screen and (max-width:500px){.card{width:100%}}.back,.front{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;background-position:50%;border-radius:6px;display:flex;height:100%;justify-content:center;position:absolute;text-align:center;transform-style:preserve-3d;transition:.6s ease-in-out;width:100%}.back,.front{background-size:cover}.front{color:#0074ba;font-family:Poppins,Arial;font-size:2.618rem;font-weight:200;overflow:hidden;padding:2rem}.front:before{background:linear-gradient(135deg,#dedede,#dedede);bottom:0;content:"";display:block;left:0;opacity:.25;position:absolute;right:0;top:0;z-index:-1}.card:hover .front{transform:rotateY(180deg)}.back,.card:nth-child(2n):hover .front{transform:rotateY(-180deg)}.back{background:#fff}.back .button{background:linear-gradient(135deg,#dedede,#dedede)}.card:hover .back{transform:rotateY(0deg)}.card:nth-child(2n) .back{transform:rotateY(180deg)}.card:nth-child(2n) .back .button{background:linear-gradient(135deg,#f4921f,#f4921f)}.card:nth-child(2n):hover .back{transform:rotateY(0deg)}.button{border:none;border-radius:100px;color:#fff;cursor:pointer;font-weight:700;font:inherit;padding:.5em 1em;position:relative;transform:translateZ(40px);transform-style:preserve-3d}.button,.button:before{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:.3s ease}.button:before{border-radius:100px;content:"";display:block;height:calc(100% - 20px);left:10px;position:absolute;top:16px;transform:translateZ(-40px);width:calc(100% - 20px)}.button:hover{transform:translateZ(55px)}.button:hover:before{transform:translateZ(-55px)}.button:active{transform:translateZ(20px)}.button:active:before{top:12px;transform:translateZ(-20px)}