@media (orientation: landscape) {
    .mainContent3D {
        scale: 0.9;
    }
}

@keyframes move {
    0% {
        transform: rotateY(-20deg) rotateX(-5deg);
    }

    25% {
        transform: rotateY(20deg) rotateX(-5deg);
    }

    50% {
        transform: rotateY(20deg) rotateX(5deg);
    }

    75% {
        transform: rotateY(-20deg) rotateX(5deg);
    }

    100% {
        transform: rotateY(-20deg) rotateX(-5deg);
    }
}

.card3D {
    background-color: green;
    background: center / cover no-repeat url("../img/bg-career-metavese.png");
    background: radial-gradient(circle, rgb(191 120 255) 0%, rgb(84 26 176) 56%, rgb(18 0 46) 100%);
    position: relative;
    background-image: radial-gradient(circle at 20% 100%, rgba(184, 184, 184, 0.1) 0%, rgba(184, 184, 184, 0.1) 33%, rgba(96, 96, 96, 0.1) 33%, rgba(96, 96, 96, 0.1) 66%, rgba(7, 7, 7, 0.1) 66%, rgba(7, 7, 7, 0.1) 99%), linear-gradient(40deg, #8134ce, #24005c, #4301ad, #8033ce);
    background-repeat: no-repeat;
    background-size: cover;
}

.mainContent3D {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    perspective: 1000px;
    z-index: 999;
    margin-bottom: 23vmin;
}

#designCard_poster {
    aspect-ratio: 2/3;
    background: center / cover no-repeat url("../img/bg-career-metavese.png");
    width: 100%;
    max-width: 72vmin;
    position: relative;
    animation: move 13s 0s infinite;
    transform-style: preserve-3d;
    border-radius: 3vmin;
}

#designCard_poster__header {
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    transform: translateZ(10vmin);
    transform-style: preserve-3d;
}

#designCard_poster__header__title {
    /* font-family: "Agency FB Black"; */
    font-size: 22vmin;
    position: absolute;
    margin: 0;
    line-height: 1em;
    white-space: nowrap;
    background-image: url("../img/bg-career-metavese.png");
    background-size: cover;
    background-position: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-weight: 800;
}

#designCard_poster__header__title::before {
    content: attr(data-title);
    position: absolute;
    color: #ffc61c5e;
    -webkit-text-fill-color: initial;
    mix-blend-mode: overlay;
    opacity: 1;
    text-shadow: 0px 0px 4vmin rgba(0, 0, 0, 0.4), 1px 1px #bf4528;
}

#designCard_poster__front_image {
    position: absolute;
    bottom: -14.4vmin;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateZ(20vmin);
    transform-style: preserve-3d;
    filter: drop-shadow(0px 0px 40px rgba(0, 0, 0, 0.4));
    /* border-radius: 6vmin; */
}

#designCard_poster__anya {
    /* font-family: "Agency FB Black"; */
    font-size: 2.6vmin;
    /* letter-spacing: 0.1em; */
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0px 0px 3vmin rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 5%;
    left: 6%;
    transform: translateZ(5vmin);
    transform-style: preserve-3d;
    margin: 0;
}

#designCard_poster__chris {
    /* font-family: "Agency FB Black"; */
    font-size: 2.6vmin;
    /* letter-spacing: 0.1em; */
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0px 0px 3vmin rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 5%;
    right: 6%;
    transform: translateZ(5vmin);
    transform-style: preserve-3d;
    margin: 0;
}

#designCard_poster__george {
    /* font-family: "Agency FB Regular"; */
    font-size: 2.2vmin;
    text-transform: uppercase;
    text-align: center;
    color: white;
    /* letter-spacing: 0.4em; */
    width: 100%;
    position: absolute;
    top: 35%;
    left: 0%;
    transform: translateZ(5vmin);
    transform-style: preserve-3d;
    margin: 0;
    font-weight: 600;
    text-shadow: 1px 1px 2px #00000059;
}

#designCard_poster__george strong {
    font-family: "Agency FB Black";
}

