.slider {
    position: relative;
    margin-top: 100px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.item {
    position: absolute;
    width: 200px;
    height: 320px;
    text-align: justify;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    transition: 0.5s !important;
    left: calc(50% - 110px);
    top: 0;
}

#next {
    position: absolute;
    right: 50px;
    top: 40%;
}

#prev {
    position: absolute;
    left: 50px;
    top: 40%;
}

#prev,
#next {
    color: black;
    background: none;
    border: none;
    font-size: xxx-large;
    font-family: monospace;
    font-weight: bold;
    opacity: 0.5;
    transition: opacity 0.5s;
}

#prev:hover,
#next:hover {
    opacity: 1;
}

:root {
    --color1: rgb(18, 61, 234);
    --color2: #fbf151;
    --back: url(https://1docci.com/img/class/241210-1.png ); 
    --charizard2: #e9dfc9;
    --charizard1: #e9dfc9;
    --charizardfront: url(https://1docci.com/image/main/book_n250310.png ); 
    --pika1: #0054e5;
    --pika2: #fe56ec;
    --pikafront: url(https://1docci.com/img/class/class250310.png );
    --eevee1: #efb2fb;
    --eevee2: #acc6f8;
    --eeveefront: url(https://work-note.net/portfolio/1docci/img/n-poster.png);
    --mewtwo1: #efb2fb;
    --mewtwo2: #acc6f8;
    --mewtwofront: url(https://assets.codepen.io/13471/mewtwo-gx.webp);
}

.card {
    width: 71.5vw;
    height: 100vw;
    /*  margin-top: 75px !important;*/
    margin-top: 4.1vw !important;
    /*   position: relative;
    overflow: hidden;*/
 
    /*   overflow: hidden;*/
    z-index: 10;
    /*  touch-action: none;*/
    border-radius: 1%/0.5%;
    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.1), 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-image: var(--front);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transform-origin: center;
}

@media screen and (min-width: 600px) {
    .card {
        /*   width: clamp(12.9vw, 61vh, 18vw);*/
        height: 30.2vw !important;
        /*     height: clamp(18vw, 85vh, 25.2vw);*/
    }
}

.card:hover {
    box-shadow: -20px -20px 30px -4px var(--color1), 20px 20px 30px -4px var(--color2), -7px -7px 10px 1px var(--color1), 7px 7px 10px 1px var(--color2), 0 0 13px 4px rgba(255, 255, 255, 0.1), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
}

.card.charizard {
    --color1: var(--charizard1);
    --color2: var(--charizard2);
    --front: var(--charizardfront);
}

.card.pika {
    --color1: var(--pika1);
    --color2: var(--pika2);
    --front: var(--pikafront);
}

.card.mewtwo {
    --color1: var(--mewtwo1);
    --color2: var(--mewtwo2);
    --front: var(--mewtwofront);
}

.card.eevee {
    --color1: #ec9bb6;
    --color2: #ccac6f;
    --color3: #69e4a5;
    --color4: #8ec5d6;
    --color5: #b98cce;
    --front: var(--eeveefront);
}

.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;
    border-radius: 1%/0.5%;
}

.slider:hover {
    mix-blend-mode: unset;
    z-index: 1000002 !important;
}

.ss_active {
    transition: width, height 0.3s;
}



.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;
}

#item1:before {
    background-image: linear-gradient(115deg, transparent 0%, #ffffff 35%, transparent 47%, transparent 53%, #2a2926 75%, transparent 100%) !important;
}
#item0:before {
    background-image: linear-gradient(115deg, transparent 0%, #ffffff 35%, transparent 47%, transparent 53%, #2a2926 75%, transparent 100%) !important;
}

.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: multiply;
    z-index: 2;
    filter: brightness(1) contrast(1);
    transition: all 0.33s ease;
    mix-blend-mode: color-dodge;
    opacity: 1;
}

.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: width 0.1s, height 0.1s !important;
    -webkit-animation: holoCard 20s ease;
    animation: holoCard 20s ease;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;


}

.card.animated.card_0:hover {
    width: 23vw !important;
    height: 31.2vw !important;
}

.card.animated.card_1:hover {
    width: 23vw !important;
    height: 31.2vw !important;

}

