/* =============================== */
/* ===         CREDITS         === */
/* =============================== */


.credits {
    top: 0;
    position: absolute;
    height: 10000px;
    width: 101%;
    background-color: #0c0c0c;
    display: none;
    justify-content: center;
    z-index: 99999;
}

.credit_sector > h4, .credit_area > h4, .credit_prof > p {
    font-size: 1.2em;
    text-decoration: none;
    font-style: none;
    transform: skewX(5deg);
    font-weight: 600;
    letter-spacing: .08em;
    text-shadow: 0 0 10px #0c0c0c;
}

.credit_sector > h4 {
    color: #B8AE89;
}

.credits_image_contain {
    aspect-ratio: 10/5;
    width: 60%;
    top: 50%;
    left: 3%;
    transform: translateY(-50%);
    position: fixed;
    z-index: 10;
    filter: opacity(.3) sepia(.5);
}
.credits_image_contain > div {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 100px #0c0c0c,
                inset 0 0 100px #0c0c0c,
                inset 0 0 50px #0c0c0c,
                inset 0 0 50px #0c0c0c,
                inset 0 0 50px #0c0c0c,
                inset 0 0 25px #0c0c0c,
                inset 0 0 10px #0c0c0c,
                inset 0 0 5px #0c0c0c,
                inset 0 0 2px #0c0c0c;
    background-size: 140%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
    will-change: opacity, background-position;
    animation-fill-mode: both;
}
.credits_image_contain > div.active {
    opacity: 1;
}
.credits_image01 {
    background-image: url(../assets/image/credit_img01.jpeg);
    background-position: top right;
}
.credits_image02 {
    background-image: url(../assets/image/credit_img02.jpeg);
    background-position: top left;
}
.credits_image03 {
    background-image: url(../assets/image/credit_img03.jpeg);
    background-position: center right;
}
.credits_image04 {
    background-image: url(../assets/image/credit_img04.jpeg);
    background-position: top right;
}
.credits_image05 {
    background-image: url(../assets/image/credit_img05.jpeg);
    background-position: center top;
}
.credits_image06 {
    background-image: url(../assets/image/credit_img06.jpeg);
    background-position: center right;
}
.credits_image07 {
    background-image: url(../assets/image/credit_img07.jpeg);
    background-position: center top;
}
.credits_image08 {
    background-image: url(../assets/image/credit_img08.jpeg);
    background-position: top left;
}
.credits_image09 {
    background-image: url(../assets/image/credit_img09.jpeg);
    background-position: center top;
}
.credits_image10 {
    background-image: url(../assets/image/credit_img10.jpeg);
    background-position: center right;
}
.credits_image11 {
    background-image: url(../assets/image/credit_img11.jpeg);
    background-position: center top;
}
.credits_image12 {
    background-image: url(../assets/image/credit_img12.jpeg);
    background-position: top right;
}
.credits_image13 {
    background-image: url(../assets/image/credit_img13.jpeg);
    background-position: center right;
}
.credits_image14 {
    background-image: url(../assets/image/credit_img14.jpeg);
    background-position: center top;
}
.credits_image15 {
    background-image: url(../assets/image/credit_img15.jpeg);
    background-position: center top;
}
.credits_image16 {
    background-image: url(../assets/image/credit_img16.jpeg);
    background-position: center right;
}
.credits_image17 {
    background-image: url(../assets/image/credit_img17.jpeg);
    background-position: center left;
}
.credits_image18 {
    background-image: url(../assets/image/credit_img18.jpeg);
    background-position: center right;
}
.credits_image19 {
    background-image: url(../assets/image/credit_img19.jpeg);
    background-position: top right;
}
.credits_image20 {
    background-image: url(../assets/image/credit_img20.jpeg);
    background-position: bottom left;
}
.credits_contain {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    top: 102vh;
    z-index: 50;
}
.credit_area {
    margin-bottom: 180px;
}
.credits_content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-bottom: 120px;
}
.credit_sector {
    width: 50%;
    display: flex;
    justify-content: end;
}
.credit_prof {
    width: 50%;
}
.credits_spacing {
    margin-bottom: 320px;
}
.credits_spacing_final {
    margin-top: -120px;
    height: 100vh;
    width: 100%;
}
.credit_sector_final {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}
.frase_final {
    font-size: 1.4em;
    color: #B8AE89;
    text-align: center;
}