/* ============================================================
   Site palette — single source of truth (Phase 3 rework).
   ============================================================ */
:root {
    --section-bg: #ededed;   /* light content sections (was #c1c1c1) */
    --accent: #407e8f;       /* brand teal */
    --accent-light: #58afc7;
    --ink: #575757;          /* muted text on light sections */
    --on-dark: #cacaca;      /* muted light text on dark areas */
}

/**
 * CSS Style Organization Criteria:
 *
 * This stylesheet is organized based on the following logical criteria to enhance readability and maintainability:
 *
 * 1. Global Styles: Styles that apply to the entire document or common elements (e.g., body, h2) are placed first.
 * 2. ID Selectors: Styles targeting specific IDs follow, providing easy identification of unique element styling.
 * 3. Class Selectors: Styles applying to classes are grouped together, with similar or related classes logically ordered.
 * 4. Keyframes and Animations: Definitions for keyframes and animations are placed after regular styles but before media queries.
 * 5. Media Queries: All media query related styles are grouped at the end of the document, facilitating responsive design adjustments.
 *
 */


@font-face {
    font-family: 'Logga';
    src: url('../fonts/Logga.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Ysabeau Office';
    src: url('../fonts/YsabeauOffice-Regular.woff2') format('woff2');
    font-display: swap;
}

/* Mobile navbar dropdown color fix */
a:not([href]):not([tabindex]),
a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
    color: #fff
}

/* Showreel facade: poster shown until the YouTube iframe is lazy-loaded */
/* Index-only YouTube facade poster (scoped via data-yt so it never leaks onto
   showreel.html, which reuses the #showreel-container id for its Vimeo embed). */
#showreel-container[data-yt] {
    background: #000 center/cover no-repeat url('../../media/background/showreel-poster.webp');
}
/* Before unmute the iframe ignores pointer events, so the big Unmute button
   reliably receives taps (esp. on mobile) instead of the video swallowing them.
   After unmute the container gets .unmuted and the video becomes interactive. */
#showreel-container iframe { border: 0; pointer-events: none; }
#showreel-container.unmuted iframe { pointer-events: auto; }
/* The video-hero sections (index + showreel) have no background of their own,
   so their padding would show the #ededed body as a gray seam above the next
   section. Paint them black to match the video's letterboxing. */
.page-header.pt-0 {
    background-color: #000;
    border-radius: 0;   /* keep the rounded corners on image headers, not the video */
}

body {
    font-family: 'Ysabeau Office', sans-serif;
    font-size: 18px;
    background-color: var(--section-bg);
}

/* Smooth in-page navigation, and offset anchor targets so the fixed header
   doesn't cover the top of the section you jump to. */
html {
    scroll-behavior: smooth;
}
section[id] {
    scroll-margin-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Utility classes — migrated from repeated inline styles (Phase 3 cleanup). */
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.section-light { background-color: var(--section-bg); }
.bg-black { background: #000; }
.link-contact { color: #65c6e0; }
.text-on-dark { color: var(--on-dark); }
.text-ink { color: var(--ink); }

/* Fixed-width, centered Font Awesome icons for consistent alignment. */
.fa {
    width: 24px;
    text-align: center;
}

/* Keep the navbar opaque black. Its inline black background became a class in
   the inline-style migration and lost to the theme's transparent header rule
   (esp. on showreel); this restores the opaque bar on both pages. */
.header .header-inner.bg-black {
    background: #000;
}

/* Showreel shows logos on black, so dark marks can vanish. A stacked white
   drop-shadow draws a stroke around them — replaces the hand-made ' -' white
   variants (now in media/logo/archived/). */
.home-black .brand-logo img {
    filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
            drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

/* Volume slider is cramped and low-value on phones — hide it there. */
@media (max-width: 767px) {
    .header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .vel-wrap {
        display: none;
    }
}

h2 {
    font-family: 'Logga', sans-serif;
}

strong {
    font-weight: 700;
}

#palette {
    color: #407e8f;
    color: #2e5a66;
    color: #509db3;
    color: #1c363d;
    color: #65c6e0;
    color: #777;
    color: #c1c1c1;
}

#header-menu-magic-line > li a {
    font-family: 'Ysabeau Office', sans-serif;
}

#magic-line {
    background: #509db3 !important;
}

#logo-custom {
    width: 240px;
}