.card.animated.card_2:hover {
    width: 31.01vw !important;
    height: 31.2vw !important;

}
.card:hover
{
    filter:blur(0px ) !important;
}
#item1:hover {
    width: 21.5vw !important;
    height: 31.2vw !important;

}
#item0:hover {
    width: 21.5vw !important;
    height: 31.2vw !important;

}#item2:hover {
    width: 21.5vw !important;
    height: 31.2vw !important;

}

.big_00 {
    width: 23.5vw !important;
    height: 31.2vw !important;
}

.big_11 {
    width: 21.5vw !important;
    height: 31.2vw !important;
}

.big_22 {
    width: 31.01vw !important;
    height: 31.2vw !important;
}

.card.animated:before {

    -webkit-animation: holoGradient 20s ease 0s 1;
    animation: holoGradient 20s ease 0s 1;
    animation-iteration-count: infinite;

}

.card.animated:after {

    -webkit-animation: holoSparkle 20s ease 0s 1;
    animation: holoSparkle 20s ease 0s 1;
    animation-iteration-count: infinite;

}

@-webkit-keyframes holoSparkle {

    0%,
    70%,
    100%  {
        opacity: 0.75;
        background-position: 50% 50%;
        filter: brightness(1.2) contrast(1.25);
    }

    10%,
    11% {
        opacity: 1;
        background-position: 40% 40%;
        filter: brightness(0.8) contrast(1.2);
    }

    16%,
    18% {
        opacity: 0.5;
        background-position: 50% 50%;
        filter: brightness(1.2) contrast(0.8);
    }

    30%,
    31% {
        opacity: 1;
        background-position: 60% 60%;
        filter: brightness(1) contrast(1);
    }

    40%,
    42% {
        opacity: 0.33;
        background-position: 45% 45%;
        filter: brightness(1.2) contrast(1.25);
    }
}

@keyframes holoSparkle {

    0%,
    70%,
    100% {
        opacity: 0.75;
        background-position: 50% 50%;
        filter: brightness(1.2) contrast(1.25);
    }

    10%,
    11% {
        opacity: 1;
        background-position: 40% 40%;
        filter: brightness(0.8) contrast(1.2);
    }

   
    16%,
    18% {
        opacity: 0.5;
        background-position: 50% 50%;
        filter: brightness(1.2) contrast(0.8);
    }

    30%,
    31% {
        opacity: 1;
        background-position: 60% 60%;
        filter: brightness(1) contrast(1);
    }

    40%,
    42% {
        opacity: 0.33;
        background-position: 45% 45%;
        filter: brightness(1.2) contrast(1.25);
    }
}

@-webkit-keyframes holoGradient {


    0%,
    70%,
    100% {
        opacity: 0.5;
        background-position: 50% 50%;
        filter: brightness(0.5) contrast(1);
    }


    10%,
    11% {
        background-position: 100% 100%;
        opacity: 1;
        filter: brightness(0.75) contrast(1.25);
    }

    16%,
    18% {
        background-position: 0% 0%;
        opacity: 0.88;
    }

    30%,
    31% {
        background-position: 100% 100%;
        opacity: 1;
        filter: brightness(0.5) contrast(1);
    }

    40%,
    42% {
        background-position: 0% 0%;
        opacity: 1;
        filter: brightness(0.75) contrast(1.25);
    }
}

@keyframes holoGradient {

    0%,
    70%,
    100% {
        opacity: 0.5;
        background-position: 50% 50%;
        filter: brightness(0.5) contrast(1);
    }

    10%,
    11% {
        background-position: 100% 100%;
        opacity: 1;
        filter: brightness(0.75) contrast(1.25);
    }

    16%,
    18% {
        background-position: 0% 0%;
        opacity: 0.88;
    }

    30%,
    31% {
        background-position: 100% 100%;
        opacity: 1;
        filter: brightness(0.5) contrast(1);
    }

    40%,
    42% {
        background-position: 0% 0%;
        opacity: 1;
        filter: brightness(0.75) contrast(1.25);
    }
}

