.card,.cards .back,.cards .face{background:#6236ff;border-radius:1rem;box-shadow:0 0 30px 0 rgba(0,0,0,.3);cursor:pointer;display:flex;flex-direction:column;height:200px;justify-content:space-between;width:340px}.cards .face .head{display:flex;justify-content:space-between;margin:16px 16px 0}.cards .face .head .title{font-size:20px;font-weight:600}.cards .face .card-main{margin:16px 16px 0}.cards .face .card-main .number-title{color:#ccc}.cards .face .card-main .number{font-size:24px}.cards .face .dates{display:flex;justify-content:space-between;margin:16px;max-width:100px}.cards .back{-webkit-animation:demo 3s ease-in-out;animation:demo 3s ease-in-out;background:#6236ff;left:0;position:absolute;top:0;transform:translateX(0) translateY(15px);transition:transform 1s;z-index:-1}.cards .back .magnetic-line{background:#000;height:32px;margin-top:16px;width:100%}.cards .back .cvv{background:hsla(0,0%,100%,.2);border-radius:4px;display:flex;flex-direction:column;height:24px;justify-content:center;margin:0 16px 66.6666666667px 0;padding-right:8px;text-align:end;width:235.6666666667px}.cards:hover .back{transform:translateX(70px) translateY(-20px);transition:transform 1s}@-webkit-keyframes demo{0%{transform:translateX(0) translateY(0)}50%{transform:translateX(70px) translateY(-20px)}75%{transform:translateX(70px) translateY(-20px)}to{transform:translateX(0) translateY(0)}}@keyframes demo{0%{transform:translateX(0) translateY(0)}50%{transform:translateX(70px) translateY(-20px)}75%{transform:translateX(70px) translateY(-20px)}to{transform:translateX(0) translateY(0)}}.face-id-wrapper{left:16%;position:relative;top:-4rem!important;width:70px}.face-id-wrapper svg{position:absolute;fill:#aaa;stroke:#aaa}.face-id-wrapper.active .face-id-default{opacity:0;transform:scale(1.2);transition:opacity 1.5s,transform 1s;stroke:#31c4ff}.circle{background:transparent;border:3px solid #000;border-radius:50%;box-sizing:border-box;height:80px;opacity:0;position:absolute;width:80px}.active .circle{opacity:1;transition:opacity .7s,transform 2.2s}.circle.green{border:3px solid #de2f5f}.circle.blue{border:3px solid #6236ff}.circle.purple{border:3px solid #f1e8b8}.active .circle.green{transform:rotateX(1turn)}.active .circle.blue{transform:rotateY(1turn)}.active .circle.purple{transform:rotateY(1turn) rotateX(1turn)}.completed .circle.purple{border:3px solid #1a1c1e;transition:border .7s}.path-tick{opacity:0}.completed .path-tick{stroke-dasharray:49.497474670410156;stroke-dashoffset:0;animation:dash .6s linear forwards;stroke-opacity:1;opacity:1;transition:stroke-opacity step .1s}@keyframes dash{0%{stroke-dashoffset:49.497474670410156;stroke-opacity:1}60%{stroke-dashoffset:49.497474670410156}to{stroke-dashoffset:0;stroke-opacity:1}}@media(max-width:980px){.face-id-wrapper{left:12%;top:-3rem!important}.section--two-col .phone-img img{bottom:-6rem}}@media(max-width:680px){.face-id-wrapper{left:20%}}