/* CREDIT CARD IMAGE STYLING */
    .preload * {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -ms-transition: none !important;
        -o-transition: none !important;
    }
    
    .anet-creditcard-effect-container {
        display: block !important;
        height: 200px;
    padding: 6px;
    }
    
    #ccsingle {
        position: absolute;
        right: 15px;
        top: 20px;
    }
    
    #ccsingle svg {
        width: 100px;
        max-height: 60px;
    }
    
    .anet-creditcard-effect svg#cardfront,
    .anet-creditcard-effect svg#cardback {
        width: 100%;
        -webkit-box-shadow: 1px 5px 6px 0px black;
        box-shadow: 1px 5px 6px 0px black;
        border-radius: 22px;
    }
    
    #generatecard{
        cursor: pointer;
        float: right;
        font-size: 12px;
        color: #fff;
        padding: 2px 4px;
        background-color: #909090;
        border-radius: 4px;
        cursor: pointer;
        float:right;
    }
    
    /* CHANGEABLE CARD ELEMENTS */
    .anet-creditcard-effect .lightcolor,
    .anet-creditcard-effect .darkcolor {
        -webkit-transition: fill .5s;
        transition: fill .5s;
    }
    
    .anet-creditcard-effect .lightblue {
        fill: #03A9F4;
    }
    
    .anet-creditcard-effect .lightbluedark {
        fill: #0288D1;
    }
    
    .anet-creditcard-effect .red {
        fill: #ef5350;
    }
    
    .anet-creditcard-effect .reddark {
        fill: #d32f2f;
    }
    
    .anet-creditcard-effect .purple {
        fill: #ab47bc;
    }
    
    .anet-creditcard-effect .purpledark {
        fill: #7b1fa2;
    }
    
    .anet-creditcard-effect .cyan {
        fill: #26c6da;
    }
    
    .anet-creditcard-effect .cyandark {
        fill: #0097a7;
    }
    
    .anet-creditcard-effect .green {
        fill: #66bb6a;
    }
    
    .anet-creditcard-effect .greendark {
        fill: #388e3c;
    }
    
    .anet-creditcard-effect .lime {
        fill: #d4e157;
    }
    
    .anet-creditcard-effect .limedark {
        fill: #afb42b;
    }
    
    .anet-creditcard-effect .yellow {
        fill: #ffeb3b;
    }
    
    .anet-creditcard-effect .yellowdark {
        fill: #f9a825;
    }
    
    .anet-creditcard-effect .orange {
        fill: #ff9800;
    }
    
    .anet-creditcard-effect .orangedark {
        fill: #ef6c00;
    }
    
    .anet-creditcard-effect .grey {
        fill: #bdbdbd;
    }
    
    .anet-creditcard-effect .greydark {
        fill: #616161;
    }
    
    /* FRONT OF CARD */
    #svgname {
        text-transform: uppercase;
    }
    
    #cardfront .st2 {
        fill: #FFFFFF;
    }
    
    #cardfront .st3 {
        font-family: 'Source Code Pro', monospace;
        font-weight: 600;
    }
    
    #cardfront .st4 {
        font-size: 54.7817px;
    }
    
    #cardfront .st5 {
        font-family: 'Source Code Pro', monospace;
        font-weight: 400;
    }
    
    #cardfront .st6 {
        font-size: 33.1112px;
    }
    
    #cardfront .st7 {
        opacity: 0.6;
        fill: #FFFFFF;
    }
    
    #cardfront .st8 {
        font-size: 24px;
    }
    
    #cardfront .st9 {
        font-size: 36.5498px;
    }
    
    #cardfront .st10 {
        font-family: 'Source Code Pro', monospace;
        font-weight: 300;
    }
    
    #cardfront .st11 {
        font-size: 16.1716px;
    }
    
    #cardfront .st12 {
        fill: #4C4C4C;
    }
    
    /* BACK OF CARD */
    #cardback .st0 {
        fill: none;
        stroke: #0F0F0F;
        stroke-miterlimit: 10;
    }
    
    #cardback .st2 {
        fill: #111111;
    }
    
    #cardback .st3 {
        fill: #F2F2F2;
    }
    
    #cardback .st4 {
        fill: #D8D2DB;
    }
    
    #cardback .st5 {
        fill: #C4C4C4;
    }
    
    #cardback .st6 {
        font-family: 'Source Code Pro', monospace;
        font-weight: 400;
    }
    
    #cardback .st7 {
        font-size: 27px;
    }
    
    #cardback .st8 {
        opacity: 0.6;
    }
    
    #cardback .st9 {
        fill: #FFFFFF;
    }
    
    #cardback .st10 {
        font-size: 24px;
    }
    
    #cardback .st11 {
        fill: #EAEAEA;
    }
    
    #cardback .st12 {
        font-family: 'Rock Salt', cursive;
    }
    
    #cardback .st13 {
        font-size: 37.769px;
    }
    
    
    .container {
        perspective: 1000px;
    }
    
    .anet-creditcard-effect {
        width: 100%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        transition: -webkit-transform 0.6s;
        -webkit-transition: -webkit-transform 0.6s;
        transition: transform 0.6s;
        transition: transform 0.6s, -webkit-transform 0.6s;
        cursor: pointer;
    }
    
    .anet-creditcard-effect .front,
    .anet-creditcard-effect .back {
        position: absolute;
        width: 100%;
        max-width: 300px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
        color: #47525d;
    }
    
    .anet-creditcard-effect .back {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    
    .anet-creditcard-effect.flipped {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }