/*-------------------------------------------------
 =  Table of Css
 1.Isotope
 1.KENBURNER RESPONSIVE BASIC STYLES OF HTML DOCUMENT
 3.Header
 4.General
 5.content - home sections
 6.Portfolio grid pages
 7.Portfolio masonry pages
 8.Portfolio black pages
 9.Portfolio alternative pages
 10.Portfolio vertical style
 11.blog one col, standard
 12.blog grid
 13.blog masonry
 14.blog medium
 15.blog alternative
 16.blog timeline
 17.sidebar
 18.single post
 19.single project pages
 20.error page
 21.comming soone page
 22.faq's page
 23.typography page
 24.Tabs & accordion page
 25.footer
 26.Responsive part
-------------------------------------------------*/
/*-------------------------------------------------------*/
/* 1. Isotope filtering
/*-------------------------------------------------------*/
.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.header_bottom .navbar-nav .dropdown-menu li:first-child a {
    padding: 10px 21px !important;
}
.isotope,
.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.col-md-20:nth-child(5n + 1) {
    clear: left;
}
.pull-right {
    float: right !important;
}
.pull-left {
    float: left !important;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
/*-----------------------------------------------------------------------------
KENBURNER RESPONSIVE BASIC STYLES OF HTML DOCUMENT
Screen Stylesheet
version:    1.0
date:       07/27/11
author:     themepunch
email:      support@themepunch.com
website:    http://www.themepunch.com
-----------------------------------------------------------------------------*/
.boxedcontainer {
    max-width: 1170px;
    margin: auto;
    padding: 0px 30px;
}
/*********************************************
    -   SETTINGS FOR BANNER CONTAINERS  -
**********************************************/
.tp-banner-container {
    width: 100%;
    position: relative;
    padding: 0;
}
.tp-banner {
    width: 100%;
    position: relative;
}
.tp-banner-fullscreen-container {
    width: 100%;
    position: relative;
    padding: 0;
}
ul#film-list {
    margin: 0;
    margin-left: 0;
    padding-left: 0px;
    border: 1px solid #d1cbcb;
    border-radius: 10px;
    overflow: hidden;
}
ul#film-list li {
    list-style: none !important;
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #d1cbcb;
}
ul#film-list li a {
    display: inline-block;
    width: 100%;
    padding: 10px;
    text-decoration: none;
    cursor: pointer;
}
/*-------------------------------------------------*/
/* =  Header
/*-------------------------------------------------*/
.navbar-default {
    background: #ffffff !important;
    border: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar-header {
    float: none;
    text-align: center;
}
.navbar-header .navbar-brand {
    display: inline-block;
    float: none;
    height: auto;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #222222;
    font-size: 30px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    margin: 0 0 30px;
    text-transform: uppercase;
    margin: 0;
    color: #222222 !important;
    padding: 25px 15px 35px;
    letter-spacing: 2.5px;
}
.navbar-header .navbar-brand span {
    color: #fde3a7;
}
.navbar-nav {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.navbar-nav > li > a {
    color: #3e3c3a;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    padding: 45px 15px;
}
/* .navbar-nav > li > a:hover,
.navbar-nav > li > a.active {
    color: #fde3a7 !important;
} */
.navbar-nav li.drop {
    position: relative;
}
.navbar-nav li.megadrop {
    position: inherit !important;
}
.navbar-nav > li.search .form-search {
    margin: 0;
    padding: 35px 0;
    width: 150px;
    padding-right: 15px;
}
.navbar-nav > li.search .form-search input[type="search"] {
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 0 10px;
    margin: 0;
    color: #999999;
    padding: 8px 15px;
    border: none;
    width: 100%;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid #cccccc;
    outline: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    background: transparent;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    font-size: 11px;
}
.navbar-nav > li.search .form-search button {
    background: #ffffff;
    border: none;
    float: right;
    margin: 0;
    margin-top: -30px;
    margin-right: 10px;
    position: relative;
    z-index: 2;
}
.navbar-nav > li.search .form-search button i {
    color: #999999;
    font-size: 16px;
}
header.active .navbar-default {
    background: rgba(255, 255, 255, 0.95);
}
header.active .navbar-brand {
    color: #222222 !important;
    padding: 15px 15px;
}
header.active .navbar-nav > li > a {
    color: #999999 !important;
    padding: 20px 15px;
}
header.active .navbar-nav > li > a:hover,
header.active .navbar-nav > li > a.active {
    color: #fde3a7 !important;
}
header.active .navbar-nav > li.search .form-search {
    padding: 10px 0;
}
header.active .megadrop-down {
    box-shadow: 0 0 3px #dddddd;
    -webkit-box-shadow: 0 0 3px #dddddd;
    -moz-box-shadow: 0 0 3px #dddddd;
    -o-box-shadow: 0 0 3px #dddddd;
}
.navbar-collapse {
    position: relative;
}
.megadrop-down {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    background: #ffffff;
    padding: 0 20px;
    box-shadow: 0 0 2px #eeeeee;
    -webkit-box-shadow: 0 0 2px #eeeeee;
    -moz-box-shadow: 0 0 2px #eeeeee;
    -o-box-shadow: 0 0 2px #eeeeee;
}
.megadrop-down .dropdown {
    text-align: left;
}
.megadrop-down .dropdown ul {
    margin: 0;
    padding: 0;
}
.megadrop-down .dropdown ul li {
    list-style: none;
}
.megadrop-down .dropdown ul li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    display: block;
    color: #999999;
    font-size: 12px;
    padding: 15px 16px;
    text-transform: uppercase;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    margin: 0;
    border-bottom: 1px solid #f3f3f3;
}
.megadrop-down .dropdown ul li a:hover {
    color: #fde3a7;
    background: #f8f8f8;
}
.megadrop-down .dropdown ul li a.comming {
    color: #aaaaaa;
    opacity: 0.4;
}
.megadrop-down .dropdown ul li:last-child a {
    border-bottom: none;
}
.megadrop-down .dropdown ul.last-child li {
    border-right: none;
}
.megadrop-down .dropdown h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    font-size: 12px;
    margin: 0;
    padding: 17px 16px 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #fde3a7;
    text-transform: uppercase;
    color: #333333;
}
li.megadrop:hover .megadrop-down {
    visibility: visible;
    opacity: 1;
}
/*-------------------------------------------------*/
/* =  General
/*-------------------------------------------------*/
.container {
    max-width: 990px;
}
#container {
    padding-top: 192px;
}
p {
    font-size: 13px;
    color: #999999;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 20px;
    margin: 0 0 10px;
}
.vertical-header #content {
    margin-left: 220px;
    padding-top: 0;
    background: #f8f8f8;
}
/*-------------------------------------------------*/
/* =  content - home sections
/*-------------------------------------------------*/
.title-section {
    margin-bottom: 65px;
    text-align: center;
}
.title-section h1 {
    color: #222222;
    font-size: 30px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.title-section h1 span {
    color: #fde3a7;
}
.title-section > span {
    width: 130px;
    display: inline-block;
    height: 1px;
    border-top: 1px dotted #dddddd;
    position: relative;
    margin: 0 0 25px;
}
.title-section > span:before {
    content: "";
    position: absolute;
    width: 47px;
    height: 7px;
    left: 50%;
    margin-left: -24px;
    top: -4px;
    background: url("../images/pin2.png") center center no-repeat;
}
.title-section.white h1 {
    color: #ffffff;
}
.title-section.white > span:before {
    background: url("../images/pin.png") center center no-repeat;
}
button.mfp-close,
button.mfp-arrow {
    outline: none;
}
a.button-one {
    color: #ffffff;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    border: 2px solid #ffffff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    padding: 8px 48px;
}
a.button-one:hover {
    color: #fde3a7;
    border: 2px solid #fde3a7;
}
a.button-two {
    color: #fde3a7;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    border: 2px solid #fde3a7;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    padding: 8px 48px;
}
a.button-two:hover {
    color: #ffffff;
    background: #fde3a7;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    background: #fde3a7;
    border: 1px solid #fde3a7;
}
#top-section {
    position: relative;
}
#top-section .owl-arrows {
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
    margin-top: -24px;
    z-index: 9;
    pointer-events: none;
}
#top-section .owl-arrows a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    width: 33px;
    height: 48px;
    pointer-events: auto;
}
#top-section .owl-arrows a.prev-link {
    float: left;
    margin-left: 20px;
    background: url("../images/prev.png") 0 0 no-repeat;
}
#top-section .owl-arrows a.next-link {
    float: right;
    margin-right: 20px;
    background: url("../images/next.png") 0 0 no-repeat;
}
#top-section .owl-arrows a:hover {
    background-position: 0 -48px;
}
#top-section .news-post {
    position: relative;
    padding-right: 1px;
    margin: 0;
    text-align: center;
}
#top-section .news-post .slider-full-link {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: block;
    cursor: pointer;
}
#top-section .news-post img {
    width: 100%;
    height: 460px;
    object-fit: cover;
}
#top-section .news-post .hover-news {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background: rgba(51, 51, 51, 0.5); */
}
#top-section .news-post .hover-news .inner-hover {
    position: absolute;
    z-index: 2;
    width: 340px;
    padding: 20px;
    top: 50%;
    right: 52%;
    transform: translateY(-50%);
    text-align: left;
    background: rgba(51, 51, 51, 0.3);
}
strong.byTextLighter {
    color: #fef1d3;
    opacity: 50%;
}
#top-section .news-post .hover-news .inner-hover span {
    display: inline-block;
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.6;
}
#top-section .news-post .hover-news .inner-hover h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 30px;
    color: #ffffff;
    letter-spacing: 2px;
    padding: 10px 0;
    border-top: 1px dotted rgba(255, 255, 255, 0.5);
    border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
    margin: 5px 0;
    line-height: 30px;
}
#top-section .news-post .hover-news .inner-hover h2 a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #ffffff;
}
#top-section .news-post .hover-news .inner-hover h2 a:hover {
    color: #fde3a7;
}
#top-section .news-post .hover-news .inner-hover p {
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    opacity: 0.6;
}
/* #top-section .news-post .hover-news:before {
    content: '';
    position: absolute;
    top: 80px;
    left: 80px;
    bottom: 80px;
    right: 80px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
} */
#top-section .news-post:hover .hover-news {
    /* background: rgba(51, 51, 51, 0.8); */
}
/* #top-section .news-post:hover .hover-news:before {
    border: 1px solid transparent;
    background: rgba(51, 51, 51, 0.5);
} */
#top-section .owl-theme .owl-controls {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 30px;
    pointer-events: none;
}
#top-section .owl-theme .owl-controls .owl-page,
#top-section .owl-theme .owl-controls .owl-buttons div {
    pointer-events: auto;
}
.news-section .news-title {
    padding: 42px 0 38px;
    background: #fce2aa;
}
/* Login, register and forgot-password pages only: their banner keeps the
   shared .news-title layout but uses a neutral grey background instead of
   the site's usual cream, without affecting the other pages (film profile
   create/edit, edit critic profile, verify/reset/confirm) that reuse the
   same .news-section.breadcrumbs-1 markup. */
.news-section .news-title.auth-banner-bg {
    background: #d6d6d6;
}
.news-section .news-title h1 {
    color: #222222;
    font-size: 30px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
    float: left;
}
.news-section .news-title .owl-arrows {
    float: right;
    text-align: right;
}
.news-section .news-title .owl-arrows a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    width: 36px;
    height: 36px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #222222;
    line-height: 32px;
    text-align: center;
    color: #222222;
    font-size: 18px;
    margin-left: 12px;
}
.news-section .news-title .owl-arrows a:hover {
    background: #ffffff;
    border: 2px solid #ffffff;
}
.news-section .news-post {
    position: relative;
    padding-right: 1px;
    margin: 0;
    text-align: left;
}
.news-section .news-post img {
    width: 100%;
}
.news-section .news-post img.img-second-banner {
    height: 271px;
    object-fit: cover;
}
/* Critic's Choices "no movie stills" placeholder only: object-fit:cover crops
   this specific image's title text off the sides on narrower cards. Showing
   it uncropped (object-fit:contain) keeps the full graphic - including its
   own text - visible at every card width, without affecting real film
   stills, which keep the cover crop above. */
.news-section .news-post img.img-second-banner.film-placeholder-fit {
    background-color: #000000;
    height: 271px;
    object-fit: cover;
    /* padding-bottom: 160px; */
}
.news-section .news-post .hover-news {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(34, 34, 34, 0.7);
}
.news-section .news-post .hover-news.second-hover {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    /* Radial gradient starting as a circle from the bottom-left */
    background: radial-gradient(
        circle at left bottom,
        rgba(34, 34, 34, 0.8) 0%,
        rgba(34, 34, 34, 0.4) 25%,
        rgba(34, 34, 34, 0) 55%
    );
}
.news-section .news-post .hover-news .inner-hover {
    position: absolute;
    z-index: 2;
    width: 100%;
    bottom: 25px;
    left: 0;
    padding: 0 30px;
}
.news-section .news-post .hover-news .inner-hover span {
    display: inline-block;
    margin: 0 0 14px;
    color: #fde3a7;
    border: 1px solid #fde3a7;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    padding: 8px 13px;
    opacity: 0.6;
}
.news-section .news-post .hover-news .inner-hover h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Noto Sans SC bold", sans-serif;
    margin: 0 0 15px;
    text-transform: uppercase;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0;
    margin: 0 0 3px;
    line-height: 20px;
}
.news-section .news-post .hover-news .inner-hover h2 a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #ffffff;
    font-family: "Noto Sans SC bold", sans-serif !important;
}
.news-section .news-post .hover-news .inner-hover h2 a:hover {
    color: #fde3a7;
}
.news-section .news-post .hover-news .inner-hover p {
    margin: 0;
    color: #fde3a7;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.news-section .news-post .hover-news .inner-hover p.choice-rate {
    letter-spacing: 0;
    margin: 6px 0 5px;
}
.news-section .news-post .hover-news .inner-hover p.choice-rate i {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    margin-right: 3px;
}
.news-section
    .news-post
    .hover-news
    .inner-hover
    p.choice-rate
    i[data-rated="rated"] {
    color: #ffba00;
}
.news-section .owl-theme .owl-controls {
    display: none !important;
}
.gallery-section {
    padding: 55px 0 70px;
    position: relative;
    background: url("../upload/banners/1.jpg") center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.gallery-section .container {
    position: relative;
    z-index: 2;
}
.gallery-section .gallery-box .gallery-post {
    position: relative;
    margin-bottom: 30px;
}
.gallery-section .gallery-box .gallery-post img {
    width: 100%;
}
.gallery-section .gallery-box .gallery-post .hover-gal {
    position: absolute;
    background: rgba(34, 34, 34, 0.2);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.gallery-section .gallery-box .gallery-post .hover-gal .inner-hover {
    position: absolute;
    top: 50%;
    margin-top: -25px;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 0 30px;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.gallery-section .gallery-box .gallery-post .hover-gal .inner-hover span {
    display: inline-block;
    margin: 0;
    color: #cccccc;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 20px;
}
.gallery-section .gallery-box .gallery-post .hover-gal .inner-hover h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 20px;
    margin: 0;
}
.gallery-section .gallery-box .gallery-post .hover-gal .inner-hover h2 a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #fde3a7;
}
.gallery-section .gallery-box .gallery-post .hover-gal .inner-hover h2 a:hover {
    opacity: 0.7;
}
.gallery-section .gallery-box .gallery-post .hover-gal:before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 1px solid transparent;
    background: transparent;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.gallery-section .gallery-box .gallery-post:hover .hover-gal .inner-hover {
    opacity: 1;
}
.gallery-section .gallery-box .gallery-post:hover .hover-gal:before {
    border: 1px solid #fde3a7;
    background: rgba(34, 34, 34, 0.5);
}
.gallery-section:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../images/pattern.png");
    opacity: 0.9;
}
/* Store Home Section (homepage, directly above Subscribe) */
.store-home-banner {
    background-color: #edf2f5;
}
.store-home-banner-img {
    display: block;
    width: 100%;
    height: auto;
}
.store-home-slider {
    background-color: #fce2aa;
    position: relative;
    height: 118px;
    margin: 40px 0 0px 0;
}
.store-home-slider .container {
    position: relative;
    height: 100%;
}
.store-home-slider-img {
    display: block;
    position: absolute;
    left: 15px;
    top: -31px;
    height: 149px;
    width: auto;
}
.store-home-slider-title {
    position: absolute;
    left: 150px;
    top: 50%;
    transform: translateY(-50%);
}
.store-home-slider-title .chines {
    display: block;
    font-size: 30px;
    color: #1a1a1a;
}
.store-home-slider-title .eng_wrd {
    display: block;
    margin-top: 0px;
    color: #555555;
    font-size: 13px;
    letter-spacing: 1px;
    font-family: "Lato-Bold", sans-serif;
    text-transform: uppercase;
}
/* End Store Home Section */
.subscribe-section {
    padding: 40px 0 30px;
    text-align: center;
    background: url("../images/pattern.png");
}
.subscribe-section span {
    display: inline-block;
    margin: 0 0 0px;
    color: #fce2aa;
    font-size: 20px;
    font-family: "Lato", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    line-height: 40px;
}
.subscribe-section input[type="email"] {
    outline: none;
    font-size: 13px;
    color: #999999;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 20px;
    margin: 0 0 10px;
    margin: 0 15px 5px 0;
    padding: 11px 10px;
    border: 1px solid #999999;
    background: transparent;
    width: 300px;
    max-width: 100%;
}
.subscribe-section input[type="submit"] {
    color: #333333;
    font-size: 12px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.7px;
    padding: 12px 36px;
    border: 1px solid transparent;
    background: #fce2aa;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.subscribe-section input[type="submit"]:hover {
    opacity: 0.7;
}
.subscribe-input-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px 5px 0;
}
.subscribe-input-wrap input[type="email"] {
    margin: 0 15px 0 0;
    padding-right: 44px;
    vertical-align: middle;
}
.subscribe-recaptcha-icon {
    position: absolute;
    top: 50%;
    right: 27px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    pointer-events: none;
    opacity: 0.9;
}
.subscribe-section input[type="submit"] {
    vertical-align: middle;
}
.newsletter-message {
    min-height: 18px;
    margin-top: 0px;
    color: #fce2aa;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    text-transform: none;
}
.newsletter-message.is-error {
    color: #ffb3b3;
}
/* Mobile subscribe popup trigger/close: hidden on desktop, shown below
   768px (see @media (max-width: 767px) further below). The wrappers use
   display: contents on desktop so the popup markup has zero effect on the
   existing inline layout above this breakpoint. */
.subscribe-mobile-trigger,
.subscribe-popup-close {
    display: none;
}
/* Tag-qualified so its specificity (0,1,1) matches — and, coming later in
   the file, wins over — the base ".subscribe-section span { display:
   inline-block }" rule above; a plain ".subscribe-popup-label" (0,1,0)
   would lose to it and show the duplicate label on desktop. */
span.subscribe-popup-label {
    display: none;
}
.subscribe-popup,
.subscribe-popup-inner {
    display: contents;
}
.banner-marketing-section {
    padding: 40px 0;
    text-align: center;
}
.banner-marketing-section a {
    display: inline-block;
}
.banner-marketing-section a img {
    max-width: 100%;
}
.main-block-section .block-box h1 {
    color: #222222;
    font-size: 30px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 35px;
    font-size: 18px;
}
.main-block-section .block-box .block-part {
    margin-bottom: 35px;
}
.main-block-section .block-box .block-part .blog-post {
    margin-bottom: 30px;
}
.main-block-section .block-box .block-part .blog-post.js-latest-review-card {
    cursor: pointer;
}
.main-block-section .block-box .block-part .blog-post .blog-gal {
    position: relative;
}
.main-block-section .block-box .block-part .blog-post .blog-gal img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    object-position: center;
}
.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-gal
    img.single-review-img {
    height: 170px;
    object-fit: cover;
    object-position: center;
}
.main-block-section .block-box .block-part .blog-post .blog-gal span.date {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #222222;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    padding: 8px 6px 8px 20px;
    background: #fde3a7;
    letter-spacing: 1.5px;
}
.main-block-section .block-box .block-part .blog-post .blog-content {
    padding: 16px 20px;
    border: 1px solid #e4e4e4;
    border-top: none;
}
.main-block-section .block-box .block-part .blog-post .blog-content ul {
    margin: 0;
    padding: 0;
}
.main-block-section .block-box .block-part .blog-post .blog-content ul li {
    display: inline-block;
    color: #ccc;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-right: 2px;
    margin-bottom: 6px;
}
.main-block-section .block-box .block-part .blog-post .blog-content ul li a,
.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-content
    ul
    li
    .news-author-name {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #aaaaaa;
}
.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-content
    ul
    li
    a:hover {
    color: #fde3a7;
}
.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-content
    ul
    li:before {
    content: "/";
    color: #aaaaaa;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    margin-right: 5px;
}
.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-content
    ul
    li:first-child:before {
    display: none;
    margin-right: 0;
}
.main-block-section .block-box .block-part .blog-post .blog-content h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Noto Sans SC bold", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    text-transform: uppercase;
    line-height: 20px;
    letter-spacing: 0px;
    margin-bottom: 12px;
}
.main-block-section .block-box .block-part .blog-post .blog-content h2 a {
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #222222;
    display: block;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.main-block-section .block-box .block-part .blog-post .blog-content h2 a:hover {
    color: #fde3a7;
}
.main-block-section .block-box .block-part .blog-post .blog-content > a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #aaaaaa;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
    margin-top: 10px;
    height: 15px;
}
.main-block-section .block-box .block-part .blog-post .blog-content > a:hover {
    color: #222222;
}
.main-block-section .block-box .block-part .blog-post .blog-content p {
    margin-bottom: 0px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 60px;
    color: #666666;
}
.main-block-section .block-box .block-part .blog-post p.single-review-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 60px;
    margin-bottom: 0;
    color: #666666;
}
.home-reviews-row {
    display: flex;
    flex-wrap: wrap;
}
.home-reviews-row:before,
.home-reviews-row:after {
    display: none;
}
.home-reviews-row > [class*="col-md-"] {
    display: flex;
}
.home-reviews-row .blog-post {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
}
.home-reviews-row .blog-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
.main-block-section
    .block-box
    .block-part
    .home-reviews-row
    .blog-content
    > a.home-review-continue {
    pointer-events: none;
    visibility: hidden;
}
.main-block-section
    .block-box
    .block-part
    .home-reviews-row
    .blog-content
    > a.home-review-continue.is-visible {
    pointer-events: auto;
    visibility: visible;
}
.main-block-section .block-box .block-part .blog-post .blog-content p.rate {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dotted #dddddd;
    margin-top: -10px;
}
p.rate.review-rating-only,
p.choice-rate.review-rating-only {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-content.critic-week-review-content {
    padding-bottom: 26px;
}
.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-content.critic-week-review-content
    p.critic-week-review-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: auto;
    max-height: 60px;
    margin-bottom: 0;
}
.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-content.critic-week-review-content
    > a.critic-week-review-read-more {
    display: none;
    margin: 10px 0 0;
}
.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-content.critic-week-review-content
    > a.critic-week-review-read-more.is-visible {
    display: inline-block;
}
.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-content.critic-week-review-content--rating-only
    p.rate {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.main-block-section .block-box .block-part .blog-post .blog-content p.rate i {
    color: #e4e4e4;
    font-size: 11px;
    margin-right: 4px;
}
.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-content
    p.rate
    i[data-rated="rated"] {
    color: #ffba00;
}
.main-block-section .block-box .block-part .blog-without-photos .blog-post {
    margin-bottom: 10px;
    border: 1px solid #e4e4e4;
}
/* .main-block-section .block-box .block-part .blog-without-photos .blog-post .blog-gal span.date {
    position: relative;
} */
.main-block-section
    .block-box
    .block-part
    .blog-without-photos
    .blog-post
    .blog-content {
    border: none;
    padding: 16px 20px;
}
/*-------------------------------------------------*/
/* =  sidebar
/*-------------------------------------------------*/
.sidebar {
    margin-bottom: 40px;
}
.sidebar .widget {
    margin-bottom: 36px;
}
.sidebar .widget h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Noto Sans SC bold", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    margin-bottom: 32px;
    text-transform: uppercase;
    letter-spacing: 0;
}
.sidebar .widget ul.category-list {
    margin: 0;
    padding: 0;
}
.sidebar .widget ul.category-list li {
    list-style: none;
    margin-bottom: 1px;
}
.sidebar .widget ul.category-list li a,
.sidebar .widget ul.category-list li .latest-data-static {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #222222;
    font-size: 12px;
    font-family: "Lato", sans-serif;
    /* font-weight: 900; */
    padding: 7px 18px;
    background: #fde3a7;
    border: 1px solid #fde3a7;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sidebar .widget ul.category-list li a span,
.sidebar .widget ul.category-list li .latest-data-static span {
    float: right;
    color: #877756;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.sidebar .widget ul.category-list li a .chines,
.sidebar .widget ul.category-list li .latest-data-static .chines {
    float: none;
    color: #333333;
}
.sidebar .widget ul.category-list li a:hover .chines {
    color: #333333;
}
.sidebar .widget ul.category-list li a:hover {
    background: #ffffff;
}
/* LATEST DATA sidebar widget only: its Chinese row labels (影人/影評人/影評/
   影片/電視) use a dedicated font, without touching the shared
   .m-y-imp.Microsoft-YaHei-Regular class used across the rest of the site. */
.m-y-imp.Microsoft-YaHei-Regular.latest-data-cn {
    font-family: "Noto Sans SC bold", sans-serif;
}
.sidebar .widget ul.category-list li a:hover span {
    color: #fde3a7;
}
.sidebar .widget ul.autors-list {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.sidebar .widget ul.autors-list li {
    list-style: none;
    float: left;
    margin-right: 4px;
    margin-bottom: 5px;
}
.sidebar .widget ul.autors-list li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    max-width: 50px;
}
.sidebar .widget ul.autors-list li a img {
    width: 100%;
}

/* Moved off the NEW MEMBERS <img> tag, which used to carry these as inline
   styles and so could not be overridden per breakpoint. */
.sidebar .widget ul.autors-list.new-members-list {
    display: grid;
    grid-template-columns: repeat(4, 50px);
    gap: 5px 4px;
}
.sidebar .widget ul.autors-list.new-members-list li {
    float: none;
    margin: 0;
}
.sidebar .widget ul.autors-list.new-members-list li a img {
    border-radius: 50%;
    height: 50px;
    object-fit: cover;
    width: 50px;
}
.sidebar .widget ul.autors-list li a:hover {
    opacity: 0.7;
}
.sidebar .widget ul.latest-films-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
    overflow: visible;
    width: 100%;
}
.sidebar .widget ul.latest-films-list li {
    float: none;
    margin: 0;
}
.sidebar .widget ul.latest-films-list li a {
    display: block;
    max-width: none;
    width: 100%;
    aspect-ratio: 2 / 3;
    height: auto;
}
.sidebar .widget ul.latest-films-list li a img.latest-film-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.sidebar .widget ul.latest-films-list .latest-films-empty {
    grid-column: 1 / -1;
    color: #777777;
    font-size: 13px;
    line-height: 1.4;
}
.sidebar .widget .text-box {
    padding: 15px 17px;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    margin-bottom: 5px;
}
.sidebar .widget .text-box p {
    margin-bottom: 0px;
    font-style: italic;
    color: #666666;
}
.sidebar .widget .text-box h3 {
    color: #aaaaaa;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 0;
    line-height: 20px;
}
.sidebar .widget .text-box:hover {
    border: 1px solid #fde3a7;
}
.sidebar .widget ul.tags-list {
    margin: 0;
    padding: 0;
}
.sidebar .widget ul.tags-list li {
    display: inline-block;
    margin-bottom: 3px;
}
.sidebar .widget ul.tags-list li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #999999;
    font-size: 13px;
    font-family: "Lato", sans-serif;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #f0f0f0;
}
.sidebar .widget ul.tags-list li a:hover {
    color: #ffffff;
    background: #222222;
    border: 1px solid #222222;
}
.sidebar .tab-posts-box {
    background: #ffffff;
    border: 1px solid #f0f0f0;
}
.sidebar .tab-posts-box ul.nav-tabs {
    text-align: center;
    border: none;
}
.sidebar .tab-posts-box ul.nav-tabs li {
    float: left;
    width: 33.33%;
    border: none;
}
.sidebar .tab-posts-box ul.nav-tabs li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    display: block;
    padding: 8px 3px;
    background: transparent;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
    color: #999999;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    border: none;
    margin: 0;
}
.sidebar .tab-posts-box ul.nav-tabs li a:hover {
    border: none;
    color: #fde3a7;
}
.sidebar .tab-posts-box ul.nav-tabs li.active a {
    border: none;
    background: #fde3a7;
    color: #222222;
}
.sidebar .tab-posts-box .tab-pane {
    padding: 18px 0 0;
}
.sidebar .tab-posts-box .tab-pane ul.top-post-list {
    margin: 0;
    padding: 0;
}
.sidebar .tab-posts-box .tab-pane ul.top-post-list li {
    list-style: none;
    padding: 0 18px 18px 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.sidebar .tab-posts-box .tab-pane ul.top-post-list li img {
    float: left;
    max-width: 50px;
}
.sidebar .tab-posts-box .tab-pane ul.top-post-list li .top-post-content {
    margin-left: 7px;
}
.sidebar .tab-posts-box .tab-pane ul.top-post-list li .top-post-content span {
    display: block;
    margin: 5px 0 0px;
    color: #aaaaaa;
    font-size: 11px;
    line-height: 11px;
    font-family: "Lato-Regular";
    text-transform: uppercase;
    font-weight: 900;
}
.sidebar .tab-posts-box .tab-pane ul.top-post-list li .top-post-content h2 {
    font-size: 15px;
    font-family: "Lato-Regular";
    margin: 0 0 15px;
    color: #222222;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 14px;
    margin: 0;
}
.sidebar .tab-posts-box .tab-pane ul.top-post-list li .top-post-content h2 a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #222222;
}
.sidebar
    .tab-posts-box
    .tab-pane
    ul.top-post-list
    li
    .top-post-content
    h2
    a:hover {
    color: #fde3a7;
}
/* Film profile sidebar: ranked movies use their natural poster
   shape instead of the generic circular thumbnail used by other tab widgets. */
.sidebar
    .tab-posts-box
    .tab-pane
    ul.most-reviewed-poster-list
    li.most-reviewed-poster-item {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: visible;
}
.sidebar
    .tab-posts-box
    .tab-pane
    ul.most-reviewed-poster-list
    li
    .most-reviewed-poster-link {
    display: block;
    flex: 0 0 64px;
    width: 64px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.sidebar
    .tab-posts-box
    .tab-pane
    ul.most-reviewed-poster-list
    li
    .most-reviewed-poster-link
    img {
    float: none;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.sidebar
    .tab-posts-box
    .tab-pane
    ul.most-reviewed-poster-list
    li
    .top-post-content {
    min-width: 0;
    margin-left: 0;
    padding-top: 0;
}
.sidebar
    .tab-posts-box
    .tab-pane
    ul.most-reviewed-poster-list
    li
    .top-post-content
    .most-reviewed-title-en {
    display: block;
    color: #676767;
    font-family: "Lato-Regular";
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    text-decoration: none;
    text-transform: uppercase;
}
.sidebar
    .tab-posts-box
    .tab-pane
    ul.most-reviewed-poster-list
    li
    .top-post-content
    .most-reviewed-title-en:hover {
    color: #676767;
}
/*-------------------------------------------------*/
/* =  single post
/*-------------------------------------------------*/
.blog-post.single-post .post-gal {
    position: relative;
}
.blog-post.single-post .post-gal span.date {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #222222;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    padding: 8px 6px 8px 20px;
    background: #fde3a7;
    letter-spacing: 1.5px;
}
.blog-post.single-post h1 {
    color: #222222;
    font-size: 30px;
    font-family: "Noto Serif SC", serif;
    font-weight: 900;
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 26px;
}
.blog-post.single-post h1 .review-film-title-link,
.blog-post.single-post h1 .review-film-title-link:hover,
.blog-post.single-post h1 .review-film-title-link:focus {
    color: inherit;
    text-decoration: none;
}
.blog-post.single-post p {
    margin-bottom: 30px !important;
    color: #666666;
}
.blog-post.single-post ul.post-tags {
    margin: 0;
    padding: 0;
    margin-top: 20px;
}
.blog-post.single-post ul.post-tags li {
    display: inline-block;
    color: #666666;
    font-size: 13px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-right: 2px;
    margin-bottom: 6px;
}
.blog-post.single-post ul.post-tags li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #aaaaaa;
}
.blog-post.single-post ul.post-tags li a:hover {
    color: #fde3a7;
}
.blog-post.single-post ul.post-tags li:before {
    content: "/";
    color: #aaaaaa;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    margin-right: 5px;
}
.blog-post.single-post ul.post-tags li:first-child:before {
    display: none;
    margin-right: 0;
}
.blog-post.single-post blockquote {
    background: #f8f8f8;
    border-left: 2px solid #fde3a7;
    padding: 22px 26px 22px 48px;
    margin-bottom: 30px !important;
}
.blog-post.single-post blockquote p {
    margin: 0 !important;
    color: #222222;
    font-style: italic;
    font-size: 15px;
}
.blog-post.single-post .share-box {
    border-top: 1px solid #e0e0e0;
    padding-top: 30px;
    margin-bottom: 30px;
}
.blog-post.single-post .share-box span {
    display: inline-block;
    margin: 4px 0;
    font-family: "Lato", sans-serif;
    color: #999999;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
}
.blog-post.single-post .share-box ul.social-share {
    margin: 0;
    padding: 0;
    text-align: right;
}
.blog-post.single-post .share-box ul.social-share li {
    display: inline-block;
    margin: 0 1px;
    text-align: center;
}
.blog-post.single-post .share-box ul.social-share li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    width: 30px;
    height: 30px;
    line-height: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    color: #ffffff;
    background: #222222;
}
.blog-post.single-post .share-box ul.social-share li a:hover {
    background: #fde3a7;
}
.blog-post.single-post .autor-post {
    overflow: hidden;
    background: #f8f8f8;
    margin-bottom: 40px;
}
.blog-post.single-post .autor-post img {
    width: 100px;
    float: left;
    margin-bottom: 0;
}
.blog-post.single-post .autor-post .autor-content {
    padding: 20px 20px 20px 0;
    margin-left: 120px;
}
.blog-post.single-post .autor-post .autor-content h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.blog-post.single-post .autor-post .autor-content p {
    margin-bottom: 0 !important;
}
.blog-post.single-post .comment-section {
    padding-left: 80px;
}
.blog-post.single-post .comment-section h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    text-transform: uppercase;
    padding-bottom: 35px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 40px;
}
.blog-post.single-post .comment-section ul {
    margin: 0;
    padding: 0;
}
.blog-post.single-post .comment-section ul li {
    list-style: none;
}
.blog-post.single-post .comment-section .comment-tree > li[id^="comment-"] {
    scroll-margin-top: 340px;
}
.blog-post.single-post .comment-section ul li .comment-box {
    overflow: hidden;
    padding-bottom: 35px;
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 40px;
}
.blog-post.single-post .comment-section ul li .comment-box img {
    width: 50px;
    height: 50px;
    float: left;
    border-radius: 50%;
    object-fit: cover;
}
.blog-post.single-post .comment-section ul li .comment-box .comment-content {
    margin-left: 66px;
}
.blog-post.single-post .comment-section ul li .comment-box .comment-content h4 {
    color: #222222;
    font-size: 13px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
}
.blog-post.single-post
    .comment-section
    ul
    li
    .comment-box
    .comment-content
    h4
    a {
    color: #222222;
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    float: right;
    font-size: 11px;
    font-weight: 400;
}
.blog-post.single-post
    .comment-section
    ul
    li
    .comment-box
    .comment-content
    h4
    a:hover {
    color: #fde3a7;
}
/* Comment author name link: render it like the bold name (not the
   floated, lighter "Reply" link that the generic h4 a rule styles),
   while keeping the gold hover. */
.blog-post.single-post
    .comment-section
    ul
    li
    .comment-box
    .comment-content
    h4
    a.comment-author-link {
    float: none;
    font-size: 13px;
    font-weight: 900;
    color: #222222;
}
.blog-post.single-post
    .comment-section
    ul
    li
    .comment-box
    .comment-content
    h4
    a.comment-author-link:hover {
    color: #fde3a7;
}
.blog-post.single-post
    .comment-section
    ul
    li
    .comment-box
    .comment-content
    span {
    font-size: 13px;
    color: #999999;
    font-family: "Lato", sans-serif;
    line-height: 20px;
    margin: 0 0 10px;
    font-size: 11px;
    display: inline-block;
    font-weight: 400;
    margin-bottom: 16px;
    text-transform: uppercase;
}
.blog-post.single-post .comment-section ul li .comment-box .comment-content p {
    margin: 0 !important;
}
.blog-post.single-post .comment-section ul.depth .comment-box {
    padding-left: 80px;
}
.blog-post.single-post .comment-section ul.depth .comment-box img {
    width: 38px;
    height: 38px;
}
.blog-post.single-post .comment-section ul.depth .comment-box .comment-content {
    margin-left: 52px;
}
.blog-post.single-post .comment-section .comment-form {
    margin-bottom: 40px;
}
.blog-post.single-post .comment-section .comment-form h2 {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 30px;
}
.blog-post.single-post .comment-section .comment-form input[type="text"],
.blog-post.single-post .comment-section .comment-form textarea {
    width: 100%;
    display: block;
    padding: 12px;
    background: #f8f8f8;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    color: #999999;
    font-size: 13px;
    font-family: "Lato", sans-serif;
    border: 1px solid #f1f1f1;
    outline: none;
    margin: 0 0 20px;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.blog-post.single-post .comment-section .comment-form input[type="text"]:focus,
.blog-post.single-post .comment-section .comment-form textarea:focus {
    border: 1px solid #fde3a7;
}
.blog-post.single-post .comment-section .comment-form textarea {
    margin-bottom: 20px;
}
.blog-post.single-post .comment-section .comment-form input[type="submit"] {
    display: inline-block;
    outline: none;
    padding: 10px 34px;
    color: #222222;
    font-size: 12px;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background: #fde3a7;
    border: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.blog-post.single-post
    .comment-section
    .comment-form
    input[type="submit"]:hover {
    opacity: 0.7;
}
.blog-post.single-post .comment-section .comment-form .submit-area {
    text-align: center;
}
.blog-post.single-post .comment-section .comment-form .message {
    height: 30px;
    font-size: 13px;
    font-family: "Lato", sans-serif;
}
.blog-post.single-post .comment-section .comment-form .message.error {
    color: #e74c3c;
}
.blog-post.single-post .comment-section .comment-form .message.success {
    color: #fde3a7;
}
/*-------------------------------------------------*/
/* =  contact page
/*-------------------------------------------------*/
#contact-section .contact-info {
    padding: 55px 0;
}
#contact-section .contact-info .title-section {
    margin-bottom: 40px;
}
#contact-section .contact-info .contact-info-box {
    text-align: center;
}
#contact-section .contact-info .contact-info-box span {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    background: #fde3a7;
    margin: 0 0 20px;
}
#contact-section .contact-info .contact-info-box span i {
    color: #ffffff;
    font-size: 30px;
    line-height: 100px;
}
#contact-section .contact-info .contact-info-box h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
#contact-section .contact-info .contact-info-box p {
    margin-bottom: 30px;
}
#contact-section .map {
    height: 418px;
}
#contact-section .contact-form {
    padding: 50px 0 60px;
}
#contact-section .contact-form h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 50px;
}
#contact-form input[type="text"],
#contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #cccccc;
    margin-bottom: 30px;
    outline: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #999999;
    font-size: 13px;
    font-family: "Lato", sans-serif;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
}
#contact-form input[type="text"]:focus,
#contact-form textarea:focus {
    border: 1px solid #fde3a7;
}
#contact-form textarea {
    height: 120px;
}
#contact-form input[type="submit"] {
    padding: 10px 37px;
    outline: none;
    border: 2px solid #333333;
    color: #333333;
    font-size: 12px;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    margin-bottom: 20px;
    background: #ffffff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
#contact-form input[type="submit"]:hover {
    border: 2px solid #fde3a7;
    color: #fde3a7;
}
#contact-form .submit-area {
    text-align: center;
}
#contact-form .message {
    height: 30px;
    font-size: 13px;
    font-family: "Lato", sans-serif;
}
#contact-form .message.error {
    color: #e74c3c;
}
#contact-form .message.success {
    color: #fde3a7;
}
/*-------------------------------------------------*/
/* =  error page
/*-------------------------------------------------*/
.error-section {
    padding: 20px 0;
    position: relative;
    background: url("../upload/banners/error.jpg") center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    text-align: center;
}
.error-section span {
    display: inline-block;
    color: #222222;
    font-size: 30px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    margin: 0 0 30px;
    text-transform: uppercase;
    font-size: 48px;
    color: #fde3a7;
    margin-bottom: 25px;
    letter-spacing: 4px;
}
.error-section h1 {
    color: #222222;
    font-size: 30px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    margin: 0 0 30px;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 2px;
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    max-width: 460px;
    margin: 0 auto 20px;
    line-height: 52px;
}
.error-section p {
    margin-bottom: 25px;
}
.error-section a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    border-color: #fde3a7;
    color: #fde3a7;
}
.error-section a:hover {
    color: #ffffff;
    background: #fde3a7;
}
.error-section .error-content {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -130px;
    z-index: 2;
}
.error-section:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(34, 34, 34, 0.8);
}
/*-------------------------------------------------*/
/* =  Footer
/*-------------------------------------------------*/
footer {
    padding-top: 50px;
    text-align: center;
}
footer h2 {
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    text-transform: uppercase;
    color: #222222;
    margin-bottom: 50px;
    letter-spacing: 1px;
}
footer ul.social-list {
    margin: 0;
    padding: 0;
    margin-bottom: 35px;
}
footer ul.social-list li {
    display: inline-block;
    margin: 0 4px;
}
footer ul.social-list li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    width: 40px;
    height: 40px;
    line-height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    color: #333333;
    font-size: 18px;
    background: #ffffff;
    border: 1px solid #999999;
}
footer ul.social-list li a:hover {
    background: #fce2aa;
    border: 1px solid #fce2aa;
    color: #333333;
}
.wel_nav nav .navbar-nav li a:hover,
.wel_nav nav .navbar-nav li a:focus {
    background-color: transparent;
}
footer p.copyright {
    padding: 25px 0;
    border-top: 1px dotted #717173;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0;
}
.header_bottom .navbar-nav li a:hover,
.header_bottom .navbar-nav li a:focus {
    background-color: transparent;
}
.header_bottom .navbar-nav li a:hover,
.header_bottom .navbar-nav li a:focus,
.header_bottom .navbar-nav li a:focus-visible,
.header_bottom .navbar-nav li a:active,
.header_bottom .navbar-nav li a:visited,
.header_bottom .navbar-nav li a.active,
.header_bottom .navbar-nav li a.current,
.header_bottom .navbar-nav li.active a,
.header_bottom .navbar-nav li.current a,
.header_bottom .navbar-nav li.current-menu-item a {
    color: #3e3c3a !important;
}
.wel_nav nav .navbar-nav li a:hover {
    color: #fde3a7 !important;
}
/* Top-bar welcome nav: hover/focus turns BOTH the English and Chinese text the same gold */
.header_top .wel_nav nav .navbar-nav li a:hover,
.header_top .wel_nav nav .navbar-nav li a:focus,
.header_top .wel_nav nav .navbar-nav li a:hover span.chines,
.header_top .wel_nav nav .navbar-nav li a:focus span.chines {
    color: #fde3a7 !important;
}
.header_bottom .navbar-toggle .icon-bar {
    background-color: #333;
}

@font-face {
    font-family: "dfpnmingxbold-b5regular";
    src:
        url("fonts/_-webfont.woff2") format("woff2"),
        url("fonts/_-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
header.header {
    padding: 26px 0px;
}
.logo_area {
    float: left;
    width: 20%;
    position: relative;
    margin-top: 4px;
}
.logo_area:before {
    position: absolute;
    content: "";
    border-bottom: 1px solid #ccc;
    width: 100%;
    top: 61%;
    right: 0;
    z-index: -1;
}
.logo_area:after {
}
.header_right {
    float: left;
    width: 80%;
    margin-top: 15px;
}
.header_top {
    width: 100%;
    padding-bottom: 9px;
    -webkit-padding-after: 10px;
    display: inline-block;
}
.header_bottom {
    float: left;
    width: 100%;
    border-top: 1px solid #ccc;
}
#top_nav {
    padding: 0px;
}
.header_bottom .navbar-nav li a {
    /* Reduced from 21px so all nine main-nav items (including Forum) keep
       to a single row at every desktop width; the container is capped at
       max-width: 990px above, so this covers the full >=992px range. */
    padding: 16px 18.5px 6px !important;
    position: relative;
    color: #3e3c3a;
    font-weight: 500;
    line-height: 16px;
}
.header_bottom .navbar-nav li a span.chines {
    font-size: 18px;
    font-family: "Noto Sans SC bold", sans-serif;
    font-weight: 400;
}
.header_bottom .navbar-nav li a:hover {
    background: none;
}
.header_bottom .navbar-nav li a:after {
    position: absolute;
    content: "";
    border-right: 1px dotted #3e3c3a;
    top: 14px;
    height: 60%;
    right: 0px;
}
/* .header_bottom .navbar-nav li:first-child a {
    padding-left: 0px !important;
}
.header_bottom .navbar-nav li:last-child a {
    padding-right: 0px !important;
} */
.header_bottom .navbar-nav li:last-child a:after {
    border: none;
}
@media (min-width: 768px) {
    /* Bootstrap floats .navbar-nav (and its li's) left at this same
       breakpoint, so the row only ever spans as wide as its items and can
       leave a gap before the container's right edge (first item not aligned
       with the site title above it, last item not flush with the top row's
       right-aligned welcome/search block). Switch to flex so Home stays
       flush left and Store stays flush right at any desktop container
       width. */
    .header_bottom .navbar-nav {
        /* Bootstrap's float: left (same breakpoint) makes an auto-width box
           shrink-wrap to its content instead of filling the row, which would
           leave the flex-grow below with no leftover space to work with.
           Cancel it so the flex container spans the full row. */
        float: none;
        display: flex;
        /* Safety net only: flex-grow below is sized to consume all leftover
           width itself, so this has nothing left to distribute other than a
           possible sub-pixel rounding remainder. */
        justify-content: space-between;
    }
    /* .nav (Bootstrap) gives this element a clearfix via :before/:after
       {content:" "}. That's inert while it's a float/block box, but as a
       flex container those two generated boxes become two extra, invisible
       flex items, which would take a share of the flex-grow below. Drop the
       generated content so only the 9 actual links participate. */
    .header_bottom .navbar-nav:before,
    .header_bottom .navbar-nav:after {
        content: none;
    }
    /* Flex items default to flex-shrink: 1, so if the real fonts push the
       row's natural content width past the container at some size in the
       768-991px range (already the tightest padding tier), items would
       shrink unevenly instead of overflowing like the old float layout did
       -- an item with a breakable two-word caption (e.g. "PAST WINNERS")
       shrinks/wraps before a single-word one, making the row look uneven.
       Keep every item at its natural width so this row sizes itself the
       same way the pre-flex float layout did. */
    .header_bottom .navbar-nav li {
        flex-shrink: 0;
        flex-grow: 2;
        margin: -2px 0 0 0;
    }
    .header_bottom .navbar-nav li:first-child,
    .header_bottom .navbar-nav li:last-child {
        flex-grow: 1;
    }
    /* Center the text so a link's grown width splits evenly into a left and
       a right share, keeping equal blank space on both sides of the dotted
       separators on either side of it. */
    .header_bottom .navbar-nav li:not(:first-child):not(:last-child) a {
        text-align: left;
    }
    /* Store's grown width should all land on its left (before its text), so
       the store link itself stays flush against the row's right edge. */
    .header_bottom .navbar-nav li:last-child a {
        text-align: left;
    }
    /* Hover/active indicator: a 2px line across the top of the link with a
       small down-pointing triangle centered on it. box-shadow (not a real
       border) keeps the link's box the same height so the row doesn't shift
       on hover; the triangle is the standard zero-size/border-color trick,
       kept on :before since :after already draws the dotted separator. */
    .header_bottom .navbar-nav li a:hover,
    .header_bottom .navbar-nav li.active a {
        box-shadow: inset 0 2px 0 0 #5b5957;
    }
    .header_bottom .navbar-nav li a:hover:before,
    .header_bottom .navbar-nav li.active a:before {
        content: "";
        position: absolute;
        top: 3px;
        left: 50%;
        width: 0;
        height: 0;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 3px solid #5b5957;
    }
}
.site_title {
    float: left;
    width: 35%;
}
.site_title h1 {
    margin: 0px;
    font-size: 15px;
}
.chines {
    font-family: "Noto Serif TC Regular", serif;
    color: #333333;
}
#wcfca-search-label .chines {
    font-family: "Noto Serif TC Regular", serif;
    color: lightgray;
}
#critics-search-label span.chines.m-y-imp.Microsoft-YaHei-Regular {
    color: lightgray;
}
.site_title h1 span {
    font-size: 36px;
}
.wel_nav {
    float: right;
    background: #5b5957;
    width: auto;
    border-radius: 25px;
}
.wel_nav.no_log {
    width: auto;
}
.welcom_area {
    float: left;
    position: relative;
}
.welcom_area p {
    float: left;
    margin: 0px;
    padding: 5px 0px 0px 30px;
    font-size: 10px;
    line-height: 15px;
    color: #cccccc;
    text-transform: uppercase;
}
.welcom_area span.user_name {
    color: #fce2aa;
    font-size: 14px;
    text-transform: lowercase;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 125px;
    width: max-content;
    display: inline-block;
    overflow: hidden;
    padding: 0 0 0 3px;
    vertical-align: bottom;
}
.welcom_area span.user_name.admin-user {
    max-width: 106px;
}
.welcom_area span.chines {
    font-size: 14px;
    line-height: 15px;
    display: inline-block;
    vertical-align: bottom;
}
.user_notifaction {
    background: #ffb923;
    font-size: 10px;
    top: -5px;
    position: relative;
    right: -60px;
    padding: 3px;
    border-radius: 100%;
    /* line-height: 9px; */
    float: left;
    width: 16px;
    height: 16px;
    box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.35);
}
.login_avt {
    float: left;
    position: relative;
}
.login_avt img {
    margin-top: -5px;
    position: absolute;
    left: 100%;
}
.wel_nav.no_log .login_avt img {
    top: -52px;
    left: 4px;
}
/*
 * The avatar / decorative image is position:absolute (out of flow) and sits at
 * the right edge of .login_avt. Now that .wel_nav is auto-width, reserve real
 * in-flow space here so the nav links can never slide underneath the image.
 * Scoped to .header_top so the separate mobile (.m-view) header is untouched.
 */
.header_top .wel_nav:not(.no_log) .login_avt {
    margin-right: 55px;
    /* margin-left: 15px; */
}
.header_top .wel_nav:not(.no_log) .login_avt.admin-user {
    margin-left: 0;
}
.header_top .wel_nav.no_log .login_avt {
    margin-right: 125px;
}
.header_top .wel_nav.no_log .login_avt img {
    width: 120px;
}
.wel_nav nav {
    float: right;
}
.wel_nav nav .navbar-nav li a {
    padding: 6px 15px 1px 15px;
    position: relative;
    font-size: 10px;
    text-transform: uppercase;
    line-height: 15px;
    color: #ccc !important;
}
.wel_nav nav .navbar-nav li a:hover {
    background: none;
    color: inherit;
}
.wel_nav nav .navbar-nav li a span.chines {
    font-size: 14px;
}
.wel_nav nav .navbar-nav li a span.chines:hover {
    font-size: 14px;
    color: #fde3a7 !important;
}
.wel_nav nav .navbar-nav li:last-child a {
    padding: 13px 15px;
    font-size: 14px;
}
.wel_nav nav .navbar-nav li a:after {
    position: absolute;
    content: "";
    border-right: 1px dotted #ccc;
    height: 65%;
    width: 1px;
    top: 8px;
    right: 0px;
}
.wel_nav nav .navbar-nav li:last-child a:after {
    border: none;
}
.news-section .news-title {
    padding: 0px 0;
}
.news-section .news-title h1,
.carousel-arrows.owl-arrows {
    padding: 25px 0px;
}
.news-section .news-title h1 {
    line-height: 22px;
    letter-spacing: 0px;
    margin: 10px 0 0 0px;
}
.news-title.img .chines {
    font-size: 36px;
    color: #333333;
}
.news-title.img .eng_wrd {
    font-size: 14px;
    color: #666666;
    letter-spacing: 1px;
    font-family: "Lato", sans-serif;
}
.site_title .eng_wrd,
.site_title .eng_wrd span {
    font-size: 14px;
    color: #666666;
    font-family: "Lato", sans-serif;
    font-weight: 600;
    white-space: nowrap;
}
.site_title span.chines {
    font-weight: 700;
    display: inline-block;
    margin-bottom: 5px;
}
.news-section .news-title .owl-arrows {
    margin-top: 17px;
}
.img img {
    float: left;
}
.news-title.img.img2 {
    padding-bottom: 0px;
    background: #fde3a7 !important;
}
.img.img2 img {
    float: left;
    position: relative;
    z-index: 11111;
    margin-top: -32px;
}
.wel_nav .chines {
    color: #cccccc;
}
.post_head {
    display: inline-block;
    width: 100%;
    border-bottom: 2px solid #ccc;
    margin-bottom: 30px;
}
.post_head img {
    float: left;
}
.main-block-section .block-box .post_head h1,
.main-block-section .block-box .post_head h2 {
    padding: 0px;
    float: left;
    margin: 55px 0 0 10px;
    font-size: 14px;
    color: #666666;
}
.main-block-section .block-box .post_head h1 span.chines,
.main-block-section .block-box .post_head h2 span.chines {
    font-size: 36px;
    color: #333333;
    display: inline-block;
    margin-bottom: 5px;
}
.widget .post_head {
    border-bottom: none;
    margin-bottom: 5px;
}
.widget .post_head .imga {
    border-bottom: 2px solid #ccc;
    margin-bottom: 37px;
}
.widget .post_head .imga img {
    margin: 0px auto;
    display: block;
    float: none;
}
.widget .post_head h1,
.widget .post_head h2 {
    font-size: 14px;
    font-weight: 700;
    color: #666666;
    letter-spacing: 1px;
    font-family: "Lato-Black";
}
.category-widget.widget .post_head .chines {
    font-size: 30px;
    color: #333333;
}
.post_head h1 .chines,
.post_head h2 .chines {
    font-size: 30px;
    letter-spacing: 0px;
    display: inline-block;
    margin-bottom: 5px;
}
#shop-section {
    padding: 55px 0 30px;
}
#shop-section .title-section {
    margin-bottom: 10px;
}
#shop-section .title-line {
    margin-bottom: 30px;
    border-bottom: 1px solid #999999;
}
#shop-section .title-line h1 {
    color: #222222;
    font-size: 30px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    margin: 0 0 30px;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 15px;
}
#shop-section .title-line h1 a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    float: right;
    font-size: 13px;
    color: #999999;
}
#shop-section .title-line h1 a:hover {
    color: #fce2aa;
}
.products-box {
    position: relative;
    margin-bottom: 40px;
}
.products-box .carousel-arrows {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -40px;
    height: 0;
    z-index: 2;
}
.products-box .carousel-arrows a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    background: #999999;
    color: #ffffff;
}
.products-box .carousel-arrows a:hover {
    background: #fce2aa;
}
.products-box .carousel-arrows a.prev-link {
    float: left;
    margin-left: 20px;
}
.products-box .carousel-arrows a.next-link {
    float: right;
    margin-right: 20px;
}
.products-box .product-post {
    margin: 0;
    padding: 28px 0;
    background: #ffffff;
    border: 1px solid transparent;
    text-align: center;
    margin-bottom: 0px;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.products-box .product-post h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 3px;
    letter-spacing: 1.3px;
}
.products-box .product-post h2 a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #222222;
}
.products-box .product-post h2 a:hover {
    color: #fce2aa;
}
.products-box .product-post p {
    margin-bottom: 12px;
}
.products-box .product-post p i {
    margin: 0 1px;
    color: #ffba00;
}
.products-box .product-post > span {
    display: inline-block;
    color: #fce2aa;
    font-size: 13px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
}
.products-box .product-post .gal-product {
    position: relative;
    margin-bottom: 20px;
}
.products-box .product-post .gal-product img {
    width: 100%;
}
.products-box .product-post .gal-product span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    padding: 10px 14px;
    color: #ffffff;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    background: #fce2aa;
}
.products-box .product-post .product-links a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #999999;
    font-size: 12px;
    padding: 5px 7px;
    border: 2px solid #999999;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    margin: 0 3px 2px;
}
.products-box .product-post .product-links a.add-cart-btn {
    color: #222222;
    border: 2px solid #222222;
}
.products-box .product-post .product-links a.add-cart-btn span {
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    margin-left: 3px;
}
.products-box .product-post .product-links a:hover {
    background: #fce2aa;
    border: 2px solid #fce2aa !important;
    color: #ffffff !important;
}
.products-box .product-post:hover {
    border: 1px solid #cdcdcd;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    background: #fce2aa;
    border: 1px solid #fce2aa;
}
.portfolio-box .project-post {
    width: 20%;
    position: relative;
}
.portfolio-box .project-post img {
    width: 100%;
}
.portfolio-box .project-post .hover-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(34, 34, 34, 0.8);
    text-align: center;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    opacity: 0;
    overflow: hidden;
}
.portfolio-box .project-post .hover-box .inner-hover {
    position: absolute;
    width: 100%;
    bottom: 52px;
    left: 0;
}
.portfolio-box .project-post .hover-box .inner-hover h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    color: #fce2aa;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 3px;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transform: translate3d(0, 400%, 0);
    -moz-transform: translate3d(0, 400%, 0);
    -o-transform: translate3d(0, 400%, 0);
    transform: translate3d(0, 400%, 0);
}
.portfolio-box .project-post .hover-box .inner-hover p {
    color: #999999;
    margin-bottom: 0;
    transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -webkit-transform: translate3d(0, 400%, 0);
    -moz-transform: translate3d(0, 400%, 0);
    -o-transform: translate3d(0, 400%, 0);
    transform: translate3d(0, 400%, 0);
}
.portfolio-box .project-post .hover-box a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    position: absolute;
    top: 46%;
    left: 50%;
    margin-top: -12px;
    margin: 0 5px;
    -webkit-transform: translate3d(0, -400%, 0);
    -moz-transform: translate3d(0, -400%, 0);
    -o-transform: translate3d(0, -400%, 0);
    transform: translate3d(0, -400%, 0);
    outline: none;
}
.portfolio-box .project-post .hover-box a i {
    font-size: 24px;
    color: #ffffff;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.portfolio-box .project-post .hover-box a.link {
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    margin-left: 10px;
}
.portfolio-box .project-post .hover-box a.zoom,
.portfolio-box .project-post .hover-box a.film-gallery-zoom {
    transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    margin-left: -30px;
}
.portfolio-box .project-post .hover-box a:hover i {
    color: #fce2aa;
}
.portfolio-box .project-post:hover .hover-box {
    opacity: 1;
}
.portfolio-box .project-post:hover .hover-box .inner-hover h2 {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.portfolio-box .project-post:hover .hover-box .inner-hover p {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.portfolio-box .project-post:hover .hover-box a {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#home-section {
    padding-top: 70px;
}
#home-section .tp-caption.small_text {
    position: absolute;
    color: #fff;
    text-shadow: none;
    font-weight: 900;
    font-size: 16px;
    line-height: 20px;
    font-family: "Lato", sans-serif;
    margin: 0px;
    border-width: 0px;
    border-style: none;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 1.8px;
}
#home-section .tp-caption.small_text span {
    color: #fce2aa;
}
#home-section .tp-caption.finewide_medium_white {
    color: #fff;
    text-shadow: none;
    font-size: 48px;
    line-height: 60px;
    font-weight: 900;
    font-family: "Lato", sans-serif;
    background-color: transparent;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 0px;
    border-color: transparent;
    border-style: none;
    text-align: center;
    letter-spacing: 2.5px;
    padding: 0.02em 1.4em;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}
#home-section .tp-caption.finewide_medium_white span {
    color: #fce2aa !important;
}
#home-section .tp-caption.finewide_medium_white.padd-lf-none {
    text-align: left;
    padding: 0.02em 0.3em 0.02em 0;
}
#home-section .tp-caption.finewide_medium_white.black-style {
    color: #333333;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
}
#home-section .tp-caption.finewide_medium_white.black-style span {
    color: #fce2aa !important;
}
#home-section .tp-caption a.trans-btn {
    color: #ffffff;
    background: transparent;
    font-size: 12px;
    font-weight: 900;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    border: 2px solid #ffffff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    padding: 0.7em 2.5em;
    letter-spacing: 1.7px;
}
#home-section .tp-caption a.trans-btn:hover {
    border: 2px solid #fce2aa;
    background: #fce2aa;
}
#home-section .tp-caption a.trans-btn2 {
    color: #333333;
    background: transparent;
    font-size: 12px;
    font-weight: 900;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    border: 2px solid #333333;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    padding: 0.7em 2.5em;
    letter-spacing: 1.7px;
}
#home-section .tp-caption a.trans-btn2:hover {
    color: #ffffff;
    border: 2px solid #fce2aa;
    background: #fce2aa;
}
#home-section .tp-bannertimer {
    display: none !important;
}
#home-section .tp-bullets.simplebullets.round .bullet:hover,
#home-section .tp-bullets.simplebullets.round .bullet.selected {
    background: #fce2aa;
    border-color: #fce2aa;
    opacity: 1;
}
.new_letter_wrap {
    margin: 0px auto;
    text-align: left;
    width: auto;
    display: inline-block;
}
.new_letter_wrap img {
    float: left;
}
.subscribe-section {
    padding: 0px;
}
.subscribe-form {
    display: inline-block;
    margin-top: 10px;
}
.form-search {
    opacity: 0;
    position: absolute;
    left: -109px;
    background: #fff;
    top: -39px;
    padding: 0px !important;
}
.form-search.active {
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
/****** Fullscreen Search Overlay ******/
#wcfca-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.88);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#wcfca-search-overlay.active {
    display: flex;
    opacity: 0;
    animation: wcfcaFadeIn 0.3s ease forwards;
}
@keyframes wcfcaFadeIn {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
#wcfca-search-inner {
    text-align: center;
    width: 100%;
    max-width: 720px;
    padding: 0 24px;
}
#wcfca-search-label {
    color: #c8a96e;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 24px;
    font-family: "Lato-Regular", sans-serif;
}
#wcfca-search-input-wrap {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #c8a96e;
    padding: 8px 16px;
}
#wcfca-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 28px;
    font-family: "Lato-Light", sans-serif;
    letter-spacing: 1px;
    padding: 8px 12px 8px 0;
}
#wcfca-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
#wcfca-search-year,
.archive-search-input-wrap .film-search-year-input {
    width: 92px;
    flex: 0 0 92px;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(200, 169, 110, 0.35);
    box-shadow: none;
    color: #fff;
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 14px;
    outline: 0;
    padding: 8px 10px;
    text-align: center;
}
#wcfca-search-year::placeholder,
.archive-search-input-wrap .film-search-year-input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}
#wcfca-search-btn {
    background: transparent;
    border: none;
    color: #c8a96e;
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
    transition: color 0.2s;
}
#wcfca-search-btn:hover {
    color: #fff;
}
#wcfca-search-close {
    position: absolute;
    top: 28px;
    right: 36px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}
#wcfca-search-close:hover {
    color: #fff;
}
/****** Search Type Filter (Radio) ******/
#wcfca-search-type {
    display: block;
    margin-bottom: 24px;
    text-align: center;
}
.wcfca-st-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
    gap: 12px 14px;
    max-width: 620px;
    margin: 0 auto;
}
.wcfca-st-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    min-height: 50px;
    padding: 10px 14px;
    border: 1px solid rgba(252, 226, 170, 0.28);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
    user-select: none;
    transition:
        opacity 0.18s,
        border-color 0.18s,
        background 0.18s,
        box-shadow 0.18s;
}
.wcfca-st-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.wcfca-st-dot {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid #fce2aa;
    border-radius: 50%;
    background: transparent;
    position: relative;
    transition: box-shadow 0.18s;
}
.wcfca-st-radio:hover .wcfca-st-dot {
    box-shadow: 0 0 0 3px rgba(252, 226, 170, 0.12);
}
.wcfca-st-radio:hover {
    border-color: rgba(252, 226, 170, 0.58);
    background: rgba(252, 226, 170, 0.07);
}
.wcfca-st-radio input:checked + .wcfca-st-dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fce2aa;
}
.wcfca-st-radio input:focus-visible + .wcfca-st-dot {
    box-shadow: 0 0 0 3px rgba(252, 226, 170, 0.25);
}
.wcfca-st-text,
.wcfca-st-text .chines {
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.6px;
    transition: color 0.18s;
}
.wcfca-st-text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 3px;
    font-family: "Lato-Regular", sans-serif;
    line-height: 1.28;
    min-width: 0;
    text-align: left;
}
.wcfca-st-text .chines {
    font-family: "Microsoft YaHei", "NotoSerifTC", sans-serif;
}
/* Selected state: both English and Chinese turn gold */
.wcfca-st-radio input:checked ~ .wcfca-st-text,
.wcfca-st-radio input:checked ~ .wcfca-st-text .chines {
    color: #fce2aa;
}
.wcfca-st-radio--active {
    border-color: rgba(252, 226, 170, 0.78);
    background: rgba(252, 226, 170, 0.1);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
}
.wcfca-st-sep {
    color: rgba(252, 226, 170, 0.55);
    margin: 0;
}
.wcfca-st-and {
    color: rgba(252, 226, 170, 0.72);
    margin: 0 4px;
}
/* Unselected options are dimmed while a filter is selected */
.wcfca-st-radio--dim {
    opacity: 0.58;
}
.wcfca-st-radio--dim:hover {
    opacity: 1;
}
@media (max-width: 575px) {
    .wcfca-st-filters {
        grid-template-columns: 1fr;
    }

    .wcfca-st-radio {
        min-height: 46px;
        padding: 9px 12px;
    }

    #wcfca-search-input,
    .archive-search-input-wrap input[type="search"] {
        font-size: 20px;
        min-width: 0;
    }

    #wcfca-search-year,
    .archive-search-input-wrap .film-search-year-input {
        width: 72px;
        flex-basis: 72px;
        padding-left: 6px;
        padding-right: 6px;
    }
}
/****** End Search Type Filter ******/
/****** Search Alert Toast ******/
#wcfca-search-toast {
    position: fixed;
    top: 28px;
    right: 36px;
    z-index: 100002;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 360px;
    padding: 15px 18px;
    background: rgba(10, 10, 10, 0.98);
    border: 1px solid #fce2aa;
    border-left: 4px solid #fce2aa;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
    transform: translateX(130%);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}
#wcfca-search-toast.show {
    transform: translateX(0);
    opacity: 1;
}
.wcfca-toast-icon {
    color: #fce2aa;
    font-size: 20px;
    flex-shrink: 0;
}
.wcfca-toast-msg {
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-align: left;
    font-family: "Lato-Regular", sans-serif;
}
@media (max-width: 575px) {
    #wcfca-search-toast {
        top: 16px;
        right: 12px;
        left: 12px;
        min-width: 0;
        max-width: none;
    }
}
/****** End Search Alert Toast ******/
/****** Search Suggestions Dropdown ******/
#wcfca-search-suggestions,
#films-search-suggestions {
    position: relative;
    width: 100%;
    max-height: 420px;
    overflow-y: auto;
    margin-top: 6px;
    border: 1px solid rgba(200, 169, 110, 0.35);
    border-top: none;
    background: rgba(10, 10, 10, 0.97);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
    z-index: 100000;
    animation: wcfcaFadeIn 0.18s ease forwards;
}
#wcfca-search-suggestions::-webkit-scrollbar,
#films-search-suggestions::-webkit-scrollbar {
    width: 5px;
}
#wcfca-search-suggestions::-webkit-scrollbar-track,
#films-search-suggestions::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
#wcfca-search-suggestions::-webkit-scrollbar-thumb,
#films-search-suggestions::-webkit-scrollbar-thumb {
    background: #c8a96e;
    border-radius: 3px;
}
.wcfca-suggestion-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 169, 110, 0.12);
    transition: background 0.18s;
    cursor: pointer;
}
.wcfca-suggestion-item:last-child {
    border-bottom: none;
}
.wcfca-suggestion-item:hover,
.wcfca-suggestion-item.wcfca-sug-active {
    background: rgba(200, 169, 110, 0.15);
    text-decoration: none;
}
#film-search-infinite-scroll {
    clear: both;
    min-height: 48px;
    padding: 14px 0;
    color: #888;
    font-size: 13px;
    text-align: center;
}
.wcfca-sug-thumb {
    width: 42px;
    height: 60px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(200, 169, 110, 0.25);
    flex-shrink: 0;
    background: #111;
}
.wcfca-sug-thumb--round {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(200, 169, 110, 0.4);
    flex-shrink: 0;
    background: #111;
}
.wcfca-sug-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    overflow: hidden;
}
.wcfca-sug-en {
    color: #fff;
    font-size: 14px;
    font-family: "Lato-Regular", "Lato", sans-serif;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wcfca-sug-cn {
    color: #c8a96e;
    font-size: 13px;
    font-family: "Microsoft YaHei", "NotoSerifTC", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wcfca-sug-year {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-family: "Lato-Light", "Lato", sans-serif;
    letter-spacing: 1px;
}
.wcfca-sug-media,
.media-type-label {
    color: #b8b8b8;
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.media-label-muted {
    color: #676767;
}
.film-title .media-type-label,
.film-title .media-type-meta-separator {
    display: inline-block;
}
.film-title .media-type-meta-separator {
    color: #c8a96e;
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/****** End Search Suggestions Dropdown ******/
/****** Banner Search Results Bar ******/
.fab-srh-bar {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding: 14px 0 18px;
}
.fab-srh-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.fab-srh-form {
    flex: 1;
    min-width: 220px;
    max-width: 480px;
}
.fab-srh-field {
    display: flex;
    align-items: center;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    transition:
        border-color 0.18s,
        background 0.18s;
}
.fab-srh-field:focus-within {
    border-color: rgba(0, 0, 0, 0.45);
    background: rgba(255, 255, 255, 0.82);
}
.fab-srh-icon {
    color: #888;
    font-size: 13px;
    padding: 0 0 0 12px;
    flex-shrink: 0;
}
.fab-srh-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    color: #222;
    font-size: 14px;
    padding: 9px 12px;
    font-family: "Lato-Regular", "Lato", sans-serif;
}
.fab-srh-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}
.fab-srh-year {
    width: 82px;
    flex: 0 0 82px;
    height: 28px;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: none;
    color: #333;
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 12px;
    outline: 0;
    padding: 0 8px;
    text-align: center;
}
.fab-srh-btn {
    background: #444;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 0 18px;
    height: 40px;
    text-transform: uppercase;
    flex-shrink: 0;
    transition: background 0.18s;
}
.fab-srh-btn:hover,
.fab-srh-btn:focus {
    background: #222;
    outline: none;
}
.fab-srh-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}
.fab-srh-num {
    color: #b72025;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    font-family: "Lato-Regular", "Lato", sans-serif;
}
.fab-srh-label {
    color: #666;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.fab-srh-kw {
    color: #333;
    font-size: 13px;
    font-style: italic;
    font-weight: 600;
    font-family: "Lato-Regular", "Lato", sans-serif;
}
/* Standalone search results bar shown below the archive banner, above the results heading */
.fab-srh-bar-section {
    padding: 20px 0 5px;
}
@media (max-width: 767px) {
    #wcfca-search-suggestions,
    #films-search-suggestions {
        max-height: 290px;
    }
    .sidebar .tab-posts-box .tab-pane ul.top-post-list li .top-post-content h2 {
        font-size: 14px;
    }
    .sidebar
        .tab-posts-box
        .tab-pane
        ul.top-post-list
        li
        .top-post-content
        span {
        display: none;
    }
    .fab-srh-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .fab-srh-form {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }
    .fab-srh-num {
        font-size: 20px;
    }
}
/****** End Banner Search Results Bar ******/
/****** Notification Dropdown ******/
.wcfca-notif {
    position: relative;
    display: inline-block;
}
.wcfca-notif-toggle {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    transition: opacity 0.2s ease-in-out;
}
.wcfca-notif-toggle:hover,
.wcfca-notif-toggle:focus {
    opacity: 0.8;
    outline: none;
}
/* Keep the existing badge look when wrapped in the toggle button */
.wcfca-notif-toggle .user_notifaction {
    cursor: pointer;
    min-width: 10px;
    min-height: 10px;
    display: inline-block;
}
/* The panel is moved to a direct child of <body> in JS (see mountNotifPanels
   in script.js) instead of staying nested under the toggle. The header's
   mobile avatar wrapper centers itself with `transform`, and a transform on
   an ancestor makes it the containing block AND stacking context for any
   position:fixed/absolute descendant — so no z-index value on the panel can
   make it escape above later page content while it stays nested there.
   Moving it out of that subtree is what actually fixes the stacking order;
   position/top/left are then set inline by JS (positionNotifPanel). */
.wcfca-notif-panel {
    position: fixed;
    width: 360px;
    max-width: calc(100vw - 30px);
    background: #ffffff;
    border: 1px solid rgba(200, 169, 110, 0.45);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    z-index: 100000;
    overflow: hidden;
    display: none;
    text-align: left;
}
.wcfca-notif-panel.open {
    display: block;
    animation: wcfcaFadeIn 0.18s ease forwards;
}
.wcfca-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(200, 169, 110, 0.3);
    background: #faf6ec;
}
.wcfca-notif-title {
    font-family: "Lato-Bold", "Lato", sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1f1f1f;
}
.wcfca-notif-title .chines {
    font-weight: 400;
    margin-right: 2px;
    color: #666666;
}
a.wcfca-notif-view-all span.chines.m-y-imp.Microsoft-YaHei-Regular {
    color: #666666;
}
.wcfca-notif-read-all span.chines.m-y-imp.Microsoft-YaHei-Regular {
    color: #666666;
}
.wcfca-notif-all {
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #b6914e;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}
.wcfca-notif-all:hover {
    color: #8a6d34;
    text-decoration: none;
}
.wcfca-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 420px;
    overflow-y: auto;
}
.wcfca-notif-list::-webkit-scrollbar {
    width: 6px;
}
.wcfca-notif-list::-webkit-scrollbar-track {
    background: #f3f3f3;
}
.wcfca-notif-list::-webkit-scrollbar-thumb {
    background: #c8a96e;
    border-radius: 3px;
}
.wcfca-notif-item a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    text-decoration: none;
    border-bottom: 1px solid #f0eee8;
    transition: background 0.18s;
}
.wcfca-notif-item:last-child a {
    border-bottom: none;
}
.wcfca-notif-item a:hover {
    background: rgba(252, 226, 170, 0.28);
    text-decoration: none;
}
.wcfca-notif-item.is-unread a {
    background: rgba(252, 226, 170, 0.16);
    border-left: 3px solid #fce2aa;
}
.wcfca-notif-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(200, 169, 110, 0.4);
}
.wcfca-notif-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.wcfca-notif-line {
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wcfca-notif-name {
    font-family: "Lato-Bold", "Lato", sans-serif;
    font-weight: 700;
    color: #1f1f1f;
}
.wcfca-notif-itemtitle {
    font-family: "Lato-Regular", "Lato", sans-serif;
    color: #6b6b6b;
}
.wcfca-notif-desc {
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 12px;
    color: #8a8a8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wcfca-notif-time {
    font-family: "Lato-Light", "Lato", sans-serif;
    font-size: 11px;
    color: #b6914e;
    letter-spacing: 0.4px;
}
.wcfca-notif-empty {
    padding: 28px 18px;
    text-align: center;
    color: #999;
    font-size: 13px;
}
/* Close button: hidden by default (desktop/tablet dropdown closes via an
   outside click), shown only once the panel goes full-screen at <=480px
   below, where there is no "outside" left to tap. */
.wcfca-notif-close {
    display: none;
    position: absolute;
    top: -2px;
    right: 14px;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 40px;
    line-height: 1;
    color: #999999;
    cursor: pointer;
    z-index: 1;
}
.wcfca-notif-close:hover,
.wcfca-notif-close:focus {
    color: #333333;
    outline: none;
}
/* 480px and below: full-screen takeover, matching the Rating/Post Review
   modal full-screen pattern (see .rate-modal-overlay in custom.css) instead
   of a small anchored dropdown that has no room to breathe. `!important` is
   used deliberately here: JS sets inline top/left on the panel to anchor it
   under the toggle above this breakpoint (positionNotifPanel in script.js),
   and inline styles otherwise beat any plain class rule. */
@media (max-width: 480px) {
    .wcfca-notif-panel {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border: none;
        border-radius: 0;
        flex-direction: column;
    }
    .wcfca-notif-panel.open {
        display: flex;
        padding: 40px 18px 0;
    }
    .wcfca-notif-list {
        max-height: none;
        flex: 1;
    }
    .wcfca-notif-close {
        display: block;
    }
}
/****** End Notification Dropdown ******/
/****** Notifications Page ******/
.notif-detail {
    border: 1px solid rgba(200, 169, 110, 0.45);
    border-radius: 8px;
    background: #faf6ec;
    padding: 22px 24px;
    margin: 24px 0 28px;
}
.notif-detail-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.notif-detail-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(200, 169, 110, 0.5);
    flex-shrink: 0;
}
.notif-detail-name {
    font-family: "Lato-Bold", "Lato", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #1f1f1f;
    margin: 0 0 2px;
}
.notif-detail-title {
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 14px;
    color: #6b6b6b;
    margin: 0;
}
.notif-detail-time {
    font-family: "Lato-Light", "Lato", sans-serif;
    font-size: 12px;
    color: #b6914e;
    letter-spacing: 0.5px;
}
.notif-detail-desc {
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
.notif-page-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}
.notif-page-item a,
.notif-page-item .notif-page-content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 8px;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: background 0.18s;
}
.notif-page-item a:hover {
    background: rgba(252, 226, 170, 0.25);
    text-decoration: none;
}
.notif-page-item.is-unread a {
    background: rgba(252, 226, 170, 0.16);
}
.notif-page-item.is-unread .notif-page-content {
    background: rgba(252, 226, 170, 0.16);
}
.notif-page-item.is-active a {
    background: rgba(252, 226, 170, 0.4);
    border-left: 3px solid #c8a96e;
}
.notif-page-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(200, 169, 110, 0.4);
}
.notif-page-body {
    flex: 1;
    overflow: hidden;
}
.notif-page-line {
    margin: 0 0 3px;
    font-size: 15px;
    line-height: 1.4;
}
.notif-page-name {
    font-family: "Lato-Bold", "Lato", sans-serif;
    font-weight: 700;
    color: #1f1f1f;
}
.notif-page-title {
    font-family: "Lato-Regular", "Lato", sans-serif;
    color: #6b6b6b;
}
.notif-page-desc {
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 13px;
    color: #8a8a8a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-page-desc[hidden] {
    display: none;
}
.notif-eligibility-read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b6914e;
    cursor: pointer;
    font-family: "Lato-Bold", "Lato", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.notif-eligibility-read-more:hover,
.notif-eligibility-read-more:focus {
    color: #7a5e25;
}
.notif-eligibility-read-more:disabled {
    cursor: wait;
    opacity: 0.65;
}
.notif-eligibility-read-more .chines {
    margin-right: 1px;
}
.notif-eligibility-read-more .fa {
    font-size: 9px;
}
.notif-page-time {
    font-family: "Lato-Light", "Lato", sans-serif;
    font-size: 12px;
    color: #b6914e;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}
@media (max-width: 575px) {
    .notif-page-time {
        display: none;
    }
    .notif-page-desc {
        white-space: normal;
    }
}
/* Notification dropdown footer — View All link */
.wcfca-notif-footer {
    border-top: 1px solid rgba(200, 169, 110, 0.35);
    padding: 10px 16px;
    text-align: center;
}
.wcfca-notif-view-all {
    font-family: "Lato-Bold", "Lato", sans-serif;
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #b6914e;
    text-decoration: none;
}
.wcfca-notif-view-all:hover {
    color: #9a7a3a;
    text-decoration: none;
}
/* Read All button in dropdown header */
.wcfca-notif-read-all {
    background: none;
    border: 1px solid rgba(200, 169, 110, 0.6);
    border-radius: 3px;
    padding: 3px 9px;
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #b6914e;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}
.wcfca-notif-read-all:hover {
    background: rgba(200, 169, 110, 0.15);
    color: #7a5e25;
}
/* Critic profile notification actions row */
.notif-profile-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 8px 6px;
}
.btn-read-all-notif {
    background: none;
    border: 1px solid rgba(200, 169, 110, 0.6);
    border-radius: 3px;
    padding: 5px 12px;
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #b6914e;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-read-all-notif:hover {
    background: rgba(200, 169, 110, 0.15);
}
.notif-view-all-link {
    font-family: "Lato-Bold", "Lato", sans-serif;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #b6914e;
    text-decoration: none;
}
.notif-view-all-link:hover {
    color: #7a5e25;
    text-decoration: none;
}
/* System (nomination-eligibility) notifications */
/* Let the bilingual system message wrap in full instead of truncating */
.wcfca-notif-item.is-system .wcfca-notif-line,
.wcfca-notif-item.is-system .wcfca-notif-desc,
.notif-page-item.is-system .notif-page-line,
.notif-page-item.is-system .notif-page-desc {
    white-space: normal;
}
.nomination-eligibility-number {
    font-family: "Lato-Black", "Lato-Bold", "Lato", sans-serif;
    font-weight: 900;
    color: inherit;
}
/* Pinned-to-top emphasis */
.wcfca-notif-item.is-pinned a,
.notif-page-item.is-pinned a,
.notif-page-item.is-pinned .notif-page-content {
    background: rgba(252, 226, 170, 0.32);
    border-left: 3px solid #c8a96e;
}
/* Comment section enhancements */
.comment-empty {
    padding: 20px 0;
    color: #888;
    font-size: 14px;
    list-style: none;
}
.comment-success-msg {
    color: #4a7c4a;
    font-size: 14px;
    padding: 8px 12px;
    background: #f0f9f0;
    border: 1px solid #c3e0c3;
    border-radius: 4px;
    margin-bottom: 14px;
}
.comment-error-msg {
    color: #8a2b2b;
    font-size: 14px;
    padding: 8px 12px;
    background: #fff1f1;
    border: 1px solid #e0b5b5;
    border-radius: 4px;
    margin-bottom: 14px;
}
.comment-reply-form-wrap {
    margin: 8px 0 30px 66px;
}
.comment-reply-form textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    min-height: 60px;
    resize: vertical;
}
.comment-delete-btn {
    background: none;
    border: none;
    color: #c44;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    margin-left: 8px;
    padding: 0;
    transition: color 0.2s ease-in-out;
}
.comment-delete-btn:hover {
    color: #a00;
}
.comment-reply-toggle {
    font-size: 12px;
    color: #b6914e;
    margin-left: 10px;
    transition: color 0.2s ease-in-out;
}
.comment-reply-toggle:hover,
.comment-reply-toggle:focus {
    color: #8a6d34;
    text-decoration: underline;
}
.comment-load-more-wrap {
    text-align: center;
    margin: 18px 0;
}
.btn-comment-load-more {
    background: none;
    border: 1px solid rgba(200, 169, 110, 0.6);
    border-radius: 3px;
    padding: 7px 20px;
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 12px;
    letter-spacing: 0.7px;
    color: #b6914e;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-comment-load-more:hover {
    background: rgba(200, 169, 110, 0.12);
}
.btn-comment-load-more:disabled {
    opacity: 0.6;
    cursor: default;
}
.comment-login-prompt {
    margin: 16px 0;
    font-size: 14px;
    color: #666;
}
.comment-login-prompt a {
    color: #b6914e;
    text-decoration: underline;
}

.js-related-review-card,
.js-review-clickable-card,
.js-clickable-card,
.js-latest-review-card,
.js-filmmaker-review-card,
.js-filmmaker-profile-review-card {
    cursor: pointer;
}
/****** End Notifications Page ******/
/****** End Fullscreen Search Overlay ******/
.text-box h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0px !important;
    text-transform: uppercase;
    line-height: 20px;
    letter-spacing: 1.7px;
    margin-bottom: 12px;
}
.text-box h2 a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #222222;
}
.text-box h2 a:hover {
    color: #fce2aa;
}
.text-box ul {
    padding: 0px;
    margin: 0px;
}
.text-box ul li {
    display: inline-block;
    color: #ccc;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-right: 2px;
    margin-bottom: 0px;
}
.text-box ul li:before {
    content: "/";
    color: #aaaaaa;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    margin-right: 5px;
}
.text-box li:first-child:before {
    display: none;
    margin-right: 0;
}
.text-box ul li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #aaaaaa;
}
.text-box ul li a:hover {
    color: #fce2aa;
}
.text-box p.rate i {
    color: #ffba00;
    font-size: 11px;
}
.category-list.open li a {
    position: relative;
}
.category-list.open li a.open.collapsed:after {
    content: "\f067";
    font-family: "FontAwesome";
    position: absolute;
    right: 16px;
    top: 12px;
    font-size: 10px;
}
.category-list.open li a.open:after {
    content: "\f068";
    font-family: "FontAwesome";
    position: absolute;
    right: 16px;
    top: 12px;
    font-size: 10px;
}
#catgor .category-list li a {
    font-family: "Microsoft YaHei Regular";
}
#catgor .category-list.open li a {
    font-size: 14px;
    color: #333333;
    letter-spacing: normal;
    font-weight: 700;
}
.sidebar #catgor .category-list.open li a {
    font-weight: normal;
}
#catgor .category-list.open li .collapse.in a {
    font-weight: 400;
}
.sidebar #catgor .category-list.open li .collapse.in a {
    font-weight: normal;
}
#catgor .category-list.open li a span {
    float: none;
    color: #232323;
}
.sidebar .widget ul.category-list li {
    margin-top: 5px;
}
.sidebar .widget ul.category-list li .category-list.sub li {
    margin-top: 1px;
}
.sidebar .widget ul.category-list li .category-list.sub li a {
    background: #e9e1c8;
    border-top-color: #fff;
    border: none;
    padding: 5px 10px;
}
.sidebar .widget ul.category-list li .category-list.sub li.gray > a {
    background: #f1f1ed;
}
.sidebar .widget ul.category-list li .category-list.sub li a span {
    float: right !important;
}
/* Nomination ballot widget (#catgor): performer/film names can now wrap to more
   than one line, which broke the float-based layout above (wrapped text got
   painted over by the next row's background, and the +/- collapse icon
   overlapped wrapped header text). Flexbox sizes the row to its content instead,
   so floats on the theme rules above no longer apply to these rows. */
#catgor .category-list-main > li > a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 8px;
    padding-right: 34px;
}
/* The category title wraps to two lines (Chinese + English), so the
   +/- collapse icon's fixed top offset no longer sits centered against the
   row; center it against the row height instead regardless of label height. */
#catgor .category-list-main > li > a.open.collapsed:after,
#catgor .category-list-main > li > a.open:after {
    top: 50%;
    transform: translateY(-50%);
}
#catgor .category-list-main > li > a > span {
    float: none;
}
#catgor .category-list-main > li > a .js-nomination-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
/* Long category names truncate with an ellipsis instead of wrapping the
   count badge onto its own line; the full name is available via title
   attribute on hover. */
#catgor .category-list-main > li > a .js-nomination-label .chines,
#catgor .category-list-main > li > a .js-nomination-label .eng_wrd {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#catgor .category-list-main > li > a .js-nomination-label .eng_wrd {
    display: block;
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
}
/* Empty-state row's English line otherwise inherits the sidebar link's
   bold black default; match the category title's English line instead. */
#catgor .category-list.sub li.nomination-empty a .eng_wrd {
    font-family: "Lato-Regular", "Lato", sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0;
    text-transform: capitalize;
    color: rgba(0, 0, 0, 0.5);
    font-style: normal;
}
#catgor .category-list-main > li > a .js-nomination-count {
    flex-shrink: 0;
    white-space: nowrap;
    font-family: "Lato-Regular", "Lato", sans-serif;
}
/* The site-wide a:hover rule recolors .chines/.eng_wrd (the title) but the
   count badge is plain text, not one of those spans, so it never matched;
   give it the same hover color explicitly. */
#catgor .category-list-main > li > a:hover .js-nomination-count,
#catgor .category-list-main > li > a:focus .js-nomination-count {
    color: #877756;
}
#catgor .category-list.sub li a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 6px;
    text-align: left;
}
/* Rank number stays a fixed-width column so wrapped name/film text lines up
   under the name itself instead of jumping back to the number's left edge. */
#catgor .category-list.sub li a .js-nomination-rank {
    flex-shrink: 0;
}
#catgor .category-list.sub li a .js-nomination-content {
    display: flex;
    flex-direction: column;
    row-gap: 0px;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
/* Name (English) always sits on its own line, truncated with an ellipsis
   if it's too long to fit - the title attribute on the span shows the full
   text as a tooltip on hover. */
#catgor .category-list.sub li a .js-nomination-name {
    float: none;
    font-family: "Lato-Regular", "Lato", sans-serif;
    text-transform: capitalize;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 0 -4px 0;
}
a.parent-nomination-empty {
    padding-left: 19px !important;
}
/* Film titles keep their stored mixed case instead of the sidebar's default
   all-caps link styling, and match the same font family used by the
   category headers and performer names. Chinese titles fall back to the
   site's Noto Sans SC webfont instead of the browser's default sans-serif.
   Always shown on its own line below the name; the opening/closing brackets
   stay put and the title inside them truncates with an ellipsis so the
   closing bracket is never cut off - the title attribute shows the full
   text as a tooltip. */
#catgor .category-list.sub li a .js-nomination-film {
    display: flex;
    align-items: baseline;
    font-family: "Noto Sans SC", sans-serif;
    text-transform: none;
    margin: 0 0 0 -7px;
    min-width: 0;
    max-width: 100%;
    font-size: 11px;
}
/* Film-only rows (no performer/song name line above) show the film title as
   the row's sole line of text - the nomination ballot sidebar widget (shown
   on both critic-profile.blade.php and my-nomination-ballot.blade.php) bumps
   this to 13px for readability; two-line rows (name + film title) keep the
   11px size above. */
#catgor.is-profile-sidebar-ballot
    .category-list.sub
    li
    a
    .js-nomination-content.is-film-only
    .js-nomination-film {
    font-size: 13px;
}
#catgor .category-list.sub li a .js-nomination-film-text {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
/* Unranked/over-cap entry (rank + score hidden via .gray) - film title text
   only, dimmed to distinguish it from the scored/ranked rows above it. */
#catgor .category-list.sub li.gray a .js-nomination-film,
#catgor .category-list.sub li.gray a .js-nomination-film-text {
    color: #666666;
}
/* Critic-profile ballot nominations shown without a visible rank use dark
   grey for both the nomination and its film title. */
#catgor.is-profile-sidebar-ballot
    .category-list.sub
    li.gray
    a
    .js-nomination-name,
#catgor.is-profile-sidebar-ballot
    .category-list.sub
    li.gray
    a
    .js-nomination-film,
#catgor.is-profile-sidebar-ballot
    .category-list.sub
    li.gray
    a
    .js-nomination-film-text {
    color: #676767;
}
/* Drag-to-reorder handle (ballot owner only): the handle lives inside the row
   box and only surfaces on hover — the row content recedes to the background
   while the handle shows on top. Shared by the critic-profile sidebar and the
   my-nomination-ballot page. */
#catgor .category-list.sub li.js-nomination-item {
    position: relative;
}
#catgor .js-nomination-list.is-sortable .js-nomination-item > a {
    padding-right: 34px;
    transition: opacity 0.15s ease-in-out;
}
.js-nomination-handle {
    cursor: move;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 2;
    width: 24px;
    text-align: center;
    color: #232323;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
.js-nomination-item:hover .js-nomination-handle {
    opacity: 1;
}
.js-nomination-list.is-sortable .js-nomination-item:hover > a {
    opacity: 0.45;
}
.js-nomination-item.sortable-ghost {
    opacity: 0.4;
}
.js-nomination-item.sortable-chosen a {
    background: rgba(0, 0, 0, 0.03);
}
.sidebar .widget ul.category-list li .category-list.sub li:last-child a {
    text-align: right;
    position: relative;
}
/* .sidebar .widget ul.category-list li .category-list.sub li:last-child a:before {
    content: "\f040";
    font-family: "FontAwesome";
    position: absolute;
    right: 73px;
    top: 9px;
    font-size: 10px;
} */
.category-widget.widget .post_head .chines.large {
    font-size: 36px;
}
.category-widget.widget .post_head .chines.small {
    font-size: 18px;
}
.chines.cat_litle {
    text-align: center;
}
.chines.cat_litle {
    margin: 5px 0 15px 0;
    position: relative;
    font-size: 18px;
}
.chines.cat_litle h1 {
    position: relative;
    font-size: 18px;
    display: inline-flex;
    background: #fff;
    margin: 0;
    justify-content: center;
    align-items: center;
}
/* The nomination-ballot sidebar dividers ("REGULAR AWARDS" / "SPECIAL
   AWARDS") sit left-aligned with the rest of the sidebar instead of the
   default centered divider style. */
#catgor .chines.cat_litle {
    text-align: left;
}
#catgor .chines.cat_litle h1 {
    justify-content: flex-start;
}
/* The nomination-ballot sidebar dividers ("REGULAR AWARDS" / "SPECIAL
   AWARDS") no longer show the dotted rule either side of the title. */
#catgor .chines.cat_litle:after,
#catgor .chines.cat_litle:before {
    content: none;
}
.chines.cat_litle h1 .eng_wrd {
    display: inline-block;
    font-size: 13px;
    margin-left: 4px;
    color: inherit;
    font-family: "Lato-bold", "Lato", sans-serif;
    text-transform: uppercase;
}
.chines.cat_litle.bot {
    margin: 16px 0 15px 0;
}
.view_full {
    float: left;
    width: 100%;
}
.view_full a {
    font-weight: bold;
    padding: 25px 0px 15px 35px;
    float: left;
    line-height: 18px;
    color: #999999;
    font-size: 13px;
}
.view_full a .chines {
    font-size: 17px;
}
.view_full i {
    background: #999999;
    color: #fff;
    padding: 15px;
    border-radius: 100px;
    height: 40px;
    width: 40px;
    margin: 24px 10px 11px 10px;
}
.post_head .view_full {
    float: right;
    width: auto;
    margin-top: 50px;
}
.post_head .view_full a {
    color: #3e3c3a;
}
.main-block-section .block-box .block-part .cus_post .blog-post .blog-content {
    border-top: 1px solid #e4e4e4;
}
.main-block-section
    .block-box
    .block-part
    .cus_post
    .blog-post
    .blog-content
    p.rate {
    border: none;
    margin: 0px;
    padding: 0 0 4px 0;
    line-height: 12px;
}
.main-block-section
    .block-box
    .block-part
    .cus_post
    .blog-post
    .blog-content
    ul
    li {
    margin-bottom: 0px;
}
.main-block-section
    .block-box
    .block-part
    .cus_post
    .blog-post
    .blog-content
    h2 {
    margin-bottom: 2px;
}
.user_info_area {
    background: #d6d6d6;
    width: 100%;
    height: 118px;
    position: relative;
}
.userinfo-wrap {
    display: table;
}
.user_info {
    float: none;
    display: table-cell;
    vertical-align: middle;
}
.user_avtar img {
    border-radius: 50%;
    border: 3px solid;
    box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.35);
    border: 3px solid #ffffff;
    width: 115px;
    height: 118px;
    object-fit: cover;
    object-position: center;
}
.main-block-section .block-box .block-part .blog-post.mess iframe {
    width: 100%;
}
.user_avtar {
    margin-right: 20px;
}
.user_info .chines {
    margin-top: 20px;
    border-right: 1px solid #877756;
    font-size: 15px;
    color: #050505;
    padding: 0px 15px;
    text-align: left;
}
.userfilm-review h2 {
    margin-top: 0px;
    margin-bottom: 3px;
}
.userfilm-review h2 a {
    color: #333;
}
.userfilm-review h2 a:hover {
    text-decoration: none;
}
span.n-s-tc-imp.NotoSerifTC-900.gallery-film-title {
    display: block;
    max-width: 340px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
h2.username {
    margin-top: 0px;
    text-transform: capitalize;
    font-family: "PlayfairDisplay-MediumItalic";
    font-size: 30px;
    line-height: 33px;
    margin-bottom: 3px;
    font-style: italic;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 310px;
    white-space: nowrap;
    padding: 0 0 7px 2px;
}
h2.username:not(.cw-name) {
    font-family: "Noto Serif SC", serif;
    font-weight: 700;
    font-style: normal;
}
.filmmaker-display-name--chinese {
    font-family: "Noto Serif SC", serif;
    font-weight: 700;
    font-style: normal;
}
.filmmaker-display-name--english {
    font-family: "PlayfairDisplay-MediumItalic", Georgia, serif;
    font-weight: 400;
    font-style: italic;
}
h4.critics-type,
.critics-type a {
    font-size: 14px;
    color: #676767;
    font-family: "Lato-Regular";
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    text-transform: uppercase;
    margin-top: 3px;
}
.critics-type a:hover {
    text-decoration: none;
}
.edit-float-right {
    display: inline-flex !important;
    align-items: center;
    text-transform: none !important;
    white-space: nowrap;
    transition: all 0.2s ease;
    text-decoration: none !important;
    vertical-align: middle;
    margin-bottom: 10px !important;
}
.edit-float-right:hover {
    color: #333 !important;
    border-color: #888 !important;
    background-color: #f5f5f5;
    text-decoration: none !important;
}
.edit-float-right .fa {
    font-size: 14px;
    color: #888;
}
.join-date {
    font-size: 12px;
    color: #676767;
    font-family: "Lato-Regular";
    letter-spacing: 0.5px;
    margin-bottom: 0px;
    text-transform: uppercase;
}
.user_info .chines h2 {
    margin: 5px;
    font-size: 30px;
    font-family: "Noto Serif TC 700", sans-serif;
    text-transform: uppercase;
}
.user_tagline {
    float: left;
    width: 87%;
    margin-top: 10px;
}
.user_tagline p {
    color: #fce2aa;
    font-size: 16px;
}
.user-profile-info {
    align-items: stretch;
    display: flex;
    justify-content: end;
    padding: 40px 0 8px;
    position: relative;
}
.upi-rlar.u-lang.rightDive {
    padding-right: 0;
}
.filemaker-profile-info {
    display: flex;
    align-items: center;
    padding: 25px 0;
    position: relative;
}
/* Film-profile page only: size the outer statistics row to the banner while
   preserving each statistic's existing internal presentation. */
.filemaker-profile-info.filmprofile-info {
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    width: 100%;
}
.filmmaker-profile-stats-col {
    align-items: center;
    display: flex;
    height: 118px;
    padding-left: 15px;
    padding-right: 5px;
}
.filmmaker-profile-stats-col .filemaker-profile-info {
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    width: 100%;
}
.filmmaker-profile-stats-col .filemaker-profile-info .upi-rlar {
    align-items: center;
    border-left-color: #5b5957;
    display: flex;
    flex-direction: column;
    height: 68px;
    justify-content: center;
    min-height: 68px;
    vertical-align: middle;
}
.filmmaker-profile-stats-col .filemaker-profile-info .award-stat .ch-lang,
.filmmaker-profile-stats-col .filemaker-profile-info .avg-rat .ch-lang,
.filmmaker-profile-stats-col .filemaker-profile-info .avg-rat .en-lang {
    white-space: nowrap;
}
.filmmaker-profile-stats-col .filemaker-profile-info .upi-rlar:first-child {
    border-left: none;
}
@media screen and (max-width: 767px) {
    .filmmaker-profile-stats-col {
        height: auto;
        justify-content: center;
        padding-left: 15px;
        padding-right: 15px;
    }
    .filmmaker-profile-stats-col .filemaker-profile-info {
        justify-content: center;
        padding: 18px 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .filmmaker-profile-stats-col .filemaker-profile-info .upi-rlar {
        padding-left: 8px;
        padding-right: 8px;
    }
}
.upi-rlar {
    display: table-cell;
    vertical-align: top;
    padding: 0 20px;
    border-right: 1px solid #5b5957;
    text-align: center;
}
.user-profile-info .upi-rlar {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 68px;
    padding: 0 18px;
    vertical-align: middle;
}
.upi-rlar:first-child {
    padding-left: 0;
}
.upi-rlar:last-child {
    border-right: 0px;
}
.filemaker-profile-info .upi-rlar {
    display: block;
    vertical-align: unset;
    padding: 0px 20px;
    border-right: none;
    border-left: 1px solid #e3e3e3;
}
.filemaker-profile-info .cert-img {
    border-left: none;
    flex: 0 0 68px;
    min-width: 68px;
    padding-left: 0;
    padding-right: 15px;
}
.filemaker-profile-info .cert-img img {
    height: 68px;
    object-fit: contain;
    width: auto;
}
.user-profile-info .critic-profile-tier-badge {
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 15px;
}
/* The tier-badge component marks itself "is-empty" (plus a `hidden` attribute)
   when the critic has no badge, but the flex `display` above was overriding
   the `hidden` attribute's UA style, leaving an empty cell whose border-right
   divider still rendered with nothing to its left. Hide it outright instead. */
.user-profile-info .critic-profile-tier-badge.is-empty {
    display: none;
}
.user-profile-info .critic-profile-tier-badge[hidden] {
    display: none !important;
}
.critic-tier-badge-img {
    display: block;
    height: 69px;
    object-fit: contain;
    width: auto;
}
.user-profile-info .critic-profile-tier-badge .critic-tier-badge-img {
    height: 64px;
}
.filemaker-profile-info .reviews-stat .ch-lang .chines,
.filmmaker-week-featured-card .reviews-stat .cw-stat-cn .chines {
    font-size: 0;
}
.filemaker-profile-info .reviews-stat .ch-lang .chines:after,
.filmmaker-week-featured-card .reviews-stat .cw-stat-cn .chines:after {
    content: "Reviews";
    font-size: 14px;
}
.filmmaker-week-featured-card .reviews-stat .cw-stat-cn .chines:after {
    font-size: 13px;
}
.upi-rlar p.ch-lang {
    margin-bottom: 5px;
}
.upi-rlar p.ch-lang .chines {
    font-size: 14px;
}
.user-profile-info .upi-rlar p.ch-lang .chines,
.user-profile-info .upi-rlar .en-lang {
    white-space: nowrap;
}
.upi-rlar .user-total {
    font-size: 24px;
    color: #000000;
    margin-bottom: 2px;
    font-family: "Lato-Bold";
}
.upi-rlar .en-lang {
    font-size: 10px;
    color: #666666;
    margin-bottom: 0px;
    font-family: "Lato-Bold";
    text-transform: uppercase;
}
.post-review {
    text-align: center;
}
.post-ar-btn span {
    display: block;
}
.post-ar-btn .chines {
    font-size: 20px;
}
a.post-ar-btn {
    display: block;
}
a.post-ar-btn:hover,
a.post-ar-btn:focus {
    text-decoration: none;
    color: #666666;
}
.post-ar-btn img {
    margin: 0 auto;
}
.post-review {
    text-align: center;
    /* margin-top: -25px; */
}
.post-ar-btn .eng_wrd {
    font-size: 8px;
    color: #777777;
    margin-bottom: 0px;
    letter-spacing: 0.6px;
    font-family: "Lato-Black", "Lato-Bold", sans-serif;
}
/* Anchored to the right edge of the col-sm-4 stats column (75% of the
   container) instead of a hardcoded left offset, so it lines up with the
   critics-intro edit button below (col-md-9, same 75% container mark) at
   every breakpoint. Container width is capped by the site-wide
   `.container { max-width: 990px }` override, so the calc() targets differ
   from stock Bootstrap's 750/970/1170px container widths. */
.critics-dropdown {
    position: absolute;
    left: auto;
    top: 0;
    z-index: 99;
}
@media (min-width: 768px) {
    .critics-dropdown {
        right: calc(50% - 172.5px);
    }
}
@media (min-width: 992px) {
    .critics-dropdown {
        right: calc(50% - 227.5px);
    }
}
@media (min-width: 1200px) {
    .critics-dropdown {
        right: calc(50% - 232.5px);
    }
}
.critics-dropdown button.btn {
    border: 0;
    border-radius: 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 5px 30px;
    font-family: "Microsoft YaHei Regular";
}
.critics-dropdown button.btn:hover {
    background: #fff;
    box-shadow: none;
}
.critics-dropdown.open .dropdown-toggle {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff;
    border-color: transparent;
}
.caret {
    border-top: 6px solid #ccc;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}
.critics-sec {
    padding: 40px 0;
}
.cp-top {
    display: table;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 15px;
}
.critics-profile {
    margin-bottom: 40px;
}
.cp-title {
    display: table-cell;
    vertical-align: bottom;
}
.cp-editbtn {
    display: table-cell;
    text-align: right;
    vertical-align: bottom;
}
.view_full-wrap {
    display: table-cell;
    text-align: right;
    vertical-align: bottom;
}
.cp-title .chines {
    font-size: 24px;
    display: block;
}
.cp-title .eng_wrd {
    font-size: 14px;
    color: #666666;
    margin-bottom: 0px;
    font-family: "Lato-Black";
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.cp-editbtn a {
    font-size: 14px;
    color: #333333;
}
.table-borderless tbody + tbody,
.table-borderless td,
.table-borderless th,
.table-borderless thead th {
    border: 0;
    border-top: 0 !important;
}
.cp-content .table tr td {
    font-family: "Noto Sans SC", sans-serif;
    font-size: 14px;
    color: #333333;
    padding: 3px 5px;
}
.cp-content .table tr td:first-of-type {
    width: 80px;
    padding-left: 0px;
    padding-right: 0px;
}
.view_full-btn {
    display: inline-block;
}
.view_full-btn a {
    display: inline-block;
}
.view_full-btn a::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
}
.view_full-btn a .chines {
    font-size: 16px;
    font-weight: 700;
}
.view_full-btn a {
    font-size: 11px;
    color: #666666;
    margin-bottom: 0px;
    font-family: "Lato-Bold";
    position: relative;
    display: inline-block;
    padding: 5px 0px 0 10px;
    text-align: left;
    width: 125px;
}
#critic-full-ballot-link {
    width: 165px;
}
.view_full-btn a span {
    display: block;
}
.view_full-btn a:hover {
    text-decoration: none;
}
.view_full-btn a:after {
    content: "\f054";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    position: absolute;
    left: calc(100% - 50px);
    top: calc(50% + 5px);
    transform: translateY(-50%);
    background: #999999;
    color: #fff;
    padding: 13px;
    border-radius: 100px;
    height: 38px;
    width: 38px;
    margin: 0px 0px 0px 10px;
    display: block;
    text-align: center;
}
.critics-rev-dropdown {
    position: absolute;
    left: 60%;
    bottom: 0;
    z-index: 99;
}
.critics-rev-dropdown button.btn {
    border: 0;
    border-radius: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 5px 30px;
    font-family: "Microsoft YaHei Regular";
}
.critics-rev-dropdown button.btn:hover {
    background: #fff;
    box-shadow: none;
}
.critics-rev-dropdown.open .dropdown-toggle {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff;
    border-color: transparent;
}
.film-review span {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
}
.userfilm-review h4.critics-type {
    margin-top: 3px;
}
.film-review-links {
    margin-top: 30px;
}
.frl-btn {
    margin-top: 37px;
}
.filmreview-btn-wrap {
    display: inline-block;
    padding: 0 5px;
}
.filmreview-btn-wrap .view_full-btn a {
    text-align: right;
}
.filmreview-btn-wrap .view_full-btn a .chines {
    font-size: 15px;
}
.view_full-btn a:hover,
.view_full-btn a:focus {
    text-decoration: none;
}
.view_full-btn a.view-all-disabled,
.view_full-btn a.view-all-disabled:hover,
.view_full-btn a.view-all-disabled:focus {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}
.view_full-btn a.btn-back:after {
    transform: rotate(180deg);
    top: 6px;
}
.view_full-btn a.btn-review-posted:after {
    transform: rotate(90deg);
    top: 6px;
}
/* The sidebar return action on the nomination ballot has a fixed width at every
   breakpoint. The class keeps this size local to that one page and leaves the
   shared review, gallery, and ranking Back buttons unchanged. */
.view_full-btn a.nomination-ballot-back-link {
    width: 175px;
}
.filmreview-btn-wrap .view_full-btn a {
    padding: 7px 50px 0 0px;
}

/* Gallery and review banners: the count action and the Back action sit side by
   side, and each one's arrow circle is pinned to the top of its own link. A
   label that wraps therefore makes one link taller than the other and knocks
   the two circles - and the text beside them - out of line, which is why the
   labels are held on a single line each. */
.film-gallery-head .filmreview-btn-wrap .view_full-btn a span,
.film-review-head .filmreview-btn-wrap .view_full-btn a span {
    white-space: nowrap;
}

/* The gallery banner lines these up with flex; the review banner leaves them as
   inline-blocks, which default to baseline alignment. */
.film-review-head .filmreview-btn-wrap {
    vertical-align: top;
}

/* .view_full-btn a is 125px wide by default, which is narrower than the review
   count label - it used to wrap onto a third line and push the arrow out of
   line with Back. Widened to fit the label on one line, matching how the
   gallery banner sizes its own count action. */
.film-review-head .filmreview-btn-wrap .view_full-btn a.btn-review-posted {
    min-width: 190px;
}

/* Back only ever holds 返回 / BACK, so it gives its unused width back to the
   count action above and keeps both on one row. Same width the gallery banner
   already uses for this button. */
.film-review-head .filmreview-btn-wrap .view_full-btn a.btn-back {
    width: 85px;
}

/* Film review banner: same one-row treatment as the gallery banner below, so a
   long film title can no longer run into the review-count action. Floated
   Bootstrap columns let the title block and the actions block overlap; laying
   the row out with flex makes them share the width instead. */
@media (min-width: 768px) {
    .film-review-head .container > .row {
        align-items: center;
        display: flex;
    }

    /* Bootstrap's 6/4/2 split cannot hold the poster, a full-width title, both
       actions and Post a review at once, so the film block simply overflowed
       its column and ran underneath the review count. Sizing the columns from
       their content instead lets the film block take what is left over and the
       title's existing ellipsis handle the overflow. */
    .film-review-head .container > .row > div {
        flex: 0 0 auto;
        width: auto;
    }

    .film-review-head .container > .row > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .film-review-head .film-wrap {
        max-width: 100%;
    }

    /* The gallery banner gets its tight poster gutter by letting the table
       squeeze the cell while the 115px margin overflows invisibly, but that
       only works because img-responsive lets the poster itself shrink - on
       this busier row it shrank the poster instead of the title. The review
       banner therefore states the gutter it wants and holds the poster at its
       real size, which leaves exactly enough room for the full 340px title. */
    .film-review-head .film-poster img {
        margin-right: 30px;
        min-width: 90px;
    }

    /* The title carried a fixed 340px width, which the table had to honour, so
       the poster column could not give up any of its 115px gutter and the
       block overflowed into the review count. As a max-width the table can
       squeeze the gutter instead - exactly what the gallery banner's title
       already does - and the ellipsis still handles genuinely long titles.
       Full selector so it outweighs the fixed width set further down. */
    .film-review-head span.n-s-tc-imp.NotoSerifTC-900.review-movietitle {
        max-width: 340px;
        width: auto;
    }

    .film-review-head .userfilm-review .critics-type,
    .film-review-head .userfilm-review .film-cl {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .film-review-head .film-review-links.frl-btn {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: -17px;
    }

    #film-reviews-banner .film-review-head .post-review {
        padding: 0 0 22px 0;
    }
}

/* Tablet widths cannot fit the poster, a full-width title, both actions and
   Post a review side by side, so the title (and the two lines under it) take
   whatever the row has left and truncate with the ellipsis they already carry
   instead of running under the review count. The container is a fixed 750px
   across this whole range, so the cap is a fixed width too; the poster gutter
   gives up most of its 115px here as well. From 992px up the container is
   970px and the full 340px title always fits. */
@media (min-width: 768px) and (max-width: 991px) {
    .film-review-head .film-poster img {
        margin-right: 20px;
    }

    .film-review-head span.n-s-tc-imp.NotoSerifTC-900.review-movietitle,
    .film-review-head .userfilm-review .critics-type,
    .film-review-head .userfilm-review .film-cl {
        max-width: 120px;
    }
}

/* Film gallery banner: keep the collected-photos and back actions on one
   aligned row at the far right. The shared button width is too narrow for the
   Chinese photo-count label, which made it wrap and pushed the Back action
   below it. */
@media (min-width: 768px) {
    .film-gallery-head .container > .row {
        align-items: center;
        display: flex;
    }

    .film-gallery-head .film-gallery-actions {
        margin-left: auto;
    }

    .film-gallery-head .film-review-links.frl-btn {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: -20px;
    }

    .film-gallery-head .filmreview-btn-wrap {
        padding: 0;
    }

    .film-gallery-head .filmreview-btn-wrap .view_full-btn a.btn-review-posted {
        min-width: 140px;
    }

    .film-gallery-head .filmreview-btn-wrap .view_full-btn a.btn-back {
        width: 85px;
    }
}

/* Film gallery banner desktop poster: the base .film-poster img rule leaves a
   115px gutter meant for other pages, which reads as a large, uneven gap next
   to the title here. The film-review-head banner solves the same layout with
   its own scoped 20-30px gutter; this ports that fix to the gallery banner's
   own poster only, at the same 20px the film-review-head banner already uses
   at tablet widths. */
@media (min-width: 768px) {
    .film-gallery-head .film-poster img.film-gallery-poster-img {
        margin-right: 20px;
    }
}

@media (max-width: 767px) {
    .film-gallery-head .film-gallery-actions {
        float: none;
        height: 118px;
        width: 100%;
    }

    /* The Back action is desktop-only elsewhere, but it remains available in
       the gallery banner so visitors can return to the film profile. */
    .film-gallery-head .filmreview-btn-wrap.d-view {
        display: inline-block;
    }

    .film-gallery-head .film-review-links.frl-btn {
        align-items: center;
        display: flex;
        gap: 10px;
        height: 100%;
        justify-content: flex-end;
        margin: 0;
        padding: 0 80px 20px 0;
    }

    .film-gallery-head .filmreview-btn-wrap {
        padding: 0;
    }

    .film-gallery-head .filmreview-btn-wrap .view_full-btn a.btn-review-posted {
        min-width: 180px;
    }

    .film-gallery-head .filmreview-btn-wrap .view_full-btn a.btn-back {
        width: 85px;
    }
}
.d-inline {
    display: inline-block !important;
}
.filmography-main {
    margin-bottom: 30px;
}
.film-wrap img {
    width: 132px;
    height: 196px;
    box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.35);
    border: 3px solid #ffffff;
}
.film-wrap img.critic-favourite-film-poster {
    object-fit: cover;
    object-position: center;
}
.dummy-poster-link {
    display: block;
}
.dummy-film-poster {
    width: 132px;
    height: 196px;
    background: linear-gradient(160deg, #1a1a2e 0%, #2d2d5e 50%, #1a1a2e 100%);
    box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.35);
    border: 3px solid #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
}
.dummy-film-icon {
    font-size: 28px;
    opacity: 0.7;
}
.dummy-film-label {
    color: #d4af37;
    font-size: 9px;
    text-align: center;
    padding: 0 8px;
    line-height: 1.5;
    font-family: "Lato-Black", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.film-title {
    margin-top: 15px;
    text-align: center;
    display: block;
}
.film-title a:hover {
    text-decoration: none;
}
.film-title span {
    display: block;
}
.film-title .chines {
    color: #333333;
    font-family: "Noto Sans SC bold", "Noto Sans SC", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
}
.film-title .eng_wrd {
    color: #999999;
    font-family: "Lato-Regular";
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
}
.preview-title {
    position: relative;
    padding-left: 45px;
    margin-bottom: 15px;
    width: 100%;
    display: block;
}
.preview-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background: #666666;
}
.preview-title .chines {
    font-size: 20px;
    line-height: 18px;
    font-weight: 700;
    margin-bottom: 2px;
    color: #4a4a4a;
    font-family: "Noto Serif SC", serif !important;
}
.preview-title .eng_wrd {
    font-size: 10px;
    line-height: 14px;
    color: #666666;
    margin-bottom: 0px;
    font-family: "Lato-Regular";
    text-transform: uppercase;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-40 {
    margin-bottom: 40px !important;
}
.mt-0 {
    margin-top: 0;
}
.actor-title {
    margin-bottom: 7px;
}
.actor-title,
.actor-title a {
    color: #666666;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    font-family: "Lato-Regular";
    margin: 2px 0 0;
}
.actor-title a:hover {
    text-decoration: none;
}

.actor-title.nomination-filmmaker-name,
.actor-title.nomination-filmmaker-name a,
.bsc-title.nomination-filmmaker-name,
.bsc-title.nomination-filmmaker-name a {
    color: #333333;
}

.nomination-filmmaker-film-title .chines {
    color: #666666;
}

.bsc-title.nomination-song-name,
.bsc-title.nomination-song-name a {
    color: #333333;
}

.nomination-song-film-title .chines {
    color: #666666;
}

.dotted-title {
    display: block;
    margin: 20px 0;
}
.dotted-title-inner {
    display: inline-block;
    position: relative;
    padding: 0 50px;
    margin: 0;
}
.dotted-title-inner .chines {
    color: #636363;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 2.4px;
}
.dotted-title-inner:before {
    content: url("../images/left-dotted.png");
    position: absolute;
    top: -7px;
    left: 0px;
}
.dotted-title-inner:after {
    content: url("../images/right-dotted.png");
    position: absolute;
    top: -7px;
    right: 0px;
}
.song-title,
.bsc-title {
    margin-top: 20px;
    margin-bottom: 7px;
}
.song-title,
.song-title a,
.bsc-title a,
.bsc-title {
    color: #666666;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    font-family: "Lato-Regular";
    text-align: center;
}
.song-title a,
.bsc-title a {
    text-decoration: none;
}
.post-a-review-head-img img {
    position: relative;
    margin-top: -21px;
    float: left;
}
.mb-7 {
    margin-bottom: 7px;
}
/* Best Screen Couple preview: three couples per row, each shown as two
   overlapping circular performer photos. */
.bsc-couple-list > .row {
    display: flex;
    flex-wrap: wrap;
}
.bsc-couple-col {
    float: none;
    margin-bottom: 25px;
}
.bsc-couple-inner {
    text-align: center;
}
.bsc-couple-avatars {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.bsc-couple-photo {
    display: inline-block;
    line-height: 0;
}
.bsc-couple-photo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 3px solid #ffffff;
    box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.25);
    background: #ffffff;
}
.bsc-couple-photo {
    position: relative;
    z-index: 1;
    transition: transform 0.2s ease-in-out;
}
.bsc-couple-photo + .bsc-couple-photo {
    margin-left: -30px;
}
/* On hover, lift the photo above its overlapping sibling so it shows in full. */
.bsc-couple-photo:hover {
    z-index: 3;
    transform: scale(1.08);
}
/* Film name shown below the couple photos as: Chinese title, English title on the next line. */
.bsc-couple-film .chines,
.nomination-preview-film .chines {
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bsc-couple-film .eng_wrd,
.nomination-preview-film .eng_wrd {
    display: block;
    font-family: "Lato-Regular";
    color: #999999;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media only screen and (min-width: 768px) and (max-width: 1198px) {
    .header_bottom .navbar-nav li a {
        padding: 16px 17.5px 6px !important;
    }
}
@media (min-width: 1024px) {
    .film-photo-gallery .col-md-20 {
        width: 20%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 0;
        padding-left: 10px;
        margin: 0 0 10px;
    }
    .col-md-20 {
        width: 20%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 0;
        padding-left: 10px;
    }
}
@media (min-width: 1280px) {
    .ten-columns > .col-10-2 {
        width: 20%;
    }
}
.messonary {
    background: #f8f8f8;
    padding: 40px 0;
    float: left;
    width: 100%;
}
footer {
    float: left;
    width: 100%;
}
.subscribe-section {
    float: left;
    width: 100%;
}
.main-block-section .block-box .block-part .blog-post.mess {
    float: left;
    /* Without an explicit width, this shrink-wraps to whatever width its
       child image naturally wants (varies per review, since the image inside
       is `width:100%` of THIS box) instead of filling its Masonry grid-item
       column - different images then rendered at different widths and spilled
       into the next column. */
    width: 100%;
    box-sizing: border-box;
}
.main-block-section .block-box .block-part .blog-post.mess .blog-content {
    padding: 16px 10px 26px;
    float: left;
    background: #fff;
    width: 100%;
    position: relative;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .date-post {
    /* Absolutely positioned (not floated) so its own height never stretches
       .blog-content taller than content_post's actual content - otherwise a
       rating-only review (short content_post) inherits date-post's ~108px
       height instead of its own, breaking the 26px trailing space below. */
    position: absolute;
    top: 16px;
    left: 10px;
    width: 60px;
    text-align: center;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .date-post
    span {
    display: block;
    color: #222222;
    font-size: 30px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    margin: 0 0 2px;
    padding-bottom: 2px;
    border-bottom: 1px dotted #c0c0c0;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .date-post
    p {
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
    color: #333333;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .content_post {
    margin-left: 80px;
}
#my-reviews-container .blog-post.mess .blog-content .date-post {
    width: 44px;
}
#my-reviews-container .blog-post.mess .blog-content .date-post span {
    font-size: 22px;
    line-height: 1;
}
#my-reviews-container .blog-post.mess .blog-content .date-post p {
    font-size: 10px;
    line-height: 1.4;
}
#my-reviews-container .blog-post.mess .blog-content .content_post {
    margin-left: 54px;
}
#my-reviews-container .content_post ul.post-tags {
    list-style: none;
    padding: 0;
    margin: 0 0 3px;
    line-height: 1.3;
}
#my-reviews-container .content_post ul.post-tags li {
    display: inline;
}
#my-reviews-container .content_post ul.post-tags li a,
#my-reviews-container .content_post ul.post-tags li span.by-labeltext {
    color: #aaa;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-decoration: none;
}
#my-reviews-container .content_post ul.post-tags li span.by-labeltext {
    color: #ccc;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .content_post
    p.single-review-text.my-review-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: auto;
    max-height: 60px;
    margin: 3px 0;
    color: #666;
    font-size: 11px;
    line-height: 1.5;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .content_post
    a {
    display: inline-block;
    text-decoration: none;
    color: #cccccc;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .content_post
    > a:hover {
    color: #222222;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .content_post
    > a.my-review-read-more {
    display: none;
    margin: 5px 0 0;
}
#my-reviews-container
    .blog-post.mess
    .blog-content
    .content_post
    > a.my-review-read-more {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #bbb;
    letter-spacing: 0.5px;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .content_post
    > a.my-review-read-more.is-visible {
    display: inline-block;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .content_post
    > a.my-review-read-more.is-hidden {
    display: none;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .content_post
    h2 {
    margin: 0px;
    overflow: hidden;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .content_post
    h2
    a,
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    .content_post
    h2
    > span {
    display: block;
    margin: 0px;
    color: #222222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 20px;
    letter-spacing: 1.7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#my-reviews-container .blog-post.mess .blog-content .content_post h2 {
    margin: 0 0 4px;
}
#my-reviews-container .blog-post.mess .blog-content .content_post h2 a,
#my-reviews-container .blog-post.mess .blog-content .content_post h2 > span {
    font-size: 12px;
    letter-spacing: 0.8px;
    line-height: 1.4;
}
.main-block-section
    .block-box
    .block-part
    .blog-post.mess
    .blog-content
    p.rate {
    border: none;
    padding: 0px;
    margin: 0px;
    height: 36px;
}
.show-more {
    display: table;
    margin: 0px auto;
}
.show-more a.button-two {
    color: #333333;
    font-size: 12px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.7px;
    padding: 12px 48px;
    border: 1px solid transparent;
    background: #fce2aa;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.show-more a.button-two:hover {
    color: #333333 !important;
    opacity: 0.7;
}
.show-more a.button-two:active {
    color: #333333 !important;
    opacity: 0.7;
}
.show-more a.button-two:focus {
    color: #333333 !important;
    opacity: 0.7;
}
.carousel-arrows.owl-arrows.revur_area ul {
    margin: 0px;
    padding: 0;
    list-style: none;
}
.carousel-arrows.owl-arrows.revur_area ul li {
    float: left;
    margin-left: 20px;
}
.carousel-arrows.owl-arrows.revur_area ul li span {
    float: left;
}
.carousel-arrows.owl-arrows.revur_area ul li span.engli {
    color: #9b8b69;
    font-weight: bold;
    font-size: 11px;
    float: right;
}
.carousel-arrows.owl-arrows.revur_area ul li span.chines {
    font-weight: bold;
    font-size: 15px;
}
.carousel-arrows.owl-arrows.revur_area ul li a {
    background: #a79a8b;
    color: #fff;
    font-weight: bold;
    border-color: #a79a8b;
    font-size: 30px;
}
html,
body {
    overflow-x: hidden;
}
.m-view {
    display: none;
}
.breadcrumbs-1 img {
    position: relative;
    margin-top: -25px;
}
.breadcrumbs-1-inner {
    padding-left: 120px;
}
.sidebar-wrap {
    padding-top: 20px;
    position: relative;
}
.sidebar-wrap:before {
    /*    content: "";
        background-color: #f8f8f8;
        position: absolute;
        height: 100%;
        width: 1000px;
        left: 0px;
        z-index: -1;
        top: 0;*/
}
section.registeration {
    padding: 20px 0px 20px 0;
    text-align: center;
}
.upload-btn-wrapper {
    display: inline-block;
    cursor: pointer;
    margin: 0 0 12px;
}
.upload-btn-wrapper label {
    padding: 5px 50px;
    border-radius: 36px;
    border: 1px solid #999999;
    background-color: #ffffff;
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.upload-btn-wrapper label {
    background-color: #ffffff;
}
.upload-btn-wrapper input[type="file"] {
    opacity: 0;
}
.profile-image {
    width: 245px;
    height: 245px;
    margin: 0 auto;
    border-radius: 50%;
}
.profile-image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.upload-btn-wrapper label .chines {
    font-size: 24px;
    line-height: 25px;
    margin-bottom: 3px;
}
.upload-btn-wrapper label .eng_wrd {
    font-size: 10px;
    color: #666666;
    font-family: "Lato-Black";
    letter-spacing: 0px;
    font-weight: 400;
}
/* .register-form {
    margin-top: 50px;
} */
/* .register-form .form-group {
    margin-bottom: 20px;
} */
.register-form .control-label {
    padding-top: 0;
    text-align: left;
}
.register-form .control-label span {
    display: block;
}
.register-form .control-label .chines {
    font-size: 18px;
    color: #333333;
    margin-bottom: 0px;
}
.register-form .control-label .eng_wrd {
    font-size: 11px;
    color: #666666;
    font-family: "Lato-Regular";
    text-transform: uppercase;
    font-weight: 400;
}
.register-form .form-control {
    min-height: 45px;
    border-radius: 3px;
    background: #ffffff;
    border: 1px solid #999999;
    box-shadow: none;
}
.register-form .form-control:focus {
    border-color: #fce2aa;
    box-shadow: 0 0 0 2px rgba(252, 226, 170, 0.35);
}
.mt-20 {
    margin-top: 20px;
}
.btn-reg {
    padding: 10px 50px;
    border-radius: 36px;
    border: 1px solid #999999;
    background-color: #ffffff;
    position: relative;
    display: inline-block;
    z-index: 1;
}
.btn-reg span {
    display: block;
}
.btn-reg-wrap {
    position: relative;
}
.btn-reg-wrap:before {
    content: "";
    width: 100%;
    height: 1px;
    background: #999999;
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    transform: translateY(-50%);
    z-index: 0;
}
.btn-reg-wrap:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #999999;
    position: absolute;
    top: calc(50% + 2px);
    left: 0;
    transform: translateY(-50%);
    z-index: 0;
}
.btn-reg .chines {
    font-size: 28px;
    line-height: 29px;
    color: #333333;
    margin-bottom: 3px;
}
.btn-reg .eng_wrd {
    font-size: 10px;
    color: #666666;
    font-family: "Lato-Black";
    text-transform: uppercase;
}
.btn-reg:focus,
.btn-reg:active:focus,
.btn-reg.active:focus,
.btn-reg.focus,
.btn-reg:active.focus,
.btn-reg.active.focus {
    outline: none;
    outline-offset: 0;
}
@media (max-width: 767px) {
    .register-form .form-group > .control-label,
    .register-form .form-group > div[class*="col-"] {
        width: 100%;
        float: none;
        display: block;
    }
    .register-form .form-group > .control-label {
        margin-bottom: 8px;
    }
}
.upload-btn-wrapper label span {
    display: block;
}
.user-img-top img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 3px solid #9d9b9b;
    border: 3px solid #9d9b9b;
}
.view_full-btn a span.eng_wrd {
    font-size: 11px;
    font-weight: 700;
    font-family: "Lato-Bold";
    text-transform: uppercase;
}
p.film-cl {
    font-size: 12px;
    color: #676767;
    font-family: "Lato-Regular";
    margin-bottom: 0;
}
.film-wrap {
    display: table;
    margin: 0 0 10px 0;
}
.film-wrap .user_info {
    float: none;
    display: table-cell;
    vertical-align: middle;
}
.film-poster img {
    width: 90px;
    height: auto;
    margin-right: 115px;
    box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.35);
    border: 3px solid #ffffff;
    margin-top: -9px;
}
.show-more a.button-two:hover {
    text-decoration: none;
}
.comments-sec {
    background: #f8f8f8;
    padding: 40px 0;
    width: 100%;
}
.blog-section.standard {
    padding: 0;
    position: relative;
}
.blog-section {
    background: #f8f8f8;
    padding: 40px 0;
}
.blog-section.standard:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #ffffff;
}
.blog-section.standard.news-detail:before {
    width: calc(50% + 247.5px);
}
.news-detail .news-detail-image img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .blog-section.standard.news-detail:before {
        width: calc(50% + 247.5px);
    }
}
.blog-section.standard .container {
    position: relative;
    z-index: 2;
}
.blog-section.standard .blog-box {
    background: #ffffff;
    padding: 40px 60px 40px 0;
    margin-bottom: 0;
}
.blog-section.standard .blog-box.loggedinPage {
    background: #ffffff;
    padding: 0px 60px 40px 0 !important;
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .blog-section.standard .row {
        overflow: hidden;
    }
    .blog-section.standard .blog-box {
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
}
.blog-section .blog-box {
    max-width: 800px;
    margin: 0 auto 20px;
    padding-bottom: 1px;
}
.blog-section .blog-box .blog-post {
    background: #ffffff;
    padding: 20px;
    border: 1px solid #f1f1f1;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    margin-bottom: 40px;
}
.blog-section.standard .blog-box .blog-post {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 65px;
}
.blog-section.standard .blog-box .blog-post .date-post {
    width: 60px;
    float: left;
    margin-top: -10px;
    text-align: center;
}
.blog-section.standard .blog-box .blog-post .post-content {
    margin-left: 80px;
}
.blog-section.standard .blog-box .blog-post .date-post span {
    display: block;
    color: #222222;
    font-size: 26px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    margin: 0 0 2px;
    padding-bottom: 2px;
    border-bottom: 1px dotted #c0c0c0;
}
.blog-section.standard .blog-box .blog-post .date-post p {
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
    color: #333333;
    margin-bottom: 0 !important;
}
.blog-section.standard .blog-box .blog-post .date-post p:last-child {
    margin-bottom: 30px !important;
}
.blog-section.standard .blog-box .blog-post .date-post p.date-post-year {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.3px;
    line-height: 1.25;
}
.blog-section.standard .blog-box .blog-post .autor-post {
    margin-left: 80px;
}
.blog-section.standard .blog-box .blog-post p.rate {
    margin-bottom: 0px !important;
}
.blog-section.standard .blog-box .blog-post p.rate i[data-rated="rated"] {
    color: #ffba00;
}
.blog-section.standard .blog-box .blog-post ul.post-tags li:before {
    display: none;
}
.blog-section.standard .blog-box .blog-post img.img-author {
    margin-top: 20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.35);
    border: 3px solid #ffffff;
    margin-right: 20px;
}
.blog-section.standard .blog-box .blog-post .postmain-info {
    width: calc(100% - 110px);
}
.btn-comment-submit {
    display: inline-block;
    padding: 0;
    border: 0;
    background: transparent;
}
.btn-comment-submit:hover,
.btn-comment-submit:focus {
    background: transparent;
    text-decoration: none;
    outline: none;
}
.btn-comment-submit span {
    display: block;
    transition: color 0.2s ease-in-out;
}
.btn-comment-submit:hover .chines,
.btn-comment-submit:focus .chines,
.btn-comment-submit:hover .eng_wrd,
.btn-comment-submit:focus .eng_wrd {
    color: #b6914e;
}
.btn-comment-submit .chines {
    font-size: 28px;
    line-height: 30px;
}
.btn-comment-submit .eng_wrd {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: "Lato-Black";
    color: #666666;
    margin-top: 3px;
}
.mt-60 {
    margin-top: 60px;
}
.aw-nom-inner {
    margin-bottom: 20px;
    padding-left: 15px;
}
.awards-nominations p {
    margin-bottom: 0px;
}
.nomination-year {
    font-family: "Lato-Regular";
    color: #999999;
    font-weight: 400;
}
.award-history-link,
.award-history-link:hover,
.award-history-link:focus {
    color: inherit;
}
.filmmaker-award-history .award-history-shared-contributors {
    font-family: "Lato-Regular";
    font-size: 12px;
    line-height: 13px;
    margin-top: 2px;
    margin-bottom: 10px;
    text-transform: none;
}
.filmmaker-award-history .award-history-shared-label {
    color: #999999;
    margin-right: 3px;
}
.filmmaker-award-history .award-history-shared-link,
.filmmaker-award-history .award-history-shared-link:hover,
.filmmaker-award-history .award-history-shared-link:focus {
    color: #2478c4;
    text-transform: uppercase;
}
.filmmaker-award-history
    .aw-nom-inner.award-winner
    .award-history-shared-label {
    color: rgba(255, 255, 255, 0.72);
}
.filmmaker-award-history .aw-nom-inner.award-winner .award-history-shared-link,
.filmmaker-award-history
    .aw-nom-inner.award-winner
    .award-history-shared-link:hover,
.filmmaker-award-history
    .aw-nom-inner.award-winner
    .award-history-shared-link:focus {
    color: #ffffff;
}
.aw-nom-inner .chines {
    font-size: 16px;
    color: #333333;
}
.aw-nom-inner .eng_wrd {
    font-family: "Lato-Regular";
    font-size: 12px;
    color: #666666;
    text-transform: uppercase;
    margin-bottom: 0px;
}
.eng-special-word {
    font-weight: bold !important;
    font-size: 11px;
}
.award-winner {
    background-color: #c3a646;
    padding-top: 3px;
    position: relative;
    width: calc(100% - 3px);
}
.award-winner:after {
    content: url("../images/CERT_copy_4.png");
    line-height: 0;
    position: absolute;
    right: -23px;
    top: 50%;
    transform: translateY(-50%);
}
.aw-nom-inner.award-winner p {
    color: #ffffff;
}
.award-history-credit-copy > p.chines,
.award-history-credit-copy > p.eng_wrd {
    margin-bottom: 0;
}
.film-award-history .award-history-credit-copy > p.film-credits {
    line-height: 18px;
    margin-bottom: 0;
}
.film-award-history .award-history-credit-copy > p.award-history-song-name,
.film-award-history .award-history-credit-copy > p.award-history-song-name-en {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 2px;
    text-transform: none;
}
.film-award-history .award-history-credit-separator {
    font-family: "Lato-Black", "Lato-Bold", sans-serif;
    font-size: 16px;
    font-weight: 900;
}
.film-award-history .aw-nom-inner.award-winner .award-history-credit-copy {
    padding-right: 50px;
}
@media (min-width: 768px) {
    /* Winner rows: vertically center the credit-copy column (filmmaker
       names) against the category title column instead of top-aligning,
       since the two columns are rarely the same number of lines. */
    .film-award-history .aw-nom-inner.award-winner .row {
        display: flex;
        align-items: center;
    }
}
.filmmaker-award-history .award-history-credit-copy > p.chines,
.filmmaker-award-history .award-history-credit-copy > p.eng_wrd {
    line-height: 19px;
}
.filmmaker-award-history .award-history-credit-copy > p.award-history-song-name,
.filmmaker-award-history
    .award-history-credit-copy
    > p.award-history-song-name-en {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 2px;
    text-transform: none;
}
.filmmaker-award-history
    .award-history-credit-copy
    > p.award-history-film-title-zh,
.filmmaker-award-history
    .award-history-credit-copy
    > p.award-history-film-title-en {
    font-size: 11px;
    line-height: 15px;
    text-transform: none;
}
.filmmaker-award-history
    .award-history-credit-copy
    > p.award-history-film-title-zh-lg {
    font-size: 16px;
    line-height: 19px;
}
.aw-nom-inner.award-winner a,
.aw-nom-inner.award-winner a:hover {
    color: #ffffff;
}
.critics-rev-dropdown .btn,
.critics-rev-dropdown .btn:hover {
    background-color: #f8f8f8;
}
.nomyr {
    width: 70px;
}
.nomdetail {
    width: calc(100% - 85px);
}
.light-text p {
    color: #999999 !important;
}
.films-list > .row {
    margin-right: -0px;
    margin-left: -10px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.films-list .film-inner {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.films-list .film-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.films-search-results .film-wrap img {
    height: auto;
    max-height: none;
    object-fit: initial;
    object-position: center;
}
.films-list .film-title {
    margin-top: 8px;
}
.films-list .film-title .eng_wrd {
    display: block;
}
.film-card-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 9px;
    margin-top: 6px;
    min-height: 20px;
    font-family: "Lato-Regular", "Lato", sans-serif;
    line-height: 1.2;
}
.film-card-average,
.film-card-rate-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    white-space: nowrap;
}
.film-card-average {
    color: #555;
}
.film-card-average .fa {
    color: #ffba00;
}
.film-card-average.is-unrated {
    color: #999;
}
.film-card-rate-action {
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px transparent;
    color: #9b762f;
    cursor: pointer;
    padding: 4px 8px;
    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}
.film-card-rate-action .fa {
    color: #c8a96e;
    font-size: 12px;
}
.film-card-rate-action.is-rated,
.film-card-rate-action.is-rated .fa {
    color: #b72025;
}
.film-card-rate-action:hover,
.film-card-rate-action:focus {
    background-color: rgba(200, 169, 110, 0.16);
    box-shadow: inset 0 0 0 1px rgba(155, 118, 47, 0.28);
    color: #6f511d;
    outline: 0;
    transform: translateY(-1px);
}
.film-card-rate-action.is-rated:hover,
.film-card-rate-action.is-rated:focus {
    background-color: rgba(183, 32, 37, 0.1);
    box-shadow: inset 0 0 0 1px rgba(183, 32, 37, 0.25);
    color: #8f151a;
}
.film-card-rate-action:active {
    transform: translateY(0);
}
.film-card-rate-action.is-loading {
    cursor: wait;
    opacity: 0.55;
}
.films-list .film-title.nomination-preview-film .chines,
.films-list .film-title.nomination-preview-film .eng_wrd {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.review-film-selection-form button {
    background: transparent;
    border: 0;
    padding: 0;
}
.review-film-image-button,
.review-film-title-button {
    cursor: pointer;
    display: block;
    width: 100%;
}
.review-film-title-button {
    color: inherit;
}
.view_full-btn a.down-arrow:after {
    transform: rotate(90deg);
    top: 6px;
}
.view_full-btn a.cast-view-more.expanded:after {
    transform: rotate(270deg);
}
.filmcast-list > .row {
    display: flex !important;
    flex-wrap: wrap !important;
}
.filmcast-list > .row > .filmcast-col {
    float: none !important;
}
.view_full-btn a.view-more-link:after {
    transform: rotate(0deg);
    top: 6px;
}
.view_full-btn a.view-more-link.backPage:after {
    transform: rotate(180deg);
    top: 6px;
}
.view_full-btn a.top-critics-weekly-back-link {
    width: 135px;
}
.view_full-btn a.critics-trending-yearly-back-link {
    width: 135px;
}
.weekly-critic-date-header:first-of-type {
    margin-top: 0 !important;
}
.load-more-btn {
    color: #333333;
    font-size: 12px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.7px;
    padding: 12px 48px;
    border: 1px solid transparent;
    background: #fce2aa;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.load-more-btn:hover {
    opacity: 0.7;
}
.load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#film-gallery-grid {
    transition: opacity 0.2s ease-in-out;
}
#film-gallery-grid:not(.is-layout-ready) .project-post,
.film-gallery-item-pending {
    visibility: hidden;
}
#film-gallery-grid.is-gallery-loading {
    opacity: 0.45;
}
.film-gallery-load-more {
    margin: -30px 0 20px;
    text-align: center;
}
.film-gallery-empty {
    padding: 40px 0;
    width: 100%;
}
.film-gallery-empty p {
    margin: 0;
}
#filmmaker-gallery-grid:not(.is-layout-ready) .project-post,
.filmmaker-gallery-item-pending {
    visibility: hidden;
}
.fmk-full-gallery-wrap .project-gal {
    aspect-ratio: 2 / 3;
    overflow: hidden;
}
.fmk-full-gallery-wrap .project-gal > img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.filmmaker-gallery-load-more {
    margin: -30px 0 20px;
    text-align: center;
}
.portfolio-box .project-post .hover-box a.fmk-gallery-zoom {
    margin-left: -30px;
    transition: all 0.6s ease-in-out;
}
/* Always center gallery hover icon(s) both horizontally and vertically,
   whether the hover-box holds a single icon or multiple icons. */
.portfolio-box .project-post .hover-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.portfolio-box .project-post .hover-box a,
.portfolio-box .project-post .hover-box a.zoom,
.portfolio-box .project-post .hover-box a.link,
.portfolio-box .project-post .hover-box a.film-gallery-zoom,
.portfolio-box .project-post .hover-box a.fmk-gallery-zoom {
    position: static;
    top: auto;
    left: auto;
    margin: 0 8px;
}
.createafilm-image img {
    width: 175px;
    height: 262px;
    box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.35);
    border: 3px solid #ffffff;
    margin-bottom: 10px;
}
.line-title-wrap {
    position: relative;
}
.line-title-wrap:before {
    content: "";
    width: 100%;
    height: 1px;
    background: #999999;
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    transform: translateY(-50%);
    z-index: 0;
}
.line-title-wrap:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #999999;
    position: absolute;
    top: calc(50% + 2px);
    left: 0;
    transform: translateY(-50%);
    z-index: 0;
}
.line-title-inner {
    position: relative;
    display: inline-block;
    z-index: 1;
    background: #fff;
    padding: 0 15px;
    font-size: 18px;
    color: #333333;
}
.upload-btn-wrapper-2 {
    display: inline-block;
    cursor: pointer;
    text-align: center;
}
.upload-btn-wrapper-2 label {
    padding: 5px 35px;
    border-radius: 36px;
    border: 1px solid #999999;
    background-color: #ffffff;
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.upload-btn-wrapper-2 label {
    background-color: #ffffff;
}
.upload-btn-wrapper-2 label span {
    display: block;
}
.upload-btn-wrapper-2 input[type="file"] {
    opacity: 0;
    display: none;
}
.upload-btn-wrapper-2 .chines {
    font-size: 18px;
}
.upload-btn-wrapper-2 .eng_wrd {
    font-size: 10px;
    font-family: "Lato-Black";
    color: #666666;
}
.category-list .Lato-Black {
    font-family: "Lato-Black" !important;
}
.line-title-inner p:first-child {
    margin-bottom: 5px;
}
.filmprofile-info {
    margin-left: auto;
    margin-right: 0;
    width: 100%;
}
.filmprofile-info .upi-rlar {
    align-items: center;
    border-left: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 69px;
    min-height: 68px;
    padding: 0 20px;
    vertical-align: middle;
}
.filmprofile-info .upi-rlar:not(.hidden) ~ .upi-rlar:not(.hidden) {
    border-left: 1px solid #5b5957;
}
.filmprofile-info .upi-rlar:last-child {
    border-right: none;
}
.filmprofile-info .upi-rlar.your-rat {
    border-right: none;
}
.filmprofile-rating-col {
    align-items: center;
    display: flex;
    height: 118px;
    padding-right: 15px;
}
@media screen and (min-width: 768px) {
    .filmprofile-banner-row {
        align-items: stretch;
        display: flex;
    }
    .filmprofile-banner-row::before,
    .filmprofile-banner-row::after {
        display: none;
    }
    .filmprofile-banner-row .filmprofile-spacer-col,
    .filmprofile-banner-row .filmprofile-identity-col,
    .filmprofile-banner-row .filmprofile-rating-col {
        float: none;
    }
    .filmprofile-spacer-col {
        flex: 0 0 16.66666667%;
        max-width: 16.66666667%;
    }
    .filmprofile-identity-col {
        align-items: center;
        display: flex;
        flex: 0 0 33.33333333%;
        height: 118px;
        max-width: 33.33333333%;
        min-width: 0;
    }
    .filmprofile-rating-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .filmprofile-identity-col .userinfo-wrap,
    .filmprofile-identity-col .userfilm-review {
        margin-top: 0;
        min-width: 0;
        width: 100%;
    }
    .filmprofile-identity-col .userinfo-wrap {
        display: block;
        max-width: 100%;
        overflow: hidden;
    }
    .filmprofile-identity-col .userfilm-review {
        display: block;
        overflow: hidden;
    }
    .filmprofile-identity-col h2,
    .filmprofile-identity-col h4 {
        min-width: 0;
        width: 100%;
    }
    .filmprofile-identity-col .long-filmTitle,
    .filmprofile-identity-col h4 a,
    .filmprofile-identity-col .join-date {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media screen and (min-width: 992px) {
    .filmprofile-spacer-col {
        flex-basis: 25%;
        max-width: 25%;
    }
    .filmprofile-identity-col {
        flex-basis: 25%;
        max-width: 25%;
    }
    .filmprofile-rating-col {
        flex-basis: 50%;
        max-width: 50%;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    /* Keep the banner's desktop 3/3/6 column split at tablet widths. */
    .filmprofile-spacer-col {
        flex-basis: 25%;
        max-width: 25%;
    }

    .filmprofile-identity-col {
        flex-basis: 25%;
        max-width: 25%;
    }

    .filmprofile-info .upi-rlar {
        /* The compact gutter prevents the four desktop cells overflowing at
           the narrow end of this range without changing their composition. */
        padding-left: 8px;
        padding-right: 8px;
    }
}
/* "MY RATING" shows the plain number here, no star icon - but the "Rate"
   call-to-action (guest, or logged-in and not yet rated) keeps its star,
   shown to the left of the "Rate" text. */
.filmprofile-info
    .upi-rlar.your-rat
    .your-rate-trigger
    .fa[data-rated="rated"] {
    display: none;
}
.filmprofile-info .upi-rlar.avg-rat .avg-rat-star {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px 0;
    line-height: 1;
    white-space: nowrap;
}
.filmprofile-info .upi-rlar.avg-rat .avg-rat-star .fa {
    font-size: 13px;
    letter-spacing: 0;
}
.filmprofile-info .upi-rlar.avg-rat .avg-rat-star .fa + .fa {
    margin-left: 2px;
}
.filmprofile-info .upi-rlar.avg-rat .avg-rat-star .fa-star,
.filmprofile-info .upi-rlar.avg-rat .avg-rat-star .fa-star-half-o {
    color: #f49a16;
}
.filmprofile-img img {
    box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.35);
    border: 3px solid #ffffff;
    margin-top: -120px;
}
.filmprofile-poster-col a.filmprofile-img.d-view {
    height: auto;
    max-width: 220px;
    width: 100%;
}
.filmprofile-poster-col a.filmprofile-img.d-view img {
    height: auto;
    width: 100%;
}
.filmprofile-intro {
    padding: 20px 0;
}
/* Keep the profile poster on the left and the crew details on the right.
   Bootstrap floats can be affected by surrounding theme rules, so this
   page-specific row owns its desktop column order explicitly. */
@media (min-width: 768px) {
    .filmprofile-intro-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    .filmprofile-intro-row::before,
    .filmprofile-intro-row::after {
        display: none;
    }
    .filmprofile-poster-col,
    .filmprofile-crew-col {
        float: none;
        min-width: 0;
    }
    .filmprofile-poster-col {
        flex: 0 0 25%;
        order: 1;
    }
    .filmprofile-crew-col {
        flex: 0 0 75%;
        order: 2;
    }
    .filmprofile-poster-col .filmprofile-img {
        margin-left: 0;
        margin-right: auto;
    }
}
/* Crew roles laid out as a packed flex grid - fills in order, no float gaps */
.film-intro-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
/* Film profile page only: crew member name links use the theme gold at rest
   (they otherwise inherit Bootstrap's default blue) and show an underline
   on hover/focus, on top of the site-wide gold hover color. */
.film-intro-grid a {
    color: #877756;
}
.film-intro-grid a:hover,
.film-intro-grid a:focus {
    text-decoration: underline;
}
.film-intro-cell {
    width: 33.333%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
.mt-25 {
    margin-top: 25px;
}
.film-intro {
    margin-bottom: 10px;
}
.film-intro * {
    margin-bottom: 5px;
    margin-top: 0px;
}
.fp-text-1 {
    color: #666666;
    font-size: 16px;
    line-height: 16px;
    display: block;
}
.fp-text-2 {
    color: #666666;
    font-size: 10px;
    line-height: 10px;
    font-family: "Lato-Regular";
    text-transform: uppercase;
    display: block;
}
.fp-text-3 {
    font-size: 14px;
    font-family: "Lato-Black";
    display: block;
    color: #666666;
    position: relative;
}
/* Truncate the crew name to a single line with an ellipsis - names must
   never wrap onto a second row. */
.fp-text-3-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    line-height: 1.4;
    word-break: break-word;
}
/* Custom tooltip - shown on hover only when the name was actually truncated */
.fp-text-3.is-truncated {
    cursor: pointer;
}
.fp-text-3.is-truncated::after {
    content: attr(data-fulltext);
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    z-index: 60;
    width: max-content;
    max-width: 240px;
    white-space: normal;
    word-break: break-word;
    background: #2b2b2b;
    color: #ffffff;
    font-family: "Lato-Regular";
    font-size: 12px;
    line-height: 1.45;
    text-transform: none;
    text-align: left;
    padding: 7px 10px;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.fp-text-3.is-truncated::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 18px;
    margin-top: 2px;
    border: 6px solid transparent;
    border-bottom-color: #2b2b2b;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 61;
}
.fp-text-3.is-truncated:hover::after,
.fp-text-3.is-truncated:hover::before {
    opacity: 1;
    visibility: visible;
}
.filmcast {
    margin-bottom: 40px;
}
.filmcast-list > .row {
    margin-right: -10px;
    margin-left: -10px;
}
.filmcast-list > .row > div {
    padding-right: 10px;
    padding-left: 10px;
}
.filmcast-inner {
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 25px;
}

.filmcast-inner .cast-title a:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
}
.filmcast-inner img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.cast-title a {
    font-size: 13px;
    font-family: "Lato-Regular";
    font-weight: 700;
    text-transform: capitalize;
    color: #666;
}
.cast-title a:hover {
    text-decoration: none;
}
h4.cast-title {
    line-height: 1;
    margin: 0 0 0;
}

h4.cast-title p {
    line-height: 1.3;
    margin: 7px 0 0;
}

.film-photo-gallery > .fpg-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* 3-column grid for when all images are same big size (backdrops) */
.film-photo-gallery > .fpg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.fpg-item {
    display: block;
    flex: 0 0 auto;
    height: 160px;
    overflow: hidden;
    border-radius: 2px;
}
.fpg-grid .fpg-item {
    flex: unset;
    height: auto;
}
.fpg-item img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: fill;
    transition: opacity 0.2s;
}
.fpg-grid .fpg-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.fpg-item:hover img {
    opacity: 0.85;
}
.film-award-nom .nomdetail {
    width: 100%;
}
.film-award-nom .aw-nom-inner {
    width: calc(100% - 20px);
}
.film-award-nom .aw-nom-inner .chines {
    font-size: 16px;
    color: #666666;
}
.film-award-nom .aw-nom-inner .eng_wrd {
    font-weight: 700;
}
.film-award-nom .award-winner .chines {
    color: #fff;
}
.film-award-nom .award-winner .eng_wrd {
    font-weight: 400;
}
.portfolio-section.masonry-style {
    padding: 50px 0 60px;
}
/*****portfolio isotop*******/
#portfolio-section ul.filter {
    margin: 0;
    padding: 0;
    margin-bottom: 60px;
    text-align: right;
    padding-right: 60px;
}
#portfolio-section ul.filter li {
    display: inline-block;
    margin: 0 14px 4px;
}
#portfolio-section ul.filter li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #999999;
    font-size: 12px;
    font-weight: 700;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    border-bottom: 1px dotted #999999;
    padding-bottom: 2px;
}
#portfolio-section ul.filter li a:hover,
#portfolio-section ul.filter li a.active {
    color: #f5d76e;
    border-bottom: 1px dotted #f5d76e;
}
ul.filter {
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: 45px;
}
ul.filter li {
    display: inline-block;
    margin: 0 14px 4px;
}
ul.filter li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #999999;
    font-size: 12px;
    font-weight: 700;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    border-bottom: 1px dotted #999999;
    padding-bottom: 2px;
}
ul.filter li a:hover,
ul.filter li a.active {
    color: #f5d76e;
    border-bottom: 1px dotted #f5d76e;
}
.portfolio-section.masonry-style .portfolio-box.fullwidth {
    width: auto;
    margin: -10px 10px 65px;
}
.portfolio-section.masonry-style .portfolio-box.fullwidth .project-post {
    padding: 10px;
    width: 16.66%;
    margin: 0;
}
.portfolio-section.masonry-style .portfolio-box .project-post .project-gal {
    position: relative;
}
.portfolio-section.masonry-style
    .portfolio-box
    .project-post
    .project-gal
    .hover-box {
    background: rgba(255, 255, 255, 0.9);
}
.portfolio-box .project-post:hover .hover-box {
    opacity: 1;
}
.portfolio-box .project-post .hover-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(34, 34, 34, 0.8);
    text-align: center;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    opacity: 0;
    overflow: hidden;
}
.portfolio-section.masonry-style
    .portfolio-box
    .project-post
    .project-gal
    .hover-box
    a
    i {
    color: #999999 !important;
}
.portfolio-section.masonry-style
    .portfolio-box
    .project-post
    .project-gal
    .hover-box
    a:hover
    i {
    color: #877756 !important;
}
.portfolio-section.masonry-style
    .portfolio-box
    .project-post:hover
    .project-tit-cont
    h2 {
    color: #f5d76e;
}
.portfolio-section.masonry-style
    .portfolio-box
    .project-post:hover
    .project-tit-cont {
    background: transparent;
    border-bottom: 1px solid #f5d76e;
}
.portfolio-section.masonry-style
    .portfolio-box
    .project-post
    .project-tit-cont
    p {
    margin: 0;
    color: #999999;
}
.portfolio-section.masonry-style
    .portfolio-box
    .project-post
    .project-tit-cont {
    background: #f8f8f8;
    padding: 27px 30px;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    border-bottom: 1px solid transparent;
}
.portfolio-section.masonry-style
    .portfolio-box
    .project-post
    .project-tit-cont
    h2 {
    color: #222222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 3px;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    text-transform: uppercase;
}
.portfolio-section.masonry-style
    .portfolio-box
    .project-post
    .project-tit-cont
    p {
    margin: 0;
    color: #999999;
}
/*****portfolio isotop end*******/
.upload-gallery-photos {
    text-align: center;
}
.upload-gallery-photos img {
    margin-left: auto;
    margin-right: auto;
}
.upload-gallery-photos input[type="file"] {
    display: none;
}
.upload-gallery-photos span {
    display: block;
}
.upload-gallery-photos {
    padding: 12px 0 0;
}
.upload-gallery-photos label {
    cursor: pointer;
}
.upload-gallery-photos .chines {
    font-size: 20px;
}
.upload-gallery-photos .eng_wrd {
    color: #666666;
    font-family: "Lato-Black";
    font-size: 10px;
    letter-spacing: 0.5px;
}
.filter li span {
    display: block;
}
.filter li .chines {
    font-size: 15px;
    font-weight: 700;
}
.filter li .eng_wrd {
    letter-spacing: 1.1px;
    color: #666666;
    font-family: "Lato-Black";
    font-size: 11px;
    font-weight: 400;
}
.movie-detail {
    display: table;
}
.movie-image {
    display: table-cell;
    vertical-align: bottom;
}
.movie-image img {
    width: 76px;
    height: 115px;
    box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.35);
    border: 3px solid #ffffff;
    margin-right: 20px;
}
.movie-info {
    float: none;
    display: table-cell;
    vertical-align: bottom;
    text-align: left;
    padding-bottom: 10px;
}
.movie-info h2 {
    margin-top: 0px;
    margin-bottom: 3px;
    color: #333;
}
.movie-info h2 a {
    color: #333;
}
.movie-info h2 a:hover {
    text-decoration: none;
}
.serachform-wrap {
    text-align: right;
}
.serachform-wrap .chines {
    font-size: 15px;
    font-weight: 700;
}
.serachform-wrap .eng_wrd {
    letter-spacing: 1.1px;
    color: #666666;
    font-family: "Lato-Black";
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
}
.mb-0 {
    margin-bottom: 0;
}
.serachform-wrap input[type="search"] {
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 0 10px;
    margin: 0;
    color: #999999;
    padding: 15px 15px;
    border: none;
    width: 100%;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    -o-border-radius: 28px;
    border-radius: 28px;
    border: 1px solid #cccccc;
    outline: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    background: transparent;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    font-size: 11px;
}
.serachform-wrap #film-search {
    display: inline-block;
    width: calc(100% - 98px);
}
.serachform-wrap #film-search-year {
    display: inline-block;
    width: 90px;
    margin-left: 4px;
    color: #777;
    padding: 15px 8px;
    border: 1px solid #cccccc;
    border-radius: 28px;
    background: transparent;
    font-family: "Lato", sans-serif;
    font-size: 11px;
    line-height: 20px;
    outline: none;
    text-align: center;
}
#fav-films-input {
    display: inline-block;
    width: calc(100% - 98px);
}
#fav-films-year {
    display: inline-block;
    width: 90px;
    margin-left: 4px;
    text-align: center;
}
.serachform-wrap button {
    background: #ffffff;
    color: #999999;
    border: none;
    float: right;
    margin: 0;
    margin-top: -38px;
    margin-right: 10px;
    position: relative;
    z-index: 2;
}
.serachform-wrap button:focus,
.serachform-wrap button:active {
    outline: none;
}
/****star rating****/
.rating-input .fa {
    color: #ffba00;
    margin-right: 5px;
}
.cropper-crop-box,
.cropper-view-box {
    border-radius: 50%;
}
.cropper-view-box {
    box-shadow: 0 0 0 1px #39f;
    outline: 0;
}
.upload-img-wrapper {
    display: block;
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.upload-img-wrapper input[type="file"] {
    opacity: 0;
    display: none;
}
.upload-img-wrapper label {
    background-color: #ffffff;
}
.upload-img-wrapper label span {
    display: block;
}
.upload-img-wrapper label {
    padding: 5px 40px;
    border-radius: 36px;
    border: 1px solid #999999;
    background-color: #ffffff;
    position: relative;
    display: block;
    cursor: pointer;
}
.upload-img-wrapper label:before {
    content: "\f002";
    font-family: "FontAwesome";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999999;
}
.upload-img-wrapper label .chines {
    font-size: 24px;
    line-height: 25px;
    margin-bottom: 3px;
    font-size: 18px;
    font-weight: 700;
}
.upload-img-wrapper label .eng_wrd {
    font-size: 10px;
    color: #666666;
    font-family: "Lato-Black";
    letter-spacing: 0px;
    font-weight: 400;
}
.radio,
.checkbox {
    padding-left: 20px;
    position: relative;
    display: block;
}
.checkbox label span {
    display: block;
}
.radio input,
.checkbox input {
    opacity: 0;
    position: absolute;
    z-index: 1;
    cursor: pointer;
    margin-left: -20px;
}
.radio input:checked + label::before,
.checkbox input:checked + label::before {
    border-color: #ffba00;
}
.checkbox input:checked + label::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 13px;
    height: 13px;
    left: 2px;
    top: 4px;
    margin-left: -20px;
    border: 2px solid #999999;
    border-radius: 50%;
    background-color: #ffba00;
}
.radio input:checked + label::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 11px;
    height: 11px;
    left: 3px;
    top: 5px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #ffba00;
}
.radio label,
.checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 5px;
}
.radio label::before,
.checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    top: 2px;
    margin-left: -20px;
    border: 2px solid #999999;
    border-radius: 50%;
    background-color: #fff;
}
.radio.disabled label,
.checkbox.disabled label {
    color: #ccc;
}
.radio.disabled label::before,
.checkbox.disabled label::before {
    opacity: 0.54;
    border-color: #ccc;
}
.checkbox input:checked + label::before {
    border-color: #ffba00;
    background-color: #ffba00;
}
.checkbox input:checked + label::after {
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 13px;
    color: #fff;
    top: 0;
    left: 0px;
    border-color: transparent;
    background-color: transparent;
}
.checkbox label::before {
    border-radius: 0px;
}
/* Scoped: review create/edit form radio & checkbox filled colour */
.review-create-form .radio input:checked + label::before,
.review-create-form .checkbox input:checked + label::before {
    border-color: #877756;
}
.review-create-form .checkbox input:checked + label::before {
    background-color: #877756;
}
.review-create-form .radio input:checked + label::after {
    background-color: #877756;
}
.review-create-form .checkbox input:checked + label::after {
    color: #ffffff;
}
span.chines.m-y-imp.Microsoft-YaHei-Regular.Textcolor {
    color: #333333;
}
span.eng_wrd.Textcolor {
    color: #666666;
}
.checkbox label .chines,
.radio label .chines {
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 3px;
    color: #333333;
}
.checkbox label .chines.m-y-imp.Microsoft-YaHei-Regular.Textcolor {
    color: #333333;
}
.checkbox label .cb-sm,
.radio label .cb-sm {
    font-size: 10px;
    color: #666666;
    font-family: "Lato-Regular";
    letter-spacing: 0px;
    margin-bottom: 2px;
    text-transform: uppercase;
}
.checkbox label .cb-lg {
    font-size: 20px;
    color: #666666;
    font-family: "Lato-Black";
}
.mb-15 {
    margin-bottom: 15px;
}

.review-create-form .award-fyc-grid {
    display: none;
}

.review-create-form .award-fyc-grid.is-visible {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.review-create-form .award-fyc-grid::before,
.review-create-form .award-fyc-grid::after {
    display: none;
}

.review-create-form .award-fyc-grid > .col-sm-6 {
    float: none;
    width: auto;
    min-width: 0;
}

.review-create-form .award-fyc-grid .select2-container {
    max-width: 100%;
}

/* Requested category order, applied at every width: on the 2-column desktop
   grid it groups items into left/right pairs (1&2, 3&4, 5&6, ...) in this
   sequence; on the single-column mobile grid the same order simply stacks
   top to bottom. nth-child follows DOM order: 1 Picture, 2 Original Score,
   3 Directing, 4 Costume Design, 5 Screenplay, 6 Production Design,
   7 Editing, 8 Original Song, 9 Cinematography, 10 Film Casting,
   11 Leading Actor, 12 Leading Actress, 13 Supporting Actor,
   14 Supporting Actress, 15 Screen Couple, 16 Screen Partners,
   17 Top 10 Movie Stars, 18 Humanitarian. */
.review-create-form .award-fyc-grid.is-visible > div:nth-child(1) {
    order: 1;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(3) {
    order: 2;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(4) {
    order: 3;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(5) {
    order: 4;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(7) {
    order: 5;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(9) {
    order: 6;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(2) {
    order: 7;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(6) {
    order: 8;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(8) {
    order: 9;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(10) {
    order: 10;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(11) {
    order: 11;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(12) {
    order: 12;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(13) {
    order: 13;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(14) {
    order: 14;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(15) {
    order: 15;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(16) {
    order: 16;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(17) {
    order: 17;
}
.review-create-form .award-fyc-grid.is-visible > div:nth-child(18) {
    order: 18;
}

@media (max-width: 767px) {
    .review-create-form .award-fyc-grid.is-visible {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rounded-input {
    border-radius: 19px !important;
    border: 1px solid #acacac !important;
    background: #fff !important;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("../images/down-arrow.png") !important;
    background-repeat: no-repeat !important;
    background-position-x: calc(100% - 15px) !important;
    background-position-y: 20px !important;
    padding-right: 30px;
}

/****** Film Archive Banner (films page) ******/
.film-archive-banner {
    background: #d6d6d6;
    position: relative;
    overflow: visible;
}
.fab-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 118px;
    overflow: visible;
}
/* ---- Left: portrait + title overlapping ---- */
/*
 * .fab-brand uses position:relative so portrait (bottom:0, overflowing top)
 * and title-block (left:160px, on top of portrait) can both be absolute.
 * flex:1 lets it grow to fill the left half.
 */
.fab-brand {
    position: relative;
    flex: 1;
    height: 118px;
    overflow: visible;
}
.fab-portrait {
    position: absolute;
    left: 0;
    bottom: 0; /* 135px tall in 118px banner = 17px overflow above banner top */
    z-index: 1;
}
.fab-portrait img {
    height: 135px; /* natural size: 235×135px; overflows banner by 17px at top */
    width: auto;
    display: block;
}
/* Title sits on top of the right portion of the portrait image */
.fab-title-block {
    position: absolute;
    left: 185px; /* 185px from left = overlaps last 75px of the 235px portrait */
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.fab-cn {
    font-size: 26px;
    color: #1a1a1a;
    display: block;
    line-height: 1.2;
    letter-spacing: 1px;
}
.fab-en {
    font-weight: 700;
    font-family: "Lato-Bold", sans-serif;
}
.fab-titlethin {
    font-size: 14px;
    letter-spacing: 2px;
    color: #555555;
    font-family: "Lato-Regular", sans-serif;
    text-transform: uppercase;
    display: block;
    margin-top: 6px;
}
/* Filmmaker index banner desktop title: sits a little further left over the
   portrait than the shared 185px offset used by the films/critics banners,
   for this banner only. */
@media (min-width: 768px) {
    #filmmakers-archive-banner .fab-title-block.filmmaker-index-title-block {
        left: 143px;
    }
}
/* ---- Right: pill with reel image overlapping from the right ---- */
/*
 * .fab-right is position:relative so .fab-reel-film (135×135px, absolute)
 * can be anchored to right:-20px bottom:0, overlapping the pill's right side
 * and overflowing the banner top by 17px — exactly matching the reference.
 * padding-right on the pill keeps text visible under the reel overlap.
 */
.fab-right {
    position: relative;
    flex-shrink: 0;
    overflow: visible;
}
.fab-search-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 305px;
    border: 1px solid #cccccc;
    border-radius: 60px;
    /* right padding creates space so text stays clear of the reel overlap area */
    padding: 12px 120px 12px 20px;
    text-decoration: none;
    background: white;
    transition:
        border-color 0.22s ease,
        background 0.22s ease;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.fab-search-pill:hover,
.fab-search-pill:focus {
    border-color: #877756;
    background: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    outline: none;
}
.fab-search-pill .fa-search {
    font-size: 18px;
    color: #999999;
    transition: color 0.22s ease;
}
.fab-search-pill:hover .fa-search {
    color: #877756;
}
/* Store banner search pill uses fa-archive instead of fa-search */
.fab-search-pill .fa-archive {
    font-size: 18px;
    color: #999999;
    transition: color 0.22s ease;
}
.fab-search-pill:hover .fa-archive {
    color: #877756;
}
.fab-pill-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    align-items: flex-start;
}
.fab-pill-text .chines {
    font-size: 19px;
    font-weight: 700;
    color: #333333;
    display: block;
    font-family: "Noto Serif SC", serif;
}
.fab-pill-en {
    color: #777777;
    font-family: "Lato-Black", "Lato-Bold", sans-serif;
    font-size: 8px;
    letter-spacing: 0.6px;
    margin-top: 4px;
}
/* Reel image: absolute, overlaps pill right side, overflows banner top */
img.store.fab-reel-film {
    position: absolute;
    right: 10px;
    top: -19px;
    height: 98px;
    width: auto;
    pointer-events: none;
    z-index: 3;
}
.fab-reel-film {
    position: absolute;
    right: 10px;
    top: -36px;
    height: 135px;
    width: auto;
    pointer-events: none;
    z-index: 3;
}

/****** End Film Archive Banner ******/

/* =====================================================
   Archive Banner Component (x-archive-banner)
   Layout: [portrait] [title + search pill] [deco img + post label]
   ===================================================== */
.arb-inner {
    display: flex;
    align-items: center;
    height: 118px;
    overflow: visible;
    gap: 0;
}
/* Portrait: overflows banner top, flush to bottom */
.arb-portrait {
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    align-self: flex-end;
    margin-right: 5px;
}
.arb-portrait img {
    height: 148px;
    width: auto;
    display: block;
    position: relative;
    bottom: 0;
}
/* Center: title on top, search pill on right — both inline */
.arb-center {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
}
.arb-title {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
/* reuse fab-cn / fab-titlethin sizing from existing classes */
/* search pill inside center: desktop/tablet keeps the shared
   .fab-search-pill width/border/padding (same wide pill-with-reserved-
   overlap-space treatment the films/filmmakers/critics banners use) so
   .arb-right can overlap its right side below. Mobile still gets its own
   compact width/padding from the .reviews-search-banner-scoped rule. */
.arb-pill {
    flex-shrink: 0;
}
/* Right: deco image stacked above post-action label */
.arb-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: visible;
    margin-left: 6px;
}
.arb-deco-img {
    height: auto;
    width: auto;
    display: block;
    position: relative;
    top: -10px; /* overflow above banner */
    pointer-events: none;
    z-index: 2;
}
.arb-post-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    position: relative;
    top: -5px;
    line-height: 1.3;
}
.arb-post-cn {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #1a1a1a;
    display: block;
    letter-spacing: 1px;
}
.arb-post-en {
    font-size: 10px;
    letter-spacing: 2px;
    color: #555555;
    font-family: "Lato-Bold", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-top: 2px;
}
span.chines.m-y-imp.Microsoft-YaHei-Regular.reviews-search {
    color: lightgray;
}
.arb-post-label:hover .arb-post-cn,
.arb-post-label:hover .arb-post-en {
    color: #877756;
    text-decoration: none;
}

/* Desktop/tablet only: push the search pill off the title and over to the
   right edge of .arb-center (now full-width, since .arb-right below is
   taken out of flow), then anchor the post-review button on top of the
   pill's right side - the same overlap the films/filmmakers/critics
   banners already do with their reel image via .fab-right/.fab-reel-film.
   Below 768px the .reviews-search-banner-scoped rules already give
   .arb-center and .arb-right their own mobile arrangement, so this is
   scoped to min-width so it never reaches that layout. */
@media (min-width: 768px) {
    .arb-center {
        justify-content: space-between;
    }

    .arb-inner {
        position: relative;
    }

    .arb-right {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        margin-left: 0;
    }

    /* Small dotted divider marking the seam between the search pill and the
       post-review button, same dotted-rule treatment as the nav menu's
       item separators (.wel_nav nav .navbar-nav li a:after). */
    .arb-right::before {
        content: "";
        position: absolute;
        left: -17px;
        top: 50%;
        transform: translateY(-50%);
        height: 32px;
        border-left: 1px dotted #999999;
    }

    /* Reviews page only: extra breathing room below "POST A REVIEW" so the
       label doesn't sit flush against the banner's bottom edge. */
    .arb-post-btn {
        padding: 0 15px 57px 0;
    }
}

/* ===================================================== End Archive Banner Component ===================================================== */

/* =====================================================
   Store Coming Soon Section
   ===================================================== */
.store-comingsoon-section {
    padding: 50px 0;
    text-align: center;
}
.store-comingsoon-img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}
/* ===================================================== End Store Coming Soon Section ===================================================== */

/* =====================================================
   Blog Masonry Fullwidth Grid (reviews page)
   ===================================================== */
.reviews-fullwidth-masonry {
    background: #f8f8f8;
    padding: 30px 0 45px;
    width: 100%;
    /* margin: 0 0 40px; */
}
.reviews-iso-box {
    width: 100%;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 10px !important;
    font-size: 0; /* remove inline-block gaps */
    box-sizing: border-box;
}
/* 5 columns: (100% - 4 gaps of 20px) / 5, bottom margin 30px */
.reviews-iso-box .rev-post {
    width: calc(20% - 16px);
    margin: 0 10px 30px 10px;
    padding: 0;
    border: none;
    background: transparent;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    box-sizing: border-box;
}
.reviews-iso-box .rev-post img {
    width: 100%;
    height: auto;
    display: block;
}
.reviews-iso-box .rev-post .post-content {
    background: #ffffff;
    border: 1px solid #efefef;
    padding: 12px 12px 14px;
}
.reviews-iso-box .rev-post .post-content .date-post {
    float: left;
    width: 44px;
    text-align: center;
    margin-right: 0;
}
.reviews-iso-box .rev-post .post-content .date-post span {
    display: block;
    color: #222;
    font-size: 20px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    margin: 0 0 2px;
    padding-bottom: 2px;
    border-bottom: 1px dotted #c0c0c0;
    line-height: 1;
}
.reviews-iso-box .rev-post .post-content .date-post p {
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
    color: #333;
    font-size: 10px;
    line-height: 1.4;
}
.reviews-iso-box .rev-post .post-content .date-post p.date-post-year {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.3px;
    line-height: 1.25;
}
.reviews-iso-box .rev-post .post-content .post-content-text {
    margin-left: 54px;
}
.reviews-iso-box .rev-post .post-content .post-content-text ul.post-tags {
    list-style: none;
    padding: 0;
    margin: 0 0 3px;
    line-height: 1.3;
}
.reviews-iso-box .rev-post .post-content .post-content-text ul.post-tags li {
    display: inline;
}
.reviews-iso-box .rev-post .post-content .post-content-text ul.post-tags li a {
    color: #aaa;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-decoration: none;
}
.reviews-iso-box
    .rev-post
    .post-content
    .post-content-text
    ul.post-tags
    li
    span.by-labeltext {
    color: #ccc;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-decoration: none;
}
.reviews-iso-box
    .rev-post
    .post-content
    .post-content-text
    ul.post-tags
    li
    + li::before {
    content: " / ";
    color: #ccc;
    font-size: 10px;
}
.reviews-iso-box .rev-post .post-content .post-content-text h2 {
    margin: 0 0 4px;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.4;
}
.reviews-iso-box .rev-post .post-content .post-content-text h2 a {
    color: #222;
    text-decoration: none;
}
.reviews-iso-box .rev-post .post-content .post-content-text h2 a:hover {
    color: #c8a96e;
}
.reviews-iso-box .rev-post .post-content .post-content-text p {
    font-size: 13px;
    color: #666;
    margin: 3px 0;
    line-height: 1.5;
}
.reviews-iso-box .rev-post .post-content .post-content-text p.rate {
    margin: 3px 0 2px;
    border: none;
    padding: 0;
}
.reviews-iso-box .rev-post .post-content .post-content-text p.rate i {
    font-size: 11px;
    color: #ddd;
}
.reviews-iso-box
    .rev-post
    .post-content
    .post-content-text
    p.rate
    i[data-rated="rated"] {
    color: #ffba00;
}
.reviews-iso-box .rev-post .post-content .post-content-text > a {
    display: inline-block;
    font-size: 10px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    color: #bbb;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 5px;
    letter-spacing: 0.5px;
}
.reviews-iso-box .rev-post .post-content .post-content-text > a:hover {
    color: #c8a96e;
}
@media (min-width: 1280px) {
    /* 5 columns — explicit override to ensure nothing else narrows it */
    .reviews-iso-box .rev-post {
        width: calc(19.7% - 20px);
        margin: 0 10px 30px 10px;
    }
}

/* ===================================================== End Blog Masonry Fullwidth ===================================================== */

/* Critics Search Overlay Styles */
#critics-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.88);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#critics-search-overlay.active {
    display: flex;
    opacity: 0;
    animation: wcfcaFadeIn 0.3s ease forwards;
}
#critics-search-inner {
    text-align: center;
    width: 100%;
    max-width: 680px;
    padding: 0 24px;
}
#critics-search-label {
    color: #c8a96e;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 24px;
    font-family: "Lato-Regular", sans-serif;
}
#critics-search-input-wrap {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #c8a96e;
    padding: 8px 16px;
}
#critics-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 28px;
    font-family: "Lato-Light", sans-serif;
    letter-spacing: 1px;
    padding: 8px 12px 8px 0;
}
#critics-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
#critics-search-btn {
    background: transparent;
    border: none;
    color: #c8a96e;
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
    transition: color 0.2s;
}
#critics-search-btn:hover {
    color: #fff;
}
#critics-search-close {
    position: absolute;
    top: 28px;
    right: 36px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}
#critics-search-close:hover {
    color: #fff;
}

/* Filmmakers Search Overlay — mirrors critics overlay */
#filmmakers-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.88);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#filmmakers-search-overlay.active {
    display: flex;
    opacity: 0;
    animation: wcfcaFadeIn 0.3s ease forwards;
}
#filmmakers-search-inner {
    text-align: center;
    width: 100%;
    max-width: 680px;
    padding: 0 24px;
}
#filmmakers-search-label {
    color: #c8a96e;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 24px;
    font-family: "Lato-Regular", sans-serif;
}
#filmmakers-search-input-wrap {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #c8a96e;
    padding: 8px 16px;
}
#filmmakers-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 28px;
    font-family: "Lato-Light", sans-serif;
    letter-spacing: 1px;
    padding: 8px 12px 8px 0;
}
#filmmakers-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
#filmmakers-search-btn {
    background: transparent;
    border: none;
    color: #c8a96e;
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
    transition: color 0.2s;
}
#filmmakers-search-btn:hover {
    color: #fff;
}
#filmmakers-search-close {
    position: absolute;
    top: 28px;
    right: 36px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}
#filmmakers-search-close:hover {
    color: #fff;
}

/* Generic archive-banner overlay (reusable) */
[id$="-search-overlay"]:not(#critics-search-overlay):not(
        #filmmakers-search-overlay
    ) {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.88);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
[id$="-search-overlay"].active:not(#critics-search-overlay):not(
        #filmmakers-search-overlay
    ) {
    display: flex;
    opacity: 0;
    animation: wcfcaFadeIn 0.3s ease forwards;
}
.archive-search-inner {
    text-align: center;
    width: 100%;
    max-width: 680px;
    padding: 0 24px;
}
.archive-search-label {
    color: #c8a96e;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 24px;
    font-family: "Lato-Regular", sans-serif;
}
p.archive-search-label span.chines.m-y-imp.Microsoft-YaHei-Regular {
    color: #1a1a1a;
}
.archive-search-input-wrap {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #c8a96e;
    padding: 8px 16px;
}

.film-searchLabel {
    color: lightgray;
}

.archive-search-input-wrap input[type="search"] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 28px;
    font-family: "Lato-Light", sans-serif;
    letter-spacing: 1px;
    padding: 8px 12px 8px 0;
}
.archive-search-input-wrap input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
.archive-search-btn {
    background: transparent;
    border: none;
    color: #c8a96e;
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
    transition: color 0.2s;
}
.archive-search-btn:hover {
    color: #fff;
}
/* close button for generic overlays */
[id$="-search-overlay"] > button[id$="-search-close"] {
    position: absolute;
    top: 28px;
    right: 36px;
    z-index: 2;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}
[id$="-search-overlay"] > button[id$="-search-close"]:hover {
    color: #fff;
}
/* Post-a-review pill in banner */
.fab-post-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #333;
    color: #fff;
    border-radius: 50px;
    padding: 8px 20px 8px 20px;
    margin-left: 10px;
    text-decoration: none;
    font-family: "Lato-Regular", sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    transition: background 0.2s;
}
.fab-post-pill:hover {
    background: #c8a96e;
    color: #fff;
    text-decoration: none;
}

.critics-rank-list {
    padding: 1px 0 0;
}
.crl-item {
    text-align: center;
    margin-bottom: 30px;
}
.crl-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #e2e2e2;
    background: #f3f3f3;
}
.crl-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.crl-no {
    display: block;
    font-family: "Lato-Bold", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #333;
    margin-bottom: 0;
}
.crl-name {
    margin: 0;
    line-height: 1.3;
}
.crl-name a {
    font-family: "Lato-Regular", sans-serif;
    font-size: 13px;
    color: #777;
}
.crl-name a:hover {
    color: #c8a96e;
}

/* ===== Critic of the Week ===== */
.critic-week-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 5px 0 0;
}
.cw-profile {
    display: flex;
    align-items: center;
}
.cw-avatar {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f3f3;
    flex-shrink: 0;
    box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.35);
    border: 3px solid #ffffff;
}
.cw-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cw-info {
    padding-left: 15px;
}
.cw-name {
    font-family: "PlayfairDisplay-MediumItalic", Georgia, serif;
    font-style: italic;
    font-size: 30px;
    line-height: 1;
    color: #2b2b2b;
    margin: 0 0 5px;
    text-transform: capitalize;
    max-width: 230px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cw-name:not(.username) {
    font-family: "Noto Serif SC", serif;
    font-weight: 700;
    font-style: normal;
}
/* A critic name carries both .username and .cw-name together, so neither
   :not() override above ever matches it. .cw-name-cn is added by the shared
   critic-identity partial whenever the username contains Han characters, so
   this swaps every critic name that partial renders - the critic-profile
   banner, the critics-listing critic-of-the-day card, the nomination ballot
   banner, and my-reviews - from the italic Latin face to a Chinese one. */
h2.username.cw-name.cw-name-cn {
    font-family: "Noto Serif SC", serif;
    font-style: normal;
}
.cw-name.filmmaker-full-name,
.username.filmmaker-full-name {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: initial;
    line-height: 1.15;
}
.cw-meta {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 14px;
    color: #9a9a9a;
    margin: 0 0 0px;
    line-height: 1.5;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 230px;
}
.cw-meta.filmmaker-identity-line {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: initial;
    text-transform: uppercase;
}
.cw-meta.filmmaker-identity-type {
    font-weight: 700;
}
.identity-detail-icons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 26px;
    padding: 0 0 0 1px;
}
.cw-meta.identity-detail-icons,
.cw-meta.filmmaker-identity-line.identity-detail-icons {
    display: flex;
}
.identity-detail-icon {
    cursor: default;
    display: inline-block;
    flex: 0 0 20px;
    height: 20px;
    width: 20px;
}
.identity-detail-flag {
    object-fit: contain;
    flex-basis: 25px;
    height: 20px;
    width: 20px;
}
.identity-detail-gender-icon {
    transform: scale(1.25);
}
.identity-detail-cake-icon {
    transform: scale(1.7);
}
.identity-detail-cross-icon {
    transform: scale(1.25);
}
.identity-detail-zodiac-icon {
    transform: scale(1.25);
}
/* Review-points coin (critic-profile banner, logged-in viewers only). Sized a
   step above the zodiac icons so the amount indicator reads clearly; colour and
   hover come from .identity-detail-mask-icon / the title attribute like the rest
   of the row. */
.identity-detail-points-icon {
    transform: scale(1.05);
}
.identity-detail-mask-icon {
    background-color: #777777;
    mask-image: var(--identity-icon-url);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: var(--identity-icon-url);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.identity-detail-text {
    color: #9a9a9a;
    cursor: default;
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filmmaker-week-featured-card .cw-stats .cw-stat:nth-of-type(3) {
    display: none;
}
.filmmaker-week-featured-card .cw-profile {
    padding-right: 20px;
}
.critic-zodiac {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 14px;
    color: #9a9a9a;
    margin: 0 0 0px;
    line-height: 1.5;
}
.cw-joined {
    font-family: "Lato-Regular", sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #777777;
    font-weight: bold;
}
.cw-stats {
    display: flex;
    align-items: center;
}
.cw-badge {
    padding-right: 15px;
}
.cw-badge img {
    height: 69px;
    object-fit: contain;
    width: auto;
}
.cw-stat {
    text-align: center;
    padding: 4px 10px;
    border-left: 1px solid #e3e3e3;
}
.critic-language-stat.is-hidden,
.ranked-critic-badge.is-hidden,
.filmmaker-week-stat.is-hidden {
    display: none !important;
}
.cw-stat-cn {
    font-size: 13px;
    color: #9a9a9a;
    margin: 0 0 6px;
}
.cw-stat-num {
    font-family: "Lato-Bold", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #2b2b2b;
    line-height: 1;
    margin: 0 0 6px;
}
.cw-stat-en {
    font-family: "Lato-Bold", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #b0b0b0;
    text-transform: uppercase;
    margin: 0;
}

/* ===== Critics - Latest Reviews cards ===== */
.critics-latest-reviews {
    padding-top: 25px;
}
.cr-rev-card {
    margin-bottom: 12px;
}
.cr-rev-gal {
    position: relative;
}
.cr-rev-gal img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
}
.cr-rev-date {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #222;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 8px 14px 8px 20px;
    background: #fde3a7;
}
.cr-rev-body {
    padding: 18px 20px 22px;
    border: 1px solid #e4e4e4;
    border-top: none;
}
.cr-rev-meta {
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 10px;
}
.cr-rev-meta .cr-by {
    color: #222;
}
.cr-rev-meta .cr-author {
    color: #aaa;
}
.cr-rev-meta .cr-cat {
    color: #aaa;
}
.cr-rev-title {
    margin: 0 0 12px;
}
.cr-rev-title a {
    color: #222;
    font-size: 15px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 20px;
    letter-spacing: 1.7px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.cr-rev-title a:hover {
    color: #c8a96e;
}
.cr-rev-rate {
    padding-bottom: 15px;
    margin: -2px 0 15px;
    border-bottom: 1px dotted #ddd;
}
.cr-rev-rate i {
    color: #e4e4e4;
    font-size: 11px;
    margin-right: 4px;
}
.cr-rev-rate i.rated {
    color: #ffba00;
}
.cr-rev-text {
    color: #999;
    font-size: 13px;
    font-family: "Lato-Regular", sans-serif;
    line-height: 22px;
    margin: 0 0 14px;
}
.cr-rev-more {
    display: inline-block;
    color: #aaa;
    font-size: 11px;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.cr-rev-more:hover {
    color: #222;
}
.reviews-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 0 20px;
}
a.reviews-view-all-btn {
    /* min-width: 128px; */
    /* padding: 10px 0 0 0; */
}
a.reviews-view-all-btn .filmmaker-latest-view-all-cn {
    color: black;
    font-size: 16px;
}
.preview-title.cp-title span.chines.n-s-tc-imp.NotoSerifTC-900 {
    color: black;
    font-size: 16px;
}
.preview-title.cp-title span.eng_wrd {
    font-size: 11px;
    font-weight: 700;
    color: #3e3c3a;
}
span.chines.m-y-imp.Microsoft-YaHei-Regular.filmmaker-searchLabel {
    color: lightgray;
}
img.fab-reel-film.filmmaker {
    top: -45px;
}

/* =============================================
   LATEST GALLERY PAGE
   ============================================= */

/* Header strip above the full-width gallery */
.lg-page-header {
    padding: 18px 0 16px;
    margin-bottom: 0;
}
.lg-gallery-header {
    align-items: center;
    margin-bottom: 0;
}
.lg-gallery-header::after {
    display: none; /* remove divider line that cp-top normally adds */
}
.lg-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}

/* Filter tab buttons */
ul.lg-filter-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
}
ul.lg-filter-tabs li {
    display: inline-block;
}
a.lg-filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 14px;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    text-decoration: none;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
    line-height: 1.25;
    background: #fff;
    cursor: pointer;
}
a.lg-filter-btn .chines {
    font-size: 11px;
    color: #444;
    display: block;
}
a.lg-filter-btn .eng_wrd {
    font-size: 9px;
    letter-spacing: 0.8px;
    color: #777;
    display: block;
    font-weight: 700;
    text-transform: uppercase;
}
a.lg-filter-btn.active,
a.lg-filter-btn:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
}
a.lg-filter-btn.active .chines,
a.lg-filter-btn.active .eng_wrd,
a.lg-filter-btn:hover .chines,
a.lg-filter-btn:hover .eng_wrd {
    color: #fff;
}

/* Ensure items in the full-width portfolio have proper gaps */
.portfolio-section.masonry-style .portfolio-box.fullwidth .project-post {
    padding: 10px;
}

/* =============================================
   WCFCA PAGE LOADER
   ============================================= */
/* =============================================
   WCFCA PAGE LOADER
   ============================================= */
#wcfca-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity 0.9s ease,
        visibility 0.9s ease;
}
#wcfca-page-loader.wcfca-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.wcfca-loader-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* overflow:hidden clips the logo at the wrapper edge.
   Logo starts below and rises up — the "fill from bottom" effect. */
.wcfca-logo-mask {
    overflow: hidden;
}
.wcfca-loader-logo {
    width: 200px;
    max-width: 55vw;
    display: block;
    will-change: transform;
    animation: wcfca-logo-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes wcfca-logo-rise {
    0% {
        transform: translateY(110%);
    }
    100% {
        transform: translateY(0);
    }
}

.fp-tbc {
    font-size: 14px;
    font-family: "Lato-Black";
    color: #666666;
}
.long-filmTitle {
    display: inline-block;
    max-width: 340px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}
span.n-s-tc-imp.NotoSerifTC-900.review-movietitle {
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 340px;
    display: inline-block;
    white-space: nowrap;
}
h2.username.reviewsProfileName {
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    overflow: hidden;
    white-space: nowrap;
    /* Same face as the critic-profile banner name (.cw-name) and no case
       transform: the username must render exactly as the user typed it. */
    font-family: "PlayfairDisplay-MediumItalic", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    text-transform: none;
}
.user_info_area h2.username.reviewsProfileName {
    width: 263px;
}
/* ===== Films Page: Masonry Gallery ===== */
.films-masonry-gallery {
    column-count: 3;
    column-gap: 10px;
}

.films-masonry-gallery .masonry-item {
    break-inside: avoid;
    margin-bottom: 10px;
    display: block;
}

.films-masonry-gallery .masonry-item img {
    width: 100%;
    display: block;
    border-radius: 2px;
}

#gallery-more-masonry {
    column-count: 3;
    column-gap: 10px;
    margin-top: 10px;
}

#gallery-more-masonry .masonry-item {
    break-inside: avoid;
    margin-bottom: 10px;
    display: block;
}

#gallery-more-masonry .masonry-item img {
    width: 100%;
    display: block;
    border-radius: 2px;
}
span.chines.n-s-tc-imp.NotoSerifTC-900.d-block {
    display: block;
}

.forgetPasswordBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 0 0 184px;
}
h1.chines.n-s-tc-imp.NotoSerifTC-900.award-archive-edition-title {
    margin: 0 0 0 0;
    font-family: "Noto Serif SC", serif !important;
    font-size: 28px;
    color: #7a6f4c;
}
.btn-group.award-history-year-dropdown.award-history-year-dropdown-icfcs {
    left: 63%;
}
span.award-archive-edition-light {
    color: #888888;
}

img.award-history-rank-badge.withnumbers {
    height: 45px;
    width: 45px;
    bottom: -9px;
    right: -9px;
}

/* =============================================
  responsive section
   ============================================= */

@media (max-width: 1500px) {
    .portfolio-section.masonry-style .portfolio-box.fullwidth .project-post {
        width: 20%;
    }
    #top-section .news-post .hover-news:before {
        top: 50px;
        left: 50px;
        right: 50px;
        bottom: 50px;
    }

    #top-section .news-post .hover-news .inner-hover {
        width: 280px;
        margin-left: -140px;
    }

    #top-section .news-post .hover-news .inner-hover h2 {
        font-size: 20px;
    }
}
@media (max-width: 1440px) {
    .critics-rev-dropdown {
        left: 63%;
    }
}
@media (max-width: 1279px) {
    /* 4 columns */
    .reviews-iso-box .rev-post {
        width: calc(24.5% - 20px);
        margin: 0 10px 30px 10px;
    }
}
@media (max-width: 1199px) {
    .portfolio-section.masonry-style .portfolio-box.fullwidth .project-post {
        width: 25%;
    }
    .wel_nav nav .navbar-nav li a {
        padding: 5px 12px 1px 12px;
    }
    .welcom_area p {
        padding: 5px 0px 0px 20px;
    }
    .site_title {
        float: left;
        width: 36%;
    }
    .category-widget.widget .post_head .chines.large {
        font-size: 35px;
    }
}
@media screen and (max-width: 1023px) {
    /* Trending / ranked people lists (.critics-rank-list - the filmmakers and
       critics trending boxes and the critic profile's favourite filmmakers):
       their .col-md-20 cards only take a 20% width from 1024px up, so below
       that every card became a full-width row - one oversized avatar per
       line. Lay them out on the same steps as the awards archive grid:
       five per row here, three below 768px, two on phones. */
    .critics-rank-list > .row {
        display: flex;
        flex-wrap: wrap;
    }

    .critics-rank-list > .row > .filmcast-col {
        float: none;
        padding-left: 10px;
        padding-right: 10px;
        width: 20%;
    }

    .film-inner {
        width: 20%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .film-award-nom .aw-nom-inner .eng_wrd {
        line-height: 12px;
    }

    .portfolio-section.masonry-style .portfolio-box.fullwidth .project-post {
        width: 33.33%;
    }
}
@media (max-width: 991px) {
    .store-home-slider {
        margin: 0px 0 0px 0;
    }
    .welcom_area span.user_name {
        font-size: 14px;

        width: 80px;
    }

    .view_full-btn a span.d-inline {
        display: none !important;
    }
    .header_top .wel_nav:not(.no_log) .login_avt {
        margin-right: 55px;
    }
    .welcom_area p {
        padding: 5px 0px 0px 12px;
    }
    .header .container {
        width: 92%;
    }

    .logo_area {
        width: 100px;
        margin-right: 10px;
        margin-top: 0;
    }

    .logo_area img {
        max-width: 100%;
    }

    .header_right {
        width: calc(100% - 115px);
    }

    .logo_area::before {
        display: none;
    }

    .header_bottom .navbar-nav li a {
        padding: 16px 17.5px 6px !important;
    }

    .header_bottom .navbar-nav li a span.chines {
        font-size: 16px;
    }

    .site_title .eng_wrd,
    .site_title .eng_wrd strong {
        font-size: 12px;
    }

    .wel_nav.no_log .login_avt img {
        top: -27px;
        left: 4px;
        width: 120px;
    }

    .film-photo-gallery {
        min-height: 0.01%;
        overflow-x: auto;
    }

    /* Cast grid (film-profile.blade.php): col-sm-4 already gives a clean
       3-per-row layout, but the width:auto/inline-block override that used
       to live here fought with the flex-wrap row (style.css:6145, !important)
       and produced uneven columns instead. Size the columns explicitly so
       the grid wraps cleanly regardless of that conflict. */
    .filmcast-list > .row > .filmcast-col {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .film-photo-gallery > .fpg-flex {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .fpg-item {
        height: 130px;
        flex-shrink: 0;
    }
    .critic-week-card {
        justify-content: flex-start;
    }

    .cw-stats {
        margin-top: 26px;
    }
    /* 3 columns */
    .reviews-iso-box .rev-post {
        width: calc(32.5% - 20px);
        margin: 0 10px 30px 10px;
    }
    header .navbar-nav > li > a {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
    .arb-deco-img {
        display: none;
    }

    .arb-post-label {
        top: 0;
    }

    .fab-search-pill {
        padding: 12px 28px 12px 18px;
    }

    .site_title h1 span {
        font-size: 26px;
    }
    .lg-gallery-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .lg-header-right {
        flex-wrap: wrap;
        gap: 10px;
    }
    .page-banner-section {
        text-align: center;
    }

    .page-banner-section ul {
        text-align: center;
    }

    .error-section,
    .comming-soon-section {
        padding: 50px 0;
    }

    #top-section .news-post .hover-news:before {
        display: none;
    }

    #top-section .owl-arrows {
        display: none;
    }

    .site_title .eng_wrd,
    .site_title .eng_wrd span {
        font-size: 11px;
    }

    .wel_nav nav .navbar-nav li a {
        padding: 6px 15px 1px 15px;

        font-size: 8px;
    }

    .site_title {
        float: left;
        width: 33%;
    }

    .wel_nav {
        width: auto;
    }

    /* film-profile.blade.php - .filmprofile-intro poster: the fixed 220x320px
       size (custom.css a.filmprofile-img.d-view) overflows the narrower 25%
       poster column at this breakpoint and overlaps the crew grid beside it,
       and the -120px overlap pull (style.css .filmprofile-img img) drags it
       up over the rating section above - both are neutralized here so the
       poster scales to fit its column instead. */
    .filmprofile-intro .filmprofile-poster-col .filmprofile-img img {
        margin-top: 0;
    }

    .filmprofile-poster-col a.filmprofile-img.d-view {
        width: 100%;
        max-width: 180px;
        height: auto;
    }

    .filmprofile-poster-col a.filmprofile-img.d-view img {
        width: 100%;
        height: auto;
    }

    /* From 768px upward this profile keeps the same full-size, overlapping
       poster as the desktop layout. The compact mobile poster starts only
       below 768px. */
    @media (min-width: 768px) {
        .filmprofile-intro .filmprofile-poster-col .filmprofile-img img {
            margin-top: -120px;
        }

        .filmprofile-poster-col a.filmprofile-img.d-view {
            max-width: 220px;
        }
    }

    @media (max-width: 767px) {
        /* Below 768px the mobile hero poster (.m-view block above this
           section) already shows the poster, so this section's own copy is
           hidden instead of leaving two posters visible. The sitewide
           ".d-view { display: none }" rule further below can't do this on
           its own because "a.filmprofile-img.d-view" (custom.css) is more
           specific and wins. */
        .filmprofile-poster-col a.filmprofile-img.d-view {
            display: none;
        }
    }

    /* Login, register and forgot-password banners only: keep their title
       centered on mobile/tablet widths (matching the shared .news-title
       center rule already applied below 768px), without affecting the
       other .news-title banners (news, film profile, critic profile, etc.)
       that keep their own alignment across this range. */
    .news-section .news-title.auth-banner-bg h1 {
        text-align: left;
        float: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0;
    }
    .breadcrumbs-1-inner {
        padding: 10px 0px 0px 0 !important;
        display: flex;
        justify-content: center;
    }
}
@media (max-width: 914px) {
    .header_bottom .navbar-nav li a {
        padding: 16px 12px 6px !important;
    }
}
@media (max-width: 799px) {
    /* 2 columns */
    .reviews-iso-box .rev-post {
        width: calc(48.5% - 20px);
        margin: 0 10px 30px 10px;
    }
    .header_bottom .navbar-nav li a {
        padding: 16px 9px 6px !important;
    }
}
@media (max-width: 767px) {
    .store-home-slider {
        height: 100px;
        margin: 35px 0 0px 0;
    }
    .store-home-slider-img {
        top: -31px;
        height: 131px;
    }
    /* Below 768px: centre the image + title as a group instead of pinning
       them to the left edge (desktop/tablet keep the absolute left-aligned
       layout above this breakpoint, untouched). */
    .store-home-slider .container {
        display: flex;
        align-items: center;
        justify-content: left;
        position: relative;
        top: -15px;
    }
    .store-home-slider-img {
        position: static;
    }
    .store-home-slider-title {
        position: static;
        transform: none;
        margin: 26px 0 0 -10px;
    }
    .wel_nav nav .navbar-nav li a:after {
        top: 7px;
    }
    .blog-section.standard .blog-box.loggedinPage {
        padding: 0px 0px 40px 0 !important;
    }
    .award-archive-banner {
        margin-top: 0px !important;
    }
    #films-archive-banner .fab-cn,
    #filmmakers-archive-banner .fab-cn,
    #critics-archive-banner .fab-cn,
    #store-archive-banner .fab-cn {
        font-size: 20px;
    }
    #films-archive-banner .fab-titlethin,
    #filmmakers-archive-banner .fab-titlethin,
    #critics-archive-banner .fab-titlethin,
    #store-archive-banner .fab-titlethin {
        font-size: 12px;
    }
    .film-inner {
        width: 25%;
    }

    /* Film card grids (.films-list - "Most Reviewed Films", "Latest Additions"
       and the other poster rows): three posters per row from here down, the
       same step the awards archive grid uses, instead of four at this width and
       two on phones. */
    .films-list .film-inner {
        width: 33.333%;
    }

    /* The poster keeps its 132px design size as a cap but centres in - and
       shrinks with - its third of the row rather than sitting fixed-width
       against the column's left edge. */
    .films-list .film-wrap img {
        display: block;
        height: auto;
        margin: 0 auto;
        max-width: 132px;
        width: 100%;
    }

    .filmography-main {
        margin-bottom: 30px;
    }
    .blog-post.single-post .comment-section .comment-tree > li[id^="comment-"] {
        scroll-margin-top: 220px;
    }

    .subscribe-recaptcha-icon {
        right: 12px;
    }
    .subscribe-input-wrap input[type="email"] {
        margin: 10px 0px 10px 0;
    }
    .header_right {
        margin-top: 0px;
    }
    i.fa.fa-search {
        font-size: 16px;
        padding: 6px 0 4px 10px;
    }
    .films-masonry-gallery,
    #gallery-more-masonry {
        column-count: 2;
    }
    /* Trending / ranked people lists: three per row from here down. */
    .critics-rank-list > .row > .filmcast-col {
        width: 33.333%;
    }

    /* The avatar stops being a fixed 100px circle and tracks its column the way
       the awards archive's filmmaker portraits do, capped at the same 148px, so
       both pages read at the same scale from here down. */
    .critics-rank-list .filmcast-inner img {
        aspect-ratio: 1;
        min-height: 148px;
        max-height: 148px;
        max-width: 148px;
        object-fit: cover;
        width: 100%;
        min-width: 148px;
    }

    .arb-portrait {
        display: none;
    }

    .arb-center {
        gap: 14px;
    }

    /* Archive banner (x-archive-banner, reviews pages): the shared
       .fab-search-pill / .fab-pill-text rules further down in this block hide
       the search on mobile - this banner keeps it visible instead. It is
       lifted out of the title row and pinned to the top centre of the banner,
       leaving the title and the post-review action side by side underneath.
       .arb-inner is the positioning context, and its top padding reserves the
       row the pill now occupies. */
    .film-archive-banner .arb-inner {
        height: auto;
        padding: 25px 0 14px;
        position: relative;
    }

    .film-archive-banner .arb-inner .arb-pill {
        display: flex;
        left: 50%;
        padding: 8px 16px !important;
        position: absolute;
        top: 10px;
        transform: translateX(-50%);
        white-space: nowrap;
        z-index: 3;
    }

    .film-archive-banner .arb-inner .arb-pill .fab-pill-text {
        display: flex;
    }

    /* the mobile "i.fa.fa-search" rule in this block adds a top padding that
       pushes the icon off the pill's text baseline */
    .film-archive-banner .arb-inner .arb-pill .fa-search {
        padding: 0;
    }

    /* Post-a-review typewriter artwork steps down with the viewport */
    .film-archive-banner .arb-right .post-ar-btn img {
        height: auto;
        width: 92px;
    }

    .film-archive-banner .arb-right .post-ar-btn .chines {
        font-size: 17px;
    }

    .fab-reel-film {
        display: none;
    }

    /* Smaller left-side text */
    .fab-cn {
        font-size: 18px;
    }

    .fab-titlethin {
        font-size: 12px;
        letter-spacing: 1px;
        margin-top: 3px;
    }

    .fab-en {
        letter-spacing: 1px;
    }

    .fab-title-block {
        left: auto;
        right: 20px;
    }

    /* Hide search button entirely below 767px */
    .fab-right {
        display: none;
    }

    .fab-pill-text {
        display: none;
    }

    .fab-search-pill {
        display: none;
    }

    /* Films, filmmakers and critics pages: keep their search box visible on
       mobile, and keep the ICFCS title tight against the portrait, overriding
       the shared rules above just for these banners. */
    /* #films-archive-banner .fab-brand {
        flex: 0 1 auto;
    } */
    #films-archive-banner .fab-title-block {
        left: 178px;
        right: auto;
    }
    /* The filmmaker portrait is far narrower than the films one (140px wide
       artwork vs 235px), so its title starts just clear of the photo instead
       of overlapping it. */
    #filmmakers-archive-banner .fab-title-block {
        left: 144px;
        right: auto;
    }
    /* Same for the critics portrait (180px wide artwork). */
    #critics-archive-banner .fab-title-block {
        left: 180px;
        right: auto;
    }
    /* Store banner: same offset as the critics banner (per task scope, not
       recalculated for the new store images). */
    #store-archive-banner .fab-title-block {
        left: 180px;
        right: auto;
    }
    #films-archive-banner .fab-right,
    #filmmakers-archive-banner .fab-right,
    #critics-archive-banner .fab-right,
    #store-archive-banner .fab-right {
        display: flex;
        align-items: center;
    }
    #films-archive-banner .fab-search-pill,
    #filmmakers-archive-banner .fab-search-pill,
    #critics-archive-banner .fab-search-pill,
    #store-archive-banner .fab-search-pill {
        display: flex;
        width: auto;
        padding: 10px 16px;
        gap: 8px;
    }
    #films-archive-banner .fab-pill-text,
    #filmmakers-archive-banner .fab-pill-text,
    #critics-archive-banner .fab-pill-text,
    #store-archive-banner .fab-pill-text {
        display: flex;
    }
    .film-gallery-head {
        height: auto !important;
        min-height: 100% !important;
    }

    .portfolio-section.masonry-style .portfolio-box.fullwidth .project-post {
        width: 50%;
    }

    .px-xs-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .pt-xs-0 {
        padding-top: 0px !important;
    }

    .py-xs-15 {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .pl-xs-0 {
        padding-left: 0;
    }

    .mt-xs-0 {
        margin-top: 0;
    }

    .my-xs-15 {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    .movie-detail {
        margin-bottom: 20px;
    }

    .blog-section.standard::before {
        background: transparent;
    }

    .blog-section.standard .blog-box {
        position: relative;
    }

    .blog-section.standard .blog-box:before {
        position: absolute;
        content: "";
        width: calc(100% + 30px);
        height: 100%;
        top: 0;
        left: -15px;
        background: #ffffff;
        z-index: -1;
    }

    .sidebar-wrap:before {
        display: none;
    }

    .breadcrumbs-1-inner {
        padding: 10px 0px 0px 0 !important;
        display: flex;
        justify-content: center;
    }

    .d-view {
        display: none;
    }

    .m-view {
        display: block;
    }

    /* film-profile.blade.php mobile hero: center the small poster thumbnail
       instead of leaving it flush against the left edge. */
    .user_info_area_m.m-view .filmprofile-img {
        display: table;
        margin-left: auto;
        margin-right: auto;
    }

    /* Below 767px the preceding desktop-only identity columns are hidden, so
       let the film statistics span the full row and center their content. */
    .filmprofile-rating-col {
        float: none;
        height: auto;
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
    }

    .filemaker-profile-info.filmprofile-info {
        justify-content: center;
        padding: 18px 0;
    }

    .filmprofile-info .upi-rlar {
        min-width: 0;
        padding-left: 7px;
        padding-right: 7px;
    }

    .filmprofile-info .upi-rlar:first-child {
        padding-left: 0;
    }

    .filmprofile-info .upi-rlar:last-child {
        padding-right: 0;
    }

    .filmprofile-info .upi-rlar .en-lang {
        font-size: 9px;
        white-space: nowrap;
    }

    .logo_area {
        width: 60px;

        margin-top: 0;
    }

    .logo_area img {
        max-width: 100%;
        height: 50px;
    }

    header.header .container > .row {
        margin-right: 0;
        margin-left: 0;
    }

    header.header.header-logged-in {
        padding-bottom: 18px;
    }

    .navbar-toggle .icon-bar {
        width: 30px;
        height: 4px;
        border-radius: 3px;
    }

    .header_bottom {
        float: right;
        width: 50px;
        border-top: 0px;
    }

    .navbar-header {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
    }

    .header_right {
        position: relative;
        width: calc(100% - 70px);
    }

    .header_top {
        width: calc(100% - 50px);
        padding: 0 0 0 15px;
        /* border-left: 1.5px solid #6a6a6a; */
        position: relative;
    }
    .header_top::before {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        bottom: 2px;
        width: 1.5px;
        background: #6a6a6a;
    }

    .navbar-toggle {
        margin-top: 0;
        margin-right: 0;
        padding: 9px 5px;
    }

    .site_title {
        width: 100%;
        margin-top: 0px;
    }

    .logo_area::before {
        display: none;
    }

    .header-bottom .wel_nav {
        width: 100%;
        border-radius: 55px;
        padding: 5px 15px;
        position: relative;
    }

    .header-bottom .wel_nav.no_log {
        width: 100%;
        border-radius: 55px;
        padding: 5px 15px;
        position: relative;
    }

    /* Mobile welcome nav (Register/Login, My Account/Log out): same
       hover/focus gold as the desktop .header_top .wel_nav links. */
    .header-bottom .wel_nav nav .navbar-nav li a:hover,
    .header-bottom .wel_nav nav .navbar-nav li a:focus,
    .header-bottom .wel_nav nav .navbar-nav li a:hover span.chines,
    .header-bottom .wel_nav nav .navbar-nav li a:focus span.chines {
        color: #fde3a7 !important;
    }

    .header-bottom .login_person {
        position: absolute;
        right: 60px;
        bottom: -28px;
    }

    .header-bottom .login_person.user-logged {
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        right: 60px;
    }

    .header-bottom .login_person.user-logged img {
        width: 55px !important;
        height: 55px;
        border-radius: 50%;
        border: 3px solid #9d9b9b;
        object-fit: cover;
    }

    .header-bottom .login_person.user-logged .user_notifaction {
        position: absolute;
        top: -14px;
        right: 0px;
        float: none;
    }

    .header-bottom .nav.navbar-nav {
        float: left;
    }

    .header-bottom .nav.navbar-nav > li {
        float: left;
        padding-top: 3px;
    }

    .header-bottom .nav.navbar-nav {
        float: left;
        margin: 0;
    }

    .header-bottom .wel_nav nav.search-icon li:last-child a {
        padding: 5px 15px;
        font-size: 26px;
        display: inline-block;
    }

    .welcom_area p {
        position: relative;
        display: block;
    }

    .wel_nav nav .navbar-nav li:last-child a {
        font-size: 10px;
    }

    .wel_nav:not(.no_log) nav .navbar-nav li:last-child a {
        font-size: 18px;
        margin-top: 5px;
    }

    .nav.navbar-nav.search-icon .search.drop a {
        font-size: 26px;
        margin-top: 3px;
    }

    .header-bottom {
        padding-top: 15px;
        display: block;
        float: none;
        clear: both;
    }

    .news-section .news-title .owl-arrows {
        margin-top: 0;
        padding-top: 0;
        position: absolute;
        bottom: 10px;
        right: 18px;
        padding-bottom: 0;
        width: calc(100% - 100px);
        margin-right: 0;
        padding: 0 0 0 18px;
    }

    .latest-product.news-section .news-title .owl-arrows {
        width: calc(100% - 140px);
    }

    .news-section .news-title {
        position: relative;
    }

    .news-section .news-title img {
        width: 90px;
    }

    .news-section .news-title.img2 img {
        width: 130px;
    }

    .news-title.img .chines {
        font-size: 20px;
    }
    .news-title.img .eng_wrd {
        font-size: 12px;
        font-family: "Lato-Regular", sans-serif;
    }
    .news-section .news-title .owl-arrows a {
        width: 20px;
        height: 20px;
        font-size: 14px;
        line-height: 16px;
    }

    .news-section .news-title h1 {
        padding: 8px 0px;
        line-height: 15px;
        text-align: left;
    }
    .forgetPasswordBox {
        padding: 0;
    }

    .sidebar .widget .post_head .imga {
        display: table-cell;
        vertical-align: bottom;
        padding-bottom: 0;
        margin-bottom: 0px;
        border-bottom: 0;
        width: 150px;
    }

    .frl-btn {
        margin-top: 0;
    }

    .sidebar .widget .post_head h1,
    .sidebar .widget .post_head h2 {
        display: table-cell;
        vertical-align: bottom;
        padding-left: 15px;
    }

    .sidebar .widget .post_head h1,
    .sidebar .widget .post_head h2 {
        padding-bottom: 10px;
    }

    .widget .post_head {
        border-bottom: 2px solid #ccc;
        margin-bottom: 15px;
        display: table;
        width: 100%;
    }
    footer {
        padding-top: 25px;
    }
    footer ul.social-list {
        margin-bottom: 25px;
    }
    .subscribe-section input[type="email"] {
        width: 100%;
        max-width: 100%;
        font-size: 12px;
        line-height: 12px;
        padding: 8px 10px;
    }

    .subscribe-input-wrap {
        display: block;
        width: 100%;
        margin: 0 0 8px;
    }

    .subscribe-input-wrap input[type="email"] {
        padding-right: 40px;
    }

    .site_title h1 span,
    .main-block-section .block-box .post_head h1 span.chines,
    .main-block-section .block-box .post_head h2 span.chines,
    .category-widget.widget .post_head .chines {
        font-size: 32px;
    }
    .site_title span.chines {
        margin-bottom: 0px;
    }
    .new_letter_wrap {
        text-align: left;
        /* display:table/table-cell left an unexplained ~35px gap between the
           image and the text/button column (a table auto-layout quirk, not
           border-spacing/margin/padding); flex lays them out predictably
           with no gap. Desktop never used table display for this (it uses
           inline-block + float), so this is mobile-only either way. */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .subscribe-form {
        display: inline-block;
        margin-top: 0px;
    }
    .new_letter_wrap img {
        float: none;
        display: block;
        height: 66px;
    }

    .subscribe-form {
        justify-content: space-between;
        display: flex;
        align-items: center;
        gap: 10px;
        /* padding: 10px 10px 0; */
    }
    span.chines.n-s-tc-imp.NotoSerifTC-900.d-block {
        display: flex;
        margin: 0;
    }

    .subscribe-section span {
        font-size: 16px;
        line-height: 20px;
        display: flex;
    }

    .subscribe-section input[type="submit"] {
        padding: 6px 12px;
        display: flex;
    }
    span.chines.n-s-tc-imp.NotoSerifTC-900.d-block {
        display: flex;
        margin: 0;
        font-size: 22px;
    }

    .subscribe-mobile-trigger {
        display: inline-block;
        color: #333333;
        font-size: 12px;
        font-family: "Lato", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.7px;
        padding: 8px 20px;
        border: 1px solid transparent;
        background: #fce2aa;
        border-radius: 3px;
        cursor: pointer;
    }

    .subscribe-popup {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 100000;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.88);
    }

    .subscribe-popup.active {
        display: flex;
        animation: wcfcaFadeIn 0.3s ease forwards;
    }

    .subscribe-popup-inner {
        display: block;
        position: relative;
        width: 100%;
        max-width: 360px;
        margin: 0 20px;
        padding: 32px 20px;
        text-align: center;
    }

    .subscribe-popup-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0px;
        right: 8px;
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.6);
        font-size: 20px;
        cursor: pointer;
    }

    .subscribe-popup-close:hover {
        color: #fff;
    }

    .subscribe-popup-label {
        margin-bottom: 12px;
    }

    .subscribe-popup .subscribe-input-wrap input[type="email"] {
        border-color: #c8a96e;
    }

    .subscribe-popup .subscribe-input-wrap input[type="email"]::placeholder {
        color: #c8a96e;
    }

    .header_bottom.mobile-header .navbar-nav li {
        border-bottom: 1px solid #f3f3f3;
    }

    .header_bottom.mobile-header {
        width: calc(100% + 115px);
        position: relative;
    }

    .header_bottom.mobile-header::before {
        width: calc(100% + 30px);
        height: 1px;
        background: #cccccc;
        content: "";
        position: absolute;
        left: -15px;
        top: 20px;
    }

    .header_bottom.mobile-header .navbar-nav {
        margin: 10px 0px 7.5px;
        padding-top: 20px;
    }

    .header_bottom.mobile-header .navbar-nav li:first-child a {
        padding-left: 8px !important;
    }

    .header_bottom.mobile-header .navbar-nav li a:after {
        display: none;
    }

    section.registeration {
        padding: 0px 0px 0px 0;
        text-align: center;
    }

    .sidebar-wrap {
        padding-bottom: 20px;
    }

    .profile-image {
        width: 150px;
        height: 150px;
    }

    .post-review {
        margin-top: 0;
    }

    .user_info_area_m.m-view {
        padding: 0px 0 10px;
        margin: 0 0 20px 0;
    }

    .user-profile-info {
        margin-left: auto;
        margin-right: auto;
        flex-wrap: wrap;
        padding-top: 22px;
    }

    .user-profile-info .upi-rlar {
        min-height: 74px;
        padding: 0 12px;
    }

    .user-profile-info .critic-profile-tier-badge {
        padding-right: 12px;
    }

    .user-profile-info .critic-profile-tier-badge .critic-tier-badge-img {
        height: 56px;
    }

    .pr-xs-0 {
        padding-right: 0;
    }

    .critics-dropdown {
        left: 50%;
        transform: translateX(-50%);
    }

    .user_info_area {
        height: auto;
        min-height: 118px;
    }

    /* ------------------------------------------------------------------
       Critic profile banner (#critic-profile-banner) below 767px only.
       The grey band carries the review statistics on the left and the
       post-a-review action on the right, and the year dropdown moves out of
       the band to sit centred just underneath it, the same way the ICFCS
       awards banner's year dropdown does. Scoped to this page's id because
       the same .user_info_area markup is shared with the nomination ballot
       and the film/filmmaker profile banners.
       ------------------------------------------------------------------ */

    /* The action moves into the band, so the white row above it keeps only the
       avatar and identity and takes the full width they used to share. */
    #critic-profile-banner .user_info_area_m .col-xs-4 {
        display: none;
    }

    #critic-profile-banner .user_info_area_m .col-xs-8 {
        width: 100%;
    }

    /* Band row: statistics first, action last. Both columns drop their grid
       widths (.col-xs-12 would otherwise make the statistics span the row) and
       size to their content instead. */
    #critic-profile-banner .user_info_area .container > .row {
        align-items: center;
        display: flex;
    }

    #critic-profile-banner .user_info_area .col-sm-4 {
        flex: 1 1 auto;
        order: 1;
        width: auto;
    }

    /* The action column is .d-view, which the shared rule above hides at this
       width; bring it back as the band's right-hand item. */
    #critic-profile-banner .user_info_area .col-sm-3.d-view {
        display: block;
        flex: 0 0 auto;
        order: 2;
        padding-left: 0;
        width: auto;
    }

    /* Statistics read from the left edge instead of the desktop's right
       alignment, and the row centres itself in the band rather than being
       pushed down by the padding the right-aligned layout needed. */
    #critic-profile-banner .user-profile-info {
        justify-content: flex-start;
        padding-bottom: 0;
        padding-top: 0;
    }

    #critic-profile-banner .user-profile-info .upi-rlar:first-child {
        padding-left: 0;
    }

    /* The action is sized down to sit inside the band's height. */
    #critic-profile-banner .user_info_area .post-review {
        margin-top: 0;
    }

    #critic-profile-banner .user_info_area .post-ar-btn img {
        height: 44px;
        width: auto;
    }

    #critic-profile-banner .user_info_area .post-ar-btn .chines {
        font-size: 15px;
    }

    #critic-profile-banner .user_info_area .post-ar-btn .eng_wrd {
        font-size: 8px;
    }

    /* Year dropdown: out of the band and centred in the white strip below it
       (the band's bottom margin), as a fully rounded pill rather than the tab
       shape it has on desktop. */
    #critic-profile-banner .user_info_area {
        margin-bottom: 35px;
    }

    #critic-profile-banner .critics-dropdown {
        margin-top: -22px;
        top: 100%;
    }

    #critic-profile-banner .critics-dropdown button.btn {
        border: 1px solid #d5d5d5;
        border-radius: 22px;
        padding: 8px 18px;
    }

    .cp-content .table {
        margin-bottom: 0;
    }

    .userfilm-review h2 {
        font-size: 24px;
        color: #333;
    }

    .single-review .blog-box {
        padding: 10px 0px 40px 0 !important;
    }

    .blog-section.standard .blog-box .blog-post .post-content {
        margin-left: 0;
    }

    .blog-post.single-post .comment-section {
        padding-left: 0px;
    }

    .blog-post.single-post .comment-section ul.depth .comment-box {
        padding-left: 0px;
    }

    .blog-section.standard .blog-box .blog-post .postmain-info {
        width: calc(100% - 170px);
    }

    .date-post {
        padding-top: 20px;
    }

    .film-poster img {
        margin-right: 15px;
    }

    .height-xs-auto {
        min-height: 100%;
    }

    .blog-section.standard .blog-box {
        padding: 15px 0px 15px 0;
    }

    .blog-section.standard .blog-box .blog-post.single-post .date-post p {
        margin-bottom: 0 !important;
    }

    .blog-section.standard
        .blog-box
        .blog-post.single-post
        .date-post
        p:last-child {
        margin-bottom: 10px !important;
    }

    .upload-btn-wrapper-2 label {
        padding: 5px 15px;
    }

    .upload-btn-wrapper-2 .chines {
        font-size: 14px;
    }

    .header-bottom .login_person img {
        width: 125px;
    }

    .filmprofile-img img {
        margin-top: 0;
        max-width: 80px;
        margin-right: 15px;
    }

    .fp-text-1 {
        font-size: 12px;
        line-height: 16px;
        display: block;
    }

    .fp-text-3 {
        font-size: 14px;
    }

    .filmprofile-info {
        margin-left: auto;
        margin-right: auto;
    }

    .film-photo-gallery {
        min-height: 0.01%;
        overflow-x: auto;
    }

    /* Cast grid: 3 per row below 768px. The previous white-space: nowrap here
       never actually worked (it can't override the flex-wrap row it was meant
       to turn into a horizontal scroller), so this replaces it with an
       explicit, working column size instead. */
    .filmcast-list > .row > .filmcast-col {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    /* Let the 100x100 avatar shrink inside the narrower 3-up column on small
       phones instead of overflowing it. */
    .filmcast-list .filmcast-inner img {
        aspect-ratio: 1 / 1;
        height: auto;
        max-width: 100%;
    }

    .film-photo-gallery > .fpg-flex {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .fpg-item {
        height: 130px;
        flex-shrink: 0;
    }

    /* Photo gallery grid (film-profile.blade.php): fixed 3-column grid is
       too cramped below 768px, so show 2 columns instead. */
    .film-photo-gallery > .fpg-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-section.masonry-style {
        padding: 20px 0 40px;
    }

    .filter li .eng_wrd {
        letter-spacing: 0.5px;
        font-size: 10px;
    }

    ul.filter li {
        display: inline-block;
        margin: 0 7px 4px;
    }

    .filter li .chines {
        font-size: 13px;
    }

    .site_title .eng_wrd,
    .site_title .eng_wrd span {
        font-size: 12px;
    }

    .wel_nav nav .navbar-nav li a {
        padding: 6px 15px 1px 15px;
        position: relative;
        font-size: 10px;
        text-transform: uppercase;
        line-height: 15px;
        color: #ccc !important;
    }

    .navbar-default .navbar-toggle {
        margin-top: 19px;
    }

    header.active .navbar-default .navbar-toggle {
        margin-top: 19px;
    }

    header .navbar-nav > li > a {
        padding: 4px 15px !important;
        color: #222222 !important;
    }

    .megadrop-down {
        position: relative;
        visibility: visible;
        opacity: 1;
        top: inherit;
        left: inherit;
        background: transparent;
        padding: 5px 25px;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        -o-box-shadow: none !important;
    }

    .megadrop-down .dropdown h2 {
        display: none;
    }

    .megadrop-down .dropdown ul li {
        padding-bottom: 0px;
    }

    .megadrop-down .dropdown ul li a {
        padding-bottom: 9px;
    }

    .megadrop-down .dropdown a.comming {
        display: none;
    }

    #top-section .news-post .hover-news .inner-hover {
        max-width: 90%;
        width: 90%;
        right: auto;
        left: 50%;
        margin-left: 0;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    #top-section .news-post .hover-news .inner-hover h2 {
        font-size: 18px;
        line-height: 24px;
    }

    #top-section .news-post .hover-news .inner-hover span,
    #top-section .news-post .hover-news .inner-hover p {
        font-size: 11px;
    }

    .news-section .news-title h1 {
        text-align: center;
        float: none;
    }

    .news-section .news-title .owl-arrows {
        float: none;
        text-align: center;
    }

    #container {
        padding-top: 80px;
    }
    .header .container {
        width: 100%;
    }
    .banner-marketing-section {
        padding: 15px 0;
    }
    .post_head {
        margin-bottom: 15px;
    }
    .main-block-section .block-box .block-part .blog-post {
        margin-bottom: 15px;
    }
    .sidebar .widget {
        margin-bottom: 40px;
    }
    .sidebar .widget ul.autors-list.latest-filmmakers-list,
    .sidebar .widget ul.autors-list.new-members-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }
    .sidebar .widget ul.autors-list.latest-filmmakers-list li,
    .sidebar .widget ul.autors-list.new-members-list li {
        float: none;
        margin: 0;
    }
    .sidebar
        .widget
        ul.autors-list.latest-filmmakers-list
        li:nth-child(n + 11) {
        display: none;
    }
    .sidebar .widget ul.autors-list.latest-filmmakers-list li a,
    .sidebar .widget ul.autors-list.new-members-list li a {
        display: block;
        max-width: none;
        width: 100%;
    }
    .sidebar .widget ul.autors-list.latest-filmmakers-list li a .square-image {
        aspect-ratio: 1 / 1;
        height: auto;
        width: 100%;
    }
    /* The member avatar is a real <img>, so it cannot take its height from
       aspect-ratio the way the filmmaker .square-image div can - iOS Safari
       lays a replaced element out from its intrinsic ratio instead. The square
       comes off the <a> and the image fills it absolutely, matching the fix
       used on the award poster and portrait frames. */
    .sidebar .widget ul.autors-list.new-members-list li a {
        aspect-ratio: 1 / 1;
        position: relative;
    }
    .sidebar .widget ul.autors-list.new-members-list li a img {
        height: 100%;
        inset: 0;
        position: absolute;
        width: 100%;
    }
    #top_nav {
        padding: 0 0 0 50px;
    }
}
@media (max-width: 680px) {
    /* 1 column. Left gutter intentionally matches the right gutter (both
       container padding and card margin stay the default 10px each side) -
       an earlier version zeroed only the left side to run the card image to
       the screen edge, but that zeroed the container's padding-left AND the
       card's margin-left while the right side kept both, so the row sat
       flush left with roughly double the gutter on the right instead of
       being centered. */
    .reviews-iso-box .rev-post {
        width: calc(97% - 20px);
        margin: 0 10px 30px 10px;
    }

    .store-home-slider {
        height: 80px;
        margin: 35px 0 0px 0;
    }
    .store-home-slider-img {
        top: -31px;
        height: 111px;
    }
    .store-home-slider-title .eng_wrd {
        margin-top: 0px;

        font-size: 12px;
    }
    .store-home-slider-title .chines {
        font-size: 22px;
    }
}
@media (max-width: 767px) {
    /* Reviews journal grid (reviews/index.blade.php): cap the image at 82px
       tall so wide banner artwork still reads as one strip. Where the crop
       overflows the 82px band, object-position keeps the image's right edge
       in view and crops from the left, per the reviewed design. */
    .reviews-iso-box .rev-post img {
        height: 82px;
        object-fit: cover;
        object-position: right center;
    }
}
@media (max-width: 600px) {
    .critics-rank-list .filmcast-inner img {
        aspect-ratio: 1;
        min-height: 130px;
        max-height: 130px;
        max-width: 130px;
        object-fit: cover;
        width: 100%;
        min-width: 130px;
    }
    .btn-reg .chines {
        font-size: 22px;
    }
    .btn-reg {
        padding: 8px 25px;
    }
    #top-section .news-post img {
        width: 100%;
        height: 350px;
        object-fit: cover;
    }
    /* Film card grids (.films-list - "Most Reviewed Films" and the other
       film/TV rows): .films-list > .row is a wrapping flex container, so the
       cards wrap onto rows instead of scrolling sideways as the rules below
       were written for. The leftover white-space:nowrap was inherited by the
       card titles, so a long title stayed on one line and ran across the
       neighbouring card - and off the screen in the last column. Let the
       titles wrap, and share the row between the cards instead of leaving a
       ragged gap after the fixed-width ones. */
    .films-list > .row {
        overflow-x: visible;
        white-space: normal;
    }

    .film-inner {
        width: 132px;
        display: inline-block;
        float: none;
    }

    .films-list .film-inner {
        display: flex;
        width: 33.333%;
    }

    /* The poster keeps its 132px design size but may shrink with the card on
       the narrowest screens instead of overflowing it. */
    .films-list .film-wrap img {
        display: block;
        height: auto;
        margin: 0 auto;
        max-width: 132px;
        width: 100%;
    }

    .films-list {
        min-height: 0.01%;
        overflow-x: auto;
    }
    .cw-profile {
        text-align: left;
    }

    .cw-badge {
        padding-right: 12px;
    }

    .cw-stat {
        padding: 4px 12px;
    }

    .cw-stat-num {
        font-size: 26px;
    }
}
@media screen and (max-width: 480px) {
    /* Film card grids keep three per row on phones, matching the awards archive
       grid at the same width, instead of dropping to two. The column padding is
       left alone: .films-list > .row offsets it with a negative margin, so
       changing it here would shift the whole grid off the content edge. */
    .films-list .film-inner {
        width: 33.333%;
    }
    .critics-rank-list .filmcast-inner img {
        aspect-ratio: 1;
        min-height: 120px;
        max-width: 120px;
        max-height: 120px;
        object-fit: cover;
        width: 100%;
        min-width: 120px;
        height: 100%;
    }
    .store-home-slider {
        height: 75px;
        margin: 30px 0 0px 0;
    }
    .store-home-slider-img {
        top: -31px;
        height: 106px;
    }
    film-archive-banner.reviews-search-banner .arb-title {
        margin: 0 0 0 -9px;
    }
    .news-section .news-title h1 {
        line-height: 13px;
    }
    .news-title.img .chines {
        font-size: 18px;
    }
    .news-title.img .eng_wrd {
        font-size: 9px;
        font-family: "Lato-Regular", sans-serif;
    }
    span.chines.n-s-tc-imp.NotoSerifTC-900.d-block {
        display: flex;
        /* margin: 0 0 5px 0; */
        /* font-size: 14px; */
    }
    .subscribe-mobile-trigger {
        letter-spacing: 1px;
        padding: 8px 10px;
    }
    /* .new_letter_wrap {
        justify-content: space-between;
    } */

    /* Critic profile banner: the post-a-review action steps down once more so
       the statistics keep their whole row next to it - the artwork is the widest
       part of the action, so it is what has to give. */
    #critic-profile-banner .user_info_area .post-ar-btn img {
        height: 38px;
    }

    #critic-profile-banner .user_info_area .post-ar-btn .chines {
        font-size: 14px;
    }
    #films-archive-banner .fab-cn,
    #filmmakers-archive-banner .fab-cn,
    #critics-archive-banner .fab-cn,
    #store-archive-banner .fab-cn {
        font-size: 18px;
    }
    #films-archive-banner .fab-titlethin,
    #filmmakers-archive-banner .fab-titlethin,
    #critics-archive-banner .fab-titlethin,
    #store-archive-banner .fab-titlethin {
        font-size: 9px;
    }
    /* Trending / ranked people lists keep three per row on phones, matching the
       awards archive's filmmaker grid, instead of dropping to two. */
    .critics-rank-list > .row > .filmcast-col {
        width: 33.333%;
    }

    /* No cap here either: a third of a phone-width row is already narrower than
       the 148px cap above, so the avatar fills its column exactly as the awards
       archive person cards do at this width. */
    .critics-rank-list .filmcast-inner img {
        max-width: none;
    }
    .cp-title .chines {
        font-size: 18px;
    }
    .cp-title .eng_wrd {
        font-size: 10px;
    }
    .fab-portrait {
        bottom: 22px;
    }
    .fab-inner {
        height: 73px;
    }
    #top_nav {
        padding: 0 0 0 20px;
    }
    .logo_area img {
        max-width: 100%;
        height: 45px;
    }
    .site_title h1 span,
    .main-block-section .block-box .post_head h1 span.chines,
    .main-block-section .block-box .post_head h2 span.chines,
    .category-widget.widget .post_head .chines {
        font-size: 28px;
    }
    .site_title .eng_wrd,
    .site_title .eng_wrd span {
        font-size: 11px;
    }
    .films-masonry-gallery,
    #gallery-more-masonry {
        column-count: 1;
    }

    /* 
       480px so thumbnails aren't squeezed too narrow. */
    .film-photo-gallery > .fpg-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .fab-portrait img {
        height: 90px;
    }

    .fab-title-block {
        left: auto;
    }

    /* Films page only: keep the title tight against the smaller portrait,
       overlapping the light shoulder area rather than the darker hair. */
    #films-archive-banner .fab-title-block {
        left: 145px;
        right: auto;
    }

    /* Filmmakers page: same idea, offset for its narrower portrait. */
    #filmmakers-archive-banner .fab-title-block {
        left: 97px;
        right: auto;
    }

    /* Critics page: same idea, offset for its own portrait width. */
    #critics-archive-banner .fab-title-block {
        left: 121px;
        right: auto;
    }

    /* Store page: same offset as the critics banner (per task scope). */
    #store-archive-banner .fab-title-block {
        left: 121px;
        right: auto;
    }

    /* Awards Watch banner (.award-archive-banner-watch): the shared awards
       rules pull the title 42px back over the artwork and lift it to the top
       of the banner - offsets tuned for the narrow Winners & Nominees
       statuette. This banner's artwork is a full figure, so those offsets
       drop the title straight across her face. Sit the title clear of the
       artwork and centre it in the banner instead. */
    .award-archive-banner-watch .award-archive-brand-copy {
        margin: 0 0 22px 3px;
    }

    .award-archive-banner-watch .award-archive-brand-copy .chines {
        font-size: 18px;
    }

    .award-archive-banner-watch .award-archive-brand-copy .fab-titlethin {
        font-size: 9px;
        letter-spacing: 0.6px;
        margin-top: 3px;
    }

    .fab-cn {
        font-size: 15px;
    }

    .fab-titlethin {
        font-size: 9px;
    }
    .logo_area {
        width: 45px;
    }

    .header_right {
        width: calc(100% - 55px);
    }

    .header_right {
        margin-top: 0;
    }

    .header_bottom.mobile-header {
        width: calc(100% + 75px);
    }

    .header_bottom.mobile-header .navbar-nav {
        margin: 0px 0px 7.5px;
    }

    .header_bottom.mobile-header::before {
        top: 10px;
    }

    .portfolio-section.masonry-style .portfolio-box.fullwidth .project-post {
        width: 100%;
    }
    .header-bottom .wel_nav.no_log {
        padding: 5px 10px;
    }
    .profile-completion-flash .profile-completion-inner {
        gap: 10px;
        padding: 5px 10px;
    }
}

@media screen and (max-width: 414px) {
    .film-poster img {
        margin-right: 35px;
    }
    .critics-rank-list .filmcast-inner img {
        aspect-ratio: 1;
        min-height: 110px;
        max-width: 110px;
        max-height: 110px;
        object-fit: cover;
        width: 100%;
        min-width: 110px;
        height: 100%;
    }
    .header_right {
        width: calc(100% - 50px);
    }
    .logo_area {
        width: 40px;
    }
    .logo_area img {
        max-width: 100%;
        height: 40px;
    }
    .header_top::before {
        top: 3px;
    }
    .site_title h1 span,
    .main-block-section .block-box .post_head h1 span.chines,
    .main-block-section .block-box .post_head h2 span.chines,
    .category-widget.widget .post_head .chines {
        font-size: 26px;
    }
    .site_title .eng_wrd,
    .site_title .eng_wrd span {
        font-size: 10px;
    }
    .header-bottom {
        padding-top: 10px;
    }

    .site_title .eng_wrd,
    .site_title .eng_wrd strong {
        font-size: 10px;
    }

    .sidebar .widget .post_head .imga {
        width: 130px;
    }

    .sidebar .widget .post_head .imga img {
        max-width: 100%;
    }

    .user_avtar img {
        width: 100px;
        height: 100px;
    }

    .welcom_area p {
        padding: 5px 0px 0px 15px;
    }

    .welcom_area span.chines {
        font-size: 12px;
    }

    .wel_nav:not(.no_log) nav .navbar-nav li a {
        padding: 4px 05px !important;
    }

    .login_avt {
        margin-left: -10px;
    }

    .film-review-links {
        margin-top: 15px;
        margin-bottom: 40px;
    }

    .frl-btn {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .blog-section.standard .blog-box .blog-post img.img-author {
        width: 55px;
        height: 55px;
    }

    .cw-avatar {
        width: 80px;
        height: 80px;
    }

    .cw-info {
        padding-left: 12px;
    }

    .cw-name {
        font-size: 20px;
        max-width: 160px;
    }

    .cw-meta,
    .cw-meta.identity-detail-icons {
        width: auto;
        max-width: 160px;
    }

    /* Films page only: shrink the portrait a bit more so it, the title,
       and the always-visible search pill all fit this width without
       overlapping each other. */
    #films-archive-banner .fab-portrait img {
        height: 90px;
    }
    #films-archive-banner .fab-title-block {
        left: 118px;
    }
    #films-archive-banner .fab-search-pill,
    #filmmakers-archive-banner .fab-search-pill,
    #critics-archive-banner .fab-search-pill,
    #store-archive-banner .fab-search-pill {
        padding: 8px 12px;
        gap: 6px;
    }
    #films-archive-banner .fab-pill-en,
    #filmmakers-archive-banner .fab-pill-en,
    #critics-archive-banner .fab-pill-en,
    #store-archive-banner .fab-pill-en {
        font-size: 9px;
    }

    /* Critics page: "CRITICS SEARCH" is the widest of the pill labels, so the
       portrait shrinks a step earlier here to leave the title its full line. */
    #critics-archive-banner .fab-portrait img {
        height: 78px;
    }
    #critics-archive-banner .fab-title-block {
        left: 106px;
    }

    /* Store page: same step as the critics banner (per task scope). */
    #store-archive-banner .fab-portrait img {
        height: 78px;
    }
    #store-archive-banner .fab-title-block {
        left: 106px;
    }

    /* Awards Watch banner: artwork and title step down together so the title
       stays clear of both the artwork and the search pill. */
    .award-archive-banner-watch .award-archive-brand-art {
        height: 165px;
        width: 118px;
    }

    .award-archive-banner-watch .award-archive-brand-copy .chines {
        font-size: 18px;
    }
}

@media screen and (max-width: 384px) {
    .subscribe-mobile-trigger {
        font-size: 11px;
        padding: 8px 8px;
        background: #fce2aa;
    }
    span.chines.n-s-tc-imp.NotoSerifTC-900.d-block {
        display: flex;
        /* margin: 0 0 5px 0; */
        font-size: 12px;
        /* line-height: 10px; */
    }
    header .navbar-nav > li > a {
        padding: 4px 10px !important;
    }
    .header-bottom .login_person img {
        width: 115px;
    }

    .header_bottom.mobile-header::before {
        top: 0px;
    }

    .header_bottom.mobile-header .navbar-nav {
        padding-top: 10px;
    }

    .register-form .control-label .eng_wrd {
        font-size: 9px;
    }

    .news-title.img .chines {
        font-size: 18px;
    }

    .news-title.img .eng_wrd {
        font-size: 9px;
    }

    .register-form .control-label {
        padding-right: 0;
    }

    h2.username {
        margin-top: 0;
        font-size: 24px;
        line-height: 26px;
    }

    h4.critics-type {
        font-size: 12px;
        margin-bottom: 2px;
    }

    /* Films page only: on the narrowest phones, shrink the portrait a bit
       further still so the search pill keeps clear of the title text. */
    #films-archive-banner .fab-portrait img {
        height: 74px;
    }
    #films-archive-banner .fab-title-block {
        left: 96px;
    }

    /* Filmmakers page: narrowest phones - portrait and title offset shrink
       together so the search pill keeps clear of the title text. */
    #filmmakers-archive-banner .fab-portrait img {
        height: 84px;
    }
    #filmmakers-archive-banner .fab-title-block {
        left: 80px;
    }

    /* Critics page: same step down for its wider portrait/label pair. */
    #critics-archive-banner .fab-portrait img {
        height: 72px;
    }
    #critics-archive-banner .fab-title-block {
        left: 96px;
    }

    /* Store page: same step as the critics banner (per task scope). */
    #store-archive-banner .fab-portrait img {
        height: 72px;
    }
    #store-archive-banner .fab-title-block {
        left: 96px;
    }

    .join-date {
        font-size: 10px;
        line-height: 10px;
    }

    .user_avtar img {
        width: 80px;
        height: 80px;
    }

    .wel_nav:not(.no_log) .welcom_area p {
        padding: 5px 0px 0px 0px;
    }

    .upi-rlar {
        padding: 0 10px;
    }

    .user-profile-info .upi-rlar {
        padding: 0 9px;
    }

    .user-profile-info .critic-profile-tier-badge .critic-tier-badge-img {
        height: 50px;
    }

    .login_avt {
        margin-left: -10px;
    }

    .welcom_area span.user_name {
        font-size: 12px;
    }

    .wel_nav nav .navbar-nav li a span.chines {
        font-size: 12px;
    }

    .category-widget.widget .post_head .chines.large {
        font-size: 30px;
    }

    .filmreview-btn-wrap .view_full-btn a .chines {
        font-size: 14px;
    }
}

@media screen and (max-width: 360px) {
    .welcom_area span.user_name,
    .wel-text {
        display: none;
    }

    .widget .post_head h1,
    .widget .post_head h2 {
        font-size: 12px;
    }
}

@media screen and (max-width: 320px) {
    /* Awards Watch banner: smallest step - the artwork and title shrink once
       more so the title still ends before the search pill starts. */
    .award-archive-banner-watch .award-archive-brand-art {
        height: 100px;
        width: 66px;
    }

    .award-archive-banner-watch .award-archive-brand-copy .chines {
        font-size: 15px;
    }

    .award-archive-banner-watch .award-archive-brand-copy .fab-titlethin {
        font-size: 8px;
        letter-spacing: 0.4px;
    }

    .welcom_area span.chines {
        font-size: 10px;
    }

    .wel_nav nav .navbar-nav li a span.chines {
        font-size: 10px;
    }

    .site_title .eng_wrd,
    .site_title .eng_wrd strong {
        font-size: 10px;
    }

    .site_title h1 span {
        font-size: 22px;
    }

    .header-bottom .login_person img {
        width: 100px;
    }

    .header-bottom .wel_nav.no_log {
        padding: 0px 5px;
    }

    header.header {
        padding: 25px 0px 20px;
    }

    .header-bottom .login_person {
        right: 45px;
        bottom: -22px;
    }

    .post_head img {
        width: 130px;
    }

    .main-block-section .block-box .post_head h1,
    .main-block-section .block-box .post_head h2 {
        margin: 30px 0 0 10px;
    }

    .news-title.img .chines {
        font-size: 20px;
    }

    .register-form .control-label .chines {
        font-size: 14px;
    }

    .post-ar-btn .chines {
        font-size: 16px;
    }

    .user_avtar {
        margin-right: 10px;
    }

    .user_info_area_top {
        padding-top: 5px;
    }

    .category-widget.widget .post_head .chines.large {
        font-size: 24px;
    }

    .widget .post_head h1,
    .widget .post_head h2 {
        font-size: 10px;
    }
}

/* ============================================================
   Global hover effect for all links & buttons (theme gold).
   Placed last in the file. Links (and their inner Chinese/English
   text spans) turn gold on hover; buttons dim slightly so coloured
   buttons stay readable. The link rule uses !important scoped to
   :hover/:focus ONLY (never normal rendering) so it can override the
   many per-component span colours; high-specificity intentional
   hovers (e.g. the main nav, handled below) still win.
   ============================================================ */
a,
button,
.btn,
input[type="submit"],
input[type="button"] {
    transition:
        color 0.2s ease-in-out,
        background-color 0.2s ease-in-out,
        border-color 0.2s ease-in-out,
        opacity 0.2s ease-in-out;
    -webkit-transition:
        color 0.2s ease-in-out,
        background-color 0.2s ease-in-out,
        border-color 0.2s ease-in-out,
        opacity 0.2s ease-in-out;
    -moz-transition:
        color 0.2s ease-in-out,
        background-color 0.2s ease-in-out,
        border-color 0.2s ease-in-out,
        opacity 0.2s ease-in-out;
    -o-transition:
        color 0.2s ease-in-out,
        background-color 0.2s ease-in-out,
        border-color 0.2s ease-in-out,
        opacity 0.2s ease-in-out;
}
a:hover,
a:focus,
a:hover .chines,
a:hover .eng_wrd,
a:focus .chines,
a:focus .eng_wrd {
    color: #877756 !important;
}
/* The clickable text (film names, critic names, VIEW MORE, etc.) is
   wrapped in inner <span class="chines"> (Chinese) and
   <span class="eng_wrd"> (English) elements that carry their own
   colour, so the link's own :hover colour never reaches them. The
   rule above recolours both. !important is scoped to :hover/:focus
   only, so normal (non-hover) rendering is never affected. */

/* Preserve the main navigation menu's own (black) hover so its Chinese
   label does not turn gold while the English label stays black. */
.header_bottom .navbar-nav li a:hover .chines,
.header_bottom .navbar-nav li a:focus .chines {
    color: #3e3c3a !important;
}
button:hover,
button:focus,
.btn:hover,
.btn:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus {
    opacity: 0.85;
}
/* Gallery header buttons (PHOTOS COLLECTED / BACK) — turn the
   circular chevron gold on hover to match the gold link text. */
.view_full-btn a:hover:after,
.view_full-btn a:focus:after {
    background: #877756;
}

/* ============================================================
   Hover refinements for non-link clickables & icon links.
   These follow the global rule above and fix cases the generic
   a/button hover cannot reach (text outside the <a>, icon-only
   links, <label>/<button> form controls).
   ============================================================ */

/* (1) Cast cards: highlight the whole name AND the character name
   when hovering anywhere on the card (the character <p> sits outside
   the <a>, so the generic link hover never reached it). */
.filmcast-inner:hover .cast-title a,
.filmcast-inner:hover .cast-title p {
    color: #877756 !important;
}

/* Film profile mobile hero: the award/rating strip comes first, followed by
   the poster overlapping its lower edge and the title beneath it. This is
   deliberately scoped to the film profile markup so other profile banners
   keep their existing phone layouts. */
@media screen and (max-width: 767px) {
    .filmprofile-rating-area {
        min-height: 135px;
    }

    .filmprofile-rating-area .filmprofile-rating-col {
        min-height: 115px;
    }

    .filmprofile-rating-area .filmprofile-info {
        align-items: stretch;
        padding: 0;
        width: 100%;
    }

    /* Let the four rating cells use the entire mobile banner, then give each
       cell the same share of that space so its labels, values and action are
       centred independently. */
    .filmprofile-rating-area .container {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .filmprofile-rating-area .filmprofile-banner-row {
        margin-left: 0;
        margin-right: 0;
    }

    .filmprofile-rating-area .filmprofile-rating-col {
        padding-left: 0;
        padding-right: 0;
    }

    .filmprofile-rating-area .filmprofile-info .upi-rlar {
        flex: 1 1 25%;
        min-width: 0;
        padding-left: 4px;
        padding-right: 4px;
    }

    .filmprofile-mobile-hero {
        padding: 0 0 24px;
    }

    .filmprofile-mobile-hero .filmprofile-img {
        display: block;
        margin: 0 auto;
        max-width: 240px;
        min-width: 150px;
        width: 40%;
    }

    .filmprofile-mobile-hero .filmprofile-img img {
        border-width: 7px;
        margin: -30px 0 0;
        max-width: none;
        width: 100%;
    }

    .filmprofile-mobile-hero .film-tag {
        margin-top: 20px;
    }

    .filmprofile-mobile-hero .film-tag h2 {
        line-height: 1.15;
        margin: 0 0 8px;
    }

    .filmprofile-mobile-hero .film-tag h2 a,
    .filmprofile-mobile-hero .film-tag h2 a .n-s-tc-imp {
        color: #333333;
        font-size: clamp(26px, 5vw, 36px);
    }

    .filmprofile-mobile-hero .film-tag h4 {
        font-size: 18px;
        letter-spacing: 0.4px;
        margin: 0 0 6px;
    }

    .filmprofile-mobile-hero .film-tag .join-date {
        font-size: 12px;
        line-height: 20px;
    }

    .filmprofile-intro {
        padding-top: 0;
    }

    .filmprofile-crew-col .film-intro-grid {
        margin-top: 0;
    }
}

/* Filmmaker profile phone hero: mirrors the compact profile composition used
   in the supplied design without changing the tablet or desktop banner. */
@media screen and (max-width: 767px) {
    .filmmaker-profile-rating-area {
        min-height: 135px;
    }

    .filmmaker-profile-rating-area .container {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .filmmaker-profile-rating-area .container > .row {
        margin-left: 0;
        margin-right: 0;
    }

    .filmmaker-profile-rating-area .filmmaker-profile-stats-col {
        min-height: 115px;
        padding-left: 0;
        padding-right: 0;
    }

    .filmmaker-profile-rating-area
        .filmmaker-profile-stats-col
        .filemaker-profile-info {
        align-items: stretch;
        padding: 0;
        width: 100%;
    }

    .filmmaker-profile-rating-area
        .filmmaker-profile-stats-col
        .filemaker-profile-info
        .upi-rlar {
        flex: 1 1 33.333%;
        min-width: 0;
        padding-left: 4px;
        padding-right: 4px;
    }

    .filmmaker-profile-mobile-hero {
        padding: 0 0 28px;
    }

    .filmmaker-profile-mobile-hero .user_info_area_top {
        display: block;
        padding: 0;
        text-align: center;
    }

    .filmmaker-profile-mobile-hero .user_info {
        display: block;
    }

    .filmmaker-profile-mobile-hero .user_avtar {
        margin: 0 auto;
    }

    .filmmaker-profile-mobile-hero .user_avtar img {
        border-width: 6px;
        height: min(250px, 40vw);
        margin-top: -38px;
        width: min(250px, 40vw);
    }

    .filmmaker-profile-mobile-hero h2.username {
        font-size: clamp(30px, 7vw, 40px);
        line-height: 1.15;
        margin: 20px 0 10px;
        padding: 0;
        text-align: center;
    }

    .filmmaker-profile-mobile-hero .identity-detail-icons {
        justify-content: center;
        padding: 0;
        width: 100%;
    }
}

/* The filmmaker profile gallery stacks its photos below the desktop grid
   breakpoint. Keep a clear separator between each full-width photo. */
@media screen and (max-width: 1023px) {
    .fmk-gallery-wrap > .col-md-20:not(:last-child) {
        margin-bottom: 10px;
    }
}

/* Filmmaker gallery phone banner: mirrors the filmmaker profile's mobile
   hero composition (grey stats band first, centred bold name below) instead
   of the default film-gallery-head/.film-tag order - name above the band,
   actions right-aligned - shared with the plain film gallery page. */
@media screen and (max-width: 767px) {
    .filmmaker-gallery-banner {
        display: flex;
        flex-direction: column;
    }

    .filmmaker-gallery-banner .film-gallery-head {
        order: 1;
    }

    .filmmaker-gallery-banner .filmmaker-gallery-mobile-hero {
        order: 2;
        padding: 0 0 28px;
    }

    .filmmaker-gallery-banner
        .filmmaker-gallery-mobile-hero
        .user_info_area_top {
        display: block;
        padding: 0;
        text-align: center;
    }

    .filmmaker-gallery-banner .filmmaker-gallery-mobile-hero .user_info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .filmmaker-gallery-banner .filmmaker-gallery-mobile-hero .user_avtar {
        margin: 0 auto;
    }

    .filmmaker-gallery-banner .filmmaker-gallery-mobile-hero .user_avtar img {
        border-width: 6px;
        height: min(250px, 40vw);
        margin-top: -38px;
        width: min(250px, 40vw);
        position: relative;
        z-index: 1;
    }

    .filmmaker-gallery-banner
        .filmmaker-gallery-mobile-hero
        .identity-detail-icons {
        justify-content: center;
        padding: 0;
        width: 100%;
    }

    .filmmaker-gallery-banner .film-gallery-head .row {
        margin-left: 0;
        margin-right: 0;
    }

    .filmmaker-gallery-banner .film-gallery-head .col-xs-8.text-right {
        align-items: center;
        display: flex;
        float: none;
        justify-content: center;
        min-height: 115px;
        text-align: center;
        width: 100%;
    }

    .filmmaker-gallery-banner .film-gallery-head .film-review-links.frl-btn {
        justify-content: center;
    }

    .filmmaker-gallery-banner .film-gallery-head .filmreview-btn-wrap {
        padding: 0 15px;
    }

    .filmmaker-gallery-banner
        .film-gallery-head
        .filmreview-btn-wrap
        + .filmreview-btn-wrap {
        border-left: 1px solid #5b5957;
    }

    .filmmaker-gallery-banner
        .film-gallery-head
        .filmreview-btn-wrap
        .view_full-btn
        a
        .chines {
        font-size: 18px;
    }

    .filmmaker-gallery-banner
        .film-gallery-head
        .filmreview-btn-wrap
        .view_full-btn
        a
        .eng_wrd {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .filmmaker-gallery-mobile-hero h2.username {
        font-size: clamp(30px, 7vw, 40px);
        line-height: 1.15;
        margin: 20px 0 10px;
        padding: 0;
        text-align: center;
    }

    .filmmaker-gallery-mobile-hero h2.username a,
    .filmmaker-gallery-mobile-hero h2.username a:hover,
    .filmmaker-gallery-mobile-hero h2.username a:focus {
        color: #333;
        text-decoration: none;
    }
}

/* Film gallery banner: mirrors the filmmaker gallery banner's own phone
   composition (grey actions band first, centred poster/title below) instead
   of the default film-gallery-head/.film-wrap order - poster/title above the
   band - so both gallery banners read the same way on a phone. */
@media screen and (max-width: 767px) {
    #film-gallery-banner {
        display: flex;
        flex-direction: column;
    }

    #film-gallery-banner .film-gallery-head {
        order: 1;
    }

    #film-gallery-banner .film-gallery-mobile-hero {
        order: 2;
        padding: 0 0 28px;
    }

    #film-gallery-banner .film-gallery-head .film-gallery-actions {
        text-align: center;
    }

    #film-gallery-banner .film-gallery-head .film-review-links.frl-btn {
        justify-content: center;
        padding: 0;
    }

    #film-gallery-banner .film-gallery-mobile-hero .row > div {
        float: none;
        width: 100%;
    }

    #film-gallery-banner .film-gallery-mobile-hero .film-wrap {
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    #film-gallery-banner .film-gallery-mobile-hero .film-wrap .user_info {
        display: block;
    }

    #film-gallery-banner .film-gallery-mobile-hero .film-poster {
        margin: -23px auto 0;
        max-width: 240px;
        min-width: 150px;
        width: 40%;
        position: relative;
        z-index: 1;
    }

    #film-gallery-banner .film-gallery-mobile-hero .film-poster img {
        border-width: 6px;
        height: auto;
        margin: 0;
        width: 100%;
    }

    #film-gallery-banner .film-gallery-mobile-hero .userfilm-review h2 {
        margin: 24px 0 8px;
        text-align: center;
    }

    #film-gallery-banner .film-gallery-mobile-hero .userfilm-review h2 span {
        display: block;
        font-size: clamp(28px, 6vw, 36px);
        line-height: 1.2;
    }

    #film-gallery-banner
        .film-gallery-mobile-hero
        .userfilm-review
        .critics-type {
        margin: 0 0 6px;
    }

    #film-gallery-banner .film-gallery-mobile-hero .userfilm-review .film-cl {
        font-size: 14px;
    }
}

/* Critic profile phone hero: keeps the statistics and review action in the
   banner, with the year selector and critic identity displayed underneath. */
@media screen and (max-width: 767px) {
    /* Match the banner content edges to the mobile header's 92% inner width
       while allowing the grey banner itself to continue full-bleed. */
    #critic-profile-banner .user_info_area .container {
        padding-left: 0;
        padding-right: 0;
        width: 92%;
    }

    #critic-profile-banner .user_info_area .container > .row {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    #critic-profile-banner .user_info_area .col-sm-4 {
        flex: 0 0 66.667%;
        max-width: 66.667%;
        padding-left: 0;
        padding-right: 0;
        width: 66.667%;
    }

    #critic-profile-banner .user_info_area .col-sm-3.d-view {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        padding-right: 0;
        width: 33.333%;
    }

    #critic-profile-banner .user-profile-info {
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

    #critic-profile-banner .user-profile-info .upi-rlar {
        border-left: 0 !important;
        flex: 0 0 33.333%;
        height: 82px;
        min-height: 82px;
        padding-left: 2px;
        padding-right: 2px;
    }

    #critic-profile-banner
        .user-profile-info
        .critic-profile-tier-badge
        .critic-tier-badge-img {
        height: min(70px, 16vw);
    }

    #critic-profile-banner
        .user-profile-info
        [data-critic-tier-badge][hidden]
        ~ .upi-rlar {
        flex-basis: 50%;
    }

    #critic-profile-banner .user-profile-info .upi-rlar.review,
    #critic-profile-banner .user-profile-info .upi-rlar.u-lang {
        border-right: 1px solid #5b5957;
    }

    #critic-profile-banner .user_info_area .post-ar-btn img {
        height: min(52px, 12vw);
        width: auto;
    }

    #critic-profile-banner .user_info_area {
        min-height: 145px;
    }

    #critic-profile-banner .user_info_area .container > .row {
        min-height: 135px;
    }

    #critic-profile-banner .critic-profile-mobile-hero {
        padding: 0 0 28px;
    }

    #critic-profile-banner .critic-profile-mobile-hero .user_info_area_top {
        display: block;
        padding: 0;
        text-align: center;
    }

    #critic-profile-banner .critic-profile-mobile-hero .user_info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #critic-profile-banner .critic-profile-mobile-hero .user_avtar {
        margin: 0 auto;
    }

    #critic-profile-banner .critic-profile-mobile-hero .user_avtar img {
        border-width: 6px;
        height: min(250px, 40vw);
        width: min(250px, 40vw);
    }

    #critic-profile-banner .critic-profile-mobile-hero h2.username.cw-name {
        font-size: clamp(32px, 7vw, 42px);
        line-height: 1.15;
        margin: 24px 0 8px;
        max-width: none;
        padding: 0;
        text-align: center;
    }

    #critic-profile-banner .critic-profile-mobile-hero .identity-detail-icons {
        justify-content: center;
        padding: 0;
        width: 100%;
    }
}

/* Critic review listing banner. It uses the gallery banner's one-row desktop
   alignment and the critic-profile banner's stacked phone composition without
   changing the shared review-banner styles used by film and filmmaker pages. */
@media screen and (min-width: 768px) {
    #critic-reviews-banner .user_info_area,
    #critic-reviews-banner .user_info_area .container > .row {
        height: 118px;
    }

    #critic-reviews-banner .user_info_area .container > .row {
        align-items: center;
        display: flex;
    }

    #critic-reviews-banner .user_info_area .col-sm-5.d-view {
        flex: 1 1 auto;
        min-width: 0;
    }

    #critic-reviews-banner .critic-reviews-actions {
        flex: 0 0 285px;
        padding-left: 0;
        padding-right: 0;
    }

    #critic-reviews-banner .critic-reviews-actions .film-review-links {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin: 0;
    }

    #critic-reviews-banner .critic-reviews-actions .filmreview-btn-wrap {
        padding: 0;
    }

    #critic-reviews-banner .critic-reviews-actions .btn-review-posted {
        min-width: 250px;
    }

    #critic-reviews-banner .critic-reviews-actions .btn-back {
        width: 85px;
    }

    #critic-reviews-banner .critic-reviews-post-action {
        flex: 0 0 150px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #critic-reviews-banner .critic-reviews-actions {
        flex-basis: 260px;
    }

    #critic-reviews-banner .critic-reviews-actions .btn-review-posted {
        min-width: 165px;
    }

    #critic-reviews-banner .user_info_area h2.username.reviewsProfileName {
        max-width: 155px;
        width: auto;
    }

    #critic-reviews-banner .critic-reviews-post-action {
        flex-basis: 125px;
    }
}

@media screen and (max-width: 767px) {
    #critic-reviews-banner .user_info_area {
        min-height: 145px;
    }

    #critic-reviews-banner .user_info_area .container {
        padding-left: 0;
        padding-right: 0;
        width: 92%;
    }

    #critic-reviews-banner .user_info_area .container > .row {
        align-items: center;
        display: flex;
        margin-left: 0;
        margin-right: 0;
        min-height: 135px;
        width: 100%;
    }

    #critic-reviews-banner .critic-reviews-actions {
        flex: 1 1 auto;
        order: 1;
        padding-left: 0;
        padding-right: 0;
        width: auto;
    }

    #critic-reviews-banner .critic-reviews-actions .film-review-links {
        align-items: center;
        display: flex;
        gap: 4px;
        justify-content: flex-start;
        margin: 0;
    }

    #critic-reviews-banner .critic-reviews-actions .filmreview-btn-wrap {
        padding: 0;
    }

    #critic-reviews-banner .critic-reviews-actions .btn-review-posted {
        min-width: 165px;
    }

    #critic-reviews-banner .critic-reviews-actions .btn-back {
        width: 80px;
    }

    #critic-reviews-banner .critic-reviews-actions .view_full-btn a .chines {
        font-size: 13px;
    }

    #critic-reviews-banner .critic-reviews-post-action {
        display: block;
        flex: 0 0 25%;
        max-width: 25%;
        order: 2;
        padding-left: 0;
        padding-right: 0;
        width: 25%;
    }

    #critic-reviews-banner .critic-reviews-post-action .post-ar-btn img {
        height: min(52px, 12vw);
        width: auto;
    }

    #critic-reviews-banner .critic-reviews-post-action .post-ar-btn .chines {
        font-size: 15px;
    }

    #critic-reviews-banner .critic-reviews-post-action .post-ar-btn .eng_wrd {
        font-size: 8px;
    }

    #critic-reviews-banner .critic-reviews-mobile-hero {
        padding: 0 0 28px;
    }

    #critic-reviews-banner .critic-reviews-mobile-hero .user_info_area_top {
        display: block;
        padding: 0;
        text-align: center;
    }

    #critic-reviews-banner .critic-reviews-mobile-hero .user_info {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #critic-reviews-banner .critic-reviews-mobile-hero .user_avtar {
        margin: -30px auto 0;
    }

    #critic-reviews-banner .critic-reviews-mobile-hero .user_avtar img {
        border-width: 6px;
        height: min(250px, 40vw);
        width: min(250px, 40vw);
    }

    #critic-reviews-banner .critic-reviews-mobile-hero h2.username.cw-name {
        font-size: clamp(32px, 7vw, 42px);
        line-height: 1.15;
        margin: 24px 0 8px;
        max-width: none;
        padding: 0;
        text-align: center;
    }

    #critic-reviews-banner .critic-reviews-mobile-hero .identity-detail-icons {
        justify-content: center;
        padding: 0;
        width: 100%;
    }

    #critic-reviews-banner .critic-reviews-mobile-identity .critics-type {
        margin: 12px 0 2px;
    }

    #critic-reviews-banner .critic-reviews-mobile-identity .film-review {
        margin: 0;
    }
}

/* Film reviews banner: ports the critic-reviews banner's stacked phone
   composition (actions band first, centred poster/title hero below) onto the
   film-review-head columns, which otherwise have no phone composition of
   their own and leave the poster/title row competing with Post a review. */
@media screen and (max-width: 767px) {
    #film-reviews-banner .film-reviews-mobile-actions {
        background: #d6d6d6;
        min-height: 135px;
    }

    #film-reviews-banner .film-reviews-mobile-actions .container {
        padding-left: 0;
        padding-right: 0;
        width: 92%;
    }

    #film-reviews-banner .film-reviews-mobile-actions .container > .row {
        align-items: center;
        display: flex;
        margin-left: 0;
        margin-right: 0;
        min-height: 115px;
        width: 100%;
    }

    #film-reviews-banner .film-reviews-actions {
        flex: 1 1 auto;
        padding-left: 0;
        padding-right: 0;
        width: auto;
    }

    #film-reviews-banner .film-reviews-actions .film-review-links {
        align-items: center;
        display: flex;
        gap: 4px;
        justify-content: flex-start;
        margin: 0;
    }

    #film-reviews-banner .film-reviews-actions .filmreview-btn-wrap {
        padding: 0;
    }

    #film-reviews-banner .film-reviews-actions .btn-review-posted {
        min-width: 165px;
    }

    #film-reviews-banner .film-reviews-actions .btn-back {
        width: 80px;
    }

    #film-reviews-banner .film-reviews-actions .view_full-btn a .chines {
        font-size: 13px;
    }

    #film-reviews-banner .film-reviews-post-action {
        display: block;
        flex: 0 0 25%;
        max-width: 25%;
        padding-left: 0;
        padding-right: 0;
        width: 25%;
    }

    #film-reviews-banner .film-reviews-post-action .post-ar-btn img {
        height: min(52px, 12vw);
        width: auto;
    }

    #film-reviews-banner .film-reviews-post-action .post-ar-btn .chines {
        font-size: 15px;
    }

    #film-reviews-banner .film-reviews-post-action .post-ar-btn .eng_wrd {
        font-size: 8px;
    }

    #film-reviews-banner .film-reviews-mobile-hero {
        padding: 0 0 28px;
        margin: -25px 0 20px 0;
    }

    #film-reviews-banner .film-reviews-mobile-hero .user_info_area_top {
        display: block;
        padding: 0;
        text-align: center;
    }

    #film-reviews-banner .film-reviews-mobile-hero .user_info {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #film-reviews-banner .film-reviews-mobile-hero .film-poster {
        margin: -25px auto 0;
        max-width: 240px;
        min-width: 150px;
        width: 40%;
        position: relative;
    }

    #film-reviews-banner .film-reviews-mobile-hero .film-poster img {
        border-width: 6px;
        height: auto;
        margin: 0;
        width: 100%;
    }

    #film-reviews-banner .film-reviews-mobile-hero .userfilm-review h2 {
        margin: 24px 0 8px;
        text-align: center;
    }

    #film-reviews-banner .film-reviews-mobile-hero .review-movietitle {
        display: block;
        font-size: clamp(28px, 6vw, 36px);
        line-height: 1.2;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        width: auto;
    }

    #film-reviews-banner
        .film-reviews-mobile-hero
        .userfilm-review
        .critics-type {
        margin: 0 0 6px;
    }

    #film-reviews-banner .film-reviews-mobile-hero .userfilm-review .film-cl {
        font-size: 14px;
    }
}

/* Filmmaker reviews banner: ports the critic-reviews banner's one-row desktop
   alignment (the shared .user_info_area column layout otherwise has no
   vertical alignment between the identity, actions and post-a-review
   columns) and its stacked phone composition, so both reviews pages read
   consistently. */
@media screen and (min-width: 768px) {
    #filmmaker-reviews-banner .user_info_area,
    #filmmaker-reviews-banner .user_info_area .container > .row {
        height: 118px;
    }

    #filmmaker-reviews-banner .user_info_area .container > .row {
        align-items: center;
        display: flex;
    }

    #filmmaker-reviews-banner .user_info_area .col-sm-5.d-view {
        flex: 1 1 auto;
        min-width: 0;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-actions {
        flex: 0 0 285px;
        padding-left: 0;
        padding-right: 0;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-actions .film-review-links {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin: 0;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-actions .filmreview-btn-wrap {
        padding: 0;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-actions .btn-review-posted {
        min-width: 250px;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-actions .btn-back {
        width: 85px;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-post-action {
        flex: 0 0 150px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #filmmaker-reviews-banner .filmmaker-reviews-actions {
        flex-basis: 260px;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-actions .btn-review-posted {
        min-width: 165px;
    }

    #filmmaker-reviews-banner .user_info_area h2.username.filmmaker-full-name {
        max-width: 155px;
        width: auto;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-post-action {
        flex-basis: 125px;
    }
}

@media screen and (max-width: 767px) {
    #filmmaker-reviews-banner .user_info_area {
        min-height: 145px;
    }

    #filmmaker-reviews-banner .user_info_area .container {
        padding-left: 0;
        padding-right: 0;
        width: 92%;
    }

    #filmmaker-reviews-banner .user_info_area .container > .row {
        align-items: center;
        display: flex;
        margin-left: 0;
        margin-right: 0;
        min-height: 135px;
        width: 100%;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-actions {
        flex: 1 1 auto;
        order: 1;
        padding-left: 0;
        padding-right: 0;
        width: auto;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-actions .film-review-links {
        align-items: center;
        display: flex;
        gap: 4px;
        justify-content: flex-start;
        margin: 0;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-actions .filmreview-btn-wrap {
        padding: 0;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-actions .btn-review-posted {
        min-width: 165px;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-actions .btn-back {
        width: 80px;
    }

    #filmmaker-reviews-banner
        .filmmaker-reviews-actions
        .view_full-btn
        a
        .chines {
        font-size: 13px;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-post-action {
        display: block;
        flex: 0 0 25%;
        max-width: 25%;
        order: 2;
        padding-left: 0;
        padding-right: 0;
        width: 25%;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-post-action .post-ar-btn img {
        height: min(52px, 12vw);
        width: auto;
    }

    #filmmaker-reviews-banner
        .filmmaker-reviews-post-action
        .post-ar-btn
        .chines {
        font-size: 15px;
    }

    #filmmaker-reviews-banner
        .filmmaker-reviews-post-action
        .post-ar-btn
        .eng_wrd {
        font-size: 8px;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-mobile-hero {
        padding: 0 0 28px;
    }

    #filmmaker-reviews-banner
        .filmmaker-reviews-mobile-hero
        .user_info_area_top {
        display: block;
        padding: 0;
        text-align: center;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-mobile-hero .user_info {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-mobile-hero .user_avtar {
        margin: -30px auto 0;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-mobile-hero .user_avtar img {
        border-width: 6px;
        height: min(250px, 40vw);
        width: min(250px, 40vw);
    }

    #filmmaker-reviews-banner .filmmaker-reviews-mobile-hero h2.username {
        font-size: clamp(32px, 7vw, 42px);
        line-height: 1.15;
        margin: 24px 0 8px;
        padding: 0;
        text-align: center;
    }

    #filmmaker-reviews-banner
        .filmmaker-reviews-mobile-hero
        .identity-detail-icons {
        justify-content: center;
        padding: 0;
        width: 100%;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-mobile-identity .critics-type {
        margin: 12px 0 2px;
    }

    #filmmaker-reviews-banner .filmmaker-reviews-mobile-identity .film-review {
        margin: 0;
    }
}

/* Nomination ballot phone banner: mirror the critic-profile composition while
   leaving the ballot's desktop banner untouched. */
@media screen and (max-width: 767px) {
    #nomination-ballot-banner .user_info_area {
        margin-bottom: 35px;
        min-height: 145px;
    }

    #nomination-ballot-banner .user_info_area .container {
        padding-left: 0;
        padding-right: 0;
        width: 92%;
    }

    #nomination-ballot-banner .user_info_area .container > .row {
        align-items: center;
        display: flex;
        margin-left: 0;
        margin-right: 0;
        min-height: 135px;
        width: 100%;
    }

    #nomination-ballot-banner .user_info_area .col-sm-5.col-xs-12 {
        flex: 0 0 75%;
        max-width: 75%;
        padding-left: 0;
        padding-right: 0;
        width: 75%;
    }

    #nomination-ballot-banner .user_info_area .col-sm-2.d-view {
        display: block;
        flex: 0 0 25%;
        max-width: 25%;
        padding-left: 0;
        padding-right: 0;
        width: 25%;
    }

    #nomination-ballot-banner .user-profile-info {
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        width: 100%;
    }

    #nomination-ballot-banner
        .user-profile-info
        .critic-mobile-reference-badge {
        align-items: center;
        border-right: 1px solid #5b5957;
        display: flex;
        flex: 0 0 33.333%;
        height: 82px;
        justify-content: center;
        min-height: 82px;
    }

    #nomination-ballot-banner .critic-mobile-reference-badge img {
        height: min(78px, 18vw);
        width: auto;
    }

    #nomination-ballot-banner .user-profile-info .upi-rlar {
        border-left: 0 !important;
        flex: 0 0 33.333%;
        height: 82px;
        min-height: 82px;
        padding-left: 2px;
        padding-right: 2px;
    }

    #nomination-ballot-banner .user-profile-info .upi-rlar.review,
    #nomination-ballot-banner .user-profile-info .upi-rlar.u-lang {
        border-right: 1px solid #5b5957;
    }

    #nomination-ballot-banner .user_info_area .post-ar-btn img {
        height: min(52px, 12vw);
        width: auto;
    }

    #nomination-ballot-banner .user_info_area .post-ar-btn .chines {
        font-size: 15px;
    }

    #nomination-ballot-banner .user_info_area .post-ar-btn .eng_wrd {
        font-size: 8px;
    }

    #nomination-ballot-banner .critics-dropdown {
        margin-top: -22px;
        top: 100%;
    }

    #nomination-ballot-banner .critics-dropdown button.btn {
        border: 1px solid #d5d5d5;
        border-radius: 22px;
        padding: 8px 18px;
    }

    #nomination-ballot-banner .nomination-ballot-mobile-hero {
        padding: 0 0 28px;
    }

    #nomination-ballot-banner
        .nomination-ballot-mobile-hero
        .user_info_area_top {
        display: block;
        padding: 0;
        text-align: center;
    }

    #nomination-ballot-banner .nomination-ballot-mobile-hero .user_info {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #nomination-ballot-banner .nomination-ballot-mobile-hero .user_avtar {
        margin: 0 auto;
    }

    #nomination-ballot-banner .nomination-ballot-mobile-hero .user_avtar img {
        border-width: 6px;
        height: min(250px, 40vw);
        width: min(250px, 40vw);
    }

    #nomination-ballot-banner
        .nomination-ballot-mobile-hero
        h2.username.cw-name {
        font-size: clamp(32px, 7vw, 42px);
        line-height: 1.15;
        margin: 24px 0 8px;
        max-width: none;
        padding: 0;
        text-align: center;
    }

    #nomination-ballot-banner
        .nomination-ballot-mobile-hero
        .identity-detail-icons {
        justify-content: center;
        padding: 0;
        width: 100%;
    }
}

/* (2) Social share icons: the global gold link-hover turned the glyph
   gold on top of the gold hover background (invisible). Give them the
   footer social icons' clean white-circle / dark-glyph hover instead. */
.blog-post.single-post .share-box ul.social-share li a {
    border: 1px solid transparent;
}
.blog-post.single-post .share-box ul.social-share li a:hover {
    background: #ffffff !important;
    border-color: #999999;
}
.blog-post.single-post .share-box ul.social-share li a:hover,
.blog-post.single-post .share-box ul.social-share li a:hover i {
    color: #333333 !important;
}
/* Footer social icons: restore their intended dark glyph on hover
   (the global gold link-hover had recoloured the glyph). */
footer ul.social-list li a:hover,
footer ul.social-list li a:hover i {
    color: #333333 !important;
}

/* (3) Profile form buttons (UPLOAD A PROFILE PHOTO / UPDATE YOUR
   PROFILE): gold outline + gold text on hover. They are <label> /
   <button>, not <a>, so they need their own hover. */
.upload-btn-wrapper label,
.btn-reg {
    transition:
        border-color 0.2s ease-in-out,
        color 0.2s ease-in-out;
}
/* Clean gold-outline hover. The two overrides below cancel the global
   button opacity dim and Bootstrap's grey .btn-default hover background,
   which otherwise made the UPDATE YOUR PROFILE button look washed-out. */
.upload-btn-wrapper label:hover,
.upload-btn-wrapper label:focus,
.btn-reg:hover,
.btn-reg:focus,
.btn-reg:active,
.btn-reg:active:focus {
    border-color: #877756;
    background-color: #ffffff;
    opacity: 1;
}
.upload-btn-wrapper label:hover .chines,
.upload-btn-wrapper label:hover .eng_wrd,
.btn-reg:hover .chines,
.btn-reg:hover .eng_wrd,
.btn-reg:focus .chines,
.btn-reg:focus .eng_wrd {
    color: #877756 !important;
}

/* (4) Gender radio labels (男 / MALE, 女 / FEMALE): gold text on hover.
   The text sits in <span> inside a <label>, not an <a>. */
.radio-inline:hover .chines,
.radio-inline:hover .eng_wrd {
    color: #877756 !important;
}

/* Popular Filmmakers sidebar: names render in init cap, not forced
   uppercase. Scoped to this widget's tab panes so other .top-post-list
   sidebar widgets keep their existing uppercase style. */
#pop-week .top-post-content h2,
#pop-month .top-post-content h2,
#pop-year .top-post-content h2 {
    text-transform: capitalize;
}

/* Top Critics sidebar avatars: larger below 992px. !important overrides the
   inline width/height set per <img> in components/home/sidebar/top-critics
   .blade.php. Scoped to this widget's tab panes so the Popular Filmmakers
   sidebar (#pop-week/#pop-month/#pop-year) keeps its existing 50px avatars. */
@media (max-width: 991px) {
    #top-critics-week .top-post-list li img,
    #top-critics-month .top-post-list li img,
    #top-critics-year .top-post-list li img {
        width: 75px !important;
        height: 75px !important;
        max-width: 75px !important;
    }
}

/* Every review card shows a dotted divider under the star-rating row so the
   rating is visually separated from the review text. Centralized here (rather
   than in each layout) so the reviews listing grid, film/critic/filmmaker
   profiles, sidebars, my-reviews and every other review card stay consistent.
   !important is required to override the compact card layouts
   (.blog-post.mess, .reviews-iso-box, .cus_post, .text-box) that reset the
   rating row's border/padding/margin. The Critic's Choices carousel uses
   p.choice-rate and is intentionally excluded. */
p.rate {
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
    border-bottom: 1px dotted #dddddd !important;
}
/* The Critic's Choices carousel rating row (p.choice-rate) and the
   .cr-rev-rate variant remain divider-free for rating-only (type 3) reviews. */
p.choice-rate.review-rating-only,
.cr-rev-rate.review-rating-only {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Filmmakers "Latest Reviews" (filmmakers.blade.php), filmmaker-profile
   "Related Reviews" (filmmaker-profile.blade.php) and film-profile "Reviews"
   (film-profile.blade.php) rows: lay the cards out as an equal-height flex row
   so every card matches the tallest card in its row and their bottom borders
   line up regardless of how much review text each card has. When the cards
   carry the same amount of text they are naturally equal height, leaving a 26px
   gap below the last line of text. */
@media (min-width: 992px) {
    .filmmaker-latest-reviews-row,
    .filmmaker-profile-reviews-row,
    .film-profile-reviews-row {
        display: flex;
        flex-wrap: wrap;
    }
    .filmmaker-latest-reviews-row:before,
    .filmmaker-latest-reviews-row:after,
    .filmmaker-profile-reviews-row:before,
    .filmmaker-profile-reviews-row:after,
    .film-profile-reviews-row:before,
    .film-profile-reviews-row:after {
        display: none;
    }
    .filmmaker-latest-reviews-row > [class*="col-md-"],
    .filmmaker-profile-reviews-row > [class*="col-md-"],
    .film-profile-reviews-row > [class*="col-md-"] {
        display: flex;
        float: none;
    }
    .filmmaker-latest-reviews-row .blog-post,
    .filmmaker-profile-reviews-row .blog-post,
    .film-profile-reviews-row .blog-post {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
    }
    .filmmaker-latest-reviews-row .blog-content,
    .filmmaker-profile-reviews-row .blog-content,
    .film-profile-reviews-row .blog-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }
}
/* Let the excerpt shrink to its actual text (still clamped to 3 lines) instead
   of reserving a fixed 60px block. Without this the gap below a short review's
   last visible line was 60px of dead space + padding, not the intended 26px. */
.filmmaker-latest-reviews-row .blog-content p.single-review-text,
.filmmaker-profile-reviews-row .blog-content p.single-review-text,
.film-profile-reviews-row .blog-content p.single-review-text,
.filmmaker-reviews-masonry .blog-post.mess .content_post p.single-review-text {
    height: auto !important;
    max-height: 60px;
}
.filmmaker-latest-reviews-row .blog-content,
.filmmaker-profile-reviews-row .blog-content,
.film-profile-reviews-row .blog-content {
    padding-bottom: 26px !important;
}
.filmmaker-latest-reviews-row .blog-content > *:last-child,
.filmmaker-profile-reviews-row .blog-content > *:last-child,
.film-profile-reviews-row .blog-content > *:last-child {
    margin-bottom: 0 !important;
}

/* Filmmaker "Related Reviews" masonry (reviews/filmmaker-reviews.blade.php):
   keep exactly 26px between the last line of review text and each card's bottom
   border, whether or not the "Continue Reading" link is present (the excerpt's
   trailing margin is dropped when it is the card's last element). */
.filmmaker-reviews-masonry .blog-post.mess .blog-content {
    padding-bottom: 26px !important;
}
.filmmaker-reviews-masonry .blog-post.mess .content_post > *:last-child {
    margin-bottom: 0 !important;
}

/* Movie year shown after a review's film title (components.reviews.film-title-link)
   should read as metadata belonging to the film, not part of the bold title:
   normal weight and 2px smaller than the surrounding text. Kept late +
   !important so it wins across every review card/title context. */
.film-title-year {
    font-weight: normal !important;
    font-size: calc(1em - 2px) !important;
}
.news-section .news-post .hover-news .inner-hover h2 .film-title-year {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    color: inherit;
    font-family: inherit;
    text-transform: none;
    letter-spacing: inherit;
    opacity: 1;
}
a:focus {
    outline: thin dotted;
    outline: none !important;
    outline-offset: -2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: none !important;
    outline-offset: 0px;
}

/* Song title row in the review form once its Song has been merged by an
   admin (see ReviewAwardSongTitleService::lockedTitles()): the select2
   dropdown is blocked from opening in JS, this just signals that visually. */
.award-song-title-row.is-locked .select2-selection {
    background-color: #f3f3f3 !important;
    cursor: not-allowed !important;
}

.award-song-title-row.is-locked .select2-selection__arrow {
    display: none !important;
}

.award-song-locked-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    color: #b45309;
}

/* Nomination-ballot rank number (sidebar widget + song entries in the full
   preview - see components.critics.nomination-category and
   nomination-preview-section): filled circle in the site's theme gold
   (#877756, used site-wide for hover/accent states) instead of plain "1." text. */
.nomination-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 50%;
    background-color: #877756;
    color: #e9e1c8 !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}

.nomination-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #877756;
    font-family: "Lato-Regular";
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.nomination-position-hidden {
    display: none !important;
}

/* Rank badge keeps its layout space when hidden (unranked items past the
   scored positions) instead of collapsing to zero width, so the content
   column always starts at the same left offset as the numbered 1-5 rows
   above it instead of jumping flush left. */
#catgor .category-list.sub li a .js-nomination-rank.nomination-position-hidden {
    display: inline-flex !important;
    visibility: hidden !important;
}

#catgor .category-list.sub li a .js-nomination-score {
    float: none !important;
    flex-shrink: 0;
    margin-left: auto;
}

#catgor .category-list.sub li a .js-nomination-score span {
    float: none !important;
    font-weight: normal;
}

/* Review detail page styles live in the global stylesheet so the page renders
   correctly when it arrives through PJAX, where head-level Blade CSS sections
   are not swapped. */
.single-review .flexslider .slides,
.single-review .flexslider .slides > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.single-review .flexslider .slides > li:first-child {
    display: block;
}

.single-review .review-main-image {
    width: 560px;
    height: 315px;
    max-width: 100%;
    display: block;
    object-fit: contain;
    background: #f8f8f8;
}

.single-review .review-body {
    margin-top: 30px;
    font-size: 15px;
    line-height: 1.75;
    color: #333333;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (max-width: 767px) {
    .single-review .review-main-image {
        width: 100%;
        height: auto;
    }
}

/* Critic profile review cards and nomination empty state. Kept global for the
   same PJAX reason as the review detail rules above. */
.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-content
    p.critic-review-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: auto;
}

.critic-review-continue {
    display: none;
}

.main-block-section
    .block-box
    .block-part
    .blog-post
    .blog-content
    p.rate.critic-rating-only {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.nomination-empty a {
    font-style: italic;
    opacity: 0.7;
}

@media (min-width: 992px) {
    .critic-profile-review-row {
        display: flex;
        flex-wrap: wrap;
    }

    .critic-profile-review-row > [class*="col-md-"] {
        display: flex;
    }

    .critic-profile-review-row .blog-post {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
    }

    .critic-profile-review-row .blog-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .critic-profile-review-row:before,
    .critic-profile-review-row:after {
        display: none;
    }
}

/* =============================================
   PJAX NAVIGATION PROGRESS BAR
   Thin gold line along the top of the viewport
   while pjax-nav.js fetches the next page.
   ============================================= */
#pjax-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: #c8a96e;
    z-index: 100000;
    pointer-events: none;
}

/* =============================================
   REVIEW FORM FIELD ERRORS
   Shared by components.reviews.review-form-fields wherever it renders:
   the standalone Post a Review page (reviews/create-review.blade.php) and
   the rate-modal instances on film-profile/critic-profile. Previously only
   declared inline on create-review.blade.php, so the same has-error markup
   was invisible inside the modal. Toggled by public/js/review-form.js.
   ============================================= */
.review-title-field {
    display: none;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.review-title-field.is-visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.review-title-field .title-error {
    color: #b42318;
    display: none;
    font-size: 12px;
    margin-top: 8px;
}

.review-title-field.has-error .form-control {
    border-color: #b42318;
}

.review-title-field.has-error .title-error {
    display: block;
}

.review-field-error {
    color: #b42318;
    display: none;
    font-size: 12px;
    margin-top: 8px;
}

.form-group.has-error .review-field-error {
    display: block;
}

/* Nomination ballot: marks a nominated film that was carried over into the
   current nomination year via admin override (its release_date year differs
   from the year this ballot is scoped to). See NominationBallotService::isCarriedOverYear(). */
.nomination-carried-over-marker {
    color: #000 !important;
    font-family: "Lato-Black", "Lato-Bold", "Lato", sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.3em;
    margin-left: 2px;
}

/* film-profile.blade.php's release-year line only: sits flush against the
   year (no left margin) and nudged down slightly to sit level with it. */
.join-date .nomination-carried-over-marker {
    color: inherit !important;
    margin-left: 0;
    position: relative;
    top: 2px;
}

/* Finalized ICFCS award archive, based on the supplied Awards Archive design. */
.award-archive-banner {
    background: #d9d9d9;
    height: 118px;
    overflow: visible;
    position: relative;
    /* margin-top: 15px; */
}

.award-archive-banner-inner {
    height: 100%;
    position: relative;
}

.award-archive-brand {
    align-items: flex-end;
    bottom: 0;
    display: flex;
    height: 100%;
    left: 15px;
    position: absolute;
}

.award-archive-brand-art {
    /* height: 175px; */
    object-fit: contain;
    object-position: bottom;
    /* width: 116px; */
}

.award-archive-brand-copy {
    margin: 0 0 31px 10px;
}
/* WCFCS Winners & Nominees banner desktop title: sits a little further right
   of the portrait than the shared 10px offset, for this banner only. */
@media (min-width: 768px) {
    .award-archive-banner-icfcs
        .award-archive-brand-copy.winners-archive-title-block {
        margin-left: 30px;
    }
}

.award-archive-brand-copy p {
    margin: 0;
}

.award-archive-brand-copy .chines {
    color: #000000 !important;
    font-size: 26px;
    line-height: 1.2;
    /* margin-bottom: -6px; */
}

.award-archive-brand-copy .eng_wrd {
    color: #717171;
    font-family: "Lato-Black", "Lato-Bold", sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-top: 5px;
}

.award-archive-search-mark {
    align-items: center;
    bottom: 0;
    display: flex;
    height: 100%;
    position: absolute;
    right: 15px;
}

.award-archive-search-mark > img {
    bottom: -2px;
    height: 114px;
    object-fit: contain;
    position: absolute;
    right: 6px;
    width: 106px;
}
img.newaward-archive-search-mark-img {
    bottom: 6px;
}
img.forumaward-archive-brand-art {
    bottom: 5px;
    height: 123px;
    width: 89px;
    right: 15px;
}
section.blog-section.standard.forum-section {
    background-color: white;
}
.col-md-3.sidebar-wrap.forum-sidebar-wrap {
    background-color: #f8f8f8;
}
.col-md-9.forum-content-wrap,
.col-md-12.forum-content-wrap {
    padding: 0px 20px;
}
.award-archive-search-pill {
    align-items: center;
    background: #ffffff;
    border-radius: 29px;
    color: #2c2c2c;
    display: flex;
    width: 305px;
    padding: 12px 120px 12px 20px;
}
.winner.award-archive-search-pill {
    width: 265px;
}

.award-archive-search-pill i {
    font-size: 18px;
    color: #999999;
    transition: color 0.22s ease;
    margin-right: 10px;
}

.award-archive-search-pill span,
.award-archive-search-pill strong,
.award-archive-search-pill small {
    display: block;
}

.award-search-trigger {
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    margin: 0;
    padding: 0;
    text-align: left;
}
.award-search-trigger:focus {
    outline: 2px solid #5b5957;
    outline-offset: 2px;
}
.award-overlay-search-types {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-bottom: 28px;
}
.award-overlay-search-types label {
    align-items: center;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-weight: 400;
    gap: 7px;
    margin: 0;
}
.award-overlay-search-types label .chines {
    color: #ddd;
    font-size: 15px;
}
.award-overlay-search-types label .eng_wrd {
    color: #fff;
    font-family: "Lato-Regular";
    font-size: 12px;
    letter-spacing: 1px;
}
.award-overlay-search-types input {
    appearance: none;
    background: transparent;
    border: 1px solid #c8a96e;
    border-radius: 0;
    height: 15px;
    margin: 0;
    width: 15px;
}
.award-overlay-search-types input:checked {
    background: #c8a96e;
}
#awards-search-overlay .archive-search-label {
    align-items: baseline;
    display: flex;
    justify-content: center;
}
#awards-search-overlay .archive-search-label .chines,
#awards-search-overlay .archive-search-label .eng_wrd {
    color: #c8a96e;
    font-family: "Lato-Regular", sans-serif;
    font-size: 13px;
    letter-spacing: 4px;
    line-height: 1.5;
}
.award-search-profile-banner {
    align-items: center;
    background: #ffffff;
    display: grid;
    height: 118px;
    margin-bottom: 35px;
    min-height: 118px;
    padding: 0;
    position: relative;
}
.award-search-profile-image {
    display: block;
    position: relative;
    z-index: 2;
}
.award-search-profile-image img {
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    object-fit: cover;
    width: 100%;
}
.award-search-profile-banner--film {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 118px;
    margin-bottom: 35px;
}
.award-search-profile-banner--film .award-search-profile-image {
    align-self: center;
    margin: 0 15px;
    width: auto;
}
.award-search-profile-banner--film .award-search-profile-image img {
    aspect-ratio: 342 / 488;
    height: 70px;
    width: auto;
}
.award-search-profile-banner--film .award-search-profile-image-placeholder,
.award-history-image-placeholder {
    background: #fff;
    object-fit: contain !important;
    padding: 10px;
}
.award-search-profile-banner--filmmaker {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 15px 0 0;
}
.award-search-filmmaker-profile {
    align-items: center;
    display: flex;
    min-width: 0;
}
.award-search-filmmaker-profile .user_avtar,
.award-search-filmmaker-profile .user_avtar img {
    flex: 0 0 85px;
    height: 85px;
    width: 85px;
}
.award-search-filmmaker-profile .user_avtar img {
    border: 3px solid #fff;
    border-radius: 50%;
    object-fit: cover;
}
.award-search-filmmaker-profile .award-search-filmmaker-identity {
    min-width: 0;
}
.award-search-filmmaker-profile h2.username {
    margin-bottom: 3px;
    max-width: 100%;
}
.award-search-filmmaker-profile h2.username a {
    color: #2b2b2b;
    text-decoration: none;
}
.award-search-filmmaker-profile h2.username a:hover,
.award-search-filmmaker-profile h2.username a:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.award-search-profile-banner--filmmaker
    .award-search-profile-image-placeholder {
    background: #fff;
    object-fit: cover;
    padding: 0;
}
.award-search-profile-identity {
    align-self: center;
    min-width: 0;
    padding: 0 15px;
}
.award-search-film-identity h2 {
    font-size: 24px;
    line-height: 1.15;
    margin-bottom: 3px;
}
.award-search-film-identity h2 a,
.award-search-film-identity h2 a:hover {
    color: #222;
    text-decoration: none;
}
.award-search-film-identity .critics-type {
    margin-bottom: 2px;
}
.award-search-profile-meta {
    margin-top: 3px !important;
}
.award-search-profile-stats {
    align-items: center;
    display: flex;
    height: 118px;
    justify-content: flex-end;
    min-width: 0;
    padding: 0 15px 0 0;
}
.award-search-profile-stats .upi-rlar {
    align-items: center;
    border: 0;
    display: flex;
    flex-direction: column;
    height: 69px;
    justify-content: center;
    padding: 0 20px;
}
.award-search-profile-stats .upi-rlar + .upi-rlar {
    border-left: 1px solid #5b5957;
}
.award-search-result + .award-search-result {
    border-top: 1px solid #e3e3e3;
    margin-top: 45px;
    padding-top: 45px;
}
.award-search-details-control {
    flex: 0 0 125px;
    margin-left: 8px;
}
.award-search-details-toggle {
    background: transparent;
    border: 0;
    color: #666666;
    cursor: pointer;
    display: inline-block;
    font-family: "Lato-Bold";
    font-size: 11px;
    margin: 0;
    padding: 5px 48px 0 10px;
    position: relative;
    text-align: left;
    width: 125px;
}
.award-search-details-toggle::after {
    background: #999999;
    border-radius: 100px;
    color: #ffffff;
    content: "\f054";
    display: block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    height: 38px;
    padding: 13px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition:
        background 0.2s ease,
        transform 0.2s ease;
    width: 38px;
}
.award-search-details-toggle.is-expanded::after {
    transform: translateY(-50%) rotate(270deg);
}
.award-search-details-toggle:hover,
.award-search-details-toggle:focus {
    color: #877756;
    opacity: 1;
}
.award-search-details-toggle:hover::after,
.award-search-details-toggle:focus::after {
    background: #877756;
}
.award-search-details-toggle > span,
.award-search-details-toggle .chines,
.award-search-details-toggle .eng_wrd {
    display: block;
}
.award-search-details-toggle .chines {
    color: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
}
.award-search-details-toggle .eng_wrd {
    color: inherit;
    font-size: 11px;
    letter-spacing: 0;
    line-height: 1.2;
    margin-top: 1px;
}
.award-search-details[hidden],
.award-search-details-toggle [hidden] {
    display: none !important;
}
.award-search-details {
    margin-top: 4px;
}
.award-search-details-status {
    color: #777777;
    margin: 0;
    padding: 22px 0 28px;
    text-align: center;
}

.award-ranking-section + .award-ranking-section {
    margin-top: 42px;
}
.award-ranking-section .cp-top,
.award-ranking-page .cp-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.award-ranking-page .cp-title h1 {
    font-size: 25px;
    line-height: 1.2;
    margin: 0 0 3px;
}
.award-ranking-film-grid > .row,
.award-ranking-filmmaker-grid > .row {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
}
.award-ranking-card {
    display: flex;
    float: none;
    margin-bottom: 28px;
    text-align: center;
}
.award-ranking-card .film-wrap,
.award-ranking-card .filmcast-inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}
.award-ranking-film-card .film-wrap > a {
    align-self: center;
    display: block;
}
.award-ranking-film-card .film-wrap > a img {
    height: 196px;
    object-fit: cover;
    width: 132px;
}
.award-ranking-filmmaker-card .filmcast-inner > a {
    align-self: center;
    display: block;
}
.award-ranking-filmmaker-card .filmcast-inner > a img {
    border-radius: 50%;
    height: 100px;
    margin-bottom: 0;
    object-fit: cover;
    width: 100px;
}
.award-ranking-card .crl-no {
    display: block;
    line-height: 1.1;
    margin-top: 6px;
}
.poster-numbering {
    margin-top: 8px !important;
}
.award-ranking-card .film-title,
.award-ranking-card .actor-title {
    margin-bottom: 4px;
    margin-top: 2px;
    width: 100%;
}
.award-ranking-film-card .film-title a {
    display: block;
    min-width: 0;
}
.award-ranking-film-card .profile-film-card-title-en {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.award-ranking-card .actor-title a:hover,
.award-ranking-card .actor-title a:focus,
.award-ranking-card .film-title a:hover,
.award-ranking-card .film-title a:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.award-ranking-counts {
    align-items: stretch;
    border-top: 1px solid #dedede;
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 5px;
    width: 100%;
}
.award-ranking-count {
    align-items: center;
    display: flex;
    flex: 0 0 50%;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    padding: 0 4px;
}
.award-ranking-count + .award-ranking-count {
    border-left: 1px solid #8e8e8e;
}
.award-ranking-count .chines {
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 2px;
}
.award-ranking-count strong {
    color: #222222;
    font-family: "Lato-Bold", sans-serif;
    font-size: 18px;
    line-height: 1.1;
}
.award-ranking-count small {
    color: #666666;
    font-size: 8px;
    letter-spacing: 0;
    line-height: 1.2;
    overflow-wrap: normal;
    white-space: nowrap;
}
.award-ranking-index {
    border-top: 1px solid #dedede;
    color: #333333;
    margin-top: auto;
    padding-top: 4px;
    text-align: center;
    width: 100%;
}
.award-ranking-index span,
.award-ranking-index strong {
    font-size: 13px;
    line-height: 1.2;
}
.award-ranking-index strong {
    font-family: "Lato-Bold", sans-serif;
}
.award-ranking-film-grid--full .film-inner,
.award-ranking-filmmaker-grid--full .filmcast-col {
    width: 20%;
}
.award-ranking-empty {
    color: #777777;
    padding: 30px 15px;
    text-align: center;
}
.award-ranking-empty p {
    margin: 0;
}
.award-ranking-load-more-wrap {
    margin: 15px 0 10px;
    text-align: center;
}
.award-ranking-load-more-wrap .load-more-btn[disabled] {
    cursor: wait;
    opacity: 0.65;
}

@media (max-width: 767px) {
    .award-search-profile-banner {
        align-items: center;
        height: 118px;
        min-height: 118px;
    }
    .award-archive-brand-copy .chines {
        margin-bottom: 0px;
    }
    .award-search-profile-banner--film {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        margin-bottom: 35px;
        padding: 0 12px;
    }
    .award-search-profile-banner--film .award-search-profile-image {
        display: none;
    }
    .award-search-profile-banner--film .award-search-profile-identity {
        padding: 0 12px;
    }
    .award-search-profile-banner--film .award-search-profile-stats {
        grid-column: 1 / -1;
        height: auto;
        justify-content: center;
        margin: 10px 0 12px;
        padding-right: 0;
    }
    .award-search-profile-banner--filmmaker {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        margin-bottom: 35px;
        padding: 12px 0;
    }
    .award-search-profile-banner--filmmaker .award-search-filmmaker-profile {
        justify-content: flex-start;
    }
    .award-search-profile-banner--filmmaker .user_avtar,
    .award-search-profile-banner--filmmaker .user_avtar img {
        flex-basis: 85px;
        height: 85px;
        width: 85px;
    }
    .award-search-profile-banner--filmmaker h2.username {
        font-size: 22px;
        line-height: 1.1;
    }
    .award-search-profile-banner--filmmaker .award-search-profile-stats {
        grid-column: 1 / -1;
        height: auto;
        justify-content: center;
        margin-top: 10px;
        padding-right: 0;
        width: 100%;
    }
    .award-search-profile-stats .upi-rlar {
        padding: 0 16px;
    }
    .award-ranking-section + .award-ranking-section {
        margin-top: 30px;
    }
    .award-ranking-section .cp-top,
    .award-ranking-page .cp-top {
        align-items: flex-start;
    }
    .award-ranking-page .cp-title h1 {
        font-size: 21px;
    }
    .award-ranking-film-grid--full .film-inner {
        width: 33.333%;
    }
    .award-ranking-film-card .film-wrap > a img {
        height: auto;
        max-width: 132px;
        width: 100%;
    }
    .award-ranking-card {
        margin-bottom: 24px;
        padding-left: 6px;
        padding-right: 6px;
    }
    .award-ranking-count .chines {
        font-size: 11px;
    }
    .award-ranking-count strong {
        font-size: 16px;
    }
    .award-ranking-count small {
        font-size: 7px;
    }
}

.award-archive-search-pill strong {
    font-size: 19px;
    line-height: 1.2;
}

.award-archive-search-pill small {
    color: #777777;
    font-family: "Lato-Black", "Lato-Bold", sans-serif;
    font-size: 8px;
    letter-spacing: 0.6px;
    margin-top: 3px;
}

/* Forum search pill: same .award-archive-search-pill shell as the ICFCS
   Awards Watch banner, but the label doubles as a working search form. */
.forum-banner-search span {
    flex: 1;
}

.forum-banner-search-icon-btn {
    background: none;
    border: 0;
    color: #b7b7b7;
    cursor: pointer;
    font-size: 15px;
    margin-right: 1px;
    padding: 0;
}
small.forum-banner-search-input.chines.n-s-tc-imp.NotoSerifTC-900.eng_wrd {
    /* margin: 0; */
    color: #777777;
    font-family: "Lato-Black", "Lato-Bold", sans-serif;
    font-size: 8px;
    letter-spacing: 0.6px;
    margin-top: 3px;
}

.forum-banner-search-input {
    background: transparent;
    border: 0;
    color: #2c2c2c;
    display: block;
    font-size: 19px;
    line-height: 1;
    outline: none;
    padding: 0;
    width: 100%;
}

.forum-banner-search-input::placeholder {
    color: #2c2c2c;
    opacity: 1;
}

.award-history-year-dropdown {
    bottom: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 5;
}

.award-history-year-dropdown .btn {
    background: white;
    border: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: none;
    color: #333333;
    min-width: 172px;
    padding: 8px 18px 9px;
}
.award-history-year-dropdown .btn span.chines.m-y-imp.Microsoft-YaHei-Regular {
    font-weight: bold;
}

.award-history-year-dropdown .dropdown-menu {
    left: 50%;
    margin: 0;
    max-height: 310px;
    min-width: 190px;
    overflow-y: auto;
    transform: translateX(-50%);
}

.award-history-year-dropdown .dropdown-menu > li > a {
    padding: 7px 18px;
}

.award-history-year-dropdown .dropdown-menu > .active > a,
.award-history-year-dropdown .dropdown-menu > .active > a:hover,
.award-history-year-dropdown .dropdown-menu > .active > a:focus {
    background-color: #8a7b4d;
    pointer-events: none;
}

.award-history-year-dropdown .dropdown-menu > .active > a .chines {
    color: #ffffff;
}

.award-archive-page {
    padding-top: 36px;
}

.award-archive-content {
    padding-bottom: 35px;
}

.award-year-navigation {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    min-height: 43px;
}

.award-year-navigation-bottom {
    margin-bottom: 0;
    margin-top: 10px;
}

.award-year-navigation .view-more-link.backPage {
    width: 145px;
}

.award-year-navigation .view_full-btn:last-child {
    margin-left: auto;
}

.award-archive-edition-heading {
    border-bottom: 1px solid #dcd9cf;
    box-shadow: inset 0 -1px #e0ddd5;
    margin-bottom: 18px;
    padding-bottom: 8px;
}

.award-archive-edition-heading h1,
.award-archive-edition-heading p {
    margin: 0;
}

.award-archive-edition-heading h1 {
    color: #7a704a;
    font-size: 27px;
    letter-spacing: 0;
    line-height: 1;
}

.award-archive-edition-heading .eng_wrd {
    color: #888888;
    font-family: "Lato-Black", "Lato-Bold", sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.2px;
    line-height: 1;
    margin-top: 7px;
}

.award-history-category {
    margin-bottom: 31px;
}

.award-history-category-title {
    align-items: stretch;
    display: flex;
    margin-bottom: 13px;
}

.award-history-category-mark {
    background: #81774c;
    flex: 0 0 29px;
    height: 29px;
    margin-right: 9px;
}

.award-history-category-title h2 {
    line-height: 1;
    margin: -1px 0 0;
}

.award-history-category-title h2 span {
    display: block;
}

.award-history-category-title .chines {
    color: #81774c;
    font-size: 20px;
}

.award-history-category-title .eng_wrd {
    color: #777777;
    font-family: "Lato-Black", "Lato-Bold", sans-serif;
    font-size: 9px;
    letter-spacing: 0.4px;
    margin-top: 3px;
    text-transform: uppercase;
}

.award-history-grid {
    display: grid;
    gap: 21px 15px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.award-history-category.award-category-team .award-history-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Categories the edition decided outright - a winner with no other nominees -
   sit side by side instead of each taking a full-width row for one card. */
.award-history-single-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 15px;
}

.award-history-single-row .award-history-category {
    flex: 1 1 0;
    min-width: 200px;
}

.award-history-single-row .award-history-grid,
.award-history-single-row
    .award-history-category.award-category-team
    .award-history-grid {
    grid-template-columns: minmax(0, 1fr);
}

/* Keep a lone poster the size it would be in a full five-column row: roughly
   three fifths of a third-width section, held as a ratio so it tracks the
   container instead of pinning to one viewport. */
.award-history-single-row
    .award-history-category:not(.award-category-team)
    .award-history-card {
    max-width: 58%;
}

.award-history-single-row
    .award-category-key-humanitarian-spirit
    .award-history-card {
    margin-left: auto;
    margin-right: auto;
}

.award-history-card {
    min-width: 0;
    text-align: center;
}

.award-history-card-media {
    margin: 0 auto 9px;
    position: relative;
}

.award-history-card-media a {
    display: block;
    height: 100%;
}

.award-history-card-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.award-history-card.has-poster-image .award-history-card-media {
    aspect-ratio: 2 / 3;
    background: #ededed;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
    max-width: 148px;
    width: 100%;
}

/* The poster frame gets its height from aspect-ratio, and Safari (iOS) does
   not treat that as a definite height for a child's height: 100%, so the
   percentage fell back to auto and the poster rendered at its own intrinsic
   ratio - any source that is not exactly 2:3 came up short and left the
   frame's #ededed background showing as a band under it, which is why the
   strip only appeared on iPhone. Giving the poster its own aspect-ratio did
   not fix it: for a replaced element sized with height: auto Safari still
   lays out from the image's intrinsic ratio. Filling the frame from an
   absolutely positioned box does fix it - an absolutely positioned child
   resolves inset: 0 against the already laid out padding box no matter how
   the parent's height was derived - and object-fit: cover (above) crops
   sources that are not 2:3 rather than letterboxing them. The same fix is
   applied to the round filmmaker portraits below 768px. */
.award-history-card.has-poster-image .award-history-card-media a,
.award-history-card.has-poster-image .award-history-card-media img {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.award-history-card.has-poster-image .award-history-card-media img {
    border: 3px solid #ffffff;
    box-sizing: border-box;
}

.award-history-card.has-poster-image.is-winner .award-history-card-media {
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
}

.award-history-card.has-poster-image.is-winner
    .award-history-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 6px #aa8e27;
    pointer-events: none;
}

.award-history-card.has-person-image .award-history-card-media {
    background: #ececec;
    border: 4px solid #efefef;
    border-radius: 50%;
    height: 126px;
    overflow: visible;
    width: 126px;
}

.award-history-card.has-person-image .award-history-card-media a,
.award-history-card.has-person-image .award-history-card-media img {
    border-radius: 50%;
    overflow: hidden;
}

.award-history-card.has-person-image.is-winner .award-history-card-media {
    border: 6px solid #aa8e27 !important;
}

.award-history-team-media {
    display: flex;
    justify-content: center;
    margin-bottom: 9px;
    width: 100%;
}

.award-history-team-avatars {
    margin-bottom: 0;
    position: relative;
}

.award-history-team-photo a {
    display: inline-block;
}

.award-history-team-photo,
.award-history-team-photo a,
.award-history-team-photo img {
    height: 100px;
    width: 100px;
}

.award-history-team-photo {
    flex: 0 0 100px;
}

.award-history-team-photo + .award-history-team-photo {
    margin-left: -30px;
}

/* Editions 1-15 use enlarged Couple/Partners portraits. Their overlap stays
   at the original 30px so the larger faces remain substantially visible. */
.award-history-team-large .award-history-team-photo,
.award-history-team-large .award-history-team-photo a,
.award-history-team-large .award-history-team-photo img {
    height: 126px;
    width: 126px;
}

.award-history-team-large .award-history-team-photo {
    flex-basis: 126px;
}

.award-history-team-photo img {
    max-width: none;
}

.award-history-card.is-winner .award-history-team-photo img {
    border-color: #aa8e27;
    border-width: 4px;
}

/* Editions 1-15 (2006-2020) only: match the Couple/Partners winner border
   to the 6px gold border already used on Top 10 Movie Stars portraits.
   Reuses award-history-team-large since its scope (edition <= 15) is
   exactly the requested range - portrait sizing and this border change
   share the same edition cutoff. */
.award-history-team-large
    .award-history-card.is-winner
    .award-history-team-photo
    img {
    border-width: 6px;
}

.award-history-team-media .award-history-win-badge {
    bottom: -5px;
    right: -10px;
}

.award-history-win-badge {
    background: url("../images/win-tag.svg") center / contain no-repeat;
    bottom: -15px;
    display: block;
    font-size: 0;
    height: 54px;
    pointer-events: none;
    position: absolute;
    right: -7px;
    width: 55px;
    z-index: 3;
}

.award-category-key-top-ten-stars .award-history-win-badge {
    bottom: -18px;
    right: -22px;
}

.award-history-rank-badge {
    bottom: -18px;
    display: block;
    height: 54px;
    pointer-events: none;
    position: absolute;
    right: -22px;
    width: 55px;
    z-index: 3;
}

.award-history-card-caption p {
    line-height: 1.25;
    margin: 0 0 2px;
    overflow-wrap: anywhere;
}

.award-history-card-caption a {
    color: inherit;
}

.award-history-card-caption a:hover,
.award-history-card-caption a:focus {
    color: #8a6d2f;
    text-decoration: none;
}

d .award-history-card-caption .chines {
    color: #333333;
    font-size: 14px;
}

.award-history-card-name {
    color: #3d3d3d;
    font-size: 12px;
}

/* Primary filmmaker names (including Top 10 Stars) and English song titles
   share one archive-card type treatment. A Chinese filmmaker name standing in
   for the nominee name carries the same weight as its English counterpart. */
.award-history-card-caption .award-history-filmmaker-name,
.award-history-card-caption .award-history-filmmaker-name a,
.award-history-card-caption .award-history-song-name-en,
.award-history-card-caption .award-history-song-name-en a {
    color: #333333;
    font-family: "Lato-Regular";
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
}

.award-history-card-caption .award-history-filmmaker-name,
.award-history-card-caption .award-history-song-name-en {
    margin-bottom: 7px;
}

.award-history-card-caption .award-history-filmmaker-name.is-with-film-title,
.award-history-card-caption .award-history-filmmaker-name.is-with-film-title a {
    color: #333333;
}

.award-history-filmmaker-film-titles .award-history-film-title-zh,
.award-history-filmmaker-film-titles .award-history-film-title-zh a {
    color: #666666;
}

.award-history-card-caption p.award-history-song-name {
    color: #333333;
    font-family: "Noto Sans SC bold", sans-serif;
    font-weight: 700;
}

.award-history-card-caption .is-song-with-film-title,
.award-history-card-caption .is-song-with-film-title a {
    color: #333333;
}

.award-history-song-film-titles .award-history-film-title-zh,
.award-history-song-film-titles .award-history-film-title-zh a {
    color: #666666;
}

.award-history-card-film {
    color: #777777;
    font-size: 10px;
}

.award-history-card-film span {
    color: #aaaaaa;
}

/* ---- Film titles: awards archive + nomination ballot ----
   Chinese film titles are set in bold Noto Sans SC on both pages. The
   requested "Noto Sans SC bold" family has no @font-face in fonts.css, so the
   loaded 'Noto Sans SC' follows it in the stack: without that fallback the
   titles would drop to the generic sans-serif and lose the site's CJK face.
   Element-qualified selectors keep these ahead of .m-y-imp.Microsoft-YaHei-Regular
   regardless of stylesheet order. */
.award-history-card-caption p.award-history-film-title-zh,
.nomination-preview-film span.chines,
.bsc-couple-film span.chines {
    font-family: "Noto Sans SC bold", "Noto Sans SC", sans-serif;
    font-weight: 700;
}

/* The archive page's English film title matches the nomination ballot's.
   The ballot renders its titles in an <h4>, which the theme sets to weight 500;
   the archive card uses a <p>, so the weight is restated here to match. */
.award-history-card-caption p.award-history-film-title-en {
    color: #999999;
    font-family: "Lato-Regular";
    font-size: 12px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

/* Film cards on the films listing and filmmaker profile use the same title
   typography as poster cards in the awards archive. */
.films-list .film-title .profile-film-card-title-zh {
    color: #333333;
    font-family: "Noto Sans SC bold", "Noto Sans SC", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
}

.films-list .film-title .profile-film-card-title-en {
    color: #999999;
    font-family: "Lato-Regular";
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
}

.award-history-film-titles {
    margin-top: 7px;
}

.award-history-film-titles p.award-history-film-title-zh,
.award-history-film-titles p.award-history-film-title-en {
    margin-bottom: 0;
}

/* Close the gap between a film's Chinese and English title lines. */
.award-history-card-caption p.award-history-film-title-zh,
.nomination-preview-film span.chines,
.bsc-couple-film span.chines {
    margin-bottom: 0;
}

.award-history-card-caption p.award-history-film-title-zh,
.award-history-card-caption p.award-history-film-title-en,
.nomination-preview-film span.chines,
.nomination-preview-film span.eng_wrd,
.bsc-couple-film span.chines,
.bsc-couple-film span.eng_wrd {
    line-height: 1.4;
}

/* Nominee name doubling as the film title (Best Picture and other
   film-category cards) on the awards archive page only. */
.award-history-card-caption p.award-history-film-title-zh-sm {
    font-size: 14px;
}

.award-archive-special-divider {
    align-items: center;
    color: #747474;
    display: flex;
    gap: 13px;
    justify-content: center;
    margin: 42px 0 25px;
}

.award-archive-special-divider span {
    background: #dedede;
    height: 1px;
    max-width: 125px;
    width: 18%;
}

.award-archive-special-divider strong {
    font-size: 23px;
    font-weight: normal;
}

.award-history-category-empty {
    border: 1px solid #e2e2e2;
    color: #999999;
    grid-column: 1 / -1;
    padding: 18px;
}

.award-history-category-empty p {
    margin-bottom: 2px;
}

.award-history-category-empty .eng_wrd {
    font-family: "Lato-Regular", sans-serif;
    font-size: 11px;
    text-transform: uppercase;
}

.award-history-empty {
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    margin: 30px 0 20px;
    padding: 60px 20px;
}

.award-history-empty .chines {
    color: #666666;
    font-size: 20px;
    margin-bottom: 5px;
}

.award-history-empty .eng_wrd {
    color: #999999;
    font-family: "Lato-Regular", sans-serif;
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
h4.film-title.mt-0.nomination-preview-film {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    max-width: -webkit-fill-available;
}
h4.film-title.mt-0.nomination-preview-film
    span.chines.m-y-imp.Microsoft-YaHei-Regular
    a {
    color: #333333;
    font-weight: 700;
}
h4.film-title.mt-0.nomination-preview-film span.eng_wrd a {
    color: #999999;
}

@media (max-width: 1199px) {
    .award-archive-search-mark {
        right: 15px;
    }

    .award-history-card.has-person-image .award-history-card-media {
        height: 105px;
        width: 105px;
    }
}

@media (max-width: 991px) {
    /* .award-archive-brand-art {
        height: 150px;
        width: 99px;
    } */

    /* .award-archive-brand-copy {
        margin-left: 0;
    } */

    .award-archive-search-mark {
        display: none;
    }

    /* ICFCS Awards Watch banner (.award-archive-banner-watch): its search mark
       stays visible from here down, like the films banner, instead of being
       dropped by the shared rule above. Nothing else changes at this width -
       the brand and the pill still have room side by side. */
    .award-archive-banner-watch .award-archive-search-mark {
        display: flex;
    }

    /* ICFCS Winners & Nominees banner only (.award-archive-banner-icfcs):
       from 991px down to 768px the banner keeps its full desktop layout -
       brand on the left, year dropdown tabbed onto the bottom edge and the
       search pill with its reader artwork on the right - instead of being
       dropped by the shared rule above. Everything is only scaled down so the
       three pieces still fit the 750px container at this width. */
    .award-archive-banner-icfcs .award-archive-search-mark {
        display: flex;
    }

    .award-archive-banner-icfcs .award-archive-brand-art {
        height: 132px;
        width: 87px;
    }

    .award-archive-banner-icfcs .award-archive-brand-copy {
        margin-bottom: 39px;
        white-space: nowrap;
    }

    .award-archive-banner-icfcs .award-archive-brand-copy .chines {
        font-size: 22px;
    }

    .award-archive-banner-icfcs .award-archive-brand-copy .fab-titlethin {
        font-size: 12px;
        letter-spacing: 0.8px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill {
        padding: 8px 16px;
        width: 210px;
    }

    /* The reader artwork keeps overlapping the right end of the pill, exactly
       as it does on desktop, just scaled to the narrower pill. */
    .award-archive-banner-icfcs .award-archive-search-mark > img {
        height: 96px;
        right: 0;
        width: 88px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill strong {
        font-size: 16px;
    }

    /* Centred rather than the desktop 63% offset, so the dropdown clears both
       the brand and the narrower search pill inside the 750px container. */
    .btn-group.award-history-year-dropdown.award-history-year-dropdown-icfcs {
        left: 50%;
    }

    .award-archive-banner-icfcs .award-history-year-dropdown .btn {
        font-size: 12px;
        min-width: 150px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .award-history-grid {
        grid-template-columns: repeat(5, minmax(105px, 1fr));
    }

    .award-history-category.award-category-team .award-history-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .fab-pill-text .chines {
        font-size: 14px;
    }
    #films-archive-banner .fab-pill-en,
    #filmmakers-archive-banner .fab-pill-en,
    #critics-archive-banner .fab-pill-en,
    #store-archive-banner .fab-pill-en {
        font-size: 7px;
    }
    .critics-sec {
        padding: 10px 0;
    }
    .award-archive-banner {
        height: 82px;
    }

    .award-archive-brand {
        left: 0;
    }

    .award-archive-brand-art {
        height: 165px;
        width: 125px;
    }

    .award-archive-brand-copy {
        margin: 0 0 20px 15px;
    }

    .award-archive-brand-copy .chines {
        font-size: 20px;
    }

    .award-archive-brand-copy .eng_wrd {
        font-size: 8px;
        letter-spacing: 0.8px;
    }

    .award-history-year-dropdown .btn {
        font-size: 12px;
        min-width: 128px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .award-history-year-dropdown .dropdown-menu {
        min-width: 160px;
    }

    /* ICFCS Winners & Nominees banner on phones: the grey band keeps only the
       brand and the search label, side by side in one row - the decorative
       reader artwork is dropped here, and the year dropdown moves out of the
       band and sits centred just underneath it (the banner's bottom margin is
       the white strip it sits in). */
    .award-archive-banner-icfcs {
        margin-bottom: 62px;
    }

    .award-archive-banner-icfcs .award-archive-banner-inner {
        align-items: flex-end;
        display: flex;
        justify-content: space-between;
    }

    /* .container carries Bootstrap's clearfix pseudo-elements, which turn into
       zero-width flex items here and make space-between split the row into
       three equal gaps instead of pinning the brand left and the search label
       right. Dropping them puts each back against its own edge. */
    .award-archive-banner-icfcs .award-archive-banner-inner:before,
    .award-archive-banner-icfcs .award-archive-banner-inner:after {
        display: none;
    }

    .award-archive-banner-icfcs .award-archive-brand {
        flex: 0 1 auto;
        left: auto;
        min-width: 0;
        position: relative;
    }

    .award-archive-banner-icfcs .award-archive-brand-art {
        flex-shrink: 0;
        height: 118px;
        width: 78px;
    }

    .award-archive-banner-icfcs .award-archive-brand-copy {
        margin-bottom: 19px;
    }

    .award-archive-banner-icfcs .award-archive-brand-copy .chines {
        font-size: 20px;
    }

    .award-archive-banner-icfcs .award-archive-brand-copy .fab-titlethin {
        font-size: 12px;
        letter-spacing: 0.6px;
        margin-top: 3px;
    }

    .award-archive-banner-icfcs .award-archive-search-mark {
        align-items: center;
        flex: 0 0 auto;
        position: relative;
        right: auto;
    }

    .award-archive-banner-icfcs .award-archive-search-mark > img {
        display: none;
    }

    .award-archive-banner-icfcs .award-archive-search-pill {
        flex-shrink: 0;
        padding: 8px 16px;
        width: auto;
    }

    /* Sits in the banner's bottom margin, centred on the page, and is a fully
       rounded pill here instead of the tab shape it has on desktop. */
    .btn-group.award-history-year-dropdown.award-history-year-dropdown-icfcs {
        bottom: auto;
        left: 50%;
        margin-top: 14px;
        top: 100%;
        transform: translateX(-50%);
    }

    .award-archive-banner-icfcs .award-history-year-dropdown .btn {
        border: 1px solid #d5d5d5;
        border-radius: 22px;
        font-size: 14px;
        min-width: 158px;
        padding: 8px 16px 9px;
    }

    /* The Awards Watch banner drops its decorative envelope artwork here, the
       same way the films banner drops its reel image, so the pill can shrink
       to its label width without the artwork covering the text. */
    .award-archive-banner-watch .award-archive-search-mark > img {
        display: none;
    }

    .award-archive-banner-icfcs .award-archive-search-pill,
    .award-archive-banner-watch .award-archive-search-pill {
        padding: 7px 12px;
    }

    .award-archive-banner-watch .award-archive-search-pill {
        width: auto;
    }

    .award-archive-banner-icfcs .award-archive-search-pill i,
    .award-archive-banner-watch .award-archive-search-pill i {
        font-size: 13px;
        margin-right: 7px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill strong,
    .award-archive-banner-watch .award-archive-search-pill strong {
        font-size: 14px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill small,
    .award-archive-banner-watch .award-archive-search-pill small {
        font-size: 7px;
        letter-spacing: 0.4px;
    }

    .award-archive-page {
        padding-top: 25px;
    }

    .award-archive-edition-heading h1 {
        font-size: 22px;
    }

    /* Awards archive nominee grids (ICFCS winners & nominees page): three
       nominees per row on every phone and tablet width, for poster categories
       and filmmaker categories alike. */
    .award-history-grid {
        gap: 22px 12px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Card captions (Best Picture and every other film category): the English
       title is clamped to a single line, which cuts it mid-word once the grid
       drops to three columns. Give it a second line, and let the Chinese title
       use two lines as well rather than running past the card. */
    .award-history-card-caption p.award-history-film-title-en {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .award-history-card-caption p.award-history-film-title-zh {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    /* Filmmaker portraits stop being a fixed circle and track their column the
       way poster frames already do, so three of them always fit a row instead
       of a 112px circle forcing the grid wider than the screen. */
    .award-history-card.has-person-image .award-history-card-media {
        aspect-ratio: 1 / 1;
        height: auto;
        max-width: 148px;
        width: 100%;
    }

    /* The circle takes its height from aspect-ratio, which iOS Safari does not
       treat as a definite height for the image's height: 100% - the same
       problem the poster frames document above. Giving the portrait its own
       aspect-ratio did not fix it either, because Safari keeps using the
       image's intrinsic ratio for a replaced element sized with height: auto,
       so any non-square source came up short and left the #ececec circle
       showing as a grey crescent under the face on iPhone only. Filling the
       circle from an absolutely positioned box sidesteps both problems: an
       absolutely positioned child resolves inset: 0 against the already laid
       out padding box, no matter how the parent's height was derived, and
       object-fit: cover (base rule) crops non-square sources instead of
       letterboxing them. */
    .award-history-card.has-person-image .award-history-card-media a,
    .award-history-card.has-person-image .award-history-card-media img {
        height: 100%;
        inset: 0;
        position: absolute;
        width: 100%;
    }

    /* Both badges are absolutely positioned against the media box, so they
       have to come down with it to stay inside a third-of-a-row card. */
    .award-history-card .award-history-win-badge {
        bottom: -12px;
        height: 44px;
        right: -6px;
        width: 45px;
    }

    .award-category-key-top-ten-stars .award-history-win-badge,
    .award-history-card .award-history-rank-badge {
        bottom: -10px;
        right: -8px;
    }

    img.award-history-rank-badge.withnumbers {
        height: 38px;
        width: 38px;
    }
}

@media (max-width: 600px) {
    /* Small tablets/large phones: the brand keeps shrinking so it stays on
       one row with the search pill. The year dropdown is below the banner
       from 767px down, so it no longer has to shrink with them. */
    .award-archive-banner-icfcs .award-archive-brand-art {
        height: 108px;
        width: 71px;
    }
    .archive-search-input-wrap input[type="search"] {
        font-size: 18px;

        padding: 8px 6px 8px 0;
    }
    #critics-search-input {
        font-size: 18px;

        padding: 8px 6px 8px 0;
    }
    #filmmakers-search-input {
        font-size: 18px;

        padding: 8px 6px 8px 0;
    }
    .award-archive-banner {
        height: 82px;
    }

    .award-archive-banner-icfcs .award-archive-brand-copy {
        margin-bottom: 21px;
        margin-left: 8px;
    }

    .award-archive-banner-icfcs .award-archive-brand-copy .fab-titlethin,
    .award-archive-banner-icfcs .award-archive-brand-copy .eng_wrd {
        font-size: 12px;
        letter-spacing: 0.4px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill,
    .award-archive-banner-watch .award-archive-search-pill {
        padding: 6px 10px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill i,
    .award-archive-banner-watch .award-archive-search-pill i {
        font-size: 12px;
        margin-right: 5px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill strong,
    .award-archive-banner-watch .award-archive-search-pill strong {
        font-size: 14px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill small,
    .award-archive-banner-watch .award-archive-search-pill small {
        font-size: 7px;
        letter-spacing: 0.3px;
    }

    /* The ICFCS pill keeps a readable label at this width because the year
       dropdown is no longer competing for the same row. */
    .award-archive-banner-icfcs .award-archive-search-pill {
        padding: 7px 14px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill strong {
        font-size: 15px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill small {
        font-size: 7px;
        letter-spacing: 0.4px;
    }
}

@media (max-width: 479px) {
    .news-section .news-post img.img-second-banner {
        height: 245px;
        object-fit: cover;
    }

    .news-section .news-post img.img-second-banner.film-placeholder-fit {
        background-color: #000000;
        height: 245px;
        object-fit: cover;
        /* padding-bottom: 160px; */
    }
    #top-section .news-post img {
        width: 100%;
        height: 245px;
        object-fit: cover;
    }
    .forum-banner .award-archive-brand-copy {
        margin: 0px 0 21px 15px;
    }
    .award-archive-brand-copy .chines {
        font-size: 18px;
    }
    /* Archive banner (x-archive-banner, reviews pages): smallest step of the
       top-centred search pill and the post-review typewriter artwork. */
    .film-archive-banner .arb-inner {
        padding: 30px 0 12px;
    }
    .archive-search-input-wrap input[type="search"] {
        font-size: 15px;
        padding: 8px 6px 8px 0;
    }
    #filmmakers-search-input {
        font-size: 15px;
        padding: 8px 6px 8px 0;
    }
    #critics-search-input {
        font-size: 15px;
        padding: 8px 6px 8px 0;
    }
    .film-archive-banner .arb-inner .arb-pill {
        padding: 7px 13px !important;
        top: 8px;
    }

    .film-archive-banner .arb-inner .arb-pill .fab-pill-text .chines {
        font-size: 14px;
    }

    .film-archive-banner .arb-inner .arb-pill .fab-pill-en {
        font-size: 8px;
    }

    .film-archive-banner .arb-right .post-ar-btn img {
        width: 78px;
    }

    .film-archive-banner .arb-right .post-ar-btn .chines {
        font-size: 15px;
    }

    .film-archive-banner .arb-right .post-ar-btn .eng_wrd {
        font-size: 8px;
    }

    /* .award-archive-brand-art {
        opacity: 0.48;
    } */
    .award-archive-banner {
        height: 82px;
    }
    .award-archive-brand-copy {
        margin-left: -17px;
        position: relative;
    }

    /* Phones: the ICFCS band keeps a little more height than the other
       archive banners because it carries the brand and the search label side
       by side, with the year dropdown centred in the white strip below it. */
    .award-archive-banner-icfcs {
        height: 82px;
        margin-bottom: 58px;
    }

    .award-archive-banner-icfcs .award-archive-brand-art {
        height: 104px;
        width: 68px;
    }

    .award-archive-banner-icfcs .award-archive-brand-copy {
        margin-bottom: 23px;
        margin-left: 4px;
    }

    .award-archive-banner-icfcs .award-archive-brand-copy .chines {
        font-size: 18px;
    }

    .award-archive-banner-icfcs .award-archive-brand-copy .fab-titlethin {
        font-size: 9px;
        letter-spacing: 0.3px;
        margin-top: 3px;
    }
    .fab-en {
        letter-spacing: 0.7px;
    }

    .btn-group.award-history-year-dropdown.award-history-year-dropdown-icfcs {
        margin-top: 12px;
    }

    .award-archive-banner-icfcs .award-history-year-dropdown .btn {
        font-size: 13px;
        min-width: 148px;
        padding: 7px 14px 8px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill {
        padding: 6px 12px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill i {
        font-size: 11px;
        margin-right: 5px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill strong {
        font-size: 14px;
    }

    .award-archive-banner-icfcs .award-archive-search-pill small {
        font-size: 7px;
        letter-spacing: 0.3px;
    }

    /* Phones keep the three-per-row grid rather than dropping to two; only the
       column gap tightens so three cards still fit the narrowest screens. */
    .award-history-grid {
        gap: 20px 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* No max-width cap here: a third of a phone-width row is already narrower
       than the 112px cap above, so the portrait fills its column. */
    .award-history-card.has-person-image .award-history-card-media {
        border-width: 3px;
        max-width: none;
    }

    .award-history-card.has-person-image.is-winner .award-history-card-media {
        border-width: 4px !important;
    }

    /* Caption type steps down with the narrower cards so film titles and
       filmmaker names still break cleanly inside two lines. */
    .award-history-card-caption .chines,
    .award-history-card-caption p.award-history-film-title-zh {
        font-size: 12px;
    }

    .award-history-card-caption .award-history-filmmaker-name,
    .award-history-card-caption .award-history-filmmaker-name a,
    .award-history-card-caption .award-history-song-name-en,
    .award-history-card-caption .award-history-song-name-en a {
        font-size: 12px;
        line-height: 1.25;
    }

    .award-history-card-name,
    .award-history-card-caption p.award-history-film-title-en {
        font-size: 11px;
    }

    .award-history-card-film {
        font-size: 9px;
    }

    .award-history-card .award-history-win-badge {
        bottom: -10px;
        height: 38px;
        right: -4px;
        width: 39px;
    }

    img.award-history-rank-badge.withnumbers {
        height: 32px;
        width: 32px;
    }
}

/* Reviews search banner: follow the Awards archive's mobile arrangement.
   The brand and search control stay inside the grey band, while Post a Review
   moves into the centred white row directly below it. Scoped to the reviews
   search page so the shared archive banner keeps its existing layouts. */
@media (max-width: 767px) {
    .film-archive-banner.reviews-search-banner {
        margin-bottom: 124px;
    }

    img.award-history-rank-badge.withnumbers {
        height: 38px !important;
        width: 38px !important;
        bottom: 8px !important;
        left: auto !important;
        right: -9px !important;
        top: auto !important;
    }
    .reviews-fullwidth-masonry {
        padding: 10px 0 45px;
    }
    .film-archive-banner.reviews-search-banner .arb-inner {
        align-items: center;
        height: 108px;
        padding: 0;
        position: relative;
    }

    .film-archive-banner.reviews-search-banner .arb-portrait {
        align-self: flex-end;
        display: block;
        flex: 0 0 auto;
        margin-right: 0px;
    }

    .film-archive-banner.reviews-search-banner .arb-portrait img {
        /* Source is a wide 263x162 shot with her head centered above a
           wide feather collar; the old auto-width scaling showed the
           whole frame, leaving the head tiny. Fix the width narrower than
           the natural ratio so object-fit:cover crops the sides instead,
           keeping the (centered) head prominent, matching desktop's look. */
        height: 122px;
        width: auto;
        /* object-fit: cover;
        object-position: right; */
    }

    .film-archive-banner.reviews-search-banner .arb-center {
        align-items: center;
        flex: 1 1 auto;
        gap: 8px;
        min-width: 0;
    }

    .film-archive-banner.reviews-search-banner .arb-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .film-archive-banner.reviews-search-banner .arb-title .fab-cn,
    .film-archive-banner.reviews-search-banner .arb-title .fab-titlethin {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .film-archive-banner.reviews-search-banner .arb-title .fab-cn {
        font-size: 20px;
    }

    .film-archive-banner.reviews-search-banner .arb-title .fab-titlethin {
        font-size: 9px;
        letter-spacing: 0.6px;
        margin-top: 3px;
    }

    .film-archive-banner.reviews-search-banner .arb-inner .arb-pill {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        gap: 7px;
        left: auto;
        padding: 8px 12px !important;
        position: static;
        top: auto;
        transform: none;
        white-space: nowrap;
        width: auto !important;
    }

    .film-archive-banner.reviews-search-banner
        .arb-inner
        .arb-pill
        .fab-pill-text {
        display: flex;
    }

    .film-archive-banner.reviews-search-banner .arb-inner .arb-pill .fa-search {
        padding: 0;
    }

    .film-archive-banner.reviews-search-banner
        .arb-inner
        .arb-pill
        .fab-pill-text
        .chines {
        font-size: 14px;
    }

    .film-archive-banner.reviews-search-banner
        .arb-inner
        .arb-pill
        .fab-pill-en {
        font-size: 8px;
    }

    .film-archive-banner.reviews-search-banner .arb-right {
        align-items: center;
        display: flex;
        left: 50%;
        margin: 0;
        position: absolute;
        top: calc(100% + 12px);
        transform: translateX(-50%);
    }

    .film-archive-banner.reviews-search-banner .arb-right .post-review {
        margin-top: 0;
    }

    .film-archive-banner.reviews-search-banner .arb-right .post-ar-btn img {
        width: 100px;
    }
}

@media (max-width: 479px) {
    .film-archive-banner.reviews-search-banner .arb-inner {
        height: 69px;
    }
    /* The bootstrap ".container" wrapping this banner's content carries a
       15px left/right padding everywhere on the site; scoped 3-class
       selector beats it here without touching ".container" globally. */
    .film-archive-banner.reviews-search-banner .container {
        padding-left: 0;
    }
    .film-archive-banner.reviews-search-banner .arb-portrait img {
        height: 82px;
        width: auto;
        /* object-fit: cover;
        object-position: right; */
    }

    .film-archive-banner.reviews-search-banner .arb-title .fab-cn {
        font-size: 18px;
    }

    .film-archive-banner.reviews-search-banner .arb-title .fab-titlethin {
        font-size: 9px;
    }

    .film-archive-banner.reviews-search-banner .arb-inner .arb-pill {
        padding: 6px 10px !important;
    }

    .film-archive-banner.reviews-search-banner .arb-right {
        top: calc(100% + 10px);
    }

    /* .film-archive-banner.reviews-search-banner .arb-right .post-ar-btn img {
        width: 78px;
    } */

    .film-archive-banner.reviews-search-banner .arb-right .post-ar-btn .chines {
        font-size: 15px;
    }

    .film-archive-banner.reviews-search-banner
        .arb-right
        .post-ar-btn
        .eng_wrd {
        font-size: 8px;
    }
}

@media (max-width: 360px) {
    .film-archive-banner.reviews-search-banner .arb-inner {
        height: 70px;
    }

    /* .film-archive-banner.reviews-search-banner .arb-portrait img {
        height: 76px;
    } */

    .film-archive-banner.reviews-search-banner .arb-title .fab-cn {
        font-size: 18px;
    }

    /* .film-archive-banner.reviews-search-banner .arb-title .fab-titlethin {
        display: none;
    } */
}

/* Films archive search only: on compact screens the search panel is centred
   on a white background, with the reel artwork above the search controls. */
.films-search-overlay-reel {
    display: none;
}

.awards-search-overlay-art {
    display: none;
}

.reviews-search-overlay-reel {
    display: none;
}

.filmmakers-search-overlay-art {
    display: none;
}

.critics-search-overlay-art {
    display: none;
}

@media (max-width: 767px) {
    #films-search-overlay.films-search-overlay--banner:not(
            #critics-search-overlay
        ):not(#filmmakers-search-overlay) {
        background: #fff;
        bottom: 0;
        height: auto;
        left: 0;
        min-height: 0;
        position: fixed;
        right: 0;
        top: var(--films-search-overlay-top, 118px);
        width: 100%;
    }

    #films-search-overlay.films-search-overlay--banner .archive-search-inner {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 580px;
        padding: 0 24px;
        transform: translateY(var(--films-search-content-offset, 0px));
    }

    #films-search-overlay.films-search-overlay--banner #films-search-form {
        width: 100%;
    }

    #films-search-overlay.films-search-overlay--banner .archive-search-label,
    #films-search-overlay.films-search-overlay--banner
        .archive-search-label
        .film-searchLabel,
    #films-search-overlay.films-search-overlay--banner
        .archive-search-input-wrap
        input[type="search"],
    #films-search-overlay.films-search-overlay--banner
        .archive-search-input-wrap
        .film-search-year-input,
    #films-search-overlay.films-search-overlay--banner .archive-search-btn,
    #films-search-overlay.films-search-overlay--banner
        > button[id$="-search-close"] {
        color: #1a1a1a;
    }

    #films-search-overlay.films-search-overlay--banner
        .archive-search-input-wrap
        input[type="search"]::placeholder,
    #films-search-overlay.films-search-overlay--banner
        .archive-search-input-wrap
        .film-search-year-input::placeholder {
        color: #1a1a1a;
    }

    #films-search-overlay.films-search-overlay--banner
        .archive-search-btn:hover,
    #films-search-overlay.films-search-overlay--banner
        > button[id$="-search-close"]:hover {
        color: #1a1a1a;
    }

    #films-search-overlay.films-search-overlay--banner
        .films-search-overlay-reel {
        display: block;
        height: auto;
        margin-bottom: 18px;
        pointer-events: none;
        width: 100px;
    }

    /* Reviews uses the exact compact films-search overlay geometry. */
    #reviews-search-overlay.reviews-search-overlay--banner:not(
            #critics-search-overlay
        ):not(#filmmakers-search-overlay) {
        background: #fff;
        bottom: 0;
        height: auto;
        left: 0;
        min-height: 0;
        position: fixed;
        right: 0;
        top: var(--reviews-search-overlay-top, 118px);
        width: 100%;
    }

    #reviews-search-overlay.reviews-search-overlay--banner
        .archive-search-inner {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 580px;
        padding: 0 24px;
        transform: translateY(var(--reviews-search-content-offset, 0px));
    }

    #reviews-search-overlay.reviews-search-overlay--banner
        .archive-search-form {
        width: 100%;
    }

    #reviews-search-overlay .archive-search-label,
    #reviews-search-overlay .archive-search-label .reviews-search,
    #reviews-search-overlay .archive-search-input-wrap input[type="search"],
    #reviews-search-overlay .archive-search-btn,
    #reviews-search-overlay > button[id$="-search-close"] {
        color: #1a1a1a;
    }

    #reviews-search-overlay
        .archive-search-input-wrap
        input[type="search"]::placeholder {
        color: #1a1a1a;
    }

    #reviews-search-overlay .archive-search-btn:hover,
    #reviews-search-overlay > button[id$="-search-close"]:hover {
        color: #1a1a1a;
    }

    #reviews-search-overlay .reviews-search-overlay-reel {
        display: block;
        height: auto;
        margin-bottom: 18px;
        pointer-events: none;
        width: 100px;
    }

    /* Forum uses the exact compact films-search overlay geometry too - see
       resources/views/components/forum/banner.blade.php for the markup and
       public/css/forum.css for the phone-only .open-forum-search trigger
       that opens it. */
    /* The trailing :not()s don't exclude anything real - #forum-search-overlay
       can't also be #critics-search-overlay - they exist purely to match the
       specificity of the generic dark-modal default two paragraphs up
       ([id$="-search-overlay"]:not(#critics-search-overlay):not(#filmmakers-
       search-overlay)), the same way the Films/Reviews/Awards blocks above
       do, so this white-panel override actually wins the cascade. */
    #forum-search-overlay.forum-search-overlay--banner:not(
            #critics-search-overlay
        ):not(#filmmakers-search-overlay) {
        background: #fff;
        bottom: 0;
        height: auto;
        left: 0;
        min-height: 0;
        position: fixed;
        right: 0;
        top: var(--forum-search-overlay-top, 118px);
        width: 100%;
    }

    #forum-search-overlay.forum-search-overlay--banner .archive-search-inner {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 580px;
        padding: 0 24px;
        transform: translateY(var(--forum-search-content-offset, 0px));
    }

    #forum-search-overlay.forum-search-overlay--banner .archive-search-form {
        width: 100%;
    }

    #forum-search-overlay .archive-search-label,
    #forum-search-overlay .archive-search-input-wrap input[type="search"],
    #forum-search-overlay .archive-search-btn,
    #forum-search-overlay > button[id$="-search-close"] {
        color: #1a1a1a;
    }

    #forum-search-overlay
        .archive-search-input-wrap
        input[type="search"]::placeholder {
        color: #1a1a1a;
    }

    #forum-search-overlay .archive-search-btn:hover,
    #forum-search-overlay > button[id$="-search-close"]:hover {
        color: #1a1a1a;
    }

    /* Matches .critics-search-overlay-art's treatment - the overlay reuses
       the forum's own existing banner illustration (forum-banner-right.png)
       rather than a separate mobile-only image, the same way Critics shows
       the same artwork on the overlay as on the banner instead of swapping
       in something new for phones. */
    #forum-search-overlay .forum-search-overlay-art {
        display: block;
        height: auto;
        margin-bottom: 18px;
        pointer-events: none;
        width: 100px;
    }

    /* Filmmakers uses the exact compact films-search overlay geometry. */
    #filmmakers-search-overlay.filmmakers-search-overlay--banner {
        background: #fff;
        bottom: 0;
        height: auto;
        inset: auto 0 0;
        left: 0;
        min-height: 0;
        position: fixed;
        right: 0;
        top: var(--filmmakers-search-overlay-top, 118px);
        width: 100%;
    }

    #filmmakers-search-overlay.filmmakers-search-overlay--banner
        #filmmakers-search-inner {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 580px;
        padding: 0 24px;
        transform: translateY(var(--filmmakers-search-content-offset, 0px));
    }

    #filmmakers-search-overlay.filmmakers-search-overlay--banner
        #filmmakers-search-form {
        width: 100%;
    }

    #filmmakers-search-overlay #filmmakers-search-label,
    #filmmakers-search-overlay #filmmakers-search-label .filmmaker-searchLabel,
    #filmmakers-search-overlay #filmmakers-search-input,
    #filmmakers-search-overlay #filmmakers-search-btn,
    #filmmakers-search-overlay > #filmmakers-search-close {
        color: #1a1a1a;
    }

    #filmmakers-search-overlay #filmmakers-search-input::placeholder {
        color: #1a1a1a;
    }

    #filmmakers-search-overlay #filmmakers-search-btn:hover,
    #filmmakers-search-overlay > #filmmakers-search-close:hover {
        color: #1a1a1a;
    }

    #filmmakers-search-overlay .filmmakers-search-overlay-art {
        display: block;
        height: auto;
        margin-bottom: 18px;
        pointer-events: none;
        width: 100px;
    }

    /* Critics uses the exact compact films-search overlay geometry. */
    #critics-search-overlay.critics-search-overlay--banner {
        background: #fff;
        bottom: 0;
        height: auto;
        inset: auto 0 0;
        left: 0;
        min-height: 0;
        position: fixed;
        right: 0;
        top: var(--critics-search-overlay-top, 118px);
        width: 100%;
    }

    #critics-search-overlay.critics-search-overlay--banner
        #critics-search-inner {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 580px;
        padding: 0 24px;
        transform: translateY(var(--critics-search-content-offset, 0px));
    }

    #critics-search-overlay.critics-search-overlay--banner
        #critics-search-form {
        width: 100%;
    }

    #critics-search-overlay #critics-search-label,
    #critics-search-overlay #critics-search-label .chines,
    #critics-search-overlay #critics-search-input,
    #critics-search-overlay #critics-search-btn,
    #critics-search-overlay > #critics-search-close {
        color: #1a1a1a;
    }

    #critics-search-overlay #critics-search-input::placeholder {
        color: #1a1a1a;
    }

    #critics-search-overlay #critics-search-btn:hover,
    #critics-search-overlay > #critics-search-close:hover {
        color: #1a1a1a;
    }

    #critics-search-overlay .critics-search-overlay-art {
        display: block;
        height: auto;
        margin-bottom: 18px;
        pointer-events: none;
        width: 100px;
    }

    /* ICFCS Awards uses the exact compact films-search overlay geometry,
       while retaining its existing award type selectors. */
    #awards-search-overlay.awards-search-overlay--banner:not(
            #critics-search-overlay
        ):not(#filmmakers-search-overlay) {
        background: #fff;
        bottom: 0;
        height: auto;
        left: 0;
        min-height: 0;
        position: fixed;
        right: 0;
        top: var(--awards-search-overlay-top, 118px);
        width: 100%;
    }

    #awards-search-overlay.awards-search-overlay--banner .archive-search-inner {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 580px;
        padding: 0 24px;
        transform: translateY(var(--awards-search-content-offset, 0px));
    }

    #awards-search-overlay.awards-search-overlay--banner #awards-search-form {
        width: 100%;
    }

    #awards-search-overlay .archive-search-label,
    #awards-search-overlay .archive-search-label .chines,
    #awards-search-overlay .archive-search-label .eng_wrd,
    #awards-search-overlay .archive-search-input-wrap input[type="search"],
    #awards-search-overlay .archive-search-btn,
    #awards-search-overlay > button[id$="-search-close"],
    #awards-search-overlay .award-overlay-search-types label,
    #awards-search-overlay .award-overlay-search-types label .chines,
    #awards-search-overlay .award-overlay-search-types label .eng_wrd {
        color: #1a1a1a;
    }

    /* Stack the English label below the Chinese one, centered, instead of
       the desktop's side-by-side flex row (#awards-search-overlay
       .archive-search-label, base rule above). */
    #awards-search-overlay .archive-search-label {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    #awards-search-overlay .archive-search-label > span[aria-hidden="true"] {
        display: none;
    }

    #awards-search-overlay
        .archive-search-input-wrap
        input[type="search"]::placeholder {
        color: #1a1a1a;
    }

    #awards-search-overlay .archive-search-btn:hover,
    #awards-search-overlay > button[id$="-search-close"]:hover {
        color: #1a1a1a;
    }

    #awards-search-overlay .awards-search-overlay-art {
        display: block;
        height: auto;
        margin-bottom: 18px;
        pointer-events: none;
        width: 100px;
    }
}

@media (max-width: 479px) {
    /* The normal mobile rule centres search content by pulling it upward by
       half the banner height. On narrow screens that puts the artwork back
       over the banner, so keep it in the overlay and step it down instead. */
    #films-search-overlay.films-search-overlay--banner .archive-search-inner,
    #reviews-search-overlay.reviews-search-overlay--banner
        .archive-search-inner,
    #filmmakers-search-overlay.filmmakers-search-overlay--banner
        #filmmakers-search-inner,
    #critics-search-overlay.critics-search-overlay--banner
        #critics-search-inner {
        transform: translateY(-60px) !important;
    }
    #awards-search-overlay.awards-search-overlay--banner .archive-search-inner {
        transform: translateY(-40px) !important;
    }
    #films-search-overlay.films-search-overlay--banner
        .films-search-overlay-reel {
        margin-bottom: 14px;
        width: 125px;
    }

    #reviews-search-overlay .reviews-search-overlay-reel {
        margin-bottom: 14px;
        width: 125px;
    }

    #filmmakers-search-overlay .filmmakers-search-overlay-art {
        margin-bottom: 14px;
        width: 125px;
    }

    #critics-search-overlay .critics-search-overlay-art {
        margin-bottom: 14px;
        width: 125px;
    }

    #awards-search-overlay .awards-search-overlay-art {
        margin-bottom: 14px;
        width: 125px;
    }
}
@media (max-width: 400px) {
    .film-archive-banner.reviews-search-banner .arb-portrait img {
        height: 82px;
        width: 107px;
        object-fit: cover;
        object-position: right;
    }
    .film-archive-banner.reviews-search-banner .container {
        padding-left: 0;
    }
}