@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap);body{background:#ddeefc;margin:0;font-family:"Source Code Pro",monospace;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.App{height:100%;text-align:center;padding:50px 15px}*{box-sizing:border-box;font-family:"Source Code Pro",monospace}:focus{outline:none}.paycard{align-items:center}.card,.paycard{display:flex;flex-direction:column}.card{max-width:430px;width:100%;height:270px;margin-bottom:-130px;-webkit-transition:-webkit-transform .8s cubic-bezier(.71,.03,.56,.85);transition:-webkit-transform .8s cubic-bezier(.71,.03,.56,.85);transition:transform .8s cubic-bezier(.71,.03,.56,.85);transition:transform .8s cubic-bezier(.71,.03,.56,.85),-webkit-transform .8s cubic-bezier(.71,.03,.56,.85);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;position:-webkit-sticky;position:sticky;top:0}@media screen and (max-width:480px){.card{max-width:310px;height:220px}}.card--is-flipped{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.card__back,.card__front{height:100%;width:100%;position:absolute;display:flex;align-content:space-between;flex-direction:column}.card__background{height:100%;width:100%;box-shadow:0 20px 60px 0 rgba(14,42,90,.55);border-radius:15px;position:absolute;left:0;top:0;overflow:hidden;z-index:1}@media screen and (max-width:480px){.card__background{box-shadow:0 10px 30px 0 rgba(14,42,90,.55)}}.card__background img{height:100%;width:100%}.card__background:after{background:rgba(6,2,29,.45);width:100%;height:100%;content:"";position:absolute;left:0;top:0}.card__front .card__wrapper{padding:25px 15px;height:100%}.card__front .card__top{height:45px;margin-bottom:40px;padding:0 10px;display:flex;justify-content:space-between}@media screen and (max-width:480px){.card__front .card__top{height:40px;margin-bottom:25px}}.card__front .card__chip-icon,.card__front .card__visa-icon{z-index:2;height:100%}.card__front .card__chip-icon img,.card__front .card__visa-icon img{height:100%}.card__front .card__card-number{color:#fff;display:flex;justify-content:flex-start;align-items:center;margin-bottom:35px;padding:10px 15px;flex:1 1;z-index:3;cursor:pointer}@media screen and (max-width:480px){.card__front .card__card-number{margin-bottom:15px}}.card__front .card__card-number span{width:16px;font-size:28px;z-index:2;position:relative}@media screen and (max-width:480px){.card__front .card__card-number span{font-size:21px}}.card__front .card__card-number--space{width:30px!important}.card__front .card__content{display:flex;justify-content:space-between;align-items:flex-end;flex:1 1}.card__front .card__content *{z-index:2}.card__front .card__card-holder{width:100%}.card__front .card__card-holder,.card__front .card__expires{color:#fff;padding:10px 15px;text-align:left;cursor:pointer}.card__front .card__card-holder-title,.card__front .card__expires-title{opacity:.7;font-size:13px}@media screen and (max-width:480px){.card__front .card__card-holder-title,.card__front .card__expires-title{font-size:12px}}.card__front .card__card-holder-name,.card__front .card__card__expires-date{font-size:18px;white-space:nowrap;text-transform:uppercase}@media screen and (max-width:480px){.card__front .card__card-holder-name,.card__front .card__card__expires-date{font-size:16px}}.card__back{-webkit-transform:rotateY(180deg) translateZ(10px);transform:rotateY(180deg) translateZ(10px)}.card__back .card__bottom,.card__back .card__card-cvc,.card__back .card__top{z-index:2;display:flex;flex-direction:column;flex:1 1}.card__back .card__top{height:50px;margin-top:30px}.card__back .card__top .card__black-line{background-color:#000;height:100%;max-height:50px}.card__back .card__card-cvc{height:40px;box-shadow:0 10px 20px -7px rgba(32,56,117,.35);margin:0 20px}.card__back .card__card-cvc-title{color:#fff;text-align:right;padding-bottom:8px}.card__back .card__card-cvc-title span{padding:4px 6px}.card__back .card__card-cvc-number{background-color:#fff;color:#1a3b5d;border-radius:4px;height:100%;max-height:40px}.card__bottom .card__visa-icon{height:45px;max-height:45px;text-align:right;margin:10px 20px 0}.card__bottom .card__visa-icon img{height:100%}.card__focus-box{position:absolute;border:2px solid hsla(0,0%,100%,.65);border-radius:5px;z-index:2;-webkit-transition:all .35s cubic-bezier(.71,.03,.56,.85);transition:all .35s cubic-bezier(.71,.03,.56,.85);width:100%;height:100%;opacity:0}.card__focus-box--active{opacity:1}.slide-up-enter{opacity:0;-webkit-transform:translateY(15px);transform:translateY(15px)}.slide-up-enter-active{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition-delay:.1s;transition-delay:.1s}.slide-up-exit{opacity:1;position:absolute}.slide-up-exit-active{opacity:0;-webkit-transform:translateY(-15px);transform:translateY(-15px);pointer-events:none}.slide-up-enter-active,.slide-up-exit-active{-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.card-form{background-color:#fff;box-shadow:0 30px 60px 0 rgba(90,116,148,.4);border-radius:10px;max-width:570px;width:100%;padding:180px 35px 35px;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(4,1fr);grid-gap:20px;gap:20px;align-items:center}@media screen and (max-width:576px){.card-form{grid-template-rows:repeat(5,1fr)}}.card-form__cc-number{grid-row:1/1;grid-column:1/-1}.card-form__cc-name{grid-row:2/2;grid-column:1/-1}.card-form__cc-exp{grid-row:3/3;grid-column:1/1}@media screen and (max-width:576px){.card-form__cc-exp{grid-column:1/-1}}.card-form__cc-exp select:first-child{margin-right:8px}.card-form__cc-cvc{grid-row:3/3;grid-column:2/2}@media screen and (max-width:576px){.card-form__cc-cvc{grid-row:4;grid-column:1/-1}}.card-form__submit-btn{grid-row:4/4;grid-column:1/-1;background:#2364d2;color:#fff;box-shadow:3px 10px 20px 0 rgba(35,100,210,.3);width:100%;height:55px;border:none;border-radius:5px;font-size:22px;font-weight:500}@media screen and (max-width:576px){.card-form__submit-btn{grid-row:5;grid-column:1/-1}}.form-group{text-align:left;display:flex;flex-direction:column;flex:1 1}.form-group label{font-size:14px;margin-bottom:5px;font-weight:500;color:#1a3b5d;width:100%}.form-group input,.form-group select{border:1px solid #ced6e0;border-radius:5px;width:100%;height:50px;padding:5px 15px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.form-group input:focus,.form-group input:hover,.form-group select:focus,.form-group select:hover{border-color:#3d9cff}.form-group input:focus,.form-group select:focus{box-shadow:0 10px 20px -13px rgba(32,56,117,.35)}.row{display:flex;flex-direction:row}
/*# sourceMappingURL=main.51696553.chunk.css.map */