/*
.card-wrapper{width:200px;}
.card-wrapper .card-box{width:610px;height:270px;position:relative}
.card-wrapper .card-box .card-front{width:362px;height:235px;position:absolute;top:0;left:0;z-index:1000}
.card-wrapper .card-box .card-front .image-holder{width:362px;height:235px;background-image:url(../image/cardbackfront.png);background-repeat:no-repeat;background-position:0 0}
.card-wrapper .card-box .card-front.imontop .image-holder{background-image:url(../image/cardbackfront.png);background-position:0px 0px}
.card-wrapper .card-box .card-front.imontop .inputs input{height:30px;min-width:10px;border:0;margin-right:5px;font-size:20px;color:#4b4b4b;text-align:center;display:inline-block}
.card-wrapper .card-box .card-front.imontop .inputs input.card-grey-input{border:1px solid #a8a7a7;}
.card-wrapper .card-box .card-front.imontop .inputs input.size-card-number-length{width:77px}
.card-wrapper .card-box .card-front.imontop .inputs input.size-date-length{width:34px;margin-right:35px}
.card-wrapper .card-box .card-front.imontop .inputs input.size-date-length:nth-child(2){margin-right:0}
.card-wrapper .card-box .card-front.imontop .inputs input.size-name-length{width:200px;padding-left:5px;text-align:left}
.card-wrapper .card-box .card-front.imontop .inputs input:focus{outline:0;background-color:#fff}
.card-wrapper .card-box .card-front .inputs{width:362px;height:235px;position:absolute;top:0;left:0;text-align:left}
.card-wrapper .card-box .card-front .inputs input{height:30px;min-width:10px;border:0;margin-right:5px;font-size:20px;color:#4b4b4b;text-align:center;display:inline-block}
.card-wrapper .card-box .card-front .inputs input.card-grey-input{border:1px solid #bebebe;background-color:#e5e5e5}
.card-wrapper .card-box .card-front .inputs input.size-card-number-length{width:77px}
.card-wrapper .card-box .card-front .inputs input.size-date-length{width:34px;margin-right:35px}
.card-wrapper .card-box .card-front .inputs input.size-date-length:nth-child(2){margin-right:0}
.card-wrapper .card-box .card-front .inputs input.size-name-length{width:200px;padding-left:5px;text-align:left}
.card-wrapper .card-box .card-front .inputs input:focus{outline:0;background-color:#fff}
.card-wrapper .card-box .card-front .inputs .cardnumber-area{width:348px;padding-left:12px;position:absolute;top:72px;left:0}
.card-wrapper .card-box .card-front .inputs .card-date-area{width:150px;height:30px;position:absolute;top:113px;left:220px}
.card-wrapper .card-box .card-front .inputs .card-name-area{width:220px;height:30px;position:absolute;top:176px;left:14px}
.card-wrapper .card-box .card-front.visa .kind{width:362px;height:235px;position:absolute;top:0;left:0;background-image:url(../image/card-top-visa.png);background-repeat:no-repeat;background-position:0 0}
.card-wrapper .card-box .card-front.mastercard .kind{width:362px;height:235px;position:absolute;top:0;left:0;background-image:url(../image/card-top-mastercard.png);background-repeat:no-repeat;background-position:0 0}
.card-wrapper .card-box .card-front.imontop{z-index:1001}
.card-wrapper .card-box .card-back{width:362px;height:235px;position:absolute;top:0px;left:0px;z-index:1000}
.card-wrapper .card-box .card-back .image-holder{width:362px;height:235px;background-image:url(../image/cardbackfront.png);background-position:-10px -100px;background-repeat:no-repeat;background-position:0 0}
.card-wrapper .card-box .card-back.imontop .image-holder{background-image:url(../image/cardbackfront.png)l;background-position:0px -236px}
.card-wrapper .card-box .card-back.imontop .inputs input.card-grey-input{border:1px solid #aaa;background-color:#f9f9f9;height:28px;color:#383838}
.card-wrapper .card-box .card-back.imontop .inputs input.size-card-number-back-length{width:40px;font-size:15px;font-weight:bold}
.card-wrapper .card-box .card-back.imontop .inputs input:focus{outline:0;background-color:#fff;color:#383838}
.card-wrapper .card-box .card-back .inputs{width:362px;height:235px;position:absolute;top:0;left:0;text-align:left}
.card-wrapper .card-box .card-back .inputs input{height:30px;min-width:10px;border:0;margin-right:5px;font-size:20px;color:#badbf4;text-align:center;display:inline-block}
.card-wrapper .card-box .card-back .inputs input.card-grey-input{border:1px solid #cacaca;background-color:#ebebeb;height:28px;color:#383838}
.card-wrapper .card-box .card-back .inputs input.size-card-number-back-length{width:40px;font-size:15px;font-weight:bold}
.card-wrapper .card-box .card-back .inputs input:focus{outline:0;background-color:#fff;color:#383838}
.card-wrapper .card-box .card-back .inputs .card-back-input-area{position:absolute;height:30px;width:100px;top:119px;left:200px}
.card-wrapper .card-box .card-back.imontop{z-index:1001}
*/

.card-wrapper-new{
    position:relative;
    max-width: 362px;
}
.card-wrapper-new .card-box-new{
    width:100%;
    height:220px;
    position:relative;
    background-size: 100% 200%;
    background-repeat:no-repeat;
    background-position:0px 0px;
    transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -webkit-transition: all 200ms linear;
    background-image:url(../image/cardbackfront.png);
}

.card-wrapper-new .card-box-new .card-front-new {
	padding: 0 10px;
}

.card-wrapper-new .card-box-new .card-front {
	padding: 0 10px;
}

.card-wrapper-new .card-box-new .inputs-new{
    width:100%;
    height:220px;
    position:relative
}
.card-wrapper-new .card-box-new .inputs-new .card-number-area-new{
    top:120px;
    width:100%;
    position:absolute;
}

.card-wrapper-new .card-box-new .inputs-new .card-number-area-new .cardnumber{
    left:0;
    width:100%;
    font-size: 25px;
    font-weight: bold;
    color: rgb(192, 192, 192);
}

.card-wrapper-new .card-box-new .inputs-new .card-date-area-new{
    right: 90px;
    width: 120px;
    bottom: 35px;
    text-align: right;
    position: absolute;
}

.card-wrapper-new .card-box-new .inputs-new .card-date-area-new .carddate{
    left:0;
    width:25px;
    font-weight: bold;
    color: rgb(192, 192, 192);
}
.card-wrapper-new .card-box-new .inputs-new .card-ccv-area-new{
    top: 100px;
    width: 50px;
    right: 20px;
    position: absolute;
}

.card-wrapper-new .card-box-new .inputs-new .card-ccv-area-new .cardccv{
    width:50px;
    left:0;
}

.card-wrapper-new .card-box-new .inputs-new input{
    height:30px;
    min-width:10px;
    border:0;
    margin-right:5px;
    font-size:20px;
    color:#000000;
    text-align:center;
    display:inline-block;
    background-color: transparent;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;

    /*
      Introduced in IE 10.
      See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;
}

.card-wrapper-new .card-box-new .card-front.visa-new .kind {
  	top: -15px;
    left: 40px;
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url(../image/card-top-visa.png);
}
.card-wrapper .card-box .card-front.mastercard .kind {
    top: -15px;
    left: 40px;
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image:url(../image/card-top-mastercard.png);
}

.borderless {
	border: 0px! important;
}