/***********************************************************************************************
* This will hold the styling For the Show pages
* 
* @author (Anyanwu Benedict Chukwuemeka)
* @version (v0.01)
*
************************************************************************************************/
html:root
{
    --titleImgBdrWidth: 12.5rem;
    --titleImgBdrHeight: 18.75rem;
    --sect_abt_det_width: 25rem;
    --abtCardTextMajorW: 6.25rem;
    --seasons_BdrHeight: var(--switchProfHeaderHeight);
    --episodesSearchWidth: 9.375rem;
    --episodesSearchHeight: 2.1875rem;
    --episodesBoxWidth: 12.5rem;
    --sect_crsl_arr_size: 1.875rem;
    --sect_crsl_arr_bdr: 0.625rem;
    --sect_crsl_icn_size: 1.875rem;
    --info_more_staff_ctnt_bcg: var(--genModalBcg);
    --info_more_staff_rslt_card_img_size: 3.125rem;
    --info_more_staff_rslt_card_w: 15.625rem;
}



/* ======================= BODY =================== */

.info_pg_base
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0rem;
    background: #000;
    scroll-behavior: smooth;
}

.info_pg_bcg
{
    width: 100%;
    height: fit-content;
}

.bcg_img_bdr
{
    position: relative;
    width: 100%;
    min-height: 15.625rem;
    aspect-ratio: 16/4;
    pointer-events: none;
}

.bcg_img_bdr .bcg_img_box
{
    --ImgHeight: 31.25rem;
    width: 100%;
    height: var(--ImgHeight);
    min-height: 31.25rem;
    overflow: hidden;
}

.bcg_img_box .bcgImg
{
    width: 100%;
    height: 100%;
    min-height: 31.25rem;
    object-fit: cover;
    object-position: top;
}

