.film .film-header {
   position: relative;
}
.film .image-overlay-container {
   width: 100%;
   position: relative;
   z-index: 0;
}
.film .film-play-button {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 100%;
   height: 8rem;
   width: 8rem;
   border: unset;
   background-color: rgba(0, 0, 0, 0.4);
}
.film .film-play-button:hover {
   background-color: var(--base-01);
}
.film .film-play-button img {
   margin: auto;
   position: relative;
   left:.25rem
}
.film .film-image-overlay {
   width: 100%;
   height: auto;
}
.film .cmpl-wrapper {
   width: 100%;
   //position: absolute;
   top: 0;
}
.film .full-width {
   padding-left: 1rem;
   padding-right: 1rem;
}
.film .alternating-background:nth-of-type(odd) {
   background-color: var(--base-02);
}
.film .alternating-background:nth-of-type(even) {
   background-color: var(--base-01);
}
.film .table-of-contents-container {
   padding-top: 1rem;
   padding-bottom: 1rem;
   position: sticky;
   top: 3.325rem;
}
.film .table-of-contents-toggle {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
   font-size: var(--text-sm);
}
.film .table-of-contents-button {
   height: 2rem;
   width: 2rem;
   background: var(--base-01);
   border: 1px solid var(--base-mute);
   color: var(--base-emphasis);
   border-radius: .125rem;
   text-shadow: none;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   margin-right: .5rem;
   transition: all 0.3s ease-in-out;
}
.film .table-of-contents-toggle:hover .table-of-contents-button,
.film .table-of-contents-button:focus {
   background: var(--base-02);
   text-shadow: 0 0 1px var(--base-emphasis);
   transition: all 0.3s ease-in-out;
}
.film .table-of-contents-list {
   position: absolute;
   background-color: var(--base-01);
   padding: 1rem 1.5rem;
   border-radius: .25rem;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   top: 3.5rem;
   display: none;
}
.film .table-of-contents-item:not(:last-of-type){
   margin-bottom: .5rem;
}
.film .table-of-contents-jump-link {
   color: var(--text-empahsis);
   text-decoration: none;
   padding-bottom: .125rem;
   border-bottom: 1px solid transparent;
   font-size: var(--text-sm);
   text-shadow: 0 0 0 transparent;
}
.film .table-of-contents-jump-link:hover {
   border-bottom: 1px solid var(--base-emphasis);
   text-shadow: 0 0 1px var(--base-emphasis);
}
.film .full-width {
   padding-top: 1rem;
   padding-bottom: 1rem;
}
.film h1 {
   font-size: clamp(2.25rem, -0.3554rem + 6.0241vw, 3.5rem);
   font-weight: 500;
   color: var(--base-emphasis)
}
.film ul.film-details {
   display: flex;
   flex-wrap: wrap;
}
.film ul.film-details li {
   font-size: var(--text-sm);
   color: var(--base-mute);
}
.film ul.film-details li:not(:first-of-type)::before {
   content: "|";
   padding: 0 .5rem;
}
.film ul.film-details li a {
   font-weight: 600;
}
.film .film-premium-text {
   font-size: clamp(1.5rem, -0.3554rem + 6.0241vw, 2.52rem);
   font-weight: 500;
   color: var(--base-emphasis);
   line-height: 1.25;
}
.film .introduction .wrapper {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}
.film h2 {
   font-family: var(--emphasis-font);
   font-weight: 500;
   color: var(--base-mute);
   font-size: var(--text-xl);
   text-shadow: 0 0 1px var(--base-mute);;
}
.film .Description h2 {
    margin-top: .75rem;
    margin-bottom: .75rem;

}
.film .description-actions-container {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}
.film .film-actions-container {
   display: flex;
   flex-direction: column;
   gap: .5rem;
}
.film .film-action-button {
   font-size: var(--text-sm);
   border: 2px solid var(--base-mute);
   background-color: transparent;
   color: var(--base-emphasis);
   text-shadow: none;
   text-transform: uppercase;
   letter-spacing: 1px;
   padding: .75rem .75rem;
   height: unset;
   width: 100%;
   display: flex;
   gap: 1rem;
   justify-content: center;
   border-radius: 0;
   align-content: center;
    flex-wrap: wrap;
}
.film .film-action-button:hover {
   border: 2px solid var(--base-content);
   background-color: var(--base-02);
   text-shadow: 0 0 1px var(--base-emphasis);
}
.film .film-action-button i {
   position: relative;
   top: 3px;
}
.film .introduction h2, .film .film-subsection h2 {
   margin-bottom: .75rem;
}
.film .film-subsection-count {
   font-family: var(--body-font);
   font-size: var(--text-sm);
   text-shadow: none;
}
.film .trailers {
   width: 100%;
}
.film .trailers .film-carousel {
   padding: 0rem;
}