#logo-carousel {
    background: var(--section-bg);
}

#gallery, #event-about {
    background: var(--section-bg);
}

#mobile-nav-wrap #mobile-logo img {
    width: 120px;
}

#nav-toggle .toggle-inner > span:nth-child(2), #nav-toggle .toggle-inner > span:nth-child(3) {
    background-color: #407e8f !important;
}

/* iOS/mobile Safari only fires click on plain <div>s that have cursor:pointer,
   which is why the hamburger toggle worked in devtools but not on phones.
   Also enlarge the tap target from the cramped ~30x20px default. */
#nav-toggle,
#nav-toggle .toggle-inner {
    cursor: pointer;
}
#nav-toggle {
    padding: 12px 8px;
}

.header-magic-line-inner {
    border-bottom: 1px solid #2e5a66 !important;
}

.sp-container h2 {
    margin-top: 0 !important;
}

.sp-container h2.frame-1,
.sp-container h2.frame-2,
.sp-container h2.frame-3,
.sp-container h2.frame-4 {
    font-size: 80px;
    font-family: 'Logga', sans-serif;
    font-weight: 900;
    color: #59b4cd !important;
    text-shadow: 2px 2px 0.5rem #000 !important;
}

.tim-isotope.tim-isotope-2 .tim-album-item:before {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#407e8f));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #407e8f 100%);
}

.off-opener > i {
    font-size: 26px;
}

.offset-menu-two .footer-contact .contact-details i,
.offset-menu-two .offset-social-two ul li a,
.offset-menu-two .offset-social-two ul li,
.offset-menu-two .offset-social-two > a,
.offset-menu-two .offset-social-two > a:after,
.offset-menu-two .offset-social-two ul li a:hover {
    color: #407e8f;
}

.offset-menu-two .offset-social-two ul li {
    border-color: #407e8f;
}

.offset-menu-two .offset-social-two > a {
    border-bottom: 1px solid #407e8f;
}

.offset-menu-two .offset-social-two > a:after {
    background: #407e8f;
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-controls .jp-play i,
.header_player.style-fullwidth .jp-audio #playlist-toggle i {
    color: #fff;
}

.header_player.style-fullwidth .jp-audio .jp-volume-bar .jp-volume-bar-value {
    background: var(--section-bg);
}

.section-title.style-four h2,
.section-title.style-five h2,
.latest-album-btn .custom_button,
.latest-album-left .albun-details p span,
.three-d-album .more-album a i,
.section-title h2:before,
.section-title h2:after,
.artist-single:before,
.artist-single .artist-single-content ul,
.section-title.style-five h2::after, .event-content h2 span {
    color: #407e8f;
}

.custom_button {
    border: 2px solid #407e8f !important;
    width: 58px;
    height: 58px;
    display: block;
    text-align: center;
    line-height: 60px;
    border-radius: 3px;
    position: relative;
    background: transparent;
}

.latest-album-btn .custom_button i:after {
    color: #407e8f;
    font-size: 27px !important;
    content: "\f04b";
    font: normal normal normal 14px/1 FontAwesome;
}

.section-title h2:before, .section-title h2:after {
    background: #407e8f;
}

.artist-single:before {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#407e8f));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #407e8f 100%);
}

.section-title.style-four h2:after,
.section-title.style-four h2:before {
    background: #407e8f;
    border: 2px solid #407e8f;
}

.section-title.style-five h2::after {
    background: #59b4cd;
}

.about-img-wrapper {
    margin-top: -70px;
    transition: all 0.5s ease-in-out;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.about-img-wrapper:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.about-img-caption {
    transition: all 0.5s ease-in-out;
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    padding: 20px;
    color: #fff;
    font-family: 'Ysabeau Office', sans-serif;
    font-size: 18px;
    display: none;
}

.about-img {
    border-radius: 25px;
}

.about-img-wrapper:hover .about-img-caption {
    display: block;
}

.artist-single {
    text-align: center;
    margin-bottom: 15px;
}

#header-menu-magic-line > li.menu-item-has-children .sub-menu li a:hover,
#header-menu-magic-line > li.menu-item-has-children .sub-menu li a.current_page {
    color: #65c6e0;
}

