@font-face {
  font-family: "Gotham-Medium";
  src: url("https://cdn.assemble.me/assets/shared/fonts/Gotham-Medium-webfont.woff") format("woff"),
       url("https://cdn.assemble.me/assets/shared/fonts/Gotham-Medium-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham-Light";
  src: url("https://cdn.assemble.me/assets/shared/fonts/Gotham-Light-webfont.woff") format("woff"),
       url("https://cdn.assemble.me/assets/shared/fonts/Gotham-Light-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
  :root {
      --design_nav_overlay_bg: color-mix(in srgb, #000000 90%, transparent);
      --design_nav_menu_size: 12px;
      --design_footer_bg: color-mix(in srgb, var(--design_bg_color) 1%, transparent);
      --design_text_color: #ffffff;
      --design_text_color_inverted: #ffffff;
      --design_body_links_color: #f00808;
      --design_link_color: #f00808;
      --design_link_color_inverted: #f00808;
      --design_h1_title_color: #f00808;
      --design_h1_title_color_inverted: #f00808;
      --design_h234_title_color: #f00808;
      --design_h234_title_color_inverted: #f00808;
      --design_bg_color: #000000;
      --design_bg_color_inverted: #000000;
      --design_nav_links_color: #ffffff;
      --design_nav_tabs_bg_color: #000000;
      --design_rollover_color: #ffffff;
      --design_topbar_color: #ffffff;
      --design_topbar_bg_color: #000000;
      --design_content_bg_colour: #000000;
      --design_content_bg_transparency: 0;
      --design_divs_bg_colour: 0.9;
      --design_footer_bg_transparency: 0.01;
      --design_input_color: #ffffff;
      --design_input_bg_color: #000000;
      --design_button_text_color: #ffffff;
      --design_button_bg_color: #f00808;
      --design_bg_tint: rgba(0,0,0,0.2);
      --design_bg_tint_heavy: rgba(0,0,0,0.6);
    --design_bg_brightness: 0.8;
    --design_bg_brightness_heavy: 0.2;
    --design_body_size: 17px;
        --design_h1_title_size: 42px;
        --design_h1_title_transform: uppercase;
        --design_body_font: "Gotham-Light", system-ui, sans-serif;
        --design_title_font: "Gotham-Medium", system-ui, sans-serif;
        --design_bg_align: fill;
        --design_subpage_bg_align: none;
        --design_subpage_bg_image: ;
        --design_bg_image: f8718bca6e0440b0.jpg;
        --design_rollover_effect: fade_out;
        --design_nav_height: 50px;
        --design_nav_bar_height: 50px;
        --design_nav_links_size: 12px;
        --design_nav_links_transform: uppercase;
        --design_title_padding_top: 0px;
        --design_title_padding_bottom: 64px;
        --design_mobile_menu: 0;
        --design_bg_intro_blur: 30px;
        --design_bg_intro_speed: 1.2s;
        --design_title_intro_blur: 10px;
        --design_title_intro_speed: 0.6s;
        --design_bg_blur: 5px;
        --design_bg_grain: url('/assets/i/grain-white.png');
    }
  /*-------------------------------------------------------
   Assemble CSS for The Beast ID: 5000
   https://thebeast.movie
   Design Engine v5.0
-------------------------------------------------------*/
html{height:100%; min-height:100%; overscroll-behavior: none; interpolate-size: allow-keywords; /* transition between numerical values (eg. 100px) and keyword values (eg. auto). */}
body{min-height:100%; overscroll-behavior: none;}
body:after {content: ""; display: block; clear: both;}
* {margin:0;padding:0;}
a {-moz-outline-style:none;outline:none;}
img {max-width:100%; height:auto;}
/*-------------------------------------------------------
   Colours, Font Families
-------------------------------------------------------*/
body{ background-color:var(--design_bg_color); }

.text-center { text-align:center; }
.text-lead { font-size: 1.2rem; line-height: 1.2;}
.text-small { font-size: 0.8rem; line-height: 1.2;}
.text-muted { color:var(--design_muted_color); }

a { color:var(--design_link_color); }
a:hover { color:var(--design_rollover_color); text-decoration:underline; }
a:active { text-decoration:underline; outline:none; }
a:focus { color:var(--design_rollover_color); }
a:visited { text-decoration:none; }
a:focus-visible { color:var(--design_rollover_color); }
a:focus-within { color:var(--design_rollover_color); }
a:link { text-decoration:none; }

h1 {   
  font-weight:normal;
  text-transform: var(--design_h1_title_transform, uppercase);
  font-size: var(--design_h1_title_size, clamp(2rem, 5vw, 12rem));
  text-rendering: optimizeLegibility;
  }

h1.headerText, h1.headerText a { color: var(--design_h1_title_color); }
  
h1, h2, h3, h4, h5, h6 { 
  font-weight:normal;
  margin: 0 0 0.5em;
  color: var(--design_h234_title_color);
  text-transform: var(--design_h1_title_transform);
  text-rendering: optimizeLegibility;
  }
/*-------------------------------------------------------
   Inverted sections

   A block flipped against the rest of the page — the design editor's
   "Inverted Sections" colours (design_bg_color_inverted / _text_color_inverted
   / _h1_title_color_inverted / _h234_title_color_inverted).

   .inverted flips the CONTENT colours and can sit on anything.
   .inverted-panel additionally paints the inverted background, so the block
   reads as a panel laid over the page. They stay separate so legacy page
   content carrying a bare .inverted class gets the flipped colours without a
   slab of background appearing behind it.

   Only opt a block in when it really is on the inverted background: the hero
   tagline used to carry .inverted, which made its h2 take the panel heading
   colour (#333 by default) rather than the site's Headings Colour.
   Body copy needs the explicit p, li, dd ... list: the base rules are element
   selectors, which a bare .inverted colour would not outrank.
-------------------------------------------------------*/
.inverted { color: var(--design_text_color_inverted); }
.inverted p,
.inverted li,
.inverted dt,
.inverted dd,
.inverted td,
.inverted th,
.inverted blockquote,
.inverted figcaption { color: var(--design_text_color_inverted); }
.inverted h1 { color: var(--design_h1_title_color_inverted); }
.inverted h2, .inverted h3, .inverted h4, .inverted h5, .inverted h6 { color: var(--design_h234_title_color_inverted); }
.inverted a { color: var(--design_link_color_inverted); }
.inverted-panel { background-color: var(--design_bg_color_inverted); }

h2, h3, h4, h5, h6 {
  line-height:1.2;
  }

p { 
  font-family: var(--design_body_font); 
  color: var(--design_text_color);
  font-size: var(--design_body_size);
  }

.awardsModule li.laurel svg path { fill: var (--design_h234_title_color);}
::-webkit-input-placeholder { color: var(--design_button_text_color); opacity: 0.8; }
:-moz-placeholder  { color: var(--design_button_text_color); opacity: 0.8; }
::-moz-placeholder  { color: var(--design_button_text_color); opacity: 0.8; }
:-ms-input-placeholder  { color: var(--design_button_text_color); opacity: 0.8; }

/*-------------------------------------------------------
   Header
-------------------------------------------------------*/
header{
     display: block;
     color:var(--design_nav_color);
     text-align: center;
     height: var(--design_nav_bar_height, 100px);
     /* Containing block for .header-bg. Without this the absolutely-positioned
        tint below resolves against .wrapper (position: relative) and stretches
        over the WHOLE page, darkening the key art / background colour on desktop.
        Mobile already positions the header (the max-width: 768px block sets it
        absolute), which is why phones showed the true colours and desktop didn't. */
     position: relative;
}
/* The header bar paints nothing of its own: the key art shows through. (It
   used to carry a hard-coded 20% navy band fading out at the bottom — a
   "permanent fade" no design option controlled.) The element stays in the
   markup so a site's custom CSS can still target it. */
header .header-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     background: none;
}

header .header-top-news { display: none; }
header .header-wrap a {
     color: var(--design_topbar_color);
     background-color: var(--design_topbar_bg_color);
     text-align: center;
     position: fixed;
     top: 5rem;
     right: -5rem;
     transform: rotateZ(45deg);
     min-width: 21rem;
     padding: 0.3rem;
     z-index: 9999;
     /* So the ribbon tracks the poster's right edge as the page reframes into a
        poster (see body#Home.drawer-open below), instead of staying pinned to
        the viewport corner over the open drawer. */
     transition: right 0.7s ease-in-out;
     }

header .headerImage {
     max-height: 100px;
}
/* "Logo padding top / bottom" (design_title_padding_top/_bottom). */
header .HeaderImageLink {
     display: inline-block;
     padding-top: var(--design_title_padding_top, 0px);
     padding-bottom: var(--design_title_padding_bottom, 0px);
}
body#Home header .headerImage {
     display: none;
}

header input[type='checkbox'] {
     display: none;
}
header label {
    width: 60px;
    height: 45px;
    position: absolute;
    top: 30px;
    left: 30px;
    display: block;
    z-index: 9999;
    cursor: pointer;
}

#nav-icon1 {
  width: 50px;
  height: 45px;
  position: relative;
  margin: 0;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2),#nav-icon1 span:nth-child(3) {
  top: 18px;
}

#nav-icon1 span:nth-child(4) {
  top: 36px;
}

label:has(+input[type='checkbox']:checked) #nav-icon1 span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

label:has(+input[type='checkbox']:checked) #nav-icon1 span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

label:has(+input[type='checkbox']:checked) #nav-icon1 span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

label:has(+input[type='checkbox']:checked) #nav-icon1 span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

nav:not(.widget-nav):not(.assemble-widget nav) {
     display: block;
     position: fixed;
     /* Menu text size: the design editor's "Menu Text Size" when set (palette
        emits --design_nav_menu_size only then), else the classic scale. */
     font-size: var(--design_nav_menu_size, clamp(25px, 2.6rem, 80px));
     top: 0;
     left: 0;
     height: 100%;
     transform: translateY(-100%);
     opacity: 0;
     width: 100%;
     z-index: 9998;
     padding: 3rem;
     box-sizing: border-box;
     transition: opacity 0.2s ease-in-out, transform 0.5s ease-in-out;
     /* Menu background (design editor, Navigation panel): colour + opacity
        (design_nav_tabs_bg_color / design_divs_bg_colour), an optional image
        (design_nav_bg_image) and a style (design_nav_bg_style_id: solid, or a
        fade from the top). palette.tsx composes them into these two custom
        properties; unset keeps the classic 70% black over a 10px blur. */
     background-color: var(--design_nav_overlay_bg, var(--theme-menu-bg, rgba(0, 0, 0, 0.7)));
     background-image: var(--design_nav_bg_image, none);
     backdrop-filter: blur(var(--theme-blur, 10px));
     background-size: cover;
     background-position: center center;
     text-align: center;
     color:var(--design_nav_links_color);
}
/* Menu links take the NAV link colour. The global anchor rule (the body link
   colour, --design_link_color) used to outrank the nav's inherited colour, so
   "Navigation → Menu Link Colour" never showed on the menu. */
nav:not(.widget-nav):not(.assemble-widget nav) ul li a {
     color: var(--design_nav_links_color);
     text-transform: var(--design_nav_links_transform, none);
     text-decoration: none;
}
nav:not(.widget-nav):not(.assemble-widget nav) ul li a:hover,
nav:not(.widget-nav):not(.assemble-widget nav) ul li a:focus-visible {
     color: var(--design_rollover_color);
}
nav:not(.widget-nav):not(.assemble-widget nav) ul {
     margin: 0 auto;
     padding: 0;
     width: 100%;
}
/* While the menu is open the corner ribbon (z-index 9999, above the 9998
   menu) would sit over the menu's top corner; park it until the menu closes. */
header:has(input[type='checkbox']:checked) .header-wrap a {
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease-in-out, right 0.7s ease-in-out;
}
header input[type='checkbox']:checked+nav { /* show nav when checkbox is checked */
    transform: translateY(0);
    opacity: 1;
}
@keyframes slide-up {
     from {  transform: translateY(-100%);  opacity: 0; }
     to { transform: translateY(0); opacity: 1; } 
     }    

nav ul {list-style: none;}
nav:not(.widget-nav):not(.assemble-widget nav) ul li {
     margin-bottom: 1rem; 
     opacity: 0; 
     transform: translateY(-20px); 
     transition: opacity 0.3s ease-out, transform 0.3s ease-out; 
     transition-delay: 0.4s; 
}
nav ul li a:hover {
     color: var(--design_rollover_color);
}
nav ul li svg {
     display: inline-block;
     width: 1ch;
     height: 1ch;
}
nav ul li:nth-child(1) { transition-delay: .5s; }
nav ul li:nth-child(2) { transition-delay: .5s; }
nav ul li:nth-child(3) { transition-delay: .6s; }
nav ul li:nth-child(4) { transition-delay: .7s; }
nav ul li:nth-child(5) { transition-delay: .8s; }
nav ul li:nth-child(6) { transition-delay: .9s; }
nav ul li:nth-child(7) { transition-delay: 1s; }
nav ul li:nth-child(8) { transition-delay: 1.1s; }
nav ul li:nth-child(9) { transition-delay: 1.2s; }
nav ul li:nth-child(10) { transition-delay: 1.3s; }
nav ul li:nth-child(11) { transition-delay: 1.4s; }
nav ul li:nth-child(12) { transition-delay: 1.5s; }
nav ul li:nth-child(13) { transition-delay: 1.6s; }
nav ul li:nth-child(14) { transition-delay: 1.7s; }
nav ul li:nth-child(15) { transition-delay: 1.8s; }
nav ul li:nth-child(16) { transition-delay: 1.9s; }
nav ul span li:nth-child(1) { transition-delay: 1s; }
nav ul span li:nth-child(2) { transition-delay: 1.1s; }
nav ul span li:nth-child(3) { transition-delay: 1.2s; }
nav ul span li:nth-child(4) { transition-delay: 1.3s; }
nav ul span li:nth-child(5) { transition-delay: 1.4s; }
nav ul span li:nth-child(6) { transition-delay: 1.5s; }
nav ul span li:nth-child(7) { transition-delay: 1.6s; }
nav ul span li:nth-child(8) { transition-delay: 1.7s; }
nav ul span li:nth-child(9) { transition-delay: 1.8s; }     


