API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 25th, 2018
410
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 27.95 KB | None | 0 0
raw download clone embed print report
  1. .jp-card.jp-card-safari.jp-card-identified .jp-card-front:before,.jp-card.jp-card-safari.jp-card-identified .jp-card-back:before{
  2.     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%);
  3.     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%)
  4. }
  5. .jp-card.jp-card-ie-10.jp-card-flipped,.jp-card.jp-card-ie-11.jp-card-flipped{
  6.     -webkit-transform:0deg;
  7.     -moz-transform:0deg;
  8.     -ms-transform:0deg;
  9.     -o-transform:0deg;
  10.     transform:0deg
  11. }
  12. .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-front,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-front{
  13.     -webkit-transform:rotateY(0deg);
  14.     -moz-transform:rotateY(0deg);
  15.     -ms-transform:rotateY(0deg);
  16.     -o-transform:rotateY(0deg);
  17.     transform:rotateY(0deg)
  18. }
  19. .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back{
  20.     -webkit-transform:rotateY(0deg);
  21.     -moz-transform:rotateY(0deg);
  22.     -ms-transform:rotateY(0deg);
  23.     -o-transform:rotateY(0deg);
  24.     transform:rotateY(0deg)
  25. }
  26. .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back:after,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back:after{
  27.     left:18%
  28. }
  29. .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-cvc,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-cvc{
  30.     -webkit-transform:rotateY(180deg);
  31.     -moz-transform:rotateY(180deg);
  32.     -ms-transform:rotateY(180deg);
  33.     -o-transform:rotateY(180deg);
  34.     transform:rotateY(180deg);
  35.     left:5%
  36. }
  37. .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-shiny,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-shiny{
  38.     left:84%
  39. }
  40. .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-shiny:after,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-shiny:after{
  41.     left:-480%;
  42.     -webkit-transform:rotateY(180deg);
  43.     -moz-transform:rotateY(180deg);
  44.     -ms-transform:rotateY(180deg);
  45.     -o-transform:rotateY(180deg);
  46.     transform:rotateY(180deg)
  47. }
  48. .jp-card.jp-card-ie-10.jp-card-amex .jp-card-back,.jp-card.jp-card-ie-11.jp-card-amex .jp-card-back{
  49.     display:none
  50. }
  51. .jp-card-logo{
  52.     height:36px;
  53.     width:60px;
  54.     font-style:italic
  55. }
  56. .jp-card-logo,.jp-card-logo:before,.jp-card-logo:after{
  57.     box-sizing:border-box
  58. }
  59. .jp-card-logo.jp-card-amex{
  60.     text-transform:uppercase;
  61.     font-size:4px;
  62.     font-weight:bold;
  63.     color:white;
  64.     background-image:repeating-radial-gradient(circle at center, #fff 1px, #999 2px);
  65.     background-image:repeating-radial-gradient(circle at center, #fff 1px, #999 2px);
  66.     border:1px solid #EEE
  67. }
  68. .jp-card-logo.jp-card-amex:before,.jp-card-logo.jp-card-amex:after{
  69.     width:28px;
  70.     display:block;
  71.     position:absolute;
  72.     left:16px
  73. }
  74. .jp-card-logo.jp-card-amex:before{
  75.     height:28px;
  76.     content:"american";
  77.     top:3px;
  78.     text-align:left;
  79.     padding-left:2px;
  80.     padding-top:11px;
  81.     background:#267AC3
  82. }
  83. .jp-card-logo.jp-card-amex:after{
  84.     content:"express";
  85.     bottom:11px;
  86.     text-align:right;
  87.     padding-right:2px
  88. }
  89. .jp-card.jp-card-amex.jp-card-flipped{
  90.     -webkit-transform:none;
  91.     -moz-transform:none;
  92.     -ms-transform:none;
  93.     -o-transform:none;
  94.     transform:none
  95. }
  96. .jp-card.jp-card-amex.jp-card-identified .jp-card-front:before,.jp-card.jp-card-amex.jp-card-identified .jp-card-back:before{
  97.     background-color:#108168
  98. }
  99. .jp-card.jp-card-amex.jp-card-identified .jp-card-front .jp-card-logo.jp-card-amex{
  100.     opacity:1
  101. }
  102. .jp-card.jp-card-amex.jp-card-identified .jp-card-front .jp-card-cvc{
  103.     visibility:visible
  104. }
  105. .jp-card.jp-card-amex.jp-card-identified .jp-card-front:after{
  106.     opacity:1
  107. }
  108. .jp-card-logo.jp-card-discover{
  109.     background:#f60;
  110.     color:#111;
  111.     text-transform:uppercase;
  112.     font-style:normal;
  113.     font-weight:bold;
  114.     font-size:10px;
  115.     text-align:center;
  116.     overflow:hidden;
  117.     z-index:1;
  118.     padding-top:9px;
  119.     letter-spacing:.03em;
  120.     border:1px solid #EEE
  121. }
  122. .jp-card-logo.jp-card-discover:before,.jp-card-logo.jp-card-discover:after{
  123.     content:" ";
  124.     display:block;
  125.     position:absolute
  126. }
  127. .jp-card-logo.jp-card-discover:before{
  128.     background:white;
  129.     width:200px;
  130.     height:200px;
  131.     border-radius:200px;
  132.     bottom:-5%;
  133.     right:-80%;
  134.     z-index:-1
  135. }
  136. .jp-card-logo.jp-card-discover:after{
  137.     width:8px;
  138.     height:8px;
  139.     border-radius:4px;
  140.     top:10px;
  141.     left:27px;
  142.     background-color:#f60;
  143.     background-image:-webkit-radial-gradient(#f60,#fff);
  144.     background-image:radial-gradient( #f60,#fff);
  145.     content:"network";
  146.     font-size:4px;
  147.     line-height:24px;
  148.     text-indent:-7px
  149. }
  150. .jp-card .jp-card-front .jp-card-logo.jp-card-discover{
  151.     right:12%;
  152.     top:18%
  153. }
  154. .jp-card.jp-card-discover.jp-card-identified .jp-card-front:before,.jp-card.jp-card-discover.jp-card-identified .jp-card-back:before{
  155.     background-color:#86B8CF
  156. }
  157. .jp-card.jp-card-discover.jp-card-identified .jp-card-logo.jp-card-discover{
  158.     opacity:1
  159. }
  160. .jp-card.jp-card-discover.jp-card-identified .jp-card-front:after{
  161.     -webkit-transition:400ms;
  162.     -moz-transition:400ms;
  163.     transition:400ms;
  164.     content:" ";
  165.     display:block;
  166.     background-color:#f60;
  167.     background-image:-webkit-linear-gradient(#f60,#ffa366,#f60);
  168.     background-image:linear-gradient(#f60,#ffa366,#f60);
  169.     height:50px;
  170.     width:50px;
  171.     border-radius:25px;
  172.     position:absolute;
  173.     left:100%;
  174.     top:15%;
  175.     margin-left:-25px;
  176.     box-shadow:inset 1px 1px 3px 1px rgba(0,0,0,0.5)
  177. }
  178. .jp-card-logo.jp-card-visa{
  179.     text-transform:uppercase;
  180.     color:white;
  181.     text-align:center;
  182.     font-weight:bold;
  183.     font-size:24px;
  184.     line-height:18px;
  185.     margin-top:5px
  186. }
  187. .jp-card-logo.jp-card-visa:before,.jp-card-logo.jp-card-visa:after{
  188.     content:" ";
  189.     display:block;
  190.     width:100%;
  191.     height:25%
  192. }
  193. .jp-card-logo.jp-card-visa:before{
  194.     position:absolute;
  195.     left:-4px;
  196.     width:0;
  197.     height:0;
  198.     border-style:solid;
  199.     border-width:0 12px 6px 0;
  200.     border-color:transparent #ffffff transparent transparent
  201. }
  202. .jp-card.jp-card-visa.jp-card-identified .jp-card-front:before,.jp-card.jp-card-visa.jp-card-identified .jp-card-back:before{
  203.     background-color:#191278
  204. }
  205. .jp-card.jp-card-visa.jp-card-identified .jp-card-logo.jp-card-visa{
  206.     opacity:1;
  207.     box-shadow:none
  208. }
  209. .jp-card-logo.jp-card-visaelectron{
  210.     background:white;
  211.     text-transform:uppercase;
  212.     color:#1A1876;
  213.     text-align:center;
  214.     font-weight:bold;
  215.     font-size:15px;
  216.     line-height:18px
  217. }
  218. .jp-card-logo.jp-card-visaelectron:before,.jp-card-logo.jp-card-visaelectron:after{
  219.     content:" ";
  220.     display:block;
  221.     width:100%;
  222.     height:25%
  223. }
  224. .jp-card-logo.jp-card-visaelectron:before{
  225.     background:#1A1876
  226. }
  227. .jp-card-logo.jp-card-visaelectron:after{
  228.     background:#E79800
  229. }
  230. .jp-card-logo.jp-card-visaelectron .elec{
  231.     float:right;
  232.     font-family:arial;
  233.     font-size:9px;
  234.     margin-right:1px;
  235.     margin-top:-5px;
  236.     text-transform:none
  237. }
  238. .jp-card.jp-card-visaelectron.jp-card-identified .jp-card-front:before,.jp-card.jp-card-visaelectron.jp-card-identified .jp-card-back:before{
  239.     background-color:#191278
  240. }
  241. .jp-card.jp-card-visaelectron.jp-card-identified .jp-card-logo.jp-card-visaelectron{
  242.     opacity:1
  243. }
  244. .jp-card-logo.jp-card-mastercard{
  245.     color:white;
  246.     font-style:normal;
  247.     text-transform:lowercase;
  248.     font-weight:bold;
  249.     text-align:center;
  250.     font-size:9px;
  251.     line-height:84px;
  252.     z-index:1;
  253.     text-shadow:1px 1px rgba(0,0,0,0.6)
  254. }
  255. .jp-card-logo.jp-card-mastercard:before,.jp-card-logo.jp-card-mastercard:after{
  256.     content:" ";
  257.     display:block;
  258.     width:36px;
  259.     top:0;
  260.     position:absolute;
  261.     height:36px;
  262.     border-radius:18px
  263. }
  264. .jp-card-logo.jp-card-mastercard:before{
  265.     left:0;
  266.     background:#EB001B;
  267.     z-index:-1;
  268.     opacity:0.9
  269. }
  270. .jp-card-logo.jp-card-mastercard:after{
  271.     right:0;
  272.     background:#FF5F00;
  273.     z-index:-2
  274. }
  275. .jp-card.jp-card-mastercard.jp-card-identified .jp-card-front .jp-card-logo.jp-card-mastercard,.jp-card.jp-card-mastercard.jp-card-identified .jp-card-back .jp-card-logo.jp-card-mastercard{
  276.     box-shadow:none
  277. }
  278. .jp-card.jp-card-mastercard.jp-card-identified .jp-card-front:before,.jp-card.jp-card-mastercard.jp-card-identified .jp-card-back:before{
  279.     background-color:#0061A8
  280. }
  281. .jp-card.jp-card-mastercard.jp-card-identified .jp-card-logo.jp-card-mastercard{
  282.     opacity:1
  283. }
  284. .jp-card-logo.jp-card-maestro{
  285.     color:white;
  286.     font-style:normal;
  287.     text-transform:lowercase;
  288.     font-weight:bold;
  289.     text-align:center;
  290.     font-size:14px;
  291.     line-height:84px;
  292.     z-index:1;
  293.     text-shadow:1px 1px rgba(0,0,0,0.6)
  294. }
  295. .jp-card-logo.jp-card-maestro:before,.jp-card-logo.jp-card-maestro:after{
  296.     content:" ";
  297.     display:block;
  298.     width:36px;
  299.     top:0;
  300.     position:absolute;
  301.     height:36px;
  302.     border-radius:18px
  303. }
  304. .jp-card-logo.jp-card-maestro:before{
  305.     left:0;
  306.     background:#EB001B;
  307.     z-index:-2
  308. }
  309. .jp-card-logo.jp-card-maestro:after{
  310.     right:0;
  311.     background:#00A2E5;
  312.     z-index:-1;
  313.     opacity:0.8
  314. }
  315. .jp-card.jp-card-maestro.jp-card-identified .jp-card-front .jp-card-logo.jp-card-maestro,.jp-card.jp-card-maestro.jp-card-identified .jp-card-back .jp-card-logo.jp-card-maestro{
  316.     box-shadow:none
  317. }
  318. .jp-card.jp-card-maestro.jp-card-identified .jp-card-front:before,.jp-card.jp-card-maestro.jp-card-identified .jp-card-back:before{
  319.     background-color:#0B2C5F
  320. }
  321. .jp-card.jp-card-maestro.jp-card-identified .jp-card-logo.jp-card-maestro{
  322.     opacity:1
  323. }
  324. .jp-card-logo.jp-card-dankort{
  325.     width:60px;
  326.     height:36px;
  327.     padding:3px;
  328.     border-radius:8px;
  329.     border:#000 1px solid;
  330.     background-color:#fff
  331. }
  332. .jp-card-logo.jp-card-dankort .dk{
  333.     position:relative;
  334.     width:100%;
  335.     height:100%;
  336.     overflow:hidden
  337. }
  338. .jp-card-logo.jp-card-dankort .dk:before{
  339.     background-color:#ED1C24;
  340.     content:'';
  341.     position:absolute;
  342.     width:100%;
  343.     height:100%;
  344.     display:block;
  345.     border-radius:6px
  346. }
  347. .jp-card-logo.jp-card-dankort .dk:after{
  348.     content:'';
  349.     position:absolute;
  350.     top:50%;
  351.     margin-top:-7.7px;
  352.     right:0;
  353.     width:0;
  354.     height:0;
  355.     border-style:solid;
  356.     border-width:7px 7px 10px 0;
  357.     border-color:transparent #ED1C24 transparent transparent;
  358.     z-index:1
  359. }
  360. .jp-card-logo.jp-card-dankort .d,.jp-card-logo.jp-card-dankort .k{
  361.     position:absolute;
  362.     top:50%;
  363.     width:50%;
  364.     display:block;
  365.     height:15.4px;
  366.     margin-top:-7.7px;
  367.     background:white
  368. }
  369. .jp-card-logo.jp-card-dankort .d{
  370.     left:0;
  371.     border-radius:0 8px 10px 0
  372. }
  373. .jp-card-logo.jp-card-dankort .d:before{
  374.     content:'';
  375.     position:absolute;
  376.     top:50%;
  377.     left:50%;
  378.     display:block;
  379.     background:#ED1C24;
  380.     border-radius:2px 4px 6px 0px;
  381.     height:5px;
  382.     width:7px;
  383.     margin:-3px 0 0 -4px
  384. }
  385. .jp-card-logo.jp-card-dankort .k{
  386.     right:0
  387. }
  388. .jp-card-logo.jp-card-dankort .k:before,.jp-card-logo.jp-card-dankort .k:after{
  389.     content:'';
  390.     position:absolute;
  391.     right:50%;
  392.     width:0;
  393.     height:0;
  394.     border-style:solid;
  395.     margin-right:-1px
  396. }
  397. .jp-card-logo.jp-card-dankort .k:before{
  398.     top:0;
  399.     border-width:8px 5px 0 0;
  400.     border-color:#ED1C24 transparent transparent transparent
  401. }
  402. .jp-card-logo.jp-card-dankort .k:after{
  403.     bottom:0;
  404.     border-width:0 5px 8px 0;
  405.     border-color:transparent transparent #ED1C24 transparent
  406. }
  407. .jp-card.jp-card-dankort.jp-card-identified .jp-card-front:before,.jp-card.jp-card-dankort.jp-card-identified .jp-card-back:before{
  408.     background-color:#0055C7
  409. }
  410. .jp-card.jp-card-dankort.jp-card-identified .jp-card-logo.jp-card-dankort{
  411.     opacity:1
  412. }
  413. .jp-card-logo.jp-card-elo{
  414.     height:50px;
  415.     width:50px;
  416.     border-radius:100%;
  417.     background:black;
  418.     color:white;
  419.     text-align:center;
  420.     text-transform:lowercase;
  421.     font-size:21px;
  422.     font-style:normal;
  423.     letter-spacing:1px;
  424.     font-weight:bold;
  425.     padding-top:13px
  426. }
  427. .jp-card-logo.jp-card-elo .e,.jp-card-logo.jp-card-elo .l,.jp-card-logo.jp-card-elo .o{
  428.     display:inline-block;
  429.     position:relative
  430. }
  431. .jp-card-logo.jp-card-elo .e{
  432.     -webkit-transform:rotate(-15deg);
  433.     -moz-transform:rotate(-15deg);
  434.     -ms-transform:rotate(-15deg);
  435.     -o-transform:rotate(-15deg);
  436.     transform:rotate(-15deg)
  437. }
  438. .jp-card-logo.jp-card-elo .o{
  439.     position:relative;
  440.     display:inline-block;
  441.     width:12px;
  442.     height:12px;
  443.     right:0;
  444.     top:7px;
  445.     border-radius:100%;
  446.     background-image:-webkit-linear-gradient( #ff0 50%,red 50%);
  447.     background-image:linear-gradient( #ff0 50%,red 50%);
  448.     -webkit-transform:rotate(40deg);
  449.     -moz-transform:rotate(40deg);
  450.     -ms-transform:rotate(40deg);
  451.     -o-transform:rotate(40deg);
  452.     transform:rotate(40deg);
  453.     text-indent:-9999px
  454. }
  455. .jp-card-logo.jp-card-elo .o:before{
  456.     content:"";
  457.     position:absolute;
  458.     width:49%;
  459.     height:49%;
  460.     background:black;
  461.     border-radius:100%;
  462.     text-indent:-99999px;
  463.     top:25%;
  464.     left:25%
  465. }
  466. .jp-card.jp-card-elo.jp-card-identified .jp-card-front:before,.jp-card.jp-card-elo.jp-card-identified .jp-card-back:before{
  467.     background-color:#6F6969
  468. }
  469. .jp-card.jp-card-elo.jp-card-identified .jp-card-logo.jp-card-elo{
  470.     opacity:1
  471. }
  472. .jp-card-logo.jp-card-jcb{
  473.     border-radius:5px 0px 5px 0px;
  474.     -moz-border-radius:5px 0px 5px 0px;
  475.     -webkit-border-radius:5px 0px 5px 0px;
  476.     background-color:white;
  477.     font-style:normal;
  478.     color:white;
  479.     width:50px;
  480.     padding:2px 0 0 2px
  481. }
  482. .jp-card-logo.jp-card-jcb>div{
  483.     width:15px;
  484.     margin-right:1px;
  485.     display:inline-block;
  486.     text-align:center;
  487.     text-shadow:1px 1px rgba(0,0,0,0.6);
  488.     border-radius:5px 0px 5px 0px;
  489.     -moz-border-radius:5px 0px 5px 0px;
  490.     -webkit-border-radius:5px 0px 5px 0px
  491. }
  492. .jp-card-logo.jp-card-jcb>div:before,.jp-card-logo.jp-card-jcb>div:after{
  493.     content:" ";
  494.     display:block;
  495.     height:8px
  496. }
  497. .jp-card-logo.jp-card-jcb>div.j{
  498.     background-color:#000063;
  499.     background-image:-webkit-linear-gradient(left, #000063,#008cff);
  500.     background-image:linear-gradient(to right,#000063,#008cff)
  501. }
  502. .jp-card-logo.jp-card-jcb>div.c{
  503.     background-color:#630000;
  504.     background-image:-webkit-linear-gradient(left, #630000,#ff008d);
  505.     background-image:linear-gradient(to right,#630000,#ff008d)
  506. }
  507. .jp-card-logo.jp-card-jcb>div.b{
  508.     background-color:#006300;
  509.     background-image:-webkit-linear-gradient(left, #006300,lime);
  510.     background-image:linear-gradient(to right,#006300,lime)
  511. }
  512. .jp-card.jp-card-jcb.jp-card-identified .jp-card-front:before,.jp-card.jp-card-jcb.jp-card-identified .jp-card-back:before{
  513.     background-color:#CB8000
  514. }
  515. .jp-card.jp-card-jcb.jp-card-identified .jp-card-logo.jp-card-jcb{
  516.     opacity:1;
  517.     box-shadow:none
  518. }
  519. .jp-card-logo.jp-card-dinersclub{
  520.     font-family:serif;
  521.     height:40px;
  522.     width:100px;
  523.     color:white;
  524.     font-size:17px;
  525.     font-style:normal;
  526.     letter-spacing:1px
  527. }
  528. .jp-card-logo.jp-card-dinersclub::before,.jp-card-logo.jp-card-dinersclub::after{
  529.     display:block;
  530.     position:relative
  531. }
  532. .jp-card-logo.jp-card-dinersclub::before{
  533.     content:'Diners Club'
  534. }
  535. .jp-card-logo.jp-card-dinersclub::after{
  536.     content:'International';
  537.     text-transform:uppercase;
  538.     font-size:0.6em
  539. }
  540. .jp-card.jp-card-dinersclub .jp-card-front .jp-card-logo{
  541.     box-shadow:none !important
  542. }
  543. .jp-card.jp-card-dinersclub.jp-card-identified .jp-card-front:before,.jp-card.jp-card-dinersclub.jp-card-identified .jp-card-back:before{
  544.     background-color:#999
  545. }
  546. .jp-card.jp-card-dinersclub.jp-card-identified .jp-card-logo.jp-card-dinersclub{
  547.     opacity:1
  548. }
  549. .jp-card-container{
  550.     -webkit-perspective:1000px;
  551.     -moz-perspective:1000px;
  552.     perspective:1000px;
  553.     width:350px;
  554.     max-width:100%;
  555.     height:200px;
  556.     margin:auto;
  557.     z-index:1;
  558.     position:relative
  559. }
  560. .jp-card{
  561.     font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  562.     line-height:1;
  563.     position:relative;
  564.     width:100%;
  565.     height:100%;
  566.     min-width:315px;
  567.     border-radius:10px;
  568.     -webkit-transform-style:preserve-3d;
  569.     -moz-transform-style:preserve-3d;
  570.     -ms-transform-style:preserve-3d;
  571.     -o-transform-style:preserve-3d;
  572.     transform-style:preserve-3d;
  573.     -webkit-transition:all 400ms linear;
  574.     -moz-transition:all 400ms linear;
  575.     transition:all 400ms linear
  576. }
  577. .jp-card>*,.jp-card>*:before,.jp-card>*:after{
  578.     -moz-box-sizing:border-box;
  579.     -webkit-box-sizing:border-box;
  580.     box-sizing:border-box;
  581.     font-family:inherit
  582. }
  583. .jp-card.jp-card-flipped{
  584.     -webkit-transform:rotateY(180deg);
  585.     -moz-transform:rotateY(180deg);
  586.     -ms-transform:rotateY(180deg);
  587.     -o-transform:rotateY(180deg);
  588.     transform:rotateY(180deg)
  589. }
  590. .jp-card .jp-card-front,.jp-card .jp-card-back{
  591.     -webkit-backface-visibility:hidden;
  592.     backface-visibility:hidden;
  593.     -webkit-transform-style:preserve-3d;
  594.     -moz-transform-style:preserve-3d;
  595.     -ms-transform-style:preserve-3d;
  596.     -o-transform-style:preserve-3d;
  597.     transform-style:preserve-3d;
  598.     -webkit-transition:all 400ms linear;
  599.     -moz-transition:all 400ms linear;
  600.     transition:all 400ms linear;
  601.     width:100%;
  602.     height:100%;
  603.     position:absolute;
  604.     top:0;
  605.     left:0;
  606.     overflow:hidden;
  607.     border-radius:10px;
  608.     background:#DDD
  609. }
  610. .jp-card .jp-card-front:before,.jp-card .jp-card-back:before{
  611.     content:" ";
  612.     display:block;
  613.     position:absolute;
  614.     width:100%;
  615.     height:100%;
  616.     top:0;
  617.     left:0;
  618.     opacity:0;
  619.     border-radius:10px;
  620.     -webkit-transition:all 400ms ease;
  621.     -moz-transition:all 400ms ease;
  622.     transition:all 400ms ease
  623. }
  624. .jp-card .jp-card-front:after,.jp-card .jp-card-back:after{
  625.     content:" ";
  626.     display:block
  627. }
  628. .jp-card .jp-card-front .jp-card-display,.jp-card .jp-card-back .jp-card-display{
  629.     color:#fff;
  630.     font-weight:normal;
  631.     opacity:0.5;
  632.     -webkit-transition:opacity 400ms linear;
  633.     -moz-transition:opacity 400ms linear;
  634.     transition:opacity 400ms linear
  635. }
  636. .jp-card .jp-card-front .jp-card-display.jp-card-focused,.jp-card .jp-card-back .jp-card-display.jp-card-focused{
  637.     opacity:1;
  638.     font-weight:700
  639. }
  640. .jp-card .jp-card-front .jp-card-cvc,.jp-card .jp-card-back .jp-card-cvc{
  641.     font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;
  642.     font-size:14px
  643. }
  644. .jp-card .jp-card-front .jp-card-shiny,.jp-card .jp-card-back .jp-card-shiny{
  645.     width:50px;
  646.     height:35px;
  647.     border-radius:5px;
  648.     background:#CCC;
  649.     position:relative
  650. }
  651. .jp-card .jp-card-front .jp-card-shiny:before,.jp-card .jp-card-back .jp-card-shiny:before{
  652.     content:" ";
  653.     display:block;
  654.     width:70%;
  655.     height:60%;
  656.     border-top-right-radius:5px;
  657.     border-bottom-right-radius:5px;
  658.     background:#d9d9d9;
  659.     position:absolute;
  660.     top:20%
  661. }
  662. .jp-card .jp-card-front .jp-card-logo{
  663.     position:absolute;
  664.     opacity:0;
  665.     right:5%;
  666.     top:8%;
  667.     -webkit-transition:400ms;
  668.     -moz-transition:400ms;
  669.     transition:400ms
  670. }
  671. .jp-card .jp-card-front .jp-card-lower{
  672.     width:80%;
  673.     position:absolute;
  674.     left:10%;
  675.     bottom:30px
  676. }
  677. @media only screen and (max-width: 480px){
  678.     .jp-card .jp-card-front .jp-card-lower{
  679.         width:90%;
  680.         left:5%
  681.     }
  682. }
  683. .jp-card .jp-card-front .jp-card-lower .jp-card-cvc{
  684.     visibility:hidden;
  685.     float:right;
  686.     position:relative;
  687.     bottom:5px
  688. }
  689. .jp-card .jp-card-front .jp-card-lower .jp-card-number{
  690.     font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;
  691.     font-size:24px;
  692.     clear:both;
  693.     margin-bottom:30px
  694. }
  695. .jp-card .jp-card-front .jp-card-lower .jp-card-expiry{
  696.     font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;
  697.     letter-spacing:0em;
  698.     position:relative;
  699.     float:right;
  700.     width:25%
  701. }
  702. .jp-card .jp-card-front .jp-card-lower .jp-card-expiry:before,.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:after{
  703.     font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  704.     font-weight:bold;
  705.     font-size:7px;
  706.     white-space:pre;
  707.     display:block;
  708.     opacity:.5
  709. }
  710. .jp-card .jp-card-front .jp-card-lower .jp-card-expiry:before{
  711.     content:attr(data-before);
  712.     margin-bottom:2px;
  713.     font-size:7px;
  714.     text-transform:uppercase
  715. }
  716. .jp-card .jp-card-front .jp-card-lower .jp-card-expiry:after{
  717.     position:absolute;
  718.     content:attr(data-after);
  719.     text-align:right;
  720.     right:100%;
  721.     margin-right:5px;
  722.     margin-top:2px;
  723.     bottom:0
  724. }
  725. .jp-card .jp-card-front .jp-card-lower .jp-card-name{
  726.     text-transform:uppercase;
  727.     font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;
  728.     font-size:20px;
  729.     max-height:45px;
  730.     position:absolute;
  731.     bottom:0;
  732.     width:190px;
  733.     display:-webkit-box;
  734.     -webkit-line-clamp:2;
  735.     -webkit-box-orient:horizontal;
  736.     overflow:hidden;
  737.     text-overflow:ellipsis
  738. }
  739. .jp-card .jp-card-back{
  740.     -webkit-transform:rotateY(180deg);
  741.     -moz-transform:rotateY(180deg);
  742.     -ms-transform:rotateY(180deg);
  743.     -o-transform:rotateY(180deg);
  744.     transform:rotateY(180deg)
  745. }
  746. .jp-card .jp-card-back .jp-card-bar{
  747.     background-color:#444;
  748.     background-image:-webkit-linear-gradient(#444,#333);
  749.     background-image:linear-gradient(#444,#333);
  750.     width:100%;
  751.     height:20%;
  752.     position:absolute;
  753.     top:10%
  754. }
  755. .jp-card .jp-card-back:after{
  756.     content:" ";
  757.     display:block;
  758.     background-color:#fff;
  759.     background-image:-webkit-linear-gradient(#fff,#fff);
  760.     background-image:linear-gradient(#fff,#fff);
  761.     width:80%;
  762.     height:16%;
  763.     position:absolute;
  764.     top:40%;
  765.     left:2%
  766. }
  767. .jp-card .jp-card-back .jp-card-cvc{
  768.     position:absolute;
  769.     top:40%;
  770.     left:85%;
  771.     -webkit-transition-delay:600ms;
  772.     -moz-transition-delay:600ms;
  773.     transition-delay:600ms
  774. }
  775. .jp-card .jp-card-back .jp-card-shiny{
  776.     position:absolute;
  777.     top:66%;
  778.     left:2%
  779. }
  780. .jp-card .jp-card-back .jp-card-shiny:after{
  781.     content:"This card has been issued by Jesse Pollak and is licensed for anyone to use anywhere for free. It comes with no warranty. For support issues, please visit: github.com/jessepollak/card.";
  782.     position:absolute;
  783.     left:120%;
  784.     top:5%;
  785.     color:white;
  786.     font-size:7px;
  787.     width:230px;
  788.     opacity:.5
  789. }
  790. .jp-card.jp-card-identified{
  791.     box-shadow:0 0 20px rgba(0,0,0,0.3)
  792. }
  793. .jp-card.jp-card-identified .jp-card-front,.jp-card.jp-card-identified .jp-card-back{
  794.     background-color:#000;
  795.     background-color:rgba(0,0,0,0.5)
  796. }
  797. .jp-card.jp-card-identified .jp-card-front:before,.jp-card.jp-card-identified .jp-card-back:before{
  798.     -webkit-transition:all 400ms ease;
  799.     -moz-transition:all 400ms ease;
  800.     transition:all 400ms ease;
  801.     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%);
  802.     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%);
  803.     opacity:1
  804. }
  805. .jp-card.jp-card-identified .jp-card-front .jp-card-logo,.jp-card.jp-card-identified .jp-card-back .jp-card-logo{
  806.     box-shadow:0 0 0 2px rgba(255,255,255,0.3)
  807. }
  808. .jp-card.jp-card-identified.no-radial-gradient .jp-card-front:before,.jp-card.jp-card-identified.no-radial-gradient .jp-card-back:before{
  809.     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%);
  810.     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%)
  811. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!