@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');

html {
    font-size: 16px;
}
unkown {
    background-image: url(../images/cards.png);
    background-position: 0 -291px;
     background-repeat: no-repeat;
    position: absolute;
    background: #fff;
}

.card-type {
    width: 80px;
    height: 56px;
    /*background: url(images/cards.png);*/
    background-image: url(../images/cards.png);
    background-position: 0 -291px;
    background-repeat: no-repeat;
    position: absolute;
    top: 3px;
    left: 4px;
}

.card-valid {
    position: absolute;
    top: 0;
    right: 15px;
    line-height: 60px;
    font-size: 40px;
    font-family: 'icons';
    color: #ccc;
}

#logo {
    width: 45px;
    height: 30px;
    position: absolute;
    right: 20px;
    bottom: 6px;
    border-radius: 5px;
}
.form-control:focus {
    box-shadow: none;
}
input#card {
    padding-right: 48px;
    padding-left: 5px;
    font-size: 14px;
    border: 2px solid rgba(0, 0, 0, 0.12);
}
#divCardId + #logo {
    width: 49px;
    height: 29px;
    position: absolute;
    top: 44px;
    left: 187px;
}
.card-info-1 #logo {
    width: 38px;
    height: 24px;
    position: absolute;
    bottom: 6px;
    left: 8px;
    /* top: 30px; */
    background-repeat: round !important;
    z-index: 999;
}
.card-info-1 input#card {
    /*padding-right: 5px;*/
    padding-left: 53px;
    font-size: 13px;
    border: 0;
    font-weight:300;
}
    .img-wrap #logo1 {
    width: 100%;
    bottom: 40px;
    position: absolute;
}

.DCcard-img .mastercard {
    height: 28px !important;
}
.DCcard-img .diners {
    height: 14px !important;
}

.DCcard-img .amex {
    height: 28px !important;
}

.Diners img{
    bottom: -28px
}


.Jcb img {
    bottom: -26px;
}
.card-type {
    width: 80px;
    height: 56px;
    background-position: 0 -291px;
    background-repeat: no-repeat;
    position: absolute;
    top: 3px;
    left: 4px;
}

.card-valid {
    position: absolute;
    top: 0;
    right: 15px;
    line-height: 60px;
    font-size: 40px;
    font-family: 'icons';
    color: #ccc;
}

/*.visa {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 0 no-repeat;
}

.mastercard {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -30px no-repeat;
}

.amex {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -60px no-repeat;
}

.diners {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -90px no-repeat;
}

.discover {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -120px no-repeat;
}

.shopping {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -150px no-repeat;
}

.naranja {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -180px no-repeat;
}

.qida {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -210px no-repeat;
}

.clubdia {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -240px no-repeat;
}

.musicred {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -270px no-repeat;
}

.nevada {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -300px no-repeat;
}

.tuya {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -330px no-repeat;
}

.laanonima {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -360px no-repeat;
}

.crediguia {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -390px no-repeat;
}

.patagonia {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -410px no-repeat;
}

.sol {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -440px no-repeat;
}

.cabal {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -470px no-repeat;
}

.cencosud {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -500px no-repeat;
}

.credimas {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -530px no-repeat;
}

.carrefour {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -560px no-repeat;
}

.grupar {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -590px no-repeat;
}

.wishgift {
    background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -610px no-repeat;
}*/

/*.unknown {*/
/* background: url("https://jscardvalidator-mpccmwdwqf.now.sh/cards_sprite_compressed_30.jpg") 0 -640px no-repeat;*/
/* background: url("https://www.cssscript.com/demo/minimal-credit-card-input-validation-library-creditcardvalidator-js/images/cards.png") 0 -640px no-repeat;*/
/*}*/




@media only screen and (max-width: 767px) {
    .card-info-1 input#card {
        padding-left: 53px;
    }
}