:root {  --font-heading: "Unbounded", sans-serif; --font-body: "Urbanist", sans-serif;  --color-black: #03040E; --color-dark: #191919; --color-dark-2: #272727; --color-light: #F7F7F7; --color-yellow: #F4AF00; --color-yellow-alt: #FFB800; --color-yellow-light: #FFB347;  --text-h1-size: clamp(42px, 5.56vw, 80px); --text-h1-line: clamp(48px, 6.11vw, 88px); --text-h1-weight: 700; --text-h2-size: clamp(30px, 3.33vw, 48px); --text-h2-line: clamp(36px, 3.61vw, 52px); --text-h2-weight: 600;  --text-body-size: 16px; --text-body-line: 24px; --text-body-weight: 400;  --text-button-size: 14px; --text-button-line: 16px; --text-button-weight: 500; --text-subtitle-size: 16px; --text-subtitle-line: 16px; --text-subtitle-weight: 600; --text-box-heading-size: clamp(18px, 1.39vw, 20px); --text-box-heading-line: 22px; --text-box-heading-weight: 500; --text-counter-size: clamp(30px, 2.78vw, 40px); --text-counter-line: clamp(38px, 3.61vw, 52px); --text-counter-weight: 600;  --reveal-text-size: clamp(52px, 10vw, 130px); --reveal-height: calc(var(--reveal-text-size) + 100px); }    body { font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: var(--text-body-weight); } h1, .h1 { font-family: var(--font-heading); font-size: var(--text-h1-size); line-height: var(--text-h1-line); font-weight: var(--text-h1-weight); } h2, .h2 { font-family: var(--font-heading); font-size: var(--text-h2-size); line-height: var(--text-h2-line); font-weight: var(--text-h2-weight); } .text-body { font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: var(--text-body-weight); } .text-subtitle { font-family: var(--font-heading); font-size: var(--text-subtitle-size); line-height: var(--text-subtitle-line); font-weight: var(--text-subtitle-weight); } .box-subheading { font-family: var(--font-heading); font-size: var(--text-box-heading-size); line-height: var(--text-box-heading-line); font-weight: var(--text-box-heading-weight); } .box-counter { font-family: var(--font-heading); font-size: var(--text-counter-size); line-height: var(--text-counter-line); font-weight: var(--text-counter-weight); }    .text-span { color: var(--color-yellow); } .header { backdrop-filter: blur(35px); } #play-btn-wrapper { cursor: pointer; } .btn, .bricks-button { font-family: var(--font-heading); font-size: var(--text-button-size); line-height: var(--text-button-line); font-weight: var(--text-button-weight); } .bricks-button.btn { transition: box-shadow 0.3s ease !important; } .bricks-button.btn:hover:not(:disabled) { box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.25) !important; cursor: pointer; }    .marquee-track { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; overflow: hidden !important; gap: 0 !important; } .marquee-track > * { display: inline-block !important; flex-shrink: 0 !important; min-width: max-content !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; will-change: transform; -webkit-transform: translateZ(0); transform: translateZ(0); animation: marquee-scroll 50s linear infinite !important; } @keyframes marquee-scroll { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }    .custom-gym-form, .reservation-form { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 20px !important; row-gap: 30px !important; } .custom-gym-form .form-group, .reservation-form .form-group { width: 100% !important; margin: 0 !important; padding: 0 !important; } .custom-gym-form input, .custom-gym-form textarea, .reservation-form input:not([type="checkbox"]):not([type="radio"]), .reservation-form textarea { width: 100% !important; color: var(--color-black) !important; } .custom-gym-form label.required::after, .reservation-form label.required::after { color: var(--color-yellow-light) !important; } .custom-gym-form .form-group:nth-child(5), .custom-gym-form .submit-button-wrapper, .reservation-form > *:nth-child(n+7), .reservation-form #custom-booking-ui { grid-column: 1 / -1 !important; }  .reservation-form div:has(> input[type="hidden"]), .reservation-form div[role="group"]:not(.form-group) { display: none !important; } .reservation-form .form-group:has(input[type="checkbox"]), .reservation-form .submit-button-wrapper { grid-column: 1 / -1 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } .reservation-form .form-group:has(input[type="checkbox"]) { margin-top: 20px !important; margin-bottom: 20px !important; } .reservation-form .submit-button-wrapper { margin-top: -20px !important; }  .custom-gym-form button[type="submit"], .reservation-form button[type="submit"], .reservation-form button[type="button"] { width: max-content !important; margin: 0 auto !important; padding: 3px 3px 3px 20px !important; display: inline-flex !important; align-items: center !important; gap: 20px !important; border: 0 !important; border-radius: 50px !important; outline: 0 !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; color: var(--color-black) !important; font-weight: 700 !important; letter-spacing: 0.5px !important; transition: box-shadow 0.3s ease !important; }  .custom-gym-form button[type="submit"] { margin: 0 !important; } .custom-gym-form button[type="submit"]:focus, .reservation-form button[type="submit"]:focus, .reservation-form button[type="button"]:focus, #brxe-vpedxz button:focus, #brxe-vpedxz .brxe-button:focus, #brxe-vpedxz .bricks-button:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; } .custom-gym-form button[type="submit"]:hover:not(:disabled), .reservation-form button[type="submit"]:hover:not(:disabled), .reservation-form button[type="button"]:hover:not(:disabled), #brxe-vpedxz button:hover:not(:disabled), #brxe-vpedxz .brxe-button:hover:not(:disabled), #brxe-vpedxz .bricks-button:hover:not(:disabled) { border: 0 !important; outline: 0 !important; box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.25) !important; cursor: pointer !important; } .reservation-form button[type="submit"]:disabled, .reservation-form button[type="button"]:disabled { opacity: 0.6 !important; cursor: not-allowed !important; }  .reservation-form .custom-perm-btn { width: 100% !important; max-width: 360px !important; margin-top: 13px !important; padding: 3px 3px 3px 20px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; box-sizing: border-box !important; border: 0 !important; border-radius: 50px !important; outline: 0 !important; background: var(--color-yellow) !important; color: var(--color-black) !important; text-decoration: none !important; font-weight: 700 !important; } .reservation-form .custom-perm-btn .perm-btn-icon { display: block !important; height: auto !important; }  #brxe-vpedxz button, #brxe-vpedxz .brxe-button, #brxe-vpedxz .bricks-button { border: 0 !important; outline: 0 !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; }    #custom-booking-ui { margin-top: 30px !important; margin-bottom: 20px !important; --hex-w: 156.3px; --hex-h: 156.3px; --gap-x: 8px; --gap-y: 8px; --font-time: 20px; --font-seats: 14px; --font-price: 16px; --hex-mb: calc((var(--hex-h) * -0.245) + var(--gap-y)); --dp-w: 320px; --dp-h: 46px; --dp-btn-size: 40px; --dp-font-date: 20px; --dp-font-label: 14px; --dp-svg-h: 15px; --dp-svg-w: 9px; } @media (max-width: 1540px) { #custom-booking-ui { --hex-w: 120px; --hex-h: 120px; --gap-x: 6px; --gap-y: 6px; --font-time: 18px; --font-seats: 14px; --font-price: 16px; --dp-w: 280px; --dp-h: 42px; --dp-btn-size: 36px; --dp-font-date: 18px; --dp-font-label: 13px; --dp-svg-h: 14px; --dp-svg-w: 8px; } } @media (max-width: 768px) { #custom-booking-ui { --hex-w: 110px; --hex-h: 110px; --gap-x: 4px; --gap-y: 4px; --font-time: 16px; --font-seats: 10px; --font-price: 14px; --dp-w: 260px; --dp-h: 38px; --dp-btn-size: 32px; --dp-font-date: 16px; --dp-font-label: 12px; --dp-svg-h: 12px; --dp-svg-w: 7px; } } @media (max-width: 480px) { #custom-booking-ui { --hex-w: 80px; --hex-h: 80px; --gap-x: 2px; --gap-y: 2px; --font-time: 13px; --font-seats: 8px; --font-price: 12px; --dp-w: 220px; --dp-h: 34px; --dp-btn-size: 28px; --dp-font-date: 14px; --dp-font-label: 11px; --dp-svg-h: 10px; --dp-svg-w: 6px; } } .custom-date-label { margin-bottom: 10px; color: var(--color-dark); font-family: var(--font-heading); font-size: var(--dp-font-label); font-weight: 500; text-transform: uppercase; transition: all 0.3s ease; } .custom-date-picker { width: var(--dp-w); height: var(--dp-h); padding: 3px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; border-radius: 50px; background-color: var(--color-dark); transition: all 0.3s ease; }  .reservation-form #custom-booking-ui .date-nav-btn, #custom-booking-ui .date-nav-btn { width: var(--dp-btn-size) !important; min-width: var(--dp-btn-size) !important; max-width: var(--dp-btn-size) !important; height: var(--dp-btn-size) !important; min-height: var(--dp-btn-size) !important; max-height: var(--dp-btn-size) !important; aspect-ratio: 1 / 1 !important; flex: 0 0 var(--dp-btn-size) !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; box-sizing: border-box !important; border: 0 !important; border-radius: 999px !important; outline: 0 !important; overflow: hidden !important; background-color: var(--color-yellow) !important; box-shadow: none !important; line-height: 0 !important; cursor: pointer; transition: transform 0.2s, opacity 0.2s, all 0.3s ease; } .reservation-form #custom-booking-ui .date-nav-btn svg, #custom-booking-ui .date-nav-btn svg { width: var(--dp-svg-w) !important; min-width: var(--dp-svg-w) !important; max-width: var(--dp-svg-w) !important; height: var(--dp-svg-h) !important; min-height: var(--dp-svg-h) !important; max-height: var(--dp-svg-h) !important; margin: 0 !important; padding: 0 !important; display: block !important; flex: 0 0 auto !important; object-fit: contain !important; transform: none !important; transition: all 0.3s ease; } .reservation-form #custom-booking-ui .date-nav-btn svg path, #custom-booking-ui .date-nav-btn svg path { stroke-width: 2.5 !important; } .date-nav-btn:active { transform: scale(0.95); } .reservation-form #custom-booking-ui .date-nav-btn:disabled, #custom-booking-ui .date-nav-btn:disabled { background-color: #333333 !important; opacity: 1 !important; cursor: not-allowed !important; } .reservation-form #custom-booking-ui .date-nav-btn:disabled svg path, #custom-booking-ui .date-nav-btn:disabled svg path { stroke: #666666 !important; } .date-display-wrapper { position: relative; height: 100%; display: flex; flex-grow: 1; align-items: center; justify-content: center; cursor: pointer; } .invisible-date-input { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; border: 0; background: transparent; color: transparent; opacity: 0; cursor: pointer; } .invisible-date-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; } .date-display { z-index: 1; color: var(--color-light); font-family: var(--font-heading); font-size: var(--dp-font-date); font-weight: 500; user-select: none; transition: color 0.3s ease; } @media (hover: hover) { .date-display-wrapper:hover .date-display { color: var(--color-yellow-alt); } } .slots-scroll-wrapper { width: 100%; scrollbar-width: none; } .slots-scroll-wrapper::-webkit-scrollbar { display: none; } #slots-container { min-width: max-content; padding: 20px 0; display: flex; flex-direction: column; align-items: center; transition: opacity 0.3s ease; } #slots-container.is-loading { opacity: 0.3; pointer-events: none; } .hex-row { display: flex; justify-content: center; margin-bottom: var(--hex-mb); } .honeycomb-cell { position: relative; z-index: 1; width: var(--hex-w); height: var(--hex-h); margin: 0 calc(var(--gap-x) / 2); display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--color-dark-2); color: var(--color-light); text-align: center; line-height: 1.3; cursor: pointer; transition: all 0.4s ease; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 120 135.47' preserveAspectRatio='none'%3E%3Cpath d='M50 0 L100 28.86 L100 86.6 L50 115.47 L0 86.6 L0 28.86 Z' fill='black' stroke='black' stroke-width='20' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 120 135.47' preserveAspectRatio='none'%3E%3Cpath d='M50 0 L100 28.86 L100 86.6 L50 115.47 L0 86.6 L0 28.86 Z' fill='black' stroke='black' stroke-width='20' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .honeycomb-cell .time { margin-bottom: 4px; color: var(--color-light); font-size: var(--font-time); font-weight: bold; } .honeycomb-cell .seats { margin-bottom: 6px; color: var(--color-light); font-size: var(--font-seats); font-weight: normal; } .honeycomb-cell .price { color: var(--color-yellow); font-size: var(--font-price); font-weight: bold; } .honeycomb-cell.invisible { opacity: 0 !important; pointer-events: none !important; } @media (hover: hover) { .honeycomb-cell:hover:not(.disabled):not(.selected):not(.invisible) { z-index: 10; background-color: var(--color-yellow); color: var(--color-dark) !important; } .honeycomb-cell:hover:not(.disabled):not(.selected):not(.invisible) * { color: var(--color-dark) !important; } } .honeycomb-cell.selected { z-index: 15; background-color: var(--color-yellow-alt); } .honeycomb-cell.selected * { color: var(--color-dark) !important; } .honeycomb-cell.disabled { background-color: var(--color-dark); cursor: not-allowed; } .honeycomb-cell.disabled .time, .honeycomb-cell.disabled .price { color: var(--color-light); opacity: 0.2; } .honeycomb-cell.disabled .seats { color: var(--color-yellow); opacity: 0.2; }    #brx-content { position: relative !important; z-index: 10 !important; background-color: var(--color-light) !important; } #brx-footer { position: static !important; z-index: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; isolation: auto !important; contain: none !important; transform: none !important; background-color: var(--color-yellow) !important; } #brx-footer .main-footer-wrapper { position: relative !important; z-index: 10 !important; margin-top: 0 !important; margin-bottom: var(--reveal-height) !important; border-bottom: 0 !important; background-color: var(--color-black) !important; } #brx-footer .reveal-footer-section { position: fixed !important; bottom: 0 !important; left: 0 !important; z-index: 1 !important; width: 100% !important; height: var(--reveal-height) !important; margin: 0 !important; padding: 50px 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; border: 0 !important; overflow: hidden !important; background-color: var(--color-yellow) !important; box-shadow: 0 -60px 0 0 var(--color-yellow) !important; } #brx-footer .reveal-footer-section .marquee-track { overflow: hidden !important; } #brx-footer .reveal-footer-section .marquee-track > * { color: var(--color-black) !important; font-size: var(--reveal-text-size) !important; line-height: 1 !important; }    .is-highlighted { background: var(--color-yellow) !important; } .is-highlighted p, #brxe-bwddau, #brxe-mzbxmb { color: var(--color-dark) !important; }    @media (max-width: 767px) { .custom-gym-form, .reservation-form, .gym-booking-form { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 18px !important; } .custom-gym-form > .form-group, .reservation-form > .form-group, .gym-booking-form > .form-group { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .custom-gym-form input, .custom-gym-form textarea, .reservation-form input:not([type="checkbox"]):not([type="radio"]), .reservation-form textarea, .gym-booking-form input:not([type="checkbox"]):not([type="radio"]), .gym-booking-form textarea { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .custom-gym-form .submit-button-wrapper, .reservation-form .submit-button-wrapper, .gym-booking-form .submit-button-wrapper { grid-column: 1 / -1 !important; width: 100% !important; margin-top: 4px !important; justify-content: center !important; } .custom-gym-form button[type="submit"], .reservation-form button[type="submit"], .gym-booking-form button[type="submit"], .reservation-form .custom-perm-btn { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; text-align: left !important; white-space: normal !important; } .custom-gym-form button[type="submit"] svg, .reservation-form button[type="submit"] svg, .gym-booking-form button[type="submit"] svg, .reservation-form .custom-perm-btn img, .reservation-form .custom-perm-btn svg { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; flex: 0 0 40px !important; } .reservation-form .form-group:has(input[type="checkbox"]), .gym-booking-form .form-group:has(input[type="checkbox"]) { margin-top: 8px !important; margin-bottom: 8px !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; } .reservation-form .options-wrapper, .gym-booking-form .options-wrapper { width: 100% !important; margin: 0 !important; padding: 0 !important; } .reservation-form .options-wrapper li, .gym-booking-form .options-wrapper li { width: 100% !important; display: flex !important; align-items: flex-start !important; gap: 8px !important; } .reservation-form .options-wrapper input[type="checkbox"], .gym-booking-form .options-wrapper input[type="checkbox"] { flex: 0 0 auto !important; margin-top: 4px !important; }  .reservation-form .form-group:has(input[type="checkbox"]) { align-items: center !important; justify-content: center !important; text-align: center !important; } .reservation-form .options-wrapper li { width: auto !important; margin: 0 auto !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .reservation-form .options-wrapper input[type="checkbox"] { margin-top: 0 !important; } }