header input[type='checkbox']:checked+nav ul li {
     opacity: 1;
     transform: translateY(0);
}
nav ul li.home:before { 
     content: "";
     opacity: 0;
     transform: translateY(-30px);
     filter: blur(20px);
     height: 16vh;
     display: block;
     margin: 10rem 0 4rem 0;
     background-image: url(/img/a7d5a4ae8108461e.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     transition: opacity 1s ease-out, transform 0.7s ease-out;
     transition-delay: 0.5s;
}
header input[type='checkbox']:checked+nav ul li.home:before {
     transform: translateY(0);
     opacity: 1;
     filter: blur(0px);
}
nav ul .social-icons li { display: inline-block; margin-right: 1rem; }
/* The menu overlay's texture. Scoped to the site nav (as the overlay rule
   above is) so it can no longer bleed onto the showtimes widget's tab bar —
   campaign-home.css used to switch it off for EVERY nav to stop that leak,
   which took the menu's grain with it. */
nav:not(.widget-nav):not(.assemble-widget nav)::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: var(--theme-texture-opacity, 0.2);
  z-index: -1;
  /* Surface texture follows the site theme (css/v5/theme.tsx): film grain by
     default, a checker on pixel, none on glass / flare / flat. */
  background: var(--theme-texture, var(--design_bg_grain)) repeat;
}
/*-------------------------------------------------------
   Footer
-------------------------------------------------------*/
footer {
    display: block;
    overflow: hidden;
    overflow-x: auto;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    white-space: nowrap;
    width: 100%;
    z-index: 2;
}
footer ul {
    display: block;
    padding: 20px;
    margin: 0;
}
footer ul li {
    display: inline-block;
    margin-right: 20px;
}
footer .copyright {
     padding: 10px;
     margin-bottom: 30px;
}
/* Footer links: their own colour (design_footer_links_color), falling back
   to the body link colour as before. */
footer a { color: var(--design_footer_links_color, var(--design_link_color)); }
footer a:hover, footer a:focus-visible { color: var(--design_rollover_color); }
/* Footer background opacity (design_footer_bg_transparency): palette emits
   --design_footer_bg only when set, so unset keeps the .grain tint. */
footer.grain, footer { background-color: var(--design_footer_bg, var(--theme-tint, var(--design_bg_tint))); }
footer .footer-logo {
    max-height: 40px;
    margin-bottom: 90px;
}
/*-------------------------------------------------------
   Content
-------------------------------------------------------*/
.contentWrapper {
     display: block;
     min-height: 100vh;
}
/* Design options (set for this site) */
.contentWrapper .row { max-width: min(80%, 100%); }

body:not(#Home) .container:first-child,
body:not(#Home) .container-fluid:first-child {
     /* padding-top: calc(var(--design_nav_bar_height) * 2); */
}

.moduleContainer { container-type: inline-size; }


/*-------------------------------------------------------
   Modules
-------------------------------------------------------*/

/* ── Store ─────────────────────────────────────────────────────────────────
   The shop. Poster-led cards on the site's own palette — the film carries the
   page, so there is no cart chrome, no badges, no table. Cards are a plain
   grid that reflows on container width (the page sets --store-columns for the
   desktop density). Buy buttons inherit .btn from the site's button styles so
   a store never looks bolted on. */
.storeModule { width:100%; }
.storeModule-header { margin-bottom: 1.5rem; }
.storeModule-emptyText { color: var(--design_muted_color); }

.storeProducts {
     list-style: none;
     display: grid;
     gap: clamp(1rem, 3vw, 2rem);
     grid-template-columns: repeat(var(--store-columns, 3), minmax(0, 1fr));
}
@container (max-width: 900px) { .storeProducts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) { .storeProducts { grid-template-columns: minmax(0, 1fr); } }

.storeModule--list .storeProducts,
.storeModule--featured .storeProducts { grid-template-columns: minmax(0, 1fr); }

.storeProduct { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.storeModule--list .storeProduct { flex-direction: row; align-items: flex-start; gap: 1.25rem; }
.storeModule--list .storeProduct-art { flex: 0 0 clamp(96px, 20%, 200px); }
.storeModule--featured .storeProduct { flex-direction: row; align-items: center; gap: clamp(1rem, 4vw, 3rem); }
.storeModule--featured .storeProduct-art { flex: 0 0 min(45%, 480px); }

.storeProduct-art { overflow: hidden; background: var(--design_muted_bg_color, rgba(127,127,127,0.12)); }
.storeProduct-art img { display: block; width: 100%; height: auto; }

.storeProduct-body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.storeProduct-title { font-size: 1.1rem; line-height: 1.25; }
.storeProduct-qualifier { font-size: 0.8rem; color: var(--design_muted_color); }
.storeProduct-description { font-size: 0.9rem; color: var(--design_muted_color); }

.storeProduct-buy {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-top: 0.5rem;
     flex-wrap: wrap;
}
.storeProduct-price { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.storeProduct-cta[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Free products. "Free" sits exactly where a price sits and in the same
   weight — no badge, no flash: the offer is the interesting thing, not the
   fact that we are giving it away. The approval note is the one extra line,
   because a request is not a download and the visitor deserves to know that
   before typing an address in. */
.storeProduct-note { font-size: 0.8rem; color: var(--design_muted_color); }

.storeClaimForm { flex: 1 1 100%; display: grid; gap: 0.6rem; margin-top: 0.75rem; }
.storeClaimForm-field { display: grid; gap: 0.2rem; font-size: 0.8rem; color: var(--design_muted_color); }
.storeClaimForm input, .storeClaimForm textarea {
     font: inherit;
     color: inherit;
     background: var(--design_muted_bg_color, rgba(127,127,127,0.12));
     border: 1px solid var(--design_border_color, rgba(127,127,127,0.3));
     border-radius: 2px;
     padding: 0.5rem 0.6rem;
}
.storeClaimForm-submit { justify-self: start; }
.storeClaimForm-status { font-size: 0.8rem; color: var(--design_muted_color); }

/* Film groupings — a slate shop. Type carries the division: the film's own
   name over a hairline, with the poster as a small companion. No panels, no
   cards around cards. A single-film shop never renders any of this. */
.storeFilm + .storeFilm { margin-top: clamp(2.5rem, 6vw, 4.5rem); }

.storeFilm-heading {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 1.5rem;
     padding-bottom: 0.75rem;
     border-bottom: 1px solid var(--design_muted_bg_color, rgba(127,127,127,0.25));
}
.storeFilm-art { flex: 0 0 44px; overflow: hidden; }
.storeFilm-art img { display: block; width: 100%; height: auto; }
.storeFilm-title { font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.15; margin: 0; }

/* Ships with the hidden attribute; the store script drops it once it can act
   on a click. Chips stay typographic rather than looking like buttons — this
   is navigation, not an action. */
.storeFilms-filter {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem 1.25rem;
     margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.storeFilms-chip {
     background: none;
     border: 0;
     padding: 0.25rem 0;
     font: inherit;
     font-size: 0.9rem;
     color: var(--design_muted_color);
     cursor: pointer;
     border-bottom: 1px solid transparent;
}
.storeFilms-chip:hover { color: inherit; }
.storeFilms-chip[aria-pressed="true"] { color: inherit; border-bottom-color: currentColor; }

/* Library + watch — the post-purchase surfaces. Same restraint as the
   catalogue: a list of what you own and the one button that opens it. */
.storeLibrary { max-width: 46rem; margin: 0 auto; }
.storeLibrary-empty { color: var(--design_muted_color); }
.storeLibrary-items { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; }
.storeLibrary-item {
     display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
     padding-bottom: 1.25rem;
     border-bottom: 1px solid color-mix(in srgb, var(--design_text_color) 15%, transparent);
}
.storeLibrary-meta { flex: 1 1 16rem; min-width: 0; }
.storeLibrary-meta h3 { font-size: 1.05rem; line-height: 1.25; }
.storeLibrary-status { font-size: 0.8rem; color: var(--design_muted_color); margin-top: 0.15rem; }
.storeLibrary-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.storeLibrary-terms { flex: 1 1 100%; font-size: 0.85rem; color: var(--design_muted_color); }

.storeScreeningForm { flex: 1 1 100%; display: grid; gap: 0.6rem; margin-top: 0.75rem; }
.storeScreeningForm label { display: grid; gap: 0.2rem; font-size: 0.8rem; color: var(--design_muted_color); }
.storeScreeningForm input, .storeScreeningForm textarea {
     padding: 0.5rem; font: inherit; font-size: 0.9rem;
     color: var(--design_text_color); background: transparent;
     border: 1px solid color-mix(in srgb, var(--design_text_color) 30%, transparent);
     border-radius: 3px;
}
.storeScreeningForm-status { font-size: 0.8rem; color: var(--design_muted_color); }

/* The licence holder's register (/store/screening/:token). A licence is N
   screenings inside a window, so the page is a list of dates with the state
   of the film window against each — the holder's question is never "what did
   I buy", it is "can I download the film yet". */
.storeScreening { max-width: 46rem; margin: 0 auto; }
.storeScreening-empty, .storeScreening-status { color: var(--design_muted_color); }
.storeScreening-head { margin-bottom: 1.5rem; }
.storeScreening-head h2 { font-size: 1.3rem; line-height: 1.2; }
.storeScreening-terms { font-size: 0.85rem; color: var(--design_muted_color); margin-top: 0.35rem; }
.storeScreening-window {
     margin: 1rem 0 0; padding: 0.85rem 1rem; font-size: 0.9rem;
     border: 1px solid color-mix(in srgb, var(--design_text_color) 20%, transparent);
     border-radius: 3px;
}
.storeScreening-items { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
.storeScreening-item {
     display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem;
     padding-bottom: 1.1rem;
     border-bottom: 1px solid color-mix(in srgb, var(--design_text_color) 15%, transparent);
}
.storeScreening-item[data-cancelled="1"] { opacity: 0.55; }
.storeScreening-when { flex: 1 1 14rem; min-width: 0; }
.storeScreening-when strong { font-weight: 600; }
.storeScreening-where, .storeScreening-file {
     display: block; font-size: 0.8rem; color: var(--design_muted_color); margin-top: 0.15rem;
}
.storeScreening-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.storeScreening-add { margin-top: 1.75rem; }

/* The RSVP surfaces (phase 5). On the register, one screening's RSVP panel
   sits under its row; on the public page it IS the page. Both inherit the
   film's palette, which is the point of the page living on the film's own
   site rather than on ours. */
.storeScreening-rsvp {
     flex: 1 1 100%;
     margin-top: 0.75rem; padding: 0.85rem 1rem;
     border: 1px solid color-mix(in srgb, var(--design_text_color) 15%, transparent);
     border-radius: 3px;
}
.storeScreening-rsvpHead { font-size: 0.95rem; }
.storeScreening-rsvpLink { font-size: 0.85rem; margin-top: 0.35rem; word-break: break-word; }
.storeScreening-rsvpActions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.75rem; }
/* White plate behind the code: a QR read off a dark page needs its quiet zone
   to be light, and the renderer draws on the background it is given. */
/* The attendee list, shown only when the holder asks. Rows read as a door
   list: a name, a party size and the contact beneath it. */
.storeScreening-rsvpRows { list-style: none; margin-top: 0.75rem; display: grid; gap: 0.6rem; }
.storeScreening-rsvpRows li {
     display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
     font-size: 0.9rem;
}
.storeScreening-rsvpRows li[data-cancelled="1"] { opacity: 0.55; }
.storeScreening-qr {
     display: block; margin-top: 0.75rem;
     width: 180px; height: 180px;
     background: #fff; padding: 0.35rem; border-radius: 3px;
}

.storeRsvp { max-width: 34rem; margin: 0 auto; }
.storeRsvp-title { font-size: 1.6rem; line-height: 1.15; }
.storeRsvp-when { font-size: 1rem; margin-top: 0.5rem; }
.storeRsvp-where, .storeRsvp-left { font-size: 0.9rem; color: var(--design_muted_color); margin-top: 0.25rem; }
.storeRsvp-note { font-size: 0.9rem; margin-top: 1.25rem; }
.storeRsvp-off, .storeRsvp-done {
     padding: 0.85rem 1rem;
     border: 1px solid color-mix(in srgb, var(--design_text_color) 20%, transparent);
     border-radius: 3px;
}
.storeRsvp-consent { font-size: 0.78rem; color: var(--design_muted_color); margin-top: 1.25rem; }
.storeRsvp-hint { color: var(--design_muted_color); font-weight: 400; }
.storeRsvp-back { font-size: 0.85rem; margin-top: 1.5rem; }
.storeRsvpForm { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
.storeRsvpForm label { display: grid; gap: 0.2rem; font-size: 0.8rem; color: var(--design_muted_color); }
.storeRsvpForm input[type="text"], .storeRsvpForm input[type="email"],
.storeRsvpForm input[type="tel"], .storeRsvpForm input[type="number"] {
     padding: 0.6rem; font: inherit; font-size: 1rem;
     color: var(--design_text_color); background: transparent;
     border: 1px solid color-mix(in srgb, var(--design_text_color) 30%, transparent);
     border-radius: 3px;
}
/* The two checkboxes read as sentences, not as fields — they are questions
   with a default, and the label has to sit beside the box to be one. */
.storeRsvpForm .storeRsvp-check {
     display: flex; align-items: flex-start; gap: 0.5rem;
     font-size: 0.85rem; color: var(--design_text_color);
}
.storeRsvpForm-status { font-size: 0.85rem; color: var(--design_muted_color); }

.storeWatch { max-width: 64rem; margin: 0 auto; }
.storeWatch-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* Before the player module upgrades the element it is an unknown tag with no
   box, so the page would jump when it defines. Reserving the frame keeps the
   watch page still while a megabyte of player arrives. */
mux-player.storeWatch-player { --controls-backdrop-color: rgba(0,0,0,.4); background: #000; }
.storeWatch-loading, .storeWatch-error { color: var(--design_muted_color); text-align: center; padding: 3rem 0; }
.storeWatch-back { text-align: center; margin-top: 1rem; font-size: 0.85rem; }

.background {
     display: block;
     position: fixed;
     top: 0;
     left: 0;
     width: 100dvw;
     height: 100dvh;
     background-color: var(--design_bg_color);
     background-size: cover;
     background-position: center center;
     z-index: -1;
}

/* ──────────────────────────────────────────────────────────────────────────
   Drawer — "underlay reveal" (the OSMO inversion).

   The whole page (.wrapper, which carries the opaque .background key art) is one
   opaque layer ON TOP (z-index 2); the .drawer is a stationary fixed underlay
   sitting BENEATH it (z-index 1). Opening reframes the page into a poster with a
   GPU-composited transform (no width animation / no reflow), uncovering the
   widget that was underneath the whole time. Because the page is an opaque sheet
   over the drawer, the drawer is genuinely hidden until revealed, and fully
   interactive the instant it's uncovered. */
/* Site-wide stacking base: the page (.wrapper, with its opaque .background) is
   the covering layer; the .drawer underlay sits beneath it. This holds on every
   page so the drawer (which renders site-wide) never paints over the content —
   only body#Home actually transforms to reveal it. */
.wrapper {
    position: relative;
    z-index: 2;
}
.drawer {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}
body#Home .wrapper {
    overflow-x: hidden;
    display: block;
    /* Opaque base so the page fully hides the drawer underlay when closed — the
       fixed .background's blur fades its own edges to transparent, which would
       otherwise let the drawer (e.g. its close button) leak through at the
       corners. This solid layer sits behind the key art and covers that gap. */
    background-color: var(--design_bg_color);
    /* The reframe is a WIDTH change into a portrait poster — not a scale. A
       uniform scale of the landscape viewport just gives a smaller landscape
       page (the poster shape is lost). Only the wrapper + its fixed .background
       animate; the drawer beneath is stationary, so nothing desyncs. The
       border-radius is tweened too so the poster's rounded edge eases in/out
       instead of snapping square. */
    transition: width 0.7s ease-in-out, border-radius 0.7s ease-in-out;
}
body#Home .background {
    transition: width 0.7s ease-in-out, border-radius 0.7s ease-in-out;
}

/* Open: reframe the page into a full-height PORTRAIT poster on the left,
   uncovering the stationary drawer in the remaining space on the right. */
body#Home.drawer-open .wrapper {
    width: calc((100dvh) * (609 / 900));
    height: 100dvh;
    overflow: hidden;
    border-radius: 0 17px 17px 0;
}
body#Home.drawer-open .background {
    width: calc((100dvh) * (609 / 900)) !important;
    height: 100dvh;
    border-radius: 0 17px 17px 0;
    /* A tight edge shadow only — the previous 120px halo escaped the wrapper's
       clip (.background is fixed) and bled the "blur" out the poster's side into
       the drawer. The poster reads against the much darker drawer anyway. */
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.35);
}
/* Hide everything past the hero so only the key art + title reads as the poster
   (the lower blocks would otherwise stack down the narrow reframed column). */
body#Home.drawer-open .contentWrapper > *:not(:first-child) {
    opacity: 0;
    pointer-events: none;
}
/* Attach the corner ribbon to the POSTER: switch it to absolute so it's a child
   of the reframing .wrapper, and the wrapper's overflow:hidden CLIPS it to the
   poster's corner — a proper corner banner that can't spill into the drawer. It
   follows the poster's right edge as the wrapper width animates, so it rides in
   with the reframe. .drawer-closing keeps it absolute through the close
   transition (JS removes that class once the poster is full again) so it slides
   back out with the poster instead of snapping to the viewport corner. */
body#Home.drawer-open header .header-wrap a,
body#Home.drawer-closing header .header-wrap a {
    position: absolute;
    right: -5rem;
}
/* The ribbon's containing block must be the .wrapper (the poster), not the
   header: the desktop header is position: relative for its own children, and
   while the drawer is open that made the absolute ribbon anchor to the
   header's box instead — wherever the header happened to sit (a site's custom
   CSS offsetting or fixing it, a taller bar) drops the ribbon down the page
   and out of the poster's clip. Static for the open / closing states on
   desktop only: the mobile header is position: absolute at the wrapper's top
   (see the max-width block below) and must stay out of flow, and its ribbon
   keeps the mobile corner offsets. The hamburger label positions against the
   same top-left corner either way. */
