.logo{height:36px;width:60px;font-style:italic}.logo,.logo:before,.logo:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.logo.amex{text-transform:uppercase;font-size:4px;font-weight:bold;color:white;background-image:-webkit-repeating-radial-gradient(center,circle,#FFF 1px,#999 2px);background-image:repeating-radial-gradient(circle at center,#FFF 1px,#999 2px);background-image:repeating-radial-gradient(circle at center,#FFF 1px,#999 2px);border:1px solid #EEE}.logo.amex:before,.logo.amex:after{width:28px;display:block;position:absolute;left:16px}.logo.amex:before{height:28px;content:"american";top:3px;text-align:left;padding-left:2px;padding-top:11px;background:#267ac3}.logo.amex:after{content:"express";bottom:11px;text-align:right;padding-right:2px}.card.amex.flipped{-webkit-transform:none;-ms-transform:none;transform:none}.card.amex.identified .front:before,.card.amex.identified .back:before{background-color:#108168}.card.amex.identified .front .logo.amex{opacity:1}.card.amex.identified .front .cvc{visibility:visible}.card.amex.identified .front:after{opacity:1}.logo{height:36px;width:60px;font-style:italic}.logo,.logo:before,.logo:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.logo.discover{background:#f60;color:#111;text-transform:uppercase;font-style:normal;font-weight:bold;font-size:10px;text-align:center;overflow:hidden;z-index:1;padding-top:9px;letter-spacing:.03em;border:1px solid #EEE}.logo.discover:before,.logo.discover:after{content:" ";display:block;position:absolute}.logo.discover:before{background:white;width:200px;height:200px;border-radius:200px;bottom:-5%;right:-80%;z-index:-1}.logo.discover:after{width:8px;height:8px;border-radius:4px;top:10px;left:27px;background-color:#FFF;background-image:-webkit-radial-gradient(#FFF,#f60);background-image:radial-gradient(#FFF,#f60);content:"network";font-size:4px;line-height:24px;text-indent:-7px}.card .front .logo.discover{right:12%;top:18%}.card.discover.identified .front:before,.card.discover.identified .back:before{background-color:#86b8cf}.card.discover.identified .logo.discover{opacity:1}.card.discover.identified .front:after{-webkit-transition:400ms;transition:400ms;content:" ";display:block;background-color:#f60;background-image:-webkit-linear-gradient(#f60,#ffa166,#f60);background-image:-webkit-gradient(linear,left top,left bottom,from(#f60),color-stop(#ffa166),to(#f60));background-image:linear-gradient(#f60,#ffa166,#f60);height:50px;width:50px;border-radius:25px;position:absolute;left:100%;top:15%;margin-left:-25px;-webkit-box-shadow:inset 1px 1px 3px 1px rgba(0,0,0,0.5);box-shadow:inset 1px 1px 3px 1px rgba(0,0,0,0.5)}.logo{height:36px;width:60px;font-style:italic}.logo,.logo:before,.logo:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.logo.visa.visa{background:white;text-transform:uppercase;color:#1a1876;text-align:center;font-weight:bold;font-size:15px}.logo.visa.visa:before,.logo.visa.visa:after{content:" ";display:block;width:100%;height:25%}.logo.visa.visa:before{background:#1a1876;bottom:100%}.logo.visa.visa:after{background:#e79800;top:100%}.card.visa.identified .front:before,.card.visa.identified .back:before{background-color:#191278}.card.visa.identified .logo.visa{opacity:1}.logo{height:36px;width:60px;font-style:italic}.logo,.logo:before,.logo:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.logo.mastercard{color:white;font-weight:bold;text-align:center;font-size:9px;line-height:36px;z-index:1;text-shadow:1px 1px rgba(0,0,0,0.6)}.logo.mastercard:before,.logo.mastercard:after{content:" ";display:block;width:36px;top:0;position:absolute;height:36px;border-radius:18px}.logo.mastercard:before{left:0;background:#f00;z-index:-1}.logo.mastercard:after{right:0;background:#ffab00;z-index:-2}.card.mastercard.identified .front .logo.mastercard,.card.mastercard.identified .back .logo.mastercard{-webkit-box-shadow:none;box-shadow:none}.card.mastercard.identified .front:before,.card.mastercard.identified .back:before{background-color:#0061a8}.card.mastercard.identified .logo.mastercard{opacity:1}body{font-family:"Helvetica Neue"}body>*,body>*:before,body>*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}.card-container{-webkit-perspective:1000px;perspective:1000px;width:350px;height:200px;margin:auto;z-index:1;position:relative}.card{position:relative;width:100%;height:100%;border-radius:10px;-webkit-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 400ms linear;transition:all 400ms linear}.card.flipped{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}.card .front,.card .back{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 400ms linear;transition:all 400ms linear;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;border-radius:10px;background:#DDD}.card .front:before,.card .back:before{content:" ";display:block;position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;border-radius:10px;-webkit-transition:all 400ms ease;transition:all 400ms ease}.card .front:after,.card .back:after{content:" ";display:block}.card .front .display,.card .back .display{color:white;font-weight:normal;opacity:.5;-webkit-transition:opacity 400ms linear;transition:opacity 400ms linear}.card .front .display.focused,.card .back .display.focused{opacity:1;font-weight:700}.card .front .cvc,.card .back .cvc{font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;font-size:14px}.card .front .shiny,.card .back .shiny{width:50px;height:35px;border-radius:5px;background:#CCC;position:relative}.card .front .shiny:before,.card .back .shiny:before{content:" ";display:block;width:70%;height:60%;border-top-right-radius:5px;border-bottom-right-radius:5px;background:#d9d9d9;position:absolute;top:20%}.card .front .logo{position:absolute;opacity:0;right:5%;top:8%;-webkit-transition:400ms;transition:400ms}.card .front .lower{width:80%;position:absolute;left:10%;bottom:30px}.card .front .lower .cvc{visibility:hidden;float:right;position:relative;bottom:5px}.card .front .lower .number{font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;font-size:24px;clear:both;margin-bottom:30px}.card .front .lower .expiry{font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;letter-spacing:0;position:relative;float:right;width:20%}.card .front .lower .expiry:before,.card .front .lower .expiry:after{font-family:"Helvetica Neue";font-weight:bold;font-size:7px;white-space:pre;display:block;opacity:.5}.card .front .lower .expiry:before{content:"month/year";margin-bottom:2px;font-size:7px;text-transform:uppercase}.card .front .lower .expiry:after{position:absolute;content:"valid\Athru";text-align:right;right:100%;margin-right:5px;margin-top:2px;bottom:0}.card .front .lower .name{text-transform:uppercase;font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;font-size:20px;position:absolute;bottom:0;width:190px}.card .back{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}.card .back .bar{background-color:#444;background-image:-webkit-linear-gradient(#444,#333);background-image:-webkit-gradient(linear,left top,left bottom,from(#444),to(#333));background-image:linear-gradient(#444,#333);width:100%;height:20%;position:absolute;top:10%}.card .back:after{content:" ";display:block;background-color:#FFF;background-image:-webkit-linear-gradient(#FFF,#FFF);background-image:-webkit-gradient(linear,left top,left bottom,from(#FFF),to(#FFF));background-image:linear-gradient(#FFF,#FFF);width:80%;height:16%;position:absolute;top:40%;left:2%}.card .back .cvc{position:absolute;top:40%;left:85%;-webkit-transition-delay:600ms;transition-delay:600ms}.card .back .shiny{position:absolute;top:66%;left:2%}.card .back .shiny:after{content:"This card has been issued by Jesse Pollak and is licensed for anyone to use anywhere for free.\AIt comes with no warranty.\A For support issues, please visit: github.com/jessepollak/card.";position:absolute;left:120%;top:5%;color:white;font-size:7px;width:230px;opacity:.5}.card.identified{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}.card.identified .front:before,.card.identified .back:before{-webkit-transition:all 400ms ease;transition:all 400ms ease;background-image:-webkit-repeating-linear-gradient(45deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-linear-gradient(315deg,rgba(255,255,255,0.05) 1px,rgba(255,255,255,0) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.03) 4px),-webkit-repeating-linear-gradient(0deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-linear-gradient(240deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-radial-gradient(30% 30%,circle,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-radial-gradient(70% 70%,circle,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-radial-gradient(90% 20%,circle,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-radial-gradient(15% 80%,circle,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg,rgba(255,255,255,0.05) 1px,rgba(255,255,255,0) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 30% 30%,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 70% 70%,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 90% 20%,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 15% 80%,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:-webkit-repeating-linear-gradient(45deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-linear-gradient(315deg,rgba(255,255,255,0.05) 1px,rgba(255,255,255,0) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.03) 4px),-webkit-repeating-linear-gradient(0deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-linear-gradient(240deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-radial-gradient(30% 30%,circle,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-radial-gradient(70% 70%,circle,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-radial-gradient(90% 20%,circle,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-radial-gradient(15% 80%,circle,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(115deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg,rgba(255,255,255,0.05) 1px,rgba(255,255,255,0) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 30% 30%,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 70% 70%,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 90% 20%,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 15% 80%,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),linear-gradient(-25deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);opacity:1}.card.identified .front .logo,.card.identified .back .logo{-webkit-box-shadow:0 0 0 2px rgba(255,255,255,0.3);box-shadow:0 0 0 2px rgba(255,255,255,0.3)}.card.identified.no-radial-gradient .front:before,.card.identified.no-radial-gradient .back:before{background-image:-webkit-repeating-linear-gradient(45deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-linear-gradient(315deg,rgba(255,255,255,0.05) 1px,rgba(255,255,255,0) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.03) 4px),-webkit-repeating-linear-gradient(0deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-linear-gradient(240deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg,rgba(255,255,255,0.05) 1px,rgba(255,255,255,0) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:-webkit-repeating-linear-gradient(45deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-linear-gradient(315deg,rgba(255,255,255,0.05) 1px,rgba(255,255,255,0) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.03) 4px),-webkit-repeating-linear-gradient(0deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-repeating-linear-gradient(240deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(115deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg,rgba(255,255,255,0.05) 1px,rgba(255,255,255,0) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg,rgba(255,255,255,0) 1px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.04) 3px,rgba(255,255,255,0.05) 4px),linear-gradient(-25deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%)}