*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: "Lato", sans-serif;
    background-color: #000000;
    color: #ffffff;
	position: relative;
    margin: 0;
    padding-bottom: 4rem;
    min-height: 100%;
    min-height: 100vh;
}
header{
    height: 74px;
}
.home-page header{
  height: 0;
}
.header, .top-nav{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 11;
}
.top-nav{
    background-color: rgba(0, 0, 0, 0.6);
    border-bottom: 2px solid rgba(244,243,240,.8);
    padding: 10px 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    letter-spacing: 2.64px;
    margin-bottom: 10px;
    font-size: 14px;
}
.top-nav-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.nav-left{
    display: flex;
    align-items: center;
    font-weight: 400;
}
.logo-wrapper{
    margin-right: 20px;
}
.hidden{
  display: none;
}
.shown{
  display: block;
}
.lg-logo{
  height: 52px;
}
.window-logo, .search-icon{
  height: 30px;
}
.search-wrapper{
    border-bottom: 1px solid transparent;
    display: flex;
    gap: 10px;
}
.search-input{
    background: transparent;
    border: 0;
    outline: none;
    font-size: 1rem;
    display: none;
}
.nav-left-text{
    text-transform: uppercase;
    margin-bottom: 0;
    font-size: 1rem;
}
.search-wrapper.search-active{
    padding-bottom: 5px;
    border-bottom: 1px solid #ffffff;
}
.search-wrapper.search-active .search-input{
    display: block;
}
.nav-right{
    display: flex;
    align-items: center;
    text-transform: uppercase;
    gap: 5px;
}
.home-btn{
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}
.home-btn a{
	text-decoration:none;
	color:#FFFFFF;
}
.nav-right >ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}
.nav-right >ul li{
    list-style: none;
    margin: 0 15px;
}
.nav-right >ul li:first-child{
    margin-left: 0;
}
.nav-right >ul li a{
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 400;
    text-decoration: none;
}
.right-logo .dropdown-toggle{
    padding: 0;
    border: 0;
}
.right-logo .dropdown-toggle::after{
    display: none !important;
}
.right-logo .dropdown-toggle:focus{
    border: 0;
}
.right-logo .dropdown-menu{
    background-color: #222222;
    min-width: 320px;
    width: 100%;
}
.right-logo .dropdown-item{
    color: #ffffff;
    font-size: 14px;
	white-space: unset;
}
.right-logo .dropdown-item:hover{
    color: #000000;
}
.btn.dropdown-toggle{
  color: #ffffff;
  text-transform: uppercase;
}
.bottom-nav{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9;
}
.nav-container{
    /* background: url(../images/nav_bg.png) no-repeat; */
    background-size: 100% 100%;
    background-position: left center;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 40px;
    border-bottom: 2px solid rgba(244,243,240,.8);
    width: 100%;
}
.nav-container h2{
  display: none;
}
.nav-ul{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0;
}
.nav-li{
  list-style: none;
  /* margin: 0 50px; */
  padding: 5px 0;
}
.nav-link{
    font-size: 1.125rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 5.29px;
}
.nav-link.active{
    font-size: 1.125rem;
    font-weight: 700;
    color: rgba(244,243,240,.8);
    position: relative;
}
.nav-link.active::after{
    /* content: ''; */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 16px solid rgba(244,243,240,.8);
}
.nav-link:hover{
    font-weight: 700;
    color: #163d68;
}
#navIcon {
  width: 40px;
  height: 40px;
  position: absolute;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  /* border: 1px solid rgba(244,243,240,.8); */
  /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), 0 0px 5px rgba(0, 0, 0, 0.15); */
  top: 50%;
  left: 15px;
  z-index: 999;
  border-radius: 5px;
  display: none;
  transform: translateY(-50%);
  /* background-color: #8c0c35; */
}
#navIcon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 25px;
  background: rgba(244,243,240,.8);
  border-radius: 9px;
  opacity: 1;
  left: 0;
  margin: 0 auto;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
#navIcon span:nth-child(1) {
  top: 12px;
}
#navIcon span:nth-child(2) {
  top: 19px;
}
#navIcon span:nth-child(3) {
  top: 26px;
}
.navIsActive #navIcon span:nth-child(1) {
  top: 19px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.navIsActive #navIcon span:nth-child(2) {
  opacity: 0;
  left: -60px;
}
.navIsActive #navIcon span:nth-child(3) {
  top: 19px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.device-posters{
  display: none;
  padding: 0 30px;
}

/* Home page */

.slider-container {
    margin: 0;
  }
  .slider-container > div {
    /*padding-bottom: 20px;*/
    width: 100%;
    /* max-width: 45.26vw; */
    margin: 0 auto;
  }
  .gallery-img img {
    max-width: 100%;
  }
  .subheading-text {
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3.97px;
    color: #FFFFFF;
    padding: 2em 0 0;
    text-align: center;
  }
#closeGalleryOverlay{
    position: absolute;
    top: -10%;
    right: 2%;
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    background: rgba(28, 28, 28, 0.5);
    width: 40px;
    height: 40px;
    line-height: 1;
    text-align: center;
    border-radius: 50%;
    /* border: 1px solid #ffffff; */
}

  /* / Slider / */


  .slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }
  .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  .slick-list:focus {
    outline: none;
  }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand;
  }
  .slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .slick-track:before, .slick-track:after {
    display: table;
    content: "";
  }
  .slick-track:after {
    clear: both;
  }
  .slick-loading .slick-track {
    visibility: hidden;
  }
  .slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    padding: 0px;
  }
  [dir="rtl"] .slick-slide {
    float: right;
  }
  .slick-slide img {
    display: block;
    margin: 0 auto;
    /*max-height: calc(100vh - 140px);*/
  }
  .slick-slide.slick-loading img {
    display: none;
  }
  .slick-slide.dragging img {
    pointer-events: none;
  }
  .slick-initialized .slick-slide {
    display: block;
  }
  .slick-initialized .slick-slide > div {
    display: flex;
  }
  .slick-loading .slick-slide {
    visibility: hidden;
  }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
    display: none;
  }
  .slick-slider button {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  .slick-slider .slide-arrow {
    position: absolute;
    bottom: 20px;
    transform: translate(-50%, 50%);
  }
  .slick-slider .slide-arrow img {
    height: 15px;
  }
  .photo-gallery.bg-pink .slick-slider .slide-arrow img{
    filter: none;
  }
  .slick-slider .prev-arrow {
    left: 44%;
    /*  width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 20px solid #ffffff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;*/
    z-index: 10;
  }
  .slick-slider .next-arrow {
    right: 43%;
    /*  width: 0;
    height: 0;
    border-right: 0 solid transparent;
    border-left: 20px solid #ffffff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;*/
  }
.slide-arrow.slick-arrow.slick-disabled{
    opacity: .3;
    cursor: not-allowed;
}
.slick-dots{
    display: flex !important;
    align-items: center;
    list-style: none;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
}
li[role='presentation']{
    margin: 0 10px;
}
li[role='presentation'] button{
    border: 1px solid #ffffff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    font-size: 0;
    overflow: hidden;
}
li[role='presentation'].slick-active button{
    background-color: #ffffff;
}

/* home page */

.banners-section .row{
  justify-content: space-between;
}
.banners-section .col-lg-2.col-6{
  max-width: 16%;
}
.banner{
    text-align: center;
    position: relative;
    margin: 1rem 0;
}
.banner-text-wrapper{
    opacity: 0;
    margin-top: 5px;
    transition: 0.3s all ease-in-out;
}
.banner:hover .banner-img{
    scale: 1.1;
    transform: translateY(-10%);
}
.banner:hover .banner-text-wrapper{
    opacity: 1;
}
.banner-img{
    transition: 0.3s all ease-in-out;
}
.banner-img-wrapper a:hover .banner-img{
    scale: 1.1;
    transform: translateY(-10%);
}

/* home second slider */

#verticalBannerSlider .slide-arrow{
    bottom: 50%;
    transform: translate(-50%, 50%);
}
#verticalBannerSlider .slide-arrow.prev-arrow{
    left: 5%;
}
#verticalBannerSlider .slide-arrow.next-arrow{
    right: 3%;
}
.banner-text{
    font-size: 14px;
    text-transform: uppercase;
}

.mobile-view{
    display: none;
}

.section__subheading{
  font-size: 25px;
  font-weight: 500;
  text-align: center;
}

/* conversations */
.TTWithQuotes{
	display:none;
}
.TTWithSocialLinks{
	display:none;
}
.movie-tt{
  margin-bottom: 1.5rem;
  /* max-width: 70%; */
}
.social-link-wrapper{
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 1rem 0;
  gap: 10px;
}
.social-link-wrapper .movie-tt{
  max-width: 55%;
  margin-bottom: 0;
}
.social-link-icon{
  max-width: 1.5rem;
}

.social-link-mobile-view{
	    padding: 0 0 .5rem 0 !important;
}
#videoSection .conversations-thumb{
  width: 100%;
  margin: 2rem 0 0;
  display: none;
  background: hsl(0deg 0% 0% / 50%);
  /* background: #161616; */
  padding: 1rem;
}
#videoSection .conversations-thumb .row{
  flex-wrap: nowrap;
  overflow-x: auto;
}
.conversations-thumb{
  width: 100%;
}
#videoSliderNav{
  gap: 2.5rem;
}
.videosSection__sliderNavItem{
  padding-inline: 0 !important;
}


#siteBg{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  z-index: -1;
}
/*
.conversations-Bg{
  background: url(../images/conversations/bg.jpg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 120%;
}

.screening-Bg{
  background: url(../images/screening/bg.jpg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 120%;
}
.gallery-Bg{
  background: url(../images/gallery/bg.jpg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 120%;
}

.read-Bg{
  background: url(../images/read/bg.jpg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 120%;
}

.listen-Bg{
  background: url(../images/listen/bg.jpg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 120%;
}

.accolades-Bg{
  background: url(../images/accolades/bg.jpg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 120%;
}

.credits-Bg{
  background: url(../images/FYC_Credits/bg.jpg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 120%;
}

.guild-pass-Bg{
  background: url(../images/guild_pass/bg.jpg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 120%;
}*/
 /* Video Section */

.section-container{
    padding: 0 15px;
    position: relative;
    z-index: 8;
    max-width: 90vw;
    margin: 0 auto;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
}
.section-container >h2 {
    font-size: 2.5em;
    text-align: center;
    color: #ffffff;
    margin: 8vh 0;
    font-weight: bold;
}
.section-container .row{
  width: 100%;
  /* margin: 0; */
}
.section-container h2 img{
    max-width: 800px;
    width: 90%;
}

.video-content-wrapper{
    width: 100%;
}
.video-holder video{
    max-width: 100%;
}

/* YT VIDEO */


.yt-video-box, .video-holder{
    width: 70%;
    margin: 0 auto;
}

.videoSectionSAPage .video-holder{
    width: 100%;
    margin: 0 auto;
}

.yt-video-wrapper {
    float: none;
    clear: both;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    width: 100%;
}
.videoSectionSAPage .yt-video-outer{
  margin-top: 0px;
}

.yt-video-outer{
  margin-top: -25px;
}
.yt-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.video-side-content{
    display: flex;
    justify-content: flex-start;
    align-items: end;
    height: 100%;
    margin-top: 1rem;
}
.video-side-content h2{
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 600;
}
.video-side-content p{
    font-size: 18px;
    font-weight: 400;
}
.thumb_play_btn{
    position: absolute;
    width: 22%;
    height: auto;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}
.button{
    display: inline-block;
    /* background: linear-gradient(#ffffff, rgba(244,243,240,.8)); */
    background: rgba(244,243,240,.8);
    border: 1px solid rgba(244,243,240,.8);
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    color: #000000;
    text-transform: uppercase;
    width: auto;
    min-width: 150px;
    text-align: center;
    transition: 0.3s all ease-in-out;
    cursor: pointer;
}
.button:hover{
    scale: 1.1;
    background: #163d68;
    border-color: #163d68;
    color: #000000;
}

/* SCREENING PAGE */

.cites-wrapper{
  width: 100%;
}
.cites-wrapper .row .col-lg-6{
  display: flex;
}
.accordion#cityList{
  width: 90%;
  margin: 0 auto;
}
.accordion-item{
  background-color: transparent;
  color: #ffffff;
  border: 0;
}
.accordion-header{
  border: 0;
}
.accordion-header:has(> .accordion-button.collapsed) {
  border-bottom: 1px solid #ffffff;
}
.accordion-button:not(.collapsed){
  padding-bottom: 5px !important;
}
.accolades-content .accordion-button:not(.collapsed){
  padding-bottom: 1.00rem !important;
} 
.accordion-collapse{
margin-bottom: 0.5rem;
}
.accordion-button, .accordion-item:first-of-type .accordion-button, .accordion-button:not(.collapsed){
  background-color: transparent;
  border: 0;
  box-shadow: none;
  color: #ffffff;
}
.accordion-button{
  display: inline;
  font-size: 30px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 0;
  width: auto;
  padding-left: 0;
  padding-right: 40px;
}
.accordion-button::after{
  position: absolute;
  right: -10px;
  top: 23px;
  rotate: 270deg;
  filter: brightness(0) invert(1);
  scale: 1.3;
  transition: 0.3s all ease-in-out;
}
.accordion-button:not(.collapsed)::after{
  rotate: 180deg;
  top: 20px;
}
.accordion-button:focus{
  border: 0;
  box-shadow: none;
}
.accordion-body{
  padding: 0;
}
.event{
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(244,243,240,.8);
  text-align: center;
  width: 100%;
  margin: 0 0 20px 0;
}
.day{
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
}
.date-time{
  font-size: 43px;
  line-height: 1;
  margin-bottom: 10px;
}
.date-time span{
  font-weight: 700;
}
.date-time span:last-child{
  font-size: 38px;
  font-weight: 500;
}
.event-text{
  font-size: 26px;
  font-weight: 400;
  /*text-transform: uppercase;*/
  margin: 10px 0;
}
.event-sub-text{
  font-size: 16px;
  font-weight: 400;
  color: #999999;
  text-transform: uppercase;
  line-height: 1;
}
.names{
  font-size: 26px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.event .button{
  display: inline-block;
  background:  rgba(244,243,240,.8);
  padding: 10px;
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
  color: #000000;
  text-transform: uppercase;
  width: auto;
  /* min-width: 150px; */
  text-align: center;
  margin-top: 20px;
}

#screeningSection{
  position: relative;
}
.screening-form-overlay{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 99999999;
}
.screening-form-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.screening-form{
  max-height: 90vh;
  width: 80%;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 20px;
  position: relative;
}
#closeScreeningOverlayBtn{
  position: absolute;
  right: 3%;
  top: 3%;
}
input.form-control, .form-select, .form-check-label{
  background-color: transparent;
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
}
input.form-control:focus, .form-select:focus{
  color: #ffffff;
  background-color: transparent;
  box-shadow: none;
  border: 1px solid #ffffff;
}
.form-select option{
  color: #000000;
}
.form-label{
  font-size: 20px;
  font-weight: 700;
} 


/* Gallery section */

#gallerySection{
  position: relative;
}
.gallery-thumb-img-wrapper{
  border: 1px solid #999999;
  transition: 0.3s all ease-in-out;
}
.gallery-thumb-img{
  cursor: pointer;
}
.gallery-thumb-img-wrapper:hover{
  scale: 1.05;
}
.gallery-slider-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  z-index: 15;
}
.gallery-slider-overlay .section-container{
  flex-direction: row;
  min-height: 100vh;
  max-width: auto;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.gallery-slider-overlay-wrapper{
  margin: 0 auto;
  width: 65%;
}
#gallerySliderOverlay .gallery-slider-overlay-wrapper{
  /* width: 75%; */
}
.gallery-slider-overlay .gallery-slider{
  position: relative;
}
#gallerySliderOverlay .gallery-img img{
  padding: 0 1rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
#gallerySliderOverlay .slick-arrow{
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  /* background: #000000;
  border-radius: 50%;
  padding: 10px;
  border: 1px solid #ffffff; */
}
#gallerySliderOverlay .slick-arrow.prev-arrow{
  left: -10%;
}
#gallerySliderOverlay .slick-arrow.next-arrow{
  right: -10%;
}
#gallerySliderOverlay .slick-slider .slide-arrow img{
  height: 25px;
}
/* LISTEN PAGE */

.listenSlider__item{
  display: flex;
}
.listen{
  border: 1px solid rgba(244,243,240,.8);
  background-color: rgba(0, 0, 0, 0.5);
  /* min-height: 47vh; */
  width: 100%;
}
.listen-audio-wrapper{
  background-color: #222222;
  width: 100%;
  padding: 10px;
  position: relative;
}
#listenSection .section-container .row, #videoSection .section-container .row{
  margin: 0;
}
.audio-player{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.audio-play-button{
  width: 10%;
  text-align: center;
  padding: 0 5px;
}
.audio-play-button img, .minus-10-sec img, .audio-volume-button img{
  cursor: pointer;
}
.audio-volume-button{
  width: 10%;
  text-align: center;
  padding: 0 5px;
}

.minus-10-sec{
  width: 10%;
  text-align: center;
  padding: 0 5px;
}
.audio-timeline{
  width: 40%;
}
.audio-volume-button{
  width: 10%;
}
.audio-volume-level{
  width: 15%;
}
.listen-audio{
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
  object-fit: contain;
}
.listen-details{
  padding: 20px;
}
.audio-name{
  font-size: 30px;
  font-weight: 500;    
  line-height: normal;
  margin-bottom: 1rem;
}
.audio-text{
  color: #ffffff;
  font-size: 16px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 10px;
}
.audio-text span{
  color: #ffffff;
  font-size: 12px;
}
input.audio[type=range] {
  height: 10px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  background-color: #4e4e4e;
  cursor: pointer;
}
input.audio[type=range]:focus {
  outline: none;
}
input.audio[type=range]::-webkit-slider-runnable-track {
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: #4e4e4e;
  /* border-radius: 5px; */
}
input.audio[type=range]::-webkit-slider-thumb {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3px;
  box-shadow: -80px 0px 80px #ffffff;
}
/* input.audio[type=range]:focus::-webkit-slider-runnable-track {
  background: #ffffff;
} */
input.audio[type=range]::-moz-range-track {
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: #4e4e4e;
  /* border-radius: 5px; */
}
input.audio[type=range]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
}
input.audio[type=range]::-ms-track {
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input.audio[type=range]::-ms-fill-lower {
  background: #ffffff;
  border-radius: 10px;
}
input.audio[type=range]::-ms-fill-upper {
  background: #4e4e4e;
  border-radius: 10px;
}
input.audio[type=range]::-ms-thumb {
  margin-top: 1px;
  height: 30px;
  width: 15px;
  border-radius: 5px;
  background: #FFFFFF;
  cursor: pointer;
}
input.audio[type=range]:focus::-ms-fill-lower {
  background: #ffffff;
}
input.audio[type=range]:focus::-ms-fill-upper {
  background: #4e4e4e;
}

.section-heading{
  /* display: flex; */
  /* align-items: center; */
  width: 100%;
  margin-bottom: 20px;
}
.section-heading h3{
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  margin-right: 10px;
  margin-bottom: 1rem;
}
.section-heading .heading-line{
  flex-grow: 1;
  border-bottom: 1px solid rgba(244,243,240,.8);
  margin-bottom: 8px;
}


/* READ SECTION */

.card {
  background-color: transparent;
  color: #ffffff;
  border: 0;
  margin: 10px 0;
}
#readSection .card-img-top{
  border: 1px solid #999999;
  cursor: pointer;
}
.card-body{
  padding: 10px 0 0;
}
.card-title{
  font-size: 18px;
  font-weight: 600;
}
.card-text{
  font-size: 16px;
  font-weight: 300;
}
#readSection .section-container> div{
  width: 100%;
}
/* CREDITS PAGE */

.movie-synopsis{
  width: 75%;
  margin: 0 auto 3rem;
}
.movie-synopsis p{
  text-align: center;
  font-weight: 600;
  font-size: 18px;
}
.credits-wrapper, .accolades-wrapper{
  width: 100%;
  margin: 0 auto;
}
.section-center-heading h3{
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 20px;
  text-align: center;
}
.section-center-heading{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-center-heading-line{
  height: 1px;
  background-color: rgba(244,243,240,.8);
  flex-grow: 1;
}
.category-name{
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}
.category-sub-title{
  font-weight: 500;
  line-height: 1.2;
}
.category-person-names{
  color: #999999;
  font-size: 16px;
  font-weight: 500;
  /*text-transform: uppercase;*/
  line-height: 1.2;
}
.category-person-names span{
  font-size: 14px;
}
/* READ SECTION */
#readSection .row{
  margin: 0;
}