@media (min-width: 768.02px) {
    body#Home.drawer-open header,
    body#Home.drawer-closing header {
        position: static;
    }
}

/* Lock the page behind the open drawer (the widget scrolls on its own). */
body#Home.drawer-open {
    overflow: hidden;
    height: 100dvh;
}

.drawer-content-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Clear the poster column on the left so the widget reads in the revealed
       right-hand space (poster width + a gap). */
    padding: 48px 32px 48px calc((100dvh) * (609 / 900) + 4vw);
}

.drawer-content {
     /* overflow-y: scroll; */
}

.drawer-close {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 10px;
  z-index: 9999;
}

.drawer-close span {
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.drawer-close span:nth-child(1) {
  top: 30px;
  transform: rotate(45deg);
}
.drawer-close span:nth-child(2) {
  top: 30px;
  transform: rotate(-45deg);
}

.drawer-content .row {
     padding: 0;
     /* width: 100%; */
}
.drawer-content .row:first-child {
     padding-top: 50px;
}

.drawer-widget {
  margin-top: 10px;
}


.drawer-content .row .inner-section {
     /* max-width: 800px; */
     margin: 0 auto 0 auto;
     display: flex;
     flex-wrap: wrap;
}

.drawer-content .row .inner-section > .col {
  flex-grow: 1;
  flex-shrink: 1;
  /* flex-basis: 30ch; */
  overflow-x: hidden;
}

/* The underlay's backdrop, baked into the stationary .drawer (not a separate
   sliding layer) so there's nothing to desync. Two stacked layers:
   .drawer-bg   — the film key art, blurred + darkened with the ORIGINAL recipe
                  (themeable blur var + brightness_heavy). Oversized (inset:-60px)
                  so the blur's own faded edges fall outside the .drawer's
                  overflow:hidden clip — that's what stops the blur leaking past
                  the panel edge.
   .drawer-bg-inner — the lighter --design_bg_tint overlay + grain on top, so the
                  blurred film still reads (the heavier _heavy tint crushed it). */
.drawer-bg {
    position: absolute;
    inset: -60px;
    background: url(/img/f8718bca6e0440b0.jpg) no-repeat center center;
    background-size: cover;
    background-color: var(--design_bg_color);
    filter: blur(var(--theme-drawer-blur, var(--design_bg_blur))) brightness(var(--design_bg_brightness_heavy));
    z-index: 0;
}
.drawer-bg-inner {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--theme-tint, var(--design_bg_tint));
}
.drawer-bg-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--theme-texture-opacity, 0.2);
  background: var(--theme-texture, var(--design_bg_grain)) repeat;
  pointer-events: none;
}

.drawer-action, .header-top-news {
     animation: fade-in 0.5s ease-in-out;
}

body#Home.drawer-open .drawer-action,
body#Home.drawer-open .header-top-news,
body#Home.drawer-open .footer,
body#Home.drawer-open .btns {
     opacity: 0;
     animation: fade-out 0.5s ease-in-out;
}

@keyframes fade-out {
     from { opacity: 1; }
     to { opacity: 0; }
}
@keyframes fade-in {
     from { opacity: 0; }
     to { opacity: 1; }
}
@keyframes fade-in-up {
     from { opacity: 0; transform: translateY(12px); }
     to { opacity: 1; transform: translateY(0); }
}

/* The widget triggers its own fixed, viewport-centred modal (notify). While
   that's open, lift the whole underlay above the poster so the dialog isn't
   occluded by it. :has() only — without it the modal is still interactive,
   just partly poster-covered. */
body#Home.drawer-open:has(.notify-modal.is-open) .drawer,
body#Home.drawer-open:has(.notify-modal-backdrop.is-open) .drawer {
     z-index: 3;
}

/* Deep-link pre-open: the inline head-of-body script adds .drawer-open +
   .drawer-preopen before first paint, so a drawer hash in the URL opens with no
   hero intro and no reveal transition. The transition is restored (preopen
   class removed) after the first painted frame. */
body#Home.drawer-preopen .wrapper,
body#Home.drawer-preopen .background,
body#Home.drawer-preopen .drawer,
body#Home.drawer-preopen .drawer-bg,
body#Home.drawer-preopen header .header-wrap a {
     transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
     body#Home .wrapper { transition: none; }
}

/* Widget Styling Overrides */
.drawer-content .showtimesModule {
     padding: 112px 20px 20px 20px;
}

/* Hero intro — plays ONCE on a fresh load via the .intro-animate one-shot class
   (added pre-paint in page.tsx only when no drawer hash is present). Gating on
   this instead of :not(.drawer-open) means closing the drawer does NOT replay
   it, so the title no longer vanishes and pops back on close. */
/* The site's own hero content only: a showtimes widget embedded as a block
   carries .btn / h2 / h3 of its own, and those must never fade in late. */
body#Home.intro-animate .contentWrapper h2:not(.assemble-widget *),
body#Home.intro-animate .contentWrapper h3:not(.assemble-widget *),
body#Home.intro-animate .contentWrapper h4:not(.assemble-widget *),
body#Home.intro-animate .contentWrapper .btn:not(.assemble-widget *),
body#Home.intro-animate .contentWrapper .btns a:not(.assemble-widget *)  {
     opacity: 0;
     animation: fade-in-up 0.8s ease both;
}
body#Home.intro-animate header .header-wrap a,
body#Home.intro-animate header label {
     opacity: 0;
     animation: fade-in 0.4s ease both;
}
body#Home.intro-animate .contentWrapper .titleImage {
     opacity: 0;
     animation: fade-in-up 0.9s ease both;
     animation-delay: 0.6s;
}
body#Home.intro-animate .contentWrapper h2:not(.assemble-widget *) { animation-delay: 1s; }
body#Home.intro-animate .contentWrapper h3:not(.assemble-widget *) { animation-delay: 1s; }
body#Home.intro-animate .contentWrapper h4:not(.assemble-widget *) { animation-delay: 1s; }
body#Home.intro-animate .contentWrapper .btn:not(.assemble-widget *),
body#Home.intro-animate .contentWrapper .btns a:not(.assemble-widget *) { animation-delay: 1.5s; }
body#Home.intro-animate header .header-wrap a { animation-delay: 1.5s; }
body#Home.intro-animate header label { animation-delay: 2s; }

ul.showtimes-top-tabs {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
}
ul.showtimes-top-tabs > li {
    /* flex-grow: 1; */
    /* flex-shrink: 1; */
    /* flex-basis: 10ch; */
    gap: 1rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
}
ul.showtimes-top-tabs > li.active {
     background-color: #fff;
     color: var(--design_nav_tabs_bg_color);
}
ul.showtimes-top-tabs > li.highlight {
     background-color: var(--design_nav_tabs_bg_color);
}

.two-col-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.two-col-flex > :last-child {
  flex-grow: 1;
}

.two-col-flex > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}





.grain {
    background-color: var(--theme-tint, var(--design_bg_tint));
    backdrop-filter: brightness(var(--design_bg_brightness)) blur(var(--theme-surface-blur, var(--design_bg_blur)));
}





@media (max-width: 768px) {
     header label {
          width: 42px;
          height: 32px;
          top: 16px;
          left: 16px;
     }
     #nav-icon1 {
          width: 34px;
          height: 28px;
     }
     #nav-icon1 span:nth-child(1) {
          top: 0;
     }
     #nav-icon1 span:nth-child(2),#nav-icon1 span:nth-child(3) {
          top: 12px;
     }
     #nav-icon1 span:nth-child(4) {
          top: 24px;
     }
     label:has(+input[type='checkbox']:checked) #nav-icon1 span:nth-child(1) {
          top: 12px;
     }
     label:has(+input[type='checkbox']:checked) #nav-icon1 span:nth-child(4) {
          top: 12px;
     }

     /* The menu overlay on phones: smaller type (the desktop clamp is ~42px),
        and centred for real — the desktop rule's 3rem padding plus a 100%-wide
        list used to push the whole list off the right edge. Same specificity
        as the desktop rule so these win here. */
     nav:not(.widget-nav):not(.assemble-widget nav) {
          text-align: center;
          padding: 5rem 1.25rem 2rem;
          font-size: var(--design_nav_menu_size, clamp(22px, 7vw, 30px));
     }
     nav:not(.widget-nav):not(.assemble-widget nav) ul {
          padding: 0;
          margin: 0 auto;
          width: 100%;
     }
     nav:not(.widget-nav):not(.assemble-widget nav) ul li {
          text-align: center;
          margin-bottom: 0.75rem;
     }
     nav ul li.home:before {
          height: 10vh;
          margin: 1.5rem 0 1.5rem;
     }

     header {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
     }

     header .header-wrap a {
          top: 2.5rem;
          right: -7.5rem;
          transform: rotateZ(45deg);
          min-width: 21rem;
          padding: 0.1rem;
          z-index: 9999;
          font-size: 13px;
     }
     /* Mobile reframes to a full-width header, so the ribbon stays in the
        viewport corner — cancel the desktop poster-edge shift. */
     body#Home.drawer-open header .header-wrap a {
          right: -7.5rem;
     }

     /* Mobile reveal: the page reframes into a short header on top (key art +
        title), uncovering the stationary drawer below — same inversion, vertical
        axis. Height change, not a full-page scale. */
     body#Home .wrapper,
     body#Home .background {
          transition: height 0.7s ease-in-out;
     }
     body#Home.drawer-open .wrapper {
          width: 100dvw;
          height: 33dvh;
          overflow: hidden;
          border-radius: 0 0 17px 17px;
     }
     body#Home.drawer-open .background {
          width: 100dvw !important;
          height: 33dvh;
          border-radius: 0 0 17px 17px;
     }
     body#Home.drawer-open .contentWrapper {
          height: 33dvh;
          min-height: 0;
          overflow: hidden;
     }
     /* Compress the tall hero so its title sits within the short header. */
     body#Home.drawer-open .contentWrapper > *:first-child {
          min-height: 0;
          transform: scale(0.42);
          transform-origin: top center;
     }

     .drawer-content-wrapper {
          /* Clear the header card + the close button up top; full width below. */
          padding: calc(33dvh + 64px) 16px 32px 16px;
     }

     .drawer-close {
          /* The drawer is the underlay (z-index 1) BEHIND the poster header
             (z-index 2), so a top:8px close hides under the header. Pin it
             (fixed, so it doesn't scroll with the widget) into the revealed
             drawer area just below the 33dvh header. */
          position: fixed;
          top: calc(33dvh + 10px);
          right: 16px;
          left: auto;
     }

     .drawer-content .showtimesModule {
          padding: 40px 0 0 0;
     }

}