#designCard_poster__mad_max_saga {
    display: flex;
    justify-content: space-between;
    /* font-family: "Agency FB Black"; */
    font-size: 5vmin;
    line-height: 1em;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: absolute;
    top: 48%;
    left: 0%;
    width: 100%;
    margin: 0;
    transform: translateZ(10vmin);
    /* transform-style: preserve-3d; */
    /* text-shadow: 0px 0px 4vmin rgba(0,0,0,0.4); */
    font-weight: 800;
}

#designCard_poster__mad_max_saga>span {
    display: flex;
    background-image: url("https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources@master/furiosa/medias/rust.jpg");
    background-size: cover;
    background-position: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

#designCard_poster__mad_max_saga>span::before {
    content: attr(data-title);
    position: absolute;
    color: #ffc61c5e;
    -webkit-text-fill-color: initial;
    mix-blend-mode: overlay;
    opacity: 1;
    text-shadow: 0px 0px 4vmin rgba(0, 0, 0, 0.4), 1px 1px #bf4528;
}

nav {
    position: fixed;
    bottom: 0;
    right: 0;
}

nav a {
    font-size: 16px;
    color: #ffc61c;
    display: inline-flex;
    padding: 2em;
    font-family: "Agency FB Black";
    font-weight: 900;
    text-transform: uppercase;
    text-decoration-style: dashed;
}

.imgLogoCareer {
    width: 114%;
    position: absolute;
    top: -3%;
    left: -7%;
    transform: translateZ(14vmin);
    transform-style: preserve-3d;
}

.imgTVCareer {
    width: 100%;
    position: absolute;
    top: 21.6vmin;
    left: 0%;
    transform: translateZ(14vmin);
    transform-style: preserve-3d;
    position: relative;
    filter: drop-shadow(0px 0px 40px rgba(0, 0, 0, 0.4));
}

.imgTVCareer>img {}

.imgTVCareer>.tvArea {
    background-color: #fff;
    height: 32.5vmin;
    position: absolute;
    top: 6.5vmin;
    width: 57.3vmin;
    left: 7vmin;
    display: grid;
    border-radius: 2.5vmin;
    align-content: center;
    justify-content: center;
    overflow: hidden;
}

.tvArea>.carouselCustom {
    height: 32.5vmin;
}
.tvArea>.carouselCustom .carousel-item{height: 33vmin;position: relative;/* display: grid; */}
.tvArea>.carouselCustom .carousel-item img{
    
}
.tvArea>.carouselCustom .carousel-item .carousel-caption{
    font-size: 1.2vmin;
    position: absolute;
    bottom: 0;
}
.tvArea>.carouselCustom .carousel-item .carousel-caption h5{
    margin-bottom: 0;
    /* width: 4vmin; */
    font-size: 3vmin;
}
.tvArea>.carouselCustom .carousel-item .carousel-caption p{color: white;margin-bottom: -7px;background-color: #00000054;font-weight: 700;border-radius: 1rem;backdrop-filter: blur(5px);padding: 2px 0rem;}
.tvArea>.carouselCustom .carousel-control-prev,
.tvArea>.carouselCustom .carousel-control-next{
    width: 4vmin;
    background-color: #00000012;
}
.tvArea>.carouselCustom .carousel-control-prev{}
.tvArea>.carouselCustom .carousel-control-next{

}
.tvArea>.carouselCustom .carousel-indicators{margin-bottom: -5px;}
/* .card3D::before{
    content: '';
    background-image: url(../img/bg-art-vr.png);
    width: 140vmin;
    position: absolute;
    height: 100vh;
    background-repeat: no-repeat;
    opacity: .15;
    background-size: 100vmin;
    background-position: left bottom;
    transform: scaleX(-1);
    left: 0;
}
.card3D::after{
    content: '';
    background-image: url(../img/bg-art-vr.png);
    width: 140vmin;
    position: absolute;
    height: 100vh;
    background-repeat: no-repeat;
    opacity: .15;
    background-size: 100vmin;
    right: 0;
    bottom: 0;
    z-index: 0;
} */