.page_card{

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.cardb{
    overflow: visible;
    margin:20px 60px;
}
.card-text{

    display: flex;
    flex-direction: column;
    color: #fff;
    font-weight: 600;
}
.card-p{
    margin-top: 7%;
    margin-bottom: 7%;
}
.card-p-1{
    margin-top: 7%;
    font-size: 17px;
    /* font-family: 'Ubuntu', sans-serif; */
    margin-bottom: 7%;
}
.card{
    display: grid;
    grid-template-columns: 200px ;
    grid-template-rows: 280px ;
    grid-template-areas: "img"  ;
    position: relative;
    overflow: hidden;
    overflow: hidden;
    z-index: 2;
    touch-action: none;
    border-radius: 5%/3.5%;
    box-shadow: -5px -5px 5px -5px var(--color1), 5px 5px 5px -5px var(--color2), -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s ease, box-shadow 0.2s ease;
    will-change: transform, filter;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transform-origin: center;
}

.card-1{
    display: grid;
    width: 228px;
    grid-template-columns: 230px ;
    grid-template-rows: 230px ;
    grid-template-areas: "img"  ;



    position: relative;
    overflow: hidden;

    overflow: hidden;
    z-index: 2;
    touch-action: none;
    border-radius: 5%/3.5%;
    box-shadow: -5px -5px 5px -5px var(--color1), 5px 5px 5px -5px var(--color2), -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s ease, box-shadow 0.2s ease;
    will-change: transform, filter;
    background-color: #040712;
    background-image: var(--front);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transform-origin: center;
}


.card:before,
.card:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-repeat: no-repeat;
    opacity: 0.5;
    mix-blend-mode: color-dodge;
    transition: all 0.33s ease;
}

.card:before {
    background-position: 50% 50%;
    background-size: 300% 300%;
    background-image: linear-gradient(115deg, transparent 0%, var(--color1) 25%, transparent 47%, transparent 53%, var(--color2) 75%, transparent 100%);
    opacity: 0.5;
    filter: brightness(0.5) contrast(1);
    z-index: 1;
}

.card:after {
    opacity: 1;
    background-image: url("https://assets.codepen.io/13471/sparkles.gif"), url(https://assets.codepen.io/13471/holo.png), linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
    background-position: 50% 50%;
    background-size: 160%;
    background-blend-mode: overlay;
    z-index: 2;
    filter: brightness(1) contrast(1);
    transition: all 0.33s ease;
    mix-blend-mode: color-dodge;
    opacity: 0.75;
}

.card.active:after,
.card:hover:after {
    filter: brightness(1) contrast(1);
    opacity: 1;
}

.card.active,
.card:hover {
    -webkit-animation: none;
    animation: none;
    transition: box-shadow 0.1s ease-out;
}

.card.active:before,
.card:hover:before {
    -webkit-animation: none;
    animation: none;
    background-image: linear-gradient(110deg, transparent 25%, var(--color1) 48%, var(--color2) 52%, transparent 75%);
    background-position: 50% 50%;
    background-size: 250% 250%;
    opacity: 0.88;
    filter: brightness(0.66) contrast(1.33);
    transition: none;
}

.card.active:before,
.card:hover:before,
.card.active:after,
.card:hover:after {
    -webkit-animation: none;
    animation: none;
    transition: none;
}

.card.animated {
    transition: none;
    -webkit-animation: holoCard 12s ease 0s 1;
    animation: holoCard 12s ease 0s 1;
}
.card.animated:before {
    transition: none;
    -webkit-animation: holoGradient 12s ease 0s 1;
    animation: holoGradient 12s ease 0s 1;
}
.card.animated:after {
    transition: none;
    -webkit-animation: holoSparkle 12s ease 0s 1;
    animation: holoSparkle 12s ease 0s 1;
}

.card-1:before,
.card-1:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-repeat: no-repeat;
    opacity: 0.5;
    mix-blend-mode: color-dodge;
    transition: all 0.33s ease;
}

.card-1:before {
    background-position: 50% 50%;
    background-size: 300% 300%;
    background-image: linear-gradient(115deg, transparent 0%, var(--color1) 25%, transparent 47%, transparent 53%, var(--color2) 75%, transparent 100%);
    opacity: 0.5;
    filter: brightness(0.5) contrast(1);
    z-index: 1;
}