.palette-box > div {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     margin: 10px;
     float: left;
     }


/*-------------------------------------------------------
   Backgrounds
-------------------------------------------------------*/


body {
  color: var(--design_text_color);
  font-family: var(--design_body_font); 
  background-color: var(--design_bg_color);

}
body#Home {

  }


h1, h2, h3, h4, h5, h6, .header, .footer, ul.header-top-shop { font-family: "Gotham-Medium", system-ui, sans-serif; font-weight: 600; }


/*-------------------------------------------------------
   Background
-------------------------------------------------------*/
.background {
  
  
  }

body#Home .background {
  
  display: block;
  width: 100dvw;
  height: 100dvh;
  position: fixed;
  background-position: center center;
  margin: 0;
  padding: 0;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  z-index: -999;
  background-image: url(/img/f8718bca6e0440b0.jpg); background-size:cover;
}

@media (max-width: 768px) {
  body#Home .background {
    background-position: center top;
  }
}

/* @media (min-width: 768px) { */
  body#Home .background {
      animation: blur-in var(--design_bg_intro_speed) ease-in-out;
  }
  @keyframes blur-in {
      from { opacity: 0; filter: blur(var(--design_bg_intro_blur)); transform: scale(1.02); }
      to { opacity: 1; filter: blur(0px); transform: scale(1); }
  }
/* } */