.player-main, .player-main-shade {
    animation: spin 2.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.record-key {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: rotate(0); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(0); }
}

/* Preloader ping-pong bar, themed teal. app.css (app_v2.css) squashes these
   pseudo-elements to height:2px, hides the :before track, and force-pauses the
   animation — undo all three here so the bar shows and actually moves. */
.loader-bar-ping-pong:before,
.loader-bar-ping-pong:after {
    height: 6px;
    display: block;
    border-radius: 6px;
    top: calc(50% - 3px);
}

.loader-bar-ping-pong:after {
    background: #a5ecff;
    animation-play-state: running !important;
}

.loader-bar-ping-pong:before {
    background: #407e8f;
}

.single-show-archive::before {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#407e8f));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #407e8f 100%);
}

.swiper-container-android .swiper-slide, .swiper-wrapper {
    width: 300px;
    height: 300px;
    display: flex;
    align-items: baseline !important;
}

.artist-single > img {
    width: 300px;
    height: 300px;
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-progress .jp-seek-bar .jp-play-bar {
    background: #407e8f;
}

.header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress .jp-seek-bar .jp-play-bar {
    background: #407e8f;
}

.header_player.style-fullwidth #nowPlaying {
    color: #c1c1c1;
    padding: 0;
}

/* Now-playing: truncate long track/album names, full text on hover (title attr) */
#nowPlaying .track-name,
#nowPlaying .album-name {
    display: block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* New (wavesurfer) playlist links — override default hyperlink coloring.
   Fuller playlist restyle is deferred to the Phase 3 CSS pass. */
.header_player .jp-playlist ul li a {
    color: #c1c1c1;
    text-decoration: none;
}
.header_player .jp-playlist ul li.jp-playlist-current a {
    color: #ffffff;
}
/* Stack track title and collection on their own rows; collection truncates
   so long strings don't wrap or push the row height around (esp. on mobile). */