/* Accolades */

.accolades-wrapper .accordion-button sup{
  font-size: 0.8rem;
  vertical-align: super;
  top: 0;
}
.accolades-wrapper .accordion-header{
  margin-bottom: 0.2rem;
}
.accolades-wrapper .accordion-header:has(> .accordion-button.collapsed){
  border: 0;
}
#guildPassSection .section-container{
  align-items: start;
}
.guild-pass-wrapper{
  width: 100%;
}

/* Guild Pass */

.theater-name{
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-position: under;
  margin-top: 1.5rem;
}
#guildPassSection .category-name{
  margin-top: 0.6rem;
}
 /******* FOOTER ********/

 footer{
    background-color: rgba(0, 0, 0, 1);
    padding: 10px 25px;    
    border-top: 2px solid rgba(244,243,240,.8);
	position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    }
    .footer-wrapper{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        font-size: 10px;
    }
    footer a{
        text-decoration: none;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 500;
        text-transform: uppercase;
        transition: color 0.2s ease-in-out;
    }
    footer a:hover{
        color: #163d68;
    }
    .legal {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .footer-logo{
        width: auto;
    }
    .footer-logo img{
        height: 20px;
        width: auto;
        opacity: 0.8;
    }
    footer p{
        color: rgba(255, 255, 255, 0.8);
        margin: 0 0 0 10px;
    }
/* Jyoti */
/*homepage*/
.slider-preloader{
	    width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;
}
.slider-preloader span{
display: flex !important;
    align-items: center;
    list-style: none;
    position: absolute;
    left: 50%;
	top:50%;
    bottom: 0;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
}
.top-horizontal-banner-img{    
 width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.top-horizontal-banner-img .img-fluid{
    display: block;
    margin: 0 auto;
}
.slick-slide{
	position:relative;
}

.landingMovietitle img{
	cursor:pointer;
}

/*Video**/
.video_box_wrapper{
  background: var(--lg-bg-2);
  border: 1px solid var(--lg-line);
}

.video-holder{
	display:none;
}
video:-webkit-full-screen {
   width: 100%;
   height: 100%;
   max-height: 100%;
}
#videoSlider .jwplayer, .jw-error,.videoSlider .jwplayer, .jw-error{
    display: inline-block !important;
    vertical-align: baseline;
}
#html-video1{
    aspect-ratio: 16/9 !important;
    width: 100% !important;
    height: auto !important;
}
.html-video1-macfix{
	position:fixed;	
}
.animsition-overlay-mac-fs {
  -webkit-animation-fill-mode: none;
          animation-fill-mode: none;
}
.video, #ytplayer, .vimeo-player ,#html-video1{
  height: 100%;
  border: 0;
}
.yt-video{
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
#ytplayer,#yt_player_iframe_click {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    position: absolute;
}

#yt_player_iframe_click  {
	z-index:9999;
	display:none;
}
.vimeo-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*Video**/
.nav-right a{
	cursor:pointer;
}

#videoSliderNav .card-img-top{
  border: 1px solid transparent;
  cursor: pointer;
}

#videoSliderNav .card-img-top.active{
  border-color: #ffffff;
}

.videoSectionSAPage{
	max-width: 1280px;
    margin: auto;    
	padding-bottom: 1rem !important;
    padding-top: 1rem !important;
}

.videoSectionSAPage #videoHolder{    
	margin-bottom: 0rem !important;
}
/************* RSVP Form Start******************/
#loginScreen,
#rsvpScreen,
#ageGateRestrict {
  display: none;
  margin-bottom: 10px;
}
#agegateContainer {
  display: none !important;
}
#loginScreen {
  text-align: center;
}
#loginScreen.form-group label {
  margin: 0;
}
#agegateContainer{
	display:none;
}
.submitStatus{
	text-align:center;
    font-weight: bold;
}

    h2 img.movie-tt{
        max-width: 580px;
    margin: 1rem 0;
    }
	
.screeningsdetails p {
	margin:0px;
}	
/* listen */

.music__player{
	width:100%;
}
/* LIONSGATE: .podcastlogo is used two ways — a small wrapper <div> around
   a show-icon <img> in the score/music list (should stay capped at
   100px), and directly as the class on the full-size podcast card
   thumbnail <img class="card-img-top podcastlogo"> on the Videos tab
   (should fill the card like every other thumbnail). The old
   unscoped rule capped BOTH to 100px, shrinking podcast cards down to
   a tiny logo in the corner of an otherwise empty card. */
div.podcastlogo{
	max-width: 100px;
    margin-bottom: 5px;
}
.podcastlogo img{
	width:100%;
}
.podcastplaybtn a{
	color: rgba(244,243,240,.8);
    text-transform: uppercase;
	cursor:pointer;
	text-decoration:none;
}

.text_align_center{
	text-align:center;
}

.listen-wrapper{
	width:100%;
}
/* listen */
.headlineSectionSAPage{    
	max-width: 1240px;
    margin: auto;    
	padding-bottom: 2rem !important;
    padding-top: 2rem !important;
}
.headlineSectionSAPage .headlinethumb{
	width:100%;
}
.headlineSectionSAPage .video-holder{
	cursor:pointer;	
}
.headlineSectionSAPage .headline_item{
	margin: 20px auto;
}

.headlineSectionSAPage .mb-5{  
    margin-bottom: 0rem !important;
}

/*update*/

.form-control:disabled{
	background-color: transparent;
    opacity: 1;
}
.form-select:disabled {
    background-color: transparent;
    opacity: 1;
}

.updatePage .event{
	background-color: transparent;
	border: none;
}

#onlySuccessMsg{
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 25px;
    color: #ffffff;
    padding-bottom: 35px;
    text-decoration: none;
    display: none;
    text-align: center;
}
#showMsg{
	    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 25px;
    color: #FFFFFF;
    padding-bottom: 35px;
    text-decoration: none;
	display:none;
}

.page-subheading{
	font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 20px 20px;
    text-align: center;
}
.updatePage .section{
	    padding: 0 0 1rem 0;    
		margin-bottom: 0px !important;
}
	
.updatePageNav li{
	    margin: auto 10px;
}
.updatePageNav .active{
	background: #000000;
    color: rgba(244,243,240,.8);
    pointer-events: none;
}

/*standalone pages*/

.headlineSectionSAPage .section-container, .videoSectionSAPage .section-container{    
	padding: 0 5em;
}

.standalone-page .top-nav{
	    background-color: rgba(28, 28, 28, 0.5);
    border-bottom: 2px solid rgba(244,243,240,.8);
}

.videoSectionSAPage .section__heading{
	margin: 0.2em 0 0.7em 0;
	font-size: 1.2rem;
}
.videoSectionSAPage .section__heading .heading_style_reels{
    text-decoration: underline;
    text-underline-position: under;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: rgba(244,243,240,.8);
}
/* Jyoti */


