.card-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.card-container .form-container .form-group:first-of-type{grid-area:number}.card-container .form-container .form-group:nth-of-type(2){grid-area:expiration}.card-container .form-container .form-group:nth-of-type(3){grid-area:security}.card-container .form-group input{-webkit-box-sizing:border-box;box-sizing:border-box}.card-container .form-group{position:relative}.card-container .form-container{display:grid;grid-column-gap:10px;grid-template-columns:auto auto;grid-template-areas:"number number""expiration security";max-width:400px;padding:20px}.card-container .ccicon{height:33px;position:absolute;right:6px;top:calc(50% + 1px);width:60px}.card-container .preload *{-webkit-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;-o-transition:none!important}.card-container .container{width:100%;max-width:400px;max-height:251px;height:54vw;padding:20px}.card-container #ccsingle{position:absolute;right:15px;top:20px}.card-container #ccsingle svg{width:100px;max-height:60px}.card-container .creditcard svg#cardback,.card-container .creditcard svg#cardfront{width:100%;-webkit-box-shadow:1px 5px 6px 0 #000;box-shadow:1px 5px 6px 0 #000;border-radius:22px}.card-container #generatecard{cursor:pointer;float:right;font-size:12px;color:#fff;padding:2px 4px;background-color:#909090;border-radius:4px;cursor:pointer;float:right}.card-container .creditcard .darkcolor,.card-container .creditcard .lightcolor{-webkit-transition:fill .5s;transition:fill .5s}.card-container .creditcard .lightblue{fill:#03a9f4}.card-container .creditcard .lightbluedark{fill:#0288d1}.card-container .creditcard .red{fill:#ef5350}.card-container .creditcard .reddark{fill:#d32f2f}.card-container .creditcard .purple{fill:#ab47bc}.card-container .creditcard .purpledark{fill:#7b1fa2}.card-container .creditcard .cyan{fill:#26c6da}.card-container .creditcard .cyandark{fill:#0097a7}.card-container .creditcard .green{fill:#66bb6a}.card-container .creditcard .greendark{fill:#388e3c}.card-container .creditcard .lime{fill:#d4e157}.card-container .creditcard .limedark{fill:#afb42b}.card-container .creditcard .yellow{fill:#ffeb3b}.card-container .creditcard .yellowdark{fill:#f9a825}.card-container .creditcard .orange{fill:#ff9800}.card-container .creditcard .orangedark{fill:#ef6c00}.card-container .creditcard .grey{fill:#bdbdbd}.card-container .creditcard .greydark{fill:#616161}.card-container #svgname{text-transform:uppercase}.card-container #cardfront .st2{fill:#fff}.card-container #cardfront .st3{font-family:'Source Code Pro',monospace;font-weight:600}.card-container #cardfront .st4{font-size:54.7817px}.card-container #cardfront .st5{font-family:'Source Code Pro',monospace;font-weight:400}.card-container #cardfront .st6{font-size:33.1112px}.card-container #cardfront .st7{opacity:.6;fill:#fff}.card-container #cardfront .st8{font-size:24px}.card-container #cardfront .st9{font-size:36.5498px}.card-container #cardfront .st10{font-family:'Source Code Pro',monospace;font-weight:300}.card-container #cardfront .st11{font-size:16.1716px}.card-container #cardfront .st12{fill:#4c4c4c}.card-container #cardback .st0{fill:none;stroke:#0f0f0f;stroke-miterlimit:10}.card-container #cardback .st2{fill:#111}.card-container #cardback .st3{fill:#f2f2f2}.card-container #cardback .st4{fill:#d8d2db}.card-container #cardback .st5{fill:#c4c4c4}.card-container #cardback .st6{font-family:'Source Code Pro',monospace;font-weight:400}.card-container #cardback .st7{font-size:27px}.card-container #cardback .st8{opacity:.6}.card-container #cardback .st9{fill:#fff}.card-container #cardback .st10{font-size:24px}.card-container #cardback .st11{fill:#eaeaea}.card-container #cardback .st12{font-family:'Rock Salt',cursive}.card-container #cardback .st13{font-size:37.769px}.card-container .container{perspective:1000px}.card-container .creditcard{width:100%;max-width:400px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:-webkit-transform .6s;-webkit-transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;cursor:pointer}.card-container .creditcard .back,.card-container .creditcard .front{position:absolute;width:100%;max-width:400px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-font-smoothing:antialiased;color:#47525d}.card-container .creditcard .back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.card-container .creditcard.flipped{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}