/* VIdeo Player */
/*
.VideoWrap {
    display: inline-block;
    width: 100%;
    max-width: 999px;
}

.VideoPlayer {
    width: 100%;
    padding: ;
    margin: 0 auto;
    display: inline-block;
}

.VideoPlayerSideAd {
    max-width: 244px;
    padding: 20px 0 20px 0;
    padding: 0;
    width: 100%;
    margin: 0 auto;
    display: inline-block;
}

.VideoPlayerSideAd img {
    min-width: 100%;
}
    */

    .video-container {
        aspect-ratio: 16 / 9;
        width: 100%;
        max-width: 100%;
      }

      .video-js {
        width: 100%;
        height: 100%;
        object-fit: cover; /* optional: fill/crop video area nicely */
      }



      .video_6-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 56.5%;
    }


     video::-webkit-media-text-track-display {
            display: none !important;
        }
/*
.VideoBannerWrap.NoVideoBanner .VideoPlayer {
    float: left;
    display: block;
    aspect-ratio: 4 / 3;
    width: 100%;
    min-width: 100%;
    height: 100%;
    max-width: 1560px;

}
*/
.VideoBannerWrap.NoVideoBanner .video-btm-banner, .VideoBannerWrap.NoVideoBanner .VideoBanner {
    display: none;
    visibility: hidden;
}


.VideoBannerWrap.RightVideoBanner .video-btm-banner {
    display: none;
    visibility: hidden;
}


.VideoInfoWrap {
    position: relative;
    display: inline-block;
    text-align: left;
    width: 100%;
}

.VideoInfoWrap>.info {
    clear: both;
    width: 100%;
    display: block;
}

.info { position: relative; }

.info>.name {
    display: inline-block;
    margin: 0 20px 0px 0px;
    font-size: 2.05em;
    font-weight: 700;
    color: #000;
    text-shadow: 0px 0px 0 #94978e;
    text-transform: uppercase;
    width:99%;
    font-family:  ui-monospace, Menlo,Monaco, "Cascadia Mono",  "Segoe UI Mono",  "Roboto Mono",  "Oxygen Mono",  "Ubuntu Mono",  "Source Code Pro",  "Fira Mono",  "Droid Sans Mono",  "Consolas",  "Courier New",  monospace;
    text-transform: uppercase;
}

.info>.date {
    display: inline-block;
    text-align: right;
    margin: 0 10px 20px 0;
    font-size: 1.25em;
    font-weight: 700;
    color: #000;
    text-shadow: 0px 0px 0 #94978e;
    text-transform: uppercase;
    width: 100%;
    position: absolute;
    right: 0px;
    top: 10px;
}


.VideoDescription {
    clear: both;
    color: #000000;
    padding: 0 20px 20px 0;
    ;
    line-height: 1.5em;
    font-size:1.05rem;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    text-shadow: -1px -1px 0 #cccccc;
}



.video-gallery {
    margin: 10px 0 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.video-gallery a {
    text-decoration: none;
    text-align: left;
}

.video-gallery img {
    max-width: 23%;
    margin: 10px;
}

/* Remove right margin from every 4th image */
.video-gallery img:nth-of-type(4n) {
    margin-right: 0;
}

@media only screen and (max-width: 1111px) {

.video-gallery img {
        max-width: 23%;
        margin: 5px;
    }

}


@media only screen and (max-width: 960px) {
    .VideoDescription {
        font-size: .85rem;
        padding: 0 20px 0px 0;
    }
    .video-gallery {
        margin: 10px 0 10px 0;
        display: flex    ;
        flex-wrap: wrap;
        gap: 0.15rem;
        justify-content: space-between;
    }

}



@media only screen and (max-width: 670px) {

    .video-gallery img {
        max-width:100%;
        width: 100%;
        height: auto;
        margin: 2px;
    }

}


/*


.video-gallery {
    margin-top: 10px 0 25px 0;
    display: flex;
    flex-wrap: wrap;
    flex-wrap: wrap;
        gap: 0.5rem;
    justify-content: center;

}

.video-gallery a {
text-decoration: none;
    text-align: left;
}

.video-gallery img {
    max-width: 23%;
    margin: 5px;
}
*/





.VideoWrap nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-transform: uppercase;
    justify-content: center;
}

.VideoWrap nav ul li a {
    padding: 20px;
    margin: 0 0 20px 0;
    text-decoration: underline;
}