.top-horizontal-banner-slider .loader-wrapper{
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  width: 50px;
  aspect-ratio: 1;
  display:grid;
  -webkit-mask: conic-gradient(from 15deg,#0000,#000);
  animation: l26 1s infinite steps(12);
}
.loader,
.loader:before,
.loader:after{
  background:
    radial-gradient(closest-side at 50% 12.5%,
     #ffffff 96%,#0000) 50% 0/20% 80% repeat-y,
    radial-gradient(closest-side at 12.5% 50%,
     #ffffff 96%,#0000) 0 50%/80% 20% repeat-x;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  transform: rotate(30deg);
}
.loader:after {
  transform: rotate(60deg);
}

@keyframes l26 {
  100% {transform:rotate(1turn)}
}

@media screen and (max-width: 1760px) {
  .slick-slider .prev-arrow{
    left: 43%;
  }
  .slick-slider .next-arrow{
    right: 42%;
  }
  .banner-text{
    font-size: 12px;
  }
  /* .listen{
      min-height: 57vh;
  } */
}
@media screen and (max-width: 1680px) {
  .nav-link{
    font-size: 14px;
  }
  .nav-link.active{
      font-size: 16px;
  }
  .video-side-content h2{
      font-size: 28px;
  }
  .video-side-content p, .card-title, .movie-synopsis p{
      font-size: 16px;
  }
  .card-text, .category-name, .category-person-names, .category-sub-title{
      font-size: 14px;
  }
  .category-person-names span{
	font-size: 12px;
  }
  .button{
      font-size: 16px;
  }
  .section-heading h3, .section-center-heading h3{
    font-size: 34px;
  }
  .accolades-wrapper .accordion-button sup{
    font-size: 0.6rem;
  }
  .date-time{
      font-size: 38px;
  }
  .date-time span:last-child{
      font-size: 30px;
  }
  .event-sub-text, .event .button{
      font-size: 16px;
  }
}
@media screen and (max-width: 1600px) {
  .top-nav{
    font-size: 14px;
  }
  .nav-link{
    font-size: 14px;
  }
  .nav-link.active{
      font-size: 16px;
  }
  .video-side-content h2{
      font-size: 22px;
  }
  .video-side-content p, .card-title, .movie-synopsis p{
      font-size: 16px;
  }
  .card-text, .category-name, .category-person-names, .category-sub-title{
      font-size: 14px;
  }
    .category-person-names span{
	font-size: 12px;
  }
  .button{
      font-size: 14px;
  }
  .section-heading h3, .section-center-heading h3{
    font-size: 30px;
  }
  .accolades-wrapper .accordion-button sup{
    font-size: 0.5rem;
  }
  /* .date-time{
      font-size: 44px;
  }
  .date-time span:last-child{
      font-size: 35px;
  } */
  .event-sub-text, .event .button{
      font-size: 16px;
  }
  .audio-name{
      font-size: 26px;
  }
  /* .listen{
      min-height: 60vh;
  } */
}
.clamp-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  /* Optional: text-overflow: ellipsis; is sometimes included, 
     but -webkit-line-clamp usually handles the ellipsis. */
}
@media screen and (max-width: 1366px) {
  .section-container{
    padding: 0 15px;
  }
  .top-nav{
    font-size: 12px;
  }
  .nav-link{
    font-size: 12px;
  }
  .nav-link.active{
      font-size: 14px;
  }
  .video-side-content h2{
      font-size: 18px;
  }
  .video-side-content p, .card-title{
      font-size: 12px;
  }
  .card-text, .category-name, .category-person-names, .category-sub-title{
      font-size: 12px;
  }
    .category-person-names span{
	font-size: 10px;
  }
  .section__subheading{
      font-size: 20px;
  }
  .screeningInfo__boxDesc{
      font-size: 16px;
  }
  .button{
      font-size: 14px;
  }
  .section-heading h3, .section-center-heading h3{
    font-size: 28px;
  }
  .day, .event-text, .names{
      font-size: 18px;
  }
  .names{
      margin-bottom: 15px;
  }
  .date-time{
      font-size:32px;
  }
  .date-time span:last-child{
      font-size: 24px;
  }
  .event-sub-text{
      font-size: 14px;
  }
  .audio-name{
      font-size: 22px;
  }
  .audio-text{
      font-size: 12px;
  }
  .audio-text span{
      font-size: 10px;
  }
  .footer-wrapper{
      font-size: 10px;
  }
  .slick-slider .prev-arrow{
    left: 42%;
  }
  .slick-slider .next-arrow{
    right: 41%;
  }
  /* .listen{
      min-height: 20vh;
  } */
  .listen-Bg{
    background-position: top 20% center;
  }
  .headlineSectionSAPage .section-container, .videoSectionSAPage .section-container {
    padding: 0 2em;
}
}
@media screen and (max-width: 1366px) and (min-height: 900px) and (orientation: landscape){
  .conversations-Bg{
    background-position: 40% top;
  }
}
@media screen and (max-width:1366px) and (max-height: 768px) {
    /* .listen{
        min-height: 65vh;
    } */
}

@media screen and (max-width: 1280px) {
  .nav-link{
    letter-spacing: 1.32px;
  }
  .slick-slider .prev-arrow{
    left: 41%;
  }
  .slick-slider .next-arrow{
    right: 40%;
  }
  .date-time{
      font-size: 27px;
  }
  .date-time span:last-child{
      font-size: 16px;
  }
  .footer-wrapper{
      font-size: 8px;
  }
}
@media screen and (max-width: 1280px) and (max-height: 1024px){
  .conversations-Bg{
    background-position: 70% top;
  }
  .screening-Bg{
    background-position: 80% top;
  }
  .listen-Bg{
    background-position: top 40% center;
    background-size: auto 100%;
  }
  .guild-pass-Bg{
    background-position: 80% top;
  }
  .accolades-Bg{
    background-position: 60% top;
  }
  .section-container{
      max-width: 95%;
  }
}
@media screen and (max-width: 1280px) and (min-height: 800px) {
    /* .listen{
        min-height: 31vh;
    } */
}
@media screen and (max-width: 1280px) and (max-height: 720px){
  .conversations-Bg{
    background-position: top left;
  }
  .section-container{
      max-width: 95%;
  }
  .event-sub-text{
      font-size: 12px;
  }
  .accordion-button{
      font-size: 20px;
  }
  .accordion-button::after{
      top:18px;
  }
  .accordion-button:not(.collapsed)::after{
      top:16px;
  }
  .listen-Bg{
    background-position: top center;
    background-size: auto 150%;
  }
  /* .listen{
      min-height: 47vh;
  } */
}
@media screen and (max-width: 1024px) {
  .conversations-Bg{
    background-position: 40% top;
  }
  .top-nav{
    font-size: 10px;
  }
  .nav-link{
    font-size: 10px;
    letter-spacing: 2.64px;
  }
  .nav-link.active{
      font-size: 12px;
  }
  .video-side-content h2{
      font-size: 16px;
  }
  .video-side-content p, .card-title, .movie-synopsis p{
      font-size: 12px;
  }
  .card-text, .category-name, .category-person-names, .category-sub-title{
      font-size: 10px;
  }  
  .category-person-names span{
	font-size: 8px;
  }
  .section-center-heading h3 {
    width: 100%;
  }
  .button{
      font-size: 12px;
      min-width: 100px;
  }
  .section-heading h3, .section-center-heading h3{
    font-size: 22px;
  }
  .day, .event-text, .names{
      font-size: 14px;
  }
  .names{
      margin-bottom: 15px;
  }
  .date-time{
      font-size: 24px;
  }
  .date-time span:last-child{
      font-size: 16px;
  }
  .event-sub-text{
      font-size: 10px;
  }
  .audio-name{
      font-size: 16px;
  }
  .audio-play-button, .minus-10-sec, .audio-volume-button{
      padding: 0;
  }
  .footer-wrapper{
      font-size: 8px;
  }
  .banner .banner-text-wrapper{
    opacity: 1;
  }
  .slick-slider .prev-arrow{
    left: 39%;
  }
  .slick-slider .next-arrow{
    right: 37%;
  }
  /* .listen{
      min-height: 35vh;
  } */
  .listen-Bg{
    background-position: top 13% center;
  }
    .section-center-heading{
        position: relative;
    }
    .section-center-heading .section-center-heading-line:last-child{
        position: absolute;
        display: block !important;
        width: 60%;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
    }
  .video-section-heading h3 {
    font-size: 1rem;
    text-align: center;
    margin-bottom: .5rem;
  }
}
@media screen and (max-width: 1024px) and (orientation: portrait){
  /*.conversations-Bg{
    background: url(../images/conversations/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
  .screening-Bg{
    background: url(../images/screening/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
  .listen-Bg{
    background: url(../images/listen/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top 40% center;
    background-size: 100% auto;
  }
  .gallery-Bg{
    background: url(../images/gallery/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
  .read-Bg{
    background: url(../images/read/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
  .accolades-Bg{
    background: url(../images/accolades/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
  .credits-Bg{
    background: url(../images/FYC_Credits/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
  .guild-pass-Bg{
    background: url(../images/guild_pass/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }*/
  /* .listen{
      min-height: 13vh;
  } */
  .gallery-thumb-img-wrapper:hover{
    scale: 1;
  }
  .yt-video-box, .video-holder{
    width: 100%;
  }
  .device-posters{
    display: block;
  }
  .desktop-posters{
    display: none;
  }
}
@media screen and (max-width: 1021px) {
  .device-posters{
    display: block;
  }
  .desktop-posters{
    display: none;
  }
}
@media screen and (width: 1368px) and (height:912px) and (orientation: landscape), screen and (width: 1366px) and (height:1024px) and (orientation: landscape)  {
    /* .listen{
        min-height: 27vh;
    } */
}
@media screen and (max-width:992px) {
    .home-page header{
      height: 86px;
    }
	header{
      height: 57px;
    }
    .desktop-view{
        display: none;
    }
    .mobile-view{
        display: block;
    }
    .header{
      position: relative;
    }
    .top-nav{
      background-color: #000000;
      margin-bottom: 0;
      padding: 5px 25px;
    }
    .lg-logo {
      height: 42px;
    }
    .window-logo{
      height: 20px;
    }
    .nav-right ul {
      display: none;
    }
    .bottom-nav{
      position: absolute;
      top: 54px;
      width: 100%;
    }
    .dropdown-nav{
      text-align: center;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .bottom-nav .btn{
        text-transform: uppercase;
        font-size: 14px;
    }
    .btn {
        color: #ffffff;
    }
    #navIcon{
      display: block;
    }
    .nav-container{
      position: absolute;
      width: 100%;
      background: rgba(28, 28, 28, 0.97);
      margin-top: 0;
      padding: 20px;
      transform: translateX(-200%);
      transition: 0.3s all ease-in-out;
      opacity: 0;
      text-align: center;
      border-bottom: 0;
  }
  

  #siteBg{
    -webkit-mask-image: none;
    -webkit-mask-composite:inherit;
    mask-image:none !important;
    mask-composite: inherit !important;
  }
  .TTWithQuotes, .TTWithSocialLinks{
    margin-top: 35vw !important;
  }
  .navIsActive .nav-container{
      transform: translateX(0);
      opacity: 1;
  }
  .nav-container h2{
      display: block;
  }
  .nav-container .movie-tt{
    max-width: 260px;
    width: 100%;
    margin: 0 auto;
  }
  .nav-ul{
      flex-direction: column;
  }
  .nav-li{
      margin: 5px 0;
  }
  .nav-link.active::after{
      display: none;
  }
  
  /* .top-nav{
    font-size: 12px;
  } */
  .nav-link{
    font-size: 12px;
    letter-spacing: 1.32px;
  }
  .nav-link.active{
      font-size: 14px;
  }
  .right-logo .dropdown-item{
    font-size: 12px;
  }
  .dropdown-nav .btn.dropdown-toggle{
    font-size: 14px;
  }
  .dropdown-nav .btn.dropdown-toggle.show{
    border: 0;
  }
  .dropdown-nav .dropdown-menu.show{
    background-color: #000000;
  }
  .dropdown-nav .dropdown-item{
    color: #ffffff;
  }
  .slider-section{
    margin-top: 0px;
  }
  .banners-section .row{
    justify-content: center;
  }
  .banners-section .col-lg-2.col-6{
    max-width: 50%;
  }
  /* #gallerySliderOverlay .slick-arrow{
    top: 110%;
  } */
  
  .social-link-wrapper .movie-tt{
    margin-top: 1rem;
  }
  #gallerySliderOverlay .slick-arrow.prev-arrow{
    left: 6%;
  }
  #gallerySliderOverlay .slick-arrow.next-arrow{
    right: 2%;
  }
  .gallery-slider-overlay-wrapper{
    width: 100%;
    /* padding-bottom: 5rem; */
  }
  #closeGalleryOverlay{
    top: -25%;
  }
  #gallerySliderOverlay .gallery-img img{
    padding: 0;
  }
  .gallery-thumb-img-wrapper{
      max-width: 100%;
      aspect-ratio: 97/85;
      overflow: hidden;
      position: relative;
      border: 1px solid #999999;
      background: #000000;
  }
  .gallery-thumb-img{
      /* was width:100% with height auto - the 16:9 source images left
         black letterbox bars top/bottom inside the wrapper's own
         97:85 aspect-ratio box; fill the box and crop instead. */
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  .gallery-thumb-img-wrapper:hover{
    scale: 1;
  }
  .quote{
    margin-top: 2rem !important;
  }

  /* title qoutes alignment */

  .quote[src="../assets/images/quote/sinners/screening/quote.png"]{
    margin-top: 70vw !important;
  }
  .quote[src="../assets/images/quote/sinners/gallery/quote.png"]{
    margin-top: 60vw !important;
  }
  .quote[src="../assets/images/quote/sinners/listen/quote.png"]{
    margin-top: 42vw !important;
  }
  .quote[src="../assets/images/quote/sinners/read/quote.png"]{
    margin-top: 52vw !important;
  }
  .quote[src="../assets/images/quote/sinners/accolades/quote.png"]{
    margin-top: 52vw !important;
    /* margin-bottom: 16vw; */
  }
  .quote[src="../assets/images/quote/sinners/credits/quote.png"]{
    margin-top: 1.2rem !important;
    margin-bottom: 65vw;
  }
  .quote[src="../assets/images/quote/sinners/guildpass/quote.png"]{
    margin-top: 52vw !important;
    /* margin-bottom: 38vw; */
  }


  .quote[src="../assets/images/quote/weapons/screening/quote.png"]{
    margin-top: 57vw !important;
  }
  .quote[src="../assets/images/quote/weapons/gallery/quote.png"]{
    margin-top: 0 !important;
    margin-bottom: 60vw;
  }
  .quote[src="../assets/images/quote/weapons/listen/quote.png"]{
    margin-bottom: 0; 
	margin-top: 40vw !important;
  }
  .quote[src="../assets/images/quote/weapons/read/quote.png"]{
    margin-top: 55vw !important;
  }
  .quote[src="../assets/images/quote/weapons/accolades/quote.png"]{
    margin-top: 60vw !important;
  }
  .quote[src="../assets/images/quote/weapons/credits/quote.png"]{
    margin-top: 60vw !important;
  }
  .quote[src="../assets/images/quote/weapons/guildpass/quote.png"]{
    margin-top: 0 !important;
    margin-bottom: 34vw;
  }


  
  .quote[src="../assets/images/quote/aminecraftmovie/screening/quote.png"]{
    margin-top: 49vw !important;
  }
  .quote[src="../assets/images/quote/aminecraftmovie/gallery/quote.png"]{
    margin-top: 50vw !important
  }
  .quote[src="../assets/images/quote/aminecraftmovie/listen/quote.png"]{
    margin-top: 30vw !important
  }
  .quote[src="../assets/images/quote/aminecraftmovie/read/quote.png"]{
    margin-top: 52vw !important;
  }
  .quote[src="../assets/images/quote/aminecraftmovie/accolades/quote.png"]{
    margin-top: 2rem !important;
    margin-bottom: 50vw;
  }
  .quote[src="../assets/images/quote/aminecraftmovie/credits/quote.png"]{
    margin-top: 2rem !important;
    margin-bottom: 50vw;
  }
  .quote[src="../assets/images/quote/aminecraftmovie/guildpass/quote.png"]{
    margin-top: 2rem !important;
    margin-bottom: 42vw;
  }



  .quote[src="../assets/images/quote/superman/screening/quote.png"]{
    margin-top: 65vw !important;
  }
  .quote[src="../assets/images/quote/superman/gallery/quote.png"]{
    margin-top: 65vw !important
  }
  .quote[src="../assets/images/quote/superman/listen/quote.png"]{
    margin-top: 44vw !important
  }
  .quote[src="../assets/images/quote/superman/read/quote.png"]{
    margin-top: 44vw !important;
  }
  .quote[src="../assets/images/quote/superman/accolades/quote.png"]{
    margin-top: 44vw !important;
  }
  .quote[src="../assets/images/quote/superman/credits/quote.png"]{
    margin-top: 44vw !important;
  }
  .quote[src="../assets/images/quote/superman/guildpass/quote.png"]{
    margin-top: 33vw !important;
    margin-bottom: 17vw;
  }


  
  .quote[src="../assets/images/quote/mickey17/screening/quote.png"]{
    margin-bottom: 40vw;
  }
  .quote[src="../assets/images/quote/mickey17/gallery/quote.png"]{
    margin-bottom: 50vw;
  }
  .quote[src="../assets/images/quote/mickey17/listen/quote.png"]{
    margin-top: 42vw !important
  }
  .quote[src="../assets/images/quote/mickey17/read/quote.png"]{
    margin-top: 48vw !important;
  }
  .quote[src="../assets/images/quote/mickey17/accolades/quote.png"]{
    margin-top: 40vw !important;
  }
  .quote[src="../assets/images/quote/mickey17/credits/quote.png"]{
    margin-top: 50vw !important;
  }
  .quote[src="../assets/images/quote/mickey17/guildpass/quote.png"]{
    margin-top: 2rem !important;
    margin-bottom: 40vw;
  }

  


  .quote[src="../assets/images/quote/onebattleafteranother/screening/quote.png"]{
    margin-top: 48vw !important;
  }
  .quote[src="../assets/images/quote/onebattleafteranother/gallery/quote.png"]{
    margin-top: 47vw !important;
    /* margin-bottom: 28vw; */
  }
  .quote[src="../assets/images/quote/onebattleafteranother/listen/quote.png"]{
    margin-top: 1.2rem !important;
    margin-bottom: 40vw;
  }
  .quote[src="../assets/images/quote/onebattleafteranother/read/quote.png"]{
    margin-top: 51vw !important;
  }
  .quote[src="../assets/images/quote/onebattleafteranother/accolades/quote.png"]{
    margin-top: 50vw !important;
    /* margin-bottom: 38vw; */
  }
  .quote[src="../assets/images/quote/onebattleafteranother/credits/quote.png"]{
    margin-top: 50vw !important;
  }
  .quote[src="../assets/images/quote/onebattleafteranother/guildpass/quote.png"]{
    margin-top: 40vw !important;
    /* margin-bottom: 32vw; */
  }






  .movie-tt[src="../assets/images/headerimages/mickey17/tt.png"]{
    max-width: 100%;
  }
  .movie-tt, .social-link-wrapper .movie-tt{
    max-width: 80%;
    margin-bottom: 0;
    margin-inline: auto;
  }
  .social-link-wrapper{
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
  }
  .section__subheading{
      font-size: 16px;
  }
  .screeningInfo__boxDesc{
      font-size: 14px;
  }
  #videoSection{
    padding-bottom: 5rem;
  }
  .video-section-heading h3 {
    font-size: .875rem !important;
  }
  .video-side-content h2{
      font-size: 18px;
  }
  .card-title, .movie-synopsis p{
      font-size: 16px;
  }
  .card-text, .category-name, .category-person-names, .category-sub-title{
      font-size: 16px;
  }  
  .category-person-names span{
	font-size: 14px;
  }
  .video-side-content p{
      font-size: 14px;
  }
  .movie-synopsis{
      width: 100%;
  }
  .button{
      font-size: 14px;
  }
  #screeningSection .section-container{
      width: 100%;
      padding: 0;
  }
  #screeningSection .section-container .row{
    margin: 0;
  }
  .section-center-heading-line{
    display: none;
  }
  /* .listen{
    min-height: 22vh;
  } */
  .accordion-button::after, .accordion-button:not(.collapsed)::after{
      top: 3px;
      right: 0;
      scale: 1;
  }
  .accordion#cityList{
    width: 100%;
  }
  .accordion-body, .cites-wrapper .col-lg-6 {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  .accordion-button {
    font-size: 16px;
    padding: 5px 25px 5px 20px;
  }
  .section-heading h3, .section-center-heading h3{
    font-size: 30px;
  }
  .section-center-heading h3{
    margin: 0;
  }
  .screening-form{
      padding-top: 5rem;
  }
  .form-label{
      font-size: 10px;
  }
  input.form-control, .form-select, .form-check-label{
      font-size: 10px;
  }
  .event{
      padding: 20px;
      width: 100%;
      border-left: 0;
      border-right: 0;
  }
  .footer-wrapper{
      font-size: 10px;
  }
  #topHorizontalBannerSlider.slick-slider .slick-arrow{
    /* display: none !important; */
    bottom: -20px;
  }
  #topHorizontalBannerSlider.slick-slider .slick-arrow.prev-arrow{
    left: 38%;
    display: none !important;
  }
  #topHorizontalBannerSlider.slick-slider .slick-arrow.next-arrow{
    right: 36%;
    display: none !important;
  }
  #topHorizontalBannerSlider.slick-slider .slick-dots{
    display: none !important;
    bottom: -40px;
  }
  li[role='presentation']{
    margin: 0 5px;
  }
  .slider-section{
    margin-bottom: 2rem;
  }
  .section-container{
    max-width: 100%;
  }
  .cites-wrapper, .section {
    margin-bottom: 70px;
  }/*
  .conversations-Bg{
    background: url(../images/conversations/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
  .screening-Bg{
    background: url(../images/screening/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
  .listen-Bg{
    background: url(../images/listen/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top 40% center;
    background-size: 100% auto;
  }
  .gallery-Bg{
    background: url(../images/gallery/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
  .read-Bg{
    background: url(../images/read/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
  .accolades-Bg{
    background: url(../images/accolades/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
  .credits-Bg{
    background: url(../images/FYC_Credits/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
  .guild-pass-Bg{
    background: url(../images/guild_pass/bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }*/
  .video-side-content{
    margin-top: 1rem;
  }
  footer {
      text-align: center;
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      z-index: 10;
      background-color: #000000;
  }
  .footer-wrapper{
    font-size: 9px;
  }
  .footer-wrapper >p{
      width: 100%;
      font-size: 7px;
      margin-bottom: .5rem;
  }
  .legal{
      justify-content: center;
      width: 100%;
  }
}
@media screen and (max-width:992px) and (orientation: portrait) {
  /* title qoutes alignment */

  .quote[src="../assets/images/quote/sinners/screening/quote.png"]{
    margin-top: 70vw !important;
  }
  .quote[src="../assets/images/quote/sinners/gallery/quote.png"]{
    margin-top: 60vw !important;
  }
  .quote[src="../assets/images/quote/sinners/listen/quote.png"]{
    margin-top: 42vw !important;
  }
  .quote[src="../assets/images/quote/sinners/read/quote.png"]{
    margin-top: 52vw !important;
  }
  .quote[src="../assets/images/quote/sinners/accolades/quote.png"]{
    margin-top: 52vw !important;
    /* margin-bottom: 16vw; */
  }
  .quote[src="../assets/images/quote/sinners/credits/quote.png"]{
    margin-top: 1.2rem !important;
    margin-bottom: 65vw;
  }
  .quote[src="../assets/images/quote/sinners/guildpass/quote.png"]{
    margin-top: 52vw !important;
    /* margin-bottom: 38vw; */
  }


  .quote[src="../assets/images/quote/weapons/screening/quote.png"]{
    margin-top: 57vw !important;
  }
  .quote[src="../assets/images/quote/weapons/gallery/quote.png"]{
    margin-top: 0 !important;
    margin-bottom: 60vw;
  }
  .quote[src="../assets/images/quote/weapons/listen/quote.png"]{
    margin-bottom: 0; 
	margin-top: 40vw !important;
  }
  .quote[src="../assets/images/quote/weapons/read/quote.png"]{
    margin-top: 55vw !important;
  }
  .quote[src="../assets/images/quote/weapons/accolades/quote.png"]{
    margin-top: 60vw !important;
  }
  .quote[src="../assets/images/quote/weapons/credits/quote.png"]{
    margin-top: 60vw !important;
  }
  .quote[src="../assets/images/quote/weapons/guildpass/quote.png"]{
    margin-top: 0 !important;
    margin-bottom: 34vw;
  }


  
  .quote[src="../assets/images/quote/aminecraftmovie/screening/quote.png"]{
    margin-top: 49vw !important;
  }
  .quote[src="../assets/images/quote/aminecraftmovie/gallery/quote.png"]{
    margin-top: 50vw !important
  }
  .quote[src="../assets/images/quote/aminecraftmovie/listen/quote.png"]{
    margin-top: 30vw !important
  }
  .quote[src="../assets/images/quote/aminecraftmovie/read/quote.png"]{
    margin-top: 52vw !important;
  }
  .quote[src="../assets/images/quote/aminecraftmovie/accolades/quote.png"]{
    margin-top: 2rem !important;
    margin-bottom: 50vw;
  }
  .quote[src="../assets/images/quote/aminecraftmovie/credits/quote.png"]{
    margin-top: 2rem !important;
    margin-bottom: 50vw;
  }
  .quote[src="../assets/images/quote/aminecraftmovie/guildpass/quote.png"]{
    margin-top: 2rem !important;
    margin-bottom: 42vw;
  }



  .quote[src="../assets/images/quote/superman/screening/quote.png"]{
    margin-top: 65vw !important;
  }
  .quote[src="../assets/images/quote/superman/gallery/quote.png"]{
    margin-top: 65vw !important
  }
  .quote[src="../assets/images/quote/superman/listen/quote.png"]{
    margin-top: 44vw !important
  }
  .quote[src="../assets/images/quote/superman/read/quote.png"]{
    margin-top: 44vw !important;
  }
  .quote[src="../assets/images/quote/superman/accolades/quote.png"]{
    margin-top: 44vw !important;
  }
  .quote[src="../assets/images/quote/superman/credits/quote.png"]{
    margin-top: 44vw !important;
  }
  .quote[src="../assets/images/quote/superman/guildpass/quote.png"]{
    margin-top: 33vw !important;
    margin-bottom: 17vw;
  }


  
  .quote[src="../assets/images/quote/mickey17/screening/quote.png"]{
    margin-bottom: 40vw;
  }
  .quote[src="../assets/images/quote/mickey17/gallery/quote.png"]{
    margin-bottom: 50vw;
  }
  .quote[src="../assets/images/quote/mickey17/listen/quote.png"]{
    margin-top: 42vw !important
  }
  .quote[src="../assets/images/quote/mickey17/read/quote.png"]{
    margin-top: 48vw !important;
  }
  .quote[src="../assets/images/quote/mickey17/accolades/quote.png"]{
    margin-top: 40vw !important;
  }
  .quote[src="../assets/images/quote/mickey17/credits/quote.png"]{
    margin-top: 50vw !important;
  }
  .quote[src="../assets/images/quote/mickey17/guildpass/quote.png"]{
    margin-top: 2rem !important;
    margin-bottom: 40vw;
  }

  


  .quote[src="../assets/images/quote/onebattleafteranother/screening/quote.png"]{
    margin-top: 48vw !important;
  }
  .quote[src="../assets/images/quote/onebattleafteranother/gallery/quote.png"]{
    margin-top: 47vw !important;
    /* margin-bottom: 28vw; */
  }
  .quote[src="../assets/images/quote/onebattleafteranother/listen/quote.png"]{
    margin-top: 1.2rem !important;
    margin-bottom: 40vw;
  }
  .quote[src="../assets/images/quote/onebattleafteranother/read/quote.png"]{
    margin-top: 51vw !important;
  }
  .quote[src="../assets/images/quote/onebattleafteranother/accolades/quote.png"]{
    margin-top: 50vw !important;
    /* margin-bottom: 38vw; */
  }
  .quote[src="../assets/images/quote/onebattleafteranother/credits/quote.png"]{
    margin-top: 50vw !important;
  }
  .quote[src="../assets/images/quote/onebattleafteranother/guildpass/quote.png"]{
    margin-top: 40vw !important;
    /* margin-bottom: 32vw; */
  }

}
@media screen and (max-width: 1023px) and (orientation: landscape) {
  
  .conversations-Bg{
    background-position: top 10% center;
  }
  .screening-Bg{
    background-position: top 30% center;
  }
  .listen-Bg{
    background-position: top 40% center;
  }
  .gallery-Bg{
    background-position: top 24% center;
  }
  .read-Bg{
    background-position: top 20% center;
  }
  .accolades-Bg{
    background-position: top 26% center;
  }
  .credits-Bg{
    background-position: top 20% center;
  }
  .guild-pass-Bg{
    background-position: top 44% center;
  }
  .gallery-slider-overlay-wrapper {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
    /* .title{
        margin: 1rem 0;
    } */
    /* .listen{
        min-height: 20vh;
    } */
    .category-name, .category-person-names, .category-sub-title, .theater-name{
        text-align: center;
    }
}
@media screen and (max-width: 650px) {
    .nav-container h2{
        text-align: right;
    }
    .screening-form h2.text-center{
        padding: 0;
    }
    .screening-form h2.text-center .movie-tt{
        width: 100%;
    }
    #topHorizontalBannerSlider.slick-slider .slick-arrow.prev-arrow{
      left: 32%;
    }
    #topHorizontalBannerSlider.slick-slider .slick-arrow.next-arrow{
      right: 30%;
    }

    
  /* title qoutes alignment */

  .quote[src="../assets/images/quote/sinners/screening/quote.png"]{
    margin-top: 52vw !important;
  }
  .quote[src="../assets/images/quote/sinners/gallery/quote.png"]{
    margin-top: 44vw !important;
  }
  .quote[src="../assets/images/quote/sinners/listen/quote.png"]{
    margin-top: 40vw !important;
  }
  .quote[src="../assets/images/quote/sinners/read/quote.png"]{
    margin-top: 48vw !important;
  }
  .quote[src="../assets/images/quote/sinners/accolades/quote.png"]{
    margin-top: 40vw !important;
    /* margin-bottom: 16vw; */
  }
  .quote[src="../assets/images/quote/sinners/credits/quote.png"]{
    margin-top: 1.2rem !important;
    margin-bottom: 42vw;
  }
  .quote[src="../assets/images/quote/sinners/guildpass/quote.png"]{
    margin-top: 47vw !important;
    /* margin-bottom: 38vw; */
  }


  .quote[src="../assets/images/quote/weapons/screening/quote.png"]{
    margin-top: 47vw !important;
  }
  .quote[src="../assets/images/quote/weapons/gallery/quote.png"]{
    margin-top: 0 !important;
    margin-bottom: 40vw;
  }
  .quote[src="../assets/images/quote/weapons/listen/quote.png"]{
    margin-bottom: 0; 
	margin-top: 32vw !important;
  }
  .quote[src="../assets/images/quote/weapons/read/quote.png"]{
    margin-top: 44vw !important;
  }
  .quote[src="../assets/images/quote/weapons/accolades/quote.png"]{
    margin-top: 55vw !important;
  }
  .quote[src="../assets/images/quote/weapons/credits/quote.png"]{
    margin-top: 50vw !important;
  }
  .quote[src="../assets/images/quote/weapons/guildpass/quote.png"]{
    margin-top: 0 !important;
    margin-bottom: 45vw;
  }


  
  .quote[src="../assets/images/quote/aminecraftmovie/screening/quote.png"]{
    margin-top: 45vw !important;
  }
  .quote[src="../assets/images/quote/aminecraftmovie/gallery/quote.png"]{
    margin-top: 35vw !important
  }
  .quote[src="../assets/images/quote/aminecraftmovie/listen/quote.png"]{
    margin-top: 30vw !important
  }
  .quote[src="../assets/images/quote/aminecraftmovie/read/quote.png"]{
    margin-top: 40vw !important;
  }
  .quote[src="../assets/images/quote/aminecraftmovie/accolades/quote.png"]{
    margin-top: 2rem !important;
    margin-bottom: 25vw;
  }
  .quote[src="../assets/images/quote/aminecraftmovie/credits/quote.png"]{
    margin-top: 2rem !important;
    margin-bottom: 25vw;
  }
  .quote[src="../assets/images/quote/aminecraftmovie/guildpass/quote.png"]{
    margin-top: 2rem !important;
    margin-bottom: 30vw;
  }



  .quote[src="../assets/images/quote/superman/screening/quote.png"]{
    margin-top: 44vw !important;
  }
  .quote[src="../assets/images/quote/superman/gallery/quote.png"]{
    margin-top: 58vw !important
  }
  .quote[src="../assets/images/quote/superman/listen/quote.png"]{
    margin-top: 44vw !important
  }
  .quote[src="../assets/images/quote/superman/read/quote.png"]{
    margin-top: 44vw !important;
  }
  .quote[src="../assets/images/quote/superman/accolades/quote.png"]{
    margin-top: 44vw !important;
  }
  .quote[src="../assets/images/quote/superman/credits/quote.png"]{
    margin-top: 44vw !important;
  }
  .quote[src="../assets/images/quote/superman/guildpass/quote.png"]{
    margin-top: 33vw !important;
    margin-bottom: 17vw;
  }


  
  .quote[src="../assets/images/quote/mickey17/screening/quote.png"]{
    margin-bottom: 22vw;
  }
  .quote[src="../assets/images/quote/mickey17/gallery/quote.png"]{
    margin-bottom: 22vw;
  }
  .quote[src="../assets/images/quote/mickey17/listen/quote.png"]{
    margin-top: 35vw !important
  }
  .quote[src="../assets/images/quote/mickey17/read/quote.png"]{
    margin-top: 35vw !important;
  }
  .quote[src="../assets/images/quote/mickey17/accolades/quote.png"]{
    margin-top: 30vw !important;
  }
  .quote[src="../assets/images/quote/mickey17/credits/quote.png"]{
    margin-top: 35vw !important;
  }
  .quote[src="../assets/images/quote/mickey17/guildpass/quote.png"]{
    margin-top: 2rem !important;
    margin-bottom: 24vw;
  }

  


  .quote[src="../assets/images/quote/onebattleafteranother/screening/quote.png"]{
    margin-top: 40vw !important;
  }
  .quote[src="../assets/images/quote/onebattleafteranother/gallery/quote.png"]{
    margin-top: 42vw !important;
    /* margin-bottom: 28vw; */
  }
  .quote[src="../assets/images/quote/onebattleafteranother/listen/quote.png"]{
    margin-top: 1.2rem !important;
    margin-bottom: 27vw;
  }
  .quote[src="../assets/images/quote/onebattleafteranother/read/quote.png"]{
    margin-top: 38vw !important;
  }
  .quote[src="../assets/images/quote/onebattleafteranother/accolades/quote.png"]{
    margin-top: 40vw !important;
    /* margin-bottom: 38vw; */
  }
  .quote[src="../assets/images/quote/onebattleafteranother/credits/quote.png"]{
    margin-top: 35vw !important;
  }
  .quote[src="../assets/images/quote/onebattleafteranother/guildpass/quote.png"]{
    margin-top: 37vw !important;
    /* margin-bottom: 32vw; */
  }
}
@media screen and (max-width: 575px) {
  .nav-left-text{
    font-size: .75rem;
  }
    .category-name, .category-person-names, .category-sub-title, .theater-name{
        text-align: center;
    }
    h2.text-center{
        /*text-align: right !important;*/
    }
    h2.text-center img{
        width: 90%;
    }
    .screening-form{
        width: 90%;
    }
    .banner{
      max-width: 90%;
      margin-inline: auto;
    }
	.right-logo .dropdown-menu{
	min-width: auto;
	width:230px;
    }
    .movie-synopsis p{
        font-size: 16px;
    }
    .listen{
        min-height: auto;
    }
	.right-logo .dropdown-item{
		font-size: 10px;
	}
  #topHorizontalBannerSlider.slick-slider .slick-arrow.prev-arrow{
    left: 27%;
  }
  #topHorizontalBannerSlider.slick-slider .slick-arrow.next-arrow{
    right: 23%;
  }
}
@media screen and (max-width:400px) {
  .nav-left-text{
    font-size: 10px;
  }
  
  #verticalBannerSlider .slide-arrow.prev-arrow{
      left: -5%;
  }
  #verticalBannerSlider .slide-arrow.next-arrow{
      right: -10%;
  }
}
@media screen and (max-width: 320px) {
    .date-time{
        font-size: 24px;
    }
    .date-time span:last-child{
        font-size: 16px;
    }
}
/* ================================================================
   LIONSGATE REDESIGN LAYER  (appended 2026-09-07)
   New design language for the guild/ site. Overrides the legacy
   LIONSGATE FYC template look. Colour scheme: near-black / white / grey
   (rgba(244,243,240,.8)) with #163d68 reserved for interaction only.
   DOM structure, JS hooks, slick sliders and data-* attributes are
   left intact — this layer is presentational.
   To revert: delete everything below this banner.
   ================================================================ */

