.card-custom {
    width: 430px;
    height: 270px;
    cursor: pointer;
}
@media only screen and (max-width: 991px) {
    .card-custom {
        width: 430px;
        height: 270px;
    }
    .card-custom-area{
        padding-bottom: 30px;
    }
}
@media only screen and (max-width: 576px) {
    .dashboard-area .title {
        font-weight: 600;
        font-size: 25px;
        padding-bottom: 10px;
    }
    .card-custom {
        width: 430px;
        height: 270px;
    }
}
@media only screen and (max-width: 500px) {
    .card-custom {
        width: 345px;
        height: 270px;
    }
}
@media only screen and (max-width: 400px) {
    .card-custom {
        width: 294px;
        height: 242px;
    }
}
@media only screen and (max-width: 350px) {
    .card-custom {
        width: 260px;
        height: 232px;
    }
}
.virtual-card-btn-area{
    margin: -5px;
}
.virtual-card-btn-area a{
    margin: 5px;
}
.card-header-btn-wrapper .small--btn{
    margin: 0;
    padding: 3px 10px;
    color: #fff;
    background-color: #000000;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
}
.flip {
width: inherit;
height: inherit;
transition: 0.7s;
transform-style: preserve-3d;
}
.front,
.back {
position: absolute;
width: inherit;
height: inherit;
border-radius: 15px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
backface-visibility: hidden;
background-image: linear-gradient(to right, #111, #555);
overflow: hidden;
}
.front {
transform: translateZ(0);
}
.strip-bottom,
.strip-top {
position: absolute;
right: 0;
height: inherit;
background-image: linear-gradient(to bottom, #d4981d, #2b586d);
box-shadow: 0 0 10px 0px rgba(0,0,0,0.5);
}
.strip-bottom {
width: 200px;
transform: skewX(-15deg) translateX(50px);
}
.strip-top {
width: 180px;
transform: skewX(20deg) translateX(50px);
}
.logo {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 70px;
    height: auto;
}
.logo.google{
    top: 25px;
    right: 30px;
    width: 50px;
}
.investor {
position: relative;
top: 30px;
left: 25px;
font-size: 16px;
font-weight: 700;
}
.chip {
position: relative;
top: 60px;
left: 25px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 40px;
border-radius: 5px;
background: #fff;
overflow: hidden;
}
.chip .chip-line {
position: absolute;
width: 100%;
height: 1px;
background-color: #000;
}
.chip .chip-line:nth-child(1) {
top: 13px;
}
.chip .chip-line:nth-child(2) {
top: 20px;
}
.chip .chip-line:nth-child(3) {
top: 28px;
}
.chip .chip-line:nth-child(4) {
left: 25px;
width: 1px;
height: 50px;
}
.chip .chip-main {
width: 20px;
height: 25px;
border: 1px solid #000;
border-radius: 3px;
background: #fff;
z-index: 1;
}
.wave {
position: relative;
top: 20px;
left: 100px;
}
.card-number {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin: 40px 25px 10px;
font-size: 24px;
font-weight: 600;
font-family: 'cc font', monospace;
color: #ffffffc7;
}
.end {
margin-left: 25px;
text-transform: uppercase;
font-family: 'cc font', monospace;
}
.end .end-text {
font-size: 9px;
color: rgba(255,255,255,0.8);
}
.card-holder {
margin: 10px 25px;
text-transform: uppercase;
font-family: 'cc font', monospace;
}
.master {
position: absolute;
right: 20px;
bottom: 20px;
display: flex;
}
.master .circle {
width: 25px;
height: 25px;
border-radius: 50%;
}
.master .master-red {
background-color: #eb001b;
}
.master .master-yellow {
margin-left: -10px;
background-color: rgba(255,209,0,0.7);
}
.card-custom {
perspective: 1000;
}
.card-custom.active .flip {
transform: rotateY(180deg);
}
.back {
transform: rotateY(180deg) translateZ(0);
background: #9e9e9e;
}
.back .strip-black {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: 50px;
background: #000;
}
.back .ccv {
position: absolute;
top: 110px;
left: 0;
right: 0;
height: 36px;
width: 90%;
padding: 10px;
margin: 0 auto;
border-radius: 5px;
text-align: right;
letter-spacing: 1px;
color: #000;
background: #fff;
}
.back .ccv label {
display: block;
margin: -40px 0 15px;
font-size: 10px;
text-transform: uppercase;
color: #fff;
}
.back .terms {
position: absolute;
top: 150px;
padding: 20px;
font-size: 10px;
text-align: justify;
}
@-moz-keyframes flip {
0%, 100% {
    transform: rotateY(0deg);
}
50% {
    transform: rotateY(180deg);
}
}
@-webkit-keyframes flip {
0%, 100% {
    transform: rotateY(0deg);
}
50% {
    transform: rotateY(180deg);
}
}
@-o-keyframes flip {
0%, 100% {
    transform: rotateY(0deg);
}
50% {
    transform: rotateY(180deg);
}
}
@keyframes flip {
0%, 100% {
    transform: rotateY(0deg);
}
50% {
    transform: rotateY(180deg);
}
}