/* -------------------------------------------------------
   Grid
-------------------------------------------------------*/
.container {
    clear: both;
    padding: 0;
    margin:0;
    background-size: cover;
    background-position: center center;
}
.row {
    max-width: 80%;
    margin: 0 auto 0 auto;
    clear: both;
}
/*!
 * Bootstrap Grid v5.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding: 0;
  display: inline-block;
}

.container.fullheight,
.container-fluid.fullheight {
  height: 100vh;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
  margin-left: auto;
}
.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding: 2em 0;
  margin:0;
}

@media (min-width: 576px) {
  .row-sm, .row {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .row-md, .row-sm, .row {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .row-lg, .row-md, .row-sm, .row {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .row-xl, .row-lg, .row-md, .row-sm, .row {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .row-xxl, .row-xl, .row-lg, .row-md, .row-sm, .row {
    max-width: 1320px;
  }
}

.col {
  flex: 1 0 0%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.33333333%;
}

.offset-2 {
  margin-left: 16.66666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333333%;
}

.offset-5 {
  margin-left: 41.66666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333333%;
}

.offset-8 {
  margin-left: 66.66666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333333%;
}

.offset-11 {
  margin-left: 91.66666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }

  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.33333333%;
  }

  .offset-sm-2 {
    margin-left: 16.66666667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.33333333%;
  }

  .offset-sm-5 {
    margin-left: 41.66666667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.33333333%;
  }

  .offset-sm-8 {
    margin-left: 66.66666667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.33333333%;
  }

  .offset-sm-11 {
    margin-left: 91.66666667%;
  }

  .g-sm-0,
.gx-sm-0 {
    --bs-gutter-x: 0;
  }

  .g-sm-0,
.gy-sm-0 {
    --bs-gutter-y: 0;
  }

  .g-sm-1,
.gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-sm-1,
.gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-sm-2,
.gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-sm-2,
.gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-sm-3,
.gx-sm-3 {
    --bs-gutter-x: 1rem;
  }

  .g-sm-3,
.gy-sm-3 {
    --bs-gutter-y: 1rem;
  }

  .g-sm-4,
.gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-sm-4,
.gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-sm-5,
.gx-sm-5 {
    --bs-gutter-x: 3rem;
  }

  .g-sm-5,
.gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }

  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.33333333%;
  }

  .offset-md-2 {
    margin-left: 16.66666667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.33333333%;
  }

  .offset-md-5 {
    margin-left: 41.66666667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.33333333%;
  }

  .offset-md-8 {
    margin-left: 66.66666667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.33333333%;
  }

  .offset-md-11 {
    margin-left: 91.66666667%;
  }

  .g-md-0,
.gx-md-0 {
    --bs-gutter-x: 0;
  }

  .g-md-0,
.gy-md-0 {
    --bs-gutter-y: 0;
  }

  .g-md-1,
.gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-md-1,
.gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-md-2,
.gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-md-2,
.gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-md-3,
.gx-md-3 {
    --bs-gutter-x: 1rem;
  }

  .g-md-3,
.gy-md-3 {
    --bs-gutter-y: 1rem;
  }

  .g-md-4,
.gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-md-4,
.gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-md-5,
.gx-md-5 {
    --bs-gutter-x: 3rem;
  }

  .g-md-5,
.gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }

  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.33333333%;
  }

  .offset-lg-2 {
    margin-left: 16.66666667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.33333333%;
  }

  .offset-lg-5 {
    margin-left: 41.66666667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.33333333%;
  }

  .offset-lg-8 {
    margin-left: 66.66666667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.33333333%;
  }

  .offset-lg-11 {
    margin-left: 91.66666667%;
  }

  .g-lg-0,
.gx-lg-0 {
    --bs-gutter-x: 0;
  }

  .g-lg-0,
.gy-lg-0 {
    --bs-gutter-y: 0;
  }

  .g-lg-1,
.gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-lg-1,
.gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-lg-2,
.gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-lg-2,
.gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-lg-3,
.gx-lg-3 {
    --bs-gutter-x: 1rem;
  }

  .g-lg-3,
.gy-lg-3 {
    --bs-gutter-y: 1rem;
  }

  .g-lg-4,
.gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-lg-4,
.gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-lg-5,
.gx-lg-5 {
    --bs-gutter-x: 3rem;
  }

  .g-lg-5,
.gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }

  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.33333333%;
  }

  .offset-xl-2 {
    margin-left: 16.66666667%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }

  .offset-xl-4 {
    margin-left: 33.33333333%;
  }

  .offset-xl-5 {
    margin-left: 41.66666667%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }

  .offset-xl-7 {
    margin-left: 58.33333333%;
  }

  .offset-xl-8 {
    margin-left: 66.66666667%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }

  .offset-xl-10 {
    margin-left: 83.33333333%;
  }

  .offset-xl-11 {
    margin-left: 91.66666667%;
  }

  .g-xl-0,
.gx-xl-0 {
    --bs-gutter-x: 0;
  }

  .g-xl-0,
.gy-xl-0 {
    --bs-gutter-y: 0;
  }

  .g-xl-1,
.gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-xl-1,
.gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-xl-2,
.gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-xl-2,
.gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-xl-3,
.gx-xl-3 {
    --bs-gutter-x: 1rem;
  }

  .g-xl-3,
.gy-xl-3 {
    --bs-gutter-y: 1rem;
  }

  .g-xl-4,
.gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-xl-4,
.gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-xl-5,
.gx-xl-5 {
    --bs-gutter-x: 3rem;
  }

  .g-xl-5,
.gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }

  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-xxl-0 {
    margin-left: 0;
  }

  .offset-xxl-1 {
    margin-left: 8.33333333%;
  }

  .offset-xxl-2 {
    margin-left: 16.66666667%;
  }

  .offset-xxl-3 {
    margin-left: 25%;
  }

  .offset-xxl-4 {
    margin-left: 33.33333333%;
  }

  .offset-xxl-5 {
    margin-left: 41.66666667%;
  }

  .offset-xxl-6 {
    margin-left: 50%;
  }

  .offset-xxl-7 {
    margin-left: 58.33333333%;
  }

  .offset-xxl-8 {
    margin-left: 66.66666667%;
  }

  .offset-xxl-9 {
    margin-left: 75%;
  }

  .offset-xxl-10 {
    margin-left: 83.33333333%;
  }

  .offset-xxl-11 {
    margin-left: 91.66666667%;
  }

  .g-xxl-0,
.gx-xxl-0 {
    --bs-gutter-x: 0;
  }

  .g-xxl-0,
.gy-xxl-0 {
    --bs-gutter-y: 0;
  }

  .g-xxl-1,
.gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-xxl-1,
.gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-xxl-2,
.gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-xxl-2,
.gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-xxl-3,
.gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }

  .g-xxl-3,
.gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }

  .g-xxl-4,
.gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-xxl-4,
.gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-xxl-5,
.gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }

  .g-xxl-5,
.gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-none {
  display: none !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.me-auto {
  margin-right: auto !important;
}

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

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

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

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

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

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.pe-3 {
  padding-right: 1rem !important;
}

.pe-4 {
  padding-right: 1.5rem !important;
}

.pe-5 {
  padding-right: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.ps-4 {
  padding-left: 1.5rem !important;
}

.ps-5 {
  padding-left: 3rem !important;
}

@media (min-width: 576px) {
  .d-sm-inline {
    display: inline !important;
  }

  .d-sm-inline-block {
    display: inline-block !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-grid {
    display: grid !important;
  }

  .d-sm-table {
    display: table !important;
  }

  .d-sm-table-row {
    display: table-row !important;
  }

  .d-sm-table-cell {
    display: table-cell !important;
  }

  .d-sm-flex {
    display: flex !important;
  }

  .d-sm-inline-flex {
    display: inline-flex !important;
  }

  .d-sm-none {
    display: none !important;
  }

  .flex-sm-fill {
    flex: 1 1 auto !important;
  }

  .flex-sm-row {
    flex-direction: row !important;
  }

  .flex-sm-column {
    flex-direction: column !important;
  }

  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }

  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }

  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .justify-content-sm-start {
    justify-content: flex-start !important;
  }

  .justify-content-sm-end {
    justify-content: flex-end !important;
  }

  .justify-content-sm-center {
    justify-content: center !important;
  }

  .justify-content-sm-between {
    justify-content: space-between !important;
  }

  .justify-content-sm-around {
    justify-content: space-around !important;
  }

  .justify-content-sm-evenly {
    justify-content: space-evenly !important;
  }

  .align-items-sm-start {
    align-items: flex-start !important;
  }

  .align-items-sm-end {
    align-items: flex-end !important;
  }

  .align-items-sm-center {
    align-items: center !important;
  }

  .align-items-sm-baseline {
    align-items: baseline !important;
  }

  .align-items-sm-stretch {
    align-items: stretch !important;
  }

  .align-content-sm-start {
    align-content: flex-start !important;
  }

  .align-content-sm-end {
    align-content: flex-end !important;
  }

  .align-content-sm-center {
    align-content: center !important;
  }

  .align-content-sm-between {
    align-content: space-between !important;
  }

  .align-content-sm-around {
    align-content: space-around !important;
  }

  .align-content-sm-stretch {
    align-content: stretch !important;
  }

  .align-self-sm-auto {
    align-self: auto !important;
  }

  .align-self-sm-start {
    align-self: flex-start !important;
  }

  .align-self-sm-end {
    align-self: flex-end !important;
  }

  .align-self-sm-center {
    align-self: center !important;
  }

  .align-self-sm-baseline {
    align-self: baseline !important;
  }

  .align-self-sm-stretch {
    align-self: stretch !important;
  }

  .order-sm-first {
    order: -1 !important;
  }

  .order-sm-0 {
    order: 0 !important;
  }

  .order-sm-1 {
    order: 1 !important;
  }

  .order-sm-2 {
    order: 2 !important;
  }

  .order-sm-3 {
    order: 3 !important;
  }

  .order-sm-4 {
    order: 4 !important;
  }

  .order-sm-5 {
    order: 5 !important;
  }

  .order-sm-last {
    order: 6 !important;
  }

  .m-sm-0 {
    margin: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mx-sm-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-sm-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-sm-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-sm-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-sm-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-sm-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-sm-0 {
    margin-top: 0 !important;
  }

  .mt-sm-1 {
    margin-top: 0.25rem !important;
  }

  .mt-sm-2 {
    margin-top: 0.5rem !important;
  }

  .mt-sm-3 {
    margin-top: 1rem !important;
  }

  .mt-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mt-sm-5 {
    margin-top: 3rem !important;
  }

  .mt-sm-auto {
    margin-top: auto !important;
  }

  .me-sm-0 {
    margin-right: 0 !important;
  }

  .me-sm-1 {
    margin-right: 0.25rem !important;
  }

  .me-sm-2 {
    margin-right: 0.5rem !important;
  }

  .me-sm-3 {
    margin-right: 1rem !important;
  }

  .me-sm-4 {
    margin-right: 1.5rem !important;
  }

  .me-sm-5 {
    margin-right: 3rem !important;
  }

  .me-sm-auto {
    margin-right: auto !important;
  }

  .mb-sm-0 {
    margin-bottom: 0 !important;
  }

  .mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-sm-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-sm-3 {
    margin-bottom: 1rem !important;
  }

  .mb-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-sm-5 {
    margin-bottom: 3rem !important;
  }

  .mb-sm-auto {
    margin-bottom: auto !important;
  }

  .ms-sm-0 {
    margin-left: 0 !important;
  }

  .ms-sm-1 {
    margin-left: 0.25rem !important;
  }

  .ms-sm-2 {
    margin-left: 0.5rem !important;
  }

  .ms-sm-3 {
    margin-left: 1rem !important;
  }

  .ms-sm-4 {
    margin-left: 1.5rem !important;
  }

  .ms-sm-5 {
    margin-left: 3rem !important;
  }

  .ms-sm-auto {
    margin-left: auto !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }

  .px-sm-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-sm-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-sm-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-sm-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-sm-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

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

  .pt-sm-1 {
    padding-top: 0.25rem !important;
  }

  .pt-sm-2 {
    padding-top: 0.5rem !important;
  }

  .pt-sm-3 {
    padding-top: 1rem !important;
  }

  .pt-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pt-sm-5 {
    padding-top: 3rem !important;
  }

  .pe-sm-0 {
    padding-right: 0 !important;
  }

  .pe-sm-1 {
    padding-right: 0.25rem !important;
  }

  .pe-sm-2 {
    padding-right: 0.5rem !important;
  }

  .pe-sm-3 {
    padding-right: 1rem !important;
  }

  .pe-sm-4 {
    padding-right: 1.5rem !important;
  }

  .pe-sm-5 {
    padding-right: 3rem !important;
  }

  .pb-sm-0 {
    padding-bottom: 0 !important;
  }

  .pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-sm-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pb-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-sm-5 {
    padding-bottom: 3rem !important;
  }

  .ps-sm-0 {
    padding-left: 0 !important;
  }

  .ps-sm-1 {
    padding-left: 0.25rem !important;
  }

  .ps-sm-2 {
    padding-left: 0.5rem !important;
  }

  .ps-sm-3 {
    padding-left: 1rem !important;
  }

  .ps-sm-4 {
    padding-left: 1.5rem !important;
  }

  .ps-sm-5 {
    padding-left: 3rem !important;
  }
}
@media (min-width: 768px) {
  .d-md-inline {
    display: inline !important;
  }

  .d-md-inline-block {
    display: inline-block !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-grid {
    display: grid !important;
  }

  .d-md-table {
    display: table !important;
  }

  .d-md-table-row {
    display: table-row !important;
  }

  .d-md-table-cell {
    display: table-cell !important;
  }

  .d-md-flex {
    display: flex !important;
  }

  .d-md-inline-flex {
    display: inline-flex !important;
  }

  .d-md-none {
    display: none !important;
  }

  .flex-md-fill {
    flex: 1 1 auto !important;
  }

  .flex-md-row {
    flex-direction: row !important;
  }

  .flex-md-column {
    flex-direction: column !important;
  }

  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }

  .flex-md-wrap {
    flex-wrap: wrap !important;
  }

  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .justify-content-md-start {
    justify-content: flex-start !important;
  }

  .justify-content-md-end {
    justify-content: flex-end !important;
  }

  .justify-content-md-center {
    justify-content: center !important;
  }

  .justify-content-md-between {
    justify-content: space-between !important;
  }

  .justify-content-md-around {
    justify-content: space-around !important;
  }

  .justify-content-md-evenly {
    justify-content: space-evenly !important;
  }

  .align-items-md-start {
    align-items: flex-start !important;
  }

  .align-items-md-end {
    align-items: flex-end !important;
  }

  .align-items-md-center {
    align-items: center !important;
  }

  .align-items-md-baseline {
    align-items: baseline !important;
  }

  .align-items-md-stretch {
    align-items: stretch !important;
  }

  .align-content-md-start {
    align-content: flex-start !important;
  }

  .align-content-md-end {
    align-content: flex-end !important;
  }

  .align-content-md-center {
    align-content: center !important;
  }

  .align-content-md-between {
    align-content: space-between !important;
  }

  .align-content-md-around {
    align-content: space-around !important;
  }

  .align-content-md-stretch {
    align-content: stretch !important;
  }

  .align-self-md-auto {
    align-self: auto !important;
  }

  .align-self-md-start {
    align-self: flex-start !important;
  }

  .align-self-md-end {
    align-self: flex-end !important;
  }

  .align-self-md-center {
    align-self: center !important;
  }

  .align-self-md-baseline {
    align-self: baseline !important;
  }

  .align-self-md-stretch {
    align-self: stretch !important;
  }

  .order-md-first {
    order: -1 !important;
  }

  .order-md-0 {
    order: 0 !important;
  }

  .order-md-1 {
    order: 1 !important;
  }

  .order-md-2 {
    order: 2 !important;
  }

  .order-md-3 {
    order: 3 !important;
  }

  .order-md-4 {
    order: 4 !important;
  }

  .order-md-5 {
    order: 5 !important;
  }

  .order-md-last {
    order: 6 !important;
  }

  .m-md-0 {
    margin: 0 !important;
  }

  .m-md-1 {
    margin: 0.25rem !important;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .m-md-5 {
    margin: 3rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mx-md-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-md-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-md-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-md-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-md-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-md-0 {
    margin-top: 0 !important;
  }

  .mt-md-1 {
    margin-top: 0.25rem !important;
  }

  .mt-md-2 {
    margin-top: 0.5rem !important;
  }

  .mt-md-3 {
    margin-top: 1rem !important;
  }

  .mt-md-4 {
    margin-top: 1.5rem !important;
  }

  .mt-md-5 {
    margin-top: 3rem !important;
  }

  .mt-md-auto {
    margin-top: auto !important;
  }

  .me-md-0 {
    margin-right: 0 !important;
  }

  .me-md-1 {
    margin-right: 0.25rem !important;
  }

  .me-md-2 {
    margin-right: 0.5rem !important;
  }

  .me-md-3 {
    margin-right: 1rem !important;
  }

  .me-md-4 {
    margin-right: 1.5rem !important;
  }

  .me-md-5 {
    margin-right: 3rem !important;
  }

  .me-md-auto {
    margin-right: auto !important;
  }

  .mb-md-0 {
    margin-bottom: 0 !important;
  }

  .mb-md-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-md-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-md-3 {
    margin-bottom: 1rem !important;
  }

  .mb-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-md-5 {
    margin-bottom: 3rem !important;
  }

  .mb-md-auto {
    margin-bottom: auto !important;
  }

  .ms-md-0 {
    margin-left: 0 !important;
  }

  .ms-md-1 {
    margin-left: 0.25rem !important;
  }

  .ms-md-2 {
    margin-left: 0.5rem !important;
  }

  .ms-md-3 {
    margin-left: 1rem !important;
  }

  .ms-md-4 {
    margin-left: 1.5rem !important;
  }

  .ms-md-5 {
    margin-left: 3rem !important;
  }

  .ms-md-auto {
    margin-left: auto !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .p-md-1 {
    padding: 0.25rem !important;
  }

  .p-md-2 {
    padding: 0.5rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .p-md-5 {
    padding: 3rem !important;
  }

  .px-md-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-md-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-md-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-md-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-md-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

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

  .pt-md-1 {
    padding-top: 0.25rem !important;
  }

  .pt-md-2 {
    padding-top: 0.5rem !important;
  }

  .pt-md-3 {
    padding-top: 1rem !important;
  }

  .pt-md-4 {
    padding-top: 1.5rem !important;
  }

  .pt-md-5 {
    padding-top: 3rem !important;
  }

  .pe-md-0 {
    padding-right: 0 !important;
  }

  .pe-md-1 {
    padding-right: 0.25rem !important;
  }

  .pe-md-2 {
    padding-right: 0.5rem !important;
  }

  .pe-md-3 {
    padding-right: 1rem !important;
  }

  .pe-md-4 {
    padding-right: 1.5rem !important;
  }

  .pe-md-5 {
    padding-right: 3rem !important;
  }

  .pb-md-0 {
    padding-bottom: 0 !important;
  }

  .pb-md-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-md-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-md-3 {
    padding-bottom: 1rem !important;
  }

  .pb-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-md-5 {
    padding-bottom: 3rem !important;
  }

  .ps-md-0 {
    padding-left: 0 !important;
  }

  .ps-md-1 {
    padding-left: 0.25rem !important;
  }

  .ps-md-2 {
    padding-left: 0.5rem !important;
  }

  .ps-md-3 {
    padding-left: 1rem !important;
  }

  .ps-md-4 {
    padding-left: 1.5rem !important;
  }

  .ps-md-5 {
    padding-left: 3rem !important;
  }
}
@media (min-width: 992px) {
  .d-lg-inline {
    display: inline !important;
  }

  .d-lg-inline-block {
    display: inline-block !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-grid {
    display: grid !important;
  }

  .d-lg-table {
    display: table !important;
  }

  .d-lg-table-row {
    display: table-row !important;
  }

  .d-lg-table-cell {
    display: table-cell !important;
  }

  .d-lg-flex {
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: inline-flex !important;
  }

  .d-lg-none {
    display: none !important;
  }

  .flex-lg-fill {
    flex: 1 1 auto !important;
  }

  .flex-lg-row {
    flex-direction: row !important;
  }

  .flex-lg-column {
    flex-direction: column !important;
  }

  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }

  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }

  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .justify-content-lg-start {
    justify-content: flex-start !important;
  }

  .justify-content-lg-end {
    justify-content: flex-end !important;
  }

  .justify-content-lg-center {
    justify-content: center !important;
  }

  .justify-content-lg-between {
    justify-content: space-between !important;
  }

  .justify-content-lg-around {
    justify-content: space-around !important;
  }

  .justify-content-lg-evenly {
    justify-content: space-evenly !important;
  }

  .align-items-lg-start {
    align-items: flex-start !important;
  }

  .align-items-lg-end {
    align-items: flex-end !important;
  }

  .align-items-lg-center {
    align-items: center !important;
  }

  .align-items-lg-baseline {
    align-items: baseline !important;
  }

  .align-items-lg-stretch {
    align-items: stretch !important;
  }

  .align-content-lg-start {
    align-content: flex-start !important;
  }

  .align-content-lg-end {
    align-content: flex-end !important;
  }

  .align-content-lg-center {
    align-content: center !important;
  }

  .align-content-lg-between {
    align-content: space-between !important;
  }

  .align-content-lg-around {
    align-content: space-around !important;
  }

  .align-content-lg-stretch {
    align-content: stretch !important;
  }

  .align-self-lg-auto {
    align-self: auto !important;
  }

  .align-self-lg-start {
    align-self: flex-start !important;
  }

  .align-self-lg-end {
    align-self: flex-end !important;
  }

  .align-self-lg-center {
    align-self: center !important;
  }

  .align-self-lg-baseline {
    align-self: baseline !important;
  }

  .align-self-lg-stretch {
    align-self: stretch !important;
  }

  .order-lg-first {
    order: -1 !important;
  }

  .order-lg-0 {
    order: 0 !important;
  }

  .order-lg-1 {
    order: 1 !important;
  }

  .order-lg-2 {
    order: 2 !important;
  }

  .order-lg-3 {
    order: 3 !important;
  }

  .order-lg-4 {
    order: 4 !important;
  }

  .order-lg-5 {
    order: 5 !important;
  }

  .order-lg-last {
    order: 6 !important;
  }

  .m-lg-0 {
    margin: 0 !important;
  }

  .m-lg-1 {
    margin: 0.25rem !important;
  }

  .m-lg-2 {
    margin: 0.5rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .m-lg-5 {
    margin: 3rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-lg-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-lg-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-lg-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-lg-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-lg-0 {
    margin-top: 0 !important;
  }

  .mt-lg-1 {
    margin-top: 0.25rem !important;
  }

  .mt-lg-2 {
    margin-top: 0.5rem !important;
  }

  .mt-lg-3 {
    margin-top: 1rem !important;
  }

  .mt-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mt-lg-5 {
    margin-top: 3rem !important;
  }

  .mt-lg-auto {
    margin-top: auto !important;
  }

  .me-lg-0 {
    margin-right: 0 !important;
  }

  .me-lg-1 {
    margin-right: 0.25rem !important;
  }

  .me-lg-2 {
    margin-right: 0.5rem !important;
  }

  .me-lg-3 {
    margin-right: 1rem !important;
  }

  .me-lg-4 {
    margin-right: 1.5rem !important;
  }

  .me-lg-5 {
    margin-right: 3rem !important;
  }

  .me-lg-auto {
    margin-right: auto !important;
  }

  .mb-lg-0 {
    margin-bottom: 0 !important;
  }

  .mb-lg-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-lg-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-lg-3 {
    margin-bottom: 1rem !important;
  }

  .mb-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-lg-5 {
    margin-bottom: 3rem !important;
  }

  .mb-lg-auto {
    margin-bottom: auto !important;
  }

  .ms-lg-0 {
    margin-left: 0 !important;
  }

  .ms-lg-1 {
    margin-left: 0.25rem !important;
  }

  .ms-lg-2 {
    margin-left: 0.5rem !important;
  }

  .ms-lg-3 {
    margin-left: 1rem !important;
  }

  .ms-lg-4 {
    margin-left: 1.5rem !important;
  }

  .ms-lg-5 {
    margin-left: 3rem !important;
  }

  .ms-lg-auto {
    margin-left: auto !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .p-lg-1 {
    padding: 0.25rem !important;
  }

  .p-lg-2 {
    padding: 0.5rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .p-lg-5 {
    padding: 3rem !important;
  }

  .px-lg-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-lg-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-lg-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-lg-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-lg-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

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

  .pt-lg-1 {
    padding-top: 0.25rem !important;
  }

  .pt-lg-2 {
    padding-top: 0.5rem !important;
  }

  .pt-lg-3 {
    padding-top: 1rem !important;
  }

  .pt-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pt-lg-5 {
    padding-top: 3rem !important;
  }

  .pe-lg-0 {
    padding-right: 0 !important;
  }

  .pe-lg-1 {
    padding-right: 0.25rem !important;
  }

  .pe-lg-2 {
    padding-right: 0.5rem !important;
  }

  .pe-lg-3 {
    padding-right: 1rem !important;
  }

  .pe-lg-4 {
    padding-right: 1.5rem !important;
  }

  .pe-lg-5 {
    padding-right: 3rem !important;
  }

  .pb-lg-0 {
    padding-bottom: 0 !important;
  }

  .pb-lg-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-lg-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pb-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-lg-5 {
    padding-bottom: 3rem !important;
  }

  .ps-lg-0 {
    padding-left: 0 !important;
  }

  .ps-lg-1 {
    padding-left: 0.25rem !important;
  }

  .ps-lg-2 {
    padding-left: 0.5rem !important;
  }

  .ps-lg-3 {
    padding-left: 1rem !important;
  }

  .ps-lg-4 {
    padding-left: 1.5rem !important;
  }

  .ps-lg-5 {
    padding-left: 3rem !important;
  }
}
@media (min-width: 1200px) {
  .d-xl-inline {
    display: inline !important;
  }

  .d-xl-inline-block {
    display: inline-block !important;
  }

  .d-xl-block {
    display: block !important;
  }

  .d-xl-grid {
    display: grid !important;
  }

  .d-xl-table {
    display: table !important;
  }

  .d-xl-table-row {
    display: table-row !important;
  }

  .d-xl-table-cell {
    display: table-cell !important;
  }

  .d-xl-flex {
    display: flex !important;
  }

  .d-xl-inline-flex {
    display: inline-flex !important;
  }

  .d-xl-none {
    display: none !important;
  }

  .flex-xl-fill {
    flex: 1 1 auto !important;
  }

  .flex-xl-row {
    flex-direction: row !important;
  }

  .flex-xl-column {
    flex-direction: column !important;
  }

  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }

  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }

  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .justify-content-xl-start {
    justify-content: flex-start !important;
  }

  .justify-content-xl-end {
    justify-content: flex-end !important;
  }

  .justify-content-xl-center {
    justify-content: center !important;
  }

  .justify-content-xl-between {
    justify-content: space-between !important;
  }

  .justify-content-xl-around {
    justify-content: space-around !important;
  }

  .justify-content-xl-evenly {
    justify-content: space-evenly !important;
  }

  .align-items-xl-start {
    align-items: flex-start !important;
  }

  .align-items-xl-end {
    align-items: flex-end !important;
  }

  .align-items-xl-center {
    align-items: center !important;
  }

  .align-items-xl-baseline {
    align-items: baseline !important;
  }

  .align-items-xl-stretch {
    align-items: stretch !important;
  }

  .align-content-xl-start {
    align-content: flex-start !important;
  }

  .align-content-xl-end {
    align-content: flex-end !important;
  }

  .align-content-xl-center {
    align-content: center !important;
  }

  .align-content-xl-between {
    align-content: space-between !important;
  }

  .align-content-xl-around {
    align-content: space-around !important;
  }

  .align-content-xl-stretch {
    align-content: stretch !important;
  }

  .align-self-xl-auto {
    align-self: auto !important;
  }

  .align-self-xl-start {
    align-self: flex-start !important;
  }

  .align-self-xl-end {
    align-self: flex-end !important;
  }

  .align-self-xl-center {
    align-self: center !important;
  }

  .align-self-xl-baseline {
    align-self: baseline !important;
  }

  .align-self-xl-stretch {
    align-self: stretch !important;
  }

  .order-xl-first {
    order: -1 !important;
  }

  .order-xl-0 {
    order: 0 !important;
  }

  .order-xl-1 {
    order: 1 !important;
  }

  .order-xl-2 {
    order: 2 !important;
  }

  .order-xl-3 {
    order: 3 !important;
  }

  .order-xl-4 {
    order: 4 !important;
  }

  .order-xl-5 {
    order: 5 !important;
  }

  .order-xl-last {
    order: 6 !important;
  }

  .m-xl-0 {
    margin: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mx-xl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-xl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-xl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-xl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-xl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-xl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-xl-0 {
    margin-top: 0 !important;
  }

  .mt-xl-1 {
    margin-top: 0.25rem !important;
  }

  .mt-xl-2 {
    margin-top: 0.5rem !important;
  }

  .mt-xl-3 {
    margin-top: 1rem !important;
  }

  .mt-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mt-xl-5 {
    margin-top: 3rem !important;
  }

  .mt-xl-auto {
    margin-top: auto !important;
  }

  .me-xl-0 {
    margin-right: 0 !important;
  }

  .me-xl-1 {
    margin-right: 0.25rem !important;
  }

  .me-xl-2 {
    margin-right: 0.5rem !important;
  }

  .me-xl-3 {
    margin-right: 1rem !important;
  }

  .me-xl-4 {
    margin-right: 1.5rem !important;
  }

  .me-xl-5 {
    margin-right: 3rem !important;
  }

  .me-xl-auto {
    margin-right: auto !important;
  }

  .mb-xl-0 {
    margin-bottom: 0 !important;
  }

  .mb-xl-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-xl-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-xl-3 {
    margin-bottom: 1rem !important;
  }

  .mb-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-xl-5 {
    margin-bottom: 3rem !important;
  }

  .mb-xl-auto {
    margin-bottom: auto !important;
  }

  .ms-xl-0 {
    margin-left: 0 !important;
  }

  .ms-xl-1 {
    margin-left: 0.25rem !important;
  }

  .ms-xl-2 {
    margin-left: 0.5rem !important;
  }

  .ms-xl-3 {
    margin-left: 1rem !important;
  }

  .ms-xl-4 {
    margin-left: 1.5rem !important;
  }

  .ms-xl-5 {
    margin-left: 3rem !important;
  }

  .ms-xl-auto {
    margin-left: auto !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 3rem !important;
  }

  .px-xl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-xl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-xl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-xl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-xl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-xl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

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

  .pt-xl-1 {
    padding-top: 0.25rem !important;
  }

  .pt-xl-2 {
    padding-top: 0.5rem !important;
  }

  .pt-xl-3 {
    padding-top: 1rem !important;
  }

  .pt-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pt-xl-5 {
    padding-top: 3rem !important;
  }

  .pe-xl-0 {
    padding-right: 0 !important;
  }

  .pe-xl-1 {
    padding-right: 0.25rem !important;
  }

  .pe-xl-2 {
    padding-right: 0.5rem !important;
  }

  .pe-xl-3 {
    padding-right: 1rem !important;
  }

  .pe-xl-4 {
    padding-right: 1.5rem !important;
  }

  .pe-xl-5 {
    padding-right: 3rem !important;
  }

  .pb-xl-0 {
    padding-bottom: 0 !important;
  }

  .pb-xl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-xl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pb-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-xl-5 {
    padding-bottom: 3rem !important;
  }

  .ps-xl-0 {
    padding-left: 0 !important;
  }

  .ps-xl-1 {
    padding-left: 0.25rem !important;
  }

  .ps-xl-2 {
    padding-left: 0.5rem !important;
  }

  .ps-xl-3 {
    padding-left: 1rem !important;
  }

  .ps-xl-4 {
    padding-left: 1.5rem !important;
  }

  .ps-xl-5 {
    padding-left: 3rem !important;
  }
}
@media (min-width: 1400px) {
  .d-xxl-inline {
    display: inline !important;
  }

  .d-xxl-inline-block {
    display: inline-block !important;
  }

  .d-xxl-block {
    display: block !important;
  }

  .d-xxl-grid {
    display: grid !important;
  }

  .d-xxl-table {
    display: table !important;
  }

  .d-xxl-table-row {
    display: table-row !important;
  }

  .d-xxl-table-cell {
    display: table-cell !important;
  }

  .d-xxl-flex {
    display: flex !important;
  }

  .d-xxl-inline-flex {
    display: inline-flex !important;
  }

  .d-xxl-none {
    display: none !important;
  }

  .flex-xxl-fill {
    flex: 1 1 auto !important;
  }

  .flex-xxl-row {
    flex-direction: row !important;
  }

  .flex-xxl-column {
    flex-direction: column !important;
  }

  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-xxl-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-xxl-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important;
  }

  .flex-xxl-wrap {
    flex-wrap: wrap !important;
  }

  .flex-xxl-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .justify-content-xxl-start {
    justify-content: flex-start !important;
  }

  .justify-content-xxl-end {
    justify-content: flex-end !important;
  }

  .justify-content-xxl-center {
    justify-content: center !important;
  }

  .justify-content-xxl-between {
    justify-content: space-between !important;
  }

  .justify-content-xxl-around {
    justify-content: space-around !important;
  }

  .justify-content-xxl-evenly {
    justify-content: space-evenly !important;
  }

  .align-items-xxl-start {
    align-items: flex-start !important;
  }

  .align-items-xxl-end {
    align-items: flex-end !important;
  }

  .align-items-xxl-center {
    align-items: center !important;
  }

  .align-items-xxl-baseline {
    align-items: baseline !important;
  }

  .align-items-xxl-stretch {
    align-items: stretch !important;
  }

  .align-content-xxl-start {
    align-content: flex-start !important;
  }

  .align-content-xxl-end {
    align-content: flex-end !important;
  }

  .align-content-xxl-center {
    align-content: center !important;
  }

  .align-content-xxl-between {
    align-content: space-between !important;
  }

  .align-content-xxl-around {
    align-content: space-around !important;
  }

  .align-content-xxl-stretch {
    align-content: stretch !important;
  }

  .align-self-xxl-auto {
    align-self: auto !important;
  }

  .align-self-xxl-start {
    align-self: flex-start !important;
  }

  .align-self-xxl-end {
    align-self: flex-end !important;
  }

  .align-self-xxl-center {
    align-self: center !important;
  }

  .align-self-xxl-baseline {
    align-self: baseline !important;
  }

  .align-self-xxl-stretch {
    align-self: stretch !important;
  }

  .order-xxl-first {
    order: -1 !important;
  }

  .order-xxl-0 {
    order: 0 !important;
  }

  .order-xxl-1 {
    order: 1 !important;
  }

  .order-xxl-2 {
    order: 2 !important;
  }

  .order-xxl-3 {
    order: 3 !important;
  }

  .order-xxl-4 {
    order: 4 !important;
  }

  .order-xxl-5 {
    order: 5 !important;
  }

  .order-xxl-last {
    order: 6 !important;
  }

  .m-xxl-0 {
    margin: 0 !important;
  }

  .m-xxl-1 {
    margin: 0.25rem !important;
  }

  .m-xxl-2 {
    margin: 0.5rem !important;
  }

  .m-xxl-3 {
    margin: 1rem !important;
  }

  .m-xxl-4 {
    margin: 1.5rem !important;
  }

  .m-xxl-5 {
    margin: 3rem !important;
  }

  .m-xxl-auto {
    margin: auto !important;
  }

  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }

  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }

  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .mt-xxl-0 {
    margin-top: 0 !important;
  }

  .mt-xxl-1 {
    margin-top: 0.25rem !important;
  }

  .mt-xxl-2 {
    margin-top: 0.5rem !important;
  }

  .mt-xxl-3 {
    margin-top: 1rem !important;
  }

  .mt-xxl-4 {
    margin-top: 1.5rem !important;
  }

  .mt-xxl-5 {
    margin-top: 3rem !important;
  }

  .mt-xxl-auto {
    margin-top: auto !important;
  }

  .me-xxl-0 {
    margin-right: 0 !important;
  }

  .me-xxl-1 {
    margin-right: 0.25rem !important;
  }

  .me-xxl-2 {
    margin-right: 0.5rem !important;
  }

  .me-xxl-3 {
    margin-right: 1rem !important;
  }

  .me-xxl-4 {
    margin-right: 1.5rem !important;
  }

  .me-xxl-5 {
    margin-right: 3rem !important;
  }

  .me-xxl-auto {
    margin-right: auto !important;
  }

  .mb-xxl-0 {
    margin-bottom: 0 !important;
  }

  .mb-xxl-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-xxl-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-xxl-3 {
    margin-bottom: 1rem !important;
  }

  .mb-xxl-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-xxl-5 {
    margin-bottom: 3rem !important;
  }

  .mb-xxl-auto {
    margin-bottom: auto !important;
  }

  .ms-xxl-0 {
    margin-left: 0 !important;
  }

  .ms-xxl-1 {
    margin-left: 0.25rem !important;
  }

  .ms-xxl-2 {
    margin-left: 0.5rem !important;
  }

  .ms-xxl-3 {
    margin-left: 1rem !important;
  }

  .ms-xxl-4 {
    margin-left: 1.5rem !important;
  }

  .ms-xxl-5 {
    margin-left: 3rem !important;
  }

  .ms-xxl-auto {
    margin-left: auto !important;
  }

  .p-xxl-0 {
    padding: 0 !important;
  }

  .p-xxl-1 {
    padding: 0.25rem !important;
  }

  .p-xxl-2 {
    padding: 0.5rem !important;
  }

  .p-xxl-3 {
    padding: 1rem !important;
  }

  .p-xxl-4 {
    padding: 1.5rem !important;
  }

  .p-xxl-5 {
    padding: 3rem !important;
  }

  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }

  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

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

  .pt-xxl-1 {
    padding-top: 0.25rem !important;
  }

  .pt-xxl-2 {
    padding-top: 0.5rem !important;
  }

  .pt-xxl-3 {
    padding-top: 1rem !important;
  }

  .pt-xxl-4 {
    padding-top: 1.5rem !important;
  }

  .pt-xxl-5 {
    padding-top: 3rem !important;
  }

  .pe-xxl-0 {
    padding-right: 0 !important;
  }

  .pe-xxl-1 {
    padding-right: 0.25rem !important;
  }

  .pe-xxl-2 {
    padding-right: 0.5rem !important;
  }

  .pe-xxl-3 {
    padding-right: 1rem !important;
  }

  .pe-xxl-4 {
    padding-right: 1.5rem !important;
  }

  .pe-xxl-5 {
    padding-right: 3rem !important;
  }

  .pb-xxl-0 {
    padding-bottom: 0 !important;
  }

  .pb-xxl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-xxl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-xxl-3 {
    padding-bottom: 1rem !important;
  }

  .pb-xxl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-xxl-5 {
    padding-bottom: 3rem !important;
  }

  .ps-xxl-0 {
    padding-left: 0 !important;
  }

  .ps-xxl-1 {
    padding-left: 0.25rem !important;
  }

  .ps-xxl-2 {
    padding-left: 0.5rem !important;
  }

  .ps-xxl-3 {
    padding-left: 1rem !important;
  }

  .ps-xxl-4 {
    padding-left: 1.5rem !important;
  }

  .ps-xxl-5 {
    padding-left: 3rem !important;
  }
}
@media print {
  .d-print-inline {
    display: inline !important;
  }

  .d-print-inline-block {
    display: inline-block !important;
  }

  .d-print-block {
    display: block !important;
  }

  .d-print-grid {
    display: grid !important;
  }

  .d-print-table {
    display: table !important;
  }

  .d-print-table-row {
    display: table-row !important;
  }

  .d-print-table-cell {
    display: table-cell !important;
  }

  .d-print-flex {
    display: flex !important;
  }

  .d-print-inline-flex {
    display: inline-flex !important;
  }

  .d-print-none {
    display: none !important;
  }
}

/*-------------------------------------------------------
  Button Styles
-------------------------------------------------------*/