/* video side banner */




/* new player */

.media-wrapper {
    display: block;
}

.players,
.video-js {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}


.member .VideoWrap,
.member .VideoPlayer {
    max-width: 100%;
    min-width: 100%;
    margin: 0;
    padding: 0;
}




/* resizing and nav */

@media screen and (max-width: 1000px) {
    body>section {
        padding: 20px 10px;
    }



    .VideoWrap>.info>.name {
        width: 45%;
    }

    .VideoWrap>.info>.date {
        width: 45%;
    }


    .member .VideoPlayer {
        max-width: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

    .member .VideoBanner {
        display: none;
        visibility: hidden;
        ;
    }


}

@media screen and (max-width: 700px) {

    /* main {
        float: none;
        width: 100%;
    }
*/
    aside {
        float: none;
        width: 100%;
    }

    .episode-item {
        padding: 0;
        margin: 10px;
        max-width: calc(100% - 20px);
        height: auto;
        width: 100%;
        display: inline-block;
    }

    .episode-item>.media>.thumbnail img {
        width: calc(100% - 20px);
        height: auto;
        object-fit: cover;
        padding: 0;
        margin: 10px 0 10px 10px;
        aspect-ratio: auto 4 / 3;
        cursor: pointer;
        box-sizing: border-box;
        border: 1px solid #000000;
    }

    /*
    nav ul li a,
    nav ul li a:link,
    nav ul li a:visited,
    nav ul li a:focus {
        padding: 5px;
        font-size: 1em;
    }
        */
}

/* tagging */

.VideoTagsWrap { position: relative; margin: 10px 0;}

.tag {
    display: inline-flex !important;
    align-items: center;

    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: white;
    text-decoration: none;
    max-width: 200px;
    line-height: 1;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
}

.tag-text {
    background: url('/img/butt-ultrawide.svg') no-repeat left top;
    background-size: auto 100%;
    padding: 0.60rem 0rem 0.4rem .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: #ffffff;
    flex: 1 1 auto;
    min-height: 33px;
    max-height: 33px;
}

.content .tag a .tag-text {
    color: white;
    text-decoration: none;
}

.tag::after {
    content: '';
    display: inline-block;
    width: 41px;
    height: 33px;
    /* ✅ This is enough */
    background: url('/img/nose.svg') no-repeat left center;
    background-size: contain;
    pointer-events: none;
    flex: 0 0 auto;
}



/* ||||||||||||||||| Model Names ||||||||||||||| */

.ModelNamesWrap { position: relative; margin:5px 0;}
.ModelNames { list-style:none; margin: 0; padding:0; }
.ModelNames li { display: inline-block; margin: 0 5px 0 0; padding: 0; }
.ModelNames li a { text-decoration: none; color: #000; }
.ModelNames li a:hover { text-decoration: underline; }

.ModelNames li:after { content: ", "; }
.ModelNames li:last-child:after { content: ""; }


/* This is how we deal with 4:3 video and  16:9 video together - with poster images also being used index page
1. create all poster images at 16:9 (that give us consistant layout on the index pages & will make the "video player" size consistent on video pages whether it is 16:9 or 4:3)
2. force the 16x9 layout on video pages for poster images using padding-top trick
3. 4:3 video (automatic letterboxing from video js - we will get bars on sides of video but entire video will be shown - no part of video will be cut off
4. this also keeps the "video size" consistant on all video pages so as they go from page to page they won't have to adjust the browser window to accommodate  different size videos. Keeps all elements on pages at same place as well.
*/

/* Force all video containers to 16:9 regardless of actual video aspect ratio */
.video-js.vjs-fluid:not(.vjs-audio-only-mode) {
    padding-top: 56.25% !important; /* 16:9 = 9/16 = 0.5625 = 56.25% */
}

/* Alternative: Target specific videos if you know their IDs */
.video-js[id*="video_"].vjs-fluid:not(.vjs-audio-only-mode) {
    padding-top: 56.25% !important;
}

/* Ensure video content fits properly within forced container */
.video-js .vjs-tech {
    object-fit: contain; /* Letterbox 4:3 videos in 16:9 container */
    width: 100%;
    height: 100%;
}

/* Optional: Style the letterbox bars if you want custom color */
.video-js {
    background-color: #000; /* Black letterbox bars */
}