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


.credits-wrapper {
    position: relative;
    overflow: hidden;
    height: 700px;
    background: #05080f;
    color: #fff;
    cursor: pointer;
}


/* =========================================
   TITLE
   ========================================= */

.credits-title {

    position: absolute;
    top: 0;
    left: 10px;

    width: 100%;
    z-index: 50;

    background: #05080f;

    text-align: left;

    border-bottom: 1px solid rgba(198,161,91,.35);
}


.credits-title h2 {

    margin: 0;
    padding: 15px 0;

    color: #c6a15b !important;

    font-size: 38px;
    letter-spacing: 6px;
    font-weight: 400;

    text-shadow: 0 0 8px rgba(198,161,91,.45);

}


/* =========================================
   REPLAY BUTTON
   ========================================= */

.credits-replay {

    position: absolute;

    right: 30px;
    top: 18px;

    z-index: 100;

}


.credits-replay a {

    color: #c6a15b !important;

    text-decoration: none;

    font-size: 22px;

}


.credits-replay a:hover {

    color: white !important;

}


.credits-replay div {

    font-size: 10px;

    color: #fff;

    line-height: 1.4;

}


/* =========================================
   WINDOW
   ========================================= */


.credits-window {

    position: absolute;

    top: 85px;
    bottom: 0;

    left: 0;

    width: 100%;

    overflow: hidden;

}



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


.credits {

    position: absolute;

    top: 0;
    left: 50%;

    width: min(900px,90%);

    transform: translateX(-50%);

    text-align: center;

    opacity: 1;

    transition: opacity 1.5s ease;

}



.credit {

    margin-bottom: 45px;

}



/* role */

.role {

    color: #c6a15b !important;

    font-size: 18px;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 12px;

}



/* names */


.name {

    color: #fff !important;

    font-size: 30px;

    line-height: 1.5;

    font-weight: 600;

}



.multi-name div {

    margin-bottom: 5px;

}


/* final block */

.final {

    margin-top: 100px;

}



/* =========================================
   FADE MASK
   ========================================= */


.credits-window:before,
.credits-window:after {

    content:"";

    position:absolute;

    left:0;

    width:100%;

    height:100px;

    z-index:20;

    pointer-events:none;

}



.credits-window:before {

    top:0;

    background:linear-gradient(
        #05080f,
        transparent
    );

}



.credits-window:after {

    bottom:0;

    background:linear-gradient(
        transparent,
        #05080f
    );

}



/* =========================================
   SPECIAL THANKS
   ========================================= */

.special-thanks {

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:#05080f;

    text-align:center;

    padding:40px;

    opacity:0;

    transition:opacity 2s ease;

    pointer-events:none;

    z-index:30;

}


.special-thanks h2 {

    color:#c6a15b !important;

    font-size:42px;

    letter-spacing:5px;

}



.special-thanks h3 {

    color:#fff !important;

    font-size:34px;

}



.special-thanks p {

    max-width:700px;

    font-size:20px;

    line-height:1.8;

    color:#ddd !important;

}



/* =========================================
   MOBILE
   ========================================= */


@media(max-width:768px){


    .credits-wrapper {

        height:500px;

    }



    .credits-title h2 {

        font-size:24px;

    }



    .role {

        font-size:14px;

    }



    .name {

        font-size:22px;

    }



    .special-thanks h2 {

        font-size:28px;

    }



    .special-thanks h3 {

        font-size:22px;

    }



    .special-thanks p {

        font-size:16px;

    }


}