.btn, .button.large, .button.giant { font-family: var(--design_title_font);}

.btn, button, form button, .button, a.button, .redirectButton {
  padding: 0.65em 0.9em;
  border-radius: var(--theme-radius, 0px);
  color: var(--design_button_text_color);
  border: 0 var(--design_button_text_color) solid;
  background-color: var(--design_button_bg_color);
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease, filter 200ms ease;
  line-height: 1;
  cursor: pointer;
  display: inline-block;
  max-width: 100%;
  text-transform: none; text-align: center;
  text-decoration: none !important;
  overflow-x: hidden;
  overflow-y: hidden;
  /*background-image: var(--design_bg_grain);
  background-repeat: repeat;*/
  &:hover {
    background-color: var(--design_button_text_color);
    color: var(--design_button_bg_color);
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  }
}
  
.btn-x-large {
  font-size: 2em;
  padding: 0.8em 1.8em;
}

.btn-large {
  font-size: 1.5em;
  padding: 0.75em 1.3em;  
  }

.btn-medium, button {
  font-size: 1.1em;
  }

.btn-small {
  font-size: 0.8em;
  padding: 0.5em 0.8em;
  }

.btn-x-small {
  font-size: 0.6em;
  padding: 0.3em 0.5em;
  border-width: 2px;
  }