:root{
  --lg-bg:#335687;
  --lg-bg-2:rgba(30,74,125,.8);
  --lg-bg-3:#25588f;
  --lg-fg:#ffffff;
  --lg-grey:rgba(244,243,240,.97);
  --lg-grey-2:rgba(244,243,240,.82);
  --lg-grey-3:rgba(244,243,240,.64);
  --lg-line:rgba(244,243,240,.26);
  --lg-line-2:rgba(244,243,240,.42);
  --lg-accent:#ffffff;
  --lg-gutter:clamp(20px,5vw,72px);
  --lg-maxw:1440px;
  --lg-ease:cubic-bezier(.22,1,.36,1);
  --lg-head:"Lato",sans-serif;
}

/* ---------- base ---------- */
html{scroll-behavior:smooth;}
body{
  background:var(--lg-bg);
  color:var(--lg-fg);
  font-family:var(--lg-head);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:0;
}
body.home-page{padding-bottom:0;}
::selection{background:var(--lg-accent);color:#163d68;}
img{max-width:100%;}
a{transition:color .2s var(--lg-ease);}

/* utility ---------------------------------------------------------- */
.lg-container{max-width:var(--lg-maxw);margin:0 auto;padding-inline:var(--lg-gutter);}
.lg-kicker{
  font-size:11px;font-weight:600;letter-spacing:.433em;text-transform:uppercase;
  color:var(--lg-grey-2);display:inline-flex;align-items:center;gap:.9em;margin:0;
}
.lg-kicker::before{content:"";width:34px;height:1px;background:var(--lg-line-2);display:inline-block;}
.lg-rule{border:0;border-top:1px solid var(--lg-line);margin:0;}

/* ================================================================
   HEADER  (.top-nav from includes/header*.php)
   ================================================================ */
header{height:88px;}
.home-page header{height:0;}

.top-nav{
  position:absolute;top:0;left:0;right:0;z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  padding:10px var(--lg-gutter);
  display:block;
  margin-bottom:0;
  letter-spacing:.032em;
  transition:background .3s var(--lg-ease),padding .3s var(--lg-ease),border-color .3s var(--lg-ease);
}
/* scrim so white logo/nav stays legible over hero imagery (landing only) */
.home-page .top-nav::before{
  content:"";position:absolute;inset:0 0 auto 0;height:190px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 55%,transparent 100%);
  z-index:-1;
}
/* sticky-on-scroll state (landing) */
.home-page .top-nav.lg-stuck{
  position:fixed;
  background:var(--lg-bg);
  border-bottom-color:var(--lg-line);
  padding-top:16px;padding-bottom:16px;
}
.home-page .top-nav.lg-stuck::before{opacity:0;}
/* interior pages: solid bar from the start */
.landing-page .top-nav,
#mainBody .top-nav{background:var(--lg-bg);border-bottom-color:var(--lg-line);}

.top-nav-wrapper{
  display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;
}
.nav-left{display:flex;align-items:center;gap:22px;font-weight:400;}
.logo-wrapper{margin:0;display:flex;}
.logo-wrapper a{display:flex;cursor:pointer;}
.lg-logo,.lg-logo.img-fluid{height:30px;width:auto;display:block;transition:height .3s var(--lg-ease);}
.top-nav.lg-stuck .lg-logo{height:26px;}

.nav-left-text{
  position:relative;margin:0;padding-left:22px;
  font-size:10px;font-weight:600;letter-spacing:.459em;text-transform:uppercase;
  color:var(--lg-grey-2);white-space:nowrap;
}
.nav-left-text::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:24px;background:var(--lg-line-2);}
.nav-left-text::after{content:" / 2026";color:var(--lg-grey-3);}
@media (max-width:680px){.nav-left-text{display:none;}}

.nav-right{display:flex;align-items:center;gap:26px;}
.nav-right>ul{display:flex;align-items:center;gap:26px;margin:0;padding:0;}
.nav-right>ul li{list-style:none;margin:0;}
.nav-right .desktop-view .d-flex{display:none !important;} /* social moves to footer */

.home-btn a{
  font-size:11px;letter-spacing:.33em;text-transform:uppercase;text-decoration:none;color:var(--lg-fg);
  border:1px solid var(--lg-line-2);padding:11px 20px;transition:border-color .2s var(--lg-ease),color .2s var(--lg-ease);
}
.home-btn a:hover{border-color:var(--lg-accent);color:var(--lg-accent);}

/* film-picker dropdown -> labelled "Films" menu (Bootstrap markup kept) */
.right-logo .dropdown{position:relative;}
.right-logo .dropdown-toggle{
  display:inline-flex;align-items:center;gap:11px;padding:11px 18px;border:1px solid transparent;
  color:var(--lg-fg);text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.33em;
  background:transparent;transition:border-color .2s var(--lg-ease),color .2s var(--lg-ease);
}
.right-logo .dropdown-toggle:hover,.right-logo .dropdown-toggle[aria-expanded="true"]{border-color:var(--lg-accent);color:var(--lg-accent);}
.right-logo .dropdown-toggle::after{display:none !important;}
.right-logo .dropdown-toggle .window-logo{display:none;}
.right-logo .dropdown-toggle .lg-films-label{display:inline-block;}
.right-logo .dropdown-toggle .lg-chev{width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--lg-ease);}
.right-logo .dropdown-toggle[aria-expanded="true"] .lg-chev{transform:rotate(-135deg);}

.right-logo .dropdown-menu{
  background:var(--lg-bg);border:1px solid var(--lg-line);border-radius:0;
  min-width:300px;padding:8px 0;margin-top:14px !important;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
}
.right-logo .dropdown-menu li{list-style:none;}
.right-logo .dropdown-item{
  color:var(--lg-grey);font-size:12px;letter-spacing:.227em;text-transform:uppercase;font-weight:500;
  padding:13px 22px;white-space:nowrap;border-left:2px solid transparent;transition:all .18s var(--lg-ease);
}
.right-logo .dropdown-item:hover,.right-logo .dropdown-item:focus{
  background:var(--lg-bg-2);color:var(--lg-fg);border-left-color:var(--lg-accent);
}

/* mobile hamburger (retain #navIcon markup) */
@media (max-width:900px){
  .nav-right .right-logo{order:2;}
}

/* ================================================================
   BUTTONS  (.button used across films / screenings / rsvp)
   ================================================================ */
.button,a.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  background:transparent;border:1px solid var(--lg-fg);color:var(--lg-fg);
  padding:15px 34px;min-width:0;font-size:11px;font-weight:600;letter-spacing:.356em;text-transform:uppercase;
  text-decoration:none;border-radius:0;cursor:pointer;
  transition:background .22s var(--lg-ease),color .22s var(--lg-ease),border-color .22s var(--lg-ease);
  scale:1 !important;
}
.button:hover,a.button:hover{background:var(--lg-accent);border-color:var(--lg-accent);color:#163d68;scale:1 !important;}
.button--ghost{border-color:var(--lg-line-2);color:var(--lg-grey);}
.button--ghost:hover{border-color:var(--lg-accent);background:transparent;color:var(--lg-accent);}

/* ================================================================
   SECTION HEADINGS / rhythm
   ================================================================ */
.section-heading{display:flex;align-items:center;gap:20px;margin-bottom:34px;}
.section-heading .heading-line,.section-center-heading-line{background:var(--lg-line);height:1px;border:0;}
.section__subheading,.section-heading h2,.section-heading h3{
  font-weight:800;letter-spacing:.047em;text-transform:uppercase;
}

/* ================================================================
   FOOTER  (rebuilt markup in includes/footer*.php)
   ================================================================ */
footer{
  position:static;background:var(--lg-bg);border-top:1px solid var(--lg-line);
  padding:0;margin-top:0;
}
.lg-footer{padding:64px var(--lg-gutter) 34px;}
.lg-footer__top{
  display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;
  padding-bottom:44px;border-bottom:1px solid var(--lg-line);
}
.lg-footer__brand{max-width:360px;}
.lg-footer__brand img{height:34px;width:auto;margin-bottom:20px;}
.lg-footer__brand p{margin:0;color:var(--lg-grey-2);font-size:12px;line-height:1.9;letter-spacing:.073em;}
.lg-footer__cols{display:flex;gap:72px;flex-wrap:wrap;}
.lg-footer__col h4{
  margin:0 0 18px;font-size:10px;font-weight:600;letter-spacing:.408em;text-transform:uppercase;color:var(--lg-grey-3);
}
.lg-footer__col a{
  display:block;margin-bottom:12px;color:var(--lg-grey);font-size:12px;letter-spacing:.176em;
  text-transform:uppercase;text-decoration:none;font-weight:500;
}
.lg-footer__col a:hover{color:var(--lg-accent);}
.lg-footer__social{display:flex;gap:16px;align-items:center;}
.lg-footer__social a{display:inline-flex;opacity:.8;transition:opacity .2s var(--lg-ease),transform .2s var(--lg-ease);}
.lg-footer__social a:hover{opacity:1;transform:translateY(-2px);}
.lg-footer__social img{height:18px;width:auto;}
.lg-footer__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:26px;
}
.lg-footer__legal{display:flex;gap:26px;flex-wrap:wrap;}
.lg-footer__legal a{
  color:var(--lg-grey-2);font-size:10px;letter-spacing:.305em;text-transform:uppercase;text-decoration:none;font-weight:500;
}
.lg-footer__legal a:hover{color:var(--lg-accent);}
.lg-footer__copy{margin:0;color:var(--lg-grey-3);font-size:10px;letter-spacing:.253em;text-transform:uppercase;}

/* legacy footer fallbacks (in case an un-migrated footer prints) */
.footer-wrapper{max-width:var(--lg-maxw);margin:0 auto;padding:40px var(--lg-gutter);font-size:10px;}
footer a{color:var(--lg-grey);text-decoration:none;text-transform:uppercase;font-weight:500;letter-spacing:.176em;transition:color .2s var(--lg-ease);}
footer a:hover{color:var(--lg-accent);}
.footer-logo{width:auto;}
.footer-logo img{height:20px;width:auto;opacity:.85;}

/* ================================================================
   LANDING — hero slider + poster grid
   ================================================================ */
.slider-section{position:relative;}
/* cinematic bottom scrim on hero */
.slider-section::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:45%;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent,var(--lg-bg) 92%);
}
.slick-dots{gap:0;bottom:26px;z-index:10;}
/* the bottom scrim (z-index:2, above) was covering the dots and the
   next-arrow (no explicit z-index) while the prev-arrow (z-index:10,
   set in the base slick rules) poked out above it — only the left
   arrow was visible. Lift both arrows above the scrim too. */
.slide-arrow.slick-arrow{z-index:10;}
/* arrows (base rule: bottom:20px) sat ~30px lower than the dots
   (bottom:26px, but translated up by half its own height vs. the
   arrows' down-translate) — raise the arrows' bottom to land on the
   same line as the dots. Scoped to the hero slider only, not the
   other slick instances (#verticalBannerSlider/#gallerySlider) that
   share the same base .slide-arrow rule. */
.slider-section .slide-arrow{bottom:50px;}
li[role='presentation']{margin:0 2px;}
li[role='presentation'] button{
  width:26px;height:3px;border-radius:0;border:0;background:var(--lg-grey-3);transition:background .25s var(--lg-ease);
}
li[role='presentation'].slick-active button{background:var(--lg-accent);}

.banners-section{
  position:relative;z-index:3;background:var(--lg-bg);
  padding:clamp(40px,7vw,96px) 0 !important;margin:0 !important;
}
.banners-section .container{max-width:var(--lg-maxw);}
.banners-section .row{--bs-gutter-x:clamp(14px,2vw,28px);row-gap:clamp(14px,2vw,28px);justify-content:flex-start;}
.banner{margin:0;text-align:left;}
.banner-img-wrapper{overflow:hidden;position:relative;display:block;background:var(--lg-bg-2);}
.banner-img-wrapper::after{
  content:"";position:absolute;inset:0;border:1px solid var(--lg-line);pointer-events:none;transition:border-color .25s var(--lg-ease);
}
.banner-img,.banner-img.img-fluid{width:100%;display:block;transition:transform .5s var(--lg-ease),filter .5s var(--lg-ease);filter:grayscale(.15);}
.banner:hover .banner-img,.banner-img-wrapper a:hover .banner-img{transform:scale(1.04) translateY(0);scale:1 !important;filter:grayscale(0);}
.banner:hover .banner-img-wrapper::after{border-color:var(--lg-accent);}
.banner-text-wrapper{opacity:1;margin-top:14px;transition:none;}
.banner-text{
  font-size:11px;letter-spacing:.279em;text-transform:uppercase;color:var(--lg-grey-2);font-weight:600;
  display:flex;align-items:center;gap:.7em;
}
.banner-text::before{content:"";width:16px;height:1px;background:var(--lg-line-2);transition:width .25s var(--lg-ease),background .25s var(--lg-ease);}
.banner:hover .banner-text{color:var(--lg-fg);}
.banner:hover .banner-text::before{width:28px;background:var(--lg-accent);}

/* section intro strip above the grid (added in index.php) */
.lg-shelf-head{
  max-width:var(--lg-maxw);margin:0 auto;padding:0 var(--lg-gutter);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;
}
.lg-shelf-head h2{
  margin:.35em 0 0;font-size:clamp(26px,3.4vw,44px);font-weight:800;line-height:1;letter-spacing:.009em;text-transform:uppercase;
}
.lg-shelf-head .lg-count{color:var(--lg-grey-3);font-size:12px;letter-spacing:.279em;text-transform:uppercase;white-space:nowrap;padding-bottom:6px;}

/* ================================================================
   MISC legacy neutralisers
   ================================================================ */
.nav-container{background:var(--lg-bg);border-bottom:1px solid var(--lg-line);}
.nav-link:hover{color:var(--lg-accent);}
.updatePageNav .active{color:var(--lg-accent);}
.podcastplaybtn a{color:var(--lg-grey);}
.podcastplaybtn a:hover{color:var(--lg-accent);}

@media (max-width:900px){
  .top-nav{padding:18px var(--lg-gutter);}
  .device-posters{padding:0 var(--lg-gutter);}
  .lg-footer__top{flex-direction:column;gap:36px;}
  .lg-footer__cols{gap:44px;}
}

/* ================================================================
   FILM-PAGE SECTION NAV  (.bottom-nav / .nav-container / .nav-link)
   Re-cut as a left-aligned hairline tab bar with an accent underline
   on the active item (was: centred bar + gold triangle pointer).
   ================================================================ */
.bottom-nav{position:sticky;top:0;z-index:40;}
.landing-page .bottom-nav,#mainBody .bottom-nav{top:0;}
.nav-container{
  background:var(--lg-bg);border-bottom:1px solid var(--lg-line);border-top:1px solid var(--lg-line);
  padding:0 var(--lg-gutter);width:100%;
}
.nav-ul{
  max-width:var(--lg-maxw);margin:0 auto;display:flex;justify-content:flex-start;gap:clamp(18px,3vw,48px);
  align-items:stretch;overflow-x:auto;scrollbar-width:none;
}
.nav-ul::-webkit-scrollbar{display:none;}
.nav-li{padding:0;list-style:none;flex:0 0 auto;}
.nav-link{
  display:flex;align-items:center;height:56px;
  font-size:11px;font-weight:600;letter-spacing:.279em;text-transform:uppercase;color:var(--lg-grey-2);
  border-bottom:2px solid transparent;transition:color .2s var(--lg-ease),border-color .2s var(--lg-ease);white-space:nowrap;
  text-decoration:none;
}
.nav-link:hover{color:var(--lg-fg);font-weight:600;}
.nav-link.active{
  color:var(--lg-fg);font-weight:600;font-size:11px;border-bottom-color:var(--lg-accent);
}
.nav-link.active::after{display:none !important;content:none !important;}

/* mobile "Find Screenings" dropdown button on interior pages */
.dropdown-nav .btn:not([data-bs-toggle]){display:none;} /* stray empty &nbsp; button */
.dropdown-nav .btn[data-bs-toggle],#findScreeningsMobile{
  border:1px solid var(--lg-line-2);color:var(--lg-fg);text-transform:uppercase;
  font-size:11px;letter-spacing:.305em;font-weight:600;padding:12px 20px;border-radius:0;background:transparent;
}
.dropdown-nav .btn[data-bs-toggle]:hover,#findScreeningsMobile:hover{border-color:var(--lg-accent);color:var(--lg-accent);}

/* ================================================================
   SHARED CONTENT PRIMITIVES  (film + screenings pages)
   ================================================================ */
