/* CHANGEABLE CARD ELEMENTS */
.creditcard .lightcolor,
.creditcard .darkcolor {
    -webkit-transition: background .5s;
    transition: background .5s;
}

.creditcard .lightblue {
    background: #03A9F4;
}

.creditcard .lightbluedark {
    background: #0288D1;
}

.creditcard .red {
    background: #ef5350;
}

.creditcard .reddark {
    background: #d32f2f;
}

.creditcard .purple {
    background: #ab47bc;
}

.creditcard .purpledark {
    background: #7b1fa2;
}

.creditcard .cyan {
    background: #26c6da;
}

.creditcard .cyandark {
    background: #0097a7;
}

.creditcard .green {
    background: #66bb6a;
}

.creditcard .greendark {
    background: #388e3c;
}

.creditcard .lime {
    background: #d4e157;
}

.creditcard .limedark {
    background: #afb42b;
}

.creditcard .yellow {
    background: #ffeb3b;
}

.creditcard .yellowdark {
    background: #f9a825;
}

.creditcard .orange {
    background: #ff9800;
}

.creditcard .orangedark {
    background: #ef6c00;
}

.creditcard .grey {
    background: #bdbdbd;
}

.creditcard .greydark {
    background: #616161;
}

.creditcard .defaultcolor {
	background: #015292;
}

.st12 {
    fill: #4C4C4C;
}
.cardimg {
  position: absolute;
  right: 30px;
  top: 15px;
}

.cardimg img {
  border-radius: 10px;
}

.spanbgcolor {
	position: absolute;
    width: 100%;
    height: 25%;
    background: black;
    top: 30px;
}

.card-img-container {
	position: absolute;
    right: 20px;
    top: 20px;
}

.cvvtext {
	position: absolute;
    right: 70px;
    font-family: monospace;
    bottom: 40px;
    left: 20px;
    font-size: 12px;
    letter-spacing: 1px;
}

.card-img-container img {
	border-radius: 10px;
}
  
.card-expiry-container {
	position: absolute;
    right: 40px;
    bottom: 20px;
}

.card-expiry-month {
	display: inline-block;
}

.card-expiry-month::after {
	content: "/";
	vertical-align: text-top;
}

.card-expiry-year {
	display: inline-block;
}

.visa-bg-color {
	background: #105ea0;
}

.cvv-container {
	position: absolute;
    top: 92px;
    display: flex;
    width: 80%;
    background: #F2F2F2;
}

.creditcard {
    width: 400px;
    height: 200px;
    
    border-radius: 20px;
    box-shadow: 0px 0px 2px 0px #f4f4f4;
    margin: 20px 25%;
}

.text {
    display: block;
    font-size: 18px;
    text-transform: capitalize;
    font-family: sans-serif;
    color: #cb9c9c;
}

label {
    padding-bottom: 5px;
    font-size: 13px;
}

input {
    margin-top: 3px;
    padding: 15px;
    font-size: 16px;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
}

select {
    margin-top: 3px;
    padding: 15px;
    font-size: 16px;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
}

.form-container .field-container:first-of-type {
    grid-area: name;
}

.form-container .field-container:nth-of-type(2) {
    grid-area: number;
}

.form-container .field-container:nth-of-type(3) {
    grid-area: expiration;
}

.form-container .field-container:nth-of-type(4) {
    grid-area: security;
}

.field-container input {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.field-container {
    position: relative;
}

/* .form-container-card {
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: auto auto;
    grid-template-rows: 90px 90px 90px;
    grid-template-areas: "name name""number number""expiration security";
    max-width: 400px;
    padding: 20px;
    color: #707070;
} */

#ccsingle {
    position: absolute;
    right: 15px;
    top: 20px;
}

/* FLIP ANIMATION */
.creditcard-container {
    perspective: 1000px;
}

.creditcard {
    width: 100%;
    max-width: 350px;
    -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;
   
    position: relative;
}

.creditcard .front-card,
.creditcard .back-card {
    position: absolute;
    width: 100%;
    max-width: 400px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    color: white;
    height: 100%;
    
    border-radius: 20px;
}

.card-number-container {
	position: absolute;
    top: 80px;
    left: 20px;
    font-family: monospace;
}

.card-number-text {
	letter-spacing: 1px;
}

.creditcard .front-card #card-number {
	letter-spacing: 2px;
    font-size: calc(10px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    color: white;
}

.creditcard .back-card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.creditcard.flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

@media screen and (max-width:600px) {
	.creditcard {
		margin: 15px 0px 20px;
	}
}

@media screen and (max-width:800px) {
	.creditcard {
		margin: 15px 0px 20px;
	}
}