.digitalccwrapper {
height: 200px;
width: 400px;
-webkit-perspective: 300px;
perspective: 300px;
}

.card, .cards .face, .cards .back {
background: -webkit-gradient(linear, left top, left bottom, from(#8c8c8c), to(#737373));
background: linear-gradient(#1F2468, #7E2DC8);
/*#8c8c8c, #737373);  -darkblue - 153E62*, lite blue - 0071CB, red - E2245A  */
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
border-radius: 1rem;
cursor: pointer;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
height: 200px;
width: 340px;
}

.cards .face .head {
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
margin: 16px 16px 0 16px;
}
.cards .face .head .title {
font-weight: 600;
font-size: 20px;
}
.cards .face .main {
margin: 16px 16px 0 16px;
}
.cards .face .main .number-title {
color: #cccccc;
}
.cards .face .main .number {
font-size: 24px;
}
.cards .face .dates {
display: -webkit-box;
display: flex;
max-width: 100px;
-webkit-box-pack: justify;
justify-content: space-between;
margin: 16px 16px 16px 16px;
}
.cards .back {
-webkit-animation: demo 3s ease-in-out;
animation: demo 3s ease-in-out;
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
background: -webkit-gradient(linear, left top, left bottom, from(#828282), to(dimgray));
/* card back colors */
background: linear-gradient(#155993, #153E62);
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.cards .back .magnetic-line {
background: #000;
margin-top: 16px;
height: 32px;
width: 100%;
}
.cards .back .cvv {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
margin: 0 16px 66.6666666667px 0;
text-align: end;
padding-right: 8px;
width: 235.6666666667px;
height: 24px;
}

.cards:hover .back {
-webkit-transform: translateX(170px) translateY(-50px);
transform: translateX(170px) translateY(-50px);
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
}

@-webkit-keyframes demo {
0% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
50% {
-webkit-transform: translateX(170px) translateY(-50px);
transform: translateX(170px) translateY(-50px);
}
75% {
-webkit-transform: translateX(170px) translateY(-50px);
transform: translateX(170px) translateY(-50px);
}
100% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
}

@keyframes demo {
0% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
50% {
-webkit-transform: translateX(170px) translateY(-50px);
transform: translateX(170px) translateY(-50px);
}
75% {
-webkit-transform: translateX(170px) translateY(-50px);
transform: translateX(170px) translateY(-50px);
}
100% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
}