.section-container{max-width:var(--lg-maxw);margin:0 auto;padding-inline:var(--lg-gutter);}
.section{padding-block:clamp(38px,6vw,86px);}
.section-heading{display:flex;align-items:center;gap:22px;margin-bottom:30px;}
.section-heading .heading-line,.section-center-heading-line,.heading-line{
  flex-grow:1;height:1px;background:var(--lg-line);border:0;
}
.section-heading h2,.section-heading h3,.section__subheading,.section__heading{
  font-weight:800;letter-spacing:.035em;text-transform:uppercase;line-height:1.05;margin:0;
}
.movie-tt{margin-bottom:1.4rem;}

/* accordions (screening city lists, accolades) */
.accordion-item{background:transparent;border:0;border-bottom:1px solid var(--lg-line);}
.accordion-header:has(> .accordion-button.collapsed){border-bottom:0;}
.accordion-button,.accordion-item:first-of-type .accordion-button,.accordion-button:not(.collapsed){
  background:transparent;color:var(--lg-fg);box-shadow:none;font-weight:700;letter-spacing:.035em;text-transform:uppercase;
}
.accordion-button:not(.collapsed){color:var(--lg-accent);}

/* generic form controls (RSVP / update / cancel) */
.form-control,.form-select,input[type=text],input[type=email],input[type=tel],select,textarea{
  background:transparent !important;border:0 !important;border-bottom:1px solid var(--lg-line-2) !important;
  border-radius:0 !important;color:var(--lg-fg) !important;padding:12px 2px !important;box-shadow:none !important;
  transition:border-color .2s var(--lg-ease);
}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{
  border-bottom-color:var(--lg-accent) !important;outline:0 !important;
}
label,.form-label{
  color:var(--lg-grey-2);font-size:10px;letter-spacing:.279em;text-transform:uppercase;font-weight:600;
}
::placeholder{color:var(--lg-grey-3) !important;}

/* ================================================================
   PHASE 1 — FEEDBACK FIXES (2026-09-07)
   later cascade = wins over the rules above
   ================================================================ */

/* [3] kicker text now reads "for your consideration 2026" from markup */
.nav-left-text::after{content:none;}

/* [7] critic pull-quotes hidden across all sections for now */
#quoteImg,.quote,.TTWithQuotes .quote{display:none !important;}

/* [1] FOOTER — one merged block, copyright sits under the brand */
.lg-footer{padding:44px var(--lg-gutter) 34px;}
.lg-footer__top{
  display:flex;justify-content:space-between;gap:48px 64px;flex-wrap:wrap;
  padding-bottom:0;border-bottom:0;
}
.lg-footer__brand{max-width:340px;}
.lg-footer__brand img{height:30px;margin-bottom:16px;}
.lg-footer__brand p{margin:0;color:var(--lg-grey-2);font-size:11px;line-height:1.9;letter-spacing:.073em;}
.lg-footer__copy{
  margin:14px 0 0 !important;color:var(--lg-grey-3);font-size:10px;letter-spacing:.227em;text-transform:uppercase;
}
.lg-footer__cols{display:flex;gap:64px;flex-wrap:wrap;}
.lg-footer__col a{margin-bottom:11px;}
/* legacy bottom row no longer emitted — neutralise if it appears */
.lg-footer__bottom{display:none;}

/* [2] LANDING — hero slider sized naturally, same approach as the
   reference multi-film site (D:\...\working\bw\index.php + css/style.css):
   no height cap on .slider-section, slick auto-sizes the track/list to
   the image's own natural aspect ratio, dots/arrows sit relative to
   that same (uncapped) box so they land in the right place. */
.top-horizontal-banner-img img,.slider-section .slick-slide img,.slider-section .slider-preloader img{
  max-width:100%;height:auto;display:block;margin:0 auto;
}
.banners-section{padding:clamp(24px,3vw,40px) 0 !important;}
.banners-section .row{justify-content:center;}
.desktop-posters .banner{max-width:220px;margin-inline:auto;}
/* mobile poster slider – stop it being full-bleed huge */
.device-posters{max-width:250px;margin:0 auto;padding-inline:0;}
.device-posters .vertical-banner-img img{width:100%;}
.device-posters .vertical-banner-img{padding:0;}

/* [4] MOBILE header — solid in-flow bar on landing (was overlapping the hero) */
@media (max-width:768px){
  .home-page header{height:auto;}
  .home-page .top-nav,
  .home-page .top-nav.lg-stuck{
    position:sticky;top:0;background:var(--lg-bg);
    border-bottom:1px solid var(--lg-line);padding:13px var(--lg-gutter);
  }
  .home-page .top-nav::before{display:none;}
  .top-nav-wrapper{gap:14px;}
  .lg-logo,.lg-logo.img-fluid{height:24px;}
  .right-logo .dropdown-toggle{padding:9px 13px;font-size:10px;letter-spacing:.253em;gap:8px;}
  .slider-section,.slider-section .slick-list,.slider-section .slick-track,
  .slider-section .slick-slide,.slider-section .slick-slide>div,.top-horizontal-banner-img{max-height:none;height:auto;}
  .top-horizontal-banner-img img,.slider-section .slick-slide img,.slider-section .slider-preloader img{height:auto;object-fit:contain;}
}

/* [5][6] FILM-PAGE SECTION NAV — text-width underline + tight mobile spacing */
.nav-link{width:auto;align-self:flex-start;}
.nav-link.active{border-bottom-width:2px;}
@media (max-width:900px){
  .navIsActive .nav-container,.nav-container{
    text-align:left;padding:22px var(--lg-gutter);
  }
  .nav-ul{flex-direction:column;gap:4px;align-items:stretch;overflow:visible;}
  .nav-li{margin:0;width:100%;}
  /* mobile drawer reskinned to match screenings site's rail/tab
     treatment — filled row + rollover instead of plain underlined text. */
  .nav-link{
    height:auto;width:100%;padding:13px 16px;font-size:12px;letter-spacing:.227em;
    border-bottom:0;border-left:2px solid transparent;background:var(--lg-bg-2);
    transition:background .2s var(--lg-ease),border-color .2s var(--lg-ease),color .2s var(--lg-ease);
  }
  .nav-link:hover{background:var(--lg-bg-3);border-left-color:var(--lg-line-2);color:var(--lg-fg);}
  .nav-link.active{
    font-size:12px;background:var(--lg-bg-3);border-left-color:var(--lg-accent);color:var(--lg-fg);
  }
}

/* ================================================================
   PHASE 1 — FEEDBACK FIXES 2 (2026-09-07)
   ================================================================ */

/* [1] film-page title art (.movie-tt) — smaller across all sections,
   and close the empty space the hidden critic-quote used to hold */
.movie-tt,.movie-tt.img-fluid,
.movie-tt.desktop-view,.movie-tt.mobile-view{
  max-width:clamp(180px,24vw,340px);
  width:100%;height:auto;margin:0 auto 1rem;
}
.social-link-wrapper .movie-tt{max-width:clamp(160px,20vw,300px);}
.section.mb-0{padding-block:22px 6px;}
.TTWithQuotes,.TTWithSocialLinks{margin:0;}
.TTWithQuotes .quote{display:none !important;}

/* [4] screenings2026 landing — kill the forced full-viewport rows that
   left huge gaps between the film-title logos */
.title-section{height:auto !important;padding:clamp(36px,6vh,84px) 0 !important;}
.title-section-wrapper,.title-section-wrapper.five-titles-desktop-wrapper{height:auto !important;max-width:min(1200px,88%);}
.title-row{height:auto !important;}
.title{
  height:auto !important;min-height:0 !important;
  padding:clamp(14px,2.4vh,30px) 0 !important;
}
.title img,.five-titles-desktop-wrapper .title img{max-width:clamp(150px,20vw,300px);}
.title::after{background-color:var(--lg-line);width:44px;}

/* [2] main footer brand block is now just logo + copyright */
.lg-footer__brand p:only-of-type{margin-top:0;}

/* ================================================================
   LIONSGATE GV2 — SINGLE STATEMENT  (guild_v2, root site; CSS hooks kept as .lg-single-*)
   Landing: one centred poster + Enter.
   Film page: centred hero, section nav as centred pill row.
   ================================================================ */

/* --- sticky footer + vertically-centred landing --- */
.home-page#pageWrapper,
body#mainBody{
  min-height:100vh;display:flex;flex-direction:column;
}
body#mainBody > .landing-page{flex:1 1 auto;}
.home-page#pageWrapper > footer,
body#mainBody > footer{margin-top:auto;}
.lg-single-landing.title-section{flex:1 1 auto;}

/* --- LANDING --- */
.lg-single-landing.title-section{
  height:auto !important;padding:clamp(40px,6vh,72px) var(--lg-gutter) !important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.lg-single-stage{
  width:100%;max-width:960px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.lg-single-hero{display:block;text-decoration:none;}
.lg-single-hero .title{padding:0 !important;min-height:0 !important;height:auto !important;cursor:pointer;}
.lg-single-hero .title::after{display:none !important;}
.lg-single-hero img{
  max-height:min(46vh,420px);width:auto;max-width:min(340px,80vw);display:block;margin:0 auto;
}
.lg-single-cta{margin-top:clamp(30px,4.5vh,52px);}
.lg-single-btn{
  display:inline-flex;align-items:center;gap:.8em;
  border:1px solid var(--lg-fg);color:var(--lg-fg);text-decoration:none;
  padding:16px 34px;font-size:11px;font-weight:600;letter-spacing:.356em;text-transform:uppercase;
  transition:background .22s var(--lg-ease),color .22s var(--lg-ease),border-color .22s var(--lg-ease);
}
.lg-single-btn i{font-style:normal;transition:transform .25s var(--lg-ease);}
.lg-single-btn:hover{background:var(--lg-accent);border-color:var(--lg-accent);color:#163d68;}
.lg-single-btn:hover i{transform:translateX(5px);}
@media (max-width:900px){ .lg-single-btn{padding:14px 26px;letter-spacing:.279em;} }

/* multi-film landing list — loops every film into its own ".lg-single-row"
   (same hero+Enter treatment as the single-film ".lg-single-stage"),
   wrapped in ".lg-single-films". Always side by side with a vertical
   hairline between, at every viewport width. */
.lg-single-films{
  width:100%;max-width:1100px;margin:0 auto;
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:center;
}
.lg-single-films .lg-single-stage{margin:0 5px;}
.lg-single-films .lg-single-row{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* with 5 columns most of the row's width was going to side padding,
     not the poster — the image's own max-width was never the real
     limit, it was already filling 100% of a squeezed content box.
     Tighter side padding gives the poster the extra room instead. A
     full border (was border-left only) reads as a proper card now
     that each one also has its own left/right margin. */
  /* side padding was the poster's real bottleneck (it fills 100% of
     whatever content width is left over), not its own max-width —
     cutting the max from 28px to 13px is ~20% more image width. */
  padding:clamp(10px,1.3vw,20px);border:1px solid var(--lg-line);
  position:relative;border-radius:7px;
}
/* the 42vw cap sized the poster against the viewport, not against its
   own (much narrower, once split 5 ways) row — at 5 titles each row is
   only ~1/5 of the 1100px strip, so the image overflowed its column
   and visually overlapped the neighbouring posters. Cap it to the
   row's own width too. */
.lg-single-films .lg-single-row .lg-single-hero{align-self:stretch;}
.lg-single-films .lg-single-row .lg-single-hero img{width:100%;max-width:100%;height:auto;max-height:none;}
@media (min-width:901px){
  .lg-single-films .lg-single-row .lg-single-hero img{max-width:min(374px,50.6vw);}
}
/* Enter now overlays the poster itself (centred over the image, hidden
   until rollover) instead of sitting below it in flow — desktop only;
   shown via the .lg-single-stage:has() cross-hover rule below. */
.lg-single-films .lg-single-row .lg-single-cta{
  position:absolute;top:50%;left:50%;margin-top:0;
  transform:translate(-50%,-50%) scale(.92);
  opacity:0;pointer-events:none;
  transition:opacity .2s var(--lg-ease),transform .2s var(--lg-ease);
}
.lg-single-films .lg-single-row .lg-single-btn{
  padding:11px 22px;font-size:10px;letter-spacing:.279em;
}
/* with 5 films the "always side by side" row (nowrap, flex:1 1 0)
   squeezed every title down to a sliver on phones and the poster's own
   max-width (42vw) overflowed that sliver instead of shrinking with
   it. Below 900px stack titles into a full-width vertical list —
   same bordered-card look and same hover-overlay Enter button as
   desktop, just one per row instead of side by side. */
@media (max-width:900px){
  .lg-single-films{flex-direction:column;gap:10px;}
  .lg-single-films .lg-single-stage{margin:0;}
  .lg-single-films .lg-single-row{
    flex:0 0 auto;width:100%;
    padding:clamp(16px,4vw,24px);
  }
}

/* --- FILM PAGE : centred statement + pill nav --- */
.lg-single .section.mb-0 .col-lg-5{text-align:center;}
.lg-single .section.mb-0 .movie-tt{max-width:clamp(144px,20.4vw,264px) !important;margin:0 auto !important;}
.lg-single .section-container{max-width:1280px;}
@media (min-width:901px){
  /* section nav — matched to screenings site's flat-tab reskin: a plain
     rectangular strip, one flat solid fill on the active tab only, no
     pill borders/gradients/glow. */
  .lg-single .nav-container{padding:0 var(--lg-gutter);border-bottom:1px solid var(--lg-line);}
  .lg-single .nav-ul{justify-content:center;gap:0;flex-wrap:wrap;max-width:none;}
  .lg-single .nav-li{margin:0;}
  .lg-single .nav-link{
    height:auto;padding:16px 22px;border:0;border-top:2px solid transparent;border-bottom:2px solid transparent;border-radius:0;
    align-self:center;color:var(--lg-grey-2);width:auto;background:none;
    font-size:11px;font-weight:600;letter-spacing:.202em;text-transform:uppercase;
    transition:color .18s var(--lg-ease),background .18s var(--lg-ease),border-color .18s var(--lg-ease);
  }
  .lg-single .nav-link:hover{color:var(--lg-fg);background:var(--lg-bg-2);}
  .lg-single .nav-link.active,
  .lg-single .nav-link.active:hover{
    color:var(--lg-fg);font-weight:700;background:var(--lg-bg-2);border-bottom-color:var(--lg-accent);
  }
  .lg-single .nav-link.active::after{display:none !important;}
}

/* ================================================================
   INTERIOR PAGES — sticky header so the logo stays visible while
   scrolling + tighter space under the film title art (2026-09-07)
   ================================================================ */
.landing-page header,
#mainBody header{
  position:sticky;top:0;z-index:60;height:auto;
  background:var(--lg-bg);border-bottom:1px solid var(--lg-line);
}
.landing-page header .top-nav,
#mainBody header .top-nav{
  position:static;background:transparent;border-bottom:0;
  padding-top:16px;padding-bottom:16px;
}
/* the section-nav bar sticks just under the header */
.landing-page .bottom-nav,
#mainBody .bottom-nav{top:84px;}
@media (max-width:900px){
  /* stick just under the sticky header's own rendered height (~67px) -
     top:0 here made this bar (and the #navIcon it now reserves space
     for) land on the SAME sticky line as the header, so once both were
     stuck the logo and the hamburger/close icon visually collided */
  .landing-page .bottom-nav,
  #mainBody .bottom-nav{top:78px;}
}
@media (min-width:901px){
  .lg-split .bottom-nav{padding-top:30px;}   /* left rail: clear the sticky header */
}

/* --- close the gap under the film title art --- */
.section.mb-0{padding-top:12px !important;padding-bottom:0 !important;}
.section.mb-0 .row{justify-content:center;}
.section.mb-0 .col-lg-5,.section.mb-0 .col-lg-5.text-center{flex:0 0 100%;max-width:100%;text-align:center;}
.section.mb-0 .social-link-wrapper{flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.section.mb-0 .movie-tt,
.section.mb-0 .TTWithQuotes,
.section.mb-0 .TTWithSocialLinks,
.section.mb-0 .social-link-wrapper{margin-bottom:0 !important;}
.landing-page > h2.section-container,
#pageWrapper > h2.section-container,
#mainBody .landing-page > h2.section-container{padding:12px 0 0 !important;margin-block:0 !important;}
.landing-page .section:not(.mb-0),
#mainBody .section:not(.mb-0){padding-top:clamp(14px,2vw,28px) !important;}

/* ================================================================
   SCREENING CARD RESTYLE  (ported to guild_v1/guild_v2, 2026-09-08)
   The city accordion + per-screening card in #screeningSection,
   brought into the LIONSGATE redesign language: hairline surface,
   kicker day-label, refined date, outline RSVP button.
   ================================================================ */

/* city accordion header */
.accordion#cityList{width:100%;max-width:var(--lg-maxw);margin:0 auto;}
#screeningSection .accordion-item{border-bottom:1px solid var(--lg-line);}
#screeningSection .accordion-button{
  font-size:clamp(13px,1.4vw,16px);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--lg-grey) !important;transition:color .18s var(--lg-ease);
  padding:18px 0 !important;display:flex !important;justify-content:space-between;align-items:center;gap:16px;
}
#screeningSection .accordion-button{width:100% !important;}
#screeningSection .accordion-button::after{margin-left:auto;flex:0 0 auto;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2.5 5.5L8 11l5.5-5.5'/%3e%3c/svg%3e") !important;filter:none;opacity:1;}
#screeningSection .accordion-button:not(.collapsed){color:var(--lg-fg) !important;}
#screeningSection .accordion-button:hover,
#screeningSection .accordion-button:focus-visible{color:var(--lg-accent) !important;}
#screeningSection .accordion-collapse{margin-bottom:14px;}

/* card grid */
#screeningSection .cites-wrapper .col-lg-6{padding:0;flex:0 0 auto;width:min(560px,calc(50% - 14px));}
#screeningSection .accordion-body{padding:8px 0 4px;}
#screeningSection .accordion-body .row{display:flex;flex-wrap:wrap;column-gap:28px;row-gap:28px;margin:0 !important;--bs-gutter-x:0;}

/* the screening card */
#screeningSection .event{
  padding:clamp(22px,2.4vw,34px);
  background:var(--lg-bg-2);
  border:1px solid var(--lg-line);
  text-align:left;
  width:100%;margin:0;
  display:flex;flex-direction:column;align-items:flex-start;
}
#screeningSection .event .day{
  font-size:11px;font-weight:600;letter-spacing:.408em;text-transform:uppercase;
  color:var(--lg-grey-2);margin:0 0 10px;
  display:flex;align-items:center;gap:12px;
}
#screeningSection .event .day::after{content:"";width:32px;height:1px;background:var(--lg-line-2);}
#screeningSection .event .date-time{
  font-size:clamp(20px,2.3vw,27px);line-height:1.1;font-weight:800;letter-spacing:.009em;white-space:nowrap;
  color:var(--lg-fg);margin:0;text-transform:none;
}
#screeningSection .event .date-time span{font-weight:800;}
#screeningSection .event .date-time span:last-child{
  font-size:.44em;font-weight:600;letter-spacing:.202em;color:var(--lg-grey-2);
}
#screeningSection .event .event-text{
  font-size:13px;font-weight:400;font-style:italic;color:var(--lg-grey-2);
  line-height:1.6;margin:12px 0 0;text-transform:none;
}
#screeningSection .event .event-sub-text{
  font-size:11px;font-weight:600;letter-spacing:.202em;text-transform:uppercase;
  color:var(--lg-grey-3);line-height:1.75;margin:14px 0 0;
  padding-top:14px;border-top:1px solid var(--lg-line);align-self:stretch;
}
#screeningSection .event .event-sub-text strong{color:var(--lg-fg);font-weight:600;}

/* RSVP button -> redesign outline style */
#screeningSection .event .button,
#screeningSection .event .rsvp-now-btn.screeningInfo__boxBtn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:22px;background:transparent;border:1px solid var(--lg-fg);color:var(--lg-fg);
  padding:14px 32px;font-size:11px;font-weight:600;letter-spacing:.356em;text-transform:uppercase;
  border-radius:0;width:auto;min-width:0;text-decoration:none;cursor:pointer;scale:1 !important;
  transition:background .2s var(--lg-ease),color .2s var(--lg-ease),border-color .2s var(--lg-ease);
}
#screeningSection .event .button:hover,
#screeningSection .event .rsvp-now-btn.screeningInfo__boxBtn:hover{
  background:var(--lg-accent);border-color:var(--lg-accent);color:#163d68;scale:1 !important;
}