.bcg_img_bdr .bcg_img_gradient
{
    --ImgHeight: 32.8125rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: var(--ImgHeight);
    min-height: 32.8125rem;
    background-image: -o-radial-gradient(100% 80% at 75% 20%, #00000000 0%, #000000 100%);
    background-image: -moz-radial-gradient(100% 80% at 75% 20%, #00000000 0%, #000000 100%);
    background-image: -webkit-radial-gradient(100% 80% at 75% 20%, #00000000 0%, #000000 100%);
    background-image: radial-gradient(100% 80% at 75% 20%, #00000000 0%, #000000 100%);
}

.info_pg_bdr
{
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
}

.info_pg_box
{
    position: relative;
    width: 100%;
    max-width: var(--genMaxContainerWidth);
    display: flex;
    flex-direction: column;
    padding: 0 var(--genBorderSpacing);
}



/* --------- Title Heading ----------- */

.title-plate
{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 2.5rem;
}



/* ---------- Title Thumbnail ------- */

.title_ImgBdr
{
    position: relative;
    width: var(--titleImgBdrWidth);
    height: var(--titleImgBdrHeight);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.title_ImgBox
{
    width: 100%;
    height: 100%;
    border-radius: 0.9375rem;
    overflow: hidden;
}

.title_ImgBox .title_Img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}




/* ------------ Title Content ----------- */
.title_ctntBdr
{
    width: calc((100% - var(--titleImgBdrWidth)));
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 0.625rem;
    padding-left: 1.875rem;
    padding-bottom: 1.875rem;
}

.title_ctntBdr #show_Header_Name
{
    color: var(--genWhiteTypeBright);
    font-size: 1.875rem;
    text-align: left;
    letter-spacing: 0.0938rem;
}




/* ------- Quick Details ------ */

.title_ctntBdr .quick_det_bdr
{
    width: -moz-fit-content;
    width: fit-content;
}

.quick_det_bdr .quick_det_box
{
    width: 100%;
    display: flex;
    flex-direction: row;
}

.quick_det_box .quick_det_item
{
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quick_det_item .quick_det_text
{
    color: var(--genWhiteTypeMid2);
    font-size: 0.875rem;
    text-transform: uppercase;
}

.quick_det_item:has(.quick_det_rating_icon) .quick_det_text
{
    font-size: 1rem;
}

.quick_det_text.tagline
{
    color: var(--genWhiteTypeMid);
    text-transform: none;
    font-style: italic;
    text-align: left;
}

.quick_det_item .quick_det_divider
{
    margin: 0 0.3125rem;
}

.quick_det_item .quick_det_rating_icon
{
    width: 0.875rem;
    height: 0.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.1875rem;
}

.quick_det_rating_icon .quick_det_rating_svg
{
    width: 100%;
    height: 100%;
    fill: var(--genGreenTypeLight2);
}




/*  ------ Quick Actions ------ */
.info_atn_bdr
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.info_atn_bdr .info_atn_box
{
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: row;
    gap: 0.3125rem;
}

.quick_atnBcg
{
    position: relative;
    height: 3.75rem;
    -moz-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    user-select: none;
}

.quick_atnBcg .quick_atnBdr
{
    height: 100%;
    display: flex;
    flex-direction: row;
}

.quick_atnBdr .quick_atnBox
{
    position: relative;
    height: 100%;
}

.quick_atnBox .quick_atnCtnt
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.9375rem;
    transition: 300ms;
    cursor: pointer;
}

.quick_atnCtnt:active
{
    background-color: #222222;
    border-radius: 0.3125rem;
}


.topIconBox
{
    width: 1.125rem;
}

.topIconBox .topIcon
{
    width: 100%;
    fill: var(--genWhiteTypeLight);
}

.btmCtnt .btmText
{
    width: 100%;
    color: var(--genWhiteTypeLight);
    font-size: 0.75rem;
    margin-top: 0.3125rem;
    text-align: center;
}



/* ------- Quick Atn Modal ------ */

.quickAtnModalBdr
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 18.75rem;
    height: fit-content;
    background-color: #141414;
    border-radius: 0.3125rem;
    transform: translate(0%, 50%);
    transition: 300ms;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.quickAtnModalBdr.active
{
    transform: translate(0%, 100%);
    opacity: 1;
    visibility: visible;
    transition: all 300ms ease;
    pointer-events: all;
    z-index: 3;
}

.quickAtnModalBdr .quickAtnModalBox
{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0.75rem 1rem;
}

.quickAtnModalBox .quickAtnModal_btn
{
    position: relative;
    width: 100%;
    height: 3.125rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    outline: none;
    border: none;
    padding: 0.625rem;
    background-color: transparent;
    cursor: pointer;
    transition: 300ms;
}

.quickAtnModal_btn:active
{
    background-color: #282828;
}

.quickAtnModal_btn .quickAtnModal_btnIcon
{
    width: 1.125rem;
    width: 1.125rem;
    fill: var(--genWhiteTypeMid);
    transition: 300ms;
}

.quickAtnModal_btn .quickAtnModal_btnText
{
    width: -moz-fit-content;
    width: fit-content;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.625rem;
    color: var(--genWhiteTypeMid);
    font-size: 0.75rem;
    transition: 300ms;
}

.quickAtnModal_btn.selected .quickAtnModal_btnIcon,
.quickAtnModal_btn:active .quickAtnModal_btnIcon
{
    fill: var(--genWhiteTypeLight);
}

.quickAtnModal_btn.selected .quickAtnModal_btnText,
.quickAtnModal_btn:active .quickAtnModal_btnText
{
    color: var(--genWhiteTypeLight);
}



/* ------- Like/Dislike show ------- */

.like_buttonsBox .topIconBox
{
    display: none;
}

.like_buttonsBox[like-status="dflt"] .like_dflt
{
    display: block;
}

.like_buttonsBox[like-status="yes"] .like_yes
{
    display: block;
}

.like_buttonsBox[like-status="no"] .like_no
{
    display: block;
}

.score_btn.selected
{
    border-left: 0.1875rem solid var(--genGreenTypeMid);
    border-radius: 0.3125rem;
    background-color: #ffffff10;
}




/* ------- For trailer ------- */

.trailer_Bdr
{
    position: fixed;
    bottom: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: #00000099;
    -webkit-backdrop-filter: blur(0.9375rem);
    backdrop-filter: blur(0.9375rem);
    opacity: 0;
    transform: scale(0.6) translateY(30%);
    transition: 300ms;
    cursor: default;
    z-index: -101;
}

.trailer_Bdr.active
{
    opacity: 1;
    transform: scale(1.0) translateY(0%);
    visibility: visible;
    z-index: 101;
}

.trailer_Bdr .trailer_Box
{
    position: relative;
    width: 98%;
    max-width: 50rem;
    /* min-height: 25rem; */
    margin: 5.5rem 0;
    border-radius: 0.3125rem;
    background: #000000;
    aspect-ratio: 16 / 9;
    box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.1);
    -moz-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    user-select: none;
}

.trailer_Bdr .closeTrailerIcon
{
    position: absolute;
    top: 0;
    right: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: #000000cc;
    transform: translate(50% , -150%);
    cursor: pointer;
}

.closeTrailerIcon .closeTrailerSvg
{
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--genWhiteTypeBright);
}

.trailer_Box .trailer_Frame
{
    width: 100%;
    height: 100%;
}







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

.tro
{
    width: 100%;
    display: flex;
    flex-direction: column;
}


/* --------- Tab navigations ------- */
.ctnt-tab-headerBcg
{
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0.625rem;
}

.ctnt-tab-headerBcg .ctnt-tab-headerBdr
{
    position: relative;
    width: 100%;
}

.ctnt-tab-headerBdr::before,
.ctnt-tab-headerBdr::after
{
    content: '';
    position: absolute;
    top: 0;
    width: var(--genBorderSpacing);
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.ctnt-tab-headerBdr::before
{
    left: 0;
    background-image: linear-gradient(to right, #000000, #00000000);
}

.ctnt-tab-headerBdr::after
{
    right: 0;
    background-image: linear-gradient(to left, #000000, #00000000);
}

.ctnt-tab-headerBdr .ctnt-tab-headerBox
{
    width: 100%;
    display: flex;
    flex-direction: row;
    scrollbar-width: none;
    overflow: auto hidden;
}

.ctnt-tab-headerBdr::-webkit-scrollbar
{
    display: none;
}

.ctnt-tab-headerBox .ctnt-tab-headerOpt
{
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0.375rem 0.75rem;
    padding: 0.3125rem;
    outline: none;
    border: none;
    background-color: #00000000;
    cursor: pointer;
}

.ctnt-tab-headerOpt::after
{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 0.125rem;
    border-radius: 0.625rem;
    background-color: var(--genWhiteTypeLight);
    transition: all 300ms ease-in-out;
}

.ctnt-tab-headerOpt.selected::after
{
    width: 100%;
}

.ctnt-tab-headerOpt .ctnt-tab-headerText
{
    font-size: 0.875rem;
    color: var(--genGreenTypeMid);
    transition: all 300ms ease-in-out;
}

.ctnt-tab-headerOpt.selected .ctnt-tab-headerText
{
    color: var(--genGreenTypeLight);
}



/* ------------ Sections ----------- */
.sect-tab
{
    width: 100%;
    display: none;
    margin-bottom: 2.5rem;
}

.sect-tab.selected
{
    display: block;
}

.sect-coming-soon-bdr
{
    width: 100%;
    margin: 0.625rem 0 1rem;
    border-radius: 1rem;
    background-color: var(--genModalBcg);
}

.sect-coming-soon-bdr .sect-coming-soon-box
{
    width: 100%;
    padding: 2.5rem 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sect-coming-soon-box .sect-coming-soon-text
{
    font-size: 0.875rem;
    color: var(--genWhiteTypeLight);
}

.sect-head
{
    width: 100%;
    padding: 0.3125rem 0;
}

.sect-headText
{
    display: flex;
    align-items: center;
    font-size: 1.0625rem;
    color: var(--genWhiteTypeBright);
}

.sect-headText .major
{
    color: var(--genGreenTypeLight);
}





/* =========== SECT CAROUSEL ========== */
.sect-crsl-base
{
    width: 100%;
    margin: 0.625rem 0 1.875rem;
}

.sect-crsl-base .sect-crsl-bdr
{
    position: relative;
    width: 100%;
}

.sect-crsl-bdr .sect-crsl-arr-bdr
{
    position: absolute;
    top: 50%;
    width: calc((var(--sect_crsl_arr_size) * 1.0125));
    height: calc((var(--sect_crsl_arr_size) * 1.125));
    display: grid;
    place-items: center;
    background-color: #000000cc;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    transition: all 300ms ease-in-out;
    cursor: pointer;
    z-index: 5;
}

.sect-crsl-arr-bdr.sect-crsl-arr-left
{
    left: 0;
    border-top-right-radius: var(--sect_crsl_arr_bdr);
    border-bottom-right-radius: var(--sect_crsl_arr_bdr);
}

.sect-crsl-arr-bdr.sect-crsl-arr-right
{
    right: 0;
    border-top-left-radius: var(--sect_crsl_arr_bdr);
    border-bottom-left-radius: var(--sect_crsl_arr_bdr);
}

.sect-crsl-arr-bdr .sect-crsl-arr-box
{
    width: var(--sect_crsl_arr_size);
    height: var(--sect_crsl_arr_size);
    cursor: pointer;
}

.sect-crsl-arr-box .sect-crsl-arr-icon
{
    width: 100%;
    height: 100%;
    fill: var(--genWhiteTypeMid);
}

.sect-crsl-bdr .sect-crsl-box
{
    width: 100%;
}

.sect-crsl-box .sect-crsl-grid
{
    --sect_crsl_card_gap: 0.5rem;
    width: 100%;
    display: grid;
    grid-auto-columns: calc((100% / var(--sect-crsl-card-dvn)) - (var(--sect_crsl_card_gap)));
    grid-auto-flow: column;
    gap: var(--sect_crsl_card_gap);
    scroll-snap-type:x proximity;
    scroll-behavior: smooth;
    scrollbar-color: #00000000 #00000000;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-x: auto;
    overflow-y: hidden;
}

.sect-crsl-grid *
{
    border-radius: 0.625rem;
}

.sect-crsl-grid::-webkit-scrollbar
{
    display: none;
    width: 0;
    height: 0;
}

.sect-crsl-grid.isBasicSliderDown
{
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.sect-crsl-grid.hrtl
{
    --sect-crsl-card-dvn: 4;
}

.sect-crsl-grid.vrtl
{
    --sect-crsl-card-dvn: 8;
}


.sect-crsl-grid .sect-crsl-card-bdr
{
    width: 100%;
    scroll-snap-align: start;
}

.sect-crsl-grid.hrtl .sect-crsl-card-bdr
{
    aspect-ratio: 16/9;
}

.sect-crsl-grid.vrtl .sect-crsl-card-bdr
{
    aspect-ratio: 18/32;
}

.sect-crsl-card-bdr .sect-crsl-card-box
{
    width: 100%;
    height: 100%;
}

.sect-crsl-card-box .sect-crsl-icon-bdr
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background-color: #000000aa;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: all 300ms ease-in-out;
    cursor: pointer;
}

.sect-crsl-icon-bdr .sect-crsl-icon-box
{
    width: var(--sect_crsl_icn_size);
    height: var(--sect_crsl_icn_size);
    transition: all 300ms ease-in-out;
}

.sect-crsl-icon-box .sect-crsl-icon-svg
{
    width: 100%;
    height: 100%;
    fill: var(--genWhiteTypeLight);
}


/* ------- Notices ------- */
.sect-crsl-card-box .sect-crsl-ntc-bdr
{
    width: 100%;
    height: 100%;
    background-color: var(--genGreyTypeMid);
    cursor: pointer;
}

.sect-crsl-ntc-bdr .sect-crsl-ntc-box
{
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.sect-crsl-ntc-box .sect-crsl-ntc-txt
{
    color: var(--genWhiteTypeMid2);
    font-size: 1rem;
}



/* ------- Cast & Crew ------- */
.sect-crsl-card-box .sect-crsl-prsn-bdr
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sect-crsl-prsn-bdr .sect-crsl-prsn-box
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 0.3125rem;
    background-image: linear-gradient(to top, #000000, #00000000);
    z-index: 5;
}

.sect-crsl-prsn-box .sect-crsl-prsn-mjr-box
{
    width: 100%;
}

.sect-crsl-prsn-mjr-box .sect-crsl-prsn-mjr-txt
{
    font-size: 0.875rem;
    color: var(--genWhiteTypeLight);
    font-weight: 600;
}

.sect-crsl-prsn-box .sect-crsl-prsn-mnr-box
{
    width: 100%;
}

.sect-crsl-prsn-mnr-box .sect-crsl-prsn-mnr-txt
{
    font-size: 0.75rem;
    color: var(--genGreenTypeMid);
}

.sect-crsl-prsn-box .sect-crsl-prsn-mjr-txt,
.sect-crsl-prsn-box .sect-crsl-prsn-mnr-txt
{
    --lineNo: 3;
    --lineHeight: 1.4;
    position: relative;
    width: 100%;
    display: -webkit-box;
    max-height: calc(var(--lineNo) * 1em * var(--lineHeight));
    line-height: var(--lineHeight);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lineNo);
    line-clamp: var(--lineNo);
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    overflow: hidden;
}



/* ------- Videos ------- */
.sect-crsl-card-bdr[data-sect-type="sect-videos"]
.sect-crsl-icon-bdr
{
    opacity: 1;
    visibility: visible;
    background-color: #00000050;
}



/* ------- Images ------- */
.sect-crsl-card-box .sect-crsl-img-base
{
    width: 100%;
    height: 100%;
    transition: all 300ms ease-in-out;
    cursor: pointer;
}

.sect-crsl-img-base.max
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 125;
}

html:has(.sect-crsl-img-base.max) body
{
    overflow: hidden;
}

.sect-crsl-img-base.min
{
    animation: sect-crsl-img-base-close 250ms linear;
    pointer-events: none;
}

@keyframes sect-crsl-img-base-close 
{
    from
    {
        opacity: 1;
    }
    to
    {
        opacity: 0;
    }
}

.sect-crsl-img-base .sect-crsl-img-bdr
{
    position: relative;
    width: 100%;
    height: 100%;
}

.sect-crsl-img-base.max .sect-crsl-img-bdr
{
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(0.625rem);
    background-color: #111111cc;
    transition: all 300ms ease-in;
}

.sect-crsl-img-base.min  .sect-crsl-img-bdr
{
    background-color: #00000000;
}

.sect-crsl-img-bdr .sect-crsl-img-box
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sect-crsl-img-base.max .sect-crsl-img-box
{
    width: 80%;
    height: 80%;
    animation: sect-crsl-img-box-open 250ms linear;
}

@keyframes sect-crsl-img-box-open 
{
    from
    {
        filter: brightness(0);
        scale: 0.75;
    }
    to
    {
        filter: brightness(1);
        scale: 1
    }
}

.sect-crsl-img-base.min .sect-crsl-img-box
{
    animation: sect-crsl-img-box-close 250ms linear;
}

@keyframes sect-crsl-img-box-close 
{
    from
    {
        scale: 1
    }
    to
    {
        scale: 0.75;
    }
}


.sect-crsl-img-box .sect-crsl-img-src
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sect-crsl-img-base.max .sect-crsl-img-src
{
    object-fit: contain;
}

.sect-crsl-card-bdr[data-sect-type="sect-person"] .sect-crsl-img-src
{
    transition: all 300ms ease-in-out;
}

.sect-crsl-img-base.max .sect-crsl-icon-bdr
{
    display: none;
}



/* =------ Viewing More Staff ------= */
.info_more_staff_bdr
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms ease-in-out;
    pointer-events: none;
    z-index: 250;
}

.info_more_staff_bdr.active
{
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.info_more_staff_bdr .info_more_staff_box
{
    width: 100%;
    height: 100%;
    /* padding: 4rem 3rem; */
    display: grid;
    place-items: center;
    backdrop-filter: blur(1.5625rem);
    background-color: #000000cc;
}

.info_more_staff_box .info_more_staff_ctnt_bdr
{
    width: 100%;
    height: 100%;
    width: 80%;
    height: 80%;
    border-radius: 0.625rem;
    scale: 0.75;
    transition: all 300ms ease-in-out;
    overflow: hidden;
    z-index: 2;
}

.info_more_staff_bdr.active .info_more_staff_ctnt_bdr
{
    scale: 1;
}

.info_more_staff_ctnt_bdr .info_more_staff_ctnt_box
{
    position: relative;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0.625rem;
    background-color: var(--info_more_staff_ctnt_bcg);
    overflow: hidden auto;
}

.info_more_staff_ctnt_box .info_more_staff_nav_bdr
{
    position: sticky;
    top: 0;
    width: 100%;
    background-color: var(--info_more_staff_ctnt_bcg);
    z-index: 5;
}

.info_more_staff_nav_bdr .info_more_staff_nav_box
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.info_more_staff_nav_box::after
{
    content: '';
    position: absolute;
    top: 100%;
    width: 100%;
    height: 2rem;
    background-image: linear-gradient(to bottom, var(--info_more_staff_ctnt_bcg), #00000000);
}

.info_more_staff_nav_box .info_more_staff_nav_ttl_box
{
    width: -moz-fit-content;
    width: fit-content;
}

.info_more_staff_nav_ttl_box .info_more_staff_nav_ttl_txt
{
    color: var(--genWhiteTypeLight);
    font-size: 1.25rem;
}

.info_more_staff_ctnt_box .info_more_staff_rslt_bdr
{
    width: 100%;
    height: 100%;
    margin: 0.5rem 0;
}

.info_more_staff_rslt_bdr .info_more_staff_rslt_box
{
    width: 100%;
    height: 100%;
}

.info_more_staff_rslt_box .info_more_staff_rslt_grid
{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--info_more_staff_rslt_card_w), 1fr));
    grid-template-rows: auto;
    gap: 0.5rem;
    padding: 1rem;
}

.info_more_staff_rslt_grid .info_more_staff_rslt_card_bdr
{
    width: 100%;
    height: 5rem;
    border-radius: 0.625rem;
    background-color: var(--genGreyTypeMid);
    transition: all 300ms ease-in-out;
    cursor: pointer;
}

.info_more_staff_rslt_card_bdr:active
{
    background-color: var(--genGreyTypeLight);
}

.info_more_staff_rslt_card_bdr .info_more_staff_rslt_card_box
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.3125rem 1rem;
}

.info_more_staff_rslt_card_box .info_more_staff_rslt_card_imgBdr
{
    width: var(--info_more_staff_rslt_card_img_size);
    height:var(--info_more_staff_rslt_card_img_size) ;
}

.info_more_staff_rslt_card_imgBdr .info_more_staff_rslt_card_imgBox
{
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 0.125rem var(--genGreenTypeLight2);
    border-radius: 50%;
    overflow: hidden;
}

.info_more_staff_rslt_card_imgBox .info_more_staff_rslt_card_imgSrc
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 300ms ease-in-out;
}

.info_more_staff_rslt_card_box .info_more_staff_rslt_card_det_bdr
{
    width: calc((100% - var(--info_more_staff_rslt_card_img_size)));
    padding-left: 0.75rem;
}

.info_more_staff_rslt_card_det_bdr .info_more_staff_rslt_card_det_box
{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.info_more_staff_rslt_card_det_box .info_more_staff_rslt_card_mjr_box
{
    width: 100%;
}

.info_more_staff_rslt_card_mjr_box .info_more_staff_rslt_card_mjr_txt
{
    color: var(--genWhiteTypeMid2);
    font-size: 0.875rem;
}

.info_more_staff_rslt_card_det_box .info_more_staff_rslt_card_mnr_box
{
    width: 100%;
}

.info_more_staff_rslt_card_mnr_box .info_more_staff_rslt_card_mnr_txt
{
    color: var(--genGreenTypeMid);
    font-size: 0.75rem;
}

.info_more_staff_ctnt_box .info_more_staff_pgn_bdr
{
    position: sticky;
    bottom: 0;
    width: 100%;
    min-height: fit-content;
    background-color: var(--info_more_staff_ctnt_bcg);
}

.info_more_staff_pgn_bdr .info_more_staff_pgn_box
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
}

.info_more_staff_pgn_box::after
{
    content: '';
    position: absolute;
    bottom: 100%;
    width: 100%;
    height: 2rem;
    background-image: linear-gradient(to top, var(--info_more_staff_ctnt_bcg), #00000000);
}

.info_more_staff_pgn_box .info_more_staff_pgn_num_box
{
    width: -moz-fit-content;
    width: fit-content;
}

.info_more_staff_pgn_num_box .info_more_staff_pgn_num_txt
{
    color: var(--genWhiteTypeMid2);
    font-size: 0.875rem;
}







/* ========== About Section ========== */

.sect-abt-bdr .sect-abt-box
{
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    gap: 1.5625rem;
    padding: var(--genBorderSpacing);
    border-radius: 0.9375rem;
    background-color: var(--genModalBcg);
}

.sect-abt-box .sect-abt-card
{
    display: flex;
    flex-direction: column;
}

.sect-abt-card.sect-abt-description
{
    width: calc((100% - var(--sect_abt_det_width)));
}

.sect-abt-card.sect-abt-details
{
    width: var(--sect_abt_det_width);
}

.sect-abt-card .sect-abt-header
{
    width: 100%;
    margin-bottom: 1rem;
}

.sect-abt-header .sect-abt-headerText
{
    color: var(--genWhiteTypeLight);
    font-size: 1.125rem;
    display: none;
}

.sect-abt-card .sect-stmt-long
{
    width: 100%;
}

.abt-stmt-long .abt-stmt-longText
{
    width: 100%;
    font-size: 0.875rem;
    color: var(--genWhiteTypeMid);
}

.sect-abt-card .abt-stmt-short
{
    width: 100%;
    height: fit-content;
    display: none;
    flex-direction: column;
}

.abt-stmt-short .abt-stmt-shortText
{
    --lineNo: 5;
    --lineHeight: 1.4;
    position: relative;
    width: 100%;
    display: -webkit-box;
    max-height: calc(var(--lineNo) * 1em * var(--lineHeight));
    line-height: var(--lineHeight);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-size: 0.875rem;
    color: var(--genWhiteTypeMid);
    overflow-wrap: break-word;
    overflow: hidden;
}


.abt-stmt-short .abt-stmt-detBdr
{
    width: 100%;
    margin-top: 0.3125rem;
}

.abt-stmt-detBdr .abt-stmt-detBox
{
    width: 100%;
    display: flex;
    justify-content: start;
}

.abt-stmt-detBox .abt-stmt-detBtn
{
    --abtStmtDetBtnClrs: var(--genWhiteTypeMid2);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    outline: none;
    border: none;
    cursor: pointer;
    transition: all 150ms ease-in-out;
}

.abt-stmt-detBtn .abt-stmt-checkBoxCls
{
    -webkit-appearance: none;
    appearance: none;
    color: var(--abtStmtDetBtnClrs);
    outline: none;
    border: none;
    pointer-events: none;
}

.abt-stmt-checkBoxCls::before
{
    content: 'Read More';
    font-size:  0.875rem;
    font-weight: 500;
    transition: all 150ms ease-in-out;
}

.abt-stmt-checkBoxCls:checked:before
{
    content: 'Read Less';
}

.abt-stmt-shortText:has(+ .abt-stmt-detBdr .abt-stmt-checkBoxCls:checked)
{
    max-height: none;
}

.abt-stmt-shortText:has(+ .abt-stmt-detBdr .abt-stmt-checkBoxCls:not(:checked))
{
    -webkit-line-clamp: var(--lineNo);
    line-clamp: var(--lineNo);
}


.abt-det
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.abt-detText
{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.1875rem;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

.abt-detText .abt-detText-major
{
    width: var(--abtCardTextMajorW);
    color: var(--genGreenTypeMid);
    font-size: 0.8125rem;
    font-weight: 500;
}

.abt-detText .abt-detText-minor
{
    width: calc((100% - var(--abtCardTextMajorW)));
    color: var(--genWhiteTypeLight);
    font-size: 0.8125rem;
    gap: 0.25rem 0.1875rem;
}

.abt-detText-link-set
{
    display: flex;
    flex-wrap: wrap;
}

.abt-detText-link-set .abt-detText-link-text
{
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 0.125rem 0.3125rem;
    border-radius: 0.3125rem;
    background-color: var(--genGreyTypeBright);
    transition: all 200ms ease-in-out;
}





/* ============= EPISODE SECTION ============== */

.ep-list-box
{
    width: 100%;
    margin-bottom: 2.5rem;
}

.ep-list-box .basic_slider_title_bdr
{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

.sect-ep .sect-ep-navBox
{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.sect-ep-navBox.hidden
{
    display: none;
}

.sect-ep-navBox .sect-ep-navTop
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.sect-ep-navBox .sect-ep-navBtm
{
    width: 100%;
    display: none;
    flex-direction: row;
    justify-content: end;
    align-items: center;
}

.sect-ep-navTop .sect-ep-navLeft,
.sect-ep-navTop .sect-ep-navRight
{
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.seasons_headerBdr
{
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
}

.seasons_headerBdr .seasons_headerBox
{
    --seasons_headerClrs: var(--genWhiteTypeMid);
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    /* padding: 0.625rem; */
    transition: all 300ms ease-in-out;
    cursor: pointer;
}

.seasons_headerBox .seasons_headerIconBox
{
    width: 1.125rem;
    height: 1.125rem;
    margin-left: 0.625rem;
}

.seasons_headerIconBox .seasons_headerIconSvg
{
    width: 100%;
    height: 100%;
    fill: var(--seasons_headerClrs);
    transition: all 300ms ease-in-out;
}

.seasons_headerBox .seasons_headerText
{
    color: var(--seasons_headerClrs);
    font-size: 0.8125rem;
    transition: all 300ms ease-in-out;
}

.seasons_headerBox:active
{
    --seasons_headerClrs: var(--genGreenTypeLight);
}

.seasons_headerBdr .seasons_selectorBdr
{
    position: absolute;
    top: 100%;
    left: 0;
    width: 30.3125rem;
    height: fit-content;
    max-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--genModalBcg);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: 300ms;
    z-index: -3;
}

.seasons_selectorBdr.active
{
    max-height: 15.625rem;
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

.seasons_selectorBdr .seasons_selectorHeader
{
    width: 100%;
    height: var(--seasons_BdrHeight);
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #141414;
    border-bottom: 0.0625rem solid #444444;
}

.seasons_selectorHeader .seasons_selectorHeaderText
{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 0.9375rem;
    color: var(--genWhiteTypeBright);
    text-align: center;
}

.seasons_selectorHeaderText .large
{
    color: var(--genGreenTypeLight);
    font-size: 1.125rem;
}

.seasons_selectorHeaderText .small
{
    color: var(--genWhiteTypeLight);
    font-size: 1rem;
}

.seasons_selectorHeader .seasons_selectorHeaderIcon
{
    position: relative;
    width: 0.9375rem;
    height: 0.125rem;
    margin-right: 0.625rem;
    border-radius: 0.3125rem;
    background-color: var(--genWhiteTypeLight);
    transform: rotate(45deg);
    cursor: pointer;
}

.seasons_selectorHeaderIcon::after
{
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    width: 0.125rem;
    height: 0.9375rem;
    border-radius: 0.3125rem;
    background-color: var(--genWhiteTypeLight);
    transform: translate(50%, -50%);
}

.seasons_selectorBdr .seasons_selectorBox
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden auto;
}

.seasons_selectorBox .seasons_selector
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: var(--genWhiteTypeDark);
    padding: 0.9375rem;
    -moz-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    user-select: none;
    cursor: pointer;
    transition: 300ms;
}

.seasons_selector .selectorMain
{
    --selectorMainTextNo: 1;
    --selectorMainTextH: 1.4;
    position: relative;
    -webkit-line-clamp: var(--selectorMainTextNo);
    -webkit-box-orient: vertical;
    line-clamp: var(--selectorMainTextNo);
    display: -webkit-box;
    max-height: calc(var(--selectorMainTextNo) * 1em * var(--selectorMainTextH));
    line-height: var(--selectorMainTextH);
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: calc(100% - 5.3125rem);
    font-size: 0.75rem;
    overflow: hidden;
}

.seasons_selector .selectorMinor
{
    font-size: 0.6875rem;
}

.seasons_selector:active
{
    color: var(--genWhiteTypeBright);
    background-color: #242424;
}

.seasons_selector.active
{
    color: var(--genWhiteTypeLight);
}


/* -------- Searching for an episode --------  */
.episode_searchBdr
{
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: row;
}

.episode_searchBdr .episode_searchBox
{
    width: var(--episodesSearchWidth);
    height: var(--episodesSearchHeight);
    border-radius: 0.625rem;
    background-color: var(--genModalBcg);
    transition: all 300ms ease-in-out;
    overflow: hidden;
}

.episode_searchBox .episode_searchFieldClass
{
    width: 100%;
    height: 100%;
    padding: 0rem 0.9375rem;
    outline: none;
    border: none;
    color: var(--genWhiteTypeLight);
    font-size: 0.75rem;
    background-color: #00000000;
}

.episode_searchBdr .episode_searchIcon
{
    position: absolute;
    top: 50%;
    right: 0;
    width: 1rem;
    height: 1rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.episode_searchIcon .episode_searchSvg
{
    width: 100%;
    height: 100%;
    fill: var(--genWhiteTypeLight);
}


/* ----- Episode Sets ----- */
.episode_setBdr
{
    width: -moz-fit-content;
    width: fit-content;
    display: none;
    margin-left: 0.3125rem;
}

.episode_setBdr.active
{
    display: block;
}

.episode_setBdr .episode_setBox
{
    width: var(--episodesSearchWidth);
    height: var(--episodesSearchHeight);
}

.episode_setBox .episode_setBtn
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.625rem;
    outline: none;
    border: none;
    border-radius: 0.625rem;
    background-color: var(--genModalBcg);
    cursor: pointer;
}

.episode_setBtn .episode_setText
{
    --episode_setTextNo: 1;
    --episode_setTextH: 1.4;
    position: relative;
    -webkit-line-clamp: var(--episode_setTextNo);
    -webkit-box-orient: vertical;
    line-clamp:  var(--episode_setTextNo);
    display: -webkit-box;
    max-height: calc(var(--episode_setTextNo) * 1em * var(--episode_setTextH));
    line-height: var(--episode_setTextH);
    color: var(--genWhiteTypeLight);
    font-size: 0.75rem;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    overflow: hidden;
}

.episode_setBtn .episode_setIcon
{
    width: 1rem;
    height: 1rem;
}

.episode_setIcon .episode_setSvg
{
    width: 100%;
    height: 100%;
    fill: var(--genWhiteTypeMid);
}





/* -------------- Episode Lists ------------ */
.show-home-bx
{
    width: 100%;
}

.show-home
{
    display: flex;
    width: 100%;
    min-height: 7.8125rem;
    overflow: hidden;
}

.show-sub
{
    width: 0%;
    height: -moz-fit-content;
    height: fit-content;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    overflow: hidden auto;
    scrollbar-width: none;
}

.show-sub::-webkit-scrollbar
{
    width: 0;
    height: 0;
}

.show-sub.showsub-inatv
{
    filter: brightness(0.0);
}

.show-sub.showsub-atv
{
    width: 100%;
    animation: ep_card_flick 500ms linear 0ms normal;
}

@keyframes ep_card_flick 
{
    from
    {
        filter: brightness(0.0);
    }
    to
    {
        filter: brightness(1.0);
    }
}

.showset
{
    width: 100%;
    height: fit-content;
    max-height: -moz-fit-content;
    max-height: fit-content;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--episodesBoxWidth), 1fr));
    grid-template-rows: auto;
    justify-items: center;
    gap: 0.625rem;
}


.showset .ep_cardBdr
{
    width: 100%;
    display: block;
    transition: all 300ms ease-in-out;
}

.ep_cardBdr .ep_cardBox
{
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 0.9375rem;
    overflow: hidden;
}

.ep_cardBox .ep_cardThumbBdr
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ep_cardThumbBdr .ep_cardThumbBox
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ep_cardThumbBox .ep_cardThumbImg
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 300ms ease-in-out;
}