.header_player .jp-playlist ul li a .track-title {
    display: block;
}
.header_player .jp-playlist ul li a .track-collection {
    display: block;
    opacity: 0.6;
    font-size: 0.85em;
    min-height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Subtle divider + consistent teal hover across both player layouts
   (overrides the theme's #333 divider and its aggressive #e43a90 hover). */
.header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li,
.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li {
    border-bottom-color: rgba(193, 193, 193, 0.15);
}
.header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li:hover {
    background: #407e8f;
}

.tim-logo-carousel .brand-logo img {
    max-height: 120px;
}

.tim-logo-carousel .credit-image img {
    max-height: 280px;
    opacity: 0.4;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.tim-logo-carousel .credit-image img:hover {
    opacity: 1;
}

.footer-three-bottom .footer-social-three ul li a:hover {
    color: #407e8f;
}

.footer-three-bottom .footer-social-three ul li a {
    font-size: 20px;
}

.latest-album-left .albun-details p {
    font-family: 'Ysabeau Office', sans-serif;
    font-size: 18px;
    color: var(--on-dark);   /* Latest Release sits on a dark bg image */
}

/* Keywords "… more/less" expand toggle (keywords are truncated ~64 chars to
   avoid overflow on 4:3 / 16:10 displays). */
.album-keywords .kw-toggle {
    background: none;
    border: 0;
    padding: 0 0 0 4px;
    font: inherit;
    color: var(--accent-light);
    cursor: pointer;
    text-decoration: underline;
}
.album-keywords .kw-toggle:hover {
    color: var(--accent);
}

.section-title p {
    font-family: 'Ysabeau Office', sans-serif;
    font-size: 18px;
    color: var(--ink);
}

.section-title.style-five p {
    width: 100%;
}

.single-3d img {
    width: 100%;
}

.event-content p {
    color: gray;
    padding: 5px;
}

.event-content h2 {
    color: black;
}

.artist-lineup {
    border-bottom: 5px solid #1c1c1c;
}

.sp-container h2.frame-2 {
    top: -90px;
}

/* Player bar = one flex row (was float-based and wrapped at mid widths), with
   the wavesurfer waveform vertically centered. Dropped the translateY(-15px)
   (which decentered it) and the now-inert PNG-waveform background props. */
.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
    padding: 11px 0 13px 110px;
}
.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .current-tracks,
.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-duration,
.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .vel-wrap,
.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface #playlist-toggle {
    flex: 0 0 auto;
    margin-top: 0;
    margin-left: 0;
}
.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-progress {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    height: 60px;
    box-sizing: border-box;
    padding: 6px 0;          /* vertically centers the 48px waveform in the 60px bar */
    margin-top: 0;
    transform: none;
    background-color: transparent;
}

.header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress {
    max-width: 75%;
    height: 60px;
    box-sizing: border-box;
    padding: 6px 0;
    margin-top: 0;
    transform: none;
    background-color: transparent;
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-progress .jp-seek-bar .jp-play-bar {
    background: transparent;
    backdrop-filter: brightness(2.5);
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-progress .jp-seek-bar .jp-play-bar:hover {
    backdrop-filter: brightness(3);
}

.header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress .jp-seek-bar .jp-play-bar {
    background: transparent;
    backdrop-filter: brightness(2.5);
}

.header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress .jp-seek-bar .jp-play-bar:hover {
    backdrop-filter: brightness(3);
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li.jp-playlist-current {
    background: #58afc7;
}

.header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li.jp-playlist-current {
    background: rgba(64, 126, 143, 0.55) !important;
}

.header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li:hover {
    background: #407e8f;
}

.album-info-wrapper:before {
    background: var(--section-bg);
}

.album-info-wrapper.black:before {
    background: #000;
}

.single-album-info .single-album-details .single-album-price a {
    background: #407e8f;
}

.single-album-info .single-album-details .single-album-price .left span {
    color: #407e8f;
}

.single-album-info .single-album-details .details-top:after {
    background: #407e8f;
}

.single-album-info .single-album-details .single-album-price a:hover {
    background: #59b4cd;
}

.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface .jp-controls .jp-play i {
    color: #000;
    margin-left: 5px;
}

.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist {
    background-color: transparent;
}

.single-album-image {
    height: 100%;
}

.single-album-image > img {
    height: 100%;
    width: 100%;
    aspect-ratio: 1/1;
    box-shadow: -2px 2px 10px #3b3b3b;
}

.single-album-info .padding-remove {
    padding: 0;
}

.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface {
    background-color: #000000a8;
}

.player-container-fullwidth {
    -webkit-box-shadow: 0px 17px 15.5px 5.5px rgba(0, 0, 0, 0.32);
    box-shadow: 0px 17px 15.5px 5.5px rgba(0, 0, 0, 0.32);
    background: #181818;
    margin: 0;
}

.player-container-normal {
    -webkit-box-shadow: 0px 17px 15.5px 5.5px rgba(0, 0, 0, 0.32);
    box-shadow: 0px 17px 15.5px 5.5px rgba(0, 0, 0, 0.32);
    background: #181818;
    margin: 0 6.5%;
}

.backtotop {
    bottom: 100px;
}

section.header_player.style-fullwidth.fixed {
    position: fixed;
    bottom: 0;
    height: auto;
    padding: 0;
    padding-top: 7px;
    background: transparent;
}

.page-header {
    border-radius: 0 0 3em 3em;
    padding-top: 130px;
}

.current-tracks {
    float: none;
    width: 100%;
}

.current-tracks:after {
    content: '';
    display: none;
}

.single-album-player .header_player {
    background: #000;
    position: relative;
}

#album1_player::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url('../../media/albumart/unreleased/1.webp');
    background-size: cover;
    backdrop-filter: blur(1px);
    filter: blur(10px) brightness(0.35);
}

#album2_player::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url('../../media/albumart/unreleased/2.webp');
    background-size: cover;
    backdrop-filter: blur(1px);
    filter: blur(10px) brightness(0.35);
}

#album3_player::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url('../../media/albumart/unreleased/3.webp');
    background-size: cover;
    backdrop-filter: blur(1px);
    filter: blur(10px) brightness(0.35);
}

.single-album-player .header_player #nowPlaying {
    padding: 30px 0 10px 38px;
}

.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface {
    border: none;
}