/* "no available screenings" message */
#screeningSection .screeningInfo__boxDesc{
  font-size:13px;letter-spacing:.073em;color:var(--lg-grey-2);text-transform:none;font-weight:400;
  padding:22px clamp(22px,3vw,36px);border:1px solid var(--lg-line);background:var(--lg-bg-2);
}

/* MOBILE (<=992px) - the legacy @media block zeroes #screeningSection .section-container
   padding and insets .cites-wrapper .row to 90%, which pushed the "NEW YORK" accordion
   header past the wrapper edge (clipped in narrow views). Re-pad the section and give the
   header + the card row the same left edge. */
@media (max-width:992px){
  #screeningSection .section-container{padding-left:var(--lg-gutter) !important;padding-right:var(--lg-gutter) !important;}
  #screeningSection .accordion#cityList{width:100%;max-width:none;}
  #screeningSection .accordion-button{padding-left:0 !important;padding-right:0 !important;}
  #screeningSection .cites-wrapper .row{width:100% !important;margin:0 !important;}
  #screeningSection .cites-wrapper .col-lg-6{width:100% !important;}
  /* keep the accordion chevron inline & vertically centred (legacy mobile absolutely-positions it) */
  #screeningSection .accordion-button::after{position:static !important;top:auto !important;right:auto !important;margin-left:auto;}
}

/* ================================================================
   RSVP FORM OVERLAY RESTYLE  (ported to guild_v1/guild_v2, 2026-09-08)
   #screeningFormOverlay -> a proper LIONSGATE modal: blurred backdrop,
   hairline panel, kicker labels, underline fields, outline buttons.
   ================================================================ */

/* backdrop */
#screeningFormOverlay.screening-form-overlay{
  background:rgba(22,61,104,.82);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  overflow-y:auto;padding:clamp(28px,6vh,72px) 20px;
}
#screeningFormOverlay .screening-form-wrapper{
  display:block;align-items:flex-start;padding:0;min-height:100%;
}

/* the modal panel */
#screeningFormOverlay .screening-form{
  width:min(560px,100%);max-width:560px;margin:0 auto;
  background:var(--lg-bg);border:1px solid var(--lg-line);
  padding:clamp(30px,4.5vw,52px);position:relative;border-radius:0;
  box-shadow:0 46px 100px -34px rgba(0,0,0,.85);
}

/* close */
#screeningFormOverlay #closeScreeningOverlayBtn.close-screening-overlay-btn{
  position:absolute;top:15px;right:16px;margin:0;padding:6px 4px;width:auto;min-width:0;
  background:transparent;border:0;color:var(--lg-grey-2);
  font-size:10px;font-weight:600;letter-spacing:.305em;text-transform:uppercase;cursor:pointer;
  transition:color .2s var(--lg-ease);
}
#screeningFormOverlay #closeScreeningOverlayBtn.close-screening-overlay-btn:hover{color:var(--lg-accent);}

/* header block */
#screeningFormOverlay .screeningForm__descSection .container{padding:0;max-width:none;}
#screeningFormOverlay .screening-form h2.text-center{margin:0 0 16px;padding:0;}
#screeningFormOverlay .screening-form h2.text-center .movie-tt{
  max-width:clamp(140px,42%,210px) !important;width:auto;margin:0 auto !important;
}
#screeningFormOverlay .screeningForm__descText,
#screeningFormOverlay .screeningsdetails{
  font-size:12px;line-height:1.75;color:var(--lg-grey);letter-spacing:.047em;
}
#screeningFormOverlay .screeningForm__descText p{margin:2px 0;}
#screeningFormOverlay .screeningForm__note{
  margin:16px 0 0;padding-top:16px;border-top:1px solid var(--lg-line);
  font-size:10px;font-weight:600;letter-spacing:.305em;text-transform:uppercase;color:var(--lg-grey-3);
}
#screeningFormOverlay .submitStatus{margin:14px 0 0;font-size:12px;color:var(--lg-accent);text-align:center;}
#screeningFormOverlay .submitStatus:empty{display:none;}

/* form layout */
#screeningFormOverlay #rsvpForm{margin-top:24px;--bs-gutter-x:0;--bs-gutter-y:0;}
/* lay out a screen ONLY when the RSVP JS has revealed it (jQuery .show() -> "display: block",
   .css('display','flex') -> "display: flex"); with no inline display it stays hidden by the
   base #loginScreen/#rsvpScreen{display:none} rule, so the password screen is hidden by default */
#screeningFormOverlay #rsvpScreen[style*="block"],
#screeningFormOverlay #rsvpScreen[style*="flex"],
#screeningFormOverlay #loginScreen[style*="block"],
#screeningFormOverlay #loginScreen[style*="flex"]{display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;align-items:stretch !important;gap:20px !important;width:100% !important;}
#screeningFormOverlay #rsvpScreen > *,
#screeningFormOverlay #loginScreen > *{width:100% !important;max-width:100% !important;flex:0 0 auto !important;padding:0 !important;margin:0 !important;}

/* labels + fields */
#screeningFormOverlay .form-label{
  display:block;margin:0 0 7px;font-size:10px;font-weight:600;letter-spacing:.279em;text-transform:uppercase;color:var(--lg-grey-2);
}
#screeningFormOverlay .form-control,
#screeningFormOverlay .form-select,
#screeningFormOverlay select,
#screeningFormOverlay input[type="text"],
#screeningFormOverlay input[type="email"],
#screeningFormOverlay input[type="password"]{
  width:100%;background:transparent !important;border:0 !important;border-bottom:1px solid var(--lg-line-2) !important;
  border-radius:0 !important;color:var(--lg-fg) !important;padding:10px 0 !important;font-size:14px;box-shadow:none !important;
  transition:border-color .2s var(--lg-ease);
}
#screeningFormOverlay .form-control:focus,
#screeningFormOverlay .form-select:focus,
#screeningFormOverlay select:focus,
#screeningFormOverlay input:focus{border-bottom-color:var(--lg-accent) !important;outline:0 !important;}
#screeningFormOverlay .form-select,#screeningFormOverlay select{
  -webkit-appearance:none;appearance:none;background-image:none !important;cursor:pointer;
}
#screeningFormOverlay select option{background:#1e4a7d;color:var(--lg-fg);}
#screeningFormOverlay ::placeholder{color:var(--lg-grey-3) !important;}

/* radios (Bringing Guest) */
#screeningFormOverlay #guestBlock .form-check{
  display:flex;align-items:center;gap:9px;padding:0;margin:0 0 8px;min-height:0;
}
#screeningFormOverlay .form-check-input{
  float:none;margin:0;width:14px;height:14px;accent-color:var(--lg-accent);
  background:transparent;border:1px solid var(--lg-line-2);
}
#screeningFormOverlay .form-check-input:checked{background-color:var(--lg-accent);border-color:var(--lg-accent);}
#screeningFormOverlay .form-check-label{
  font-size:14px;font-weight:500;letter-spacing:.032em !important;text-transform:none !important;color:var(--lg-fg) !important;margin:0;
}
#screeningFormOverlay #guestBlock > .form-label{margin-bottom:12px;}

/* buttons: submit + password validate */
#screeningFormOverlay #submitForm.button,
#screeningFormOverlay .submit-btn,
#screeningFormOverlay .btn-style,
#screeningFormOverlay #validateScreeningsPassword{
  display:inline-flex;align-items:center;justify-content:center;align-self:center;margin:6px auto 0;
  background:transparent;border:1px solid var(--lg-fg);color:var(--lg-fg);
  padding:15px 38px;font-size:11px;font-weight:600;letter-spacing:.356em;text-transform:uppercase;
  border-radius:0;width:auto;min-width:0;text-decoration:none;cursor:pointer;scale:1 !important;
  transition:background .2s var(--lg-ease),color .2s var(--lg-ease),border-color .2s var(--lg-ease);
}
#screeningFormOverlay #submitForm.button:hover,
#screeningFormOverlay .submit-btn:hover,
#screeningFormOverlay #validateScreeningsPassword:hover{
  background:var(--lg-accent);border-color:var(--lg-accent);color:#163d68;
}
#screeningFormOverlay .col-lg-8.col-12.text-center{text-align:center;}

/* login / password gate */
#screeningFormOverlay .loginScreenHeading{
  font-size:11px;font-weight:600;letter-spacing:.202em;text-transform:uppercase;color:var(--lg-grey-2);
  text-align:center;line-height:1.6;
}
#screeningFormOverlay #wrongPasswordMsg{font-size:11px;color:var(--lg-accent);text-align:center;}
#screeningFormOverlay .agegate-form-row-col select{margin-right:10px;display:inline-block;width:auto;min-width:90px;}

/* MOBILE - RSVP panel grows with its content and the overlay scrolls, instead of
   the legacy base's .screening-form{max-height:90vh;overflow-y:auto} nested box
   that clipped the Submit button on short viewports */
@media (max-width:768px){
  #screeningFormOverlay .screening-form{max-height:none;overflow:visible;}
  #screeningFormOverlay .screening-form-wrapper{min-height:100%;}
  #screeningFormOverlay.screening-form-overlay{padding:clamp(20px,4vh,40px) 16px;}
}

/* ================================================================
   MOBILE - footer contents centered as one stacked column
   (CONNECT heading + links share the page centre-line)
   ================================================================ */
@media (max-width:768px){
  .lg-footer__top{align-items:center;text-align:center;}
  .lg-footer__brand{max-width:none;display:flex;flex-direction:column;align-items:center;}
  .lg-footer__brand p,.lg-footer__copy{text-align:center;}
  .lg-footer__cols{justify-content:center;align-items:center;width:100%;gap:30px;}
  .lg-footer__col{display:flex;align-items:center;text-align:center;width:100%;}
  .lg-footer__col h4{width:100%;text-align:center;margin-left:0;padding-left:0;}
  .lg-footer__col a{text-align:center;}
}


/* ================================================================
   ACCOLADES + FYC + READ  — LIONSGATE restyle  (guild_v1 / guild_v2)
   ================================================================ */

/* centre heading -> kicker + hairlines */
#accoladesSection .section-center-heading,
#creditsSection .section-center-heading{
  display:flex;align-items:center;gap:22px;
  max-width:var(--lg-maxw);margin:0 auto clamp(30px,4vw,52px);padding:0 var(--lg-gutter);
}
#accoladesSection .section-center-heading-line,
#creditsSection .section-center-heading-line{flex:1;height:1px;background:var(--lg-line);}
#accoladesSection .section-center-heading h3,
#creditsSection .section-center-heading h3{
  margin:0 !important;font-size:14px !important;font-weight:700;letter-spacing:.408em;text-transform:uppercase;
  color:var(--lg-grey-2);white-space:nowrap;
}

/* FYC synopsis -> measured muted intro */
#creditsSection .credits-wrapper,
#accoladesSection .accolades-wrapper{max-width:var(--lg-maxw);margin:0 auto;padding:0 var(--lg-gutter);}
#creditsSection .credits-wrapper{padding:0;}
#creditsSection .movie-synopsis{width:100%;max-width:none;margin:0 0 clamp(34px,5vw,58px);text-align:center;}
#creditsSection .movie-synopsis p{
  margin:0;font-size:14px;line-height:1.9;color:var(--lg-grey);letter-spacing:.035em;
}

/* category grid (FYC + inside accolades) */
#creditsSection .credits-content .row,
#accoladesSection .accordion-body .row{
  --bs-gutter-x:clamp(20px,3vw,48px);--bs-gutter-y:0;
}
#creditsSection .category,
#accoladesSection .category{
  text-align:left;padding:18px 0 20px;border-top:1px solid var(--lg-line);
}
#creditsSection .credits-content .row > [class*="col-"] > .category:first-child,
#accoladesSection .accordion-body .row > [class*="col-"] > .category:first-child{border-top:0;}
#creditsSection .credits-content .row > [class*="col-"] > br,
#accoladesSection .accordion-body .row > [class*="col-"] > br{display:none;}
#creditsSection .category-name,
#accoladesSection .category-name{
  margin:0 0 7px;font-size:11px;font-weight:700;letter-spacing:.227em;text-transform:uppercase;
  color:var(--lg-fg);line-height:1.35;text-align:left;
}
#creditsSection .category-sub-title,
#accoladesSection .category-sub-title{
  margin:0 0 3px;font-size:10px;font-style:italic;letter-spacing:.059em;color:var(--lg-grey-3);text-align:left;
}
#creditsSection .category-person-names,
#accoladesSection .category-person-names{
  margin:0;font-size:13.5px;line-height:1.75;color:var(--lg-grey) !important;letter-spacing:.035em;text-align:left;
}

/* accolades accordion -> hairline list, gold on open */
#accoladesSection .accolades-content .accordion{width:100%;max-width:var(--lg-maxw);margin:0 auto;}
#accoladesSection .accordion-item{background:transparent;border:0;border-bottom:1px solid var(--lg-line);}
#accoladesSection .accordion-header{margin:0;}
#accoladesSection .accordion-button{
  width:100% !important;display:flex !important;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 0 !important;background:transparent !important;box-shadow:none !important;border-radius:0 !important;
  font-size:clamp(14px,1.5vw,18px);font-weight:700;letter-spacing:.124em;text-transform:uppercase;
  color:var(--lg-grey) !important;transition:color .18s var(--lg-ease);
}
/* white/grey at rest, gold only on hover (accordions render expanded by default,
   so :not(.collapsed) would paint every row gold) */
#accoladesSection .accordion-button:hover,
#accoladesSection .accordion-button:focus-visible{color:var(--lg-accent) !important;}
#accoladesSection .accordion-button::after{
  margin-left:auto;flex:0 0 auto;filter:grayscale(1) brightness(2);opacity:.5;
}
#accoladesSection .accordion-button:not(.collapsed)::after{opacity:.9;}
#accoladesSection .accordion-button:focus{box-shadow:none !important;border-color:transparent;}
#accoladesSection .accordion-body{padding:2px 0 24px;}

/* READ cards -> hairline tiles */
#readSection .conversations-thumb-wrapper::before{
  content:none;display:none;
  font-size:14px;font-weight:700;letter-spacing:.408em;text-transform:uppercase;color:var(--lg-grey-2);
  padding-bottom:14px;margin-bottom:clamp(10px,1.4vw,16px);border-bottom:1px solid var(--lg-line);
}
#readSection .conversations-thumb-wrapper .row{
  --bs-gutter-x:clamp(16px,2.2vw,28px);--bs-gutter-y:0;row-gap:clamp(20px,2.6vw,32px);margin-top:0;
}
#readSection .conversations-thumb-wrapper .row > *{padding-top:0;}
#readSection .card{
  background:var(--lg-bg-2);border:1px solid var(--lg-line);border-radius:0;overflow:hidden;height:100%;
  transition:border-color .2s var(--lg-ease),transform .2s var(--lg-ease);
}
#readSection .card:hover{border-color:var(--lg-line-2);transform:translateY(-2px);}
#readSection .card > a{display:block;text-decoration:none;color:inherit;}
#readSection .card-img-top{border-radius:0;display:block;width:100%;height:auto;}
#readSection .card-body{padding:clamp(15px,1.5vw,20px);}
#readSection .card-title{
  margin:0 0 8px;font-size:12.5px;font-weight:650;line-height:1.45;color:var(--lg-fg);letter-spacing:.035em;
}
#readSection .card-text{margin:0;font-size:11.5px;line-height:1.7;color:var(--lg-grey-2);}

@media (max-width:768px){
  #accoladesSection .section-center-heading,
  #creditsSection .section-center-heading{gap:14px;}
  #creditsSection .movie-synopsis{text-align:left;}
}


/* MOBILE - section-nav hamburger sits BELOW the sticky header (not beside the
   logo). #navIcon lives in #navHeader/.bottom-nav (position:sticky z:40, a
   stacking context under the header z:60) so lift that context, then float the
   40x40 icon as a small chip just under the header edge, hard left. */
@media (max-width:900px){
  .bottom-nav,#navHeader{
    z-index:80 !important;
    /* the icon row itself had no background, so whatever scrolled behind
       it (e.g. the video player) showed through across its full width,
       not just around the 40x38 icon box */
    background:var(--lg-bg) !important;
  }
  #navIcon{
    /* was position:fixed - a fixed box has NO footprint in the document,
       so it floated over whatever page copy (e.g. the "VIDEOS" heading)
       happened to scroll underneath it. #navHeader is already the sticky
       element (stuck just under the header, above); let the icon sit in
       NORMAL FLOW inside it instead of adding its own independent fixed/
       sticky offset, so it reserves real space and rides along with its
       parent with no separate viewport math of its own. */
    position:relative !important;top:auto !important;left:auto !important;right:auto !important;
    transform:none !important;width:40px;height:38px;z-index:90;display:block !important;
    margin:14px 0 14px 12px;
    background:var(--lg-bg);border:0;border-radius:0;box-shadow:none;
  }
  #navIcon span{background:var(--lg-fg) !important;}
  /* header (z:60) and #navHeader/.bottom-nav (z:80, above) are separate
     sticky siblings - the MOVIES dropdown lives inside header, so its
     open .dropdown-menu (z:1000) is still capped by header's own z:60
     stacking context and was rendering BEHIND .bottom-nav's blue bar,
     hiding the first item ("MICHAEL"). Lift header above .bottom-nav
     only while the dropdown is open. */
  header:has(.dropdown-menu.show){z-index:95 !important;}
  /* open drawer: start the list below the floating X chip */
  .navIsActive .nav-container{
    padding-top:24px !important;
    /* #navHeader (sticky) is the containing block; top:100% anchors this
       right below its own box - i.e. right below the icon row - however
       tall that row currently renders, at any scroll position. Content-
       sized (NOT stretched to fill the screen) - the page below the link
       list should stay visible/scrollable underneath, same as before. */
    position:absolute !important;top:100% !important;left:0 !important;right:0 !important;
    background:var(--lg-bg) !important;z-index:55;
  }
}


/* ================================================================
   CONVERSATIONS (#videoSection) - LIONSGATE restyle (guild_v2)
   ================================================================ */

/* section headings ("CONVERSATIONS", "Videos", "PODCASTS") -> kicker + hairline,
   matching the Accolades / FYC treatment */
#videoSection .video-section-heading .col-12,
#videoSection .conversations-thumb > .section-heading{
  display:flex !important;align-items:center;gap:22px;
  max-width:var(--lg-maxw);margin:0 auto clamp(22px,3vw,36px);
}
#videoSection .video-section-heading .row{margin:0;}
#videoSection .video-section-heading h3,
#videoSection .conversations-thumb > .section-heading h4{
  margin:0 !important;font-size:14px !important;font-weight:700 !important;letter-spacing:.408em;text-transform:uppercase;
  color:var(--lg-grey-2);white-space:nowrap;line-height:1;
}
#videoSection .conversations-thumb > .section-heading h4 strong{font-weight:700;}
#videoSection .video-section-heading .heading-line,
#videoSection .conversations-thumb > .section-heading .heading-line{
  flex:1 1 auto;height:1px;background:var(--lg-line);border:0;margin:0;min-width:24px;
}

/* featured trailer + its caption */
#videoSection .video-content-wrapper{max-width:var(--lg-maxw);margin:0 auto;}
#videoSection .video-side-content{padding-top:clamp(14px,2vw,22px);}
#videoSection .video-side-content h3,
#videoSection .video-side-content-wrapper h2{
  margin:0 0 10px !important;font-size:14px !important;font-weight:700 !important;letter-spacing:.227em;
  text-transform:uppercase;color:var(--lg-fg);line-height:1.3;
}
#videoSection .video-side-content-wrapper p{
  margin:0;font-size:13.5px;line-height:1.8;color:var(--lg-grey);
}
#videoSection .video-side-content p{
  margin:0;font-size:13.5px;line-height:1.8;color:var(--lg-grey);
}
#videoSection .video-side-content .button{margin-top:18px;}

