Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="CCBackground">
  <div class="outercontainer">
    <div class="card-wrapper"></div>
    <div class="formcontainer">
      <form action="">
        <input class="form-control" placeholder="Card Number" type="text" name="number">
        <br>
        <input class="form-control" placeholder="Full Name" type="text" name="name">
        <br>
        <div class="form-inline text-right">
          <div class="form-group">
            <input class="form-control" placeholder="MM/YY" type="text" name="expiry">
            <input class="form-control" placeholder="CVC" type="text" name="cvc">
          </div>
        </div>
      </form>
    </div>
    <div class="text-right purchasebtn">
      <button class="btn btn-success">Purchase</button>
    </div>
  </div>
</div>
              
            
!

CSS

              
                html {
  background: #fff;
}

.CCBackground {
  padding-top: 50px;
  height: 100%;
  background: #fff;
}

.outercontainer {
  margin: 0px auto;
  border: 1px solid #a6a6a6;
  padding: 20px;
  border-radius: 3px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  width: 500px;
  background: #607d8b;
}

.formcontainer {
  margin-top: 20px;
}

.purchasebtn {
  margin-top: 20px;
}

.btn-success {
  backgroun-color: #0032a0;
}
              
            
!

JS

              
                (function e(t, n, r) {
  function s(o, u) {
    if (!n[o]) {
      if (!t[o]) {
        var a = typeof require == "function" && require;
        if (!u && a) return a(o, !0);
        if (i) return i(o, !0);
        var f = new Error("Cannot find module '" + o + "'");
        throw f.code = "MODULE_NOT_FOUND", f
      }
      var l = n[o] = {
        exports: {}
      };
      t[o][0].call(l.exports, function(e) {
        var n = t[o][1][e];
        return s(n ? n : e)
      }, l, l.exports, e, t, n, r)
    }
    return n[o].exports
  }
  var i = typeof require == "function" && require;
  for (var o = 0; o < r.length; o++) s(r[o]);
  return s
})({
  1: [function(require, module, exports) {
    module.exports = require('./lib/extend');

  }, {
    "./lib/extend": 2
  }],
  2: [function(require, module, exports) {
    /*!
     * node.extend
     * Copyright 2011, John Resig
     * Dual licensed under the MIT or GPL Version 2 licenses.
     * http://jquery.org/license
     *
     * @fileoverview
     * Port of jQuery.extend that actually works on node.js
     */
    var is = require('is');

    function extend() {
      var target = arguments[0] || {};
      var i = 1;
      var length = arguments.length;
      var deep = false;
      var options, name, src, copy, copy_is_array, clone;

      // Handle a deep copy situation
      if (typeof target === 'boolean') {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
      }

      // Handle case when target is a string or something (possible in deep copy)
      if (typeof target !== 'object' && !is.fn(target)) {
        target = {};
      }

      for (; i < length; i++) {
        // Only deal with non-null/undefined values
        options = arguments[i]
        if (options != null) {
          if (typeof options === 'string') {
            options = options.split('');
          }
          // Extend the base object
          for (name in options) {
            src = target[name];
            copy = options[name];

            // Prevent never-ending loop
            if (target === copy) {
              continue;
            }

            // Recurse if we're merging plain objects or arrays
            if (deep && copy && (is.hash(copy) || (copy_is_array = is.array(copy)))) {
              if (copy_is_array) {
                copy_is_array = false;
                clone = src && is.array(src) ? src : [];
              } else {
                clone = src && is.hash(src) ? src : {};
              }

              // Never move original objects, clone them
              target[name] = extend(deep, clone, copy);

              // Don't bring in undefined values
            } else if (typeof copy !== 'undefined') {
              target[name] = copy;
            }
          }
        }
      }

      // Return the modified object
      return target;
    };

    /**
     * @public
     */
    extend.version = '1.1.3';

    /**
     * Exports module.
     */
    module.exports = extend;

  }, {
    "is": 3
  }],
  3: [function(require, module, exports) {

    /**!
     * is
     * the definitive JavaScript type testing library
     *
     * @copyright 2013-2014 Enrico Marino / Jordan Harband
     * @license MIT
     */

    var objProto = Object.prototype;
    var owns = objProto.hasOwnProperty;
    var toStr = objProto.toString;
    var symbolValueOf;
    if (typeof Symbol === 'function') {
      symbolValueOf = Symbol.prototype.valueOf;
    }
    var isActualNaN = function(value) {
      return value !== value;
    };
    var NON_HOST_TYPES = {
      boolean: 1,
      number: 1,
      string: 1,
      undefined: 1
    };

    var base64Regex = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$/;
    var hexRegex = /^[A-Fa-f0-9]+$/;

    /**
     * Expose `is`
     */

    var is = module.exports = {};

    /**
     * Test general.
     */

    /**
     * is.type
     * Test if `value` is a type of `type`.
     *
     * @param {Mixed} value value to test
     * @param {String} type type
     * @return {Boolean} true if `value` is a type of `type`, false otherwise
     * @api public
     */

    is.a = is.type = function(value, type) {
      return typeof value === type;
    };

    /**
     * is.defined
     * Test if `value` is defined.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if 'value' is defined, false otherwise
     * @api public
     */

    is.defined = function(value) {
      return typeof value !== 'undefined';
    };

    /**
     * is.empty
     * Test if `value` is empty.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is empty, false otherwise
     * @api public
     */

    is.empty = function(value) {
      var type = toStr.call(value);
      var key;

      if ('[object Array]' === type || '[object Arguments]' === type || '[object String]' === type) {
        return value.length === 0;
      }

      if ('[object Object]' === type) {
        for (key in value) {
          if (owns.call(value, key)) {
            return false;
          }
        }
        return true;
      }

      return !value;
    };

    /**
     * is.equal
     * Test if `value` is equal to `other`.
     *
     * @param {Mixed} value value to test
     * @param {Mixed} other value to compare with
     * @return {Boolean} true if `value` is equal to `other`, false otherwise
     */

    is.equal = function(value, other) {
      var strictlyEqual = value === other;
      if (strictlyEqual) {
        return true;
      }

      var type = toStr.call(value);
      var key;

      if (type !== toStr.call(other)) {
        return false;
      }

      if ('[object Object]' === type) {
        for (key in value) {
          if (!is.equal(value[key], other[key]) || !(key in other)) {
            return false;
          }
        }
        for (key in other) {
          if (!is.equal(value[key], other[key]) || !(key in value)) {
            return false;
          }
        }
        return true;
      }

      if ('[object Array]' === type) {
        key = value.length;
        if (key !== other.length) {
          return false;
        }
        while (--key) {
          if (!is.equal(value[key], other[key])) {
            return false;
          }
        }
        return true;
      }

      if ('[object Function]' === type) {
        return value.prototype === other.prototype;
      }

      if ('[object Date]' === type) {
        return value.getTime() === other.getTime();
      }

      return strictlyEqual;
    };

    /**
     * is.hosted
     * Test if `value` is hosted by `host`.
     *
     * @param {Mixed} value to test
     * @param {Mixed} host host to test with
     * @return {Boolean} true if `value` is hosted by `host`, false otherwise
     * @api public
     */

    is.hosted = function(value, host) {
      var type = typeof host[value];
      return type === 'object' ? !!host[value] : !NON_HOST_TYPES[type];
    };

    /**
     * is.instance
     * Test if `value` is an instance of `constructor`.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is an instance of `constructor`
     * @api public
     */

    is.instance = is['instanceof'] = function(value, constructor) {
      return value instanceof constructor;
    };

    /**
     * is.nil / is.null
     * Test if `value` is null.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is null, false otherwise
     * @api public
     */

    is.nil = is['null'] = function(value) {
      return value === null;
    };

    /**
     * is.undef / is.undefined
     * Test if `value` is undefined.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is undefined, false otherwise
     * @api public
     */

    is.undef = is.undefined = function(value) {
      return typeof value === 'undefined';
    };

    /**
     * Test arguments.
     */

    /**
     * is.args
     * Test if `value` is an arguments object.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is an arguments object, false otherwise
     * @api public
     */

    is.args = is.arguments = function(value) {
      var isStandardArguments = '[object Arguments]' === toStr.call(value);
      var isOldArguments = !is.array(value) && is.arraylike(value) && is.object(value) && is.fn(value.callee);
      return isStandardArguments || isOldArguments;
    };

    /**
     * Test array.
     */

    /**
     * is.array
     * Test if 'value' is an array.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is an array, false otherwise
     * @api public
     */

    is.array = function(value) {
      return '[object Array]' === toStr.call(value);
    };

    /**
     * is.arguments.empty
     * Test if `value` is an empty arguments object.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is an empty arguments object, false otherwise
     * @api public
     */
    is.args.empty = function(value) {
      return is.args(value) && value.length === 0;
    };

    /**
     * is.array.empty
     * Test if `value` is an empty array.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is an empty array, false otherwise
     * @api public
     */
    is.array.empty = function(value) {
      return is.array(value) && value.length === 0;
    };

    /**
     * is.arraylike
     * Test if `value` is an arraylike object.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is an arguments object, false otherwise
     * @api public
     */

    is.arraylike = function(value) {
      return !!value && !is.boolean(value) && owns.call(value, 'length') && isFinite(value.length) && is.number(value.length) && value.length >= 0;
    };

    /**
     * Test boolean.
     */

    /**
     * is.boolean
     * Test if `value` is a boolean.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is a boolean, false otherwise
     * @api public
     */

    is.boolean = function(value) {
      return '[object Boolean]' === toStr.call(value);
    };

    /**
     * is.false
     * Test if `value` is false.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is false, false otherwise
     * @api public
     */

    is['false'] = function(value) {
      return is.boolean(value) && Boolean(Number(value)) === false;
    };

    /**
     * is.true
     * Test if `value` is true.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is true, false otherwise
     * @api public
     */

    is['true'] = function(value) {
      return is.boolean(value) && Boolean(Number(value)) === true;
    };

    /**
     * Test date.
     */

    /**
     * is.date
     * Test if `value` is a date.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is a date, false otherwise
     * @api public
     */

    is.date = function(value) {
      return '[object Date]' === toStr.call(value);
    };

    /**
     * Test element.
     */

    /**
     * is.element
     * Test if `value` is an html element.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is an HTML Element, false otherwise
     * @api public
     */

    is.element = function(value) {
      return value !== undefined && typeof HTMLElement !== 'undefined' && value instanceof HTMLElement && value.nodeType === 1;
    };

    /**
     * Test error.
     */

    /**
     * is.error
     * Test if `value` is an error object.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is an error object, false otherwise
     * @api public
     */

    is.error = function(value) {
      return '[object Error]' === toStr.call(value);
    };

    /**
     * Test function.
     */

    /**
     * is.fn / is.function (deprecated)
     * Test if `value` is a function.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is a function, false otherwise
     * @api public
     */

    is.fn = is['function'] = function(value) {
      var isAlert = typeof window !== 'undefined' && value === window.alert;
      return isAlert || '[object Function]' === toStr.call(value);
    };

    /**
     * Test number.
     */

    /**
     * is.number
     * Test if `value` is a number.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is a number, false otherwise
     * @api public
     */

    is.number = function(value) {
      return '[object Number]' === toStr.call(value);
    };

    /**
     * is.infinite
     * Test if `value` is positive or negative infinity.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is positive or negative Infinity, false otherwise
     * @api public
     */
    is.infinite = function(value) {
      return value === Infinity || value === -Infinity;
    };

    /**
     * is.decimal
     * Test if `value` is a decimal number.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is a decimal number, false otherwise
     * @api public
     */

    is.decimal = function(value) {
      return is.number(value) && !isActualNaN(value) && !is.infinite(value) && value % 1 !== 0;
    };

    /**
     * is.divisibleBy
     * Test if `value` is divisible by `n`.
     *
     * @param {Number} value value to test
     * @param {Number} n dividend
     * @return {Boolean} true if `value` is divisible by `n`, false otherwise
     * @api public
     */

    is.divisibleBy = function(value, n) {
      var isDividendInfinite = is.infinite(value);
      var isDivisorInfinite = is.infinite(n);
      var isNonZeroNumber = is.number(value) && !isActualNaN(value) && is.number(n) && !isActualNaN(n) && n !== 0;
      return isDividendInfinite || isDivisorInfinite || (isNonZeroNumber && value % n === 0);
    };

    /**
     * is.int
     * Test if `value` is an integer.
     *
     * @param value to test
     * @return {Boolean} true if `value` is an integer, false otherwise
     * @api public
     */

    is.int = function(value) {
      return is.number(value) && !isActualNaN(value) && value % 1 === 0;
    };

    /**
     * is.maximum
     * Test if `value` is greater than 'others' values.
     *
     * @param {Number} value value to test
     * @param {Array} others values to compare with
     * @return {Boolean} true if `value` is greater than `others` values
     * @api public
     */

    is.maximum = function(value, others) {
      if (isActualNaN(value)) {
        throw new TypeError('NaN is not a valid value');
      } else if (!is.arraylike(others)) {
        throw new TypeError('second argument must be array-like');
      }
      var len = others.length;

      while (--len >= 0) {
        if (value < others[len]) {
          return false;
        }
      }

      return true;
    };

    /**
     * is.minimum
     * Test if `value` is less than `others` values.
     *
     * @param {Number} value value to test
     * @param {Array} others values to compare with
     * @return {Boolean} true if `value` is less than `others` values
     * @api public
     */

    is.minimum = function(value, others) {
      if (isActualNaN(value)) {
        throw new TypeError('NaN is not a valid value');
      } else if (!is.arraylike(others)) {
        throw new TypeError('second argument must be array-like');
      }
      var len = others.length;

      while (--len >= 0) {
        if (value > others[len]) {
          return false;
        }
      }

      return true;
    };

    /**
     * is.nan
     * Test if `value` is not a number.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is not a number, false otherwise
     * @api public
     */

    is.nan = function(value) {
      return !is.number(value) || value !== value;
    };

    /**
     * is.even
     * Test if `value` is an even number.
     *
     * @param {Number} value value to test
     * @return {Boolean} true if `value` is an even number, false otherwise
     * @api public
     */

    is.even = function(value) {
      return is.infinite(value) || (is.number(value) && value === value && value % 2 === 0);
    };

    /**
     * is.odd
     * Test if `value` is an odd number.
     *
     * @param {Number} value value to test
     * @return {Boolean} true if `value` is an odd number, false otherwise
     * @api public
     */

    is.odd = function(value) {
      return is.infinite(value) || (is.number(value) && value === value && value % 2 !== 0);
    };

    /**
     * is.ge
     * Test if `value` is greater than or equal to `other`.
     *
     * @param {Number} value value to test
     * @param {Number} other value to compare with
     * @return {Boolean}
     * @api public
     */

    is.ge = function(value, other) {
      if (isActualNaN(value) || isActualNaN(other)) {
        throw new TypeError('NaN is not a valid value');
      }
      return !is.infinite(value) && !is.infinite(other) && value >= other;
    };

    /**
     * is.gt
     * Test if `value` is greater than `other`.
     *
     * @param {Number} value value to test
     * @param {Number} other value to compare with
     * @return {Boolean}
     * @api public
     */

    is.gt = function(value, other) {
      if (isActualNaN(value) || isActualNaN(other)) {
        throw new TypeError('NaN is not a valid value');
      }
      return !is.infinite(value) && !is.infinite(other) && value > other;
    };

    /**
     * is.le
     * Test if `value` is less than or equal to `other`.
     *
     * @param {Number} value value to test
     * @param {Number} other value to compare with
     * @return {Boolean} if 'value' is less than or equal to 'other'
     * @api public
     */

    is.le = function(value, other) {
      if (isActualNaN(value) || isActualNaN(other)) {
        throw new TypeError('NaN is not a valid value');
      }
      return !is.infinite(value) && !is.infinite(other) && value <= other;
    };

    /**
     * is.lt
     * Test if `value` is less than `other`.
     *
     * @param {Number} value value to test
     * @param {Number} other value to compare with
     * @return {Boolean} if `value` is less than `other`
     * @api public
     */

    is.lt = function(value, other) {
      if (isActualNaN(value) || isActualNaN(other)) {
        throw new TypeError('NaN is not a valid value');
      }
      return !is.infinite(value) && !is.infinite(other) && value < other;
    };

    /**
     * is.within
     * Test if `value` is within `start` and `finish`.
     *
     * @param {Number} value value to test
     * @param {Number} start lower bound
     * @param {Number} finish upper bound
     * @return {Boolean} true if 'value' is is within 'start' and 'finish'
     * @api public
     */
    is.within = function(value, start, finish) {
      if (isActualNaN(value) || isActualNaN(start) || isActualNaN(finish)) {
        throw new TypeError('NaN is not a valid value');
      } else if (!is.number(value) || !is.number(start) || !is.number(finish)) {
        throw new TypeError('all arguments must be numbers');
      }
      var isAnyInfinite = is.infinite(value) || is.infinite(start) || is.infinite(finish);
      return isAnyInfinite || (value >= start && value <= finish);
    };

    /**
     * Test object.
     */

    /**
     * is.object
     * Test if `value` is an object.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is an object, false otherwise
     * @api public
     */

    is.object = function(value) {
      return '[object Object]' === toStr.call(value);
    };

    /**
     * is.hash
     * Test if `value` is a hash - a plain object literal.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is a hash, false otherwise
     * @api public
     */

    is.hash = function(value) {
      return is.object(value) && value.constructor === Object && !value.nodeType && !value.setInterval;
    };

    /**
     * Test regexp.
     */

    /**
     * is.regexp
     * Test if `value` is a regular expression.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is a regexp, false otherwise
     * @api public
     */

    is.regexp = function(value) {
      return '[object RegExp]' === toStr.call(value);
    };

    /**
     * Test string.
     */

    /**
     * is.string
     * Test if `value` is a string.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if 'value' is a string, false otherwise
     * @api public
     */

    is.string = function(value) {
      return '[object String]' === toStr.call(value);
    };

    /**
     * Test base64 string.
     */

    /**
     * is.base64
     * Test if `value` is a valid base64 encoded string.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if 'value' is a base64 encoded string, false otherwise
     * @api public
     */

    is.base64 = function(value) {
      return is.string(value) && (!value.length || base64Regex.test(value));
    };

    /**
     * Test base64 string.
     */

    /**
     * is.hex
     * Test if `value` is a valid hex encoded string.
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if 'value' is a hex encoded string, false otherwise
     * @api public
     */

    is.hex = function(value) {
      return is.string(value) && (!value.length || hexRegex.test(value));
    };

    /**
     * is.symbol
     * Test if `value` is an ES6 Symbol
     *
     * @param {Mixed} value value to test
     * @return {Boolean} true if `value` is a Symbol, false otherise
     * @api public
     */

    is.symbol = function(value) {
      return typeof Symbol === 'function' && toStr.call(value) === '[object Symbol]' && typeof symbolValueOf.call(value) === 'symbol';
    };

  }, {}],
  4: [function(require, module, exports) {
    (function(global) {
      ! function(e) {
        if ("object" == typeof exports && "undefined" != typeof module) module.exports = e();
        else if ("function" == typeof define && define.amd) define([], e);
        else {
          var f;
          "undefined" != typeof window ? f = window : "undefined" != typeof global ? f = global : "undefined" != typeof self && (f = self), (f.qj || (f.qj = {})).js = e()
        }
      }(function() {
        var define, module, exports;
        return (function e(t, n, r) {
            function s(o, u) {
              if (!n[o]) {
                if (!t[o]) {
                  var a = typeof require == "function" && require;
                  if (!u && a) return a(o, !0);
                  if (i) return i(o, !0);
                  throw new Error("Cannot find module '" + o + "'")
                }
                var f = n[o] = {
                  exports: {}
                };
                t[o][0].call(f.exports, function(e) {
                  var n = t[o][1][e];
                  return s(n ? n : e)
                }, f, f.exports, e, t, n, r)
              }
              return n[o].exports
            }
            var i = typeof require == "function" && require;
            for (var o = 0; o < r.length; o++) s(r[o]);
            return s
          })({
            1: [function(_dereq_, module, exports) {
              var QJ, rreturn, rtrim;

              QJ = function(selector) {
                if (QJ.isDOMElement(selector)) {
                  return selector;
                }
                return document.querySelectorAll(selector);
              };

              QJ.isDOMElement = function(el) {
                return el && (el.nodeName != null);
              };

              rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

              QJ.trim = function(text) {
                if (text === null) {
                  return "";
                } else {
                  return (text + "").replace(rtrim, "");
                }
              };

              rreturn = /\r/g;

              QJ.val = function(el, val) {
                var ret;
                if (arguments.length > 1) {
                  return el.value = val;
                } else {
                  ret = el.value;
                  if (typeof ret === "string") {
                    return ret.replace(rreturn, "");
                  } else {
                    if (ret === null) {
                      return "";
                    } else {
                      return ret;
                    }
                  }
                }
              };

              QJ.preventDefault = function(eventObject) {
                if (typeof eventObject.preventDefault === "function") {
                  eventObject.preventDefault();
                  return;
                }
                eventObject.returnValue = false;
                return false;
              };

              QJ.normalizeEvent = function(e) {
                var original;
                original = e;
                e = {
                  which: original.which != null ? original.which : void 0,
                  target: original.target || original.srcElement,
                  preventDefault: function() {
                    return QJ.preventDefault(original);
                  },
                  originalEvent: original,
                  data: original.data || original.detail
                };
                if (e.which == null) {
                  e.which = original.charCode != null ? original.charCode : original.keyCode;
                }
                return e;
              };

              QJ.on = function(element, eventName, callback) {
                var el, multEventName, originalCallback, _i, _j, _len, _len1, _ref;
                if (element.length) {
                  for (_i = 0, _len = element.length; _i < _len; _i++) {
                    el = element[_i];
                    QJ.on(el, eventName, callback);
                  }
                  return;
                }
                if (eventName.match(" ")) {
                  _ref = eventName.split(" ");
                  for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
                    multEventName = _ref[_j];
                    QJ.on(element, multEventName, callback);
                  }
                  return;
                }
                originalCallback = callback;
                callback = function(e) {
                  e = QJ.normalizeEvent(e);
                  return originalCallback(e);
                };
                if (element.addEventListener) {
                  return element.addEventListener(eventName, callback, false);
                }
                if (element.attachEvent) {
                  eventName = "on" + eventName;
                  return element.attachEvent(eventName, callback);
                }
                element['on' + eventName] = callback;
              };

              QJ.addClass = function(el, className) {
                var e;
                if (el.length) {
                  return (function() {
                    var _i, _len, _results;
                    _results = [];
                    for (_i = 0, _len = el.length; _i < _len; _i++) {
                      e = el[_i];
                      _results.push(QJ.addClass(e, className));
                    }
                    return _results;
                  })();
                }
                if (el.classList) {
                  return el.classList.add(className);
                } else {
                  return el.className += ' ' + className;
                }
              };

              QJ.hasClass = function(el, className) {
                var e, hasClass, _i, _len;
                if (el.length) {
                  hasClass = true;
                  for (_i = 0, _len = el.length; _i < _len; _i++) {
                    e = el[_i];
                    hasClass = hasClass && QJ.hasClass(e, className);
                  }
                  return hasClass;
                }
                if (el.classList) {
                  return el.classList.contains(className);
                } else {
                  return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
                }
              };

              QJ.removeClass = function(el, className) {
                var cls, e, _i, _len, _ref, _results;
                if (el.length) {
                  return (function() {
                    var _i, _len, _results;
                    _results = [];
                    for (_i = 0, _len = el.length; _i < _len; _i++) {
                      e = el[_i];
                      _results.push(QJ.removeClass(e, className));
                    }
                    return _results;
                  })();
                }
                if (el.classList) {
                  _ref = className.split(' ');
                  _results = [];
                  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                    cls = _ref[_i];
                    _results.push(el.classList.remove(cls));
                  }
                  return _results;
                } else {
                  return el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
                }
              };

              QJ.toggleClass = function(el, className, bool) {
                var e;
                if (el.length) {
                  return (function() {
                    var _i, _len, _results;
                    _results = [];
                    for (_i = 0, _len = el.length; _i < _len; _i++) {
                      e = el[_i];
                      _results.push(QJ.toggleClass(e, className, bool));
                    }
                    return _results;
                  })();
                }
                if (bool) {
                  if (!QJ.hasClass(el, className)) {
                    return QJ.addClass(el, className);
                  }
                } else {
                  return QJ.removeClass(el, className);
                }
              };

              QJ.append = function(el, toAppend) {
                var e;
                if (el.length) {
                  return (function() {
                    var _i, _len, _results;
                    _results = [];
                    for (_i = 0, _len = el.length; _i < _len; _i++) {
                      e = el[_i];
                      _results.push(QJ.append(e, toAppend));
                    }
                    return _results;
                  })();
                }
                return el.insertAdjacentHTML('beforeend', toAppend);
              };

              QJ.find = function(el, selector) {
                if (el instanceof NodeList || el instanceof Array) {
                  el = el[0];
                }
                return el.querySelectorAll(selector);
              };

              QJ.trigger = function(el, name, data) {
                var e, ev;
                try {
                  ev = new CustomEvent(name, {
                    detail: data
                  });
                } catch (_error) {
                  e = _error;
                  ev = document.createEvent('CustomEvent');
                  if (ev.initCustomEvent) {
                    ev.initCustomEvent(name, true, true, data);
                  } else {
                    ev.initEvent(name, true, true, data);
                  }
                }
                return el.dispatchEvent(ev);
              };

              module.exports = QJ;

            }, {}]
          }, {}, [1])
          (1)
      });
    }).call(this, typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
  }, {}],
  5: [function(require, module, exports) {
    module.exports = require('cssify');
  }, {
    "cssify": 6
  }],
  6: [function(require, module, exports) {
    module.exports = function(css, customDocument) {
      var doc = customDocument || document;
      if (doc.createStyleSheet) {
        var sheet = doc.createStyleSheet()
        sheet.cssText = css;
        return sheet.ownerNode;
      } else {
        var head = doc.getElementsByTagName('head')[0],
          style = doc.createElement('style');

        style.type = 'text/css';

        if (style.styleSheet) {
          style.styleSheet.cssText = css;
        } else {
          style.appendChild(doc.createTextNode(css));
        }

        head.appendChild(style);
        return style;
      }
    };

    module.exports.byUrl = function(url) {
      if (document.createStyleSheet) {
        return document.createStyleSheet(url).ownerNode;
      } else {
        var head = document.getElementsByTagName('head')[0],
          link = document.createElement('link');

        link.rel = 'stylesheet';
        link.href = url;

        head.appendChild(link);
        return link;
      }
    };

  }, {}],
  7: [function(require, module, exports) {
    (function(global) {
      var Card, QJ, extend, payment;

      require('../scss/card.scss');

      QJ = require('qj');

      payment = require('./payment/src/payment.coffee');

      extend = require('node.extend');

      Card = (function() {
        var bindVal;

        Card.prototype.cardTemplate = '' + '<div class="jp-card-container">' + '<div class="jp-card">' + '<div class="jp-card-front">' + '<div class="jp-card-logo jp-card-visa">visa</div>' + '<div class="jp-card-logo jp-card-mastercard">MasterCard</div>' + '<div class="jp-card-logo jp-card-maestro">Maestro</div>' + '<div class="jp-card-logo jp-card-amex"></div>' + '<div class="jp-card-logo jp-card-discover">discover</div>' + '<div class="jp-card-logo jp-card-dankort"><div class="dk"><div class="d"></div><div class="k"></div></div></div>' + '<div class="jp-card-lower">' + '<div class="jp-card-shiny"></div>' + '<div class="jp-card-cvc jp-card-display">{{cvc}}</div>' + '<div class="jp-card-number jp-card-display">{{number}}</div>' + '<div class="jp-card-name jp-card-display">{{name}}</div>' + '<div class="jp-card-expiry jp-card-display" data-before="{{monthYear}}" data-after="{{validDate}}">{{expiry}}</div>' + '</div>' + '</div>' + '<div class="jp-card-back">' + '<div class="jp-card-bar"></div>' + '<div class="jp-card-cvc jp-card-display">{{cvc}}</div>' + '<div class="jp-card-shiny"></div>' + '</div>' + '</div>' + '</div>';

        Card.prototype.template = function(tpl, data) {
          return tpl.replace(/\{\{(.*?)\}\}/g, function(match, key, str) {
            return data[key];
          });
        };

        Card.prototype.cardTypes = ['jp-card-amex', 'jp-card-dankort', 'jp-card-dinersclub', 'jp-card-discover', 'jp-card-jcb', 'jp-card-laser', 'jp-card-maestro', 'jp-card-mastercard', 'jp-card-unionpay', 'jp-card-visa', 'jp-card-visaelectron'];

        Card.prototype.defaults = {
          formatting: true,
          formSelectors: {
            numberInput: 'input[name="number"]',
            expiryInput: 'input[name="expiry"]',
            cvcInput: 'input[name="cvc"]',
            nameInput: 'input[name="name"]'
          },
          cardSelectors: {
            cardContainer: '.jp-card-container',
            card: '.jp-card',
            numberDisplay: '.jp-card-number',
            expiryDisplay: '.jp-card-expiry',
            cvcDisplay: '.jp-card-cvc',
            nameDisplay: '.jp-card-name'
          },
          messages: {
            validDate: 'valid\nthru',
            monthYear: 'month/year'
          },
          placeholders: {
            number: '&bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull;',
            cvc: '&bull;&bull;&bull;',
            expiry: '&bull;&bull;/&bull;&bull;',
            name: 'Full Name'
          },
          classes: {
            valid: 'jp-card-valid',
            invalid: 'jp-card-invalid'
          },
          debug: false
        };

        function Card(opts) {
          this.options = extend(true, this.defaults, opts);
          if (!this.options.form) {
            console.log("Please provide a form");
            return;
          }
          this.$el = QJ(this.options.form);
          if (!this.options.container) {
            console.log("Please provide a container");
            return;
          }
          this.$container = QJ(this.options.container);
          this.render();
          this.attachHandlers();
          this.handleInitialPlaceholders();
        }

        Card.prototype.render = function() {
          var $cardContainer, baseWidth, name, obj, selector, ua, _ref, _ref1;
          QJ.append(this.$container, this.template(this.cardTemplate, extend({}, this.options.messages, this.options.placeholders)));
          _ref = this.options.cardSelectors;
          for (name in _ref) {
            selector = _ref[name];
            this["$" + name] = QJ.find(this.$container, selector);
          }
          _ref1 = this.options.formSelectors;
          for (name in _ref1) {
            selector = _ref1[name];
            selector = this.options[name] ? this.options[name] : selector;
            obj = QJ.find(this.$el, selector);
            if (!obj.length && this.options.debug) {
              console.error("Card can't find a " + name + " in your form.");
            }
            this["$" + name] = obj;
          }
          if (this.options.formatting) {
            Payment.formatCardNumber(this.$numberInput);
            Payment.formatCardCVC(this.$cvcInput);
            if (this.$expiryInput.length === 1) {
              Payment.formatCardExpiry(this.$expiryInput);
            }
          }
          if (this.options.width) {
            $cardContainer = QJ(this.options.cardSelectors.cardContainer)[0];
            baseWidth = parseInt($cardContainer.clientWidth);
            $cardContainer.style.transform = "scale(" + (this.options.width / baseWidth) + ")";
          }
          if (typeof navigator !== "undefined" && navigator !== null ? navigator.userAgent : void 0) {
            ua = navigator.userAgent.toLowerCase();
            if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1) {
              QJ.addClass(this.$card, 'jp-card-safari');
            }
          }
          if (/MSIE 10\./i.test(navigator.userAgent)) {
            QJ.addClass(this.$card, 'jp-card-ie-10');
          }
          if (/rv:11.0/i.test(navigator.userAgent)) {
            return QJ.addClass(this.$card, 'jp-card-ie-11');
          }
        };

        Card.prototype.attachHandlers = function() {
          var expiryFilters;
          bindVal(this.$numberInput, this.$numberDisplay, {
            fill: false,
            filters: this.validToggler('cardNumber')
          });
          QJ.on(this.$numberInput, 'payment.cardType', this.handle('setCardType'));
          expiryFilters = [
            function(val) {
              return val.replace(/(\s+)/g, '');
            }
          ];
          if (this.$expiryInput.length === 1) {
            expiryFilters.push(this.validToggler('cardExpiry'));
          }
          bindVal(this.$expiryInput, this.$expiryDisplay, {
            join: function(text) {
              if (text[0].length === 2 || text[1]) {
                return "/";
              } else {
                return "";
              }
            },
            filters: expiryFilters
          });
          bindVal(this.$cvcInput, this.$cvcDisplay, {
            filters: this.validToggler('cardCVC')
          });
          QJ.on(this.$cvcInput, 'focus', this.handle('flipCard'));
          QJ.on(this.$cvcInput, 'blur', this.handle('unflipCard'));
          return bindVal(this.$nameInput, this.$nameDisplay, {
            fill: false,
            filters: this.validToggler('cardHolderName'),
            join: ' '
          });
        };

        Card.prototype.handleInitialPlaceholders = function() {
          var el, name, selector, _ref, _results;
          _ref = this.options.formSelectors;
          _results = [];
          for (name in _ref) {
            selector = _ref[name];
            el = this["$" + name];
            if (QJ.val(el)) {
              QJ.trigger(el, 'paste');
              _results.push(setTimeout(function() {
                return QJ.trigger(el, 'keyup');
              }));
            } else {
              _results.push(void 0);
            }
          }
          return _results;
        };

        Card.prototype.handle = function(fn) {
          return (function(_this) {
            return function(e) {
              var args;
              args = Array.prototype.slice.call(arguments);
              args.unshift(e.target);
              return _this.handlers[fn].apply(_this, args);
            };
          })(this);
        };

        Card.prototype.validToggler = function(validatorName) {
          var isValid;
          if (validatorName === "cardExpiry") {
            isValid = function(val) {
              var objVal;
              objVal = Payment.fns.cardExpiryVal(val);
              return Payment.fns.validateCardExpiry(objVal.month, objVal.year);
            };
          } else if (validatorName === "cardCVC") {
            isValid = (function(_this) {
              return function(val) {
                return Payment.fns.validateCardCVC(val, _this.cardType);
              };
            })(this);
          } else if (validatorName === "cardNumber") {
            isValid = function(val) {
              return Payment.fns.validateCardNumber(val);
            };
          } else if (validatorName === "cardHolderName") {
            isValid = function(val) {
              return val !== "";
            };
          }
          return (function(_this) {
            return function(val, $in, $out) {
              var result;
              result = isValid(val);
              _this.toggleValidClass($in, result);
              _this.toggleValidClass($out, result);
              return val;
            };
          })(this);
        };

        Card.prototype.toggleValidClass = function(el, test) {
          QJ.toggleClass(el, this.options.classes.valid, test);
          return QJ.toggleClass(el, this.options.classes.invalid, !test);
        };

        Card.prototype.handlers = {
          setCardType: function($el, e) {
            var cardType;
            cardType = e.data;
            if (!QJ.hasClass(this.$card, cardType)) {
              QJ.removeClass(this.$card, 'jp-card-unknown');
              QJ.removeClass(this.$card, this.cardTypes.join(' '));
              QJ.addClass(this.$card, "jp-card-" + cardType);
              QJ.toggleClass(this.$card, 'jp-card-identified', cardType !== 'unknown');
              return this.cardType = cardType;
            }
          },
          flipCard: function() {
            return QJ.addClass(this.$card, 'jp-card-flipped');
          },
          unflipCard: function() {
            return QJ.removeClass(this.$card, 'jp-card-flipped');
          }
        };

        bindVal = function(el, out, opts) {
          var joiner, o, outDefaults;
          if (opts == null) {
            opts = {};
          }
          opts.fill = opts.fill || false;
          opts.filters = opts.filters || [];
          if (!(opts.filters instanceof Array)) {
            opts.filters = [opts.filters];
          }
          opts.join = opts.join || "";
          if (!(typeof opts.join === "function")) {
            joiner = opts.join;
            opts.join = function() {
              return joiner;
            };
          }
          outDefaults = (function() {
            var _i, _len, _results;
            _results = [];
            for (_i = 0, _len = out.length; _i < _len; _i++) {
              o = out[_i];
              _results.push(o.textContent);
            }
            return _results;
          })();
          QJ.on(el, 'focus', function() {
            return QJ.addClass(out, 'jp-card-focused');
          });
          QJ.on(el, 'blur', function() {
            return QJ.removeClass(out, 'jp-card-focused');
          });
          QJ.on(el, 'keyup change paste', function(e) {
            var elem, filter, i, join, outEl, outVal, val, _i, _j, _len, _len1, _ref, _results;
            val = (function() {
              var _i, _len, _results;
              _results = [];
              for (_i = 0, _len = el.length; _i < _len; _i++) {
                elem = el[_i];
                _results.push(QJ.val(elem));
              }
              return _results;
            })();
            join = opts.join(val);
            val = val.join(join);
            if (val === join) {
              val = "";
            }
            _ref = opts.filters;
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
              filter = _ref[_i];
              val = filter(val, el, out);
            }
            _results = [];
            for (i = _j = 0, _len1 = out.length; _j < _len1; i = ++_j) {
              outEl = out[i];
              if (opts.fill) {
                outVal = val + outDefaults[i].substring(val.length);
              } else {
                outVal = val || outDefaults[i];
              }
              _results.push(outEl.textContent = outVal);
            }
            return _results;
          });
          return el;
        };

        return Card;

      })();

      module.exports = Card;

      global.Card = Card;

    }).call(this, typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
  }, {
    "../scss/card.scss": 9,
    "./payment/src/payment.coffee": 8,
    "node.extend": 1,
    "qj": 4
  }],
  8: [function(require, module, exports) {
    (function(global) {
      var Payment, QJ, cardFromNumber, cardFromType, cards, defaultFormat, formatBackCardNumber, formatBackExpiry, formatCardNumber, formatExpiry, formatForwardExpiry, formatForwardSlash, hasTextSelected, luhnCheck, reFormatCardNumber, restrictCVC, restrictCardNumber, restrictExpiry, restrictNumeric, setCardType,
        __indexOf = [].indexOf || function(item) {
          for (var i = 0, l = this.length; i < l; i++) {
            if (i in this && this[i] === item) return i;
          }
          return -1;
        };

      QJ = require('qj');

      defaultFormat = /(\d{1,4})/g;

      cards = [{
        type: 'amex',
        pattern: /^3[47]/,
        format: /(\d{1,4})(\d{1,6})?(\d{1,5})?/,
        length: [15],
        cvcLength: [4],
        luhn: true
      }, {
        type: 'dankort',
        pattern: /^5019/,
        format: defaultFormat,
        length: [16],
        cvcLength: [3],
        luhn: true
      }, {
        type: 'dinersclub',
        pattern: /^(36|38|30[0-5])/,
        format: defaultFormat,
        length: [14],
        cvcLength: [3],
        luhn: true
      }, {
        type: 'discover',
        pattern: /^(6011|65|64[4-9]|622)/,
        format: defaultFormat,
        length: [16],
        cvcLength: [3],
        luhn: true
      }, {
        type: 'jcb',
        pattern: /^35/,
        format: defaultFormat,
        length: [16],
        cvcLength: [3],
        luhn: true
      }, {
        type: 'laser',
        pattern: /^(6706|6771|6709)/,
        format: defaultFormat,
        length: [16, 17, 18, 19],
        cvcLength: [3],
        luhn: true
      }, {
        type: 'maestro',
        pattern: /^(5018|5020|5038|6304|6703|6759|676[1-3])/,
        format: defaultFormat,
        length: [12, 13, 14, 15, 16, 17, 18, 19],
        cvcLength: [3],
        luhn: true
      }, {
        type: 'mastercard',
        pattern: /^5[1-5]/,
        format: defaultFormat,
        length: [16],
        cvcLength: [3],
        luhn: true
      }, {
        type: 'unionpay',
        pattern: /^62/,
        format: defaultFormat,
        length: [16, 17, 18, 19],
        cvcLength: [3],
        luhn: false
      }, {
        type: 'visaelectron',
        pattern: /^4(026|17500|405|508|844|91[37])/,
        format: defaultFormat,
        length: [16],
        cvcLength: [3],
        luhn: true
      }, {
        type: 'visa',
        pattern: /^4/,
        format: defaultFormat,
        length: [13, 14, 15, 16],
        cvcLength: [3],
        luhn: true
      }];

      cardFromNumber = function(num) {
        var card, _i, _len;
        num = (num + '').replace(/\D/g, '');
        for (_i = 0, _len = cards.length; _i < _len; _i++) {
          card = cards[_i];
          if (card.pattern.test(num)) {
            return card;
          }
        }
      };

      cardFromType = function(type) {
        var card, _i, _len;
        for (_i = 0, _len = cards.length; _i < _len; _i++) {
          card = cards[_i];
          if (card.type === type) {
            return card;
          }
        }
      };

      luhnCheck = function(num) {
        var digit, digits, odd, sum, _i, _len;
        odd = true;
        sum = 0;
        digits = (num + '').split('').reverse();
        for (_i = 0, _len = digits.length; _i < _len; _i++) {
          digit = digits[_i];
          digit = parseInt(digit, 10);
          if ((odd = !odd)) {
            digit *= 2;
          }
          if (digit > 9) {
            digit -= 9;
          }
          sum += digit;
        }
        return sum % 10 === 0;
      };

      hasTextSelected = function(target) {
        var _ref;
        if ((target.selectionStart != null) && target.selectionStart !== target.selectionEnd) {
          return true;
        }
        if ((typeof document !== "undefined" && document !== null ? (_ref = document.selection) != null ? _ref.createRange : void 0 : void 0) != null) {
          if (document.selection.createRange().text) {
            return true;
          }
        }
        return false;
      };

      reFormatCardNumber = function(e) {
        return setTimeout((function(_this) {
          return function() {
            var target, value;
            target = e.target;
            value = QJ.val(target);
            value = Payment.fns.formatCardNumber(value);
            return QJ.val(target, value);
          };
        })(this));
      };

      formatCardNumber = function(e) {
        var card, digit, length, re, target, upperLength, value;
        digit = String.fromCharCode(e.which);
        if (!/^\d+$/.test(digit)) {
          return;
        }
        target = e.target;
        value = QJ.val(target);
        card = cardFromNumber(value + digit);
        length = (value.replace(/\D/g, '') + digit).length;
        upperLength = 16;
        if (card) {
          upperLength = card.length[card.length.length - 1];
        }
        if (length >= upperLength) {
          return;
        }
        if ((target.selectionStart != null) && target.selectionStart !== value.length) {
          return;
        }
        if (card && card.type === 'amex') {
          re = /^(\d{4}|\d{4}\s\d{6})$/;
        } else {
          re = /(?:^|\s)(\d{4})$/;
        }
        if (re.test(value)) {
          e.preventDefault();
          return QJ.val(target, value + ' ' + digit);
        } else if (re.test(value + digit)) {
          e.preventDefault();
          return QJ.val(target, value + digit + ' ');
        }
      };

      formatBackCardNumber = function(e) {
        var target, value;
        target = e.target;
        value = QJ.val(target);
        if (e.meta) {
          return;
        }
        if (e.which !== 8) {
          return;
        }
        if ((target.selectionStart != null) && target.selectionStart !== value.length) {
          return;
        }
        if (/\d\s$/.test(value)) {
          e.preventDefault();
          return QJ.val(target, value.replace(/\d\s$/, ''));
        } else if (/\s\d?$/.test(value)) {
          e.preventDefault();
          return QJ.val(target, value.replace(/\s\d?$/, ''));
        }
      };

      formatExpiry = function(e) {
        var digit, target, val;
        digit = String.fromCharCode(e.which);
        if (!/^\d+$/.test(digit)) {
          return;
        }
        target = e.target;
        val = QJ.val(target) + digit;
        if (/^\d$/.test(val) && (val !== '0' && val !== '1')) {
          e.preventDefault();
          return QJ.val(target, "0" + val + " / ");
        } else if (/^\d\d$/.test(val)) {
          e.preventDefault();
          return QJ.val(target, "" + val + " / ");
        }
      };

      formatForwardExpiry = function(e) {
        var digit, target, val;
        digit = String.fromCharCode(e.which);
        if (!/^\d+$/.test(digit)) {
          return;
        }
        target = e.target;
        val = QJ.val(target);
        if (/^\d\d$/.test(val)) {
          return QJ.val(target, "" + val + " / ");
        }
      };

      formatForwardSlash = function(e) {
        var slash, target, val;
        slash = String.fromCharCode(e.which);
        if (slash !== '/') {
          return;
        }
        target = e.target;
        val = QJ.val(target);
        if (/^\d$/.test(val) && val !== '0') {
          return QJ.val(target, "0" + val + " / ");
        }
      };

      formatBackExpiry = function(e) {
        var target, value;
        if (e.metaKey) {
          return;
        }
        target = e.target;
        value = QJ.val(target);
        if (e.which !== 8) {
          return;
        }
        if ((target.selectionStart != null) && target.selectionStart !== value.length) {
          return;
        }
        if (/\d(\s|\/)+$/.test(value)) {
          e.preventDefault();
          return QJ.val(target, value.replace(/\d(\s|\/)*$/, ''));
        } else if (/\s\/\s?\d?$/.test(value)) {
          e.preventDefault();
          return QJ.val(target, value.replace(/\s\/\s?\d?$/, ''));
        }
      };

      restrictNumeric = function(e) {
        var input;
        if (e.metaKey || e.ctrlKey) {
          return true;
        }
        if (e.which === 32) {
          return e.preventDefault();
        }
        if (e.which === 0) {
          return true;
        }
        if (e.which < 33) {
          return true;
        }
        input = String.fromCharCode(e.which);
        if (!/[\d\s]/.test(input)) {
          return e.preventDefault();
        }
      };

      restrictCardNumber = function(e) {
        var card, digit, target, value;
        target = e.target;
        digit = String.fromCharCode(e.which);
        if (!/^\d+$/.test(digit)) {
          return;
        }
        if (hasTextSelected(target)) {
          return;
        }
        value = (QJ.val(target) + digit).replace(/\D/g, '');
        card = cardFromNumber(value);
        if (card) {
          if (!(value.length <= card.length[card.length.length - 1])) {
            return e.preventDefault();
          }
        } else {
          if (!(value.length <= 16)) {
            return e.preventDefault();
          }
        }
      };

      restrictExpiry = function(e) {
        var digit, target, value;
        target = e.target;
        digit = String.fromCharCode(e.which);
        if (!/^\d+$/.test(digit)) {
          return;
        }
        if (hasTextSelected(target)) {
          return;
        }
        value = QJ.val(target) + digit;
        value = value.replace(/\D/g, '');
        if (value.length > 6) {
          return e.preventDefault();
        }
      };

      restrictCVC = function(e) {
        var digit, target, val;
        target = e.target;
        digit = String.fromCharCode(e.which);
        if (!/^\d+$/.test(digit)) {
          return;
        }
        val = QJ.val(target) + digit;
        if (!(val.length <= 4)) {
          return e.preventDefault();
        }
      };

      setCardType = function(e) {
        var allTypes, card, cardType, target, val;
        target = e.target;
        val = QJ.val(target);
        cardType = Payment.fns.cardType(val) || 'unknown';
        if (!QJ.hasClass(target, cardType)) {
          allTypes = (function() {
            var _i, _len, _results;
            _results = [];
            for (_i = 0, _len = cards.length; _i < _len; _i++) {
              card = cards[_i];
              _results.push(card.type);
            }
            return _results;
          })();
          QJ.removeClass(target, 'unknown');
          QJ.removeClass(target, allTypes.join(' '));
          QJ.addClass(target, cardType);
          QJ.toggleClass(target, 'identified', cardType !== 'unknown');
          return QJ.trigger(target, 'payment.cardType', cardType);
        }
      };

      Payment = (function() {
        function Payment() {}

        Payment.fns = {
          cardExpiryVal: function(value) {
            var month, prefix, year, _ref;
            value = value.replace(/\s/g, '');
            _ref = value.split('/', 2), month = _ref[0], year = _ref[1];
            if ((year != null ? year.length : void 0) === 2 && /^\d+$/.test(year)) {
              prefix = (new Date).getFullYear();
              prefix = prefix.toString().slice(0, 2);
              year = prefix + year;
            }
            month = parseInt(month, 10);
            year = parseInt(year, 10);
            return {
              month: month,
              year: year
            };
          },
          validateCardNumber: function(num) {
            var card, _ref;
            num = (num + '').replace(/\s+|-/g, '');
            if (!/^\d+$/.test(num)) {
              return false;
            }
            card = cardFromNumber(num);
            if (!card) {
              return false;
            }
            return (_ref = num.length, __indexOf.call(card.length, _ref) >= 0) && (card.luhn === false || luhnCheck(num));
          },
          validateCardExpiry: function(month, year) {
            var currentTime, expiry, prefix, _ref;
            if (typeof month === 'object' && 'month' in month) {
              _ref = month, month = _ref.month, year = _ref.year;
            }
            if (!(month && year)) {
              return false;
            }
            month = QJ.trim(month);
            year = QJ.trim(year);
            if (!/^\d+$/.test(month)) {
              return false;
            }
            if (!/^\d+$/.test(year)) {
              return false;
            }
            if (!(parseInt(month, 10) <= 12)) {
              return false;
            }
            if (year.length === 2) {
              prefix = (new Date).getFullYear();
              prefix = prefix.toString().slice(0, 2);
              year = prefix + year;
            }
            expiry = new Date(year, month);
            currentTime = new Date;
            expiry.setMonth(expiry.getMonth() - 1);
            expiry.setMonth(expiry.getMonth() + 1, 1);
            return expiry > currentTime;
          },
          validateCardCVC: function(cvc, type) {
            var _ref, _ref1;
            cvc = QJ.trim(cvc);
            if (!/^\d+$/.test(cvc)) {
              return false;
            }
            if (type && cardFromType(type)) {
              return _ref = cvc.length, __indexOf.call((_ref1 = cardFromType(type)) != null ? _ref1.cvcLength : void 0, _ref) >= 0;
            } else {
              return cvc.length >= 3 && cvc.length <= 4;
            }
          },
          cardType: function(num) {
            var _ref;
            if (!num) {
              return null;
            }
            return ((_ref = cardFromNumber(num)) != null ? _ref.type : void 0) || null;
          },
          formatCardNumber: function(num) {
            var card, groups, upperLength, _ref;
            card = cardFromNumber(num);
            if (!card) {
              return num;
            }
            upperLength = card.length[card.length.length - 1];
            num = num.replace(/\D/g, '');
            num = num.slice(0, +upperLength + 1 || 9e9);
            if (card.format.global) {
              return (_ref = num.match(card.format)) != null ? _ref.join(' ') : void 0;
            } else {
              groups = card.format.exec(num);
              if (groups != null) {
                groups.shift();
              }
              return groups != null ? groups.join(' ') : void 0;
            }
          }
        };

        Payment.restrictNumeric = function(el) {
          return QJ.on(el, 'keypress', restrictNumeric);
        };

        Payment.cardExpiryVal = function(el) {
          return Payment.fns.cardExpiryVal(QJ.val(el));
        };

        Payment.formatCardCVC = function(el) {
          Payment.restrictNumeric(el);
          QJ.on(el, 'keypress', restrictCVC);
          return el;
        };

        Payment.formatCardExpiry = function(el) {
          Payment.restrictNumeric(el);
          QJ.on(el, 'keypress', restrictExpiry);
          QJ.on(el, 'keypress', formatExpiry);
          QJ.on(el, 'keypress', formatForwardSlash);
          QJ.on(el, 'keypress', formatForwardExpiry);
          QJ.on(el, 'keydown', formatBackExpiry);
          return el;
        };

        Payment.formatCardNumber = function(el) {
          Payment.restrictNumeric(el);
          QJ.on(el, 'keypress', restrictCardNumber);
          QJ.on(el, 'keypress', formatCardNumber);
          QJ.on(el, 'keydown', formatBackCardNumber);
          QJ.on(el, 'keyup', setCardType);
          QJ.on(el, 'paste', reFormatCardNumber);
          return el;
        };

        Payment.getCardArray = function() {
          return cards;
        };

        Payment.setCardArray = function(cardArray) {
          cards = cardArray;
          return true;
        };

        Payment.addToCardArray = function(cardObject) {
          return cards.push(cardObject);
        };

        Payment.removeFromCardArray = function(type) {
          var key, value;
          for (key in cards) {
            value = cards[key];
            if (value.type === type) {
              cards.splice(key, 1);
            }
          }
          return true;
        };

        return Payment;

      })();

      module.exports = Payment;

      global.Payment = Payment;

    }).call(this, typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
  }, {
    "qj": 4
  }],
  9: [function(require, module, exports) {
    module.exports = require('sassify')('.jp-card.jp-card-safari.jp-card-identified .jp-card-front:before, .jp-card.jp-card-safari.jp-card-identified .jp-card-back:before {   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: 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%); }  .jp-card.jp-card-ie-10.jp-card-flipped, .jp-card.jp-card-ie-11.jp-card-flipped {   -webkit-transform: 0deg;   -moz-transform: 0deg;   -ms-transform: 0deg;   -o-transform: 0deg;   transform: 0deg; }   .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-front, .jp-card.jp-card-ie-11.jp-card-flipped .jp-card-front {     -webkit-transform: rotateY(0deg);     -moz-transform: rotateY(0deg);     -ms-transform: rotateY(0deg);     -o-transform: rotateY(0deg);     transform: rotateY(0deg); }   .jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back, .jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back {     -webkit-transform: rotateY(0deg);     -moz-transform: rotateY(0deg);     -ms-transform: rotateY(0deg);     -o-transform: rotateY(0deg);     transform: rotateY(0deg); }     .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 {       left: 18%; }     .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 {       -webkit-transform: rotateY(180deg);       -moz-transform: rotateY(180deg);       -ms-transform: rotateY(180deg);       -o-transform: rotateY(180deg);       transform: rotateY(180deg);       left: 5%; }     .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 {       left: 84%; }       .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 {         left: -480%;         -webkit-transform: rotateY(180deg);         -moz-transform: rotateY(180deg);         -ms-transform: rotateY(180deg);         -o-transform: rotateY(180deg);         transform: rotateY(180deg); }  .jp-card.jp-card-ie-10.jp-card-amex .jp-card-back, .jp-card.jp-card-ie-11.jp-card-amex .jp-card-back {   display: none; }  .jp-card-logo {   height: 36px;   width: 60px;   font-style: italic; }   .jp-card-logo, .jp-card-logo:before, .jp-card-logo:after {     box-sizing: border-box; }  .jp-card-logo.jp-card-amex {   text-transform: uppercase;   font-size: 4px;   font-weight: bold;   color: white;   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; }   .jp-card-logo.jp-card-amex:before, .jp-card-logo.jp-card-amex:after {     width: 28px;     display: block;     position: absolute;     left: 16px; }   .jp-card-logo.jp-card-amex:before {     height: 28px;     content: "american";     top: 3px;     text-align: left;     padding-left: 2px;     padding-top: 11px;     background: #267AC3; }   .jp-card-logo.jp-card-amex:after {     content: "express";     bottom: 11px;     text-align: right;     padding-right: 2px; }  .jp-card.jp-card-amex.jp-card-flipped {   -webkit-transform: none;   -moz-transform: none;   -ms-transform: none;   -o-transform: none;   transform: none; }  .jp-card.jp-card-amex.jp-card-identified .jp-card-front:before, .jp-card.jp-card-amex.jp-card-identified .jp-card-back:before {   background-color: #108168; }  .jp-card.jp-card-amex.jp-card-identified .jp-card-front .jp-card-logo.jp-card-amex {   opacity: 1; }  .jp-card.jp-card-amex.jp-card-identified .jp-card-front .jp-card-cvc {   visibility: visible; }  .jp-card.jp-card-amex.jp-card-identified .jp-card-front:after {   opacity: 1; }  .jp-card-logo.jp-card-discover {   background: #FF6600;   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; }   .jp-card-logo.jp-card-discover:before, .jp-card-logo.jp-card-discover:after {     content: " ";     display: block;     position: absolute; }   .jp-card-logo.jp-card-discover:before {     background: white;     width: 200px;     height: 200px;     border-radius: 200px;     bottom: -5%;     right: -80%;     z-index: -1; }   .jp-card-logo.jp-card-discover:after {     width: 8px;     height: 8px;     border-radius: 4px;     top: 10px;     left: 27px;     background-color: #FF6600;     background-image: -webkit-radial-gradient(#FF6600, #fff, , , , , , , , );     background-image: radial-gradient(  #FF6600, #fff, , , , , , , , );     content: "network";     font-size: 4px;     line-height: 24px;     text-indent: -7px; }  .jp-card .jp-card-front .jp-card-logo.jp-card-discover {   right: 12%;   top: 18%; }  .jp-card.jp-card-discover.jp-card-identified .jp-card-front:before, .jp-card.jp-card-discover.jp-card-identified .jp-card-back:before {   background-color: #86B8CF; }  .jp-card.jp-card-discover.jp-card-identified .jp-card-logo.jp-card-discover {   opacity: 1; }  .jp-card.jp-card-discover.jp-card-identified .jp-card-front:after {   -webkit-transition: 400ms;   -moz-transition: 400ms;   transition: 400ms;   content: " ";   display: block;   background-color: #FF6600;   background-image: -webkit-linear-gradient(#FF6600, #ffa366, #FF6600);   background-image: linear-gradient(#FF6600, #ffa366, #FF6600, , , , , , , );   height: 50px;   width: 50px;   border-radius: 25px;   position: absolute;   left: 100%;   top: 15%;   margin-left: -25px;   box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.5); }  .jp-card-logo.jp-card-visa {   background: white;   text-transform: uppercase;   color: #1A1876;   text-align: center;   font-weight: bold;   font-size: 15px;   line-height: 18px; }   .jp-card-logo.jp-card-visa:before, .jp-card-logo.jp-card-visa:after {     content: " ";     display: block;     width: 100%;     height: 25%; }   .jp-card-logo.jp-card-visa:before {     background: #1A1876; }   .jp-card-logo.jp-card-visa:after {     background: #E79800; }  .jp-card.jp-card-visa.jp-card-identified .jp-card-front:before, .jp-card.jp-card-visa.jp-card-identified .jp-card-back:before {   background-color: #191278; }  .jp-card.jp-card-visa.jp-card-identified .jp-card-logo.jp-card-visa {   opacity: 1; }  .jp-card-logo.jp-card-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); }   .jp-card-logo.jp-card-mastercard:before, .jp-card-logo.jp-card-mastercard:after {     content: " ";     display: block;     width: 36px;     top: 0;     position: absolute;     height: 36px;     border-radius: 18px; }   .jp-card-logo.jp-card-mastercard:before {     left: 0;     background: #FF0000;     z-index: -1; }   .jp-card-logo.jp-card-mastercard:after {     right: 0;     background: #FFAB00;     z-index: -2; }  .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 {   box-shadow: none; }  .jp-card.jp-card-mastercard.jp-card-identified .jp-card-front:before, .jp-card.jp-card-mastercard.jp-card-identified .jp-card-back:before {   background-color: #0061A8; }  .jp-card.jp-card-mastercard.jp-card-identified .jp-card-logo.jp-card-mastercard {   opacity: 1; }  .jp-card-logo.jp-card-maestro {   color: white;   font-weight: bold;   text-align: center;   font-size: 14px;   line-height: 36px;   z-index: 1;   text-shadow: 1px 1px rgba(0, 0, 0, 0.6); }   .jp-card-logo.jp-card-maestro:before, .jp-card-logo.jp-card-maestro:after {     content: " ";     display: block;     width: 36px;     top: 0;     position: absolute;     height: 36px;     border-radius: 18px; }   .jp-card-logo.jp-card-maestro:before {     left: 0;     background: #0064CB;     z-index: -1; }   .jp-card-logo.jp-card-maestro:after {     right: 0;     background: #CC0000;     z-index: -2; }  .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 {   box-shadow: none; }  .jp-card.jp-card-maestro.jp-card-identified .jp-card-front:before, .jp-card.jp-card-maestro.jp-card-identified .jp-card-back:before {   background-color: #0B2C5F; }  .jp-card.jp-card-maestro.jp-card-identified .jp-card-logo.jp-card-maestro {   opacity: 1; }  .jp-card-logo.jp-card-dankort {   width: 60px;   height: 36px;   padding: 3px;   border-radius: 8px;   border: #000000 1px solid;   background-color: #FFFFFF; }   .jp-card-logo.jp-card-dankort .dk {     position: relative;     width: 100%;     height: 100%;     overflow: hidden; }     .jp-card-logo.jp-card-dankort .dk:before {       background-color: #ED1C24;       content: \'\';       position: absolute;       width: 100%;       height: 100%;       display: block;       border-radius: 6px; }     .jp-card-logo.jp-card-dankort .dk:after {       content: \'\';       position: absolute;       top: 50%;       margin-top: -7.7px;       right: 0;       width: 0;       height: 0;       border-style: solid;       border-width: 7px 7px 10px 0;       border-color: transparent #ED1C24 transparent transparent;       z-index: 1; }   .jp-card-logo.jp-card-dankort .d, .jp-card-logo.jp-card-dankort .k {     position: absolute;     top: 50%;     width: 50%;     display: block;     height: 15.4px;     margin-top: -7.7px;     background: white; }   .jp-card-logo.jp-card-dankort .d {     left: 0;     border-radius: 0 8px 10px 0; }     .jp-card-logo.jp-card-dankort .d:before {       content: \'\';       position: absolute;       top: 50%;       left: 50%;       display: block;       background: #ED1C24;       border-radius: 2px 4px 6px 0px;       height: 5px;       width: 7px;       margin: -3px 0 0 -4px; }   .jp-card-logo.jp-card-dankort .k {     right: 0; }     .jp-card-logo.jp-card-dankort .k:before, .jp-card-logo.jp-card-dankort .k:after {       content: \'\';       position: absolute;       right: 50%;       width: 0;       height: 0;       border-style: solid;       margin-right: -1px; }     .jp-card-logo.jp-card-dankort .k:before {       top: 0;       border-width: 8px 5px 0 0;       border-color: #ED1C24 transparent transparent transparent; }     .jp-card-logo.jp-card-dankort .k:after {       bottom: 0;       border-width: 0 5px 8px 0;       border-color: transparent transparent #ED1C24 transparent; }  .jp-card.jp-card-dankort.jp-card-identified .jp-card-front:before, .jp-card.jp-card-dankort.jp-card-identified .jp-card-back:before {   background-color: #0055C7; }  .jp-card.jp-card-dankort.jp-card-identified .jp-card-logo.jp-card-dankort {   opacity: 1; }  .jp-card-container {   -webkit-perspective: 1000px;   -moz-perspective: 1000px;   perspective: 1000px;   width: 350px;   max-width: 100%;   height: 200px;   margin: auto;   z-index: 1;   position: relative; }  .jp-card {   font-family: "Helvetica Neue";   line-height: 1;   position: relative;   width: 100%;   height: 100%;   min-width: 315px;   border-radius: 10px;   -webkit-transform-style: preserve-3d;   -moz-transform-style: preserve-3d;   -ms-transform-style: preserve-3d;   -o-transform-style: preserve-3d;   transform-style: preserve-3d;   -webkit-transition: all 400ms linear;   -moz-transition: all 400ms linear;   transition: all 400ms linear; }   .jp-card > *, .jp-card > *:before, .jp-card > *:after {     -moz-box-sizing: border-box;     -webkit-box-sizing: border-box;     box-sizing: border-box;     font-family: inherit; }   .jp-card.jp-card-flipped {     -webkit-transform: rotateY(180deg);     -moz-transform: rotateY(180deg);     -ms-transform: rotateY(180deg);     -o-transform: rotateY(180deg);     transform: rotateY(180deg); }   .jp-card .jp-card-front, .jp-card .jp-card-back {     -webkit-backface-visibility: hidden;     backface-visibility: hidden;     -webkit-transform-style: preserve-3d;     -moz-transform-style: preserve-3d;     -ms-transform-style: preserve-3d;     -o-transform-style: preserve-3d;     transform-style: preserve-3d;     -webkit-transition: all 400ms linear;     -moz-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; }     .jp-card .jp-card-front:before, .jp-card .jp-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;       -moz-transition: all 400ms ease;       transition: all 400ms ease; }     .jp-card .jp-card-front:after, .jp-card .jp-card-back:after {       content: " ";       display: block; }     .jp-card .jp-card-front .jp-card-display, .jp-card .jp-card-back .jp-card-display {       color: white;       font-weight: normal;       opacity: 0.5;       -webkit-transition: opacity 400ms linear;       -moz-transition: opacity 400ms linear;       transition: opacity 400ms linear; }       .jp-card .jp-card-front .jp-card-display.jp-card-focused, .jp-card .jp-card-back .jp-card-display.jp-card-focused {         opacity: 1;         font-weight: 700; }     .jp-card .jp-card-front .jp-card-cvc, .jp-card .jp-card-back .jp-card-cvc {       font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;       font-size: 14px; }     .jp-card .jp-card-front .jp-card-shiny, .jp-card .jp-card-back .jp-card-shiny {       width: 50px;       height: 35px;       border-radius: 5px;       background: #CCC;       position: relative; }       .jp-card .jp-card-front .jp-card-shiny:before, .jp-card .jp-card-back .jp-card-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%; }   .jp-card .jp-card-front .jp-card-logo {     position: absolute;     opacity: 0;     right: 5%;     top: 8%;     -webkit-transition: 400ms;     -moz-transition: 400ms;     transition: 400ms; }   .jp-card .jp-card-front .jp-card-lower {     width: 80%;     position: absolute;     left: 10%;     bottom: 30px; }     @media only screen and (max-width: 480px) {       .jp-card .jp-card-front .jp-card-lower {         width: 90%;         left: 5%; } }     .jp-card .jp-card-front .jp-card-lower .jp-card-cvc {       visibility: hidden;       float: right;       position: relative;       bottom: 5px; }     .jp-card .jp-card-front .jp-card-lower .jp-card-number {       font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;       font-size: 24px;       clear: both;       margin-bottom: 30px; }     .jp-card .jp-card-front .jp-card-lower .jp-card-expiry {       font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;       letter-spacing: 0em;       position: relative;       float: right;       width: 25%; }       .jp-card .jp-card-front .jp-card-lower .jp-card-expiry:before, .jp-card .jp-card-front .jp-card-lower .jp-card-expiry:after {         font-family: "Helvetica Neue";         font-weight: bold;         font-size: 7px;         white-space: pre;         display: block;         opacity: .5; }       .jp-card .jp-card-front .jp-card-lower .jp-card-expiry:before {         content: attr(data-before);         margin-bottom: 2px;         font-size: 7px;         text-transform: uppercase; }       .jp-card .jp-card-front .jp-card-lower .jp-card-expiry:after {         position: absolute;         content: attr(data-after);         text-align: right;         right: 100%;         margin-right: 5px;         margin-top: 2px;         bottom: 0; }     .jp-card .jp-card-front .jp-card-lower .jp-card-name {       text-transform: uppercase;       font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;       font-size: 20px;       max-height: 45px;       position: absolute;       bottom: 0;       width: 190px;       display: -webkit-box;       -webkit-line-clamp: 2;       -webkit-box-orient: horizontal;       overflow: hidden;       text-overflow: ellipsis; }   .jp-card .jp-card-back {     -webkit-transform: rotateY(180deg);     -moz-transform: rotateY(180deg);     -ms-transform: rotateY(180deg);     -o-transform: rotateY(180deg);     transform: rotateY(180deg); }     .jp-card .jp-card-back .jp-card-bar {       background-color: #444;       background-image: -webkit-linear-gradient(#444, #333);       background-image: linear-gradient(#444, #333, , , , , , , , );       width: 100%;       height: 20%;       position: absolute;       top: 10%; }     .jp-card .jp-card-back:after {       content: " ";       display: block;       background-color: #FFF;       background-image: -webkit-linear-gradient(#FFF, #FFF);       background-image: linear-gradient(#FFF, #FFF, , , , , , , , );       width: 80%;       height: 16%;       position: absolute;       top: 40%;       left: 2%; }     .jp-card .jp-card-back .jp-card-cvc {       position: absolute;       top: 40%;       left: 85%;       -webkit-transition-delay: 600ms;       -moz-transition-delay: 600ms;       transition-delay: 600ms; }     .jp-card .jp-card-back .jp-card-shiny {       position: absolute;       top: 66%;       left: 2%; }       .jp-card .jp-card-back .jp-card-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; }   .jp-card.jp-card-identified {     box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); }     .jp-card.jp-card-identified .jp-card-front, .jp-card.jp-card-identified .jp-card-back {       background-color: #000;       background-color: rgba(0, 0, 0, 0.5); }       .jp-card.jp-card-identified .jp-card-front:before, .jp-card.jp-card-identified .jp-card-back:before {         -webkit-transition: all 400ms ease;         -moz-transition: all 400ms ease;         transition: all 400ms ease;         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: 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; }       .jp-card.jp-card-identified .jp-card-front .jp-card-logo, .jp-card.jp-card-identified .jp-card-back .jp-card-logo {         box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); }     .jp-card.jp-card-identified.no-radial-gradient .jp-card-front:before, .jp-card.jp-card-identified.no-radial-gradient .jp-card-back:before {       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: 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%); } ');;
  }, {
    "sassify": 5
  }]
}, {}, [7]);

new Card({
  form: document.querySelector('form'),
  container: '.card-wrapper'
});
              
            
!
999px

Console