.ep_cardBox .ep_cardCtntBdr
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.ep_cardCtntBdr .ep_cardCtntBox
{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 0.625rem;
    background: linear-gradient(to top, #000000, #00000000);
    transition: all 300ms ease-in-out;
}

.ep_cardBdr:hover .ep_cardThumbImg
{
    transform: scale(1.15);
}

.ep_cardCtntBox:active
{
    background-color: #00000075;
}

.ep_cardCtntBox .ep_cardCtnt_titleBox
{
    padding: 0.3125rem;
    border-radius: 0.3125rem;
    background-color: #00000099;
}

.ep_cardCtnt_titleBox .ep_cardCtnt_titleText
{
    color: var(--genWhiteTypeLight);
    font-size: 0.875rem;
    font-weight: 500;
}

.ep_cardBox .ep_cardMenuBdr
{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
}

.ep_cardMenuBdr .ep_cardMenuBox
{
    width: 100%;
    height: 100%;
    background: #00000099;
    border-top-left-radius: 0rem;
    border-top-right-radius: 0.9375rem;
    border-bottom-left-radius: 0.9375rem;
    border-bottom-right-radius: 0rem;
}





/* =========== DWLD A SHOW MODAL =========== */

.dwldShowModalBase
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000099;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms ease-in-out;
    z-index: 125;
}