.card-1:after {
    opacity: 1;
    background-image: url("https://assets.codepen.io/13471/sparkles.gif"), url(https://assets.codepen.io/13471/holo.png), linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
    background-position: 50% 50%;
    /* background-size: 160%; */
    background-blend-mode: overlay;
    z-index: 2;
    filter: brightness(1) contrast(1);
    transition: all 0.33s ease;
    mix-blend-mode: color-dodge;
    opacity: 0.75;
    transition: .4s;
}

.card-1.active:after,
.card-1:hover:after {
    filter: brightness(1) contrast(1);

    opacity: 1;

}
.card-1:hover:after {
    background-image: url(../../../resources/media/images/Frame_7_1.png);

    transition: .4s;

}
.card-1.active,
.card-1:hover {
    -webkit-animation: none;
    animation: none;

    transition: box-shadow 0.1s ease-out;

}

.card-1.active:before,
.card-1:hover:before {
    -webkit-animation: none;
    animation: none;
    background-image: linear-gradient(110deg, transparent 25%, var(--color1) 48%, var(--color2) 52%, transparent 75%);
    background-position: 50% 50%;
    background-size: 250% 250%;
    opacity: 0.88;
    filter: brightness(0.66) contrast(1.33);
    transition: none;
}

.card-1.active:before,
.card-1:hover:before,
.card-1.active:after,
.card-1:hover:after {
    -webkit-animation: none;
    animation: none;
    transition: none;
}

.card-1.animated {
    transition: none;
    -webkit-animation: holoCard 12s ease 0s 1;
    animation: holoCard 12s ease 0s 1;
}
.card-1.animated:before {
    transition: none;
    -webkit-animation: holoGradient 12s ease 0s 1;
    animation: holoGradient 12s ease 0s 1;
}
.card-1.animated:after {
    transition: none;
    -webkit-animation: holoSparkle 12s ease 0s 1;
    animation: holoSparkle 12s ease 0s 1;
}


@-webkit-keyframes holoSparkle {
    0%, 100% {
        opacity: 0.75;
        background-position: 50% 50%;
        filter: brightness(1.2) contrast(1.25);
    }
    5%, 8% {
        opacity: 1;
        background-position: 40% 40%;
        filter: brightness(0.8) contrast(1.2);
    }
    13%, 16% {
        opacity: 0.5;
        background-position: 50% 50%;
        filter: brightness(1.2) contrast(0.8);
    }
    35%, 38% {
        opacity: 1;
        background-position: 60% 60%;
        filter: brightness(1) contrast(1);
    }
    55% {
        opacity: 0.33;
        background-position: 45% 45%;
        filter: brightness(1.2) contrast(1.25);
    }
}

@keyframes holoSparkle {
    0%, 100% {
        opacity: 0.75;
        background-position: 50% 50%;
        filter: brightness(1.2) contrast(1.25);
    }
    5%, 8% {
        opacity: 1;
        background-position: 40% 40%;
        filter: brightness(0.8) contrast(1.2);
    }
    13%, 16% {
        opacity: 0.5;
        background-position: 50% 50%;
        filter: brightness(1.2) contrast(0.8);
    }
    35%, 38% {
        opacity: 1;
        background-position: 60% 60%;
        filter: brightness(1) contrast(1);
    }
    55% {
        opacity: 0.33;
        background-position: 45% 45%;
        filter: brightness(1.2) contrast(1.25);
    }
}
@-webkit-keyframes holoGradient {
    0%, 100% {
        opacity: 0.5;
        background-position: 50% 50%;
        filter: brightness(0.5) contrast(1);
    }
    5%, 9% {
        background-position: 100% 100%;
        opacity: 1;
        filter: brightness(0.75) contrast(1.25);
    }
    13%, 17% {
        background-position: 0% 0%;
        opacity: 0.88;
    }
    35%, 39% {
        background-position: 100% 100%;
        opacity: 1;
        filter: brightness(0.5) contrast(1);
    }
    55% {
        background-position: 0% 0%;
        opacity: 1;
        filter: brightness(0.75) contrast(1.25);
    }
}
@keyframes holoGradient {
    0%, 100% {
        opacity: 0.5;
        background-position: 50% 50%;
        filter: brightness(0.5) contrast(1);
    }
    5%, 9% {
        background-position: 100% 100%;
        opacity: 1;
        filter: brightness(0.75) contrast(1.25);
    }
    13%, 17% {
        background-position: 0% 0%;
        opacity: 0.88;
    }
    35%, 39% {
        background-position: 100% 100%;
        opacity: 1;
        filter: brightness(0.5) contrast(1);
    }
    55% {
        background-position: 0% 0%;
        opacity: 1;
        filter: brightness(0.75) contrast(1.25);
    }
}
@-webkit-keyframes holoCard {
    0%, 100% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }
    5%, 8% {
        transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
    }
    13%, 16% {
        transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
    }
    35%, 38% {
        transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
    }
    55% {
        transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
    }
}
@keyframes holoCard {
    0%, 100% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }
    5%, 8% {
        transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
    }
    13%, 16% {
        transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
    }
    35%, 38% {
        transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
    }
    55% {
        transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
    }
}

.card-img6-1{

    grid-area: img;
    background-size: cover;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.card-img7-1{

    grid-area: img;
    background-size: cover;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}