.film .splide {
   padding: 0;
   overflow: visible;
}
.film .splide__slide .image-container {
   position: relative;
   margin-bottom: .5rem;
}
.film .splide__slide .image-container-overlay {
   position: absolute;
   background: rgb(34,31,32);
   background: linear-gradient(180deg, rgba(34,31,32,0) 0%, rgba(34,31,32,0.8954175420168067) 100%);
   bottom: 0;
   left: 0;
   right: 0;
   top: 50%;
   display: flex;
   align-items: flex-end;
   padding: 1rem;
}
.film .splide__slide .image-container-overlay p {
   font-size: var(--text-sm);
}
.film .splide__slide .image-container-overlay i {
   padding-right: .5rem;
}
.film .splide__slide h3 {
   font-weight: 500;
}
.film .reviews {
   overflow: hidden;
}
.film .highlighed-review-container {
   margin-bottom: 1.5rem;
}
.film .highlighed-review-container {

}
.film .highlighed-review-container .review {
   font-size: clamp(1.375rem, -0.3554rem + 6.0241vw, 2.25rem);
   line-height: 1.25;
   position: relative;
   z-index: 0;
   margin-bottom: .75rem;
   overflow: ;
}
.film .highlighed-review-container .review::before {
   content: open-quote;
   position: absolute;
   color: var(--base-02);
   font-size: 16rem;
   z-index: -1;
   top: -5.5rem;
   left: -1.5rem;
}
.film .highlighed-review-container .review::after {
   content: close-quote;
   position: absolute;
   color: var(--base-02);
   font-size: 16rem;
   z-index: -1;
   bottom: -12rem;
   right: -1.5rem;
}
.film .reviewer {
   font-weight: 600;
   padding-bottom: 0;
}
.film .reviewer-details {
   color: var(--base-mute);
   font-size: var(--text-sm);
}
.film .reviews-container {
   padding-bottom: .75rem;
}
.film .reviews-container .review-container {
   padding: .75rem 1rem;
   display: none;
   flex-direction: column;
}
.film .review {
   padding-bottom: .5rem;
}
.film .review-container {
   display: none;
}
.film #loadMoreReviews, .film #loadMoreFestivals {
   font-size: var(--text-sm);
   color: var(--base-mute);
   cursor: pointer;
   text-shadow: 0 0 0 transparent;
   border-bottom: 1px solid transparent;
   width: fit-content;
   transition: all 0.3s ease-in-out;
}
.film #loadMoreReviews:hover , .film #loadMoreFestivals:hover {
   color: var(--base-content);
   text-shadow: 0 0 1px var(--base-content);
   border-bottom: 1px solid var(--base-mute);
   transition: all 0.3s ease-in-out;
}
.film #showLessReviews, .film #showLessFestivals {
   font-size: var(--text-sm);
   color: var(--base-04);
   cursor: pointer;
   text-shadow: 0 0 0 transparent;
   border-bottom: 1px solid transparent;
   width: fit-content;
   transition: all 0.3s ease-in-out;
}
.film #showLessReviews:hover , .film #showLessFestivals:hover {
   color: var(--base-mute);
   text-shadow: 0 0 1px var(--base-mute);
   border-bottom: 1px solid var(--base-mute);
   transition: all 0.3s ease-in-out;
}
.film .festivals-container {
   padding-bottom: .75rem;
}
.film .festival-container:not(:last-of-type) {
   padding-bottom: .75rem;
}
.film .festival-container {
   display: none;
   
}
.film .festival-container p:not(:last-of-type) {
   padding-bottom: 0
}
.film .festival-container .accolade {
   font-size: var(--text-sm);
   color: var(--base-mute);
}
.film .downloads-container a {
   line-height: 2.5;
   text-decoration: none;
   padding-bottom: .125rem;
   text-shadow: 0 0 0 transparent;
   border-bottom: 1px solid var(--base-content);
}
.film .downloads-container a:hover {
   text-shadow: 0 0 1px var(--base-emphasis);
   border-bottom: 1px solid var(--base-emphasis);
}
.film .related-subjects-collections-container a {
   line-height: 2.5;
   color: var(--base-emphasis);
   text-decoration: none;
   padding-bottom: .125rem;
   text-shadow: 0 0 0 transparent;
   border-bottom: 1px solid var(--base-content);
}
.film .related-subjects-collections-container a:hover {
   text-shadow: 0 0 1px var(--base-emphasis);
   border-bottom: 1px solid var(--base-emphasis);
}
.film .related-subjects-collections-container a.related-link-all {
   font-style: italic;
}
.film .related-subjects-collections-container h3 {
   font-family: var(--emphasis-font);
   font-weight: 500;
   color: var(--base-mute);
   font-size: var(--text-base);
   text-shadow: 0 0 1px var(--base-mute);
   padding: .75rem 0 .25rem 0;
}
.film .related-subjects-collections-container .related-subjects {
   padding-bottom: .75rem;
}
.film .film-container {
   width: 100% !important;
}
@media only screen and (min-width: 360px) {
   .film .film-container {
      width: calc((100% - .75rem) /2) !important;
   }
 }
 
 @media only screen and (min-width: 500px) {
   .film .related-subjects, .film .related-collections {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
   }
   .film .related-subjects-collections-container a {
      line-height: 1.25;
   }
   .film .related-subjects-collections-container .related-subjects {
      padding-bottom: 1.5rem;
   }
   .film .related-subjects li:first-of-type::after, .film .related-collections li:first-of-type::after, .film .related-subjects li:last-of-type::after, .film .related-collections li:last-of-type::after {
      content: none;
      padding-left: 1rem;
   }
   .film .related-subjects li::after, .film .related-collections li::after {
      content: "|";
      padding-left: 1rem;
   }

   .film .related-subjects-collections-container h3 {
      padding-bottom: 1rem;
   }
 }
 
 @media only screen and (min-width: 640px) {
   .film .full-width {
      padding-left: 2rem;
      padding-right: 2rem;
      padding-top: 2rem;
      padding-bottom: 2rem;
   }
   .film .table-of-contents-container {
      padding: .5rem 2rem;
      z-index: 99;
   }
   .film .table-of-contents-toggle {
      display: none;
   }
   .film .table-of-contents-list {
      display: flex;
      justify-content: center;
      position: unset;
      background-color: unset;
      padding: unset;
      border-radius: .25rem;
      box-shadow: unset;
      top: unset;
      gap: clamp(1.5rem, 3rem, 4.5rem);
   }
   .film .table-of-contents-item:not(:last-of-type){
      margin-bottom: 0;
   }
   .film .table-of-contents-jump-link {
      color: var(--text-empahsis);
      text-decoration: none;
      padding-bottom: .125rem;
      border-bottom: 1px solid transparent;
      font-size: var(--text-sm);
      text-shadow: 0 0 0 transparent;
   }
   .film .table-of-contents-jump-link:hover, .film .table-of-contents-jump-link.is-active {
      border-bottom: 1px solid var(--base-emphasis);
      text-shadow: 0 0 1px var(--base-emphasis);
   }
   .film .film-actions-container {
      flex-direction: row;
   }
   .film .film-action-button {
      font-size: 12px;
   }
 }
 
 @media only screen and (min-width: 768px) {
   .film .table-of-contents-container {
      top: 4rem;
  }
   .film .film-gallery-container {
      gap: 1rem !important;
   }
   .film .film-container {
      width: calc((100% - 1rem) /2) !important;
   }
 }

 @media only screen and (min-width: 864) {
   .film .film-container {
      width: calc((100% - 2rem) /3) !important;
   }
}
 
 @media only screen and (min-width: 864px) {
   .film .film-trailer-container {
    padding-top: calc(50rem* 0.5625);
    max-width: 50rem;
    margin: 0 auto;
   }
   .film .description-actions-container {
      flex-direction: row;
      gap: 2rem;
   }
   .film .film-description-container {
      width: 75%
   }
   .film .film-actions-container {
      flex-direction: column;
      width: 16rem;
   }
   .film .film-action-button {
      width: 16rem;
   }
   .film .reviews-container .review-container {
      flex-direction: row;
      gap: 2rem;
   }
   .film .review {
      order: 1;
   }
   .film .reviewer-container {
      order: 0;
      width: 12rem;
      flex-shrink: 0;
   }
   .film .festivals-container {
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
   }
   .film .festival-container {
      width: calc((100% - 4rem) /3);
   }
 }

@media only screen and (min-width: 1024px) {
    .film .film-container {
        width: calc((100% - 2rem) / 3) !important;
    }
}
 
 @media only screen and (min-width: 1280px) {
   /* CSS rules */
 }
 
 @media only screen and (min-width: 1536px) {
   /* CSS rules */
 }