/* Flex-center the single-album-player row (showreel + album template) so the
   wavesurfer waveform aligns with the controls instead of dropping below the
   baseline. Playlist wraps full-width below. */
.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding-top: 22px;
    padding-bottom: 24px;
}
.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface .jp-controls,
.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface {
    flex: 0 0 auto;
    padding-top: 0;
    margin: 0px;
}
.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface .jp-duration {
    margin-right: 15px;
}
.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress {
    flex: 1 1 0;
    min-width: 0;
    transform: none;
}
.single-album-player .header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist {
    flex: 0 0 100%;
    position: static;
    bottom: auto;
    margin-top: 18px;
}

.single-album-info .single-album-details .details-top {
    border-bottom: none;
}

.single-album-info .single-album-details .details-top:after {
    background: none;
}

.single-album-info .single-album-details ul {
    padding-top: 0;
    padding-bottom: 0;
}

.single-album-info .single-album-details .single-album-description h6, .single-album-info .single-album-details h6 {
    color: #c1c1c1;
}

.row.single-album-info {
    margin-top: 20px;
    background: black;
}

.single-album-info .single-album-details {
    background: black;
    padding: 40px 90px 45px 60px;
}

.single-album-info .single-album-details ul li span {
    float: none;
    color: var(--on-dark);
}

/* Muted body text on dark sections (album details, footer) — lightened so it
   reads on black (was #585757 / #6d6d6d, too dark). */
.single-album-info .single-album-details p,
.single-album-info .single-album-details .single-album-description p,
.album-page-desc,
.footer-three-bottom .footer-three-left p {
    color: var(--on-dark);
}

.single-album-info .single-album-details ul li {
    color: #959595;
    font-weight: 700;
}

.latest-album-left .albun-details {
    padding-top: 30px;
}

.loader.is-active {
    background-color: #181818;
}

.three-d-album .more-album a {
    font-size: 24px;
}

.header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li > div > a {
    font-size: 22px;
}

#credits-shows {
    margin-bottom: 60px;
}

body.home-black {
    background: #000;
}

#footer-3.footer-black {
    background: #000;
    background-image: none;
}

#footer-3.footer-black.less-padding {
    padding: 60px 0 180px;
}

#showreel-container {
    position: relative;
    width: 100%;
    height: 100vh;
}
#showreel-container #unmute {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    background: var(--accent);
    color: #fff;
    font-family: 'Ysabeau Office', sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: background 0.2s ease, transform 0.2s ease;
}
#showreel-container #unmute i {
    font-size: 22px;
}
#showreel-container #unmute:hover,
#showreel-container #unmute:focus-visible {
    background: var(--accent-light);
    transform: translate(-50%, -50%) scale(1.05);
}

@media screen and (max-width: 575px) {
    .sp-container h2.frame-1,
    .sp-container h2.frame-2,
    .sp-container h2.frame-3,
    .sp-container h2.frame-4 {
        font-size: 40px;
        line-height: 1.25em;
    }

    .sp-container h2.frame-2 {
        top: 0;
    }

    .banner-five .baneer-five-content {
        margin-top: -35px;
    }

    .about-img-wrapper {
        margin-top: 20px;
    }

    .footer-social-three {
        top: -25px;
        position: relative;
    }

    .header_player.style-fullwidth .jp-audio .jp-type-playlist .jp-interface .jp-progress {
        max-width: 75%;
    }

    .header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress {
        max-width: 65%;
    }

    .header_player .jp-audio .jp-type-playlist .jp-interface .jp-progress {
        width: 40%;
    }

    #credits-shows {
        margin-bottom: 0;
    }

    .tim-logo-carousel .credit-image img {
        opacity: 1;
    }
    .tim-logo-carousel .brand-logo img {
        opacity: 1;
    }
    .section-title.style-five p {
        font-size: 18px;
    }
    .header_player .jp-audio .jp-type-playlist .jp-interface .jp-playlist ul li > div > a {
        font-size: 22px;
    }
    #showreel-container {
        height: 30vh !important;
    }
}

@media screen and (max-width: 992px) {
    #showreel-container {
        height: 60vh;
    }
    #showreel-container #unmute {
        padding: 13px 24px;
        font-size: 17px;
    }
}