.dwldShowModalBase.active
{
    opacity: 1;
    visibility: visible;
}

.dwldShowModalBase .dwldShowModalBdr
{
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.dwldShowModalBdr .dwldShowModalBcg
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(0.625rem);
    backdrop-filter: blur(0.625rem);
    z-index: 0;
}

.dwldShowModalBdr .dwldShowModalBox
{
    position: relative;
    width: 100%;
    height: 100%;
    height: fit-content;
    max-width: 21.875rem;
    max-height: 100%;
    border-radius: 0.9375rem;
    background-color: var(--genModalBcg);
    overflow: hidden auto;
    transform: translateY(50%);
    transition: all 300ms ease-in-out;
    z-index: 2;
}

.dwldShowModalBase.active .dwldShowModalBox
{
    transform: translateY(0%);
}





/* ----------- Movie Collection ---------- */
.related_shows_slider_base
{
    width: 100%;
    margin-bottom: 2.5rem;
}






/* ------------- More Shows ----------- */
.moreShows_slider_base
{
    width: 100%;
    max-width: var(--genMaxContainerWidth);
    display: none;
    margin: 0 auto;
}

.moreShows_slider_base.has_loaded
{
    display: block;
}





@media(hover: hover)
{
    .quick_atnCtnt:hover
    {
        background-color: #222222;
        border-radius: 0.3125rem;
    }

    .quickAtnModal_btn:hover .quickAtnModal_btnIcon
    {
        fill: var(--genWhiteTypeLight);
    }

    .quickAtnModal_btn:hover .quickAtnModal_btnText
    {
        color: var(--genWhiteTypeLight);
    }

    
    .abt-detText-link-text:hover
    {
        color: var(--genGreenTypeLight2);
    }

    .sect-crsl-bdr:hover .sect-crsl-arr-bdr
    {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    .sect-crsl-card-bdr[data-sect-type="sect-person"]:hover 
    .sect-crsl-img-src
    {
        scale: 1.125;
    }

    .sect-crsl-card-bdr[data-sect-type="sect-videos"]:hover 
    .sect-crsl-icon-box
    {
        scale: 1.5;
    }

    .sect-crsl-card-bdr:hover .sect-crsl-icon-bdr
    {
        opacity: 1;
        visibility: visible;
    }

    .info_more_staff_rslt_card_bdr:hover
    {
        filter: brightness(1.25);
    }

    .info_more_staff_rslt_card_bdr:hover .info_more_staff_rslt_card_imgSrc
    {
        scale: 1.25;
    }

    .seasons_headerBox:hover
    {
        --seasons_headerClrs: var(--genGreenTypeLight);
    }

    .seasons_selector:hover
    {
        color: var(--genWhiteTypeBright);
        background-color: #242424;
    }

    .episodes:hover
    {
        background: #55545480;
    }

    .episodes:hover .episodesText
    {
        display: none;
    }

    .episodes:hover .episodesIcon
    {
        display: flex;
        font-size: 1.5625rem;
    }
}



@media(hover:none)
{
    .sect-crsl-bdr .sect-crsl-arr-bdr
    {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }
}







/* ====== ======== ======= Responsive === =========  == == */


@media only screen and (min-width: 120rem)
{

    .sect-crsl-grid.hrtl
    {
        --sect-crsl-card-dvn: 7;
    }

    .sect-crsl-grid.vrtl
    {
        --sect-crsl-card-dvn: 10;
    }
}


@media only screen and (max-width: 120rem)
{

    .sect-crsl-grid.hrtl
    {
        --sect-crsl-card-dvn: 6;
    }

    .sect-crsl-grid.vrtl
    {
        --sect-crsl-card-dvn: 9;
    }
}

@media only screen and (max-width: 95rem)
{

    .sect-crsl-grid.hrtl
    {
        --sect-crsl-card-dvn: 5;
    }

    .sect-crsl-grid.vrtl
    {
        --sect-crsl-card-dvn: 8;
    }
}

@media only screen and (max-width: 68.75rem)
{

    .sect-crsl-grid.hrtl
    {
        --sect-crsl-card-dvn: 4;
    }

    .sect-crsl-grid.vrtl
    {
        --sect-crsl-card-dvn: 7;
    }
}


@media only screen and (max-width: 55.25rem)
{

    .sect-crsl-grid.hrtl
    {
        --sect-crsl-card-dvn: 3;
    }

    .sect-crsl-grid.vrtl
    {
        --sect-crsl-card-dvn: 6;
    }
    
    .sect-abt-bdr .sect-abt-box
    {
        flex-direction: column;
        gap: 2.1875rem;
    }

    .sect-abt-box .sect-abt-card
    {
        width: 100%;
    }

    .sect-abt-card.sect-abt-description
    {
        margin-left: 0;
    }

    .sect-abt-header .sect-abt-headerText
    {
        font-size: 1rem;
    }

    .sect-abt-card .abt-stmt-long
    {
        display: none;
    }

    .sect-abt-card .abt-stmt-short
    {
        display: flex;
    }
}



@media only screen and (max-width: 48rem)
{

    .bcg_img_bdr .bcg_img_gradient
    {
        background-image: -o-radial-gradient(100% 80% at 50% 0%, #00000000 0%, #000000 100%);
        background-image: -moz-radial-gradient(100% 80% at 50% 0%, #00000000 0%, #000000 100%);
        background-image: -webkit-radial-gradient(100% 80% at 50% 0%, #00000000 0%, #000000 100%);
        background-image: radial-gradient(100% 80% at 50% 0%, #00000000 0%, #000000 100%);
    }
    
    .info_pg_box
    {
        flex-direction: column;
        gap: 0.625rem;
    }

    .title_ImgBdr
    {
        display: none;
    }

    .title_ctntBdr
    {
        width: 100%;
        align-items: center;
        padding: 0;
        gap: 0.3125rem;
    }

    .title_ctntBdr #show_Header_Name
    {
        text-align: center;
        font-size: 1.5625rem;
    }

    .quick_det_text.tagline
    {
        text-align: center;
    }

    .info_atn_bdr
    {
        flex-direction: column;
        align-items: center;
        margin-top: 0.625rem;
        gap: 0.9375rem;
    }

    .quick_atnBcg
    {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .quick_atnBcg::before,
    .quick_atnBcg::after
    {
        content: '';
        position: absolute;
        top: 0;
        width: var(--genBorderSpacing);
        height: 100%;
        pointer-events: none;
        z-index: 5;
    }

    .quick_atnBcg::before
    {
        left: 0;
        background-image: linear-gradient(to right, #000000, #00000000);
    }

    .quick_atnBcg::after
    {
        right: 0;
        background-image: linear-gradient(to left, #000000, #00000000);
    }

    .quick_atnBcg .quick_atnBdr
    {
        height: 100%;
        display: flex;
        flex-direction: row;
        overflow: auto hidden;
        scrollbar-width: none;
    }

    .quick_atnBdr::-webkit-scrollbar
    {
        display: none;
    }

    .quickAtnModalBdr
    {
        left: 50%;
        transform: translate(-50%, 50%);
    }

    .quickAtnModalBdr.active
    {
        transform: translate(-50%, 100%);
    }

    .sect-headText
    {
        font-size: 1rem;
    }

    .sect-crsl-grid.vrtl
    {
        --sect-crsl-card-dvn: 5;
    }

    .info_more_staff_box .info_more_staff_ctnt_bdr
    {
        width: 95%;
        height: 95%;
    }
    
    .seasons_headerBdr .seasons_selectorBdr
    {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        max-height: none;
        transform: translateY(50%);
    }

    .seasons_selectorBdr.active
    {
        height: 100vh;
        max-height: none;
        opacity: 1;
        visibility: visible;
        transform: translateY(0%);
        z-index: 101;
    }

    .seasons_selectorBdr .seasons_selectorHeader
    {
        display: flex;
    }

    .seasons_selectorBdr .seasons_selectorBox
    {
        height: calc(100% - var(--seasons_BdrHeight));
    }

    .sect-ep-navRight .episode_searchBdr,
    .sect-ep-navRight .episode_setBdr
    {
        display: none;
    }

    .sect-ep-navBox .sect-ep-navBtm
    {
        display: flex;
    }

    .show-home
    {
        justify-content: center;
    }

    .show-sub.showsub-atv
    {
        width: 100%;  
    }

}


@media only screen and (max-width: 37.5rem)
{

    .sect-crsl-grid.hrtl
    {
        --sect-crsl-card-dvn: 2;
    }

    .sect-crsl-grid.vrtl
    {
        --sect-crsl-card-dvn: 4;
    }
}


@media only screen and (max-width: 30.3125rem)
{
    html:root
    {
        --episodesBoxWidth: 10rem;
    }

    .sect-crsl-grid.vrtl
    {
        --sect-crsl-card-dvn: 3;
    }

    .ep_cardCtnt_titleBox .ep_cardCtnt_titleText
    {
        font-size: 0.75rem;
    }

}

@media only screen and (max-width: 21.875rem)
{
    html:root
    {
        --episodesSearchWidth: 7.8125rem;
    }

    .quickAtnModalBdr
    {
        left: 0;
        width: 100%;
        border-radius: 0rem;
        transform: translate(0%, 50%);
    }

    .quickAtnModalBdr.active
    {
        transform: translate(0%, 100%);
    }

    .sect-crsl-grid.hrtl
    {
        --sect-crsl-card-dvn: 1;
    }

    .sect-crsl-grid.vrtl
    {
        --sect-crsl-card-dvn: 2;
    }
}



@media only screen and (max-width: 15.625rem)
{

    .sect-crsl-grid.vrtl
    {
        --sect-crsl-card-dvn: 1;
    }
}