/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */



.chover:hover {
    box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);
    transform: translateY(-20px);
}

.chover:hover .card-img-top {
    opacity: 0.5;
}

.hover > tbody > tr:hover {
    background-color:rgba(115, 103, 240, 0.12); !important;
}

.card .card-img-overlay.holo-overlay {
    background: rgb(66 71 74 / 30%);
}


:root {
    --color1: #00e7ff;
    --color2: #ff00e7;
    --back: url(https://cdn2.bulbagarden.net/upload/1/17/Cardback.jpg);
    --charizard1: #fac;
    --charizard2: #dca;
    --charizardfront: url(https://assets.codepen.io/13471/charizard-gx.webp);
    --pika1: #54a29e;
    --pika2: #a79d66;
    --pikafront: url(https://assets.codepen.io/13471/pikachu-gx.webp);
    --eevee1: #efb2fb;
    --eevee2: #acc6f8;
    --eeveefront: url(https://assets.codepen.io/13471/eevee-gx.webp);
    --mewtwo1: #efb2fb;
    --mewtwo2: #acc6f8;
    --mewtwofront: url(https://assets.codepen.io/13471/mewtwo-gx.webp);
}


.holo {
    /*width: 71.5vw;*/
    /*height: 100vw;*/
    position: relative;
    overflow: hidden;
    margin: 20px;
    overflow: hidden;
    z-index: 10;
    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;
    cursor: pointer;
}
/*@media screen and (min-width: 600px) {*/
/*    .cards {*/
/*        flex-direction: row;*/
/*    }*/
/*}*/
/*@media screen and (min-width: 600px) {*/
/*    .holo {*/
/*        width: clamp(12.9vw, 61vh, 18vw);*/
/*        height: clamp(18vw, 85vh, 25.2vw);*/
/*    }*/
/*}*/

.holo:hover {
    box-shadow: -20px -20px 30px -25px var(--color1),
    20px 20px 30px -25px var(--color2), -7px -7px 10px -5px var(--color1),
    7px 7px 10px -5px var(--color2), 0 0 13px 4px rgba(255, 255, 255, 0.3),
    0 55px 35px -20px rgba(0, 0, 0, 0.5);
}
.holo.charizard {
    --color1: var(--charizard1);
    --color2: var(--charizard2);
}
.holo.pika {
    --color1: var(--pika1);
    --color2: var(--pika2);
}
.holo.mewtwo {
    --color1: var(--mewtwo1);
    --color2: var(--mewtwo2);
}
.holo.eevee {
    --color1: #ec9bb6;
    --color2: #ccac6f;
    --color3: #69e4a5;
    --color4: #8ec5d6;
    --color5: #b98cce;
}

.holo::before,
.holo::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;
}
.holo::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;
}
.holo::after {
    opacity: 1;
    background-image: url("/cportalFile/img/sparkles.gif"),
    url(/cportalFile/img/holo.webp),
    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;
}
.holo.active::after,
.holo:hover::after {
    filter: brightness(1) contrast(1);
    opacity: 1;
}
.holo.active,
.holo:hover {
    animation: none;
    transition: box-shadow 0.1s ease-out;
}
.holo.active::before,
.holo:hover::before {
    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;
}
.holo.active::before,
.holo:hover::before,
.holo.active::after,
.holo:hover::after {
    animation: none;
    transition: none;
}
.holo.animated {
    transition: none;
    animation: holoCard 12s ease 0s 1;
}
.holo.animated::before {
    transition: none;
    animation: holoGradient 12s ease 0s 1;
}
.holo.animated::after {
    transition: none;
    animation: holoSparkle 12s ease 0s 1;
}
@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 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 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);
    }
}

.holo.eevee:hover {
    box-shadow: 0 0 30px -5px white, 0 0 10px -2px white,
    0 55px 35px -20px rgba(0, 0, 0, 0.5);
}
.holo.eevee:hover::before,
.holo.eevee.active::before {
    background-image: linear-gradient(
            115deg,
            transparent 20%,
            var(--color1) 36%,
            var(--color2) 43%,
            var(--color3) 50%,
            var(--color4) 57%,
            var(--color5) 64%,
            transparent 80%
    );
}

.cards .holo:nth-child(2),
.cards .holo:nth-child(2)::before,
.cards .holo:nth-child(2)::after {
    animation-delay: 0.25s;
}
.cards .holo:nth-child(3),
.cards .holo:nth-child(3)::before,
.cards .holo:nth-child(3)::after {
    animation-delay: 0.5s;
}
.cards .holo:nth-child(4),
.cards .holo:nth-child(4)::before,
.cards .holo:nth-child(4)::after {
    animation-delay: 0.75s;
}