@-webkit-keyframes holoCard {
    0% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }

    10% {
        transform: rotateZ(-3deg) rotateX(6deg) rotateY(-20deg);
    }

    11% {
        transform: rotateZ(-3deg) rotateX(6deg) rotateY(-20deg);
    }



    16% {
        transform: rotateZ(3deg) rotateX(6deg) rotateY(32deg);
    }

    18% {
        transform: rotateZ(3deg) rotateX(6deg) rotateY(32deg);
    }



    30% {
        transform: rotateZ(-3deg) rotateX(6deg) rotateY(-10deg);
    }

    31% {
        transform: rotateZ(-3deg) rotateX(6deg) rotateY(-10deg);
    }


    40% {
        transform: rotateZ(0deg) rotateX(6deg) rotateY(27deg);
    }

    42% {
        transform: rotateZ(0deg) rotateX(6deg) rotateY(27deg);
    }
    70% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }
}

@keyframes holoCard {
    0% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }

    10% {
        transform: rotateZ(-3deg) rotateX(6deg) rotateY(-20deg);
    }

    11% {
        transform: rotateZ(-3deg) rotateX(6deg) rotateY(-20deg);
    }



    16% {
        transform: rotateZ(3deg) rotateX(6deg) rotateY(32deg);
    }

    18% {
        transform: rotateZ(3deg) rotateX(6deg) rotateY(32deg);
    }



    30% {
        transform: rotateZ(-3deg) rotateX(6deg) rotateY(-10deg);
    }

    31% {
        transform: rotateZ(-3deg) rotateX(6deg) rotateY(-10deg);
    }


    40% {
        transform: rotateZ(0deg) rotateX(6deg) rotateY(27deg);
    }

    42% {
        transform: rotateZ(0deg) rotateX(6deg) rotateY(27deg);
    }
    70% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }
}

.card.eevee {
    box-shadow: 0 0 30px -5px rgb(29, 29, 29), 0 0 10px -2px white, 0 55px 35px -20px rgba(0, 0, 0, 0.5);
}

.card.eevee:hover {
    box-shadow: 0 0 30px 5px rgb(29, 29, 29), 0 0 10px 5px white, 0 55px 35px -20px rgba(0, 0, 0, 0.5);
}

.card.eevee:hover:before,
.card.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%);
}

.demo .card {
    background-image: var(--back);
    font-size: 2vh;
}

.demo .card>span {
    position: relative;
    top: 45%;
}

/*
.demo .card:nth-of-type(1),
.demo .card:nth-of-type(2),
.demo .card:nth-of-type(3) {
    width: 20vh;
    height: 27.5vh;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 25px 15px -10px rgba(0, 0, 0, 0.5);
    -webkit-animation: none;
    animation: none;
}

.demo .card:nth-of-type(1):before,
.demo .card:nth-of-type(1):after,
.demo .card:nth-of-type(2):before,
.demo .card:nth-of-type(2):after,
.demo .card:nth-of-type(3):before,
.demo .card:nth-of-type(3):after {
    -webkit-animation: none;
    animation: none;
}

.demo .card:nth-of-type(1):before,
.demo .card:nth-of-type(1):after {
    display: none;
}

.demo .card:nth-of-type(2) {
    background: none;
}

.demo .card:nth-of-type(2):before {
    display: none;
}

.demo .card:nth-of-type(3) {
    background: none;
}

.demo .card:nth-of-type(3):after {
    display: none;
}
*/
.operator {
    display: inline-block;
    vertical-align: middle;
    font-size: 6vh;
}


#app {
    position: relative;
}

.demo,
.cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    perspective: 2000px;
    position: relative;
    z-index: 1;
    transform: translate3d(0.1px, 0.1px, 0.1px);
}

.demo {
    flex-direction: row;
    justify-content: center;
}

@media screen and (min-width: 600px) {
    .cards {
        flex-direction: row;
    }
}

.cards .card:nth-child(2),
.cards .card:nth-child(2):before,
.cards .card:nth-child(2):after {
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.cards .card:nth-child(3),
.cards .card:nth-child(3):before,
.cards .card:nth-child(3):after {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.cards .card:nth-child(4),
.cards .card:nth-child(4):before,
.cards .card:nth-child(4):after {
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}



.promo {
    margin-top: 50px;
}

.promo img {
    margin-top: 10px;
    max-width: 80%;
}





@-webkit-keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}