div[style*="clear: both;"] { grid-column: 1 / -1; margin-top: 50px; width: 100%; display: flex; justify-content: flex-end; } .custom_film_pagination { display: flex; justify-content: center; width: 100%; margin: 20px 0; } .custom_film_pagination span { display: block; } .episodes_guide { display: block; clear: both; padding: 15px; margin: 0 auto; } .previous i, .previous i:hover, .next i, .next i:hover { color: inherit!important; opacity: .5!important; } .previous, .next { flex: 1; padding: 10px 20px; font-weight: 700; max-width: 300px; } .previous { text-align: right; border-right: 1px solid color-mix(in srgb, currentColor 30%, transparent 20%); } .next { text-align: left; } .previous a, .next a { transition: all 0.4s ease-out; } #box-content { margin-top: 3%; } :has(> #box-content) { border-top: none !important; padding-top: 2.5% !important; } :has(> #box-content) > hr, :has(> #box-content) > .divider, :has(> #box-content) > span { display: none !important; } #box-column { display: grid; grid-template-columns: 22.33% 1fr; gap: 40px; width: 100%; align-items: start; margin-top: 15px; } .catlinks .fa-solid { font: var(--fa-font-solid); margin-right: 1px!important; opacity: .3; font-size: .65em; vertical-align: middle; } .catlinks a { font-family: 'Tahoma', sans-serif; font-weight: 400 !important; font-size: .70em !important; text-transform: uppercase !important; transition: all 0.4s ease-out; } .catlinks { text-align: center; } .film-cats { display: inline-block; margin: 0 auto; vertical-align: middle; } .film-cats span { margin-right: 5px; } .catlinks .film-tags { display: block; text-align: left; } .box-right { display: block; } .box-left { display: block; width: 100%; } .box-right h3 { margin-top: 5px; } .box-right blockquote { font-style: italic; background: rgba(128, 128, 128, .1); } .box-right blockquote:before, .box-right blockquote:after { content: ''; } .box-left .film_cover { width: 100% !important; display: block !important; width: 100%!important; text-align: center!important; margin: 0 auto 8px!important; } .box-left .image img, .box-left .image img:hover { display: inline-block!important; max-width: 100%!important; height: auto!important; border: 0 !important; background: none !important; filter: grayscale(0%) opacity(1) brightness(1)!important; box-shadow: none!important; } .box-left .image img.no-cover { width: 100%; background-size: cover; background-position: center; transition: opacity 0.3s ease; } .box-left .film-links a { display: block; width: 100%; } .film-links p { margin: 2px 0 0 0 !important; } .film-links a { background-color: color-mix(in srgb, currentColor 10%, transparent); display: block !important; padding: 8px !important; margin: 0 !important; transition: all 0.4s ease-out; } .film-links a:hover { margin-left: 7px !important; } .box-left .tags { width: 100% !important; margin: 5% auto 0; border: 0px; padding: 8px; text-align: left; } .tags .fa-solid { font: var(--fa-font-solid); margin-right: 2px; font-size: .65em; vertical-align: middle; opacity: .3; } .tags a { font-family: 'Tahoma', sans-serif; font-weight: 400 !important; font-size: .70em !important; text-transform: uppercase !important; transition: all 0.4s ease-out; } .box-right-info .span, .box-right-images .span, .box-right-content .span { display: flex; align-items: center; position: relative; text-transform: uppercase; font-family: 'Tahoma', sans-serif; font-size: .85em; margin: 4% auto .5%; font-weight: bold; } .box-right-info .span span, .box-right-images .span span, .box-right-content .span span { background: transparent; padding: 0 10px; opacity: .6; } .box-right-info .span:before, .box-right-images .span:before, .box-right-images .span:after, .box-right-content .span:after { content: ""; flex: 1; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent 15%); } .box-right-info .span { justify-content: flex-end; } .box-right-info .span span { padding-right: 0; } .box-right-images .span { justify-content: center; } .box-right-content .span { justify-content: flex-start; } .box-right-content .span span { padding-left: 0; } .box-right-images { margin: 8px auto; text-align: center; width: 100%; } .box-right-images img { width: 6.6vw; height: auto; border: 0 !important; background: none !important; filter: grayscale(0%) opacity(1) brightness(1)!important; box-shadow: none!important; } .box-right-images .span { text-align: center !important; } .box-right-content .span { text-align: left !important; } #box-column .fa-solid, #box-column .fa-brands, #box-column .fa-regular, #box-column .fas, #box-column .far { display: inline-block!important; } .film-credit { text-align: center; font-size: 11px; margin: 15px auto; font-family: 'Arial', sans-serif; display: block; clear: both; filter: opacity(80%); } .film-credit span { background: rgba(128, 128, 128, 0.3); padding: 3px; } #film-list { width: 85%; margin: 0 auto; padding: 10px 15px; } .film-list li { list-style: none; padding: 15px; border-bottom: 1px solid color-mix(in srgb, currentColor 5%, transparent 15%); overflow: hidden; } .film-list li .film-year { float: left; display: inline-block; padding-top: 5px; } .film-list li .film-role { float: right; display: inline-block; padding-top: 5px; } .film-list span { opacity: .6; margin-right: 3px; } .film-year { margin-right: 10px; } .film-role { text-align: right; font-style: italic; } .film-title { font-size: 1.5em; font-weight: 700; text-align: center; } .film-cat-list { display: block; width: 90%; margin: .5% auto; } .film-cat-list li { display: block; clear: both; padding: 15px 3px; list-style: none; border-bottom: 1px solid #eee; } .film-cat-list li a::before { content: '\2192'; font-size: .75em; vertical-align: center !important; opacity: .4; margin-right: 4px; } .film-list-photos { display: grid !important; grid-template-columns: repeat(5, 18.33%) !important; gap: 15px !important; width: 100% !important; margin: 30px auto 0 !important; max-width: 93.33% !important; padding-top: 2.5%!important; } .film-photos { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .film-photos center { display: block !important; width: 100% !important; word-wrap: break-word !important; font-size: 0.9em !important; line-height: 1.2 !important; margin-top: 8px !important; } .film-photos-cover a img, .film-photos-cover a img:hover { width: 100% !important; height: auto !important; aspect-ratio: 4 / 6; object-fit: cover !important; border: 0px !important; background: none !important; } .film-photos span { font-size: .80em; text-transform: uppercase; text-decoration: underline; } hr { background-color: color-mix(in srgb, currentColor 30%, transparent 20%); color: color-mix(in srgb, currentColor 30%, transparent 20%); border: 0; width: 92%; height: 1px; opacity: .15; } .episodes-guide { display: block; clear: both; margin: 0 0 5%; padding: 10px; } @media (max-width : 1366px), (max-width : 1200px) { .box-right { width: 73% !important; float: right !important; } .box-left .image { max-width: 10vw; } .box-right img { width: 8vw; } .box-left .catlinks { width: 20%; } } @media only screen and (max-width: 1024px), only screen and (max-device-width: 966px) { #box-column { display: block !important; text-align: center !important; width: 100% !important; } .box-right { width: 70% !important; text-align: left; } .box-left { width: 28% !important; text-align: left; } .box-left .image { max-width: 100% !important; width: 100% !important; text-align: center; } .box-left .film-links { max-width: 100% !important; width: 100% !important; } .box-left .image img { width: 10vw; margin: 0 auto; } .box-left .film-links a { font-size: 0.95em !important; } .film-photos { flex: 0 0 23% !important; } } @media (max-width: 480px) { .custom_film_pagination { flex-direction: column; align-items: center; gap: 10px; } .previous, .next { max-width: 100%; text-align: center; border-right: none; } .previous { border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent 20%); padding-bottom: 15px; } }