/* the "Videos" / "Podcasts" thumbnail rail -> hairline tiles (matches READ cards) */
#videoSection .conversations-thumb{margin-top:clamp(32px,4.5vw,56px);}
/* wrap the video cards to the next line - no horizontal scroll rail */
#videoSection .conversations-thumb .row,
#videoSection #videoSliderNav{
  flex-wrap:wrap !important;overflow:visible !important;align-items:stretch;
  row-gap:clamp(24px,3vw,40px);column-gap:clamp(16px,2vw,28px);
}
#videoSection .videosSection__sliderNavItem{
  flex:0 0 auto !important;width:clamp(240px,calc(25% - 21px),300px) !important;max-width:none;
  height:auto !important;display:flex;
}
#videoSection .conversations-thumb-wrapper .card,
#videoSection .conversations-thumb-wrapper .videosSection__sliderNavItem .card{
  background:var(--lg-bg-2);border:1px solid var(--lg-line);border-radius:0;overflow:hidden;
  height:auto;display:flex;flex-direction:column;
  transition:border-color .2s var(--lg-ease),transform .2s var(--lg-ease);
}
#videoSection .conversations-thumb-wrapper .card:hover{border-color:var(--lg-line-2);transform:translateY(-2px);}
#videoSection .conversations-thumb-wrapper .card-img-top{border-radius:0;display:block;width:100%;height:auto;}
#videoSection .conversations-thumb-wrapper .card-body{padding:clamp(14px,1.4vw,18px);}
#videoSection .conversations-thumb-wrapper .card-title{
  margin:0 0 7px !important;font-size:15px !important;font-weight:650;line-height:1.4;
  color:var(--lg-fg);letter-spacing:.028em;
}
#videoSection .conversations-thumb-wrapper .card-text{
  margin:0 !important;font-size:13px !important;line-height:1.6;color:var(--lg-grey-2);
}
#videoSection .conversations-thumb-wrapper .thumb_play_btn{opacity:.9;}


/* ================================================================
   MUSIC / LISTEN (#listenSection) - LIONSGATE restyle (guild forks)
   Song/score cards -> hairline tiles matching READ / VIDEOS.
   ================================================================ */
#listenSection .listen-wrapper{max-width:var(--lg-maxw);margin:0 auto;padding:0;}
#listenSection .listen-wrapper::before{
  content:"MUSIC";display:block;
  font-size:14px;font-weight:700;letter-spacing:.408em;text-transform:uppercase;color:var(--lg-grey-2);
  padding-bottom:16px;margin-bottom:clamp(24px,3.5vw,40px);border-bottom:1px solid var(--lg-line);
}
#listenSection .listen-wrapper > .row{
  --bs-gutter-x:clamp(16px,2vw,26px);row-gap:clamp(18px,2.4vw,28px);align-items:stretch;
}
#listenSection .listenSlider__item{margin-top:0 !important;margin-bottom:0 !important;display:flex;}
#listenSection .listen{
  background:var(--lg-bg-2);border:1px solid var(--lg-line);border-radius:0;
  padding:clamp(16px,1.6vw,22px);width:100%;display:flex;flex-direction:column;gap:14px;
  transition:border-color .2s var(--lg-ease);
}
#listenSection .listen:hover{border-color:var(--lg-line-2);}
#listenSection .listen-audio-wrapper,
#listenSection .audio-player,
#listenSection .music__player,
#listenSection .jw-player{width:100%;}
#listenSection .listen-details{display:flex;flex-direction:column;gap:9px;}
#listenSection .audio-name{
  margin:0;font-size:15px;font-weight:650;line-height:1.35;color:var(--lg-fg);letter-spacing:.028em;
}
#listenSection .audio-name:empty{display:none;}
#listenSection .audio-text{
  margin:0;font-size:13px;line-height:1.55;color:var(--lg-grey-2);
}
#listenSection .audio-text span{
  display:block;margin-bottom:3px;font-size:10px;font-weight:700;letter-spacing:.279em;
  text-transform:uppercase;color:var(--lg-grey-3);
}
#listenSection .audio-text br{display:none;}
#listenSection .podcastplaybtn a{
  display:inline-flex;align-items:center;margin-top:6px;
  font-size:10px;font-weight:700;letter-spacing:.33em;text-transform:uppercase;color:var(--lg-grey);
  border:1px solid var(--lg-fg);padding:9px 20px;text-decoration:none;
  transition:background .2s var(--lg-ease),color .2s var(--lg-ease),border-color .2s var(--lg-ease);
}
#listenSection .podcastplaybtn a:hover{background:var(--lg-accent);border-color:var(--lg-accent);color:#163d68;}


/* ================================================================
   CONVERSATIONS - featured trailer still-frame  (guild_v2)
   the featured video area is filled by a JS-injected YouTube iframe;
   paint the trailer poster behind it so the holder is never an empty
   black rectangle (slow / blocked / not-yet-initialised embed). The
   actual poster image now comes from the XML (film/index.php sets it
   as an inline background-image per film) — this rule only supplies
   the #000/cover/no-repeat base, no hardcoded per-film path.
   ================================================================ */
#videoSection .video_box_wrapper .yt-video-box{
  background:var(--lg-bg-2) center/cover no-repeat;
}
#videoSection .video_box_wrapper .yt-video-wrapper,
#videoSection .video_box_wrapper .yt-video-outer,
#videoSection .video_box_wrapper .yt-video{background:transparent;}

/* ================================================================
   SCREENINGS - "check back soon" empty state
   Was a 25px / 800 uppercase headline; dial it down to a calm muted
   line so an empty section does not shout.
   ================================================================ */
#screeningSection .section__subheading{
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:.202em !important;
  line-height:1.5 !important;
  text-transform:uppercase;
  color:var(--lg-grey-2) !important;
  text-align:center;
  padding:clamp(28px,6vw,56px) 0;
}

/* ================================================================
   RSVP FORM - field rendering fixes
   Legacy `input.form-control,.form-select,.form-check-label{
   filter:brightness(0) invert(1)}` inverts the fields - harmless on a
   transparent field, but it inverts Chrome's autofill background into
   a solid white block (the email field) and can blow up the native
   <select> text. Kill the filter, pin the size, keep autofill on theme.
   ================================================================ */
#screeningFormOverlay .form-control,
#screeningFormOverlay .form-select,
#screeningFormOverlay select,
#screeningFormOverlay .form-check-label,
#screeningFormOverlay input,
#screeningFormOverlay textarea{
  filter:none !important;
  font-size:14px !important;
  line-height:1.4 !important;
  font-weight:500 !important;
}
#screeningFormOverlay input:-webkit-autofill,
#screeningFormOverlay input:-webkit-autofill:hover,
#screeningFormOverlay input:-webkit-autofill:focus,
#screeningFormOverlay input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 100px var(--lg-bg) inset !important;
  -webkit-text-fill-color:var(--lg-fg) !important;
  caret-color:var(--lg-fg);
  border:0 !important;border-bottom:1px solid var(--lg-line-2) !important;
  border-radius:0 !important;
}

/* ================================================================
   lg-SINGLE landing - cross-hover
   v1 keys its rollover on the whole .lg-split-row, so hovering the
   title or the ENTER button lights up both. v2's title (.lg-single-hero)
   and button (.lg-single-btn) are separate elements. Bridge them so
   hovering EITHER triggers BOTH cues (button -> gold, title -> zoom).
   ================================================================ */
.lg-single-stage:has(.lg-single-hero:hover, .lg-single-btn:hover) .lg-single-btn{
  background:var(--lg-accent) !important;border-color:var(--lg-accent) !important;color:#163d68 !important;
}
.lg-single-stage:has(.lg-single-hero:hover, .lg-single-btn:hover) .lg-single-btn i{
  transform:translateX(5px);
}
.lg-single-stage:has(.lg-single-hero:hover, .lg-single-btn:hover) .lg-single-hero img{
  transform:scale(1.05);
}
/* multi-film list hover — rebuilt (v2): a full, even scrim over the
   whole poster (not just a bottom gradient) guarantees the button
   reads regardless of the art underneath, so the button no longer
   needs its own background chip. Dropped the poster's own scale-up
   (a moving image behind a solid scrim just looked like a glitch) and
   the box-shadow lift (didn't read against the hard card border) in
   favour of a single clear state change: scrim + centred button, plus
   the border going brighter. */
.lg-single-films .lg-single-row{transition:border-color .3s var(--lg-ease);overflow:hidden;}
.lg-single-films .lg-single-row::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:rgba(8,18,32,.55);
  opacity:0;transition:opacity .3s var(--lg-ease);
}
/* .lg-single-stage and .lg-single-row are the same element (both
   classes on one div) — no space between them, or this becomes a
   (non-matching) descendant selector instead of qualifying the same
   node the :has() just matched. */
.lg-single-films .lg-single-stage.lg-single-row:has(.lg-single-hero:hover, .lg-single-btn:hover){
  border-color:var(--lg-accent);
}
.lg-single-films .lg-single-stage.lg-single-row:has(.lg-single-hero:hover, .lg-single-btn:hover)::after{
  opacity:1;
}
/* multi-film list: Enter is an absolute overlay on the poster
   (.lg-single-cta), hidden until rollover — fade/scale it in with the
   same cross-hover trigger. */
.lg-single-films .lg-single-stage:has(.lg-single-hero:hover, .lg-single-btn:hover) .lg-single-cta{
  opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);
}
.lg-single-films .lg-single-cta{z-index:2;}
/* row now clips overflow so the zoomed poster stays inside its own
   card frame instead of spilling past the border into neighbours. */
.lg-single-films .lg-single-stage:has(.lg-single-hero:hover, .lg-single-btn:hover) .lg-single-hero img{
  transform:scale(1.08);
}
/* the title image itself never had a transition, so the cross-hover
   scale above snapped instantly instead of easing (v1's poster easing
   was already fixed - bring v2's title image up to the same smoothness) */
.lg-single-hero img{
  transform-origin:center center;
  transition:transform .32s var(--lg-ease);
  will-change:transform;backface-visibility:hidden;
}

/* ================================================================
   GUILD PASS CIRCUIT  (#guildPassSection) - LIONSGATE restyle
   kicker heading + full width; each venue is a hairline-topped block
   with an uppercase label above the CITIES / GUILDS / RESTRICTIONS trio
   ================================================================ */
#guildPassSection .section-center-heading{
  display:flex;align-items:center;gap:22px;
  max-width:var(--lg-maxw);margin:0 auto clamp(30px,4vw,52px);padding:0 var(--lg-gutter);
}
#guildPassSection .section-center-heading-line{flex:1;height:1px;background:var(--lg-line);}
#guildPassSection .section-center-heading h3{
  margin:0 !important;font-size:14px !important;font-weight:700;letter-spacing:.408em;text-transform:uppercase;
  color:var(--lg-grey-2);white-space:nowrap;
}
#guildPassSection .guild-pass-wrapper{
  width:100% !important;max-width:var(--lg-maxw);margin:0 auto;padding:0 var(--lg-gutter);
}
#guildPassSection .guild-pass-content{margin-top:0 !important;}

/* one venue per .row */
#guildPassSection .guild-pass-content > .row{
  --bs-gutter-x:clamp(20px,3vw,48px);--bs-gutter-y:clamp(10px,1.4vw,18px);
  margin:0 !important;padding:clamp(24px,3vw,38px) 0;
  border-top:1px solid var(--lg-line);align-items:start;
}
#guildPassSection .guild-pass-content > .row:first-of-type{border-top:0;padding-top:0;}

/* venue name */
#guildPassSection .theater-name{
  flex:0 0 100%;width:100%;margin:0 0 clamp(14px,1.8vw,22px) !important;padding:0;
  font-size:12px !important;font-weight:700 !important;letter-spacing:.279em;line-height:1.3;
  text-transform:uppercase;color:var(--lg-fg);text-align:left !important;
  text-decoration:none !important;border:0 !important;
}

/* CITIES / GUILDS / RESTRICTIONS columns */
#guildPassSection .category{text-align:left;padding:0;border:0;background:none;}
#guildPassSection .category-name{
  margin:0 0 7px;font-size:11px;font-weight:700;letter-spacing:.227em;text-transform:uppercase;
  color:var(--lg-fg);line-height:1.35;text-align:left;
}
#guildPassSection .category-person-names{
  margin:0;font-size:13px;line-height:1.7;color:var(--lg-grey) !important;letter-spacing:.035em;text-align:left;
}

@media (max-width:768px){
  #guildPassSection .section-center-heading{gap:14px;}
}

/* ================================================================
   Landing hero banner  (topcarousal/hero_slider.jpg)
   full-bleed image above the film list, fading into the page.
   ================================================================ */
.lg-hero{
  position:relative;width:100%;margin:0;padding:0;
  line-height:0;background:var(--lg-bg);overflow:hidden;
}
.lg-hero__img{
  display:block;width:100%;height:auto;
  max-height:min(54vh,500px);object-fit:cover;object-position:50% 0%; /* crop only from the bottom - never the top */
}
.lg-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(rgba(10,10,10,0),var(--lg-bg));pointer-events:none;
}

/* ================================================================
   Landing (lg-single) - sit the title / ENTER right under the hero
   rather than vertically centred in a flex-grown section.
   ================================================================ */
.lg-single-landing.title-section{
  justify-content:flex-start !important;
  padding-top:clamp(8px,1.6vh,18px) !important;
  padding-bottom:clamp(30px,5vh,56px) !important;
}

/* ================================================================
   GALLERY LIGHTBOX - true fullscreen modal (parity with the RSVP
   overlay). Legacy .gallery-slider-overlay sits at z-index:15, below
   the .lg-split fixed left rail (z-index:35), so the rail clipped
   ~214px off the left of the gallery. Lift it above every nav layer
   and stop .section-container reserving rail / gutter space.
   ================================================================ */
#gallerySliderOverlay.gallery-slider-overlay{
  z-index:99999999;
  background:rgba(51,86,135,.97);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
/* #gallerySlider is slick-initialized at page load, while the overlay
   itself is still hidden (display:none) - slick reads a 0-width
   container at that point, so the very first time it's revealed, the
   track is still mis-sized for a moment (the flash of an empty/broken
   layout this covers). main.js forces a slick('setPosition') recalc
   right after revealing the overlay, and keeps this preloader up until
   that recalc's next paint, matching the same spinner used on the hero
   slider's own .slider-preloader for visual consistency. */
.gallery-slider-preloader{
  position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  background:rgba(51,86,135,.97);
}
.gallery-slider-preloader.hidden{display:none;}
#gallerySliderOverlay .section-container{
  width:100%;max-width:none;padding-left:0;padding-right:0;
}
#gallerySliderOverlay .gallery-slider-overlay-wrapper{
  width:min(1180px,90vw);
}
/* prev / next - pinned to the viewport edges (the legacy -10% offset
   fell off-screen once the wrapper was widened for the fullscreen modal) */
#gallerySliderOverlay .slide-arrow{
  position:fixed;top:50%;transform:translateY(-50%);
  left:auto;right:auto;margin:0;padding:0;border:0;background:transparent;
  width:46px;height:46px;z-index:3;opacity:.75;cursor:pointer;
  transition:opacity .2s var(--lg-ease);
}
#gallerySliderOverlay .slide-arrow:hover{opacity:1;}
#gallerySliderOverlay .slide-arrow.prev-arrow{left:clamp(8px,1.6vw,24px);}
#gallerySliderOverlay .slide-arrow.next-arrow{right:clamp(8px,1.6vw,24px);}
#gallerySliderOverlay .slide-arrow img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));
}
/* single hairline frame around the visible slide - was on each <img>, which
   doubled across slick clones and collided with the edge-pinned arrows */
#gallerySliderOverlay .gallery-img img{border:0;padding:0;}
#gallerySliderOverlay #gallerySlider .slick-list{border:1px solid var(--lg-line-2);}
/* desktop only - the mobile close X keeps its own tuned offset
   (base rule, max-width:992px) so it doesn't sit over the image */
@media (min-width:993px){
  #gallerySliderOverlay #closeGalleryOverlay{top:-7%;}
}
/* --- HEADER › tagline (.nav-left-text, markup in includes/header*.php) ---
   "for your consideration 2026" now stacks BELOW the logo instead of
   sitting beside it with a vertical divider. */
.nav-left{flex-direction:column;align-items:flex-start;gap:6px;}
.nav-left-text{padding-left:0;}
.nav-left-text::before{content:none;} /* was the vertical divider between logo and tagline */
/* --- FOOTER (.lg-footer__*, markup in includes/footer.php) — matched to
   screenings' layout: one centered stack (logo, link row, copyright).
   bw keeps its Follow/social-icon row (screenings doesn't have one) —
   added centered, same minimal style, between the links and copyright. */
.lg-footer__top{
  flex-direction:column;align-items:center;text-align:center;gap:22px;
  padding-bottom:0;border-bottom:0;
}
.lg-footer__brand{max-width:none;}
.lg-footer__brand img{margin-bottom:0;height:20px;}
.lg-footer__cols{justify-content:center;gap:0;}
.lg-footer__cols .lg-footer__col{
  display:flex;align-items:center;flex-wrap:wrap;justify-content:center;
}
.lg-footer__cols .lg-footer__col a{
  display:inline-block;margin:0;padding:0 18px;border-right:1px solid var(--lg-line-2);
}
.lg-footer__cols .lg-footer__col a:last-child{border-right:0;}
.lg-footer__social{justify-content:center;}
.lg-footer__top .lg-footer__copy{margin:0 !important;padding-top:0;width:100%;}
@media (max-width:480px){
  .lg-footer__cols .lg-footer__col a{border-right:0;padding:6px 14px;}
}
/* "for your consideration 2026" (.nav-left-text) was hidden entirely
   below 680px by a legacy mobile rule — now that it stacks below the
   logo (see .nav-left{flex-direction:column} above), show it on mobile
   too instead of dropping it. */
@media (max-width:680px){.nav-left-text{display:block;letter-spacing: .032em;}}

/* #siteBg (the per-section backplate photo) is already a fixed,
   full-viewport, z-index:-1 layer behind everything — the header is
   just an opaque navy box painted on top of it. Where the header ends,
   the photo appears with a hard, sudden edge, reading as a separate
   segregated patch instead of a continuous backdrop. Fade #siteBg's
   own top edge to transparent so the exposed photo emerges softly
   from behind the header into the page's own navy (visible through
   the transparency, since #siteBg sits behind body) instead of
   snapping on abruptly. (v2 has no fixed left rail — top fade only.)
   ================================================================ */
#siteBg{
  opacity:.6;
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0,rgba(0,0,0,.25) 70px,rgba(0,0,0,.7) 150px,#000 240px,#000 calc(100% - 240px),rgba(0,0,0,.7) calc(100% - 150px),rgba(0,0,0,.25) calc(100% - 70px),transparent 100%),
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.2) 4%,rgba(0,0,0,.6) 10%,#000 18%,#000 82%,rgba(0,0,0,.6) 90%,rgba(0,0,0,.2) 96%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom,transparent 0,rgba(0,0,0,.25) 70px,rgba(0,0,0,.7) 150px,#000 240px,#000 calc(100% - 240px),rgba(0,0,0,.7) calc(100% - 150px),rgba(0,0,0,.25) calc(100% - 70px),transparent 100%),
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.2) 4%,rgba(0,0,0,.6) 10%,#000 18%,#000 82%,rgba(0,0,0,.6) 90%,rgba(0,0,0,.2) 96%,transparent 100%);
  mask-composite:intersect;
}
/* Video player + video-list panel background — matched to Teaser_v1's
   fix: legacy near-black (.conversations-thumb translucent black
   panel, JW Player's own bundled-skin black) swapped for the site's
   navy tokens. */
#videoSection .conversations-thumb{background:var(--lg-bg-2) !important;}
#videoSection .jw-preview,
#videoSection .jw-media,
#videoSection .jwplayer{background-color:var(--lg-bg-2) !important;}
/* Video holder graceful fallback (videos.js): when a video's source
   fails (dead CDN link, unsupported format), show the poster image +
   a short message instead of JW Player's default blank black box.
   Not scoped under .html-video — JW Player's setup() replaces that
   class on the container with its own jwplayer/jw-* classes. */
.video-wrapper{position:relative;}
.video-fallback-poster{width:100%;height:100%;object-fit:cover;display:block;}
.video-fallback-msg{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px 14px;
  background:rgba(7,17,31,.75);
  color:var(--lg-fg);
  font-size:13px;
  letter-spacing:.059em;
  text-align:center;
}
/* ===================== END LIONSGATE REDESIGN LAYER ===================== */

/* Lato letter-spacing (2026-09-25): Lato sets tighter than the previous
   face, so open the default tracking a little. Elements that declare their
   own letter-spacing (labels, buttons, headings) are unaffected. */
body{letter-spacing:.04em;}

/* Top header bar color (2026-09-25): solid #163d68, independent of the page background. */
header,header .top-nav,.top-nav,#mainBody header,#mainBody header .top-nav,#mainBody .top-nav,.landing-page header,.landing-page header .top-nav{background:#163d68 !important;}