.btn-inline {
  display: inline-block;
  min-width: unset;
  width: unset;
}
.btn-block {
  display: block;
  width: 100%;
  min-width: 245px;
  }
.btns {
  display: flex;
  flex-wrap: wrap;
}
.btns > * {
  flex: 1 1 20rem;
}
.btns .btn {
  text-align: center;
  min-width: 245px;
  margin: 0 5px;
}
    
/* -------------------------------------------------------
   Button module 3x3 position (position_lg / position_sm)
   Horizontal: justify-content on the flex .btns; a positioned
   .btns stops stretching its children so placement is visible.
   Vertical (middle/bottom): needs spare height, so the row chain
   (container > .row > col) becomes stretchable flex columns —
   gated behind :has() so rows without a positioned button keep
   the default layout. Only visible when the builder row sets a
   height/min-height. .amod is the studio preview wrapper.
-------------------------------------------------------*/
@media (min-width: 768px) {
  /* Re-assert flex at (0,2,0) specificity: the title module's inline style
     block globally rewrites .btns to display:block, which would defeat
     justify-content on positioned buttons. */
  .btns[class*='pos-lg-'] { display: flex; flex-wrap: wrap; }
  .btns[class*='pos-lg-'] > * { flex: 0 1 auto; }
  .btns.pos-lg-h-left { justify-content: flex-start; }
  .btns.pos-lg-h-center { justify-content: center; }
  .btns.pos-lg-h-right { justify-content: flex-end; }
  .container:has(.btns.pos-lg-v-middle, .btns.pos-lg-v-bottom),
  .container-fluid:has(.btns.pos-lg-v-middle, .btns.pos-lg-v-bottom) {
    display: flex;
    flex-direction: column;
  }
  .container:has(.btns.pos-lg-v-middle, .btns.pos-lg-v-bottom) > .row,
  .container-fluid:has(.btns.pos-lg-v-middle, .btns.pos-lg-v-bottom) > .row {
    flex: 1 1 auto;
    width: 100%;
  }
  .moduleContainer:has(.btns.pos-lg-v-middle, .btns.pos-lg-v-bottom) {
    display: flex;
    flex-direction: column;
  }
  .moduleContainer > .amod:has(.btns.pos-lg-v-middle, .btns.pos-lg-v-bottom) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .btns.pos-lg-v-middle { margin-block: auto; }
  .btns.pos-lg-v-bottom { margin-block-start: auto; }
}
@media (max-width: 768px) {
  .btns[class*='pos-sm-'] { display: flex; flex-wrap: wrap; }
  .btns[class*='pos-sm-'] > * { flex: 0 1 auto; }
  .btns.pos-sm-h-left { justify-content: flex-start; }
  .btns.pos-sm-h-center { justify-content: center; }
  .btns.pos-sm-h-right { justify-content: flex-end; }
  .container:has(.btns.pos-sm-v-middle, .btns.pos-sm-v-bottom),
  .container-fluid:has(.btns.pos-sm-v-middle, .btns.pos-sm-v-bottom) {
    display: flex;
    flex-direction: column;
  }
  .container:has(.btns.pos-sm-v-middle, .btns.pos-sm-v-bottom) > .row,
  .container-fluid:has(.btns.pos-sm-v-middle, .btns.pos-sm-v-bottom) > .row {
    flex: 1 1 auto;
    width: 100%;
  }
  .moduleContainer:has(.btns.pos-sm-v-middle, .btns.pos-sm-v-bottom) {
    display: flex;
    flex-direction: column;
  }
  .moduleContainer > .amod:has(.btns.pos-sm-v-middle, .btns.pos-sm-v-bottom) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .btns.pos-sm-v-middle { margin-block: auto; }
  .btns.pos-sm-v-bottom { margin-block-start: auto; }
}

button.big, .button.big {
  padding: 9px 15px;
  font-size: 12px !important;
  font-family: inherit;
  border: 1px;
  height: auto;
  display: inline-block;
  }
  
button.large, .button.large {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  }

button.large, .button.giant {
  font-size: 35px;
  line-height: 1;
  display: inline-block;
  }

img.vod_image {
  max-width: 100%;
  min-width: 140px;
  width: 33%;
}
span.vod_icon {
  display: inline-block;
  width: 2em;
  height: 1em;
  background: url('/assets/shared/images/vod_icon.png') middle center no-repeat;
}

/* (A dead a.btn block used to sit here with its opening brace outside its
   comment; every rule after it — the forms stylesheet and the theme — nested
   inside a.btn and never applied.) */


/*-------------------------------------------------------
  Form Styles - Default (scoped to the site's own forms; see FORM_SCOPES)
-------------------------------------------------------*/

:where(.contentWrapper) input:where(:not(.assemble-widget *)),
:where(.drawer-content) input:where(:not(.assemble-widget *)),
:where(.contentWrapper) textarea:where(:not(.assemble-widget *)),
:where(.drawer-content) textarea:where(:not(.assemble-widget *)) {
  color: #ffffff;
  border: 1px #ffffff solid !important;
  background-color: #000000;

  font-family: 'Gotham-Light'; 
  font-size: 17px;
  }
:where(.contentWrapper) legend:where(:not(.assemble-widget *)),
:where(.drawer-content) legend:where(:not(.assemble-widget *)) {
  font-weight: bold;
  font-size: 1.4em;
  margin-bottom: 1em;
  }
  
:where(.contentWrapper) label:where(:not(.assemble-widget *)),
:where(.drawer-content) label:where(:not(.assemble-widget *)) {
  line-height: 1;
  }

:where(.contentWrapper) input:where(:not(.assemble-widget *)),
:where(.drawer-content) input:where(:not(.assemble-widget *)),
:where(.contentWrapper) textarea:where(:not(.assemble-widget *)),
:where(.drawer-content) textarea:where(:not(.assemble-widget *)) {
  padding: 0.5em;
  vertical-align: baseline;
  }
  
  :where(.contentWrapper) [type=text]:where(:not(.assemble-widget *)),
:where(.drawer-content) [type=text]:where(:not(.assemble-widget *)),
:where(.contentWrapper) [type=password]:where(:not(.assemble-widget *)),
:where(.drawer-content) [type=password]:where(:not(.assemble-widget *)),
:where(.contentWrapper) textarea:where(:not(.assemble-widget *)),
:where(.drawer-content) textarea:where(:not(.assemble-widget *)) {
    width: 190px;
    }
    
  :where(.contentWrapper) select:where(:not(.assemble-widget *)),
:where(.drawer-content) select:where(:not(.assemble-widget *)) {
    max-width: 175px;
    }
    
    :where(.contentWrapper) .date select:where(:not(.assemble-widget *)),
:where(.drawer-content) .date select:where(:not(.assemble-widget *)),
:where(.contentWrapper) .date input:where(:not(.assemble-widget *)),
:where(.drawer-content) .date input:where(:not(.assemble-widget *)) { min-width: 0; width: auto;}
  
  :where(.contentWrapper) textarea:where(:not(.assemble-widget *)),
:where(.drawer-content) textarea:where(:not(.assemble-widget *)) {
    vertical-align: top;
    min-height: 3em;
    }

:where(.contentWrapper) span.required:where(:not(.assemble-widget *)),
:where(.drawer-content) span.required:where(:not(.assemble-widget *)) {
  color: #f00 !important;
}

:where(.contentWrapper) .label-left label:where(:not(.assemble-widget *)),
:where(.drawer-content) .label-left label:where(:not(.assemble-widget *)) {
  width: 150px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  margin: 0.5em 0 0.5em -160px;
  }

:where(.contentWrapper) .label-left:where(:not(.assemble-widget *)),
:where(.drawer-content) .label-left:where(:not(.assemble-widget *)) {
  padding-left: 160px;
  clear: both;
  position: relative;
  }

:where(.contentWrapper) .label-top:where(:not(.assemble-widget *)),
:where(.drawer-content) .label-top:where(:not(.assemble-widget *)),
:where(.contentWrapper) .sidebar .label-left:where(:not(.assemble-widget *)),
:where(.drawer-content) .sidebar .label-left:where(:not(.assemble-widget *)) {
  padding-left: 0;
  clear: both;
  }

:where(.contentWrapper) .label-top label:where(:not(.assemble-widget *)),
:where(.drawer-content) .label-top label:where(:not(.assemble-widget *)),
:where(.contentWrapper) .sidebar .label-left label:where(:not(.assemble-widget *)),
:where(.drawer-content) .sidebar .label-left label:where(:not(.assemble-widget *)) {
  width: 100%;
  display: block;
  margin: 0.5em 0;
  text-align: left;
  }

:where(.contentWrapper) .label-right:where(:not(.assemble-widget *)),
:where(.drawer-content) .label-right:where(:not(.assemble-widget *)) { position: relative; }
:where(.contentWrapper) .label-right label:where(:not(.assemble-widget *)),
:where(.drawer-content) .label-right label:where(:not(.assemble-widget *)) {
  margin-left: 165px;
  }
:where(.contentWrapper) .label-right input:where(:not(.assemble-widget *)),
:where(.drawer-content) .label-right input:where(:not(.assemble-widget *)) {
  position: absolute;
  left: 160px;
  top: 0.3em;
  margin-left: -2em;
  }

:where(.contentWrapper) .joined-left:where(:not(.assemble-widget *)),
:where(.drawer-content) .joined-left:where(:not(.assemble-widget *)),
:where(.contentWrapper) button.joined-left:where(:not(.assemble-widget *)),
:where(.drawer-content) button.joined-left:where(:not(.assemble-widget *)) {
  -webkit-border-radius: 6px;
  -webkit-border-top-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius: 6px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-bottomleft: 0;
  border-radius: 6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

:where(.contentWrapper) .joined-right:where(:not(.assemble-widget *)),
:where(.drawer-content) .joined-right:where(:not(.assemble-widget *)),
:where(.contentWrapper) button.joined-right:where(:not(.assemble-widget *)),
:where(.drawer-content) button.joined-right:where(:not(.assemble-widget *)) {
  -webkit-border-radius: 6px;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius: 6px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  border-radius: 6px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Mailing Forms */

body#Home :where(.contentWrapper) form.signup .label-left:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form.signup .label-left:where(:not(.assemble-widget *)),
body#Home :where(.contentWrapper) form#subForm .label-left:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form#subForm .label-left:where(:not(.assemble-widget *)),
body#Home :where(.contentWrapper) form#mc-embedded-subscribe-form .label-left:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form#mc-embedded-subscribe-form .label-left:where(:not(.assemble-widget *)) {
  padding: 0; 
  }
  
body#Home :where(.contentWrapper) form.signup p:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form.signup p:where(:not(.assemble-widget *)),
body#Home :where(.contentWrapper) form#subForm p:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form#subForm p:where(:not(.assemble-widget *)),
body#Home :where(.contentWrapper) form#mc-embedded-subscribe-form p:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form#mc-embedded-subscribe-form p:where(:not(.assemble-widget *)) {
  display: inline-block;
  }

body#Home :where(.contentWrapper) form#subForm .label-left input:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form#subForm .label-left input:where(:not(.assemble-widget *)) {
  float: left;
  }

body#Home :where(.contentWrapper) form.signup label:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form.signup label:where(:not(.assemble-widget *)),
body#Home :where(.contentWrapper) form#subForm label:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form#subForm label:where(:not(.assemble-widget *)),
body#Home :where(.contentWrapper) form#mc-embedded-subscribe-form label:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form#mc-embedded-subscribe-form label:where(:not(.assemble-widget *)) {
  width: auto;
  display: block;
  text-align: left;
  margin: 0.5em 0;
  }
body#Home :where(.contentWrapper) form.signup button:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form.signup button:where(:not(.assemble-widget *)),
body#Home :where(.contentWrapper) form#mc-embedded-subscribe-form button:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form#mc-embedded-subscribe-form button:where(:not(.assemble-widget *)) {
  margin-top: 2.4em;
  }
  
body#Home :where(.contentWrapper) form#subForm button:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) form#subForm button:where(:not(.assemble-widget *)) {
  margin-top: 0;
  }

/* =Signup form
-------------------------------------------------------*/
  
:where(.contentWrapper) form.signup:where(:not(.assemble-widget *)),
:where(.drawer-content) form.signup:where(:not(.assemble-widget *)),
:where(.contentWrapper) form#subForm:where(:not(.assemble-widget *)),
:where(.drawer-content) form#subForm:where(:not(.assemble-widget *)),
:where(.contentWrapper) form#mc-embedded-subscribe-form:where(:not(.assemble-widget *)),
:where(.drawer-content) form#mc-embedded-subscribe-form:where(:not(.assemble-widget *)) {
  position:relative;
  margin:0;
  line-height:1;
  width: 100%;
  padding: 12px 0;
  border: none !important;
  }

body#Home :where(.contentWrapper) .label-left:where(:not(.assemble-widget *)),
body#Home :where(.drawer-content) .label-left:where(:not(.assemble-widget *)) { clear: none; }
  

/* =Films search form
-------------------------------------------------------*/
:where(.contentWrapper) form.films-search:where(:not(.assemble-widget *)),
:where(.drawer-content) form.films-search:where(:not(.assemble-widget *)) {
  position:relative;
  height:134px;
  margin:0 0 32px;
  padding:15px 0 0 17px;
  }
  :where(.contentWrapper) form.films-search fieldset:where(:not(.assemble-widget *)),
:where(.drawer-content) form.films-search fieldset:where(:not(.assemble-widget *)) {
    float:left;
    }
  :where(.contentWrapper) form.films-search h3:where(:not(.assemble-widget *)),
:where(.drawer-content) form.films-search h3:where(:not(.assemble-widget *)) {
    display: inline;
    position: relative;
    clear: both;
    top: 70px;
    }
  body#Films :where(.contentWrapper) form.films-search h5:where(:not(.assemble-widget *)),
body#Films :where(.drawer-content) form.films-search h5:where(:not(.assemble-widget *)) {
    position: absolute;
    bottom:11px;
    right:192px;
    width: 700px;
    padding:0;
    text-align: right;
    font-size:16px;
    }
  body#Films :where(.contentWrapper) form.films-search fieldset.txt:where(:not(.assemble-widget *)),
body#Films :where(.drawer-content) form.films-search fieldset.txt:where(:not(.assemble-widget *)) {
    position:absolute;
    top:12px;
    bottom: auto;
    left:15px;
  }
  body#Films :where(.contentWrapper) form.film-index fieldset.txt:where(:not(.assemble-widget *)),
body#Films :where(.drawer-content) form.film-index fieldset.txt:where(:not(.assemble-widget *)) {
    float:left;
    }
  
  body#Films :where(.contentWrapper) form.films-search fieldset.radio:where(:not(.assemble-widget *)),
body#Films :where(.drawer-content) form.films-search fieldset.radio:where(:not(.assemble-widget *)) {
    position:absolute;
    top:11px;
    bottom: auto;
    left:250px;
  }
  body#Films :where(.contentWrapper) form.film-index fieldset.radio:where(:not(.assemble-widget *)),
body#Films :where(.drawer-content) form.film-index fieldset.radio:where(:not(.assemble-widget *)) {
    position:absolute;
    top:8px;
    bottom: auto;
    left:250px;
  }
  body#Shop :where(.contentWrapper) form.films-search fieldset.txt:where(:not(.assemble-widget *)),
body#Shop :where(.drawer-content) form.films-search fieldset.txt:where(:not(.assemble-widget *)) {
    position:absolute;
    bottom:4px;
    left:15px;
    width:900px;
    }
    :where(.contentWrapper) form.films-search fieldset.txt label:where(:not(.assemble-widget *)),
:where(.drawer-content) form.films-search fieldset.txt label:where(:not(.assemble-widget *)) {
      float:left;
      width:80px;
      height:23px;
      margin:0 20px 0 0;
      }
      body#Shop :where(.contentWrapper) form.films-search fieldset.txt label:where(:not(.assemble-widget *)),
body#Shop :where(.drawer-content) form.films-search fieldset.txt label:where(:not(.assemble-widget *)) {
        width:auto;
        height:auto;
        text-align:0;
        text-indent:0;
        text-transform:uppercase;
        letter-spacing:-1px;
        font-size:19px;
        font-weight:bold;
        background:none;
        }
    :where(.contentWrapper) form.films-search fieldset.txt input:where(:not(.assemble-widget *)),
:where(.drawer-content) form.films-search fieldset.txt input:where(:not(.assemble-widget *)) {
      width:140px;
      }
    body#Shop :where(.contentWrapper) form.films-search fieldset.txt input:where(:not(.assemble-widget *)),
body#Shop :where(.drawer-content) form.films-search fieldset.txt input:where(:not(.assemble-widget *)) {
      float:left;
      width:580px;
      font-size:18px;
      }
    :where(.contentWrapper) form.films-search fieldset.txt button:where(:not(.assemble-widget *)),
:where(.drawer-content) form.films-search fieldset.txt button:where(:not(.assemble-widget *)) {
      position:static !important;
      margin:-2px 0 0 6px;
      padding:3px 10px;
      line-height:1;
      border:none;
      box-shadow:inset 0 0 4px rgba(0,0,0,.4);
      -moz-box-shadow:inset 0 0 4px rgba(0,0,0,.4);
      -webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.4);
      }
      body#Shop :where(.contentWrapper) form.films-search fieldset.txt button:where(:not(.assemble-widget *)),
body#Shop :where(.drawer-content) form.films-search fieldset.txt button:where(:not(.assemble-widget *)) {
        float:right;
        padding:4px 22px;
        margin:0;
        }
    :where(.contentWrapper) form.films-search fieldset.radio label:where(:not(.assemble-widget *)),
:where(.drawer-content) form.films-search fieldset.radio label:where(:not(.assemble-widget *)) {
      padding:0 0 0 20px;
      font-size:13px;
      }
    :where(.contentWrapper) .sbtn:where(:not(.assemble-widget *)),
:where(.drawer-content) .sbtn:where(:not(.assemble-widget *)),
:where(.contentWrapper) .add-button:where(:not(.assemble-widget *)),
:where(.drawer-content) .add-button:where(:not(.assemble-widget *)),
:where(.contentWrapper) ul.films ul.extra-links li.add-button a:where(:not(.assemble-widget *)),
:where(.drawer-content) ul.films ul.extra-links li.add-button a:where(:not(.assemble-widget *)) {
      position:absolute;
      top:15px;
      right:15px;
      padding:4px 22px;
      line-height:1;
      border:none;
      }
      :where(.contentWrapper) .sbtn:where(:not(.assemble-widget *)),
:where(.drawer-content) .sbtn:where(:not(.assemble-widget *)) {
        position:static;
        padding:4px 34px;
        font-size:16px;
        }
        :where(.contentWrapper) form.checkout .sbtn:where(:not(.assemble-widget *)),
:where(.drawer-content) form.checkout .sbtn:where(:not(.assemble-widget *)) {
          display:block;
          margin:20px 0 0;
          }
      :where(.contentWrapper) .add-button:where(:not(.assemble-widget *)),
:where(.drawer-content) .add-button:where(:not(.assemble-widget *)),
:where(.contentWrapper) ul.films ul.extra-links li.add-button a:where(:not(.assemble-widget *)),
:where(.drawer-content) ul.films ul.extra-links li.add-button a:where(:not(.assemble-widget *)) { /* TODO: move from forms.css */
        position:static;
        display:block;
        height:27px;
        padding:0 5px;
        line-height:27px;
        font-size:10px;
        }
        :where(.contentWrapper) button.add-button:where(:not(.assemble-widget *)),
:where(.drawer-content) button.add-button:where(:not(.assemble-widget *)) {
          margin:15px 0;
          padding:4px;
          text-transform:uppercase;
          font-size:11px;
          }
        :where(.contentWrapper) .add-button span.price:where(:not(.assemble-widget *)),
:where(.drawer-content) .add-button span.price:where(:not(.assemble-widget *)) {
          font-size:14px;
          }
          :where(.contentWrapper) button.add-button span.price:where(:not(.assemble-widget *)),
:where(.drawer-content) button.add-button span.price:where(:not(.assemble-widget *)) {
            padding:0 0 0 6px;
            font-size:16px;
            }
    :where(.contentWrapper) form.films-category-select fieldset.select:where(:not(.assemble-widget *)),
:where(.drawer-content) form.films-category-select fieldset.select:where(:not(.assemble-widget *)) {
      border:medium none;
      position:absolute;
      right:26px;
      top:130px;
      }
      :where(.contentWrapper) form.films-search fieldset.select select:where(:not(.assemble-widget *)),
:where(.drawer-content) form.films-search fieldset.select select:where(:not(.assemble-widget *)) {
        margin:0 0 0 15px;
        }

:where(.contentWrapper) *:where(:not(.assemble-widget *))::-webkit-input-placeholder,
:where(.drawer-content) *:where(:not(.assemble-widget *))::-webkit-input-placeholder { color: #ffffff; opacity: 0.8; }
:where(.contentWrapper) *:where(:not(.assemble-widget *)):-moz-placeholder,
:where(.drawer-content) *:where(:not(.assemble-widget *)):-moz-placeholder { color: #ffffff; opacity: 0.8; }
:where(.contentWrapper) *:where(:not(.assemble-widget *))::-moz-placeholder,
:where(.drawer-content) *:where(:not(.assemble-widget *))::-moz-placeholder { color: #ffffff; opacity: 0.8; }
:where(.contentWrapper) *:where(:not(.assemble-widget *)):-ms-input-placeholder,
:where(.drawer-content) *:where(:not(.assemble-widget *)):-ms-input-placeholder { color: #ffffff; opacity: 0.8; }

/*-------------------------------------------------------
   Theme: grain (dark) — docs/features/themes.md
-------------------------------------------------------*/
body {
  --theme-texture: var(--design_bg_grain);
  --theme-texture-opacity: 0.2;
  --theme-blur: 10px;
  --theme-surface-blur: var(--design_bg_blur);
  --theme-drawer-blur: var(--design_bg_blur);
  --theme-tint: var(--design_bg_tint);
  --theme-menu-bg: rgba(0, 0, 0, 0.7);
  --theme-scroll-blur: 28px;
  --theme-radius: 0px;
  --theme-panel-radius: 16px;
}


/* ============ Share suite: compact view ============ */

/* Default state: no view selected, so the compact tree stays hidden and the
   full site renders exactly as before. [hidden] does the work for crawlers and
   for anyone without JS. */
.compact[hidden] { display: none; }

/* A view IS selected (the inline head script matched a hash before paint).
   Take the page over: hide the full site's chrome, reveal the compact tree. */
html[data-view] body .wrapper,
html[data-view] body .drawer,
html[data-view] body .drawer-bg,
html[data-view] body > .background { display: none !important; }

html[data-view] body { overflow: auto !important; }

html[data-view] .compact[hidden],
html[data-view] .compact {
  display: flex;
  position: relative;
  z-index: 10;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 6vh 5vw;
  align-items: center;
  justify-content: center;
  background-color: var(--design_bg_color);
  color: var(--design_text_color);
  font-family: var(--design_body_font, inherit);
}

.compact-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 30rem;
  text-align: center;
  /* Border-box or the #story variation's side padding is ADDED to width:100%
     and the box runs 112vw wide, pushing the copy off-centre and giving the
     page a horizontal scroll on exactly the mobile webviews these links open
     in. */
  box-sizing: border-box;
}

.compact-art {
  width: 100%;
  max-width: 18rem;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

.compact-head { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.compact-title-image { max-width: 15rem; height: auto; }
.compact-title {
  margin: 0;
  font-family: var(--design_title_font, inherit);
  font-size: 1.75rem;
  line-height: 1.1;
}
.compact-messaging { margin: 0; opacity: 0.85; font-size: 1rem; line-height: 1.4; }

.compact-actions { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
.compact-cta {
  display: block;
  padding: 0.9rem 1.25rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.2;
}
.compact-cta-primary {
  background-color: var(--design_button_bg_color, var(--design_text_color));
  color: var(--design_button_text_color, var(--design_bg_color));
}
.compact-cta-secondary {
  border: 1px solid currentColor;
  color: var(--design_text_color);
}
/* The way back to the full site. Quiet, always present — the spec makes the
   full site the default and the escape. */
.compact-escape {
  margin-top: 0.4rem;
  color: inherit;
  opacity: 0.6;
  font-size: 0.85rem;
  text-decoration: underline;
}

/* ---- #compact: the baseline. No overrides; the rules above are it. ---- */

/* ---- #social: arriving from a social profile tap. Tighter, art leads. ---- */
html[data-view="social"] .compact-art { max-width: 14rem; }
html[data-view="social"] .compact-inner { gap: 1.15rem; }

/* ---- #linkinbio: the stacked link list. Art shrinks to a mark, the CTAs
        become the page — this is the view that replaces a link-in-bio page. -- */
html[data-view="linkinbio"] .compact-art { max-width: 8rem; border-radius: 50%; aspect-ratio: 1; }
html[data-view="linkinbio"] .compact-inner { gap: 1.1rem; max-width: 26rem; }
html[data-view="linkinbio"] .compact-cta { border-radius: 999px; padding: 1rem 1.25rem; }
html[data-view="linkinbio"] .compact-messaging { font-size: 0.9rem; }

/* ---- #story: opened from a story swipe-up. Full-bleed art with the copy in
        the lower safe area, clear of the platform's own UI. ---- */
html[data-view="story"] .compact { padding: 0; align-items: stretch; }
html[data-view="story"] .compact-inner {
  max-width: none;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0 6vw 14vh;
}
html[data-view="story"] .compact-art {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  border-radius: 0;
  /* Below the contrast gradient. Both were -1 originally, which left paint
     order to decide — and the image comes after ::before in the DOM, so the
     opaque art covered the gradient entirely and the white copy below was left
     sitting on raw artwork. */
  z-index: -2;
}
/* Art runs the full height here, so the copy needs its own contrast. */
html[data-view="story"] .compact-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 75%);
}
html[data-view="story"] .compact-title,
html[data-view="story"] .compact-messaging,
html[data-view="story"] .compact-escape { color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  html[data-view] .compact-inner { animation: compact-in 0.25s ease-out both; }
}
@keyframes compact-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}