/* Active section-nav tab fill (2026-09-25): #163d68. */
body .nav-link.active,body .nav-link.active:hover{background:#163d68 !important;}


/* Mobile fixes (2026-09-28): (1) header tagline was nowrap with wide tracking and pushed the
   MOVIES button past the viewport (horizontal scroll); (2) the open-menu close (X) icon sat on top
   of the first drawer item; (3) guard against any remaining horizontal overflow. */
html{overflow-x:hidden;}
body{overflow-x:clip;}
@media (max-width:600px){
  .top-nav-wrapper,.nav-left{min-width:0;}
  .nav-left-text{letter-spacing:.5vw !important;}
}
@media (max-width:380px){
  .nav-left-text{font-size:9px;}
}
@media (max-width:900px){
  /* was padding-top:66px, from when .nav-container still needed its own
     offset to clear the X icon; now that .navIsActive .nav-container is
     anchored with top:100% right below #navHeader (which already
     contains the X row), the extra 66px just left a gap above
     "SCREENINGS" - drop back to the drawer's own 24px top padding. */
  body .bottom-nav .nav-container{padding-top:24px !important;}
}

/* ================================================================
   AWARDS section restyle (2026-09-28) - was "Accolades".
   Each award group is a bordered card; its categories sit in tiles.
   ================================================================ */
#accoladesSection .accolades-wrapper{padding-top:clamp(8px,2vw,24px);}
#accoladesSection .accolades-content .accordion{display:flex;flex-direction:column;gap:14px;}
#accoladesSection .accordion-item{
  background:var(--lg-bg-2);border:1px solid var(--lg-line);border-left:1px solid var(--lg-line-2);border-radius:0;
  transition:background .25s var(--lg-ease),border-color .25s var(--lg-ease);
}
#accoladesSection .accordion-item:hover{background:var(--lg-bg-3);border-color:var(--lg-line-2);border-left-color:var(--lg-accent);}
#accoladesSection .accordion-button{
  padding:clamp(18px,2vw,26px) clamp(18px,2.4vw,32px) !important;
  font-size:clamp(13px,1.3vw,16px);letter-spacing:.2em;color:var(--lg-fg) !important;
}
#accoladesSection .accordion-button:hover,
#accoladesSection .accordion-button:focus-visible{color:var(--lg-fg) !important;}
#accoladesSection .accordion-body{padding:0 clamp(18px,2.4vw,32px) clamp(18px,2vw,28px);}
#accoladesSection .accordion-body .row{--bs-gutter-x:14px;--bs-gutter-y:14px;row-gap:14px;}
#accoladesSection .category{
  height:100%;box-sizing:border-box;padding:16px 18px 18px;margin:0 0 14px;
  background:rgba(255,255,255,.05);border:1px solid var(--lg-line);
}
#accoladesSection .accordion-body .row > [class*="col-"] > .category:first-child{border-top:1px solid var(--lg-line);}
#accoladesSection .category-name{
  margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--lg-line);
  font-size:11px;letter-spacing:.24em;color:var(--lg-fg);
}
#accoladesSection .category-person-names{font-size:14px;color:var(--lg-fg) !important;}

/* Awards fix (2026-09-28): tiles were forced to the full column height (height:100%), which left large
   empty tiles and pushed later rows down over the next award card. Let each tile size to its content. */
#accoladesSection .category{height:auto;}
#accoladesSection .accordion-body .row{align-items:flex-start;}
#accoladesSection .accordion-collapse.show,#accoladesSection .accordion-collapse.collapsing{height:auto;}

/* Awards (2026-09-28): every award group stays open and the headers are not clickable. */
#accoladesSection .accordion-button{pointer-events:none;cursor:default;}
#accoladesSection .accordion-button::after{display:none !important;}
#accoladesSection .accordion-collapse{display:block !important;height:auto !important;visibility:visible !important;}

/* ================================================================
   AWARDS (guild v2): laurel leaves either side of each group title, and a trophy (wins)
   or star (nominations) beside every category. The win/nomination class is set in film/index.php.
   ================================================================ */
#accoladesSection .accordion-item .accordion-button{
  justify-content:center;text-align:center;gap:clamp(10px,1.8vw,22px);
}
#accoladesSection .accordion-item .accordion-button::before,
#accoladesSection .accordion-item .accordion-button::after{
  content:"" !important;display:block !important;flex:0 0 auto;margin:0 !important;position:static !important;
  height:clamp(52px,5.4vw,76px);aspect-ratio:74/120;width:auto;
  background:url("../img/laurels.png") no-repeat;background-size:312.2% 100%;
  filter:brightness(0) invert(1);opacity:.92;transform:none !important;rotate:none !important;scale:none !important;translate:none !important;
}
#accoladesSection .accordion-item .accordion-button::before{background-position:left center;}
#accoladesSection .accordion-item .accordion-button::after{background-position:right center;}
#accoladesSection .category-name{display:flex;align-items:center;gap:9px;}
#accoladesSection .category-name::before{
  content:"";flex:0 0 auto;width:16px;height:16px;background-position:center;background-repeat:no-repeat;background-size:contain;
}
#accoladesSection .award-win .category-name::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='white'%3E%3Ccircle cx='8' cy='6' r='4'/%3E%3Cpath d='M5 9.5L3.6 15 8 13l4.4 2L11 9.5z' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");}
#accoladesSection .award-nom .category-name::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='white' stroke-width='1.2' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='6' r='4'/%3E%3Cpath d='M5 9.5L3.6 15 8 13l4.4 2L11 9.5'/%3E%3C/g%3E%3C/svg%3E");}


/* ================================================================
   SECTION HEADINGS (2026-09-28): every section on the film page opens with the same centred title
   between two hairlines - Screenings, Videos, Read, Gallery, Awards and FYC.
   ================================================================ */
:is(#screeningSection,#videoSection,#readSection,#gallerySection,#accoladesSection,#creditsSection) .section-center-heading{
  display:flex;align-items:center;justify-content:center;gap:22px;
  max-width:var(--lg-maxw);margin:0 auto clamp(26px,3.6vw,46px);padding:0;
}
:is(#screeningSection,#videoSection,#readSection,#gallerySection,#accoladesSection,#creditsSection) .section-center-heading-line{
  flex:1 1 auto;height:1px;background:var(--lg-line);border:0;min-width:24px;
}
:is(#screeningSection,#videoSection,#readSection,#gallerySection,#accoladesSection,#creditsSection) .section-center-heading h3{
  margin:0 !important;font-size:14px !important;font-weight:700;letter-spacing:.408em;line-height:1;text-transform:uppercase;
  color:var(--lg-grey-2);white-space:nowrap;
}
@media (max-width:700px){
  :is(#screeningSection,#videoSection,#readSection,#gallerySection,#accoladesSection,#creditsSection) .section-center-heading{gap:14px;}
  :is(#screeningSection,#videoSection,#readSection,#gallerySection,#accoladesSection,#creditsSection) .section-center-heading h3{letter-spacing:.3em;}
}

/* Section headings: fill the full content width in every section (some parents are flex rows, and the
   Awards wrapper carries its own side padding), so the hairlines end at the same edges everywhere. */
:is(#screeningSection,#videoSection,#readSection,#gallerySection,#accoladesSection,#creditsSection) .section-center-heading{
  width:100%;flex:0 0 100%;box-sizing:border-box;
}
#accoladesSection .accolades-wrapper .section-center-heading{
  width:calc(100% + 2 * var(--lg-gutter));max-width:none;flex:0 0 auto;margin-left:calc(-1 * var(--lg-gutter));margin-right:0;
}

/* FYC synopsis panel background (2026-09-28) */
#creditsSection .movie-synopsis{background:var(--lg-bg-2);}

/* FYC synopsis panel - same look as guild v1: 8px padding, 5px corners, hairline border. */
#creditsSection .movie-synopsis{
  background:var(--lg-bg-2);padding:15px;border-radius:5px;border:1px solid var(--lg-line-2);
}
/* Landing - a single film (data-count="1") was stretching its card across the whole 1100px
   strip and upscaling the poster past its native size. Shrink the card to a compact
   poster-sized frame, centred, and keep the poster at/below its native width. */
.lg-single-films[data-count="1"] .lg-single-row{
  flex:0 1 auto;width:100%;max-width:300px;
}
@media (min-width:901px){
  .lg-single-films[data-count="1"] .lg-single-row .lg-single-hero img{max-width:260px;margin:0 auto;display:block;}
}

/* Landing, single film on mobile: the stacked (column) list left-aligned the 300px-capped card
   - centre the card and the poster inside it. */
.lg-single-films[data-count="1"]{align-items:center;}
.lg-single-films[data-count="1"] .lg-single-row{margin-left:auto;margin-right:auto;}
.lg-single-films[data-count="1"] .lg-single-row .lg-single-hero{align-self:center;}
.lg-single-films[data-count="1"] .lg-single-row .lg-single-hero img{margin-left:auto;margin-right:auto;display:block;}

/* MOBILE section-nav bar (#navHeader): the hamburger's 14px top/bottom margins were collapsing
   OUT of the sticky bar, shifting the bar 14px below the header (extra space above the icon)
   and leaving an uncovered gap where scrolled page content showed through as a thin line.
   Contain the margins (flow-root), tighten them, stick flush under the header (77px < its
   ~77.8px height, so no sub-pixel seam) and add a 2px bg-coloured cap above the bar. */
@media (max-width:900px){
  #navHeader.bottom-nav,
  .landing-page .bottom-nav,
  #mainBody .bottom-nav{display:flow-root;top:77px;box-shadow:0 -2px 0 var(--lg-bg);}
  #navIcon{margin:8px 0 8px 12px !important;}
}

/* MOBILE - shorter hamburger bar: the 40x38 icon box had ~12px of empty space above/below its
   3 lines. Shrink the box to 22px (lines re-spaced inside it; the open "X" state re-centred)
   and use 6px margins, so the whole bar goes from ~54px to ~34px tall. */
@media (max-width:900px){
  #navIcon{height:22px !important;margin:6px 0 6px 12px !important;}
  #navIcon span:nth-child(1){top:3px;}
  #navIcon span:nth-child(2){top:10px;}
  #navIcon span:nth-child(3){top:17px;}
  .navIsActive #navIcon span:nth-child(1),
  .navIsActive #navIcon span:nth-child(3){top:10px;}
}

/* VIDEO PLAYER BOX - the bordered/tinted frame (.video_box_wrapper) was full width while the player
   inside it is only 70% wide, leaving empty bands left/right. Make the frame the same width as the
   player (70%, centred) and let the player fill it. Same breakpoint as the player's own full-width
   rule (tablet portrait and below). */
.video_box_wrapper{width:80%;margin-left:auto;margin-right:auto;}
.video_box_wrapper .video-holder,
.video_box_wrapper .yt-video-box{width:100%;}
@media screen and (max-width:1024px) and (orientation:portrait){
  .video_box_wrapper{width:100%;}
}

/* player frame: with the box now exactly the video's width the faint hairline disappeared against the
   video edge - use the brighter off-white hairline so the border stays visible */
.video_box_wrapper{border:2px solid var(--lg-line);}

/* ================================================================
   LANDING - single title: no banner above (hidden in index.php when only one title), poster sits
   centred in the viewport between header and footer so there is no scrolling to reach it.
   With 2+ titles the banner slider shows again and the posters sit below it as before.
   ================================================================ */
.lg-single-landing--solo.title-section{
  justify-content:center !important;
  padding-top:clamp(24px,5vh,56px) !important;padding-bottom:clamp(24px,5vh,56px) !important;
}

/* ================================================================
   TYPE SCALE - larger text across the film pages (headers most of all)
   ================================================================ */
/* section nav (Screenings / Conversations / Read / Gallery / Accolades / FYC Credits) */
.nav-link,
.lg-single .nav-link{font-size:15px;letter-spacing:.16em;}
@media (min-width:901px){ .lg-single .nav-link{padding-top:15px;padding-bottom:15px;} }
@media (max-width:900px){ .nav-link,.lg-single .nav-link{font-size:14px;} }

/* section headings */
:is(#screeningSection,#videoSection,#readSection,#gallerySection,#accoladesSection,#creditsSection) .section-center-heading h3,
#creditsSection .section-center-heading h3,
#guildPassSection .section-center-heading h3,
#videoSection .conversations-thumb > .section-heading h4,
#videoSection .video-side-content-wrapper h2,
.video-side-content h2{font-size:21px !important;letter-spacing:.3em;}
#readSection .conversations-thumb-wrapper::before,
#listenSection .listen-wrapper::before{font-size:21px;letter-spacing:.3em;}
@media (max-width:600px){
  :is(#screeningSection,#videoSection,#readSection,#gallerySection,#accoladesSection,#creditsSection) .section-center-heading h3,
  #creditsSection .section-center-heading h3,
  #guildPassSection .section-center-heading h3,
  #videoSection .conversations-thumb > .section-heading h4,
  #videoSection .video-side-content-wrapper h2,
  .video-side-content h2,
  #readSection .conversations-thumb-wrapper::before,
  #listenSection .listen-wrapper::before{font-size:17px !important;letter-spacing:.2em;}
}

/* screenings */
#screeningSection .accordion-button{font-size:clamp(16px,1.6vw,20px);}
#screeningSection .event .day{font-size:13px;}
#screeningSection .event .date-time{font-size:clamp(24px,2.6vw,32px);}
#screeningSection .event .event-text{font-size:15px;}
#screeningSection .event .event-sub-text{font-size:13px;}
#screeningSection .screeningInfo__boxDesc{font-size:15px;}

/* synopsis / video / read / listen / credits / accolades / guild pass body text */
#creditsSection .movie-synopsis p{font-size:16px;}
#videoSection .video-side-content-wrapper p,
#videoSection .video-side-content p{font-size:16px;}
#videoSection .conversations-thumb-wrapper .card-title{font-size:17px !important;}
#videoSection .conversations-thumb-wrapper .card-text{font-size:15px !important;}
#readSection .card-title{font-size:15px;}
#readSection .card-text{font-size:14px;}
#listenSection .audio-name{font-size:17px;}
#listenSection .audio-text{font-size:15px;}
#listenSection .audio-text span,
#listenSection .podcastplaybtn a{font-size:12px;}
#accoladesSection .accordion-button{font-size:clamp(16px,1.6vw,21px);}
#accoladesSection .category-name{font-size:13px;}
#accoladesSection .category-sub-title{font-size:12px;}
#accoladesSection .category-person-names{font-size:16px;}
#guildPassSection .theater-name{font-size:14px !important;}
#guildPassSection .category-name{font-size:13px;}
#guildPassSection .category-person-names{font-size:15px;}

/* Landing, single title: on rollover the poster zooms 8% but only filled the card's top/bottom padding,
   leaving dark bands left/right (the card was wider than the zoomed poster). Wrap the card tightly
   around the poster with a small even padding (8px) so the zoomed poster covers it on all four sides. */
.lg-single-films[data-count="1"] .lg-single-row{
  padding:12px;max-width:286px; /* 260px poster + 2x12px padding + 2px border */
}
/* zoom a bit more on rollover so the poster still covers the 12px padding on all four sides (needs >= 1.093 left/right) */
.lg-single-films[data-count="1"] .lg-single-stage:has(.lg-single-hero:hover, .lg-single-btn:hover) .lg-single-hero img{transform:scale(1.1);}
.lg-single-films[data-count="1"] .lg-single-row .lg-single-hero,
.lg-single-films[data-count="1"] .lg-single-row .lg-single-hero .title{width:100%;}
.lg-single-films[data-count="1"] .lg-single-row .lg-single-hero img{width:100%;max-width:100%;}

/* Landing, single title: the header floats over the page (it is not in the flow on the landing), so the
   poster card has to clear it itself - top padding = header height (~72-80px, 90px to be safe) + a gap.
   Before, 24-56px of padding put the card right under / behind the header bar on shorter screens. */
.lg-single-landing--solo.title-section{
  padding-top:calc(90px + clamp(20px,4vh,48px)) !important;
  padding-bottom:clamp(28px,5vh,56px) !important;
}

/* Landing, single title - SHORT screens only - any width: desktop, tablet or phone (780px tall or less; taller screens are untouched):
   the header clearance + 138px padding + 406px card + footer no longer fit, so the page scrolled with a
   lot of empty space above/below the poster. Use tighter padding and let the poster scale down with the
   viewport height so card + header + footer fit without scrolling:
   poster width = (viewport height - 314px) x 0.682 (the poster's 260:381 ratio), kept between 170 and 260px. */
@media (max-height:780px){
  .lg-single-landing--solo.title-section{
    padding-top:96px !important;padding-bottom:16px !important;
  }
  .lg-single-films[data-count="1"] .lg-single-row{
    max-width:calc(clamp(170px, calc((100vh - 314px) * .682), 260px) + 26px);
  }
}

/* Landing, single title - PHONES / TABLETS (900px wide and below), any height. Here the header is in the page
   flow (not floating), so the 96px clearance above is not needed, and the footer is taller (~261px). Use a
   small even gap and scale the poster down only as much as needed so header + card + footer fit without
   scrolling:  poster width = (viewport height - 400px) x 0.682, kept between 150 and 260px
   (100svh = the visible height with the mobile browser bars showing; 100vh is the fallback). */
@media (max-width:900px){
  .lg-single-landing--solo.title-section{
    padding-top:clamp(16px,3vh,32px) !important;padding-bottom:clamp(16px,3vh,32px) !important;
    margin-bottom:0 !important; /* the generic .section rule adds 70px below on phones */
  }
  .lg-single-films[data-count="1"] .lg-single-row{
    max-width:calc(clamp(150px, calc((100vh - 400px) * .682), 260px) + 26px);
    max-width:calc(clamp(150px, calc((100svh - 400px) * .682), 260px) + 26px);
  }
}

/* TrustArc "Cookie Preferences" link (#teconsent, rendered inside .lg-footer__col next to Privacy / Terms).
   The <a> inside it already picks up the footer-link rules above (same padding + divider); TrustArc injects its own
   white pill style on the <span>, so reset that to match the other links (Contact Us / Privacy Notice / Terms Of Use). */
.lg-footer__col #teconsent{display:inline-flex;align-items:center;position:static;margin:0;padding:0;width:auto;float:none;}
.lg-footer__col #teconsent a{cursor:pointer;}
.lg-footer__col #teconsent span#ta-cookiepref,
.lg-footer__col #teconsent span#ta-cookiepref:hover{
  background:transparent !important;color:inherit !important;font-family:inherit !important;font-size:inherit !important;
  font-weight:inherit !important;line-height:inherit !important;letter-spacing:inherit !important;text-transform:inherit !important;
  padding:0 !important;border-radius:0 !important;
}

/* Screenings: "Select a city" drop-down (custom, styled like the header Movies menu) */
.city-menu{margin:0 0 30px;max-width:380px;}
.city-menu__label{margin:0 0 10px;font-size:17px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--lg-grey);}
.city-menu__dd{position:relative;}
.city-menu__toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:10px 6px 12px 4px;background:transparent;border:0;border-bottom:1px solid #fff;border-radius:0;color:#fff;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:left;cursor:pointer;transition:color .2s var(--lg-ease),border-color .2s var(--lg-ease);}
.city-menu__toggle:hover,.city-menu.is-open .city-menu__toggle{color:var(--lg-accent);}
.city-menu__toggle:focus-visible{outline:1px solid #fff;outline-offset:3px;}
.city-menu__chev{flex:0 0 auto;width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--lg-ease);}
.city-menu.is-open .city-menu__chev{transform:rotate(-135deg) translateY(-2px);}
.city-menu__list{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;margin:14px 0 0;padding:8px 0;list-style:none;background:var(--lg-bg);border:1px solid var(--lg-line);border-radius:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);}
.city-menu.is-open .city-menu__list{display:block;}
.city-menu__list li{margin:0;padding:12px 22px;border-left:2px solid transparent;color:var(--lg-grey);font-size:13px;font-weight:500;letter-spacing:.227em;text-transform:uppercase;cursor:pointer;transition:all .18s var(--lg-ease);}
.city-menu__list li:hover,.city-menu__list li:focus{outline:0;background:var(--lg-bg-2);color:var(--lg-fg);border-left-color:var(--lg-accent);}
.city-menu__list li[aria-selected="true"]{color:var(--lg-fg);border-left-color:var(--lg-accent);}