:root { --colours-base-white: #ffffff; --colours-base-black: #000000; --colours-base-background: #ffffff; --colours-base-background-1: #F8FAFC; --colours-primary-7: rgba(157, 157, 157, 1); --colours-primary-10: color-mix(in srgb, #000000 30%, var(--colours-primary-7)); --colours-primary-9: color-mix(in srgb, #000000 20%, var(--colours-primary-7)); --colours-primary-8: color-mix(in srgb, #000000 10%, var(--colours-primary-7)); --colours-primary-6: color-mix(in srgb, #FFFFFF 6%, var(--colours-primary-7)); --colours-primary-5: color-mix(in srgb, #FFFFFF 16%, var(--colours-primary-7)); --colours-primary-4: color-mix(in srgb, #FFFFFF 32%, var(--colours-primary-7)); --colours-primary-3: color-mix(in srgb, #FFFFFF 56%, var(--colours-primary-7)); --colours-primary-2: color-mix(in srgb, #FFFFFF 70%, var(--colours-primary-7)); --colours-primary-1: color-mix(in srgb, #FFFFFF 86%, var(--colours-primary-7)); --colours-primary-7-text: #1D283A; --colours-primary-10-text: #1D283A; --colours-primary-9-text: #1D283A; --colours-primary-8-text: #1D283A; --colours-primary-6-text: #1D283A; --colours-primary-5-text: #1D283A; --colours-primary-4-text: #1D283A; --colours-primary-3-text: #1D283A; --colours-primary-2-text: #1D283A; --colours-primary-1-text: #1D283A; --colours-secondary-7: rgba(0, 0, 0, 1); --colours-secondary-10: color-mix(in srgb, #000000 30%, var(--colours-secondary-7)); --colours-secondary-9: color-mix(in srgb, #000000 20%, var(--colours-secondary-7)); --colours-secondary-8: color-mix(in srgb, #000000 10%, var(--colours-secondary-7)); --colours-secondary-6: color-mix(in srgb, #FFFFFF 6%, var(--colours-secondary-7)); --colours-secondary-5: color-mix(in srgb, #FFFFFF 16%, var(--colours-secondary-7)); --colours-secondary-4: color-mix(in srgb, #FFFFFF 32%, var(--colours-secondary-7)); --colours-secondary-3: color-mix(in srgb, #FFFFFF 56%, var(--colours-secondary-7)); --colours-secondary-2: color-mix(in srgb, #FFFFFF 70%, var(--colours-secondary-7)); --colours-secondary-1: color-mix(in srgb, #FFFFFF 86%, var(--colours-secondary-7)); --colours-secondary-7-text: #fff; --colours-secondary-10-text: #fff; --colours-secondary-9-text: #fff; --colours-secondary-8-text: #fff; --colours-secondary-6-text: #fff; --colours-secondary-5-text: #fff; --colours-secondary-4-text: #fff; --colours-secondary-3-text: #fff; --colours-secondary-2-text: #fff; --colours-secondary-1-text: #fff; --colours-neutral-7: rgba(0, 0, 0, 1); --colours-neutral-10: color-mix(in srgb, #000000 72%, var(--colours-neutral-7)); --colours-neutral-9: color-mix(in srgb, #000000 52%, var(--colours-neutral-7)); --colours-neutral-8: color-mix(in srgb, #000000 23%, var(--colours-neutral-7)); --colours-neutral-6: color-mix(in srgb, #FFFFFF 19%, var(--colours-neutral-7)); --colours-neutral-5: color-mix(in srgb, #FFFFFF 46%, var(--colours-neutral-7)); --colours-neutral-4: color-mix(in srgb, #FFFFFF 75%, var(--colours-neutral-7)); --colours-neutral-3: color-mix(in srgb, #FFFFFF 86%, var(--colours-neutral-7)); --colours-neutral-2: color-mix(in srgb, #FFFFFF 94%, var(--colours-neutral-7)); --colours-neutral-1: color-mix(in srgb, #FFFFFF 97%, var(--colours-neutral-7)); --colours-error-7: #E21D48; --colours-error-10: color-mix(in srgb, #000000 30%, var(--colours-error-7)); --colours-error-9: color-mix(in srgb, #000000 20%, var(--colours-error-7)); --colours-error-8: color-mix(in srgb, #000000 10%, var(--colours-error-7)); --colours-error-6: color-mix(in srgb, #FFFFFF 6%, var(--colours-error-7)); --colours-error-5: color-mix(in srgb, #FFFFFF 16%, var(--colours-error-7)); --colours-error-4: color-mix(in srgb, #FFFFFF 32%, var(--colours-error-7)); --colours-error-3: color-mix(in srgb, #FFFFFF 56%, var(--colours-error-7)); --colours-error-2: color-mix(in srgb, #FFFFFF 70%, var(--colours-error-7)); --colours-error-1: color-mix(in srgb, #FFFFFF 86%, var(--colours-error-7)); --fonts-family-text: "Avenir", sans-serif; --fonts-family-heading: "Cormorant Garamond", serif; --typography-text-xxs-font-size: 10px; --typography-text-xxs-line-height: 150%; --typography-text-xxs-letter-spacing: 0; --typography-text-xxs-light-font: normal 300 var(--typography-text-xxs-font-size)/ var(--typography-text-xxs-line-height) var(--fonts-family-text); --typography-text-xxs-regular-font: normal 400 var(--typography-text-xxs-font-size)/ var(--typography-text-xxs-line-height) var(--fonts-family-text); --typography-text-xxs-medium-font: normal 500 var(--typography-text-xxs-font-size)/ var(--typography-text-xxs-line-height) var(--fonts-family-text); --typography-text-xxs-semibold-font: normal 600 var(--typography-text-xxs-font-size)/ var(--typography-text-xxs-line-height) var(--fonts-family-text); --typography-text-xxs-bold-font: normal 700 var(--typography-text-xxs-font-size)/ var(--typography-text-xxs-line-height) var(--fonts-family-text); --typography-text-xs-font-size: 12px; --typography-text-xs-line-height: 150%; --typography-text-xs-letter-spacing: 0; --typography-text-xs-light-font: normal 300 var(--typography-text-xs-font-size)/ var(--typography-text-xs-line-height) var(--fonts-family-text); --typography-text-xs-regular-font: normal 400 var(--typography-text-xs-font-size)/ var(--typography-text-xs-line-height) var(--fonts-family-text); --typography-text-xs-medium-font: normal 500 var(--typography-text-xs-font-size)/ var(--typography-text-xs-line-height) var(--fonts-family-text); --typography-text-xs-semibold-font: normal 600 var(--typography-text-xs-font-size)/ var(--typography-text-xs-line-height) var(--fonts-family-text); --typography-text-xs-bold-font: normal 700 var(--typography-text-xs-font-size)/ var(--typography-text-xs-line-height) var(--fonts-family-text); --typography-text-sm-font-size: 14px; --typography-text-sm-line-height: 150%; --typography-text-sm-letter-spacing: 0; --typography-text-sm-light-font: normal 300 var(--typography-text-sm-font-size)/ var(--typography-text-sm-line-height) var(--fonts-family-text); --typography-text-sm-regular-font: normal 400 var(--typography-text-sm-font-size)/ var(--typography-text-sm-line-height) var(--fonts-family-text); --typography-text-sm-medium-font: normal 500 var(--typography-text-sm-font-size)/ var(--typography-text-sm-line-height) var(--fonts-family-text); --typography-text-sm-semibold-font: normal 600 var(--typography-text-sm-font-size)/ var(--typography-text-sm-line-height) var(--fonts-family-text); --typography-text-sm-bold-font: normal 700 var(--typography-text-sm-font-size)/ var(--typography-text-sm-line-height) var(--fonts-family-text); --typography-text-md-font-size: 16px; --typography-text-md-line-height: 150%; --typography-text-md-letter-spacing: 0; --typography-text-md-light-font: normal 300 var(--typography-text-md-font-size)/ var(--typography-text-md-line-height) var(--fonts-family-text); --typography-text-md-regular-font: normal 400 var(--typography-text-md-font-size)/ var(--typography-text-md-line-height) var(--fonts-family-text); --typography-text-md-medium-font: normal 500 var(--typography-text-md-font-size)/ var(--typography-text-md-line-height) var(--fonts-family-text); --typography-text-md-semibold-font: normal 600 var(--typography-text-md-font-size)/ var(--typography-text-md-line-height) var(--fonts-family-text); --typography-text-md-bold-font: normal 700 var(--typography-text-md-font-size)/ var(--typography-text-md-line-height) var(--fonts-family-text); --typography-text-lg-font-size: 18px; --typography-text-lg-line-height: 150%; --typography-text-lg-letter-spacing: 0; --typography-text-lg-light-font: normal 300 var(--typography-text-lg-font-size)/ var(--typography-text-lg-line-height) var(--fonts-family-text); --typography-text-lg-regular-font: normal 400 var(--typography-text-lg-font-size)/ var(--typography-text-lg-line-height) var(--fonts-family-text); --typography-text-lg-medium-font: normal 500 var(--typography-text-lg-font-size)/ var(--typography-text-lg-line-height) var(--fonts-family-text); --typography-text-lg-semibold-font: normal 600 var(--typography-text-lg-font-size)/ var(--typography-text-lg-line-height) var(--fonts-family-text); --typography-text-lg-bold-font: normal 700 var(--typography-text-lg-font-size)/ var(--typography-text-lg-line-height) var(--fonts-family-text); --typography-text-xl-font-size: 20px; --typography-text-xl-line-height: 150%; --typography-text-xl-letter-spacing: 0; --typography-text-xl-light-font: normal 300 var(--typography-text-xl-font-size)/ var(--typography-text-xl-line-height) var(--fonts-family-text); --typography-text-xl-regular-font: normal 400 var(--typography-text-xl-font-size)/ var(--typography-text-xl-line-height) var(--fonts-family-text); --typography-text-xl-medium-font: normal 500 var(--typography-text-xl-font-size)/ var(--typography-text-xl-line-height) var(--fonts-family-text); --typography-text-xl-semibold-font: normal 600 var(--typography-text-xl-font-size)/ var(--typography-text-xl-line-height) var(--fonts-family-text); --typography-text-xl-bold-font: normal 700 var(--typography-text-xl-font-size)/ var(--typography-text-xl-line-height) var(--fonts-family-text); --typography-text-xxl-font-size: 22px; --typography-text-xxl-line-height: 150%; --typography-text-xxl-letter-spacing: 0; --typography-text-xxl-light-font: normal 300 var(--typography-text-xxl-font-size)/ var(--typography-text-xxl-line-height) var(--fonts-family-text); --typography-text-xxl-regular-font: normal 400 var(--typography-text-xxl-font-size)/ var(--typography-text-xxl-line-height) var(--fonts-family-text); --typography-text-xxl-medium-font: normal 500 var(--typography-text-xxl-font-size)/ var(--typography-text-xxl-line-height) var(--fonts-family-text); --typography-text-xxl-semibold-font: normal 600 var(--typography-text-xxl-font-size)/ var(--typography-text-xxl-line-height) var(--fonts-family-text); --typography-text-xxl-bold-font: normal 700 var(--typography-text-xxl-font-size)/ var(--typography-text-xxl-line-height) var(--fonts-family-heading); --typography-heading-h5-font-size: 16px; --typography-heading-h5-line-height: 130%; --typography-heading-h5-letter-spacing: 0; --typography-heading-h5-regular-font: normal 400 var(--typography-heading-h5-font-size)/ var(--typography-heading-h5-line-height) var(--fonts-family-heading); --typography-heading-h5-semibold-font: normal 600 var(--typography-heading-h5-font-size)/ var(--typography-heading-h5-line-height) var(--fonts-family-heading); --typography-heading-h5-bold-font: normal 700 var(--typography-heading-h5-font-size)/ var(--typography-heading-h5-line-height) var(--fonts-family-heading); --typography-heading-h4-font-size: 20px; --typography-heading-h4-line-height: 130%; --typography-heading-h4-letter-spacing: 0; --typography-heading-h4-regular-font: normal 400 var(--typography-heading-h4-font-size)/ var(--typography-heading-h4-line-height) var(--fonts-family-heading); --typography-heading-h4-semibold-font: normal 600 var(--typography-heading-h4-font-size)/ var(--typography-heading-h4-line-height) var(--fonts-family-heading); --typography-heading-h4-bold-font: normal 700 var(--typography-heading-h4-font-size)/ var(--typography-heading-h4-line-height) var(--fonts-family-heading); --typography-heading-h3-font-size: 24px; --typography-heading-h3-line-height: 130%; --typography-heading-h3-letter-spacing: 0; --typography-heading-h3-regular-font: normal 400 var(--typography-heading-h3-font-size)/ var(--typography-heading-h3-line-height) var(--fonts-family-heading); --typography-heading-h3-semibold-font: normal 600 var(--typography-heading-h3-font-size)/ var(--typography-heading-h3-line-height) var(--fonts-family-heading); --typography-heading-h3-bold-font: normal 700 var(--typography-heading-h3-font-size)/ var(--typography-heading-h3-line-height) var(--fonts-family-heading); --typography-heading-h2-font-size: 32px; --typography-heading-h2-line-height: 130%; --typography-heading-h2-letter-spacing: 0; --typography-heading-h2-regular-font: normal 400 var(--typography-heading-h2-font-size)/ var(--typography-heading-h2-line-height) var(--fonts-family-heading); --typography-heading-h2-semibold-font: normal 600 var(--typography-heading-h2-font-size)/ var(--typography-heading-h2-line-height) var(--fonts-family-heading); --typography-heading-h2-bold-font: normal 700 var(--typography-heading-h2-font-size)/ var(--typography-heading-h2-line-height) var(--fonts-family-heading); --typography-heading-h1-font-size: 36px; --typography-heading-h1-line-height: 130%; --typography-heading-h1-letter-spacing: 0; --typography-heading-h1-regular-font: normal 400 var(--typography-heading-h1-font-size)/ var(--typography-heading-h1-line-height) var(--fonts-family-heading); --typography-heading-h1-semibold-font: normal 600 var(--typography-heading-h1-font-size)/ var(--typography-heading-h1-line-height) var(--fonts-family-heading); --typography-heading-h1-bold-font: normal 700 var(--typography-heading-h1-font-size)/ var(--typography-heading-h1-line-height) var(--fonts-family-heading); --typography-heading-lg-font-size: 40px; --typography-heading-lg-line-height: 130%; --typography-heading-lg-letter-spacing: 0; --typography-heading-lg-regular-font: normal 400 var(--typography-heading-lg-font-size)/ var(--typography-heading-lg-line-height) var(--fonts-family-text); --typography-heading-lg-semibold-font: normal 600 var(--typography-heading-lg-font-size)/ var(--typography-heading-lg-line-height) var(--fonts-family-text); --typography-heading-lg-bold-font: normal 700 var(--typography-heading-lg-font-size)/ var(--typography-heading-lg-line-height) var(--fonts-family-text); --typography-heading-xl-font-size: 48px; --typography-heading-xl-line-height: 130%; --typography-heading-xl-letter-spacing: 0; --typography-heading-xl-regular-font: normal 400 var(--typography-heading-xl-font-size)/ var(--typography-heading-xl-line-height) var(--fonts-family-text); --typography-heading-xl-semibold-font: normal 600 var(--typography-heading-xl-font-size)/ var(--typography-heading-xl-line-height) var(--fonts-family-text); --typography-heading-xl-bold-font: normal 700 var(--typography-heading-xl-font-size)/ var(--typography-heading-xl-line-height) var(--fonts-family-text); --typography-heading-xxl-font-size: 64px; --typography-heading-xxl-line-height: 130%; --typography-heading-xxl-letter-spacing: 0; --typography-heading-xxl-regular-font: normal 400 var(--typography-heading-xxl-font-size)/ var(--typography-heading-xxl-line-height) var(--fonts-family-text); --typography-heading-xxl-semibold-font: normal 600 var(--typography-heading-xxl-font-size)/ var(--typography-heading-xxl-line-height) var(--fonts-family-text); --typography-heading-xxl-bold-font: normal 700 var(--typography-heading-xxl-font-size)/ var(--typography-heading-xxl-line-height) var(--fonts-family-text); --gradients-primary-down: linear-gradient(180deg, color-mix(in srgb, transparent 50%, var(--colours-primary-7)) 0%, color-mix(in srgb, transparent 100%, var(--colours-primary-7)) 100%); --gradients-primary-up: linear-gradient(180deg, color-mix(in srgb, transparent 100%, var(--colours-primary-7)) 0%, color-mix(in srgb, transparent 50%, var(--colours-primary-7)) 100%); --gradients-primary-left: linear-gradient(90deg, color-mix(in srgb, transparent 50%, var(--colours-primary-7)) 0%, color-mix(in srgb, transparent 100%, var(--colours-primary-7)) 100%); --gradients-primary-right: linear-gradient(90deg, color-mix(in srgb, transparent 100%, var(--colours-primary-7)) 0%, color-mix(in srgb, transparent 50%, var(--colours-primary-7)) 100%); --gradients-secondary-down: linear-gradient(180deg, color-mix(in srgb, transparent 50%, var(--colours-secondary-7)) 0%, color-mix(in srgb, transparent 100%, var(--colours-secondary-7)) 100%); --gradients-secondary-up: linear-gradient(180deg, color-mix(in srgb, transparent 100%, var(--colours-secondary-7)) 0%, color-mix(in srgb, transparent 50%, var(--colours-secondary-7)) 100%); --gradients-secondary-left: linear-gradient(90deg, color-mix(in srgb, transparent 50%, var(--colours-secondary-7)) 0%, color-mix(in srgb, transparent 100%, var(--colours-secondary-7)) 100%); --gradients-secondary-right: linear-gradient(90deg, color-mix(in srgb, transparent 100%, var(--colours-secondary-7)) 0%, color-mix(in srgb, transparent 50%, var(--colours-secondary-7)) 100%); --gradients-black-down: linear-gradient(180deg, color-mix(in srgb, transparent 50%, var(--colours-base-black)) 0%, color-mix(in srgb, transparent 100%, var(--colours-base-black)) 100%); --gradients-black-up: linear-gradient(180deg, color-mix(in srgb, transparent 100%, var(--colours-base-black)) 0%, color-mix(in srgb, transparent 50%, var(--colours-base-black)) 100%); --gradients-black-left: linear-gradient(90deg, color-mix(in srgb, transparent 50%, var(--colours-base-black)) 0%, color-mix(in srgb, transparent 100%, var(--colours-base-black)) 100%); --gradients-black-right: linear-gradient(90deg, color-mix(in srgb, transparent 100%, var(--colours-base-black)) 0%, color-mix(in srgb, transparent 50%, var(--colours-base-black)) 100%); --gradients-white-down: linear-gradient(180deg, color-mix(in srgb, transparent 50%, var(--colours-base-white)) 0%, color-mix(in srgb, transparent 100%, var(--colours-base-white)) 100%); --gradients-white-up: linear-gradient(180deg, color-mix(in srgb, transparent 100%, var(--colours-base-white)) 0%, color-mix(in srgb, transparent 50%, var(--colours-base-white)) 100%); --gradients-white-left: linear-gradient(90deg, color-mix(in srgb, transparent 50%, var(--colours-base-white)) 0%, color-mix(in srgb, transparent 100%, var(--colours-base-white)) 100%); --gradients-white-right: linear-gradient(90deg, color-mix(in srgb, transparent 100%, var(--colours-base-white)) 0%, color-mix(in srgb, transparent 50%, var(--colours-base-white)) 100%); --shadows-xs: 0px 1px 2px 0px color-mix(in srgb, transparent 95%, var(--colours-neutral-10)); --shadows-sm: 0px 1px 2px 0px color-mix(in srgb, transparent 94%, var(--colours-neutral-10)), 0px 1px 3px 0px color-mix(in srgb, transparent 90%, var(--colours-neutral-10)); --shadows-md: 0px 2px 4px -2px color-mix(in srgb, transparent 94%, var(--colours-neutral-10)), 0px 4px 8px -2px color-mix(in srgb, transparent 90%, var(--colours-neutral-10)); --shadows-lg: 0px 4px 6px -2px color-mix(in srgb, transparent 97%, var(--colours-neutral-10)), 0px 12px 16px -4px color-mix(in srgb, transparent 92%, var(--colours-neutral-10)); --shadows-xl: 0px 8px 8px -4px color-mix(in srgb, transparent 97%, var(--colours-neutral-10)), 0px 20px 24px -4px color-mix(in srgb, transparent 92%, var(--colours-neutral-10)); --shadows-2xl: 0px 24px 48px -12px color-mix(in srgb, transparent 82%, var(--colours-neutral-10)); --shadows-3xl: 0px 32px 64px -12px color-mix(in srgb, transparent 86%, var(--colours-neutral-10)); --shadows-4xl: 0px 32px 64px -12px color-mix(in srgb, transparent 86%, var(--colours-neutral-10)); --size-025: 2px; --size-05: 4px; --size-1: 8px; --size-2: 16px; --size-3: 24px; --size-4: 32px; --size-5: 40px; --size-6: 48px; --size-7: 56px; --size-8: 64px; --size-9: 72px; --size-10: 80px; --size-11: 120px; --size-12: 160px; --default-gap: var(size-8); --section-spacing: var(--size-5); --header-height: 90px; --header-foreground: #ffffff; --footer-background: var(--colours-base-background-1); --footer-foreground: var(--colours-neutral-10); --footer-links: var(--colours-neutral-8); --footer-links-hover: var(--colours-primary-7); --footer-social-background: var(--colours-primary-7); --footer-social-foreground: var(--colours-primary-7-text); --border-rounded-none: 0px; --border-rounded-xs: 1px; --border-rounded-sm: 2px; --border-rounded-md: 4px; --border-rounded-lg: 8px; --border-rounded-xl: 16px; --border-rounded-full: 999px; --border-width-none: 0px; --border-width-xxs: 1px; --border-width-xs: 1.5px; --border-width-sm: 2px; --border-width-md: 4px; --border-width-lg: 8px; --border-width-xl: 16px; --buttons-primary-color: var(--colours-primary-7-text); --buttons-primary-color-hover: var(--colours-primary-7-text); --buttons-primary-color-disabled: var(--colours-neutral-4); --buttons-primary-background: var(--colours-primary-7); --buttons-primary-background-hover: var(--colours-primary-8); --buttons-primary-background-disabled: var(--colours-neutral-2); --buttons-primary-border: 1px solid var(--colours-primary-7); --buttons-primary-border-hover: 1px solid var(--colours-primary-8); --buttons-primary-border-disabled: 1px solid var(--colours-neutral-2); --buttons-primary-ghost-color: var(--colours-primary-7); --buttons-primary-ghost-color-hover: var(--colours-primary-7); --buttons-primary-ghost-color-disabled: var(--colours-neutral-4); --buttons-primary-ghost-background: var(--colours-base-background); --buttons-primary-ghost-background-hover: var(--colours-base-background-1); --buttons-primary-ghost-background-disabled: var(--colours-neutral-2); --buttons-primary-ghost-border: 1px solid var(--colours-neutral-3); --buttons-primary-ghost-border-hover: 1px solid var(--colours-neutral-3); --buttons-primary-ghost-border-disabled: 1px solid var(--colours-neutral-2); --buttons-primary-white-color: var(--colours-primary-7); --buttons-primary-white-color-hover: var(--colours-primary-7); --buttons-primary-white-color-disabled: var(--colours-neutral-4); --buttons-primary-white-background: var(--colours-base-background); --buttons-primary-white-background-hover: var(--colours-base-background-1); --buttons-primary-white-background-disabled: var(--colours-neutral-2); --buttons-primary-white-border: 0 none; --buttons-primary-white-border-hover: 0 none; --buttons-primary-white-border-disabled: 0 none; --buttons-secondary-color: var(--colours-secondary-7-text); --buttons-secondary-color-hover: var(--colours-secondary-7-text); --buttons-secondary-color-disabled: var(--colours-neutral-4); --buttons-secondary-background: var(--colours-secondary-7); --buttons-secondary-background-hover: var(--colours-secondary-8); --buttons-secondary-background-disabled: var(--colours-neutral-2); --buttons-secondary-border: 1px solid var(--colours-secondary-7); --buttons-secondary-border-hover: 1px solid var(--colours-secondary-8); --buttons-secondary-border-disabled: 1px solid var(--colours-neutral-2); --buttons-secondary-ghost-color: var(--colours-secondary-7); --buttons-secondary-ghost-color-hover: var(--colours-secondary-7); --buttons-secondary-ghost-color-disabled: var(--colours-neutral-4); --buttons-secondary-ghost-background: var(--colours-base-white); --buttons-secondary-ghost-background-hover: var(--colours-neutral-1); --buttons-secondary-ghost-background-disabled: var(--colours-neutral-2); --buttons-secondary-ghost-border: 1px solid var(--colours-neutral-3); --buttons-secondary-ghost-border-hover: 1px solid var(--colours-neutral-3); --buttons-secondary-ghost-border-disabled: 1px solid var(--colours-neutral-2); --buttons-secondary-white-color: var(--colours-secondary-7); --buttons-secondary-white-color-hover: var(--colours-secondary-7); --buttons-secondary-white-color-disabled: var(--colours-neutral-4); --buttons-secondary-white-background: var(--colours-base-white); --buttons-secondary-white-background-hover: var(--colours-neutral-1); --buttons-secondary-white-background-disabled: var(--colours-neutral-2); --buttons-secondary-white-border: 0 none; --buttons-secondary-white-border-hover: 0 none; --buttons-secondary-white-border-disabled: 0 none; --button-size-xs: 24px; --button-size-sm: 32px; --button-size-md: 48px; --button-size-lg: 56px; --spacing-button-spacing-lg-padding: 0 24px; --spacing-button-spacing-md-padding: 0 24px; --spacing-button-spacing-sm-padding: 0 16px; --spacing-button-spacing-xs-padding: 0 8px; --spacing-button-spacing-lg-gap: 8px; --spacing-button-spacing-md-gap: 8px; --spacing-button-spacing-sm-gap: 8px; --spacing-button-spacing-xs-gap: 4px; --spacing-form-field-space-default-gap: 8px; --spacing-form-field-space-default-padding: 16px; --fields-form-label: var(--colours-neutral-6); --fields-form-placeholder-text: var(--colours-neutral-5); --fields-form-text: var(--colours-neutral-8); --fields-form-field-background-default: var(--colours-base-background); --fields-form-field-border-default: 1px solid var(--colours-neutral-3); --fields-form-field-icon-default: var(--colours-primary-7); --fields-form-field-background-focus: var(--colours-base-white); --fields-form-field-border-focus: 1px solid var(--colours-primary-7); --fields-form-field-icon-focus: var(--colours-primary-7); --fields-form-field-background-disabled: var(--colours-neutral-2); --fields-form-field-border-disabled: 1px solid var(--colours-neutral-3); --fields-form-field-icon-disabled: var(--colours-neutral-4); --fields-form-checkbox-background-default: var(--colours-base-background); --fields-form-checkbox-border-default: 1px solid var(--colours-neutral-3); --fields-form-checkbox-background-focus: var(--colours-primary-8); --fields-form-checkbox-border-focus: 1px solid var(--colours-primary-8); --fields-form-checkbox-background-checked: var(--colours-primary-7); --fields-form-checkbox-border-checked: 1px solid var(--colours-primary-7); --fields-form-checkbox-icon-checked: var(--colours-base-white); --fields-form-checkbox-background-disabled: var(--colours-neutral-2); --fields-form-checkbox-border-disabled: 1px solid var(--colours-neutral-3); --fields-form-checkbox-icon-disabled: var(--colours-neutral-3); --fields-form-radio-background-default: var(--colours-base-white); --fields-form-radio-border-default: 1px solid var(--colours-neutral-3); --fields-form-radio-background-focus: var(--colours-base-white); --fields-form-radio-border-focus: 1px solid var(--colours-neutral-3); --fields-form-radio-background-checked: var(--colours-base-white); --fields-form-radio-border-checked: 1px solid var(--colours-neutral-3); --fields-form-radio-icon-checked: var(--colours-primary-7); --fields-form-radio-background-disabled: var(--colours-neutral-2); --fields-form-radio-border-disabled: 1px solid var(--colours-neutral-3); --fields-form-radio-icon-disabled: var(--colours-neutral-3); --fields-form-toggle-background-default: var(--colours-neutral-3); --fields-form-toggle-border-default: 0px solid var(--colours-neutral-3); --fields-form-toggle-icon-default: var(--colours-base-white); --fields-form-toggle-background-focus: var(--colours-primary-8); --fields-form-toggle-border-focus: 0px solid var(--colours-primary-8); --fields-form-toggle-icon-focus: var(--colours-base-white); --fields-form-toggle-background-checked: var(--colours-primary-7); --fields-form-toggle-border-checked: 0px solid var(--colours-primary-7); --fields-form-toggle-icon-checked: var(--colours-base-white); --fields-form-toggle-background-disabled: var(--colours-neutral-2); --fields-form-toggle-border-disabled: 0px solid var(--colours-neutral-3); --fields-form-toggle-icon-disabled: var(--colours-neutral-3); --fields-form-tag-background-default: var(--colours-base-white); --fields-form-tag-border-default: 1px solid var(--colours-neutral-3); --fields-form-tag-icon-default: var(--colours-neutral-5); --fields-form-tag-background-hover: var(--colours-neutral-1); --fields-form-tag-border-hover: 1px solid var(--colours-neutral-3); --fields-form-tag-icon-hover: var(--colours-neutral-5); --fields-form-tag-background-disabled: var(--colours-neutral-2); --fields-form-tag-border-disabled: 1px solid var(--colours-neutral-3); --fields-form-tag-icon-disabled: var(--colours-neutral-4); --fields-form-tag-color-disabled: var(--colours-neutral-4); --avatar-background: var(--colours-primary-7); --avatar-color: var(--colours-primary-7-text); --avatar-xl: 160px; --avatar-lg: 120px; --avatar-md: 80px; --avatar-sm: 56px; --badge-bg: var(--colours-primary-7); --badge-bg-neutral: rgba(0, 0, 0, 0.4); --badge-text: var(--colours-primary-7-text); --badge-text-neutral: #ffffff; --badge-size-sm: 16px; --badge-size-md: 24px; --badge-size-lg: 40px; --badge-spacing-sm: 8px; --badge-spacing-md: 12px; --badge-spacing-lg: 16px; --radius-default: 0; --radius-sm: 4px; --radius-round: 999px; --dropdown-bg: var(--nav-dropdown-background, var(--colours-base-background)); --dropdown-bg-hover: var(--nav-dropdown-background-hover, var(--colours-primary-7)); --dropdown-text: var(--nav-dropdown-foreground, var(--colours-neutral-10)); --dropdown-text-hover: var(--nav-dropdown-foreground-hover, var(--colours-primary-7-text)); --dropdown-links-size-default: 32px; --dropdown-links-spacing-default: 8px; --submenu-links-size-default: 24px; --submenu-links-spacing-default: 8px; --transition-sm: all 150ms ease-in-out; --transition-md: all 300ms ease-in-out; --transition-lg: all 600ms ease-in-out; --tab-size-horizontal: var(--size-7); --tab-size-vertical: var(--size-4); --tab-spacing: var(--size-2); --tab-gap: var(--size-1); --tab-bg: var(--colours-base-background); --tab-bg-hover: var(--colours-neutral-1); --tab-text: var(--colours-neutral-8); --tab-text-active: var(--colours-neutral-10); --tab-border: 1px solid var(--colours-neutral-3); --tab-border-active: 4px solid var(--colours-secondary-7); --loader-color: var(--colours-primary-7); --swiper-theme-color: var(--colours-primary-7); --swiper-pagination-bullet-inactive-color: var(--colours-neutral-3, #000000); --swiper-pagination-bullet-inactive-opacity: 1 } @media screen and (min-width: 640px) { :root { --typography-heading-h5-font-size: 24px; --typography-heading-h5-line-height: 130%; --typography-heading-h5-letter-spacing: 0; --typography-heading-h4-font-size: 32px; --typography-heading-h4-line-height: 130%; --typography-heading-h4-letter-spacing: 0; --typography-heading-h3-font-size: 36px; --typography-heading-h3-line-height: 130%; --typography-heading-h3-letter-spacing: 0; --typography-heading-h2-font-size: 40px; --typography-heading-h2-line-height: 130%; --typography-heading-h2-letter-spacing: 0; --typography-heading-h1-font-size: 48px; --typography-heading-h1-line-height: 130%; --typography-heading-h1-letter-spacing: 0; --typography-heading-lg-font-size: 64px; --typography-heading-lg-line-height: 130%; --typography-heading-lg-letter-spacing: 0; --typography-heading-xl-font-size: 80px; --typography-heading-xl-line-height: 130%; --typography-heading-xl-letter-spacing: 0; --typography-heading-xxl-font-size: 140px; --typography-heading-xxl-line-height: 130%; --typography-heading-xxl-letter-spacing: 0; --section-spacing: var(--size-10) } } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v20/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v20/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v20/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v20/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v20/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v20/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v20/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v20/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v20/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v20/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtE6F15M.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWvU6F15M.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtU6F15M.woff2) format("woff2"); unicode-range: U+1F00-1FFF } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuk6F15M.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWu06F15M.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWxU6F15M.woff2) format("woff2"); unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqW106F15M.woff2) format("woff2"); unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtk6F15M.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWt06F15M.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6F.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format("woff2"); unicode-range: U+1F00-1FFF } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTVOmu1aB.woff2) format("woff2"); unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTUGmu1aB.woff2) format("woff2"); unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/opensans/v43/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD } *, *::before, *::after { box-sizing: border-box } html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none } * { margin: 0; padding: 0; font: inherit; scroll-behavior: smooth } p, dl, multicol, figure, blockquote { display: block; margin-block-start: 1em; margin-block-end: 1em } ul[role='list'], ol[role='list'] { list-style: none } html, body { height: auto; background-color: var(--colours-base-background); position: relative; z-index: 0 } body { line-height: 1.5 } h1, h2, h3, h4, h5 { text-wrap: balance } .wordwrap { white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word } a:not([class]) { text-decoration-skip-ink: auto } img, picture, svg { max-width: 100%; display: block; pointer-events: none } textarea:not([rows]) { min-height: 10em } :target { scroll-margin-block: 5ex } .eos-rotate-wrapper { display: none } body { color: var(--colours-neutral-8); font: var(--typography-text-md-regular-font); font-family: var(--fonts-family-text) } a, .link { color: var(--colours-primary-7); text-decoration: none } a:hover { color: var(--colours-primary-10) } ul { list-style: none } .container { padding: var(--section-spacing) 0 } h1 { font: var(--typography-heading-h1-bold-font); letter-spacing: var(--typography-heading-h1-letter-spacing) } h2 { font: var(--typography-heading-h2-bold-font); letter-spacing: var(--typography-heading-h2-letter-spacing) } h3 { font: var(--typography-heading-h3-bold-font); letter-spacing: var(--typography-heading-h3-letter-spacing) } h4 { font: var(--typography-heading-h4-bold-font); letter-spacing: var(--typography-heading-h4-letter-spacing) } h5 { font: var(--typography-heading-h5-bold-font); letter-spacing: var(--typography-heading-h5-letter-spacing) } h1, h2, h3, h4, h5 { margin: 0; padding: 0; color: var(--colours-neutral-10); font-family: var(--fonts-family-heading) } .desktop-logo { display: none } .hero { z-index: 0 } .btn-lg { padding: var(--spacing-button-spacing-lg-padding) } .btn-md { padding: var(--spacing-button-spacing-md-padding) } .btn-sm { padding: var(--spacing-button-spacing-sm-padding) } .btn-xs { padding: var(--spacing-button-spacing-xs-padding) } .primary-btn-none { background: none; color: var(--buttons-primary-background); border: 0 none; cursor: pointer; transition: --transition-md } .primary-btn-none:hover { background: none; color: var(--buttons-primary-background-hover); border: 0 none } .primary-btn-none:disabled { background: none; color: var(--buttons-primary-background-disabled); border: 0 none } .primary-btn { background: var(--buttons-primary-background); color: var(--buttons-primary-color); border: var(--buttons-primary-border); border-radius: var(--border-rounded-none); cursor: pointer; transition: var(--transition-md) } .primary-btn:hover { background: var(--buttons-primary-background-hover); color: var(--buttons-primary-color-hover); border: var(--buttons-primary-border-hover) } .primary-btn:disabled { background: var(--buttons-primary-background-disabled); color: var(--buttons-primary-color-disabled); border: var(--buttons-primary-border-disabled) } .primary-btn-ghost { background: var(--buttons-primary-ghost-background); color: var(--buttons-primary-ghost-color); border: var(--buttons-primary-ghost-border); border-radius: var(--border-rounded-none); cursor: pointer } .primary-btn-ghost:hover { background: var(--buttons-primary-ghost-background-hover); color: var(--buttons-primary-ghost-color-hover); border: var(--buttons-primary-ghost-border-hover) } .primary-btn-ghost:disabled { background: var(--buttons-primary-ghost-background-disabled); color: var(--buttons-primary-ghost-color-disabled); border: var(--buttons-primary-ghost-border-disabled) } .primary-btn-white { background: var(--buttons-primary-white-background); color: var(--buttons-primary-white-color); border: var(--buttons-primary-white-border); border-radius: var(--border-rounded-none); cursor: pointer } .primary-btn-white:hover { background: var(--buttons-primary-white-background-hover); color: var(--buttons-primary-white-color-hover); border: var(--buttons-primary-white-border-hover) } .primary-btn-white:disabled { background: var(--buttons-primary-white-background-disabled); color: var(--buttons-primary-white-color-disabled); border: var(--buttons-primary-white-border-disabled) } .secondary-btn { background: var(--buttons-secondary-background); color: var(--buttons-secondary-color); border: var(--buttons-secondary-border); border-radius: var(--border-rounded-none); cursor: pointer; transition: var(--transition-md) } .secondary-btn:hover { background: var(--buttons-secondary-background-hover); color: var(--buttons-secondary-color-hover); border: var(--buttons-secondary-border-hover) } .secondary-btn:disabled { background: var(--buttons-secondary-background-disabled); color: var(--buttons-secondary-color-disabled); border: var(--buttons-secondary-border-disabled) } .secondary-btn-ghost { background: var(--buttons-secondary-ghost-background); color: var(--buttons-secondary-ghost-color); border: var(--buttons-secondary-ghost-border); border-radius: var(--border-rounded-none); cursor: pointer } .secondary-btn-ghost:hover { background: var(--buttons-secondary-ghost-background-hover); color: var(--buttons-secondary-ghost-color-hover); border: var(--buttons-secondary-ghost-border-hover) } .primary-btn-ghost:disabled { background: var(--buttons-secondary-ghost-background-disabled); color: var(--buttons-secondary-ghost-color-disabled); border: var(--buttons-secondary-ghost-border-disabled) } .secondary-btn-white { background: var(--buttons-secondary-white-background); color: var(--buttons-secondary-white-color); border: var(--buttons-secondary-white-border); border-radius: var(--border-rounded-none); cursor: pointer } .secondary-btn-white:hover { background: var(--buttons-secondary-white-background-hover); color: var(--buttons-secondary-white-color-hover); border: var(--buttons-secondary-white-border-hover) } .secondary-btn-white:disabled { background: var(--buttons-secondary-white-background-disabled); color: var(--buttons-secondary-white-color-disabled); border: var(--buttons-secondary-white-border-disabled) } .brand-divider { width: var(--size-10); height: var(--size-05); background: var(--colours-primary-7) } .divider-horizontal { width: 100%; height: var(--size-1); background: var(--colours-neutral-3) } .fefform { background: var(--colours-base-background); box-shadow: var(--shadows-xl) } .fefform form fieldset { border: var(--border-width-none); display: grid; grid-template-columns: 1fr; gap: var(--spacing-form-field-space-default-gap) } .fefform form fieldset .feffield { position: relative; width: 100%; display: flex; flex-direction: column; gap: var(--spacing-button-spacing-xs-gap) } .fefform form fieldset .feffield .feffield-error { position: absolute; bottom: calc(0px - var(--size-2)); left: 0; width: 100%; height: var(--size-3); padding: var(--size-025) var(--size-05); display: flex; flex-direction: column; justify-content: center; background: var(--colours-error-7); color: var(--colours-base-white); font: var(--typography-text-xxs-regular-font); text-transform: uppercase; z-index: 10 } .fefform form fieldset .feffield label { color: var(--colours-neutral-6); font: var(--typography-text-xs-semibold-font) } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) { width: 100%; height: var(--size-6); padding: 0 var(--spacing-form-field-space-default-padding); background: var(--fields-form-field-background-default); border: var(--fields-form-field-border-default) } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) input, .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) textarea { background: none } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)):has(.react-select__value-container--is-multi) { height: unset; min-height: var(--size-6) } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) svg { width: var(--size-2); height: var(--size-2) } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .input-field { flex: 0 1 100%; min-width: 0; width: 100%; height: 100%; color: var(--colours-neutral-8); font: var(--typography-text-sm-medium-font); border: var(--border-width-none); outline: none } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .input-field::placeholder { color: var(--colours-neutral-5); font: var(--typography-text-sm-medium-font) } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select-autocomplete .react-select__input-container input { opacity: 1 !important } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select { align-content: center } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__control { width: 100%; height: 100%; display: flex; align-items: center } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__control .react-select__value-container { width: 100%; height: 100%; display: flex; align-items: center; align-self: center; gap: var(--size-05); white-space: nowrap } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__control .react-select__value-container .react-select__multi-value { width: 100%; max-width: fit-content; height: var(--button-size-sm); padding: var(--spacing-button-spacing-sm-padding); display: flex; align-items: center; gap: var(--size-05); background: var(--colours-base-background); border: var(--border-width-xs) solid var(--colours-neutral-3); border-radius: var(--border-rounded-full) } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__control .react-select__value-container .react-select__multi-value .react-select__multi-value__label { font: var(--typography-text-sm-medium-font) } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__control .react-select__value-container .react-select__multi-value .react-select__multi-value__remove { width: var(--size-2); height: var(--size-2); display: flex; justify-content: center; align-items: center } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__control .react-select__value-container .react-select__input-container { flex: 1 1 0; min-width: 30px } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__control .react-select__value-container .react-select__placeholder { color: var(--colours-neutral-5); font: var(--typography-text-sm-medium-font); width: 0 } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__control .react-select__value-container .react-select__single-value { color: var(--colours-neutral-8); font: var(--typography-text-sm-medium-font) } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__control .react-select__indicators { width: 12px; height: 16px; display: flex; align-items: center; color: var(--colours-primary-7) } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__control .react-select__indicators .react-select__indicator { display: flex } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__control .react-select__indicators svg { fill: none; stroke: currentColor } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__menu { position: absolute; left: 0; width: 100%; background: var(--colours-base-background-1); border: var(--colours-base-background); box-shadow: var(--shadows-xl); z-index: 10 } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__menu .react-select__menu-list { max-height: 300px; overflow: auto } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__menu .react-select__menu-list .react-select__group-heading { cursor: default; display: block; font-size: 11px; padding: var(--size-1) var(--spacing-form-field-space-default-padding); font-weight: 600; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; text-transform: none } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__menu .react-select__menu-list .react-select__group .react-select__group { padding-left: calc(var(--spacing-form-field-space-default-padding) * 1.25) } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__menu .react-select__menu-list .react-select__group .react-select__group .react-select__group { padding-left: calc(var(--spacing-form-field-space-default-padding) * 1.5) } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__menu .react-select__menu-list .react-select__option { background: var(--colours-base-background); padding: var(--size-1) var(--spacing-form-field-space-default-padding); color: var(--colours-neutral-5); font: var(--typography-text-sm-medium-font) } .fefform form fieldset .feffield .input-group:not(:has(.checkinput)) .react-select__menu .react-select__menu-list .react-select__option:hover { background: var(--colours-base-background-1); color: var(--colours-neutral-10) } .fefform form fieldset .feffield .input-group:focus-within { border: var(--fields-form-field-border-focus) } .fefform form fieldset .feffield:has(.feffield-error) .input-group { border: 1px solid var(--colours-error-7) } .fefform form fieldset .input-group-prefix .input-group, .fefform form fieldset .input-group-suffix .input-group { display: flex; align-items: center; gap: var(--spacing-form-field-space-default-gap) } .fefform form fieldset .input-group-prefix .input-group .input-group-addon, .fefform form fieldset .input-group-suffix .input-group .input-group-addon { min-width: 0; flex: 0 0 auto; color: var(--colours-neutral-8); font: var(--typography-text-sm-medium-font) } .fefform form fieldset .input-group-prefix .input-group .input-group-addon::placeholder, .fefform form fieldset .input-group-suffix .input-group .input-group-addon::placeholder { color: var(--colours-neutral-5); font: var(--typography-text-sm-medium-font) } .fefform form fieldset .fefcheck .input-group { padding: 0; display: flex; align-items: center; border: var(--border-width-none) } .fefform form fieldset .fefcheck .input-group .checkinput { display: flex; align-items: center; gap: var(--size-2) } .fefform form fieldset .fefcheck .input-group .checkinput .checkbox input { display: none } .fefform form fieldset .fefcheck .input-group .checkinput .checkbox input:checked+span { background: var(--fields-form-field-icon-focus) } .fefform form fieldset .fefcheck .input-group .checkinput .checkbox span { width: var(--size-3); height: var(--size-3); display: flex; justify-content: center; align-items: center; background: var(--fields-form-checkbox-background-default); border: var(--fields-form-checkbox-border-default); border-radius: var(--border-rounded-none); transition: all 300ms ease-in-out } .fefform form fieldset .fefcheck .input-group .checkinput .checkbox span svg { width: 90%; height: 90%; fill: var(--colours-base-white) } .fefform form fieldset .fefcheck .input-group .checkinput label:last-child { font: var(--typography-text-sm-medium-font) } .fefform form fieldset .fefcheck .input-group .checkinput label:last-child a { font: var(--typography-text-sm-medium-font) } .fefform form fieldset .message .input-group { height: var(--size-10); padding: var(--spacing-form-field-space-default-padding); overflow: hidden } .fefform form .fefform-extras { display: flex; flex-direction: column; gap: var(--spacing-form-field-space-default-gap) } .fefform form .fefform-extras .policy { font: var(--typography-text-xxs-semibold-font) } .fefform form .fefform-extras .policy a { font: var(--typography-text-xxs-semibold-font) } .fefform form .fefform-extras .captcha-policy { font: var(--typography-text-xxs-semibold-font) } .fefform form .fefform-extras .captcha-policy a { font: var(--typography-text-xxs-semibold-font) } .fefform form .fefform-extras .button-group button { width: 100%; height: var(--button-size-md); padding: var(--spacing-button-spacing-lg-padding); background: var(--buttons-primary-background); color: var(--buttons-primary-color); font: var(--typography-text-sm-medium-font); border: var(--border-width-none); cursor: pointer } .fefform form .fefform-extras .button-group button:hover { background: var(--buttons-primary-background-hover); color: var(--buttons-primary-color-hover) } .fefform form .fefform-extras .button-group button:disabled { background: var(--buttons-primary-background-disabled); color: var(--buttons-primary-color-disabled) } .nested-tab-heading { display: none } .nested-tab-heading.active { display: block } .mobile-swiper { position: relative } .mobile-swiper .swiper-wrapper .swiper-slide { max-width: fit-content } .mobile-swiper .swiper-pagination { position: relative; bottom: unset; text-align: left; display: flex; gap: 0 var(--size-1); padding: var(--size-2) var(--size-2) var(--size-2) 0 } @media screen and (min-width: 1120px) { .mobile-swiper .swiper-pagination { padding: var(--size-2) 0 } } .mobile-swiper .swiper-pagination .swiper-pagination-bullet { margin: 0; width: var(--size-7); max-width: var(--size-7); height: var(--size-05); background: var(--colours-neutral-3); border-radius: var(--border-rounded-none); opacity: 1 } .mobile-swiper .swiper-pagination .swiper-pagination-bullet-active { background: var(--colours-primary-7) } .pagination { width: 100%; padding: var(--size-2) 0; display: flex; justify-content: center; align-items: center; gap: var(--size-1) } .pagination .pagination-numbers { display: flex; align-items: center; gap: var(--size-1) } .pagination .pagination-numbers .pagination-number { width: var(--button-size-sm); height: var(--button-size-sm); background: transparent; color: var(--colours-neutral-8); font: var(--typography-text-xs-medium-font); border: var(--border-width-none); border-radius: var(--border-rounded-none); cursor: pointer } .pagination .pagination-numbers .pagination-number-active { background: var(--buttons-primary-background); color: var(--buttons-primary-color) } .pagination-prev, .pagination-next { width: var(--button-size-sm); height: var(--button-size-sm); padding: var(--size-1); display: flex; justify-content: center; align-items: center; background: none; border: var(--border-width-none); border-radius: var(--border-rounded-none); cursor: pointer } .pagination-prev-disabled, .pagination-prev[disabled], .pagination-next-disabled, .pagination-next[disabled] { color: var(--colours-neutral-4); cursor: not-allowed; pointer-events: none } .pagination-prev-disabled:hover, .pagination-prev[disabled]:hover, .pagination-next-disabled:hover, .pagination-next[disabled]:hover { color: var(--colours-neutral-4) } .modal-container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 50; overflow: hidden } .modal-container .modal { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 360px; margin: 0 auto; transform: translate(-50%, -50%); background: var(--colours-base-background) } .modal-container .modal .modal-header { padding: var(--size-2); display: flex; align-items: center; justify-content: flex-end } .modal-container .modal .modal-header .close-button { padding: var(--size-1); display: flex; justify-content: center; align-items: center; background: var(--buttons-primary-background); border: var(--border-width-none); border-radius: var(--border-rounded-none); cursor: pointer } .modal-container .modal .modal-header .close-button .icon { display: inline-block; width: var(--button-size-xs); height: var(--button-size-xs); stroke-width: 0; stroke: currentColor; fill: currentColor } .modal-container .modal .modal-content { padding: var(--size-2); padding-top: 0; max-height: 600px; overflow-y: auto } .modal-container:is(:focus-within) { display: block } body.modal-open { overflow: hidden; padding-right: 15px } .modal-container:not(:focus-within) { display: none } .icon { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor } .property-sm-card { width: 100%; max-width: 328px; display: flex; flex-direction: column; background: var(--colours-base-background); box-shadow: var(--shadows-xl) } .property-sm-card .card-header { position: relative; width: 100%; height: 246px } .property-sm-card .card-header .property-sm-card-swiper { position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 10 } .property-sm-card .card-header .property-sm-card-swiper .swiper-wrapper { position: relative } .property-sm-card .card-header .property-sm-card-swiper .swiper-wrapper .swiper-slide a { position: relative; display: block; width: 100%; height: 100% } .property-sm-card .card-header .property-sm-card-swiper .swiper-wrapper .swiper-slide a img { width: 100%; height: 100%; display: block; object-fit: cover } .property-sm-card .card-header .property-sm-card-swiper .swiper-wrapper .swiper-slide a .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2) } .property-sm-card .card-header .property-sm-card-swiper .swiper-button-prev-property-sm, .property-sm-card .card-header .property-sm-card-swiper .swiper-button-next-property-sm { position: absolute; width: var(--size-5); height: var(--size-10); display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.3); cursor: pointer; z-index: 20 } .property-sm-card .card-header .property-sm-card-swiper .swiper-button-prev-property-sm .icon, .property-sm-card .card-header .property-sm-card-swiper .swiper-button-next-property-sm .icon { width: var(--size-3); height: var(--size-6); fill: var(--colours-base-white) } .property-sm-card .card-header .property-sm-card-swiper .swiper-button-prev-property-sm { top: 40%; left: 0 } .property-sm-card .card-header .property-sm-card-swiper .swiper-button-next-property-sm { top: 40%; right: 0 } .property-sm-card .card-header .card-header-img { width: 100%; height: 100%; aspect-ratio: 16 / 9 } .property-sm-card .card-header .card-header-img img { width: 100%; height: 100%; display: block; object-fit: cover } .property-sm-card .card-header .card-badges { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: var(--size-025); z-index: 10 } .property-sm-card .card-header .card-badges .card-badge { height: var(--badge-size-lg); padding: 0 var(--badge-spacing-lg); display: flex; justify-content: center; align-items: center; gap: var(--badge-spacing-lg); background: var(--badge-bg-neutral); color: var(--badge-text-neutral); font: var(--typography-text-sm-medium-font); border-radius: var(--radius-default) } .property-sm-card .card-header .card-labels { position: absolute; bottom: 0; right: 0; padding: var(--size-05); display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap-reverse; gap: var(--size-025); z-index: 20 } .property-sm-card .card-header .card-labels>div { height: var(--badge-size-md); padding: 0 var(--badge-spacing-md); display: flex; justify-content: center; align-items: center; gap: var(--badge-spacing-md); background: var(--badge-bg-neutral); border-radius: var(--radius-default); color: var(--badge-text-neutral); font: var(--typography-text-xs-semibold-font) } .property-sm-card .card-header .card-labels>div .icon { width: 12px; height: 12px } .property-sm-card .card-body { height: 100%; justify-self: stretch; padding: var(--size-3); display: flex; flex-direction: column; justify-content: space-between; gap: var(--size-2) 0; flex: 1 1 0 } .property-sm-card .card-body .card-body-top { display: flex; flex-direction: column; flex: 0 0 0; gap: var(--size-2) 0 } .property-sm-card .card-body .card-body-top .card-body-top-one { display: flex; justify-content: space-between; align-items: center } .property-sm-card .card-body .card-body-top .card-body-top-one .card-price { color: var(--colours-neutral-10); font: var(--typography-text-xl-bold-font) } @media screen and (min-width: 1366px) { .property-sm-card .card-body .card-body-top .card-body-top-one .card-price { font: var(--typography-heading-h5-bold-font) } } .property-sm-card .card-body .card-body-top .card-body-top-one .card-fav-btn { background: transparent; border: none; cursor: pointer } .property-sm-card .card-body .card-body-top .card-body-top-two { font: var(--typography-text-xs-medium-font) } @media screen and (min-width: 1366px) { .property-sm-card .card-body .card-body-top .card-body-top-two { font: var(--typography-text-sm-medium-font) } } .property-sm-card .card-body .card-body-bot { display: flex; flex-direction: column; gap: var(--size-2) 0; font: var(--typography-text-xs-medium-font) } .property-sm-card .card-body .card-body-bot .icon { width: var(--size-2); height: var(--size-2) } .property-sm-card .card-body .card-body-bot .card-stats { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--size-1) var(--size-2) } .property-sm-card .card-body .card-body-bot .card-stats>div { display: flex; align-items: center; gap: var(--size-1) } .property-sm-card .card-body .card-body-bot .card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-025); font: var(--typography-text-xxs-bold-font) } .property-sm-card .card-body .card-body-bot .card-tags .card-tag { height: var(--badge-size-sm); padding: 0 var(--badge-spacing-sm); background: var(--badge-bg); color: var(--badge-text); border-radius: var(--border-rounded-full); display: flex; align-items: center } .property-card-md { position: relative; width: 100%; max-width: 416px; height: 312px; background: var(--colours-base-background); box-shadow: 0px 8px 8px -4px rgba(15, 23, 41, 0.03), 0px 20px 24px -4px rgba(15, 23, 41, 0.08) } .property-card-md .card-img { position: relative; width: 100%; height: 100%; z-index: 10 } .property-card-md .card-img img { width: 100%; height: 100%; display: block; object-fit: cover } .property-card-md .card-img .swiper { --swiper-navigation-size: 16px } .property-card-md .card-img .swiper .swiper-button-prev, .property-card-md .card-img .swiper .swiper-button-next { width: var(--button-size-sm); height: var(--button-size-sm); margin-top: calc(0px - var(--size-5)); margin-left: var(--size-2); margin-right: var(--size-2); display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.3); color: var(--colours-base-white); border-radius: var(--border-rounded-full) } .property-card-md .card-content-top { position: absolute; top: 0; left: 0; width: 100%; padding: 0 var(--size-3); display: flex; flex-wrap: wrap; align-items: center; z-index: 20 } .property-card-md .card-content-top .card-badges { display: flex; align-items: center; gap: var(--size-025) } .property-card-md .card-content-top .card-badges .card-badge { height: var(--badge-size-lg); padding: 0 var(--badge-spacing-lg); display: flex; justify-content: center; align-items: center; gap: var(--badge-spacing-lg); background: var(--colours-secondary-7); color: var(--colours-base-white); font: var(--typography-text-sm-medium-font); border-radius: var(--border-rounded-none) } .property-card-md .card-content-top .card-tags { display: flex; align-items: center; gap: var(--size-025) } .property-card-md .card-content-top .card-tags .card-tag { height: var(--badge-size-lg); padding: 0 var(--badge-spacing-lg); display: flex; justify-content: center; align-items: center; gap: var(--badge-spacing-lg); background: var(--badge-bg-neutral); color: var(--badge-text-neutral); font: var(--typography-text-sm-medium-font); border-radius: var(--border-rounded-none) } .property-card-md .card-content-bot { position: absolute; bottom: 0; left: 0; width: 100%; padding: var(--size-3); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%); z-index: 20 } .property-card-md .card-content-bot .card-description { margin-bottom: var(--size-2); color: var(--colours-base-white); font: var(--typography-text-xl-semibold-font) } .property-card-md .card-content-bot .card-stats { display: flex; align-items: center; gap: var(--size-1) } .property-card-md .card-content-bot .card-stats span { display: block; color: var(--colours-base-white); font: var(--typography-text-xxs-bold-font) } .property-card-md .card-header { position: relative; height: 246px } .property-card-md .card-header .card-labels { position: absolute; bottom: 0; right: 0; padding: var(--size-05); display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap-reverse; gap: var(--size-025) } .property-card-md .card-header .card-labels div { height: var(--badge-size-md); padding: 0 var(--badge-spacing-md); display: flex; justify-content: center; align-items: center; gap: var(--badge-spacing-md); background: var(--badge-bg-neutral); border-radius: var(--radius-default); color: var(--badge-text-neutral); font: var(--typography-text-xs-semibold-font) } .property-card-md .card-header .card-labels div .icon { width: 12px; height: 12px } .property-card-md .card-body { padding: var(--size-3) } .property-card-md .card-body .card-body-top .card-body-top-one { display: flex; justify-content: space-between; align-items: center } .property-card-md .card-body .card-body-top .card-body-top-one .card-price { color: var(--colours-neutral-10); font: var(--typography-text-xl-bold-font) } .property-card-md .card-body .card-body-top .card-body-top-one .card-fav-btn { background: transparent; border: none; cursor: pointer } .property-card-md .card-body .card-body-top .card-body-top-two .card-description { font: var(--typography-text-xs-medium-font) } .property-card-md .card-body .card-body-bot .card-description { font: var(--typography-text-xs-medium-font) } .coverflow-swiper { position: relative; width: 100%; height: 320px; z-index: 10 } .coverflow-swiper .swiper-wrapper .swiper-slide { width: 100%; height: 100%; background: var(--colours-secondary-7); background-position: center; background-size: cover } .coverflow-swiper .swiper-wrapper .swiper-slide img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center } .coverflow-swiper .swiper-button-prev::after, .coverflow-swiper .swiper-button-next::after { display: none } .coverflow-swiper .swiper-button-prev, .coverflow-swiper .swiper-button-next { width: var(--size-5); height: var(--size-10); display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.2) } .coverflow-swiper .swiper-button-prev .icon, .coverflow-swiper .swiper-button-next .icon { width: var(--size-3); height: var(--size-6) } .coverflow-swiper .swiper-button-prev { left: 0 } .coverflow-swiper .swiper-button-next { right: 0 } .coverflow-thumbnails-swiper { position: relative; width: 328px; height: 64px; margin: 0 auto; margin-top: calc(0px - var(--size-2)); overflow: hidden; z-index: 20 } .coverflow-thumbnails-swiper .first-slide-overlay, .coverflow-thumbnails-swiper .last-slide-overlay { position: absolute; top: 0; left: 0; width: 82px; height: 64px; z-index: 2; pointer-events: none } .coverflow-thumbnails-swiper .last-slide-overlay { left: unset; right: 0 } .coverflow-thumbnails-swiper .thumbnail-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); color: var(--colours-base-white) } .coverflow-thumbnails-swiper .swiper-wrapper .swiper-slide { background: var(--colours-base-black) } .coverflow-thumbnails-swiper .swiper-wrapper .swiper-slide img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; opacity: 0.4 } .coverflow-thumbnails-swiper .swiper-wrapper .swiper-slide-thumb-active img { opacity: 1 } .video-container { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden } .video-container .iframe-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .video-container .iframe-wrapper iframe { width: 100%; height: 100%; border: none } .subscribe-to-newsletter { position: relative; width: 100%; padding-left: var(--size-2); padding-right: var(--size-2); background: var(--colours-base-background-1) } .subscribe-to-newsletter img { position: absolute; top: 0; left: 0; width: 100%; height: 471px; display: block; object-fit: cover; object-position: center center; z-index: 20; mix-blend-mode: Multiply } .subscribe-to-newsletter .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 471px; background: var(--colours-secondary-7); z-index: 10 } .subscribe-to-newsletter #subscribe_to_newsletter_form { position: relative; z-index: 30 } .subscribe-to-newsletter #subscribe_to_newsletter_form .fefform { padding: var(--size-5) var(--size-3); display: flex; flex-direction: column; gap: var(--size-4) } .subscribe-to-newsletter #subscribe_to_newsletter_form .fefform section { margin-bottom: var(--size-4) } .subscribe-to-newsletter #subscribe_to_newsletter_form .fefform .fefform-extras { gap: var(--size-3) } div:has(.grecaptcha-badge) { display: none } @media screen and (min-width: 1024px) { .container { padding: var(--size-10) 0 } .mobile-logo { display: none } .desktop-logo { display: block } .nested-tab-heading { display: block } .nested-tab-prev-btn, .nested-tab-next-btn { display: none } .modal-container .modal { max-width: 940px } .modal-container .modal .modal-header { padding: var(--size-3); display: flex; align-items: center; justify-content: flex-end } .modal-container .modal .modal-header .close-button { padding: var(--size-2) } .modal-container .modal .modal-content { padding: var(--size-3); padding-top: 0; max-height: 800px } .pagination { grid-column: 1 / span 12; padding: var(--size-4) 0 } .property-sm-card { max-width: 304px } .coverflow-swiper { height: 774px } .coverflow-thumbnails-swiper { display: none } .subscribe-to-newsletter { padding-left: 0; padding-right: 0 } .subscribe-to-newsletter #subscribe_to_newsletter_form { max-width: 1088px; margin: 0 auto } .subscribe-to-newsletter #subscribe_to_newsletter_form .fefform { padding: var(--size-10); display: flex; flex-direction: row; justify-content: space-between } .subscribe-to-newsletter #subscribe_to_newsletter_form .fefform .form-top { width: 336px } .subscribe-to-newsletter #subscribe_to_newsletter_form .fefform form { width: 560px } .subscribe-to-newsletter #subscribe_to_newsletter_form .fefform form section fieldset { grid-template-columns: repeat(2, 1fr) } .subscribe-to-newsletter #subscribe_to_newsletter_form .fefform form .fefform-extras { width: 100%; flex-wrap: wrap; flex-direction: row; justify-content: space-between; gap: var(--size-2) } .subscribe-to-newsletter #subscribe_to_newsletter_form .fefform form .fefform-extras .policy { order: 1; width: 352px; margin: 0 } .subscribe-to-newsletter #subscribe_to_newsletter_form .fefform form .fefform-extras .captcha-policy { order: 3; width: 100% } .subscribe-to-newsletter #subscribe_to_newsletter_form .fefform form .fefform-extras .button-group { order: 2; width: 116px } } @media screen and (min-width: 1366px) { .modal-container .modal { max-width: 1200px } .modal-container .modal .modal-header { padding: var(--size-3); display: flex; align-items: center; justify-content: flex-end } .modal-container .modal .modal-header .close-button { padding: var(--size-2) } .modal-container .modal .modal-content { padding: var(--size-3); padding-top: 0; max-height: 800px } } .loading, .loader { position: relative; display: grid !important; grid-template-rows: 1fr !important; grid-template-columns: 100% !important; grid-template-areas: "loading" !important } .loading>*, .loader>* { visibility: hidden; grid-area: loading !important } .loading:after, .loader:after { content: ""; max-width: 64px; height: 50%; max-height: 64px; aspect-ratio: 1 / 1; z-index: 10; transform-origin: 50%; position: absolute; box-sizing: border-box; border: 0.25ch solid var(--loader-color); border-radius: 50%; border-top-color: transparent; animation: pd-loader-spin 1s infinite linear; grid-area: loading; align-self: center; justify-self: center } .loading:before, .loader:before { content: ""; background: inherit; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 9 } @keyframes pd-loader-spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } .inline-image { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--spacing-button-spacing-sm-gap) } .inline-image .position-full { width: 100% } .inline-image .position-left { float: left } .inline-image .position-right { float: right } .inline-image figcaption { text-align: center } blockquote { background-color: var(--colours-neutral-1); border-left: 4px solid var(--colours-primary-7); padding: var(--size-2) } @media print { body { width: 21cm; height: 29.7cm } h1 { padding: 0 !important } nav, .listing-results-search, .listing-results-buttons, .listing-results-favourites-action-card, .menu-right, .pagination, .footer { display: none !important } .listing-results .listing-results-content { grid-template-areas: "breadcrumbs" "title" "listings" } .listing-results .listing-results-content .listing-results-cards { grid-template-columns: repeat(auto-fill, minmax(304px, 1fr)) !important; border: 4px solid pink; page-break-before: avoid } .listing-results .listing-results-content .listing-results-cards .property-sm-card:nth-child(1) { page-break-before: avoid } .listing-results .listing-results-content .listing-results-cards .property-sm-card:nth-child(4n + 4) { border: 4px solid red; page-break-after: always } } .FormErrors__Overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; background: rgba(30, 30, 30, 0.5); display: flex; vertical-align: center; justify-content: center } .FormErrors__Content { max-width: 940px; max-height: 80vh; margin: auto; overflow: auto; background: var(--colours-base-background); box-shadow: var(--shadows-xl) } .FormErrors__Content .pd_modal_title { position: sticky; top: 0; padding-top: var(--size-4); padding-left: var(--size-4); padding-right: var(--size-4); background: inherit } .FormErrors__Content .pd_modal_content { padding: var(--size-4); font: var(--typography-text-sm-medium-font) } .FormErrors__Content .pd_modal_footer { position: sticky; bottom: 0; padding-bottom: var(--size-4); padding-left: var(--size-4); padding-right: var(--size-4); display: flex; justify-content: flex-end; background: inherit } .FormErrors__Content .pd_modal_footer button { width: fit-content; height: var(--button-size-lg); padding: var(--spacing-button-spacing-lg-padding); background: var(--buttons-primary-background); color: var(--buttons-primary-color); border: var(--buttons-primary-border); border-radius: var(--border-rounded-none); cursor: pointer } .FormErrors__Content .pd_modal_footer button:hover { background: var(--buttons-primary-background-hover); color: var(--buttons-primary-color-hover); border: var(--buttons-primary-border-hover) } .FormErrors__Content .pd_modal_footer button:disabled { background: var(--buttons-primary-background-disabled); color: var(--buttons-primary-color-disabled); border: var(--buttons-primary-border-disabled) } .pd-consent-backdrop { --consent-background: var(--colours-base-background); --consent-text: var(--colours-neutral-8); --consent-button-background: var(--buttons-primary-background); --consent-button-text: var(--buttons-primary-color); overflow: auto } .pd-consent-backdrop p { margin-top: unset } .pd-consent-backdrop h5 { margin-bottom: var(--size-2) } .pd-consent-backdrop form .fefform-extras .button-group button { width: fit-content; height: var(--button-size-lg); padding: var(--spacing-button-spacing-lg-padding); border: 0 none; border-radius: var(--border-rounded-none) } .pd-consent-backdrop form .fefform-extras .button-group button.primary { background: var(--consent-button-background); color: var(--consent-button-text) } .pd-consent-backdrop form .fefform-extras .button-group button.primary:hover { background: var(--consent-button-background); color: var(--consent-button-text) } .pd-consent-backdrop form .fefform-extras .button-group button.primary:disabled { background: var(--consent-button-background); color: var(--consent-button-text) } .pd-consent-backdrop form .fefform-extras .button-group button.white.white { background: none; color: var(--consent-button-background); border: 0 none } .pd-consent-backdrop form .fefform-extras .button-group button.white.white:hover { background: none; color: var(--consent-button-background); border: 0 none } .pd-consent-backdrop form .fefform-extras .button-group button.white.white:disabled { background: none; color: var(--colours-neutral-4); border: 0 none } .pd-consent-backdrop .checkcontainer { display: flex; flex-direction: column; position: relative; width: 16px; height: 16px; align-items: center; cursor: pointer; margin: 0; border: 1px solid #E6E6ED; background: #ffffff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; justify-content: center } .pd-consent-backdrop .checkcontainer.input-group-suffix { flex: 1 1 auto } .pd-consent-backdrop .checkcontainer.radio { width: 24px; height: 24px; border-radius: 100% } .pd-consent-backdrop .checkcontainer input { position: absolute; left: 0; opacity: 0; cursor: pointer } .pd-consent-backdrop .checkcontainer .checkmark { position: relative; display: flex; justify-content: center; align-items: center; width: 16px; height: 16px; transition: all 300ms ease-in-out } .pd-consent-backdrop .toggle.checkcontainer { display: flex; --size: 24px; border-radius: 100px; width: calc((var(--size) * 2)); height: var(--size); background: var(--colours-neutral-3); border-color: var(--colours-neutral-3); transition: all .2s ease-in-out } .pd-consent-backdrop .toggle.checkcontainer input { position: absolute; width: 1px; height: 1px; opacity: 0 } .pd-consent-backdrop .toggle.checkcontainer .checkmark { width: calc(var(--size) * 1.5); height: calc(var(--size) * 1.5); border-radius: 100%; transition: all .2s ease-in-out } .pd-consent-backdrop .toggle.checkcontainer .checkmark svg { width: calc(var(--size) * 1.5); height: calc(var(--size) * 1.5); transition: all .2s ease-in-out } .pd-consent-backdrop .toggle.checkcontainer .off+.checkmark { --svg-icon: #ffffff; left: calc(var(--size) * 0.5 * -1) } .pd-consent-backdrop .toggle.checkcontainer .on+.checkmark { --svg-icon: var(--colours-primary-7); left: calc(var(--size) * 0.5) } .pd-consent-backdrop fieldset { border: 0 none; padding: 0; margin: var(--size-2) 0; display: flex; flex-direction: column; gap: var(--size-3) } .pd-consent-backdrop dl { display: flex; border: 1px solid var(--colours-neutral-2); flex-direction: column; box-shadow: var(--shadows-xl); padding: var(--size-3); margin: 0 } .pd-consent-backdrop dl dt { display: flex; align-items: center; justify-content: space-between; margin: 0 } .pd-consent-backdrop dl dt span { color: var(--colours-primary-7) } .pd-consent-backdrop dl dd { display: block; margin: 0; transition: all .25s ease-in-out } .pd-consent-backdrop dl dd p { margin-top: var(--size-3) } .pd-consent-backdrop .pd-consent-container { background: var(--consent-background); color: var(--consent-text); box-shadow: var(--shadows-xl); display: flex; flex-direction: column; gap: var(--size-2); align-items: center; padding: var(--size-2); z-index: 9999 } .pd-consent-backdrop .pd-consent-container[data-position="modal"] { max-width: 95vw; margin: auto } @media screen and (min-width: 640px) { .pd-consent-backdrop .pd-consent-container[data-position="modal"] { max-width: 50vw } } @media screen and (min-width: 1366px) { .pd-consent-backdrop .pd-consent-container[data-position="modal"] { max-width: 1312px } } .pd-consent-backdrop .pd-consent-container[data-position="modal"] form { flex-direction: column } .pd-consent-backdrop .pd-consent-container[data-position="modal"] .pd-consent-content { flex: 1 1 100%; max-width: unset; min-width: unset } .pd-consent-backdrop .pd-consent-container[data-position="top"] { position: fixed; top: 0; left: 0; right: 0 } .pd-consent-backdrop .pd-consent-container[data-position="bottom"] { position: fixed; bottom: 0; left: 0; right: 0 } .pd-consent-backdrop .pd-consent-container[data-position="bottom-left"] { position: fixed; bottom: var(--size-3); left: var(--size-3); max-width: 320px } .pd-consent-backdrop .pd-consent-container[data-position="bottom-right"] { position: fixed; bottom: var(--size-3); right: var(--size-3); max-width: 320px } .pd-consent-backdrop .pd-consent-container[data-position="top-left"] { position: fixed; top: var(--size-3); left: var(--size-3); max-width: 320px } .pd-consent-backdrop .pd-consent-container[data-position="top-right"] { position: fixed; top: var(--size-3); right: var(--size-3); max-width: 320px } .pd-consent-backdrop .pd-consent-container form { display: flex; flex-wrap: wrap; gap: var(--size-2); flex-direction: column } @media screen and (min-width: 1120px) { .pd-consent-backdrop .pd-consent-container form { flex-direction: row } } @media screen and (min-width: 1120px) { .pd-consent-backdrop .pd-consent-container .pd-consent-content { flex: 1 1 calc(100% - 220px); max-width: calc(100% - 220px); min-width: calc(320px - (2 * var(--size-2))) } } .pd-consent-backdrop .pd-consent-container .pd-consent-actions { flex: 0 0 fit-content; display: flex; align-items: center; justify-content: center } .pd-consent-backdrop .pd-consent-container .pd-consent-actions:has(button.white) .button-group { margin-left: auto } .pd-consent-backdrop .pd-consent-container .pd-consent-actions .button-group { display: flex; gap: var(--size-05) } .pd-consent-backdrop .pd-consent-container .pd-consent-actions .button-group button { color: var(--consent-button-text) !important } b { font-weight: 700 !important } strong { font-weight: 700 !important } em { font-style: italic !important } u { text-decoration: underline !important } .search-light .react-select__control { min-height: 88px } .search-light .field-locations { align-items: unset !important; padding: 0 8px !important } .search-light .field-locations .react-select__expanding-container { flex-wrap: wrap } .search-light .field-locations .react-select { display: block !important } .search-light .field-locations .react-select__menu { position: relative !important; top: unset !important; left: unset !important; transform: unset !important } .react-select__multi-value--is-hidden { display: none !important } .mandated-header { position: absolute; top: 0; left: 0; width: 100%; height: 60px; padding: 0 var(--size-3); padding-top: var(--size-4); display: flex; justify-content: space-between; align-items: center; background: transparent; z-index: 999999999 } .mandated-header.alt { position: relative; top: unset; bottom: unset; left: unset; right: unset; width: 100%; height: auto; padding: var(--size-3); background: var(--colours-base-black) } .mandated-header.alt .menu-icon .icon { stroke: var(--colours-base-white) } .mandated-header .header-left { width: 128px } .mandated-header .header-right { display: none } .mandated-header .menu-icon { width: var(--size-4); height: var(--size-4); background: none; border: none; cursor: pointer } .mandated-header .menu-icon .icon { width: 100%; height: 100% } .mandated-header .header-mobile-menu { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; padding: 20px; display: none; background: var(--colours-base-black); z-index: 10 } .mandated-header .header-mobile-menu .menu-header { padding-bottom: var(--size-4); width: 100%; display: flex; justify-content: space-between } .mandated-header .header-mobile-menu .menu-header .logo { width: 128px } .mandated-header .header-mobile-menu .menu-items { width: 100% } .mandated-header .header-mobile-menu .menu-items .menu-item { width: 100%; padding: var(--size-2) 0; border-bottom: 1px solid var(--colours-base-white) } .mandated-header .header-mobile-menu .menu-items .menu-item .menu-item-link { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center } .mandated-header .header-mobile-menu .menu-items .menu-item .menu-item-link .menu-item-text { width: 100%; height: 100%; color: var(--colours-base-white) } .mandated-header .header-mobile-menu .menu-items .has-submenu ul { display: none } .mandated-header .header-mobile-menu .menu-items .has-submenu ul .menu-item:last-child { border-bottom: none } @media screen and (min-width: 1024px) { .mandated-header { top: var(--size-8); width: 100%; height: var(--header-height); padding: 0 var(--size-2) } .mandated-header.alt { position: relative; top: unset; bottom: unset; left: unset; right: unset; width: 100%; height: 120px; background: var(--colours-base-black) } .mandated-header .header-content { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center } .mandated-header .header-left { width: 192px } .mandated-header .header-right { display: block } .mandated-header .header-right .menu-items { display: flex; align-items: center; gap: var(--size-1) } .mandated-header .header-right .menu-items .menu-item .menu-item-link .menu-item-text { font: var(--typography-text-xs-regular-font); color: var(--colours-base-white); text-transform: uppercase } .mandated-header .header-right .menu-items .menu-item .menu-item-link .icon { display: none } .mandated-header .header-right .menu-items #id_property-valuations_listitem .menu-item-link { width: fit-content; height: var(--size-5); padding: 0 var(--size-1); display: flex; justify-content: center; align-items: center; background: var(--colours-primary-7); transition: var(--transition-md) } .mandated-header .header-right .menu-items #id_property-valuations_listitem .menu-item-link .menu-item-text { color: var(--colours-secondary-7) } .mandated-header .header-right .menu-items #id_property-valuations_listitem:hover .menu-item-link { background: var(--colours-primary-9) } .mandated-header .header-right .menu-items .active .menu-item-link .menu-item-text { font: var(--typography-text-xs-semibold-font) } .mandated-header .header-right .has-submenu { position: relative } .mandated-header .header-right .has-submenu ul { position: absolute; top: 190%; left: 0; width: fit-content; margin-top: calc(0px - var(--size-3)); margin-bottom: 1.5rem; padding: 0.5rem; opacity: 0; visibility: hidden; list-style: none; transition: var(--transition-md); min-width: 0; border: none } .mandated-header .header-right .has-submenu ul .menu-item { height: var(--dropdown-links-size-default); padding: 0; display: flex; flex-direction: column; gap: var(--dropdown-links-spacing-default); background: var(--colours-primary-7); min-width: 0; border-bottom: 1px solid var(--colours-primary-9) } .mandated-header .header-right .has-submenu ul .menu-item .menu-item-link { width: 100%; height: 100%; padding: 0 var(--dropdown-links-spacing-default); display: flex; justify-content: space-between; align-items: center; gap: var(--size-5); white-space: nowrap; transition: var(--transition-md) } .mandated-header .header-right .has-submenu ul .menu-item .menu-item-link .menu-item-text { position: relative; display: block; color: var(--colours-base-white); font: var(--typography-text-xs-regular-font); white-space: nowrap } .mandated-header .header-right .has-submenu ul .menu-item .menu-item-link .menu-item-count { height: var(--badge-size-sm); padding: 0 var(--badge-spacing-sm); background: var(--badge-bg); color: var(--badge-text); font: var(--typography-text-xxs-bold-font); border-radius: var(--border-rounded-full) } .mandated-header .header-right .has-submenu ul .menu-item .menu-item-link:hover { background: var(--colours-primary-9) } .mandated-header .header-right .has-submenu ul .menu-item:last-child { border-bottom: 0px } .mandated-header .header-right .has-submenu:hover>ul { margin-top: 0; visibility: visible; opacity: 1; z-index: 1 } .mandated-header .menu-icon { display: none } } @media screen and (min-width: 1366px) { .mandated-header { padding: 0 } .mandated-header .header-content { max-width: unset; margin: unset; padding: 0 var(--size-7) } .mandated-header .header-right .menu-items { gap: var(--size-2) } .mandated-header .header-right .menu-items .menu-item .menu-item-link .menu-item-text { font: var(--typography-text-md-regular-font) } .mandated-header .header-right .menu-items .menu-item .menu-item-link .icon { display: none } .mandated-header .header-right .menu-items #id_property-valuations_listitem .menu-item-link { height: var(--size-7); padding: 0 var(--size-2) } .mandated-header .menu-icon { display: none } } .mandated-home { width: 100% } .mandated-home img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center } .mandated-home .mandated-btn { width: fit-content; height: var(--size-7); padding: 0 var(--size-3); display: flex; justify-content: center; align-items: center; background: var(--colours-primary-7); color: var(--colours-secondary-7); font: var(--typography-text-md-medium-font); text-transform: uppercase; transition: var(--transition-md) } .mandated-home .mandated-btn:hover { background: var(--colours-primary-9) } .mandated-home .mandated-link { width: fit-content; display: flex; align-items: center; gap: var(--size-2) } .mandated-home .mandated-link span { color: var(--colours-secondary-7); font: var(--typography-text-md-bold-font) } .mandated-home .home-hero { position: relative; width: 100%; height: 100vh; min-height: 700px } .mandated-home .home-hero .hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0 } .mandated-home .home-hero .hero-content { position: relative; width: 100%; height: 100%; padding: var(--size-4) var(--size-3); padding-top: 124px; display: flex; flex-direction: column; align-items: center; gap: var(--size-4); z-index: 10 } .mandated-home .home-hero .hero-content .content-top { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center } .mandated-home .home-hero .hero-content .content-top h2 { color: var(--colours-base-white); font-weight: 400; font-size: 28px; text-wrap: unset } .mandated-home .home-hero .hero-content .content-top h1 { color: var(--colours-base-white); font-size: var(--size-8); line-height: 100%; text-wrap: unset } .mandated-home .home-hero .hero-content .content-mid { width: 100%; display: flex; justify-content: center; align-items: center; gap: var(--size-1) } .mandated-home .home-hero .hero-content .content-mid a { width: var(--size-7); height: var(--size-7) } .mandated-home .home-hero .hero-content .content-mid a svg { width: var(--size-7); height: var(--size-7) } .mandated-home .home-hero .hero-content .content-bot { width: 100%; height: 214px; background: var(--colours-base-black); z-index: 20 } @media screen and (min-width: 767px) { .mandated-home .home-hero .hero-content .content-bot { min-height: 88px } } .mandated-home .home-hero .hero-content .content-bot .search-light { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; isolation: isolate; min-height: 88px; margin: auto; position: relative; z-index: 2; background: var(--colours-base-black); flex: none; flex-grow: 0 } @media screen and (min-width: 914px) { .mandated-home .home-hero .hero-content .content-bot .search-light { padding: 0 16px 0 32px; max-width: 1088px } } .mandated-home .home-hero .hero-content .content-bot .search-light .input-field { border: 1px solid var(--colours-neutral-3); height: 88px; max-height: 88px; flex: 1 0 0; min-width: 0; display: flex; align-items: center; padding: 8px 16px; gap: 8px 8px } .mandated-home .home-hero .hero-content .content-bot .search-light .input-field:nth-child(1) { max-width: 150px } @media screen and (min-width: 914px) { .mandated-home .home-hero .hero-content .content-bot .search-light .input-field:nth-child(1) .react-select__control { padding-left: 0 } } .mandated-home .home-hero .hero-content .content-bot .search-light .input-field:nth-child(3) { width: 330px } .mandated-home .home-hero .hero-content .content-bot .search-light .input-field:nth-child(3) .react-select__control { overflow: hidden; max-width: 100% } .mandated-home .home-hero .hero-content .content-bot .search-light .input-field:nth-child(5) { min-width: 100% } @media screen and (min-width: 767px) { .mandated-home .home-hero .hero-content .content-bot .search-light .input-field:nth-child(5) { min-width: 458px } } .mandated-home .home-hero .hero-content .content-bot .search-light .input-field.select-field { padding: 0; border: 0 none } .mandated-home .home-hero .hero-content .content-bot .search-light .input-field.select-field .react-select { min-width: 100% } .mandated-home .home-hero .hero-content .content-bot .search-light .field-locations { height: var(--size-7); min-height: var(--size-7) } .mandated-home .home-hero .hero-content .content-bot .search-light .field-locations .react-select .react-select__control { height: var(--size-7); min-height: var(--size-7) } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select { display: flex; flex: 1 0 0; max-height: 88px; min-width: 0; position: relative } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__expanding-container { flex: 0 0 100%; align-items: center; display: flex; padding: 0; gap: 4px 4px; line-height: 1; -webkit-overflow-scrolling: touch; position: relative; overflow: hidden; box-sizing: border-box; border: none } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__control { align-items: center; align-self: flex-start; background: var(--colours-base-black); border-radius: 0px; border-style: solid; border: none; box-shadow: none; box-sizing: border-box; cursor: default; display: flex; flex: 1 1 0; gap: 8px 8px; justify-content: space-between; min-height: 88px; outline: 0 !important; padding: 0 16px 0 32px; position: relative } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__control>svg { width: 24px; height: 24px; stroke: var(--colours-primary-7) } .mandated-home .home-hero .hero-content .content-bot .search-light .spacer { width: 1px; height: 32px; background: var(--colours-neutral-1); flex: none; display: none; flex-grow: 0; z-index: 1 } @media screen and (min-width: 320px) { .mandated-home .home-hero .hero-content .content-bot .search-light .spacer:nth-child(2) { display: block } } @media screen and (min-width: 606px) { .mandated-home .home-hero .hero-content .content-bot .search-light .spacer:nth-child(4) { display: block } } .mandated-home .home-hero .hero-content .content-bot .search-light .search-button { margin: 0px var(--size-3) var(--size-3) var(--size-3); flex: 1 0 0; height: 56px; display: flex; justify-self: flex-end; align-items: center; justify-content: center; text-transform: none; transition: all 0.2s ease-in; border: 0 none; flex-direction: row; cursor: pointer; transition: all 300ms ease-in-out; padding: 8px 17px; background: var(--colours-primary-7); color: var(--colours-base-white); gap: 10px } .mandated-home .home-hero .hero-content .content-bot .search-light .search-button svg { min-width: 16px; min-height: 16px; fill: var(--colours-base-white); display: none; transition: none } @media screen and (min-width: 914px) { .mandated-home .home-hero .hero-content .content-bot .search-light .search-button { margin: 0; flex: 0 0 0 } .mandated-home .home-hero .hero-content .content-bot .search-light .search-button svg { display: block } } .mandated-home .home-hero .hero-content .content-bot .search-light .search-button.disabled { background: var(--colours-neutral-5) } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__indicators { align-items: center; align-self: stretch; display: flex; flex-shrink: 0; box-sizing: border-box; padding: 0; transition: color 150ms ease 0s } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__option { font-style: normal; font-weight: 600; font-size: 14px; line-height: 160%; color: var(--colours-neutral-10, #0f1729); cursor: default; display: block; padding: 7.5px 15px; width: 100%; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__option:hover { background: var(--colours-neutral-1, #f8fafc); color: var(--colours-neutral-10, #0f1729) } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__option .search-option { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px; gap: 8px; height: 48px; flex: 1; order: 0; align-self: stretch; flex-grow: 0 } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__option .search-option__label { font-style: normal; font-weight: 400; font-size: 14px; line-height: 160%; display: flex; align-items: center; color: var(--colours-neutral-10, #0f1729); flex: none; order: 1; flex-grow: 0; white-space: pre } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__option .search-option__label b { font-weight: 600 } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__option .search-option__type { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0px 8px; flex: none; order: 1; flex-grow: 0; font-style: normal; font-weight: 600; font-size: 12px; line-height: 150%; color: var(--colours-neutral-5) } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__option--is-focused { background: var(--colours-neutral-1, #f8fafc); color: var(--colours-neutral-10, #0f1729) } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__single-value { font-style: normal; font-weight: 600; font-size: 16px; line-height: 150%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: var(--colours-neutral-1); flex: none; order: 0; flex-grow: 0; max-width: 100%; min-width: 0 } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__multi-value { box-sizing: border-box; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0 12px 0 16px; height: 32px; gap: 4px; background: var(--colours-base-background, #fff); color: var(--colours-neutral-1); border: 1px solid var(--colours-neutral-3); border-radius: 999px; flex: none; order: 0; flex-grow: 0 } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__multi-value .react-select__multi-value__label { padding: 0; color: var(--colours-neutral-10, #0f1729) } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__multi-value .react-select__multi-value__remove svg { stroke: var(--colours-neutral-5) } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__indicator { width: 16px; height: 16px; padding: 0; flex: none; order: 1; flex-grow: 0 } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__indicator svg { stroke: var(--colours-primary-7); fill: none; width: 16px; height: 16px } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__clear-indicator svg { stroke: var(--colours-neutral-5) } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__value-container--is-multi { flex-wrap: nowrap; flex: 0 0 1 } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__value-container--is-multi .react-select__input-container { flex: 1 1 0 } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__control--is-focused .react-select__value-container--is-multi { flex-wrap: wrap } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__placeholder { white-space: nowrap; align-items: center; box-sizing: border-box; display: flex; position: relative; top: unset; color: var(--colours-neutral-1); font: var(--typography-text-sm-medium-font); transform: unset; margin: unset; order: 999 } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__value-container { align-items: center; display: flex; flex: 1; padding: 6px 0; gap: 4px 4px; line-height: 1; -webkit-overflow-scrolling: touch; position: relative; overflow: hidden; box-sizing: border-box; border: none } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__menu { border-radius: 0px; box-shadow: 1px 1px 4px -2px rgba(0, 0, 0, 0.2); border: 1px solid #d6d6d6; overflow: hidden; top: 100%; left: 50%; transform: translateX(-50%); background-color: #ffffff; border-radius: 4px; margin-bottom: 8px; margin-top: 0; position: absolute; width: 100%; z-index: 1000; box-sizing: border-box } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__menu-list { max-height: 300px; overflow-y: auto; padding-bottom: 4px; padding-top: 4px; position: relative; -webkit-overflow-scrolling: touch; box-sizing: border-box } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__loading-indicator { display: flex; align-items: center; justify-content: space-between } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__loading-indicator>span { width: 4px; height: 4px; margin: 0 } .mandated-home .home-hero .hero-content .content-bot .search-light .react-select__menu-notice--loading { font-style: normal; font-size: 14px; line-height: 160%; color: var(--colours-neutral-10, #0f1729); cursor: default; display: block; padding: 7.5px 15px; width: 100%; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box } .mandated-home .home-hero .hero-content .content-bot .search-light .field-buy_rent, .mandated-home .home-hero .hero-content .content-bot .search-light .field-category { height: var(--size-8); min-height: var(--size-8) } .mandated-home .home-hero .hero-content .content-bot .search-light .field-buy_rent .react-select .react-select__control, .mandated-home .home-hero .hero-content .content-bot .search-light .field-category .react-select .react-select__control { height: var(--size-8); min-height: var(--size-8) } @media screen and (min-width: 1024px) { .mandated-home .home-hero { min-height: unset } .mandated-home .home-hero .hero-content { padding: var(--size-8) 0; justify-content: flex-end; gap: var(--size-12) } .mandated-home .home-hero .hero-content .content-top { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center } .mandated-home .home-hero .hero-content .content-top h2 { font-size: 38px } .mandated-home .home-hero .hero-content .content-top h1 { font-size: var(--size-10) } .mandated-home .home-hero .hero-content .content-top h1 br:nth-child(1) { display: none } .mandated-home .home-hero .hero-content .content-mid { position: absolute; top: 50%; right: var(--size-7); transform: translateY(-50%); width: fit-content; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--size-1) } .mandated-home .home-hero .hero-content .content-mid a { width: var(--size-7); height: var(--size-7) } .mandated-home .home-hero .hero-content .content-mid a svg { width: var(--size-7); height: var(--size-7) } .mandated-home .home-hero .hero-content .content-bot { max-width: 940px; height: 88px; min-height: 88px; margin: 0 auto } } @media screen and (min-width: 1366px) { .mandated-home .home-hero .hero-content .content-bot { max-width: 1080px } } .mandated-home .home-intro { position: relative; width: 100%; z-index: 1; } .mandated-home .home-intro .intro-bg { position: absolute; top: 148px; left: 0; width: 100%; z-index: 0 } .mandated-home .home-intro .intro-content { position: relative; width: 100%; padding: var(--size-8) var(--size-3); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: var(--size-4); z-index: 10 } .mandated-home .home-intro .intro-content h2 { font: var(--typography-heading-h1-bold-font) } .mandated-home .home-intro .intro-content p { margin: 0 } .mandated-home .home-intro .intro-content a { width: fit-content; height: var(--size-7); padding: 0 var(--size-3); display: flex; justify-content: center; align-items: center; background: var(--colours-primary-7); color: var(--colours-secondary-7); font: var(--typography-text-md-medium-font); text-transform: uppercase; transition: var(--transition-md) } .mandated-home .home-intro .intro-content a:hover { background: var(--colours-primary-9) } @media screen and (min-width: 640px) { .mandated-home .home-intro { position: relative; width: 100% } .mandated-home .home-intro .intro-bg { top: unset; bottom: 0; width: 60% } } @media screen and (min-width: 1024px) { .mandated-home .home-intro { height: 750px } .mandated-home .home-intro .intro-bg { top: 50%; bottom: unset; transform: translateY(-50%); width: 496px; height: 503px } .mandated-home .home-intro .intro-content { width: 100%; max-width: 780px; height: 100%; margin: 0 auto; padding: 0 } } .mandated-home .home-featured { width: 100%; padding: var(--size-8) var(--size-3); display: flex; flex-direction: column; gap: var(--size-5); background: var(--colours-secondary-7) } .mandated-home .home-featured .featured-heading { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-featured .featured-heading .heading-top { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--size-3) } .mandated-home .home-featured .featured-heading .heading-top h2 { color: var(--colours-base-white); white-space: nowrap; text-wrap: unset } .mandated-home .home-featured .featured-heading .heading-top .line { flex: 1; width: 100%; height: 1px; background: var(--colours-base-white) } .mandated-home .home-featured .featured-heading .heading-bot { width: 100%; display: flex; justify-content: space-between; align-items: center } .mandated-home .home-featured .featured-heading .heading-bot button { width: var(--size-6); height: var(--size-6); display: flex; justify-content: center; align-items: center; background: transparent; border: var(--border-width-none); cursor: pointer } .mandated-home .home-featured .featured-heading .heading-bot button .icon { width: 100%; height: 100% } .mandated-home .home-featured .featured-content { width: 100% } .mandated-home .home-featured .featured-content .featured-card { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-featured .featured-content .featured-card .card-top { width: 100%; height: 240px } .mandated-home .home-featured .featured-content .featured-card .card-bot { width: 100%; display: flex; flex-direction: column; gap: var(--size-4) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-price { width: 100% } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-price span { color: var(--colours-base-white); font: var(--typography-heading-h1-bold-font) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-heading-link { width: 100%; display: flex; flex-direction: column; gap: var(--size-2) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-heading-link .card-heading { color: var(--colours-base-white); font: var(--typography-text-lg-regular-font) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-heading-link .card-link { width: fit-content; display: flex; align-items: center; gap: var(--size-2); cursor: pointer } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-heading-link .card-link span { font: var(--typography-text-md-bold-font) } @media screen and (min-width: 1024px) { .mandated-home .home-featured { padding: 112px 0 } .mandated-home .home-featured .featured-heading { max-width: 940px; margin: 0 auto; padding: 0; flex-direction: row } .mandated-home .home-featured .featured-heading .heading-top { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--size-3) } .mandated-home .home-featured .featured-heading .heading-top h2 { color: var(--colours-base-white); white-space: nowrap; text-wrap: unset } .mandated-home .home-featured .featured-heading .heading-top .line { flex: 1; width: 100%; height: 1px; background: var(--colours-base-white) } .mandated-home .home-featured .featured-heading .heading-bot { width: 120px; display: flex; justify-content: space-between; align-items: center } .mandated-home .home-featured .featured-heading .heading-bot button { width: var(--size-6); height: var(--size-6); display: flex; justify-content: center; align-items: center; background: transparent; border: var(--border-width-none); cursor: pointer } .mandated-home .home-featured .featured-heading .heading-bot button .icon { width: 100%; height: 100% } .mandated-home .home-featured .featured-content { max-width: 980px; margin-left: auto } .mandated-home .home-featured .featured-content .featured-card { width: 100%; height: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-featured .featured-content .featured-card .card-top { width: 100%; height: 345px } .mandated-home .home-featured .featured-content .featured-card .card-bot { flex-direction: row; gap: var(--size-4) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-price { width: 200px } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-price span { color: var(--colours-base-white); font: var(--typography-heading-h3-bold-font) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-heading-link { width: 100%; display: flex; flex-direction: column; gap: var(--size-2) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-heading-link .card-heading { color: var(--colours-base-white); font: var(--typography-text-lg-regular-font) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-heading-link .card-link { width: fit-content; display: flex; align-items: center; gap: var(--size-2) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-heading-link .card-link span { font: var(--typography-text-md-bold-font) } .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide { width: 460px } .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide .featured-card { width: 460px } .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide .featured-card .card-top { height: 345px } .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide-active { width: 600px } .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide-active .featured-card { width: 600px } .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide-active .featured-card .card-top { height: 450px } } @media screen and (min-width: 1366px) { .mandated-home .home-featured .featured-heading { max-width: 1312px } .mandated-home .home-featured .featured-heading .heading-top { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--size-3) } .mandated-home .home-featured .featured-heading .heading-top h2 { color: var(--colours-base-white); white-space: nowrap; text-wrap: unset } .mandated-home .home-featured .featured-heading .heading-top .line { flex: 1; width: 100%; height: 1px; background: var(--colours-base-white) } .mandated-home .home-featured .featured-heading .heading-bot { width: 120px; display: flex; justify-content: space-between; align-items: center } .mandated-home .home-featured .featured-heading .heading-bot button { width: var(--size-6); height: var(--size-6); display: flex; justify-content: center; align-items: center; background: transparent; border: var(--border-width-none); cursor: pointer } .mandated-home .home-featured .featured-heading .heading-bot button .icon { width: 100%; height: 100% } .mandated-home .home-featured .featured-content { max-width: 1600px; margin-left: auto } .mandated-home .home-featured .featured-content .featured-card { width: 100%; height: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-featured .featured-content .featured-card .card-top { width: 100%; height: 345px } .mandated-home .home-featured .featured-content .featured-card .card-bot { flex-direction: row; gap: var(--size-4) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-price { width: 200px } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-price span { color: var(--colours-base-white); font: var(--typography-heading-h3-bold-font) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-heading-link { width: 100%; display: flex; flex-direction: column; gap: var(--size-2) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-heading-link .card-heading { color: var(--colours-base-white); font: var(--typography-text-lg-regular-font) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-heading-link .card-link { width: fit-content; display: flex; align-items: center; gap: var(--size-2) } .mandated-home .home-featured .featured-content .featured-card .card-bot .card-heading-link .card-link span { font: var(--typography-text-md-bold-font) } .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide { width: 460px } .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide .featured-card { width: 460px } .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide .featured-card .card-top { height: 345px } .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide-active, .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide-prev { width: 600px } .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide-active .featured-card, .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide-prev .featured-card { width: 600px } .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide-active .featured-card .card-top, .mandated-home .home-featured .featured-swiper .swiper-wrapper .swiper-slide-prev .featured-card .card-top { height: 450px } } .mandated-home .home-agent { width: 100% } .mandated-home .home-agent .agent-top { width: 100%; height: 375px } .mandated-home .home-agent .agent-bot { width: 100% } .mandated-home .home-agent .agent-bot .bot-inner { width: 100%; padding: var(--size-8) var(--size-3); display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-agent .agent-bot .bot-inner .bot-heading { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--size-3) } .mandated-home .home-agent .agent-bot .bot-inner .bot-heading h2 { white-space: nowrap; text-wrap: unset } .mandated-home .home-agent .agent-bot .bot-inner .bot-heading .line { flex: 1; width: 100%; height: 1px; background: var(--colours-neutral-4) } .mandated-home .home-agent .agent-bot .bot-inner .bot-name-designation { width: 100%; display: flex; flex-direction: column } .mandated-home .home-agent .agent-bot .bot-inner .bot-name-designation .bot-name { font: var(--typography-text-xxl-bold-font) } .mandated-home .home-agent .agent-bot .bot-inner .bot-name-designation .bot-designation { font: var(--typography-text-md-bold-font) } .mandated-home .home-agent .agent-bot .bot-inner .bot-links { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } @media screen and (min-width: 1024px) { .mandated-home .home-agent { display: flex } .mandated-home .home-agent .agent-top { width: 50%; height: 500px } .mandated-home .home-agent .agent-bot { width: 50%; height: 500px } } @media screen and (min-width: 1366px) { .mandated-home .home-agent { max-width: 1600px; margin: 0 auto; padding-top: 112px } .mandated-home .home-agent .agent-top { width: 50%; height: auto; aspect-ratio: 1/1 } .mandated-home .home-agent .agent-bot { width: 50%; height: auto; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center } .mandated-home .home-agent .agent-bot .bot-inner { width: 512px; padding: 0 } } .mandated-home .home-testimonials { width: 100% } .mandated-home .home-testimonials .testimonials-top { width: 100%; height: 375px } .mandated-home .home-testimonials .testimonials-bot { width: 100% } .mandated-home .home-testimonials .testimonials-bot .bot-inner { width: 100%; padding: var(--size-8) var(--size-4); display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-heading { position: relative; width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-heading .heading-bg { position: absolute; top: calc(0px - var(--size-4)); left: 0; width: 126px; height: 84px; z-index: 0 } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-heading .heading-bg .icon { width: 100%; height: 100% } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-heading .heading-top { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--size-3); z-index: 10 } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-heading .heading-top h2 { white-space: nowrap; text-wrap: unset } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-heading .heading-top .line { flex: 1; width: 100%; height: 1px; background: var(--colours-neutral-4) } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-heading .heading-bot { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; z-index: 10 } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-heading .heading-bot button { width: var(--size-6); height: var(--size-6); display: flex; justify-content: center; align-items: center; background: transparent; border: var(--border-width-none); cursor: pointer } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-heading .heading-bot button .icon { width: 100%; height: 100%; fill: none } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-content { width: 100% } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-content .testimonials-card { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-content .testimonials-card .card-top { width: 100% } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-content .testimonials-card .card-bot { width: 100%; display: flex; flex-direction: column } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-content .testimonials-card .card-bot .card-name { font: var(--typography-text-xxl-bold-font); font-family: "Lato", sans-serif } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-content .testimonials-card .card-bot .card-designation { font: var(--typography-text-md-bold-font) } @media screen and (min-width: 1024px) { .mandated-home .home-testimonials { display: flex } .mandated-home .home-testimonials .testimonials-top { order: 2; width: 50%; height: 500px } .mandated-home .home-testimonials .testimonials-bot { order: 1; width: 50%; height: 500px } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-heading { flex-direction: row } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-heading .heading-bot { width: 120px; gap: var(--size-3) } } @media screen and (min-width: 1366px) { .mandated-home .home-testimonials { max-width: 1600px; margin: 0 auto; padding-bottom: 112px } .mandated-home .home-testimonials .testimonials-top { order: 2; width: 50%; height: auto; aspect-ratio: 1/1 } .mandated-home .home-testimonials .testimonials-bot { order: 1; width: 50%; height: auto; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center } .mandated-home .home-testimonials .testimonials-bot .bot-inner { width: 512px; padding: 0 } .mandated-home .home-testimonials .testimonials-bot .bot-inner .bot-heading .heading-bg { top: -120px; left: -80px; width: 280px; height: 187px } } .mandated-home .home-assessments { width: 100% } .mandated-home .home-assessments .assessments-content { position: relative; width: 100%; padding: var(--size-8) var(--size-4); display: flex; flex-direction: column; gap: var(--size-4); background-image: url("/mandated/home/assessment-img.png"); background-repeat: no-repeat; background-position: center center; background-size: cover } .mandated-home .home-assessments .assessments-content .content-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 0 } .mandated-home .home-assessments .assessments-content .main-content { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--size-3); text-align: center; z-index: 10 } .mandated-home .home-assessments .assessments-content .main-content h2 { color: var(--colours-base-white); text-wrap: unset } .mandated-home .home-assessments .assessments-content .main-content span { color: var(--colours-base-white); font: var(--typography-text-md-regular-font) } @media screen and (min-width: 1024px) { .mandated-home .home-assessments .assessments-content { width: 100%; height: 600px; gap: var(--size-8); background-position: 50% 20% } .mandated-home .home-assessments .assessments-content .content-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 0 } .mandated-home .home-assessments .assessments-content .main-content { max-width: 780px; height: 100%; margin: 0 auto; gap: var(--size-4) } .mandated-home .home-assessments .assessments-content .main-content h2 br { display: none } } @media screen and (min-width: 1366px) { .mandated-home .home-assessments .assessments-content { gap: var(--size-8) } .mandated-home .home-assessments .assessments-content .content-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 0; background-position: top } .mandated-home .home-assessments .assessments-content .content-top { max-width: 780px; margin: 0 auto; gap: var(--size-4) } .mandated-home .home-assessments .assessments-content .content-top h2 br { display: none } .mandated-home .home-assessments .assessments-content .content-bot { max-width: 1088px; height: 648px; margin: 0 auto } } .mandated-home .home-news { width: 100%; padding: var(--size-8) var(--size-3); display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-news .news-heading { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-news .news-heading .heading-top { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--size-3) } .mandated-home .home-news .news-heading .heading-top h2 { color: var(--colours-secondary-7); white-space: nowrap; text-wrap: unset } .mandated-home .home-news .news-heading .heading-top .line { flex: 1; width: 100%; height: 1px; background: var(--colours-secondary-7) } .mandated-home .home-news .news-heading .heading-bot { width: 100%; display: flex; justify-content: space-between; align-items: center } .mandated-home .home-news .news-heading .heading-bot button { width: var(--size-6); height: var(--size-6); display: flex; justify-content: center; align-items: center; background: transparent; border: var(--border-width-none); cursor: pointer } .mandated-home .home-news .news-heading .heading-bot button .icon { width: 100%; height: 100%; fill: none } .mandated-home .home-news .news-content { width: 100% } .mandated-home .home-news .news-content .news-card { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-news .news-content .news-card .card-top { width: 100%; height: 235px } .mandated-home .home-news .news-content .news-card .card-bot { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-news .news-content .news-card .card-bot h5 { font-size: var(--size-3); text-wrap: unset } .mandated-home .home-news .news-content .news-card .card-bot span { font: var(--typography-text-md-regular-font) } @media screen and (min-width: 1024px) { .mandated-home .home-news { max-width: 940px; margin: 0 auto; padding: 112px 0; gap: var(--size-6) } .mandated-home .home-news .news-heading .heading-bot { display: none } .mandated-home .home-news .news-content { width: 100% } .mandated-home .home-news .news-content .news-card { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-news .news-content .news-card .card-top { width: 100%; height: 235px } .mandated-home .home-news .news-content .news-card .card-bot { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-news .news-content .news-card .card-bot h5 { font-size: var(--size-3); text-wrap: unset } .mandated-home .home-news .news-content .news-card .card-bot span { font: var(--typography-text-md-regular-font) } .mandated-home .home-news .news-swiper .swiper-wrapper { gap: var(--size-3) } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide { width: 240px } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide .news-card { width: 240px } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide .news-card .card-bot span { display: none } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide .news-card .card-bot a span { display: block } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide:nth-child(1) { width: 400px } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide:nth-child(1) .news-card { width: 400px } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide:nth-child(1) .news-card .card-top { height: 350px } } @media screen and (min-width: 1366px) { .mandated-home .home-news { max-width: 1312px; padding: 112px 0 } .mandated-home .home-news .news-heading .heading-bot { display: none } .mandated-home .home-news .news-content { width: 100% } .mandated-home .home-news .news-content .news-card { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-news .news-content .news-card .card-top { width: 100%; height: 235px } .mandated-home .home-news .news-content .news-card .card-bot { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-news .news-content .news-card .card-bot h5 { font-size: var(--size-3); text-wrap: unset } .mandated-home .home-news .news-content .news-card .card-bot span { font: var(--typography-text-md-regular-font) } .mandated-home .home-news .news-swiper .swiper-wrapper { gap: var(--size-4) } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide { width: 296px } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide .news-card { width: 296px } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide:nth-child(1) { width: 624px; margin-right: var(--size-4) } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide:nth-child(1) .news-card { width: 624px } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide:nth-child(1) .news-card .card-top { height: 450px } .mandated-home .home-news .news-swiper .swiper-wrapper .swiper-slide:nth-child(1) .news-card .card-bot span { display: block } } .mandated-home .home-informed { width: 100% } .mandated-home .home-informed .informed-content { width: 100% } .mandated-home .home-informed .informed-content .content-top { width: 100%; height: 336px } .mandated-home .home-informed .informed-content .content-bot { width: 100%; padding: var(--size-8) var(--size-3); display: flex; flex-direction: column; gap: var(--size-4) } .mandated-home .home-informed .informed-content .content-bot .bot-heading { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-informed .informed-content .content-bot .bot-heading .heading-top { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--size-3) } .mandated-home .home-informed .informed-content .content-bot .bot-heading .heading-top h2 { color: var(--colours-secondary-7); white-space: nowrap; text-wrap: unset } .mandated-home .home-informed .informed-content .content-bot .bot-heading .heading-top .line { flex: 1; width: 100%; height: 1px; background: var(--colours-neutral-4) } .mandated-home .home-informed .informed-content .content-bot .bot-heading .heading-bot { width: 100% } .mandated-home .home-informed .informed-content .content-bot .bot-heading .heading-bot span { font: var(--typography-text-md-regular-font) } .mandated-home .home-informed .informed-content .content-bot .bot-form { width: 100% } .mandated-home .home-informed .informed-content .content-bot .bot-form #mandated_newsletter_sign_up_form .fefform { width: 100%; box-shadow: none } .mandated-home .home-informed .informed-content .content-bot .bot-form #mandated_newsletter_sign_up_form .fefform form { width: 100%; display: flex; flex-direction: column; gap: var(--size-2) } .mandated-home .home-informed .informed-content .content-bot .bot-form #mandated_newsletter_sign_up_form .fefform form .tab__content { display: none } .mandated-home .home-informed .informed-content .content-bot .bot-form #mandated_newsletter_sign_up_form .fefform form section { width: 100% } .mandated-home .home-informed .informed-content .content-bot .bot-form #mandated_newsletter_sign_up_form .fefform form section fieldset { gap: var(--size-3) } .mandated-home .home-informed .informed-content .content-bot .bot-form #mandated_newsletter_sign_up_form .fefform form .fefform-extras .button-group button { width: fit-content; height: var(--size-7); margin-top: var(--size-2); padding: 0 var(--size-3); color: var(--colours-secondary-7); font: var(--typography-text-md-medium-font) } @media screen and (min-width: 1024px) { .mandated-home .home-informed { position: relative; max-width: 940px; margin: 0 auto; margin-bottom: -120px; background: var(--colours-base-white); z-index: 10 } .mandated-home .home-informed .informed-content { height: 700px; display: flex; box-shadow: var(--shadows-sm) } .mandated-home .home-informed .informed-content .content-top { width: 100%; height: 100% } .mandated-home .home-informed .informed-content .content-bot { width: 100% } .mandated-home .home-informed .informed-content .content-bot .bot-heading { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-home .home-informed .informed-content .content-bot .bot-heading .heading-top { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--size-3) } .mandated-home .home-informed .informed-content .content-bot .bot-heading .heading-top h2 { color: var(--colours-secondary-7); white-space: nowrap; text-wrap: unset } .mandated-home .home-informed .informed-content .content-bot .bot-heading .heading-top .line { flex: 1; width: 100%; height: 1px; background: var(--colours-neutral-4) } .mandated-home .home-informed .informed-content .content-bot .bot-heading .heading-bot { width: 100% } .mandated-home .home-informed .informed-content .content-bot .bot-heading .heading-bot span { font: var(--typography-text-md-regular-font) } } @media screen and (min-width: 1366px) { .mandated-home .home-informed { max-width: 1312px } .mandated-home .home-informed .informed-content .content-bot { padding: 112px } } .mandated-footer { width: 100%; padding: var(--size-5) var(--size-2); background: var(--colours-secondary-7); display: flex; flex-direction: column; gap: var(--size-4) } .mandated-footer .footer-content { width: 100%; display: flex; flex-direction: column; gap: var(--size-4) } .mandated-footer .footer-content .content-top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--size-3) } .mandated-footer .footer-content .content-top .logo { width: 128px } .mandated-footer .footer-content .content-top .social-links { width: 100%; display: flex; justify-content: center; align-items: center; gap: var(--size-1) } .mandated-footer .footer-content .content-top .social-links .social-link { width: var(--size-6); height: var(--size-6); display: flex; justify-content: center; align-items: center; background: var(--colours-primary-7); border-radius: var(--border-rounded-full); transition: var(--transition-md) } .mandated-footer .footer-content .content-top .social-links .social-link .icon { width: var(--size-3); height: var(--size-3) } .mandated-footer .footer-content .content-top .social-links .social-link:hover { background: var(--colours-primary-9) } .mandated-footer .footer-content .content-bot { width: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .mandated-footer .footer-content .content-bot .menu-items { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-3) } .mandated-footer .footer-content .content-bot .menu-items .menu-item span { margin-bottom: var(--size-1); color: var(--colours-neutral-1); font: var(--typography-text-lg-semibold-font) } .mandated-footer .footer-content .content-bot .menu-items .menu-item ul li a { color: var(--colours-neutral-1); font: var(--typography-text-sm-medium-font) } .mandated-footer .footer-content .content-bot .menu-items .menu-item-bold ul li a { color: var(--colours-neutral-1); font: var(--typography-text-lg-semibold-font) } .mandated-footer .footer-content .content-bot .ppra-brand-associations { display: flex; flex-direction: column; gap: var(--size-4) } .mandated-footer .footer-content .content-bot .ppra-brand-associations .ppra { color: var(--colours-neutral-1); font: var(--typography-text-xs-bold-font) } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--size-2) } @media screen and (min-width: 640px) { .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations { grid-template-columns: repeat(6, 1fr) } } @media screen and (min-width: 1024px) { .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations { grid-template-columns: repeat(5, 1fr) } } @media screen and (min-width: 1366px) { .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations { grid-template-columns: repeat(7, 1fr) } } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .footer-image { width: 100px; height: 67px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .footer-image img { width: 100%; height: 100%; object-fit: contain } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .private-property svg { width: 150px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .ieasa .icon { width: 122px; height: 41px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .proudly-south-african .icon { width: 174px; height: 50px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .booking svg { width: 150px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .zoopla svg { width: 138px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .airbnb svg { width: 150px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .primelocation img { width: 150px; object-fit: contain } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .camps-bay-watch img { width: 115px; object-fit: contain } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .amy-biehl img { width: 115px; object-fit: contain } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .travel-ground svg { width: 150px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .safari-now img { width: 150px; object-fit: contain } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .rightmove svg { width: 150px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .glen-beach img { width: 150px; object-fit: contain } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .haven img { width: 150px; object-fit: contain } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .property24 svg { width: 150px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .kettles img { width: 114px; object-fit: contain } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .aipp .icon { width: 46px; height: 60px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .nl .icon { width: 79px; height: 53px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .sapoa .icon { width: 156px; height: 53px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .tpn .icon { width: 102px; height: 53px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .rebosa .icon { width: 108px; height: 60px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .kzn-property-group .icon { width: 241px; height: 36px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .nhbrc .icon { width: 68px; height: 60px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .hammersdale { width: 102px; height: 51px } .mandated-footer .footer-content .content-bot .ppra-brand-associations .brand-associations .hammersdale img { width: 100%; height: 100%; display: block; object-fit: cover } .mandated-footer .footer-extra { width: 100%; padding-top: var(--size-3); display: flex; flex-direction: column; gap: var(--size-3); border-top: var(--border-width-xxs) solid var(--colours-neutral-3) } .mandated-footer .footer-extra .extra-left { width: 100%; display: flex; gap: var(--size-1) } .mandated-footer .footer-extra .extra-left div { width: 100%; display: flex; flex-direction: column; gap: var(--size-1) } .mandated-footer .footer-extra .extra-left div span { color: var(--colours-neutral-1); font: var(--typography-text-xs-semibold-font) } .mandated-footer .footer-extra .extra-left div span a { color: var(--colours-neutral-1); font: var(--typography-text-xs-semibold-font) } .mandated-footer .footer-extra .extra-right { width: 100%; display: flex; flex-wrap: wrap; gap: var(--size-2) } .mandated-footer .footer-extra .extra-right a { color: var(--colours-primary-7); font: var(--typography-text-xs-medium-font) } @media screen and (min-width: 1024px) { .mandated-footer { padding: var(--size-10) 0; padding-top: 200px } .mandated-footer .footer-content { width: 100%; max-width: 940px; margin: 0 auto; flex-direction: row; gap: var(--size-4) } .mandated-footer .footer-content .content-top { width: 30%; justify-content: space-between; align-items: flex-start } .mandated-footer .footer-content .content-top .logo { width: 246px } .mandated-footer .footer-content .content-top .social-links { justify-content: flex-start } .mandated-footer .footer-content .content-bot { width: 70% } .mandated-footer .footer-content .content-bot .menu-items { grid-template-columns: repeat(3, 1fr) } .mandated-footer .footer-content .content-bot .menu-items .menu-item span { margin-bottom: var(--size-2) } .mandated-footer .footer-extra { max-width: 940px; margin: 0 auto; flex-direction: row; justify-content: space-between; align-items: flex-end } .mandated-footer .footer-extra .extra-right { justify-content: flex-end; flex-wrap: nowrap } } @media screen and (min-width: 1366px) { .mandated-footer .footer-content { max-width: 1312px } .mandated-footer .footer-extra { max-width: 1312px } } .nova-standard-page .page-content p { font: var(--typography-text-xs-regular-font) } .nova-standard-page .page-content a { color: var(--colours-secondary-7) } .nova-standard-page .page-content a:hover { color: var(--colours-secondary-9) } /* Mandated Search Form Styles */ .mandated-home .home-hero .hero-content .content-bot { width: 100%; background: var(--colours-base-black); z-index: 20; } @media screen and (min-width: 767px) { .mandated-home .home-hero .hero-content .content-bot { min-height: 88px; } } .search-form-wrapper { width: 100%; margin: 0; } .search-form-container { display: flex; flex-wrap: wrap; width: 100%; min-height: 88px; background: var(--colours-base-black); margin: 0 auto; } @media screen and (min-width: 914px) { .search-form-container { max-width: 1088px; padding: 0 16px 0 32px; } } .search-dropdowns { display: flex; flex-wrap: wrap; width: 100%; } .search-input-wrapper { display: flex; flex-wrap: wrap; align-items: center; width: 100%; } .search-field { display: flex; align-items: center; height: 88px; /* border: 1px solid var(--colours-neutral-3); */ background: var(--colours-base-black); } .search-field.dropdown-field { position: relative; flex: 1 1 50%; min-width: 0; padding: 8px 16px; } .search-field.search-input-field { flex: 1 1 100%; min-width: 0; padding: 8px 16px; gap: 8px; } .search-select { width: 100%; height: 100%; background: transparent; border: none; color: var(--colours-neutral-1); font-style: normal; font-weight: 600; font-size: 16px; line-height: 150%; padding: 0 24px 0 0; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; outline: none; } .search-select option { background: var(--colours-base-white); color: var(--colours-base-black); padding: 10px 5px; } .dropdown-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--colours-neutral-1); pointer-events: none; } .location-icon { width: 24px; height: 24px; stroke: var(--colours-primary-7); flex-shrink: 0; } .search-input { flex: 1; width: 100%; background: transparent; border: none; color: var(--colours-neutral-1); font-style: normal; font-weight: 400; font-size: 16px; line-height: 150%; padding: 0; outline: none; } .search-input::placeholder { color: var(--colours-neutral-5); } .search-results { background-color: var(--colours-base-white); width: 100%; max-height: 200px; overflow-y: auto; position: absolute; top: 100%; left: 0; z-index: 100; box-sizing: border-box; } .search-results.active { display: block; } .filterdata { padding: 10px 16px; text-align: start; font-size: 14px; cursor: pointer; color: var(--colours-neutral-10); border-bottom: 1px solid var(--colours-neutral-2); } .filterdata:hover { background: var(--colours-neutral-1); } .search-button { flex: 1 0 0; height: 56px; display: flex; align-items: center; justify-content: center; text-transform: none; border: 0 none; cursor: pointer; padding: 8px 17px; background: var(--colours-primary-7); color: var(--colours-base-white); gap: 10px; margin: var(--size-3); font-style: normal; font-weight: 600; font-size: 16px; line-height: 150%; transition: all 300ms ease-in-out; } .search-button svg { min-width: 16px; min-height: 16px; fill: var(--colours-base-white); display: none; } .search-button:hover { background: var(--colours-primary-8); } /* Mobile Responsive */ @media screen and (max-width: 767px) { .mandated-home .home-hero .hero-content .content-bot { height: auto; } .search-form-container { flex-direction: column; min-height: auto; } .search-dropdowns { border-bottom: 1px solid var(--colours-neutral-3); } .search-field.dropdown-field:first-child { border-right: none; } .search-field.search-input-field { border-bottom: 1px solid var(--colours-neutral-3); } .search-button { width: calc(100% - var(--size-6)); } .search-input-field { position: relative; } } /* Desktop Responsive */ @media screen and (min-width: 768px) { .search-dropdowns { flex-wrap: nowrap; width: auto; } .search-input-wrapper { flex-wrap: nowrap; width: auto; flex: 1; } .search-field.dropdown-field { flex: 0 0 180px; border-right: none; } .search-field.dropdown-field:last-child { border-right: 1px solid var(--colours-neutral-3); } .search-field.search-input-field { flex: 1; min-width: 300px; border-left: none; } .search-button { flex: 0 0 auto; width: auto; margin: 0; } .search-button svg { display: block; } } @media screen and (min-width: 914px) { .search-field.dropdown-field { padding-left: 0; } } @media screen and (min-width: 1024px) { .nova-standard-page { max-width: 1024px; margin: 0 auto; padding: var(--size-10) 0; } } @media screen and (min-width: 1024px) { .nova-standard-page .page-heading { padding-bottom: var(--size-5); } } @media screen and (min-width: 1024px) { .nova-standard-page .page-content-flex .content-text h1, .nova-standard-page .page-content-flex .content-text h2, .nova-standard-page .page-content-flex .content-text h3 { margin-bottom: var(--size-3); } } .nova-standard-page .page-content .content-text strong { font: var(--typography-text-md-bold-font); } strong { font-weight: 700 !important; } .nova-standard-page { width: 100%; padding: var(--size-5) var(--size-2); } .nova-standard-page .page-heading { padding-bottom: var(--size-3); } .nova-standard-page ul { list-style: disc; padding-left: 15px; margin-block-end: 1em; } @media screen and (min-width: 1024px) { .nova-standard-page .page-content-flex .content-text p { margin-top: 0; } } .nova-standard-page .page-content p { font: var(--typography-text-xs-regular-font); } /* ================================= Professional Form Responsive Layout Mobile-First Approach ================================= */ /* Base Form Container */ .valuation .valuation-content .fefform { width: 100%; max-width: 100%; padding: var(--size-3); box-sizing: border-box; } /* Form Grid Layout */ .valuation .valuation-content .fefform form fieldset { display: grid; grid-template-columns: 1fr; gap: var(--spacing-form-field-space-default-gap); } /* Form Row Base Styles - Mobile First (Single Column) */ .form-row { display: grid; grid-template-columns: 1fr; gap: var(--spacing-form-field-space-default-gap); width: 100%; } /* Prevent Textarea Horizontal Resize */ .fefform form fieldset .feffield textarea { resize: vertical; max-width: 100%; width: 100%; min-height: 120px; } /* Mobile Optimizations (Default - up to 767px) */ .fefform form fieldset .feffield .input-group { min-height: 50px; } .fefform form fieldset .feffield .input-field, .fefform form fieldset .feffield select { font-size: 16px; /* Prevents iOS auto-zoom */ min-height: 48px; width: 100%; } .fefform form .fefform-extras .button-group button { width: 100%; min-height: 48px; font-size: 16px; } /* Tablet Layout (768px and up) */ @media screen and (min-width: 768px) { .valuation .valuation-content .fefform { padding: var(--size-5); } /* 2 Column Layout for Tablet */ .form-row-2, .form-row-3 { grid-template-columns: repeat(2, 1fr); } } /* Desktop Layout (1024px and up) */ @media screen and (min-width: 1024px) { .valuation .valuation-content .fefform { max-width: 940px; margin: 0 auto; padding: var(--size-10); } /* 3 Column Layout for Dropdowns on Desktop */ .form-row-3 { grid-template-columns: repeat(3, 1fr); } /* Reset input sizes for desktop */ .fefform form fieldset .feffield .input-field, .fefform form fieldset .feffield select { min-height: var(--size-6); } .fefform form .fefform-extras .button-group button { width: auto; /* min-width: 200px; */ } } /* Large Desktop (1366px and up) */ @media screen and (min-width: 1366px) { .valuation .valuation-content .fefform { max-width: 1200px; } } @media screen and (min-width: 1366px) { .valuation .valuation-header h1 { width: 556px; margin: 0 auto; font: var(--typography-heading-h1-bold-font); } } .valuation .valuation-header h1 { padding: var(--size-05); font: var(--typography-heading-h3-bold-font); } @media screen and (min-width: 1366px) { .valuation .valuation-header { padding: var(--size-8) 0; text-align: center; } } .valuation .valuation-header { padding: var(--size-4) 0; text-align: center; } @media screen and (min-width: 1366px) { .valuation { padding: 0; padding-bottom: var(--section-spacing); } } .valuation { padding: 0 var(--size-2) var(--section-spacing) var(--size-2); margin: 0; } .contact-us .contact-us-content { padding-left: var(--size-2); padding-right: var(--size-2); min-height: 100vh } .contact-us .contact-us-content .contact-us-info h1 { margin-bottom: var(--size-5); font: var(--typography-heading-h3-bold-font) } .contact-us .contact-us-content .contact-us-info .contact-us-info-details { margin-bottom: var(--size-3); display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--size-3) } .contact-us .contact-us-content .contact-us-info .contact-us-info-details .contact-us-info-detail .detail-label { display: block; margin-bottom: var(--size-05); color: var(--colours-neutral-10); font: var(--typography-text-xs-semibold-font) } .contact-us .contact-us-content .contact-us-info .contact-us-info-details .contact-us-info-detail .detail-value { display: block } .contact-us .contact-us-content .contact-us-info .contact-us-info-details .contact-us-info-detail a { display: block } .contact-us .contact-us-content .contact-us-info .contact-us-info-details:last-child { margin-bottom: 0 } .contact-us .contact-us-content #contact_us_form .fefform { padding: var(--size-4) var(--size-3); display: flex; flex-direction: column; gap: var(--size-4) } .contact-us .contact-us-content #contact_us_form .fefform .form-top { display: flex; flex-direction: column } .contact-us .contact-us-content #contact_us_form .fefform .form-top span { font: var(--typography-text-xl-bold-font) } .contact-us .contact-us-content #contact_us_form .fefform .form-top a { font: var(--typography-text-xl-bold-font) } .contact-us .contact-us-content #contact_us_form .fefform form section { margin-bottom: var(--size-3) } .contact-us .contact-us-content #contact_us_form .fefform form section fieldset .branch_id .input-group .react-select .react-select__control .react-select__value-container { white-space: normal } .contact-us .contact-us-content #contact_us_form .fefform form .fefform-extras { gap: var(--size-2) } .contact-us .contact-us-content #contact_us_form .fefform form .fefform-extras .captcha-policy { margin-bottom: var(--size-2) } .contact-us .contact-us-content .head-office { display: none } .contact-us .contact-us-content .branch-office { display: none } .contact-us .contact-us-map { width: 100%; height: 464px; margin: 0 auto } .contact-us .contact-us-map .gm-style-iw { background-color: transparent; box-shadow: none } .contact-us .contact-us-map .gm-style-iw-d { overflow: hidden !important } .contact-us .contact-us-map .gm-style-iw-c { background-color: transparent; box-shadow: none } .contact-us .contact-us-map .gm-ui-hover-effect { display: none !important } .contact-us .contact-us-map .gm-style-iw-tc { display: none } .contact-us .contact-us-map .direction-btn { width: 100%; height: var(--button-size-md); margin: var(--size-1) 0; padding: var(--spacing-button-spacing-md-padding); display: flex; justify-content: center; align-items: center; font: var(--typography-text-sm-medium-font) } @media screen and (min-width: 1366px) { .contact-us .contact-us-content { width: 100%; max-width: 1088px; margin: 0 auto; padding-left: 0; padding-right: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--size-4) } .contact-us .contact-us-content .contact-us-info { padding: var(--size-5) 0 } .contact-us .contact-us-content .contact-us-info h1 { margin-bottom: var(--size-5); font: var(--typography-heading-h1-bold-font) } .contact-us .contact-us-content .contact-us-info .contact-us-info-details { width: 100%; margin: 0; padding: 0; grid-template-columns: repeat(2, 1fr); gap: var(--size-4) } .contact-us .contact-us-content .contact-us-info .contact-us-info-details .contact-us-info-detail { width: 192px } .contact-us .contact-us-content .contact-us-info .contact-us-info-details .contact-us-info-details-full { width: 100% } .contact-us .contact-us-content .contact-us-info .contact-us-info-details-flex { display: flex; gap: var(--size-4) } .contact-us .contact-us-content .contact-us-info .contact-us-info-details-flex div { width: 192px } .contact-us .contact-us-content .contact-us-info .contact-us-info-details:last-child { margin-bottom: 0 } .contact-us .contact-us-content #contact_us_form .fefform { padding: var(--size-8) var(--size-6); gap: var(--size-5); box-shadow: var(--shadows-xl) } .contact-us .contact-us-content #contact_us_form .fefform .form-top { margin-bottom: var(--size-4) } .contact-us .contact-us-content #contact_us_form .fefform .form-top div p { font: var(--typography-text-xl-bold-font) } .contact-us .contact-us-content #contact_us_form .fefform .form-top div a { font: var(--typography-text-xl-bold-font) } .contact-us .contact-us-content #contact_us_form .fefform form section fieldset { grid-template-columns: repeat(2, 1fr) } .contact-us .contact-us-content #contact_us_form .fefform form section fieldset .message { grid-column: 1 / span 2 } .contact-us .contact-us-content #contact_us_form .fefform form .fefform-extras { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center } .contact-us .contact-us-content #contact_us_form .fefform form .fefform-extras .policy { width: 100% } .contact-us .contact-us-content #contact_us_form .fefform form .fefform-extras .captcha-policy { width: 264px; margin-bottom: 0 } .contact-us .contact-us-content #contact_us_form .fefform form .fefform-extras .button-group { width: 150px } .contact-us .contact-us-content #contact_us_form .fefform form .fefform-extras .button-group button { height: var(--button-size-lg); padding: var(--spacing-button-spacing-lg-padding) } } .alerts { display: flex; flex-direction: column } .alerts .alerts-content { padding: 0 var(--size-2); display: flex; flex-direction: column } .alerts .alerts-content .alerts-intro { padding: var(--size-3); background: var(--colours-primary-7) } .alerts .alerts-content .alerts-intro h3 { color: var(--colours-base-white); font: var(--typography-heading-h5-bold-font) } .alerts .alerts-content .alerts-sign-up-form-wrapper { min-height: 883.4px } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform { padding: var(--size-3) } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform .form-top { margin-bottom: var(--size-4) } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform .form-top h1 { font: var(--typography-heading-h3-bold-font) } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform .react-select__value-container--is-multi { flex-wrap: wrap; padding: 7px 0 } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform .areas_suburbs .react-select { min-height: var(--size-6) } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform form .fefform-extras { gap: var(--size-4) } @media screen and (min-width: 1366px) { .alerts .alerts-content { padding: 0; display: flex; flex-direction: row; justify-content: center } .alerts .alerts-content .alerts-intro { width: 448px; height: 315px; padding: var(--size-5) } .alerts .alerts-content .alerts-intro h3 { font: var(--typography-heading-h3-bold-font) } .alerts .alerts-content .alerts-sign-up-form-wrapper { min-width: 640px; min-height: 850.8px } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform { width: 640px; padding: var(--size-8) var(--size-6) } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform .form-top { margin-bottom: var(--size-5) } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform .form-top h1 { width: 80%; font: var(--typography-heading-h1-bold-font) } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform .full { grid-column: span 2 } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform form section fieldset { display: grid; grid-template-columns: repeat(2, 1fr) } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform form section fieldset .feffield:nth-child(5), .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform form section fieldset .feffield:nth-child(8) { grid-column: 1 / span 2 } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform form section fieldset .fefcheck { margin-bottom: var(--size-2) } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform form .fefform-extras .policy { margin-bottom: var(--size-5) } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform form .fefform-extras .button-group { display: flex; justify-content: flex-end } .alerts .alerts-content .alerts-sign-up-form-wrapper #alerts_sign_up_form .fefform form .fefform-extras .button-group button { width: 111px } } /* Privacy Policy */ .privacy-policy { width: 100% } .privacy-policy .privacy-policy-header { padding: var(--size-4) 0; text-align: center } .privacy-policy .privacy-policy-content { padding: 0 var(--size-2) } .privacy-policy .privacy-policy-content .content-top ul { display: none } .privacy-policy .privacy-policy-content .content-top #privacy_policy_dropdown { min-height: 48px; margin-bottom: var(--size-5) } .privacy-policy .privacy-policy-content .content-top #privacy_policy_dropdown .fefform { box-shadow: none } .privacy-policy .privacy-policy-content .content-top #privacy_policy_dropdown .fefform form .fefform-extras { display: none } .privacy-policy .privacy-policy-content .content-bot .content-section { margin-bottom: var(--size-8) } .privacy-policy .privacy-policy-content .content-bot .content-section .section-heading h2 { margin-bottom: var(--size-4); font: var(--typography-heading-h4-bold-font) } .privacy-policy .privacy-policy-content .content-bot .content-section .section-content b { font: var(--typography-text-md-bold-font) } .privacy-policy .privacy-policy-content .content-bot .content-section .section-content p { margin-bottom: var(--size-2) } .privacy-policy .privacy-policy-content .content-bot .content-section .section-content ul { margin-bottom: var(--size-2); padding-left: 12px; list-style-type: '- ' } @media screen and (min-width: 1024px) { .privacy-policy { max-width: 888px; margin: 0 auto } .privacy-policy .privacy-policy-header { padding: var(--size-8) 0 } .privacy-policy .privacy-policy-content { padding: 0; display: flex; justify-content: space-between; gap: var(--size-4) } .privacy-policy .privacy-policy-content .content-top ul { width: 192px; display: block; border-left: 1px solid var(--colours-neutral-3) } .privacy-policy .privacy-policy-content .content-top ul li { height: var(--size-4); padding-left: var(--size-2); display: flex; align-items: center } .privacy-policy .privacy-policy-content .content-top ul li a { color: var(--colours-neutral-10); font: var(--typography-text-sm-medium-font) } .privacy-policy .privacy-policy-content .content-top ul .current { border-left: var(--tab-border-active) } .privacy-policy .privacy-policy-content .content-top #privacy_policy_dropdown { display: none } .privacy-policy .privacy-policy-content .content-bot { width: 864px } } @media screen and (min-width: 1440px) { .privacy-policy { max-width: 1088px } } /* Privacy Policy */ /* Request Information */ .request-information .request-information-content { padding: 0 var(--size-2) } .request-information .request-information-content .content-top { padding: var(--size-3); background: var(--colours-primary-7) } .request-information .request-information-content .content-top h3 { color: var(--colours-base-white) } .request-information .request-information-content .content-bot #request_information_form { min-height: 538.6px } .request-information .request-information-content .content-bot #request_information_form .fefform { padding: var(--size-3) } .request-information .request-information-content .content-bot #request_information_form .fefform .form-top h1 { margin-bottom: var(--size-4) } .request-information .request-information-content .content-bot #request_information_form .fefform .form-top p { margin-bottom: var(--size-4) } .request-information .request-information-content .content-bot #request_information_form .fefform form { display: flex; flex-direction: column } .request-information .request-information-content .content-bot #request_information_form .fefform form section fieldset .fefcheck .input-group .checkinput label:last-child { font: var(--typography-text-xs-semibold-font) } .request-information .request-information-content .content-bot #request_information_form .fefform form .fefform-extras { gap: var(--size-4) } @media screen and (min-width: 1440px) { .request-information .request-information-content { width: 100%; max-width: 1088px; margin: 0 auto; display: flex } .request-information .request-information-content .content-top { width: 100%; max-width: 448px; height: 315px; margin-top: var(--size-6); padding: var(--size-5); display: flex; justify-content: center; align-items: center } .request-information .request-information-content .content-bot { width: 100%; max-width: 640px } .request-information .request-information-content .content-bot #request_information_form { min-height: 580.4px } .request-information .request-information-content .content-bot #request_information_form .fefform { padding: var(--size-8) var(--size-6) } .request-information .request-information-content .content-bot #request_information_form .fefform .form-top h1 { margin-bottom: var(--size-5) } .request-information .request-information-content .content-bot #request_information_form .fefform .form-top p { margin-bottom: var(--size-5) } .request-information .request-information-content .content-bot #request_information_form .fefform form section { margin-bottom: var(--size-5) } .request-information .request-information-content .content-bot #request_information_form .fefform form .fefform-extras { flex-direction: row; justify-content: space-between; align-items: center } .request-information .request-information-content .content-bot #request_information_form .fefform form .fefform-extras a { white-space: nowrap } .request-information .request-information-content .content-bot #request_information_form .fefform form .fefform-extras .captcha-policy { width: 70% } .request-information .request-information-content .content-bot #request_information_form .fefform form .fefform-extras .button-group { width: 102px } } /* Request Information */ /* News */ .news .news-featured-article { margin-top: calc(0px - var(--size-5)) } .news .news-featured-article .featured-article { background: var(--colours-base-background); box-shadow: var(--shadows-xl) } .news .news-featured-article .featured-article .featured-article-image { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden } .news .news-featured-article .featured-article .featured-article-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; transition: var(--transition-md); aspect-ratio: 16 / 9 } .news .news-featured-article .featured-article .featured-article-image .card-category { position: absolute; top: var(--size-1); right: var(--size-1); height: var(--badge-size-md); padding: 0 var(--badge-spacing-md); display: flex; justify-content: center; align-items: center; background: var(--badge-bg-neutral); color: var(--badge-text); font: var(--typography-text-xs-semibold-font); border-radius: var(--border-rounded-sm) } .news .news-featured-article .featured-article .featured-article-image:hover img { transform: scale(1.05) } .news .news-featured-article .featured-article .featured-article-content { width: 100%; padding: 24px 28px; display: flex; flex-direction: column; gap: var(--size-3); transition: var(--transition-md) } .news .news-featured-article .featured-article .featured-article-content .page-title h1 { text-align: center } .news .news-featured-article .featured-article .featured-article-content .content-title-summary-link { width: 100%; height: 100%; display: flex; flex-direction: column; gap: var(--size-3) } .news .news-featured-article .featured-article .featured-article-content .content-title-summary-link .content-title-summary { display: flex; flex-direction: column; gap: var(--size-3) } .news .news-featured-article .featured-article .featured-article-content .content-title-summary-link .content-title-summary h5 { color: var(--colours-neutral-10); font: var(--typography-text-xl-bold-font) } .news .news-featured-article .featured-article .featured-article-content .content-title-summary-link .content-title-summary span { color: var(--colours-neutral-8) } .news .news-featured-article .featured-article .featured-article-content .content-title-summary-link .content-link { margin-top: auto; color: var(--colours-primary-7); font: var(--typography-text-md-semibold-font); text-align: center } .news .news-featured-article .featured-article .featured-article-content:hover { background: var(--colours-base-background-1) } .news .news-articles { width: 100%; padding: 0 var(--size-2); padding-bottom: var(--size-5); display: flex; flex-direction: column; gap: var(--size-5) } .news .news-articles .news-articles-categories { display: flex; flex-direction: column; gap: var(--size-2) } .news .news-articles .news-articles-categories .news-articles-categories-heading { text-align: center } .news .news-articles .news-articles-categories .news-articles-categories-heading span { font: var(--typography-text-xl-bold-font) } .news .news-articles .news-articles-categories .news-sort { position: relative; width: 100%; height: var(--size-6); padding: 0 var(--spacing-form-field-space-default-padding); display: flex; align-items: center; background: var(--fields-form-field-background-default); border: var(--fields-form-field-border-default) } .news .news-articles .news-articles-categories .news-sort span { color: var(--colours-neutral-5); font: var(--typography-text-sm-medium-font) } .news .news-articles .news-articles-categories .news-sort #results-sort { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .news .news-articles .news-articles-categories .news-sort #results-sort .react-select { position: relative; width: 100%; height: 100% } .news .news-articles .news-articles-categories .news-sort #results-sort .react-select .react-select__control { width: 100%; height: 100%; padding-right: var(--size-2); display: flex; justify-content: center; align-items: center; gap: var(--size-1) } .news .news-articles .news-articles-categories .news-sort #results-sort .react-select .react-select__control .react-select__value-container { width: 100%; height: 100% } .news .news-articles .news-articles-categories .news-sort #results-sort .react-select .react-select__control .react-select__value-container .react-select__placeholder { display: none } .news .news-articles .news-articles-categories .news-sort #results-sort .react-select .react-select__control .react-select__value-container .react-select__single-value { width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: center; color: var(--colours-neutral-10); font: var(--typography-text-sm-medium-font) } .news .news-articles .news-articles-categories .news-sort #results-sort .react-select .react-select__control .react-select__indicators div { width: var(--size-2); height: var(--size-2); display: flex; justify-content: center; align-items: center } .news .news-articles .news-articles-categories .news-sort #results-sort .react-select .react-select__control .react-select__indicators div svg { width: var(--size-2); height: var(--size-2); stroke: var(--fields-form-field-icon-focus) } .news .news-articles .news-articles-categories .news-sort #results-sort .react-select .react-select__menu { position: absolute; left: 0; width: 100%; max-height: 300px; overflow: auto; background: var(--fields-form-field-background-default); border: var(--fields-form-field-border-default); z-index: 10 } .news .news-articles .news-articles-categories .news-sort #results-sort .react-select .react-select__menu .react-select__menu-list { max-height: 200px } .news .news-articles .news-articles-categories .news-sort #results-sort .react-select .react-select__menu .react-select__menu-list .react-select__option { background-color: var(--colours-base-background-1); color: var(--colours-neutral-5); font: var(--typography-text-sm-medium-font); cursor: default; display: block; padding: 7.5px 15px; width: 100%; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box } .news .news-articles .news-articles-categories .news-sort #results-sort .react-select .react-select__menu .react-select__menu-list .react-select__option.react-select__option--is-focused, .news .news-articles .news-articles-categories .news-sort #results-sort .react-select .react-select__menu .react-select__menu-list .react-select__option.react-select__option--is-selected { background-color: var(--colours-primary-7); color: var(--colours-primary-7-text) } .news .news-articles .news-articles-categories .news-sort:focus-within { border: var(--fields-form-field-border-focus) } .news .news-articles .news-articles-categories #news_filtering_form .fefform { box-shadow: none } .news .news-articles .news-articles-categories #news_filtering_form .fefform .fefform-extras { display: none } .news .news-articles .news-articles-content { display: grid; /* grid-template-areas: "categories" "articles" "pagination"; */ gap: 0 var(--size-2); justify-content: center } .news .news-articles .news-articles-content .pagination { grid-area: pagination } .news .news-articles .news-articles-content .news-articles-categories-list { grid-area: categories; display: none } .news .news-articles .news-articles-content .news-articles-cards { grid-area: articles; width: 100%; display: grid; grid-template-columns: 1fr; gap: var(--size-2) } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card { position: relative; width: 100%; min-width: 328px; box-shadow: var(--shadows-xl); transition: var(--transition-md); display: flex; flex-direction: column } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card:hover { background: var(--colours-base-background-1) } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card:hover .card-img img { transform: scale(1.05) } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card .card-img { width: 100%; overflow: hidden; aspect-ratio: 16 / 9; flex: 1 0 auto } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card .card-img img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; transition: var(--transition-md); aspect-ratio: 16 / 9 } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card .card-content { width: 100%; padding: var(--size-3); display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: var(--size-1) 0 } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card .card-content .card-summary span { color: var(--colours-neutral-8); font: var(--typography-text-xs-semibold-font) } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card .card-content .card-link { text-align: right } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card .card-content .card-link span { font: var(--typography-text-xs-semibold-font) } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card .card-category { position: absolute; top: var(--size-1); right: var(--size-1); height: var(--badge-size-md); padding: 0 var(--badge-spacing-md); display: flex; justify-content: center; align-items: center; background: var(--badge-bg-neutral); color: var(--badge-text); font: var(--typography-text-xs-semibold-font); border-radius: var(--border-rounded-sm) } .popular-articles { width: 100%; padding: var(--size-5) var(--size-2); display: flex; flex-direction: column; gap: var(--size-3); background: var(--colours-base-background-1) } .popular-articles .popular-articles-content { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--size-2) } .popular-articles .popular-articles-content .popular-articles-card { height: 96px; display: flex; align-items: center; gap: var(--size-2); transition: var(--transition-md) } .popular-articles .popular-articles-content .popular-articles-card .popular-articles-card-left { width: 100%; max-width: 184px; height: 100%; padding: var(--size-1); display: flex; flex-direction: column; justify-content: space-between; gap: var(--size-1) } .popular-articles .popular-articles-content .popular-articles-card .popular-articles-card-left .card-summary { color: var(--colours-neutral-8); font: var(--typography-text-xs-medium-font) } .popular-articles .popular-articles-content .popular-articles-card .popular-articles-card-left .card-category { color: var(--colours-primary-7); font: var(--typography-text-xxs-semibold-font) } .popular-articles .popular-articles-content .popular-articles-card .popular-articles-card-right { width: 128px; height: 100% } .popular-articles .popular-articles-content .popular-articles-card .popular-articles-card-right img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center } .popular-articles .popular-articles-content .popular-articles-card:hover { background: var(--colours-base-background) } @media screen and (min-width: 1120px) { .news .news-featured-article { width: 100%; max-width: 1312px; margin: 0 auto } .news .news-featured-article .featured-article { display: flex; align-items: center; justify-content: center; box-shadow: none } .news .news-featured-article .featured-article>a { width: 50% } .news .news-featured-article .featured-article .featured-article-image { max-height: 448px } .news .news-featured-article .featured-article .featured-article-content { width: 100%; max-width: 640px; min-height: 571px; padding: var(--section-spacing); box-shadow: var(--shadows-xl); gap: var(--size-5) } .news .news-featured-article .featured-article .featured-article-content .page-title h1 { text-align: left } .news .news-featured-article .featured-article .featured-article-content .content-title-summary-link { display: flex; flex-direction: column; gap: var(--size-3) } .news .news-featured-article .featured-article .featured-article-content .content-title-summary-link .content-title-summary h5 { font: var(--typography-heading-h5-bold-font) } .news .news-featured-article .featured-article .featured-article-content .content-title-summary-link .content-link { text-align: left } .news .news-articles { max-width: 1088px; margin: 0 auto; padding-top: 0; padding-left: 0; padding-right: 0 } .news .news-articles .news-articles-categories { flex-direction: row; justify-content: space-between; align-items: center } .news .news-articles .news-articles-categories .news-articles-categories-heading { text-align: left } .news .news-articles .news-articles-categories .news-sort { width: fit-content; min-width: 280px } .news .news-articles .news-articles-categories #news_filtering_form { display: none } .news .news-articles .news-articles-content { /* grid-template-areas: "categories articles" "categories pagination"; */ /* justify-content: space-between */ } .news .news-articles .news-articles-content .news-articles-categories-list { width: 192px; height: fit-content; display: flex; flex-direction: column; border-left: var(--tab-border); gap: var(--size-1) } .news .news-articles .news-articles-content .news-articles-categories-list a { padding: 0 var(--tab-spacing); display: flex; align-items: center; color: var(--tab-text); font: var(--typography-text-sm-medium-font); transition: var(--transition-sm) } .news .news-articles .news-articles-content .news-articles-categories-list a:hover { background: var(--colours-neutral-1); border-left: var(--tab-border-active) } .news .news-articles .news-articles-content .news-articles-categories-list .current { color: var(--tab-text-active); border-left: var(--tab-border-active) } .news .news-articles .news-articles-content .news-articles-cards { width: 864px; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-4) } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card { width: 100%; max-width: 416px; align-self: stretch; box-shadow: var(--shadows-xl) } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card .card-content { width: 100%; padding: var(--size-3) } .news .news-articles .news-articles-content .news-articles-cards .news-articles-card .card-content .card-summary p { font: var(--typography-text-sm-semibold-font) } .popular-articles { padding: var(--size-10) 0; display: flex; gap: var(--size-5) } .popular-articles .popular-articles-heading { width: 100%; max-width: 864px; margin: 0 auto } .popular-articles .popular-articles-content { width: 100%; max-width: 864px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); gap: var(--size-4) } .popular-articles .popular-articles-content .popular-articles-card { justify-content: space-between } .popular-articles .popular-articles-content .popular-articles-card .popular-articles-card-left { max-width: 272px } } /* News */ /* News Detail */ .news-details .news-details-heading-wrapper { position: sticky; top: 0; background: var(--colours-base-background); box-shadow: var(--shadows-xl); width: 100%; z-index: 30 } .news-details .news-details-heading { width: 100%; padding: var(--size-1) var(--size-2); display: flex; justify-content: space-between; align-items: center } .news-details .news-details-heading .news-details-heading-left { display: flex; justify-content: space-between; align-items: center; gap: var(--size-2) } .news-details .news-details-heading .news-details-heading-left .prev-article-btn, .news-details .news-details-heading .news-details-heading-left .next-article-btn-mobile, .news-details .news-details-heading .news-details-heading-left .back-to-news-btn { display: flex; align-items: center; gap: var(--size-05); font: var(--typography-text-sm-medium-font) } .news-details .news-details-heading .news-details-heading-left .prev-article-btn span, .news-details .news-details-heading .news-details-heading-left .next-article-btn-mobile span, .news-details .news-details-heading .news-details-heading-left .back-to-news-btn span { display: none } .news-details .news-details-heading .news-details-heading-mid .news-details-heading-share-article { display: none } .news-details .news-details-heading .news-details-heading-mid .news-details-heading-share-btn { width: var(--button-size-sm); height: var(--button-size-sm); display: flex; justify-content: center; align-items: center } .news-details .news-details-heading .news-details-heading-mid .news-details-heading-back-btn { background: transparent; color: var(--colours-primary-7); font: var(--typography-text-sm-medium-font); border: var(--border-width-none); cursor: pointer } .news-details .news-details-heading .news-details-heading-mid .news-details-heading-next-btn { display: none } .news-details .news-details-heading .news-details-heading-right { display: none } .news-details .news-details-featured-image { position: relative; overflow: hidden } .news-details .news-details-featured-image .coverflow-swiper .swiper-wrapper .swiper-slide .image-caption { max-width: 328px; margin-bottom: var(--size-2); text-align: center } .news-details .news-details-featured-image .coverflow-swiper .swiper-wrapper .swiper-slide-prev .image-caption, .news-details .news-details-featured-image .coverflow-swiper .swiper-wrapper .swiper-slide-next .image-caption { display: none } .news-details .news-details-featured-image .single-img { width: 100%; height: 320px; display: block; object-fit: cover; object-position: center center } .news-details .news-details-featured-image .image-caption { position: absolute; bottom: var(--size-3); left: 50%; transform: translateX(-50%); max-width: 328px; padding: 0 var(--size-2); background: rgba(0, 0, 0, 0.4); color: var(--colours-base-white); font: var(--typography-text-sm-semibold-font); border-radius: var(--border-rounded-sm); text-align: center } .news-details .news-details-info { padding: var(--size-4) var(--size-3) 0px var(--size-3); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--size-1); text-align: center } .news-details .news-details-info .news-details-info-extra { color: var(--colours-neutral-6); font: var(--typography-text-sm-semibold-font) } .news-details .news-details-content { padding: var(--size-5) var(--size-3); display: flex; flex-direction: column; gap: var(--size-5); justify-content: center; align-items: center } .news-details .news-details-content .news-details-video { width: 100%; max-width: 864px } .news-details .news-details-content .news-details-body { width: 100%; max-width: 864px } .news-details .news-details-content .news-details-body a { color: var(--colours-primary-7) !important } .news-details .news-details-content .news-details-body .font-bold { font: var(--typography-text-md-bold-font) } .news-details .news-details-content .news-details-body ol { list-style-type: decimal } .news-details .news-details-content .news-details-body ol li { margin-bottom: var(--size-1) } .news-details .news-details-content .news-details-body ul { list-style-type: disc } .news-details .news-details-content .news-details-body ul li { margin-bottom: var(--size-1) } .news-details .news-details-content .news-details-banner { padding: var(--size-3); background: var(--colours-secondary-7); text-align: center; transition: var(--transition-md) } .news-details .news-details-content .news-details-banner h4 { margin-bottom: var(--size-1); color: var(--colours-base-white) } .news-details .news-details-content .news-details-banner p { color: var(--colours-base-white); font: var(--typography-text-xl-bold-font) } .news-details .news-details-content .news-details-banner:hover { background: var(--colours-secondary-9) } .news-details .news-details-content .news-details-author { display: flex; justify-content: center; align-items: center; text-align: center } .news-details .news-details-content .news-details-author .news-details-author-content img { width: var(--avatar-lg); height: var(--avatar-lg); object-fit: cover; border-radius: var(--border-rounded-full) } .news-details .news-details-content .news-details-author .news-details-author-content p { font: var(--typography-text-xl-regular-font) } .related-articles { width: 100%; padding: var(--size-5) var(--size-2); display: flex; flex-direction: column; gap: var(--size-3); background: var(--colours-base-background-1) } .related-articles .related-articles-content { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--size-2) } .related-articles .related-articles-content .related-articles-card { height: 96px; display: flex; align-items: center; gap: var(--size-2); transition: var(--transition-md) } .related-articles .related-articles-content .related-articles-card .related-articles-card-left { width: 100%; max-width: 184px; height: 100%; padding: var(--size-1); display: flex; flex-direction: column; justify-content: space-between; gap: var(--size-1) } .related-articles .related-articles-content .related-articles-card .related-articles-card-left .card-summary { color: var(--colours-neutral-8); font: var(--typography-text-xs-medium-font) } .related-articles .related-articles-content .related-articles-card .related-articles-card-left .card-category { color: var(--colours-primary-7); font: var(--typography-text-xxs-semibold-font) } .related-articles .related-articles-content .related-articles-card .related-articles-card-right { width: 128px; height: 100% } .related-articles .related-articles-content .related-articles-card .related-articles-card-right img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center } .related-articles .related-articles-content .related-articles-card:hover { background: var(--colours-base-background) } @media screen and (min-width: 1366px) { .news-details { width: 100% } .news-details .news-details-heading { width: 100%; max-width: 1312px; height: unset; margin: 0 auto; padding: var(--size-5) 0; display: flex; justify-content: space-between; align-items: center } .news-details .news-details-heading .news-details-heading-left { display: flex; justify-content: space-between; align-items: center; gap: var(--size-2) } .news-details .news-details-heading .news-details-heading-left .next-article-btn-mobile { display: none } .news-details .news-details-heading .news-details-heading-left .prev-article-btn, .news-details .news-details-heading .news-details-heading-left .back-to-news-btn { font: var(--typography-text-md-medium-font) } .news-details .news-details-heading .news-details-heading-left .prev-article-btn span, .news-details .news-details-heading .news-details-heading-left .back-to-news-btn span { display: block } .news-details .news-details-heading .news-details-heading-mid .news-details-heading-share-btn { display: none } .news-details .news-details-heading .news-details-heading-mid .news-details-heading-share-article { display: none } .news-details .news-details-heading .news-details-heading-mid .news-details-heading-share-article { display: flex; align-items: center; gap: var(--size-1) } .news-details .news-details-heading .news-details-heading-mid .news-details-heading-share-article span { color: var(--colours-neutral-6); font: var(--typography-text-sm-semibold-font) } .news-details .news-details-heading .news-details-heading-mid .news-details-heading-share-article button { width: var(--button-size-sm); height: var(--button-size-sm); display: flex; justify-content: center; align-items: center; border-radius: var(--border-rounded-full) } .news-details .news-details-heading .news-details-heading-right { display: block } .news-details .news-details-heading .news-details-heading-right .next-article-btn { display: flex; align-items: center; gap: var(--size-05); font: var(--typography-text-md-medium-font) } .news-details .news-details-heading .news-details-heading-back-btn, .news-details .news-details-heading .news-details-heading-next-btn { background: transparent; color: var(--colours-primary-7); font: var(--typography-text-sm-medium-font); border: var(--border-width-none); cursor: pointer } .news-details .news-details-heading .news-details-heading-share-btn { width: var(--button-size-sm); height: var(--button-size-sm); background: transparent; border: var(--buttons-primary-ghost-border); border-radius: var(--border-rounded-none); cursor: pointer } .news-details .news-details-heading .news-details-heading-next-btn { display: block } .news-details .news-details-heading .news-details-heading-share-btn { display: none } .news-details .news-details-featured-image { all: unset; position: relative; max-width: 1600px; height: 774px; display: block; margin: 0 auto } .news-details .news-details-featured-image .coverflow-swiper { position: relative; width: 100%; height: 774px; display: block; overflow: hidden; z-index: 10 } .news-details .news-details-featured-image .coverflow-swiper .swiper-wrapper { width: 100%; height: 100% } .news-details .news-details-featured-image .coverflow-swiper .swiper-wrapper .swiper-slide { position: relative; width: 1312px; background-position: center; background-size: cover; box-shadow: none } .news-details .news-details-featured-image .coverflow-swiper .swiper-wrapper .swiper-slide .overlay { position: absolute; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2) } .news-details .news-details-featured-image .coverflow-swiper .swiper-wrapper .swiper-slide .image-caption { max-width: 864px; margin-bottom: 0 } .news-details .news-details-featured-image .coverflow-swiper .swiper-wrapper .swiper-slide.swiper-slide-active img, .news-details .news-details-featured-image .coverflow-swiper .swiper-wrapper .swiper-slide.swiper-slide-active .overlay { height: 774px; min-height: 774px } .news-details .news-details-featured-image .coverflow-swiper .swiper-button-prev, .news-details .news-details-featured-image .coverflow-swiper .swiper-button-next { background: transparent; color: var(--colours-base-white) } .news-details .news-details-featured-image .coverflow-swiper .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 40px) } .news-details .news-details-featured-image .coverflow-swiper .swiper-button-next { right: var(--swiper-navigation-sides-offset, 40px) } .news-details .news-details-featured-image .single-img { height: 774px } .news-details .news-details-featured-image .image-caption { max-width: 864px; bottom: calc(var(--size-10) + var(--size-4)) } .news-details .news-details-info { position: relative; width: 100%; max-width: 1088px; min-height: 156px; margin: 0 auto; margin-top: calc(0px - var(--size-10)); padding: 0; padding-top: var(--size-8); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--size-1); background: var(--colours-base-background); text-align: center; z-index: 20 } .news-details .news-details-info .news-details-info-extra { color: var(--colours-neutral-6); font: var(--typography-text-sm-semibold-font) } .news-details .news-details-info .news-details-info-extra br { display: none } .related-articles { padding: var(--size-10) 0; display: flex; gap: var(--size-5) } .related-articles .related-articles-heading { width: 100%; max-width: 864px; margin: 0 auto } .related-articles .related-articles-content { width: 100%; max-width: 864px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); gap: var(--size-4) } .related-articles .related-articles-content .related-articles-card { justify-content: space-between } .related-articles .related-articles-content .related-articles-card .related-articles-card-left { max-width: 272px } } /* News Detail */ /* Property Grid */ .listing-results { --general-form-spacing: var(--size-1); --swiper-theme-color: var(--colours-primary-7) } .listing-results .listing-results-search { position: sticky; top: 0; background: var(--colours-base-background); box-shadow: var(--shadows-lg); z-index: 40 } @media screen and (min-width: 1500px) { .listing-results .listing-results-search { width: 100%; min-height: 74px } .listing-results .listing-results-search .search-main__default { padding: var(--size-2) var(--size-4) } .listing-results .listing-results-search .search-main__default .input-field { margin: 0 } } .listing-results .listing-results-search .search-main { display: flex; flex-direction: column; z-index: 11; position: relative; font: var(--typography-text-sm-medium-font) } .listing-results .listing-results-search .search-main .spacer, .listing-results .listing-results-search .search-main .spacer_2 { display: block; flex: 0 0 100%; margin-bottom: -8px } @media screen and (min-width: 1500px) { .listing-results .listing-results-search .search-main .spacer { display: none } } @media screen and (min-width: 800px) { .listing-results .listing-results-search .search-main .spacer_2 { display: none } } .listing-results .listing-results-search .search-main input[type="number"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield } .listing-results .listing-results-search .search-main .input-field { height: 42px; max-height: 42px; flex: 1 0 0; min-width: 0; display: flex; align-items: center; gap: var(--size-1) var(--size-1); margin-bottom: 8px } .listing-results .listing-results-search .search-main .input-field .field__wrapper { background: var(--fields-form-field-background-default); border: var(--fields-form-field-border-default); max-height: 42px; flex: 1 0 0; min-width: 0; display: flex; align-items: center; padding: 8px 16px; gap: var(--size-1) var(--size-1); align-self: stretch } .listing-results .listing-results-search .search-main .input-field .field__wrapper input { background: none; color: currentColor } .listing-results .listing-results-search .search-main .input-field.select-field { padding: 0; border: 0 none } .listing-results .listing-results-search .search-main .input-field.select-field .react-select { min-width: 100% } .listing-results .listing-results-search .search-main .input-field.field-locations { min-width: 300px } .listing-results .listing-results-search .search-main .input-field.field-buy_rent { max-width: 100%; min-width: 100% } @media screen and (min-width: 600px) { .listing-results .listing-results-search .search-main .input-field.field-buy_rent { max-width: 120px; min-width: 120px } } .listing-results .listing-results-search .search-main .input-field.field-category { min-width: 240px } .listing-results .listing-results-search .search-main .input-field.field-currency { min-width: 100% } @media screen and (min-width: 600px) { .listing-results .listing-results-search .search-main .input-field.field-currency { min-width: 140px } } .listing-results .listing-results-search .search-main .input-field.field-min_price { min-width: 100% } @media screen and (min-width: 600px) { .listing-results .listing-results-search .search-main .input-field.field-min_price { min-width: 180px } } .listing-results .listing-results-search .search-main .input-field.field-max_price { min-width: 100% } @media screen and (min-width: 600px) { .listing-results .listing-results-search .search-main .input-field.field-max_price { min-width: 180px } } .listing-results .listing-results-search .search-main .input-field input { flex: 1 0 0; min-width: 0; border: 0 none; padding: 0; margin: 0; outline: 0 none } .listing-results .listing-results-search .search-main .input-field__label { color: var(--colours-neutral-5) } .listing-results .listing-results-search .search-main .react-select { display: flex; flex: 1 0 0; min-width: 0; box-sizing: border-box; align-self: flex-start; height: unset; min-height: 42px; font-size: inherit; position: relative } .listing-results .listing-results-search .search-main .react-select.react-select__is-focused { z-index: 1 } .listing-results .listing-results-search .search-main .react-select__control { flex: 1 1 0; min-height: 42px; background: var(--fields-form-field-background-default); border: var(--fields-form-field-border-default); align-self: flex-start; padding: 0 var(--size-2); gap: var(--size-1) var(--size-1); min-width: 0; align-items: center; box-sizing: border-box; cursor: default; display: flex; justify-content: space-between; outline: 0 !important; position: relative } .listing-results .listing-results-search .search-main .react-select__control>svg { width: var(--size-2); height: var(--size-2); stroke: var(--colours-primary-7) } .listing-results .listing-results-search .search-main .search-button { height: 42px; display: flex; align-self: flex-start; justify-self: flex-end; align-items: center; justify-content: center; transition-property: background; text-transform: none; transition: all 0.2s ease-in; border: 0 none; flex-direction: row; cursor: pointer; padding: 8px 17px; background: var(--colours-primary-7); color: var(--colours-primary-7-text); gap: 10px; flex: 1 0 0 } @media screen and (min-width: 800px) { .listing-results .listing-results-search .search-main .search-button { flex: 0 0 0 } } .listing-results .listing-results-search .search-main .search-button svg { min-width: 16px; min-height: 16px; fill: currentColor } .listing-results .listing-results-search .search-main .search-button.white { min-width: 42px; max-width: 42px; padding: 0; background: var(--colours-base-background); border: 1px solid var(--colours-neutral-3) } .listing-results .listing-results-search .search-main .search-button.white svg { stroke: var(--colours-primary-7); fill: none; margin: 0 } .listing-results .listing-results-search .search-main .search-button.disabled { background: var(--colours-neutral-5) } .listing-results .listing-results-search .search-main .react-select__indicators { align-items: center; align-self: stretch; display: flex; flex-shrink: 0; box-sizing: border-box; padding: 0; transition: color 150ms ease 0s } .listing-results .listing-results-search .search-main .react-select__expanding-container { flex: 0 0 100%; align-items: center; display: flex; padding: 0; gap: 4px 4px; line-height: 1; -webkit-overflow-scrolling: touch; position: relative; overflow: hidden; box-sizing: border-box; border: none } .listing-results .listing-results-search .search-main .react-select__option { font-style: normal; font-weight: 600; font-size: 14px; line-height: 160%; color: var(--colours-neutral-10, #0f1729); cursor: default; display: block; padding: 7.5px 15px; width: 100%; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box } .listing-results .listing-results-search .search-main .react-select__option.react-select__option--is-focused, .listing-results .listing-results-search .search-main .react-select__option.react-select__option--is-selected { background: var(--colours-neutral-2, #f8fafc); color: var(--colours-neutral-10, #0f1729) } .listing-results .listing-results-search .search-main .react-select__option .search-option { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px; gap: 8px; flex: 1; order: 0; align-self: stretch; flex-grow: 0 } .listing-results .listing-results-search .search-main .react-select__option .search-option__label { font-style: normal; font-weight: 400; font-size: 14px; line-height: 160%; display: flex; align-items: center; color: var(--colours-neutral-10, #0f1729); flex: none; order: 1; flex-grow: 0; white-space: pre } .listing-results .listing-results-search .search-main .react-select__option .search-option__label b { font-weight: 600 } .listing-results .listing-results-search .search-main .react-select__option .search-option__type { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0px 8px; flex: none; order: 1; flex-grow: 0; font-style: normal; font-weight: 600; font-size: 12px; line-height: 150%; color: var(--colours-neutral-5) } .listing-results .listing-results-search .search-main .react-select__option--is-focused { background: var(--colours-neutral-1, #f8fafc); color: var(--colours-neutral-10, #0f1729) } .listing-results .listing-results-search .search-main .react-select__value-container { padding: 4px 0 } .listing-results .listing-results-search .search-main .react-select__single-value { font-style: normal; font-weight: 500; font-size: 14px; line-height: 160%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: var(--colours-neutral-8); flex: none; order: 0; flex-grow: 0; max-width: 100%; min-width: 0; margin-left: auto } .listing-results .listing-results-search .search-main .react-select__multi-value { box-sizing: border-box; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0 12px 0 16px; height: 32px; gap: 4px; background: var(--colours-base-background, #fff); border: 1px solid var(--colours-neutral-3); border-radius: 999px; flex: none; order: 0; flex-grow: 0 } .listing-results .listing-results-search .search-main .react-select__multi-value .react-select__multi-value__label { padding: 0 } .listing-results .listing-results-search .search-main .react-select__multi-value .react-select__multi-value__remove svg { stroke: var(--colours-neutral-5) } .listing-results .listing-results-search .search-main .react-select__indicator { width: 16px; height: 16px; padding: 0; flex: none; order: 1; flex-grow: 0 } .listing-results .listing-results-search .search-main .react-select__indicator svg { stroke: var(--colours-primary-7); fill: none; width: 16px; height: 16px } .listing-results .listing-results-search .search-main .react-select__clear-indicator svg { stroke: var(--colours-neutral-5) } .listing-results .listing-results-search .search-main .react-select__value-container--is-multi { flex-wrap: nowrap; flex: 0 0 1 } .listing-results .listing-results-search .search-main .react-select__value-container--is-multi .react-select__input-container { flex: 0 0; min-width: 0; display: flex } .listing-results .listing-results-search .search-main .react-select__value-container--is-multi .react-select__input-container input { width: auto !important; flex: 0 0 auto } .listing-results .listing-results-search .search-main .react-select__control--is-focused .react-select__value-container--is-multi, .listing-results .listing-results-search .search-main .react-select__control--is-focused .react-select__expanding-container { flex-wrap: wrap } .listing-results .listing-results-search .search-main .react-select__placeholder { white-space: nowrap; align-items: center; display: flex; position: relative; box-sizing: border-box; top: unset; transform: unset; margin: unset; color: var(--colours-neutral-6); order: 999; opacity: 1; flex: 0 0; min-width: 0; height: 1rem } .listing-results .listing-results-search .search-main__default { padding: 16px; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; isolation: isolate; min-width: 100%; margin: auto; gap: 0 8px; font-size: 14px; flex: none; flex-grow: 0; z-index: 11; position: relative; max-width: 100% } @media screen and (min-width: 760px) { .listing-results .listing-results-search .search-main__default { padding: var(--size-2) var(--size-4) var(--size-1) } } .listing-results .listing-results-search .search-main__filters { position: absolute; max-width: 100%; top: 100%; left: 0; right: 0; box-shadow: 0px 12px 16px -4px rgba(15, 23, 41, 0.08), 0px 4px 6px -2px rgba(15, 23, 41, 0.03) } .listing-results .listing-results-search .search-main__filters__fields { padding: 16px; max-width: 100%; display: flex; flex-wrap: wrap; flex-direction: row; isolation: isolate; align-items: flex-start; gap: 0 8px; flex: none; order: 1; align-self: stretch; flex-grow: 0; background: var(--colours-neutral-1) } @media screen and (min-width: 760px) { .listing-results .listing-results-search .search-main__filters__fields { padding: var(--size-2) var(--size-4) var(--size-1) } } .listing-results .listing-results-search .search-main__group { display: flex; align-self: flex-end; flex-direction: column; max-width: 100%; align-items: flex-start; padding: 0px; gap: 0 8px; flex: 1 0 0; order: 0; min-width: 100% } @media screen and (min-width: 800px) { .listing-results .listing-results-search .search-main__group { min-width: 0 } } .listing-results .listing-results-search .search-main__group .input-field { min-width: 100%; max-width: 100%; min-height: 42px; max-height: 42px } .listing-results .listing-results-search .search-main__group__label { font-style: normal; font-weight: 500; font-size: 14px; line-height: 160%; display: flex; align-items: center; color: var(--colours-neutral-10); flex: none; order: 0; align-self: stretch; flex-grow: 0 } .listing-results .listing-results-search .search-main .listing-results .listing-results-search .search-main__footer { display: flex; flex: 0 0 100%; min-width: 100%; min-height: 80px; align-items: center; background: var(--colours-base-white); padding: 16px } @media screen and (min-width: 760px) { .listing-results .listing-results-search .search-main .listing-results .listing-results-search .search-main__footer { padding: 16px 32px 8px } } .listing-results .listing-results-search .search-main .listing-results .listing-results-search .search-main__footer__buttons { display: flex; flex-direction: row; align-items: center; padding: 0px; gap: 32px; flex: none; order: 1; flex-grow: 0; margin-left: auto } .listing-results .listing-results-search .search-main .listing-results .listing-results-search .search-main__footer__buttons button.none { padding: 0; border: 0 none; outline: 0 none; background: none; white-space: nowrap; color: var(--colours-primary-7); gap: 8px } .listing-results .listing-results-search .search-main .listing-results .listing-results-search .search-main__footer__buttons button.none svg { fill: none; stroke: var(--colours-primary-7) } .listing-results .listing-results-search .search-main .listing-results .listing-results-search .search-main__footer__buttons button.white { padding: 0; width: 42px; height: 42px; min-width: 42px; max-width: 42px; min-height: 42px; max-height: 42px } .listing-results .listing-results-search .search-main .listing-results .listing-results-search .search-main__footer__buttons button .icon { display: flex; width: 32px; height: 32px; min-width: 32px; min-height: 32px; align-items: center; justify-content: center; border: 1px solid var(--colours-neutral-3); border-radius: 999px; margin-left: auto } .listing-results .listing-results-search .search-main .listing-results .listing-results-search .search-main__footer__buttons button .icon svg { fill: none; margin: 0; stroke: var(--colours-primary-7) } .listing-results .listing-results-search .search-main .react-select__value-container { align-items: center; display: flex; flex: 1; padding: 4px 0; gap: 4px 4px; line-height: 1; -webkit-overflow-scrolling: touch; position: relative; overflow: hidden; box-sizing: border-box; border: none } .listing-results .listing-results-search .search-main .react-select__menu { box-shadow: var(--shadows-lg); border: var(--colours-base-background); overflow: hidden; top: 100%; left: 50%; transform: translateX(-50%); background-color: var(--colours-base-background-1); border-radius: 4px; margin-bottom: 8px; margin-top: 0; position: absolute; width: 100%; z-index: 1000; box-sizing: border-box } .listing-results .listing-results-search .search-main .react-select__menu-list { max-height: 300px; overflow-y: auto; padding-bottom: 4px; padding-top: 4px; position: relative; -webkit-overflow-scrolling: touch; box-sizing: border-box } .listing-results .listing-results-search .search-main .react-select__loading-indicator { display: flex; align-items: center; justify-content: space-between } .listing-results .listing-results-search .search-main .react-select__loading-indicator>span { width: 4px; height: 4px; margin: 0 } .listing-results .listing-results-search .search-main .react-select__menu-notice--loading { font-style: normal; font-size: 14px; line-height: 160%; color: var(--colours-neutral-10, #0f1729); cursor: default; display: block; padding: 7.5px 15px; width: 100%; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box } .listing-results .listing-results-search .search-main .react-select__value-container--has-value:not(.react-select__value-container--is-multi) .react-select__placeholder { flex: 0 0 0 } .listing-results .listing-results-search .search-main .search-main__filters { background: var(--colours-base-background-1); z-index: 0 } .listing-results .listing-results-search .search-main .search-main__filters .search-main__footer__buttons { display: flex; justify-content: flex-end; padding: var(--size-2) var(--size-4); gap: var(--size-4) } .listing-results .listing-results-search .search-main .search-main__filters .search-main__footer__buttons .search-button.none { all: unset; display: flex; align-items: center; gap: var(--size-1); color: var(--colours-primary-7); font: var(--typography-text-sm-medium-font); cursor: pointer } .listing-results .listing-results-search .search-main .search-main__filters .search-main__footer__buttons .search-button.none .icon { width: var(--button-size-sm); height: var(--button-size-sm); fill: var(--colours-primary-7); display: flex; justify-content: center; align-items: center; border: var(--border-width-xs) solid var(--colours-neutral-3); border-radius: var(--border-rounded-full) } .listing-results .listing-results-content { display: grid; grid-template-areas: "breadcrumbs" "buttons" "title" "listings" "pagination"; justify-content: center } @media screen and (min-width: 799px) { .listing-results .listing-results-content { grid-template-areas: "breadcrumbs" "title" "buttons" "listings" "pagination" } } .listing-results .listing-results-content.map-search { grid-template-areas: "breadcrumbs" "title" "buttons" "listings" "map"; grid-template-columns: 1fr } .listing-results .listing-results-content.map-search .listing-results-pagination { display: none !important } .listing-results .listing-results-content.map-search .pagination { display: none } .listing-results .listing-results-content.map-search .listing-results-cards { display: none } .listing-results .listing-results-content.map-search .listing-results-count-and-type { display: none } .listing-results .listing-results-content.map-search .listing-results-cards-wide { display: none; grid-area: listings; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(auto-fit, 180px); gap: var(--size-2); overflow-y: auto; overflow-x: hidden; max-height: 100%; position: relative; padding: var(--size-2); padding-top: 4px; padding-bottom: 30px } .listing-results .listing-results-content.map-search .listing-results-map { background: #e5e3df; display: grid; grid-area: map; height: 100% } .listing-results .listing-results-content.map-search .listing-results-buttons { padding: 0 var(--size-2) var(--size-2); flex: 0 0 0; grid-area: map; align-items: flex-start; z-index: 1; width: unset; justify-self: flex-end; max-height: 0 } .listing-results .listing-results-content.map-search .listing-results-buttons .listing-results-sort { display: none; justify-content: space-between } .listing-results .listing-results-content.map-search .listing-results-buttons .react-select { position: relative } @media screen and (min-width: 799px) { .listing-results .listing-results-content.map-search { grid-template-areas: "breadcrumbs breadcrumbs" "title title" "buttons map" "listings map"; grid-template-columns: 672px 1fr; grid-template-rows: auto auto auto calc(-210.2px + 100vh) } .listing-results .listing-results-content.map-search .listing-results-count-and-type { display: block } .listing-results .listing-results-content.map-search .listing-results-cards-wide { display: grid; z-index: 0 } .listing-results .listing-results-content.map-search .listing-results-buttons { grid-area: buttons; width: 100%; max-height: 80px } .listing-results .listing-results-content.map-search .listing-results-buttons .listing-results-sort { flex: 1 1 0; margin-left: 0; display: flex } } .listing-results .listing-results-content .listing-results-cards-wide { display: none } .listing-results .listing-results-content .listing-results-breadcrumbs { order: 1; padding: var(--size-2); display: flex; align-items: center; grid-area: breadcrumbs; gap: var(--size-05) } .listing-results .listing-results-content .listing-results-breadcrumbs a { font: var(--typography-text-sm-medium-font) } .listing-results .listing-results-content .listing-results-breadcrumbs span { font: var(--typography-text-sm-medium-font) } .listing-results .listing-results-content .listing-results-breadcrumbs .icon { width: var(--size-2); height: var(--size-2) } .listing-results .listing-results-content .listing-results-count-and-type { grid-area: title; padding: var(--size-1) var(--size-2); font: var(--typography-heading-h4-bold-font); text-align: center; border-top: 1px solid var(--colours-neutral-3) } @media screen and (min-width: 799px) { .listing-results .listing-results-content .listing-results-count-and-type { text-align: left; border-top: 0 none } } .listing-results .listing-results-content .listing-results-buttons { display: flex; align-items: center; grid-area: buttons; padding: 0 var(--size-2); gap: var(--general-form-spacing); width: 100%; justify-self: center } @media screen and (min-width: 799px) { .listing-results .listing-results-content .listing-results-buttons { padding: var(--size-2) 0; justify-content: space-between; align-items: flex-start; width: 100% } } .listing-results .listing-results-content .listing-results-buttons .listing-results-pagination { grid-column: 1 / span 2; order: 2; padding: 0; align-items: center; gap: var(--size-1); display: flex; flex-wrap: nowrap } @media screen and (min-width: 799px) { .listing-results .listing-results-content .listing-results-buttons .listing-results-pagination { order: 1; display: flex } } .listing-results .listing-results-content .listing-results-buttons .listing-results-pagination .pagination-prev, .listing-results .listing-results-content .listing-results-buttons .listing-results-pagination .pagination-next { width: var(--button-size-sm); height: var(--button-size-sm); display: none; justify-content: center; align-items: center; color: var(--colours-primary-7) } @media screen and (min-width: 799px) { .listing-results .listing-results-content .listing-results-buttons .listing-results-pagination .pagination-prev, .listing-results .listing-results-content .listing-results-buttons .listing-results-pagination .pagination-next { display: flex } } .listing-results .listing-results-content .listing-results-buttons .listing-results-pagination .pagination-prev.pagination-prev-disabled, .listing-results .listing-results-content .listing-results-buttons .listing-results-pagination .pagination-next.pagination-prev-disabled { color: var(--colours-neutral-4) } .listing-results .listing-results-content .listing-results-buttons .listing-results-pagination .pagination-page { color: var(--colours-neutral-6); font: var(--typography-text-xs-medium-font); white-space: nowrap } .listing-results .listing-results-content .listing-results-buttons .listing-results-pagination .pagination-page span { color: var(--colours-neutral-10) } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort { flex: 1 0; position: relative; display: flex; align-items: center; height: 48px; order: 1 } @media screen and (min-width: 799px) { .listing-results .listing-results-content .listing-results-buttons .listing-results-sort { padding: var(--spacing-button-spacing-md-padding); border: 1px solid var(--colours-neutral-3); flex: 0 0 auto; margin-left: auto } } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort span { color: var(--colours-neutral-5); font: var(--typography-text-xs-semibold-font); white-space: nowrap } @media screen and (min-width: 799px) { .listing-results .listing-results-content .listing-results-buttons .listing-results-sort span { font: var(--typography-text-sm-medium-font) } } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort #results-sort { min-width: 100px; margin-left: var(--size-05); position: relative } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort #results-sort .react-select__control { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; background: transparent; border-radius: var(--border-rounded-none); text-align: left; cursor: pointer } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort #results-sort .react-select__control .react-select__value-container { width: 100%; height: 100%; display: flex; align-items: center } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort #results-sort .react-select__control .react-select__value-container .react-select__single-value { width: 100%; color: var(--colours-neutral-10); font: var(--typography-text-xs-semibold-font) } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort #results-sort .react-select__control .react-select__value-container .react-select__placeholder { width: 100%; color: var(--colours-neutral-5); font: var(--typography-text-sm-medium-font) } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort #results-sort .react-select__control .react-select__indicators div { width: var(--size-2); height: var(--size-2); display: flex; justify-content: center; align-items: center } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort #results-sort .react-select__control .react-select__indicators div svg { width: var(--size-2); height: var(--size-2); stroke: var(--fields-form-field-icon-focus) } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort #results-sort .react-select__menu { position: absolute; top: 40px; left: -60px; width: 222px; margin-top: 0; background-color: var(--colours-base-background-1); margin-bottom: 8px; border-radius: 4px; z-index: 1000; box-shadow: var(--shadows-lg); box-sizing: border-box } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort #results-sort .react-select__menu .react-select__menu-list { max-height: 300px; overflow-y: auto; padding-bottom: 4px; padding-top: 4px; position: relative; -webkit-overflow-scrolling: touch; box-sizing: border-box } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort #results-sort .react-select__menu .react-select__menu-list .react-select__option { background-color: var(--colours-base-background-1); color: var(--colours-neutral-5); font: var(--typography-text-sm-medium-font); cursor: default; display: block; padding: 7.5px 15px; width: 100%; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box } .listing-results .listing-results-content .listing-results-buttons .listing-results-sort #results-sort .react-select__menu .react-select__menu-list .react-select__option.react-select__option--is-focused, .listing-results .listing-results-content .listing-results-buttons .listing-results-sort #results-sort .react-select__menu .react-select__menu-list .react-select__option.react-select__option--is-selected { background-color: var(--colours-primary-7); color: var(--colours-primary-7-text) } .listing-results .listing-results-content .listing-results-buttons .listing-results-goto-favourites { order: 3; flex: 0 0 var(--button-size-sm); width: var(--button-size-sm); height: var(--button-size-sm); display: flex; justify-content: center; align-items: center; border-radius: var(--border-rounded-full) } @media screen and (min-width: 799px) { .listing-results .listing-results-content .listing-results-buttons .listing-results-goto-favourites { width: unset; height: 48px; border-radius: 0; padding: var(--spacing-button-spacing-md-padding); gap: var(--spacing-button-spacing-md-gap) } } .listing-results .listing-results-content .listing-results-buttons .listing-results-goto-favourites .icon { flex: 0 0 1em } .listing-results .listing-results-content .listing-results-buttons .listing-results-goto-favourites span { display: none } @media screen and (min-width: 799px) { .listing-results .listing-results-content .listing-results-buttons .listing-results-goto-favourites span { display: block } } .listing-results .listing-results-content .listing-results-buttons .listing-results-toggle-map { order: 4; flex: 0 0 var(--button-size-sm); width: var(--button-size-sm); height: var(--button-size-sm); display: flex; justify-content: center; align-items: center; border-radius: var(--border-rounded-full) } @media screen and (min-width: 799px) { .listing-results .listing-results-content .listing-results-buttons .listing-results-toggle-map { width: unset; height: 48px; border-radius: 0; padding: var(--spacing-button-spacing-md-padding); gap: var(--spacing-button-spacing-md-gap) } } .listing-results .listing-results-content .listing-results-buttons .listing-results-toggle-map .icon { flex: 0 0 1em } .listing-results .listing-results-content .listing-results-buttons .listing-results-toggle-map span { display: none } @media screen and (min-width: 799px) { .listing-results .listing-results-content .listing-results-buttons .listing-results-toggle-map span { display: block; white-space: nowrap } } .listing-results .listing-results-content .listing-results-cards { order: 4; display: grid; grid-area: listings; padding: var(--size-2) 0; grid-template-columns: 1fr; justify-items: center; gap: var(--size-4); min-width: 0; max-width: 1366px } @media screen and (min-width: 640px) { .listing-results .listing-results-content .listing-results-cards { grid-template-columns: repeat(auto-fit, minmax(304px, 1fr)) } } .listing-results .listing-results-content .listing-results-cards .property-card-sm { width: 100%; max-width: 304px; min-height: 416px; background: var(--colours-base-background); box-shadow: var(--shadows-xl); display: flex; flex-direction: column; align-self: stretch } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header { position: relative; width: 100%; aspect-ratio: 16 / 9 } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .swiper { width: 100%; height: 100%; z-index: 1 } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .swiper .swiper-wrapper .swiper-slide img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 16 / 9; position: relative; z-index: 1 } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .swiper .swiper-wrapper .swiper-slide .swiper-lazy-preloader { z-index: 0 } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .swiper .swiper-button-prev, .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .swiper .swiper-button-next { width: var(--size-5); height: var(--size-10); display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.3); color: var(--colours-base-white) } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .swiper .swiper-button-prev { left: 0 } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .swiper .swiper-button-next { right: 0 } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .card-header-img { width: 100%; height: 100% } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .card-header-img img { width: 100%; height: 100%; display: block; object-fit: cover } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .card-badges { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: var(--size-025); z-index: 1 } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .card-badges .card-badge { height: var(--badge-size-lg); padding: 0 var(--badge-spacing-lg); display: flex; justify-content: center; align-items: center; gap: var(--badge-spacing-lg); background: var(--badge-bg-neutral); color: var(--badge-text-neutral); font: var(--typography-text-sm-medium-font); border-radius: var(radius-default) } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .card-labels { position: absolute; bottom: 0; right: 0; padding: var(--size-05); display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap-reverse; gap: var(--size-025); z-index: 20 } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .card-labels div { height: var(--badge-size-md); padding: 0 var(--badge-spacing-md); display: flex; justify-content: center; align-items: center; gap: var(--badge-spacing-md); background: var(--badge-bg-neutral); border-radius: var(radius-default) } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .card-labels div .icon { width: 12px; height: 12px } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-header .card-labels div p { color: var(--badge-text); font: var(--typography-text-xs-semibold-font) } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body { height: 100%; padding: var(--size-3); display: flex; flex-direction: column; justify-content: space-between } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body .card-body-top { flex: 0 0 0 } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body .card-body-top .card-body-top-one { display: flex; justify-content: space-between; align-items: center } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body .card-body-top .card-body-top-one .card-price { color: var(--colours-neutral-10); font: var(--typography-text-xl-bold-font) } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body .card-body-top .card-body-top-one .card-fav-btn { background: transparent; border: none; cursor: pointer } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body .card-body-top .card-body-top-two .card-description { margin-bottom: var(--size-2); font: var(--typography-text-xs-medium-font) } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body .card-body-bot { display: flex; flex-direction: column; flex: 1 1 0; gap: var(--size-2); justify-content: space-between } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body .card-body-bot .card-description { font: var(--typography-text-xs-medium-font) } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body .card-body-bot .card-stats { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--size-1) var(--size-2) } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body .card-body-bot .card-stats div { display: flex; align-items: center; gap: var(--size-1) } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body .card-body-bot .card-stats div p { margin: 0; font: var(--typography-text-xs-medium-font) } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body .card-body-bot .card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-025) } .listing-results .listing-results-content .listing-results-cards .property-card-sm .card-body .card-body-bot .card-tags .card-tag { height: var(--badge-size-sm); padding: 0 var(--badge-spacing-sm); background: var(--badge-bg); color: var(--badge-text); font: var(--typography-text-xxs-bold-font); border-radius: var(--border-rounded-full); display: flex; align-items: center } .listing-results .listing-results-content .listing-results-cards .email-alerts-card { width: 100%; max-width: 304px; height: 416px; display: flex; flex-direction: column; box-shadow: var(--shadows-xl) } .listing-results .listing-results-content .listing-results-cards .email-alerts-card .open-modal-listing-results { cursor: pointer } .listing-results .listing-results-content .listing-results-cards .email-alerts-card .card-header { width: 100%; height: 246px; padding: var(--size-3); background: var(--colours-base-background-1); display: flex; flex-direction: column; justify-content: flex-end } .listing-results .listing-results-content .listing-results-cards .email-alerts-card .card-header .listing-results-email-alerts-img { width: 100px; height: 69px; margin-left: -12px; margin-bottom: var(--size-1) } .listing-results .listing-results-content .listing-results-cards .email-alerts-card .card-header p { color: var(--colours-neutral-10); font: var(--typography-text-lg-bold-font) } .listing-results .listing-results-content .listing-results-cards .email-alerts-card .card-body { width: 100%; height: 188px; padding: var(--size-3) } .listing-results .listing-results-content .listing-results-cards .email-alerts-card .card-body p { margin-bottom: var(--size-1); color: var(--colours-neutral-10); font: var(--typography-text-lg-bold-font) } .listing-results .listing-results-content .listing-results-cards .email-alerts-card .card-body .open-modal-listing-results { color: var(--colours-primary-7); font: var(--typography-text-xs-semibold-font); cursor: pointer } .listing-results .listing-results-content .listing-results-cards .on-show-card { width: 100%; max-width: 304px; height: 416px; display: grid; background: var(--colours-base-background-1); box-shadow: var(--shadows-xl); position: relative } .listing-results .listing-results-content .listing-results-cards .on-show-card>svg { min-width: 100%; min-height: 100%; grid-row: 1; grid-column: 1; align-self: center; justify-self: center } .listing-results .listing-results-content .listing-results-cards .on-show-card .listing-results-on-show-content { grid-row: 1; margin: 0 var(--size-3) var(--size-3); grid-column: 1; position: relative; z-index: 1; padding: var(--size-3); background: var(--colours-secondary-7); align-self: flex-end } .listing-results .listing-results-content .listing-results-cards .on-show-card .listing-results-on-show-content p { color: var(--colours-base-white); font: var(--typography-text-xl-bold-font) } .listing-results .listing-results-content .listing-results-cards .news-card { width: 100%; max-width: 304px; height: 416px; box-shadow: var(--shadows-xl) } .listing-results .listing-results-content .listing-results-cards .news-card .card-header { width: 100%; height: 246px } .listing-results .listing-results-content .listing-results-cards .news-card .card-header img { width: 100%; height: 100%; display: block; object-fit: cover } .listing-results .listing-results-content .listing-results-cards .news-card .card-body { height: 188px; padding: var(--size-7) var(--size-3) var(--size-3) var(--size-3) } .listing-results .listing-results-content .listing-results-cards .news-card .card-body .card-summary { margin-bottom: var(--size-1); font: var(--typography-text-xs-semibold-font); text-align: left } .listing-results .listing-results-content .listing-results-cards .news-card .card-body div { text-align: right } .listing-results .listing-results-content .listing-results-cards .news-card .card-body div span { font: var(--typography-text-xs-semibold-font) } .listing-results .listing-results-content .listing-results-cards .area-profile-card { position: relative; width: 100%; max-width: 304px; height: 416px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--colours-base-black); box-shadow: var(--shadows-xl) } .listing-results .listing-results-content .listing-results-cards .area-profile-card .card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%); z-index: 10 } .listing-results .listing-results-content .listing-results-cards .area-profile-card .card-body { padding: var(--size-3); z-index: 20 } .listing-results .listing-results-content .listing-results-cards .area-profile-card .card-body h5 { margin-bottom: var(--size-2); color: var(--colours-base-white); font: var(--typography-heading-h5-bold-font); font-size: 24px } .listing-results .listing-results-content .listing-results-cards .area-profile-card .card-body div { display: flex; align-items: center; gap: var(--size-1) } .listing-results .listing-results-content .listing-results-cards .area-profile-card .card-body div .card-divider { width: 100%; height: 1px; background: var(--colours-primary-7) } .listing-results .listing-results-content .listing-results-cards .area-profile-card .card-body div a { white-space: nowrap; color: var(--colours-base-white); font: var(--typography-text-sm-medium-font) } .listing-results .listing-results-content .listing-results-map { display: none } .listing-results .listing-results-content .listing-results-map-btns { display: none } .listing-results .listing-results-content-wide { position: relative } .listing-results .listing-results-map { width: 100%; height: calc(100vh - 232px) } .listing-results .listing-results-map .listing-results-map-card { width: 316px; height: 116px; display: flex; background: var(--colours-base-background); box-shadow: var(--shadows-xl) } .listing-results .listing-results-map .listing-results-map-card .card-img { position: relative; width: 130px; height: 100% } .listing-results .listing-results-map .listing-results-map-card .card-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3 } .listing-results .listing-results-map .listing-results-map-card .card-img .close-btn { position: absolute; top: 0; left: 0; padding: var(--size-1) } .listing-results .listing-results-map .listing-results-map-card .card-content { width: 186px; padding: var(--size-1); display: flex; flex-direction: column; justify-content: space-between; gap: var(--size-05) } .listing-results .listing-results-map .listing-results-map-card .card-content .content-top .price-fav { display: flex; justify-content: space-between; align-items: center } .listing-results .listing-results-map .listing-results-map-card .card-content .content-top .price-fav .price { color: var(--colours-neutral-10); font: var(--typography-text-md-bold-font) } .listing-results .listing-results-map .listing-results-map-card .card-content .content-top .price-fav .card-fav-btn { background: transparent; border: none; cursor: pointer } .listing-results .listing-results-map .listing-results-map-card .card-content .content-top .price-fav .card-fav-btn .fav-inactive { width: var(--size-3); height: var(--size-3); display: block } .listing-results .listing-results-map .listing-results-map-card .card-content .content-top .price-fav .card-fav-btn .fav-active { width: var(--size-3); height: var(--size-3); display: none } .listing-results .listing-results-map .listing-results-map-card .card-content .content-top .title-description { display: flex; flex-direction: column; gap: var(--size-05) } .listing-results .listing-results-map .listing-results-map-card .card-content .content-top .title-description .title { width: 90%; color: var(--colours-neutral-8); font: var(--typography-text-xxs-semibold-font) } .listing-results .listing-results-map .listing-results-map-card .card-content .content-top .title-description .description { width: 90%; color: var(--colours-neutral-8); font: var(--typography-text-xxs-medium-font) } .listing-results .listing-results-map .listing-results-map-card .card-content .content-bot .card-content-stats { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--size-05); column-gap: var(--size-1) } .listing-results .listing-results-map .listing-results-map-card .card-content .content-bot .card-content-stats .card-content-stat { color: var(--colours-neutral-8); font: var(--typography-text-xxs-semibold-font) } .listing-results .listing-results-map-btns { position: absolute; top: 0; left: 0; width: 100%; height: var(--size-5); margin-top: var(--size-7); padding: var(--size-2); display: flex; justify-content: flex-end; align-items: center; gap: var(--size-1) } .listing-results .listing-results-map-btns .listing-results-goto-favourites { width: var(--button-size-sm); height: var(--button-size-sm); display: flex; justify-content: center; align-items: center; border-radius: var(--border-rounded-full) } .listing-results .listing-results-map-btns .listing-results-hide-map { width: var(--button-size-sm); height: var(--button-size-sm); display: flex; justify-content: center; align-items: center; border-radius: var(--border-rounded-full) } .listing-results .listing-results-save-search-banner { display: none; width: 100%; margin: 0 auto; padding: var(--size-2); background: var(--colours-secondary-7); color: var(--colours-base-white); font: var(--typography-text-sm-semibold-font); text-align: center; cursor: pointer } #modalContainerListingResults .modal .modal-header { justify-content: space-between } #modalContainerListingResults .modal .modal-header p { color: var(--colours-neutral-10); font: var(--typography-text-xl-bold-font) } #modalContainerListingResults .modal .modal-content #listing_results_email_alerts_form .fefform { box-shadow: none } #modalContainerListingResults .modal .modal-content #listing_results_email_alerts_form .fefform .form-top { margin-bottom: var(--size-3) } #modalContainerListingResults .modal .modal-content #listing_results_email_alerts_form .fefform .form-top h5 { font: var(--typography-text-lg-bold-font) } #modalContainerListingResults .modal .modal-content #listing_results_email_alerts_form .fefform .form-top h5 br { display: none } #modalContainerListingResults .modal .modal-content #listing_results_email_alerts_form .fefform form section { margin-bottom: var(--size-2) } #modalContainerListingResults .modal .modal-content .button-group { margin-top: var(--size-2) } @media screen and (min-width: 640px) { #modalContainerListingResults .modal { max-width: 600px } #modalContainerListingResults .modal .modal-content #listing_results_email_alerts_form .fefform .form-top { margin-bottom: var(--size-3) } #modalContainerListingResults .modal .modal-content #listing_results_email_alerts_form .fefform .form-top h5 { font: var(--typography-heading-h5-bold-font) } #modalContainerListingResults .modal .modal-content #listing_results_email_alerts_form .fefform .form-top h5 br { display: none } #modalContainerListingResults .modal .modal-content #listing_results_email_alerts_form .fefform form section { margin-bottom: var(--size-2) } #modalContainerListingResults .modal .modal-content #listing_results_email_alerts_form .fefform form section fieldset { grid-template-columns: repeat(2, 1fr) } #modalContainerListingResults .modal .modal-content #listing_results_email_alerts_form .fefform form section fieldset .email { grid-column: 1 / span 2 } #modalContainerListingResults .modal .modal-content .button-group { margin-top: var(--size-2) } } .custom-marker-btn { height: var(--badge-size-md); padding: 0 var(--badge-spacing-md); background: var(--colours-base-background); color: var(--colours-neutral-10); font: var(--typography-text-xs-semibold-font); border: none; border-radius: var(--border-rounded-full); box-shadow: var(--shadows-md) } .custom-marker-btn.hover { outline: 1px solid var(--colours-secondary-7) } .custom-marker-btn.active { background: var(--badge-bg); color: var(--badge-text) } .listing-results-map-card { position: absolute; top: 0; left: 0; transform: translate(-50%, -100%); box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5); background: var(--colours-base-white) } .popup-bubble-anchor { position: absolute; width: 100%; bottom: 8px; left: 0 } .popup-container { cursor: auto; height: 0; position: absolute; width: 200px } .close-map-card { position: absolute; top: 8px; left: 8px; background: none; border: none; outline: none; cursor: pointer } .close-map-card svg { width: 16px; height: 16px; filter: drop-shadow(1px 1px 1px rgba(15, 23, 41, 0.5)) } .listing-results-card-wide { scroll-margin: 4px; width: calc(100% - 15px); height: 180px; margin: 0 auto; display: flex; box-shadow: var(--shadows-xl) } .listing-results-card-wide.hover { outline: 4px solid var(--colours-primary-2) } .listing-results-card-wide.selected { outline: 4px solid var(--colours-primary-7) } .listing-results-card-wide .card-header { position: relative; width: 320px; height: 100% } .listing-results-card-wide .card-header .swiper .swiper-wrapper .swiper-slide { width: 320px; height: 180px; user-select: none } .listing-results-card-wide .card-header .swiper .swiper-wrapper .swiper-slide img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 16 / 9 } .listing-results-card-wide .card-header .swiper .swiper-button-prev, .listing-results-card-wide .card-header .swiper .swiper-button-next { width: var(--size-4); height: var(--size-4); display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.3); color: var(--colours-base-white); border-radius: var(--border-rounded-full); --swiper-navigation-size: var(--size-2); pointer-events: all } .listing-results-card-wide .card-header .card-header-img { width: 100%; height: 100% } .listing-results-card-wide .card-header .card-header-img img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 16 / 9 } .listing-results-card-wide .card-header .card-badges { z-index: 1; position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: var(--size-025) } .listing-results-card-wide .card-header .card-badges .card-badge { height: var(--badge-size-lg); padding: 0 var(--badge-spacing-lg); display: flex; justify-content: center; align-items: center; gap: var(--badge-spacing-lg); background: var(--badge-bg-neutral); color: var(--badge-text-neutral); font: var(--typography-text-sm-medium-font); border-radius: var(--radius-default) } .listing-results-card-wide .card-header .card-labels { z-index: 1; position: absolute; bottom: 0; right: 0; padding: var(--size-05); display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap-reverse; gap: var(--size-025); color: var(--colours-base-white); font: var(--typography-text-xs-semibold-font) } .listing-results-card-wide .card-header .card-labels div { height: var(--badge-size-md); padding: 0 var(--badge-spacing-md); display: flex; justify-content: center; align-items: center; gap: var(--badge-spacing-md); background: var(--badge-bg-neutral); border-radius: var(--radius-default) } .listing-results-card-wide .card-header .card-labels div .icon { width: 12px; height: 12px } .listing-results-card-wide .card-body { width: 100%; min-height: 0; height: auto; padding: 0 var(--size-3); display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: var(--size-2) 0 } .listing-results-card-wide .card-body .card-body-top { width: 100%; flex: 0 1 0; height: auto } .listing-results-card-wide .card-body .card-body-top .card-body-top-one { display: flex; justify-content: space-between; align-items: center } .listing-results-card-wide .card-body .card-body-top .card-body-top-one .card-price { font: var(--typography-text-xl-bold-font) } .listing-results-card-wide .card-body .card-body-top .card-body-top-one .card-fav-btn { background: transparent; border: none; cursor: pointer } .listing-results-card-wide .card-body .card-body-top .card-body-top-one .card-fav-btn .fav-inactive { width: var(--size-3); height: var(--size-3); display: block } .listing-results-card-wide .card-body .card-body-top .card-body-top-one .card-fav-btn .fav-active { width: var(--size-3); height: var(--size-3); display: none } .listing-results-card-wide .card-body .card-body-top .card-body-top-two { display: flex; flex-direction: column } .listing-results-card-wide .card-body .card-body-top .card-body-top-two .card-name { font: var(--typography-text-sm-semibold-font) } .listing-results-card-wide .card-body .card-body-top .card-body-top-two .card-description, .listing-results-card-wide .card-body .card-body-top .card-body-top-two .card-address { font: var(--typography-text-xs-medium-font) } .listing-results-card-wide .card-body .card-body-bot { display: flex; flex-direction: column; gap: var(--size-1) 0; flex: 0 1 0; height: auto; width: 100% } .listing-results-card-wide .card-body .card-body-bot .card-stats { margin-bottom: var(--size-2); display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--size-1) var(--size-2) } .listing-results-card-wide .card-body .card-body-bot .card-stats div { display: flex; align-items: center; gap: var(--size-1); font: var(--typography-text-xs-medium-font) } .listing-results-card-wide .card-body .card-body-bot .card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-025); margin-top: auto } .listing-results-card-wide .card-body .card-body-bot .card-tags .card-tag { height: var(--badge-size-sm); padding: 0 var(--badge-spacing-sm); background: var(--badge-bg); color: var(--badge-text); font: var(--typography-text-xxs-bold-font); border-radius: var(--border-rounded-full); display: flex; align-items: center } /* Property Grid */ .footer-content-extra{ border-top: var(--border-width-xxs) solid var(--colours-neutral-3); padding-top: var(--size-3); } .footer-extra .footer-title{ margin-bottom: var(--size-2); color: var(--colours-neutral-1); } .footer-extra .footer-links a{ color: var(--colours-neutral-1); font: var(--typography-text-sm-medium-font); } .listing-results-content-header{ display: flex !important; justify-content: space-between !important; align-items: center; } .breadcrumbs { grid-area: breadcrumbs; display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-05); padding: var(--size-1) var(--size-2); min-width: 0; font: var(--typography-text-sm-medium-font) } @media screen and (min-width: 1366px) { .breadcrumbs { padding: var(--size-5) var(--size-2); max-width: 1312px; margin: 0 auto } } .breadcrumbs>* { display: inline-flex; flex: 0 0 auto; align-items: center } .breadcrumbs .breadcrumb-ellipsis { display: none; cursor: pointer; user-select: none; position: relative } .breadcrumbs.overflowing .breadcrumb-ellipsis { display: block } .breadcrumbs .breadcrumbs-overflow { display: flex; position: absolute; opacity: 0; pointer-events: none; top: 100%; left: 50%; margin-left: -50%; padding: var(--size-1) var(--size-2); gap: var(--size-05); max-width: fit-content; margin-top: 1px; z-index: 30; flex-direction: column; background: var(--colours-base-background); box-shadow: var(--shadows-xl) } .breadcrumbs .breadcrumbs-overflow .breadcrumbs-link { display: inline-flex; flex: 0 0 auto; align-items: center } .breadcrumbs .breadcrumb-chevron { user-select: none } .breadcrumbs .breadcrumb-chevron+.breadcrumb-chevron { display: none; max-width: 0 } .breadcrumbs a { white-space: nowrap } .breadcrumbs .breadcrumb-back, .breadcrumbs .breadcrumb-pipe { display: none } @media screen and (min-width: 1366px) { .breadcrumbs .breadcrumb-back, .breadcrumbs .breadcrumb-pipe { display: inline-flex; align-items: center } } .breadcrumbs .breadcrumb-last span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0 } .agent-details-section-heading { padding: var(--size-5) 0; text-align: center } .agent-details-section-heading h2 { margin-bottom: var(--size-1) } .agent-details-content { padding: var(--size-3) var(--size-2) var(--size-5); display: grid; grid-template-areas: "photo" "buttons" "info" "social" "content"; flex-direction: column; gap: var(--size-5) 0; position: relative } .agent-details-content .agent-details-background { display: none } @media screen and (min-width: 640px) { .agent-details-content { grid-template-areas: "buttons buttons" "photo info" "social social" "content content"; grid-template-columns: 160px auto } } @media screen and (min-width: 1366px) { .agent-details-content { padding: 0; max-width: 1088px; margin: 0 auto; grid-template-areas: "photo buttons" "photo info" "photo social" "photo content"; grid-template-columns: 400px auto } .agent-details-content>div:not(.agent-details-background):not(.agent-details-img) { padding: 0 112px; margin-left: calc(0px - var(--size-4)) } .agent-details-content>div:not(.agent-details-background):not(.agent-details-img).agent-details-btns { padding-top: var(--size-8) } .agent-details-content .agent-details-background { display: block; margin-left: calc(0px - var(--size-4)) } } .agent-details-background { grid-area: content; width: calc(1088px - 400px); height: calc(100% - var(--size-8)); box-shadow: var(--shadows-xl); grid-row: 1 / -1; box-sizing: content-box; padding: 112px var(--size-8) 0; justify-self: flex-end; align-self: flex-start } .agent-details-header { padding: var(--size-2); display: flex; justify-content: space-between; align-items: center } .agent-details-header .share-mobile { width: var(--button-size-sm); height: var(--button-size-sm); display: flex; justify-content: center; align-items: center } .agent-details-img { width: 100%; aspect-ratio: 3 / 4; background: var(--colours-base-background); z-index: 1; grid-area: photo } @media screen and (min-width: 640px) { .agent-details-img { max-width: 160px } } @media screen and (min-width: 1366px) { .agent-details-img { max-width: 400px; margin: var(--size-8) 0; margin-left: var(--size-4) } } .agent-details-img svg { fill: var(--colours-secondary-7) } .agent-details-img img { width: 100%; height: 100%; object-fit: cover } .agent-details-btns { display: flex; flex-direction: column; gap: var(--size-05); grid-area: buttons } @media screen and (min-width: 640px) { .agent-details-btns { flex-direction: row } } .agent-details-btns .agent-details-btn { width: 100%; height: var(--button-size-md); padding: var(--spacing-button-spacing-md-padding); display: flex; justify-content: center; align-items: center; gap: var(--size-1); font: var(--typography-text-sm-medium-font); white-space: nowrap } .agent-details-btns .agent-details-btn .icon { min-width: var(--size-2); width: var(--size-2); height: var(--size-2) } @media screen and (min-width: 640px) { .agent-details-btns .agent-details-btn { flex: 0 } } .agent-details-btns .agent-details-primary-btn { width: 100%; height: var(--button-size-md); margin-bottom: 1px; padding: var(--spacing-button-spacing-md-padding); background: var(--buttons-primary-background); color: var(--buttons-primary-color); font: var(--typography-text-sm-medium-font); border: var(--border-width-none); border-radius: var(--border-rounded-none); cursor: pointer } .agent-details-btns .agent-details-secondary-btn button, .agent-details-btns .agent-details-secondary-btn-mobile button { width: 100%; height: var(--button-size-md); margin-bottom: 1px; padding: var(--spacing-button-spacing-md-padding); background: var(--buttons-primary-background); color: var(--buttons-primary-color); font: var(--typography-text-sm-medium-font); border: var(--border-width-none); border-radius: var(--border-rounded-none); cursor: pointer } .agent-details-info { grid-area: info } @media screen and (min-width: 640px) { .agent-details-info { margin-left: var(--size-2) } } .agent-details-info h1 { margin-bottom: var(--size-1) } .agent-details-info .agent-details-designation { color: var(--colours-neutral-10); font: var(--typography-text-lg-bold-font) } .agent-details-info .agent-details-company-branch { margin-bottom: var(--size-05); font: var(--typography-text-lg-regular-font) } .agent-details-info .agent-details-franchise { margin-bottom: var(--size-3); font: var(--typography-text-xs-medium-font) } .agent-details-social-links { grid-area: social; align-self: flex-start; flex-wrap: wrap; display: flex; align-items: center; gap: var(--size-5) var(--size-1) } .agent-details-social-links .agent-details-social-link { width: var(--button-size-sm); height: var(--button-size-sm); display: flex; align-items: center; justify-content: center; background: var(--buttons-primary-background); border: var(--border-width-none); border-radius: var(--border-rounded-full); cursor: pointer } .agent-details-social-links .agent-show-phone { flex: 0 0 100%; display: flex; flex-direction: column; align-items: flex-start } .agent-details-social-links .card-show-phone-number { background: none; padding: 0; margin: 0; border: none; outline: none; color: var(--colours-primary-7); font: var(--typography-text-sm-medium-font); white-space: nowrap; cursor: pointer } .agent-details-social-links .card-number { display: none; color: var(--colours-primary-7); font: var(--typography-text-sm-medium-font) } .agent-details-body-header { display: grid; font: var(--typography-text-xs-medium-font); width: 100% } .agent-details-body-header .agent-vcard { justify-self: flex-end } .agent-details-body { grid-area: content; display: flex; flex-direction: column; gap: var(--size-3) } .agent-details-body .agent-details-view-my-listings { display: block; font: var(--typography-text-xs-medium-font) } .agent-details-body .agent-details-qualifications, .agent-details-body .agent-details-awards { display: flex; flex-direction: column; gap: var(--size-3) } .agent-details-body .agent-details-qualifications .qualifications-title, .agent-details-body .agent-details-qualifications .awards-title, .agent-details-body .agent-details-awards .qualifications-title, .agent-details-body .agent-details-awards .awards-title { font: var(--typography-text-xl-semibold-font) } .agent-details-body .agent-details-qualifications .qualifications-content, .agent-details-body .agent-details-qualifications .awards-content, .agent-details-body .agent-details-awards .qualifications-content, .agent-details-body .agent-details-awards .awards-content { display: flex; flex-direction: column; gap: var(--size-1) } .agent-details-body .agent-details-qualifications .qualifications-content .qualification, .agent-details-body .agent-details-qualifications .qualifications-content .award, .agent-details-body .agent-details-qualifications .awards-content .qualification, .agent-details-body .agent-details-qualifications .awards-content .award, .agent-details-body .agent-details-awards .qualifications-content .qualification, .agent-details-body .agent-details-awards .qualifications-content .award, .agent-details-body .agent-details-awards .awards-content .qualification, .agent-details-body .agent-details-awards .awards-content .award { font: var(--typography-text-sm-medium-font) } .agent-details-body .agent-details-qualifications { margin-bottom: var(--size-3) } .agent-details-divider { margin: var(--size-2) 0; width: 100%; border: 1px solid var(--colours-neutral-3) } .property-lg-card { width: 328px; background: var(--colours-base-background); box-shadow: 0px 8px 8px -4px rgba(15, 23, 41, 0.03), 0px 20px 24px -4px rgba(15, 23, 41, 0.08) } .property-lg-card .lg-card-top { width: 100%; height: 246px; background: rgba(0, 0, 0, 0.3) } .property-lg-card .lg-card-top img { width: 100%; height: 100%; object-fit: cover } .property-lg-card .lg-card-bot { padding: var(--size-3) } .property-lg-card .lg-card-bot .lg-card-bot-info { display: flex; align-items: center; justify-content: space-between } .property-lg-card .lg-card-bot .lg-card-bot-info .lg-card-bot-price { font: var(--typography-text-xl-bold-font) } .property-lg-card .lg-card-bot .lg-card-bot-info .lg-card-bot-fav .listing-fav-btn { background: transparent; border: var(--border-width-none); cursor: pointer } .property-lg-card .lg-card-bot .lg-card-bot-description div { font: var(--typography-text-xs-medium-font) } .property-lg-card .lg-card-bot .lg-card-bot-stats { padding-top: var(--size-2); display: flex; align-items: center; gap: var(--size-2) } .property-lg-card .lg-card-bot .lg-card-bot-stats .lg-card-bot-stat { display: flex; align-items: center; gap: var(--size-1) } .property-lg-card .lg-card-bot .lg-card-bot-stats .lg-card-bot-stat svg { width: var(--size-2); height: var(--size-2) } .property-lg-card .lg-card-bot .lg-card-bot-stats .lg-card-bot-stat span { font: var(--typography-text-xs-medium-font) } .agent-details-my-listings { display: grid } .agent-details-my-listings .agent-details-section-heading a { font: var(--typography-text-md-semibold-font) } .agent-details-my-listings .agent-details-my-listings-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 416px)); justify-content: center; padding: 0 var(--size-2); gap: var(--size-2) } @media screen and (min-width: 640px) { .agent-details-my-listings .agent-details-my-listings-cards { max-width: 880px; margin: 0 auto } } @media screen and (min-width: 1366px) { .agent-details-my-listings .agent-details-my-listings-cards { grid-template-columns: repeat(2, 416px); gap: var(--size-4) } } .agent-details-my-listings .agent-details-my-listings-cards .property-sm-card { max-width: 416px } .agent-details-testimonials { padding: var(--size-5) var(--size-6); background: var(--colours-base-background-1) } .agent-details-testimonials .agent-details-testimonials-swiper { --swiper-navigation-size: 48px; width: 100% } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-wrapper { margin-bottom: var(--size-6) } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-wrapper .swiper-slide .testimonial-card { text-align: center } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-wrapper .swiper-slide .testimonial-card .card-body h5 { margin-bottom: var(--size-2); font-size: 24px } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-wrapper .swiper-slide .testimonial-card .card-body div { color: var(--colours-primary-7); font: var(--typography-text-sm-bold-font) } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-pagination { position: relative } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-pagination .swiper-pagination-bullet { width: var(--size-7); height: var(--size-025); background: var(--colours-neutral-3); border-radius: var(--border-rounded-none); opacity: 1 } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-pagination .swiper-pagination-bullet-active { height: var(--size-05); background: var(--colours-primary-7) } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-button-prev, .agent-details-testimonials .agent-details-testimonials-swiper .swiper-button-next { display: none } .agent-details-sold-listings .agent-details-sold-listings-content { padding-left: var(--size-2) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper { width: 100%; height: 100% } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper .agent-details-section-heading { padding: var(--size-3) 0 } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper .swiper-wrapper { margin-bottom: var(--size-2) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper .swiper-wrapper .swiper-slide { position: relative } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper .swiper-wrapper .swiper-button-prev, .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper .swiper-wrapper .swiper-button-next { top: var(--swiper-navigation-top-offset, 25%); width: var(--size-5); height: var(--size-10); background: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper .swiper-wrapper .swiper-button-prev .icon, .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper .swiper-wrapper .swiper-button-next .icon { width: var(--size-3); height: var(--size-6) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper .swiper-wrapper .swiper-button-prev::after, .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper .swiper-wrapper .swiper-button-next::after { display: none } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper .swiper-wrapper .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 0px) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper .swiper-wrapper .swiper-button-next { right: var(--swiper-navigation-sides-offset, 0px) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper .swiper-pagination { position: relative; display: flex; align-items: center } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop { display: none } .agent-details-contact-form { padding: 0 var(--size-2); margin-bottom: 20px; } .agent-details-contact-form .agent-details-contact-form-content { width: 100%; background: var(--colours-base-background) } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform { padding: var(--size-3); display: flex; flex-direction: column; gap: var(--size-3) } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform .form-top { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--size-2); text-align: center } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform .form-top .form-agent-avatar { width: var(--size-7); height: var(--size-7); border-radius: var(--border-rounded-full) } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform .form-top .form-agent-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; border-radius: var(--border-rounded-full) } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .tab__content { display: none } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .group-one, .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .group-two { margin-bottom: var(--size-3) } @media screen and (min-width: 1440px) { .agent-details-testimonials { width: 100%; max-width: 1088px; margin: 0 auto; padding: var(--size-10) 0; background: transparent } .agent-details-testimonials .agent-details-testimonials-swiper { width: 100% } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-wrapper { margin-bottom: var(--size-6) } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-wrapper .swiper-slide .testimonial-card { width: 100%; max-width: 928px; margin: 0 auto; padding: var(--size-10) var(--size-8); background: var(--colours-base-background-1) } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-pagination { position: absolute } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-button-prev, .agent-details-testimonials .agent-details-testimonials-swiper .swiper-button-next { width: var(--button-size-md); height: var(--button-size-md); display: flex; justify-content: center; align-items: center; background: var(--colours-secondary-7) } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-button-prev .icon, .agent-details-testimonials .agent-details-testimonials-swiper .swiper-button-next .icon { width: var(--size-2); height: var(--size-2) } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 0px) } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-button-next { right: var(--swiper-navigation-sides-offset, 0px) } .agent-details-testimonials .agent-details-testimonials-swiper .swiper-button-prev::after, .agent-details-testimonials .agent-details-testimonials-swiper .swiper-button-next::after { display: none } .agent-details-sold-listings .agent-details-sold-listings-content { width: 100%; max-width: 1312px; margin: 0 auto; padding-left: 0; overflow: hidden } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper { display: none } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop { position: relative; display: block; height: 726px } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper { position: relative } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide { width: 1088px; height: 608px } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide .agent-details-section-heading { display: none } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide a { display: block; width: 100%; height: 100% } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide a img { width: 100%; height: 100%; display: block; object-fit: cover } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide .sold-listings-details { display: none } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide-prev, .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide-next { margin-top: calc(0px - var(--size-5)) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide-active .agent-details-section-heading { display: block } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide-active .sold-listings-details { width: 864px; margin: 0 auto; padding: var(--size-3) 0; display: flex; justify-content: space-between; align-items: center } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide-active .sold-listings-details .sold-listings-details-price-desc div { color: var(--colours-neutral-8); font: var(--typography-text-md-regular-font) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide-active .sold-listings-details .sold-listings-details-stats { display: flex; align-items: center; gap: var(--size-3) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide-active .sold-listings-details .sold-listings-details-stats .sold-listings-details-stat div { display: flex; align-items: center; gap: var(--size-1) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide-active .sold-listings-details .sold-listings-details-stats .sold-listings-details-stat div div { color: var(--colours-neutral-10); font: var(--typography-text-xl-bold-font) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-wrapper .swiper-slide-active .sold-listings-details .sold-listings-details-stats .sold-listings-details-stat div { color: var(--colours-neutral-6); font: var(--typography-text-xs-semibold-font) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-pagination .swiper-pagination-bullet { width: var(--size-7); height: var(--size-025); background: var(--colours-neutral-3); border-radius: var(--border-rounded-none); opacity: 1 } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-pagination .swiper-pagination-bullet-active { height: var(--size-05); background: var(--colours-primary-7) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-button-prev, .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-button-next { top: var(--swiper-navigation-top-offset, 45%); color: var(--colours-base-white) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 40px) } .agent-details-sold-listings .agent-details-sold-listings-content .agent-details-sold-listings-swiper-desktop .swiper-button-next { right: var(--swiper-navigation-sides-offset, 40px) } .agent-details-contact-form .agent-details-contact-form-content { padding: 0 } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form { width: 100%; max-width: 1088px; margin: 0 auto } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform { padding: var(--size-10); display: flex; flex-direction: column; gap: var(--size-5) } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform .form-top { flex-direction: row; justify-content: flex-start; gap: var(--size-3); text-align: left } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform .form-top .form-agent-avatar { width: var(--size-10); height: var(--size-10) } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form { display: flex; flex-wrap: wrap; justify-content: space-between } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .tab__content { display: none } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .group-one { width: 304px; margin-bottom: 0 } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .group-two { width: 616px; margin-bottom: 0 } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .group-two fieldset .message .input-group { height: 336px } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .group-three { width: 100% } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .fefform-extras { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--size-2) } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .fefform-extras .policy { order: 1; width: 352px; margin-top: var(--size-2); text-align: left } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .fefform-extras .policy p, .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .fefform-extras .policy a { font: var(--typography-text-xs-medium-font) } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .fefform-extras .captcha-policy { order: 3; width: 100% } .agent-details-contact-form .agent-details-contact-form-content #agent_contact_form .fefform form .fefform-extras .button-group { order: 2; max-width: fit-content } .modal-container .modal { width: 600px } .modal-container .modal .modal-content { display: flex; flex-direction: column; justify-content: center; align-items: center } .modal-container .modal .modal-content .agent-details-modal-agent-name { margin-bottom: var(--size-3); color: var(--colours-neutral-8) } .modal-container .modal .modal-content .agent-details-social-icons { margin-bottom: var(--size-5); display: flex; align-items: center; gap: var(--size-1) } .modal-container .modal .modal-content .agent-details-social-icons .agent-details-social-icon { width: var(--button-size-lg); height: var(--button-size-lg); display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid #e1e7ef; border-radius: 999px; cursor: pointer } .modal-container .modal .modal-content .agent-details-social-icons .agent-details-social-icon .icon { width: var(--size-3); height: var(--size-3) } .modal-container .modal .modal-content #agent_details_share_form .fefform { box-shadow: none } .modal-container .modal .modal-content #agent_details_share_form .fefform .form-top { margin-bottom: var(--size-3); text-align: center } .modal-container .modal .modal-content #agent_details_share_form .fefform .form-top div { color: var(--colours-neutral-8); font: var(--typography-text-lg-semibold-font) } .modal-container .modal .modal-content #agent_details_share_form .fefform form section { margin-bottom: var(--size-2) } .modal-container .modal .modal-content #agent_details_share_form .fefform form section fieldset { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--size-1) } .modal-container .modal .modal-content #agent_details_share_form .fefform form section fieldset .feffield { width: calc(50% - var(--size-05)) } .modal-container .modal .modal-content #agent_details_share_form .fefform form section fieldset .feffield:last-child { width: 100% } .modal-container .modal .modal-content #agent_details_share_form .fefform form section fieldset .message .input-group { height: 80px; overflow: hidden } .modal-container .modal .modal-content #agent_details_share_form .fefform form .fefform-extras { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--size-2) } .modal-container .modal .modal-content #agent_details_share_form .fefform form .fefform-extras .policy { order: 1; width: 352px; margin-top: var(--size-2); text-align: left } .modal-container .modal .modal-content #agent_details_share_form .fefform form .fefform-extras .policy p, .modal-container .modal .modal-content #agent_details_share_form .fefform form .fefform-extras .policy a { font: var(--typography-text-xs-medium-font) } .modal-container .modal .modal-content #agent_details_share_form .fefform form .fefform-extras .captcha-policy { order: 3; width: 100% } .modal-container .modal .modal-content #agent_details_share_form .fefform form .fefform-extras .button-group { order: 2; max-width: 87px } } .listing-details-hero { grid-area: gallery; position: relative } @media screen and (min-width: 1188px) { .listing-details-hero { width: 100%; max-width: 1600px; min-width: 0; min-height: 774px; z-index: 10; margin: 0 auto var(--size-4) auto } } .listing-details-hero .card-badges { position: absolute; top: 0; left: 0; max-width: 100%; display: flex; align-items: center; gap: var(--size-025); z-index: 10 } .listing-details-hero .card-badges .card-badge { height: var(--button-size-lg); padding: 0 var(--size-3); display: flex; justify-content: center; align-items: center; gap: var(--badge-spacing-lg); background: var(--badge-bg-neutral); color: var(--badge-text-neutral); font: var(--typography-text-md-medium-font); border-radius: var(--radius-default) } .listing-details-hero .listing-details-swiper-container { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden } @media screen and (min-width: 1188px) { .listing-details-hero .listing-details-swiper-container { all: unset; position: relative } } .listing-details-hero .listing-details-swiper-container .listing-details-swiper { position: relative } @media screen and (min-width: 1188px) { .listing-details-hero .listing-details-swiper-container .listing-details-swiper { width: 100%; height: 774px; display: block; overflow: hidden } } .listing-details-hero .listing-details-swiper-container .listing-details-swiper:not(.swiper-initialized) .swiper-slide { height: 100% } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-wrapper { display: flex; align-items: center; justify-content: center; text-overflow: clip; position: relative } @media screen and (min-width: 1188px) { .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-wrapper { width: 100%; height: 100% } } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-slide { width: 100%; aspect-ratio: 16 / 9; display: flex; justify-content: center; align-items: center; box-shadow: none } @media screen and (min-width: 1188px) { .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-slide { height: 774px; max-width: 1376px; width: calc(100% - 60px); background-position: center; background-size: cover; box-shadow: none } } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-slide .swiper-img { width: 100%; height: 100% } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-slide img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-button { width: var(--size-5); height: var(--size-10); display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.2); color: var(--colours-base-white) } @media screen and (min-width: 1188px) { .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-button { top: 0; width: 120px; height: 100%; background: none; margin-top: 0 } } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-button-prev { left: 0 } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-button-next { right: 0 } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-pagination { display: none } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 9999999; display: none } @media screen and (min-width: 1188px) { .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer { display: block } } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-pagination-fraction, .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-pagination-custom { all: unset; position: relative; display: flex; gap: var(--size-1) } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-pagination-fraction .fraction-container, .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-pagination-custom .fraction-container { height: var(--badge-size-md); padding: 0 var(--badge-spacing-md); display: flex; justify-content: center; align-items: center; gap: var(--size-05); background: var(--badge-bg-neutral); color: var(--badge-text-neutral); font: var(--typography-text-xs-semibold-font); border: var(--border-width-none); border-radius: var(--border-rounded-sm); cursor: pointer } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-footer-content { width: calc(100% - 60px); max-width: 1376px; margin: 0 auto; padding: var(--size-2); display: flex; justify-content: space-between; align-items: flex-end } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-footer-content .listing-details-hero-overlay { position: relative; display: flex; align-items: center; gap: var(--size-1) } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-footer-content .listing-details-hero-overlay .listing-details-hero-overlay-btn { height: var(--button-size-lg); padding: var(--spacing-button-spacing-lg-padding); display: flex; justify-content: center; align-items: center; gap: var(--size-1); background: var(--buttons-primary-white-background); color: var(--buttons-primary-white-color); font: var(--typography-text-md-medium-font); border: var(--border-width-none); border-radius: var(--border-rounded-none); cursor: pointer } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-footer-content .listing-details-hero-overlay .listing-details-hero-overlay-btn:hover { background: var(--buttons-primary-white-background-hover); color: var(--buttons-primary-white-color-hover) } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-footer-content .listing-details-hero-overlay .listing-details-hero-overlay-btn:disabled { background: var(--buttons-primary-white-background-disabled); color: var(--buttons-primary-white-color-disabled) } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-footer-content .listing-details-hero-overlay .listing-details-hero-overlay-btn.active { background: var(--buttons-primary-background); color: var(--buttons-primary-color) } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-footer-content .listing-details-hero-overlay .listing-details-hero-overlay-btn.active:hover { background: var(--buttons-primary-background-hover); color: var(--buttons-primary-color-hover) } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-footer-content .listing-details-hero-overlay .listing-details-hero-overlay-btn.active:disabled { background: var(--buttons-primary-background-disabled); color: var(--buttons-primary-color-disabled) } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-footer .swiper-footer-content .swiper-pagination { display: flex } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 0px) } .listing-details-hero .listing-details-swiper-container .listing-details-swiper .swiper-button-next { right: var(--swiper-navigation-sides-offset, 0px) } .listing-details-hero .listing-details-floor-plans-swiper-container .listing-details-floor-plans-swiper .swiper-wrapper .swiper-slide img { object-fit: fill } .listing-details-hero .listing-details-swiper-thumbnails { width: 328px; height: 64px; margin: 0 auto; margin-top: calc(0px - var(--size-2)); overflow: hidden } @media screen and (min-width: 1188px) { .listing-details-hero .listing-details-swiper-thumbnails { display: none } } .listing-details-hero .listing-details-swiper-thumbnails .first-slide-overlay, .listing-details-hero .listing-details-swiper-thumbnails .last-slide-overlay { position: absolute; top: 0; left: 0; width: 82px; height: 64px; z-index: 2; pointer-events: none } .listing-details-hero .listing-details-swiper-thumbnails .last-slide-overlay { left: unset; right: 0 } .listing-details-hero .listing-details-swiper-thumbnails .listing-details-image-thumbnail-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); color: var(--colours-base-white) } .listing-details-hero .listing-details-swiper-thumbnails .swiper-wrapper .swiper-slide { background: var(--colours-base-black) } .listing-details-hero .listing-details-swiper-thumbnails .swiper-wrapper .swiper-slide img { opacity: 0.4; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center } .listing-details-hero .listing-details-swiper-thumbnails .swiper-wrapper .swiper-slide-thumb-active img { opacity: 1 } .listing-details-hero .listing-details-floor-plans-swiper-container, .listing-details-hero .listing-details-floor-plans-thumbnails, .listing-details-hero .listing-details-floor-plans, .listing-details-hero .listing-details-progress-swiper-container, .listing-details-hero .listing-details-progress-thumbnails, .listing-details-hero .listing-details-progress, .listing-details-hero .listing-details-video { display: none } .listing-details-hero .listing-details-hero-overlay { display: none } .listing-details-hero .listing-details-hero-overlay-btn.active { background: var(--buttons-primary-background) } .listing-details-hero .listing-details-hero-overlay-btn.active .icon { display: none } .listing-details-hero .listing-details-hero-overlay-btn.active .icon.active { display: block } .listing-details-hero-btns { width: 100%; max-width: 272px; margin: 0 auto; padding: var(--size-2) 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--size-1) } @media screen and (min-width: 1188px) { .listing-details-hero-btns { display: none } } .listing-details-hero-btns .listing-details-hero-btn { width: var(--button-size-md); height: var(--button-size-md); display: flex; justify-content: center; align-items: center; background: var(--buttons-primary-ghost-background); border: var(--buttons-primary-ghost-border); border-radius: var(--border-rounded-none); cursor: pointer } .listing-details-hero-btns .listing-details-hero-btn .icon { width: var(--size-3); height: var(--size-3) } .listing-details-hero-btns .listing-details-hero-btn .icon.active { display: none } .listing-details-hero-btns .listing-details-hero-btn.active { background: var(--buttons-primary-background); border: var(--border-width-none) } .listing-details-hero-btns .listing-details-hero-btn.active .icon { display: none } .listing-details-hero-btns .listing-details-hero-btn.active .icon.active { display: block } .listing-details-hero-btns .open-floor-plans-grid, .listing-details-hero-btns .open-progress-grid { display: none } .listing-details-img { width: 100%; aspect-ratio: 16/9 } .listing-details-img img { width: 100%; height: 100%; display: inline-block; object-fit: cover; object-position: center center } .listing-details-video { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden } .listing-details-video .video-frame { background: #000000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10 } .listing-details-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10 } .listing-details-video .listing-details-hero-overlay { position: absolute; left: 0; bottom: 0; padding: var(--size-2); display: flex; align-items: center; gap: var(--size-1); z-index: 20 } .listing-details-video .listing-details-hero-overlay .listing-details-hero-overlay-btn { height: var(--button-size-lg); padding: var(--spacing-button-spacing-lg-padding); display: flex; justify-content: center; align-items: center; gap: var(--size-1); background: var(--buttons-primary-white-background); color: var(--buttons-primary-white-color); font: var(--typography-text-md-medium-font); border: var(--border-width-none); border-radius: var(--border-rounded-none); cursor: pointer } .listing-details-video .listing-details-hero-overlay .listing-details-hero-overlay-btn:hover { background: var(--buttons-primary-white-background-hover); color: var(--buttons-primary-white-color-hover) } .listing-details-video .listing-details-hero-overlay .listing-details-hero-overlay-btn:disabled { background: var(--buttons-primary-white-background-disabled); color: var(--buttons-primary-white-color-disabled) } .listing-details-video .listing-details-hero-overlay .listing-details-hero-overlay-btn.active { background: var(--buttons-primary-background); color: var(--buttons-primary-color) } .listing-details-video .listing-details-hero-overlay .listing-details-hero-overlay-btn.active:hover { background: var(--buttons-primary-background-hover); color: var(--buttons-primary-color-hover) } .listing-details-video .listing-details-hero-overlay .listing-details-hero-overlay-btn.active:disabled { background: var(--buttons-primary-background-disabled); color: var(--buttons-primary-color-disabled) } .listing-details-side-content { grid-area: side-content; max-width: 72px; display: flex; align-items: center; gap: var(--size-1) } .listing-details-side-content button { width: var(--button-size-sm); height: var(--button-size-sm); display: flex; flex: 0 0 var(--button-size-sm); justify-content: center; align-items: center; background: var(--buttons-primary-ghost-background); border: var(--buttons-primary-ghost-border); border-radius: var(--border-rounded-none); cursor: pointer } .listing-details-side-content button svg { width: var(--size-2); height: var(--size-2) } @media screen and (min-width: 1188px) { .listing-details-side-content { align-items: flex-start } .listing-details-side-content .share-property { display: none } .listing-details-side-content .card-fav-btn { width: var(--button-size-lg); height: var(--button-size-lg); flex: 0 0 var(--button-size-lg); min-width: 0; display: inline-flex; justify-content: center; align-items: center; background: var(--buttons-primary-ghost-background); border: var(--buttons-primary-ghost-border); border-radius: var(--border-rounded-full); cursor: pointer } .listing-details-side-content .card-fav-btn svg { width: var(--size-3); height: var(--size-3) } } .favorites-button { display: flex; justify-content: center; align-items: center; height: fit-content; width: fit-content; background-color: transparent; border: var(--border-width-none); cursor: pointer } .favorites-button .hollow-heart-icon { display: block } .favorites-button .filled-heart-icon { display: none } .favorites-button.active .hollow-heart-icon { display: none } .favorites-button.active .filled-heart-icon { display: block } .favorites-button:hover svg { fill: var(--colours-primary-7); opacity: 0.7 } .favorites-button .hollow-heart-icon, .favorites-button .filled-heart-icon { fill: var(--colours-primary-7); stroke: none; margin-bottom: auto } .listing-details-info-detail { display: flex; flex-direction: column } .listing-details-info-on-show { display: flex; flex-direction: column; gap: var(--size-1) } .listing-details-info-on-show .on-show-heading { font: var(--typography-text-md-semibold-font) } .listing-details-info-on-show .on-show-content { display: flex; flex-direction: column; gap: var(--size-3) } .listing-details-info-on-show .on-show-content .content-top { display: flex; flex-direction: column; gap: var(--size-1) } .listing-details-info-on-show .on-show-content .content-top .on-show-row { display: grid; grid-template-columns: 1fr; gap: var(--size-1); width: 100%; min-width: 0 } @media screen and (min-width: 1188px) { .listing-details-info-on-show .on-show-content .content-top .on-show-row { grid-template-columns: 1fr 1fr auto } } .listing-details-info-on-show .on-show-content .content-top .on-show-row .on-show-time, .listing-details-info-on-show .on-show-content .content-top .on-show-row .on-show-date { display: flex; align-items: center; gap: var(--size-2); font: var(--typography-text-sm-medium-font) } .listing-details-info-on-show .on-show-content .content-top .on-show-row .on-show-add-to-calendar { justify-self: flex-end } .listing-details-info-on-show .on-show-content .content-mid { display: flex; flex-direction: column; gap: var(--size-1) } .listing-details-info-on-show .on-show-content .content-mid .on-show-directions { font: var(--typography-text-sm-medium-font) } .listing-details-info-on-show .on-show-content .content-bot form { display: flex; flex-direction: column; gap: var(--size-2) } @media screen and (min-width: 1188px) { .listing-details-info-on-show .on-show-content .content-bot form { flex-direction: row } } @media screen and (min-width: 1188px) { .listing-details-info-on-show .on-show-content .content-bot form .feffield { width: 100% } } .listing-details-info-on-show .on-show-content .content-bot form .feffield .input-group { width: 100%; background: var(--fields-form-field-background-default); border: var(--fields-form-field-border-default) } .listing-details-info-on-show .on-show-content .content-bot form .feffield .input-group .input-field { flex: 0 1 100%; min-width: 0; width: 100%; background: none; color: var(--colours-neutral-8); font: var(--typography-text-sm-medium-font); min-height: var(--size-6); padding: 0 var(--spacing-form-field-space-default-padding); border: var(--border-width-none); outline: none } .listing-details-info-on-show .on-show-content .content-bot form .feffield .input-group .input-field::placeholder { color: var(--colours-neutral-5); font: var(--typography-text-sm-medium-font) } .listing-details-info-on-show .on-show-content .content-bot form button { width: 100%; height: var(--button-size-md); padding: var(--spacing-button-spacing-md-padding); font: var(--typography-text-sm-medium-font) } @media screen and (min-width: 1366px) { .listing-details-info-on-show .on-show-content .content-bot form button { width: unset; white-space: nowrap } } #modalOnShowAddToCalendar .modal { display: flex; align-items: center; justify-content: center } @media screen and (min-width: 1188px) { #modalOnShowAddToCalendar .modal { max-width: 460px; max-height: 290px } } #modalOnShowAddToCalendar .modal .modal-content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--size-3); padding: var(--size-3) } #modalOnShowAddToCalendar .modal .modal-content p { font: var(--typography-text-lg-semibold-font) } #modalOnShowAddToCalendar .modal .modal-content .social-btns { display: flex; justify-content: center; align-items: center; gap: var(--size-1) } #modalOnShowAddToCalendar .modal .modal-content .social-btns .social-btn { width: var(--button-size-lg); height: var(--button-size-lg); display: flex; justify-content: center; align-items: center; border-radius: var(--border-rounded-full) } #modalOnShowAddToCalendar .modal .modal-content .download-ics { height: var(--button-size-md); padding: var(--spacing-button-spacing-md-padding); display: flex; justify-content: center; align-items: center } #modalOnShowAddToCalendar .modal .close-button { width: var(--button-size-md); min-width: var(--button-size-md); height: var(--button-size-md); margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background: var(--colours-primary-7); border: 0 none; position: absolute; top: var(--size-2); right: var(--size-2) } #modalOnShowAddToCalendar .modal .close-button .icon { width: var(--size-3); height: var(--size-3) } .listing-details-info-on-auction { display: flex; flex-direction: column; gap: var(--size-1) } .listing-details-info-on-auction .on-auction-heading { font: var(--typography-text-md-semibold-font) } .listing-details-info-on-auction .on-auction-content { display: flex; flex-direction: column; gap: var(--size-3) } .listing-details-info-on-auction .on-auction-content .content-top { display: flex; flex-direction: column; gap: var(--size-1) } @media screen and (min-width: 1366px) { .listing-details-info-on-auction .on-auction-content .content-top { flex-direction: row } } .listing-details-info-on-auction .on-auction-content .content-top .top-left { display: flex; flex-direction: column; gap: var(--size-1) } .listing-details-info-on-auction .on-auction-content .content-top .top-left .auction-time, .listing-details-info-on-auction .on-auction-content .content-top .top-left .auction-date { display: flex; align-items: center; gap: var(--size-2); font: var(--typography-text-sm-medium-font) } @media screen and (min-width: 1366px) { .listing-details-info-on-auction .on-auction-content .content-top .top-left { flex-direction: row; justify-content: space-between; gap: var(--size-4) } .listing-details-info-on-auction .on-auction-content .content-top .top-left .auction-date { width: 240px } .listing-details-info-on-auction .on-auction-content .content-top .top-left .auction-add-to-calendar { width: fit-content; font: var(--typography-text-sm-semibold-font) } } @media screen and (min-width: 1366px) { .listing-details-info-on-auction .on-auction-content .content-top .top-right { margin-left: auto } } .listing-details-info-on-auction .on-auction-content .content-top .top-right .auction-add-to-calendar { width: fit-content; font: var(--typography-text-sm-semibold-font) } .listing-details-info-on-auction .on-auction-content .content-bot { display: flex; flex-direction: column; gap: var(--size-3) } .listing-details-info-on-auction .on-auction-content .content-bot .on-auction-lots { display: flex; flex-direction: column; gap: var(--size-1) } .listing-details-info-on-auction .on-auction-content .content-bot .on-auction-lots .lots-heading { color: var(--colours-neutral-10); font: var(--typography-text-sm-semibold-font) } .listing-details-info-on-auction .on-auction-content .content-bot .on-auction-lots .lots-number { color: var(--colours-primary-7); font: var(--typography-text-md-semibold-font) } .listing-details-info-on-auction .on-auction-content .content-bot .on-auction-venue { display: flex; flex-direction: column; gap: var(--size-1) } .listing-details-info-on-auction .on-auction-content .content-bot .on-auction-venue .venue-heading { color: var(--colours-neutral-10); font: var(--typography-text-sm-semibold-font) } .listing-details-info-on-auction .on-auction-content .content-bot .on-auction-venue .venue-address { font: var(--typography-text-sm-medium-font) } .listing-details-info-on-auction .on-auction-content .content-bot form { display: flex; flex-direction: column; gap: var(--size-2) } @media screen and (min-width: 1366px) { .listing-details-info-on-auction .on-auction-content .content-bot form { flex-direction: row } } @media screen and (min-width: 1366px) { .listing-details-info-on-auction .on-auction-content .content-bot form .feffield { width: 100% } } .listing-details-info-on-auction .on-auction-content .content-bot form .feffield .input-group { width: 100%; background: var(--fields-form-field-background-default); border: var(--fields-form-field-border-default) } .listing-details-info-on-auction .on-auction-content .content-bot form .feffield .input-group .input-field { flex: 0 1 100%; min-width: 0; width: 100%; background: none; min-height: var(--size-6); padding: 0 var(--spacing-form-field-space-default-padding); color: var(--colours-neutral-8); font: var(--typography-text-sm-medium-font); border: var(--border-width-none); outline: none } .listing-details-info-on-auction .on-auction-content .content-bot form .feffield .input-group .input-field::placeholder { color: var(--colours-neutral-5); font: var(--typography-text-sm-medium-font) } .listing-details-info-on-auction .on-auction-content .content-bot form button { width: 100%; height: var(--button-size-md); padding: var(--spacing-button-spacing-md-padding); font: var(--typography-text-sm-medium-font) } @media screen and (min-width: 1366px) { .listing-details-info-on-auction .on-auction-content .content-bot form button { width: unset; white-space: nowrap } } #modalAuctionAddToCalendar .modal { display: flex; align-items: center; justify-content: center } @media screen and (min-width: 1188px) { #modalAuctionAddToCalendar .modal { max-width: 460px; max-height: 290px } } #modalAuctionAddToCalendar .modal .modal-content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--size-3); padding: var(--size-3) } #modalAuctionAddToCalendar .modal .modal-content p { font: var(--typography-text-lg-semibold-font) } #modalAuctionAddToCalendar .modal .modal-content .social-btns { display: flex; justify-content: center; align-items: center; gap: var(--size-1) } #modalAuctionAddToCalendar .modal .modal-content .social-btns .social-btn { width: var(--button-size-lg); height: var(--button-size-lg); display: flex; justify-content: center; align-items: center; border-radius: var(--border-rounded-full) } #modalAuctionAddToCalendar .modal .modal-content .download-ics { height: var(--button-size-md); padding: var(--spacing-button-spacing-md-padding); display: flex; justify-content: center; align-items: center } #modalAuctionAddToCalendar .modal .close-button { width: var(--button-size-md); min-width: var(--button-size-md); height: var(--button-size-md); margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background: var(--colours-primary-7); border: 0 none; position: absolute; top: var(--size-2); right: var(--size-2) } #modalAuctionAddToCalendar .modal .close-button .icon { width: var(--size-3); height: var(--size-3) } .listing-details-overview .overview-logo { width: 100%; height: fit-content; margin-bottom: var(--size-3); padding: var(--size-3); display: flex; justify-content: center; align-items: center; border: var(--border-width-xxs) solid var(--colours-neutral-3) } .listing-details-overview .overview-logo img { display: block; object-fit: cover; object-position: center center } .listing-details-overview .listing-details-section-heading { margin-bottom: var(--size-3) } .listing-details-overview .listing-details-section-heading h1 { margin-bottom: var(--size-1); text-wrap: unset } .listing-details-overview .listing-details-section-heading .listing-details-address { font: var(--typography-text-xs-medium-font) } .listing-details-overview .overview-holiday-display-price { margin-bottom: var(--size-4) } .listing-details-overview .overview-holiday-season-prices { display: flex; align-items: center; gap: var(--size-4); margin-bottom: var(--size-4) } .listing-details-overview .overview-holiday-season-prices .overview-holiday-season-price { display: flex; flex-direction: column; gap: var(--size-05) } .listing-details-overview .overview-holiday-season-prices .overview-holiday-season-price span { color: var(--colours-neutral-10); font: var(--typography-text-sm-semibold-font) } .listing-details-overview .overview-holiday-season-prices .overview-holiday-season-price span:last-child { color: var(--colours-primary-7); font: var(--typography-text-md-semibold-font) } .listing-details-overview .listing-details-info-detail:nth-child(1) { order: 1 } @media screen and (min-width: 1188px) { .listing-details-overview .listing-details-info-detail:nth-child(1) { order: unset } } .listing-details-overview .listing-details-info-detail:nth-child(2) { order: 3 } @media screen and (min-width: 1188px) { .listing-details-overview .listing-details-info-detail:nth-child(2) { order: unset } } .listing-details-overview .listing-details-info-detail:nth-child(3) { order: 4 } @media screen and (min-width: 1188px) { .listing-details-overview .listing-details-info-detail:nth-child(3) { order: unset } } .listing-details-overview .listing-details-info-detail:nth-child(4) { order: 2 } @media screen and (min-width: 1188px) { .listing-details-overview .listing-details-info-detail:nth-child(4) { order: unset } } .listing-details-overview .listing-details-info-detail:nth-child(4) div { display: flex; align-items: center; gap: var(--size-05) } .listing-details-overview .listing-details-info-detail:nth-child(4) div a { width: var(--size-2); height: var(--size-2); display: flex; justify-content: center; align-items: center } .listing-details-overview .overview-content .overview-content-intro { margin-bottom: var(--size-3); word-wrap: break-word } .listing-details-overview .overview-content .overview-content-btn { height: var(--button-size-md); padding: var(--spacing-button-spacing-md-padding); font: var(--typography-text-sm-medium-font) } .listing-details-overview .overview-content .listing-details-special-offer { margin-top: var(--size-3); padding: var(--size-4); display: flex; flex-direction: column; gap: var(--size-3); border: var(--border-width-xxs) solid var(--colours-neutral-3) } .listing-details-overview .overview-content .listing-details-special-offer .special-offer-top { display: flex; flex-direction: column; gap: var(--size-1) } .listing-details-overview .overview-content .listing-details-special-offer .special-offer-top .special-offer-end-date { color: var(--colours-neutral-10); font: var(--typography-text-md-semibold-font) } .listing-details-overview .overview-content .listing-details-special-offer .special-offer-bot .special-offer-btn { width: 116px; height: var(--button-size-md); padding: var(--spacing-button-spacing-md-padding); font: var(--typography-text-sm-medium-font); border: var(--border-width-none); cursor: pointer } .listing-details-overview .overview-content .overview-content-totals { margin-top: var(--size-3); display: flex; justify-content: space-between; align-items: flex-end } .listing-details-overview .overview-content .overview-content-totals span { margin-bottom: var(--size-05) } .listing-details-overview .overview-content .overview-content-totals div p:first-child { color: var(--colours-neutral-10); font: var(--typography-text-sm-semibold-font) } .listing-details-overview .overview-content .overview-content-totals div p:last-child { color: var(--colours-primary-7); font: var(--typography-text-sm-semibold-font) } .listing-details-overview .overview-content .overview-content-totals .total { text-align: right } .listing-details-property-types .listing-details-property-types-cards { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--size-1) } .listing-details-property-types .listing-details-property-types-cards .property-types-card { width: 100%; padding: var(--size-3); border: var(--border-width-xxs) solid var(--colours-neutral-3) } .listing-details-property-types .listing-details-property-types-cards .property-types-card .card-top .plan-name { font: var(--typography-text-sm-bold-font) } .listing-details-property-types .listing-details-property-types-cards .property-types-card .card-top .priced-from { font: var(--typography-text-md-medium-font) } .listing-details-property-types .listing-details-property-types-cards .property-types-card .card-top .priced-from span { font: var(--typography-text-xl-regular-font) } .listing-details-property-types .listing-details-property-types-cards .property-types-card .card-top .property-type-and-units { font: var(--typography-text-sm-medium-font) } .listing-details-property-types .listing-details-property-types-cards .property-types-card .card-divider { width: 100%; height: 1px; margin: var(--size-1) 0; background: var(--colours-neutral-3) } .listing-details-property-types .listing-details-property-types-cards .property-types-card .card-bot { width: 90%; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--size-2) } .listing-details-property-types .listing-details-property-types-cards .property-types-card .card-bot .card-stat { display: flex; align-items: center; gap: var(--size-1); font: var(--typography-text-sm-medium-font) } .listing-details-features .features-block { display: flex; flex-direction: column; gap: var(--size-2); color: var(--colours-neutral-10); font: var(--typography-text-md-semibold-font) } .listing-details-features .features-block .carports-text { flex: 1 1 0 } .listing-details-features .features-block .carports-text .carports-sub-text { font: var(--typography-text-xxs-regular-font); white-space: normal; overflow-wrap: break-word } .listing-details-features .features-block .features-icons { /* margin-bottom: var(--size-4); */ display: flex; flex-direction: column; gap: var(--size-1) } .features-block .features-icons .feature-icons-box{ display: flex; align-items: flex-start !important; flex-direction: column; margin-bottom: 25px; } .features-block .features-icons .feature-icons-box .tags{ flex-wrap: wrap; } @media screen and (min-width: 640px) { .listing-details-features .features-block .features-icons { display: grid; grid-template-columns: repeat(3, 1fr); /* gap: var(--size-2) var(--size-4) */ } } @media screen and (min-width: 640px) { .listing-details-features .features-block .feature-icons-full { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--size-2) var(--size-4) } } .listing-details-features .features-block .features-icons div { width: 100%; display: flex; align-items: center; gap: var(--size-2); color: var(--colours-neutral-8); font: var(--typography-text-sm-medium-font); white-space: nowrap } .listing-details-features .features-block .features-icons div .icon { width: var(--size-3) !important; height: var(--size-3) !important; flex: 0 0 var(--size-3) !important; } .listing-details-features .features-block .features-icons div span{ word-wrap: break-word; white-space: normal; overflow-wrap: break-word; } .listing-details-features .listing-extras .features-icons { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--size-1) } @media screen and (min-width: 1188px) { .listing-details-features .listing-extras .features-icons { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-2) var(--size-4) } } .listing-details-features .features-project-block .features-icons { margin-bottom: unset; display: none } .listing-details-features .features-project-block .features-icons p, .listing-details-features .features-project-block .features-icons a { margin-bottom: unset } .listing-details-features .features-project-block .visible { display: flex } .listing-details-features .features-project-block .show-more-btn { width: fit-content } @media print { .listing-details-location { margin-top: calc(0px - var(--size-5)) } } .listing-details-location .listing-details-section-heading { margin-bottom: var(--size-2) } .listing-details-location .location-content { display: flex; flex-direction: column; gap: var(--size-2) } .listing-details-location .location-content .location-description { margin-bottom: var(--size-2) } .listing-details-location .location-content .location-description .location-description-content { word-wrap: break-word; margin-bottom: var(--size-2) } .listing-details-location .location-content .location-description a { font: var(--typography-text-md-semibold-font) } .listing-details-location .location-content .location-tabs-container .location-tabs-header { width: 100%; margin-bottom: var(--size-1); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-1) } @media screen and (min-width: 1366px) { .listing-details-location .location-content .location-tabs-container .location-tabs-header { grid-template-columns: repeat(4, 1fr) } } @media print { .listing-details-location .location-content .location-tabs-container .location-tabs-header { display: none !important } } .listing-details-location .location-content .location-tabs-container .location-tabs-header .tab-heading { height: var(--button-size-md); padding: var(--spacing-button-spacing-md-padding); display: flex; justify-content: center; align-items: center; background: var(--buttons-primary-ghost-background); color: var(--buttons-primary-ghost-color); border: var(--buttons-primary-ghost-border); cursor: pointer } .listing-details-location .location-content .location-tabs-container .location-tabs-header .tab-heading[aria-selected="true"] { background: var(--buttons-primary-background); color: var(--buttons-primary-color); border: var(--border-width-none) } .listing-details-location .location-content .location-tabs-container .location-tabs-header .tab-heading[aria-selected="true"]:hover { background: var(--buttons-primary-background-hover); color: var(--buttons-primary-color-hover); border: var(--border-width-none) } .listing-details-location .location-content .location-tabs-container .location-tabs-header .tab-heading:hover { background: var(--buttons-primary-ghost-background-hover) } .listing-details-location .location-content .location-tabs-container .tab[hidden] { display: none } .listing-details-location .location-content .location-tabs-container .tab { display: block } .listing-details-location .location-content .location-tabs-container .tab[id="amenities-view"] .tab-content, .listing-details-location .location-content .location-tabs-container .tab[id="schools-view"] .tab-content { padding: var(--size-2); border: var(--border-width-xxs) solid var(--colours-neutral-3) } .listing-details-location .location-content .location-tabs-container .tab[id="amenities-view"] .amenities-row, .listing-details-location .location-content .location-tabs-container .tab[id="schools-view"] .amenities-row { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--size-2) } .listing-details-location .location-content .location-tabs-container .tab[id="amenities-view"] .amenities-row .amenities-block .amenities-heading, .listing-details-location .location-content .location-tabs-container .tab[id="schools-view"] .amenities-row .amenities-block .amenities-heading { margin-bottom: var(--size-1); font: var(--typography-text-md-semibold-font) } .listing-details-location .location-content .location-tabs-container .tab[id="amenities-view"] .amenity, .listing-details-location .location-content .location-tabs-container .tab[id="schools-view"] .amenity { font: var(--typography-text-sm-medium-font) } .listing-details-location .location-content .location-tabs-container .listing-details-map-view { position: relative; width: 100%; height: 480px; border: var(--border-width-xxs) solid var(--colours-neutral-3) } .listing-details-location .location-content .location-tabs-container .listing-details-map-view img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center } .listing-details-location .location-content .location-tabs-container .listing-details-map-view .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px } .listing-details-location .location-content .location-tabs-container .listing-details-map-view .map-view-map { width: 100%; height: 480px; display: none; cursor: pointer } .listing-details-location .location-content .location-average-price, .listing-details-location .location-content .location-recently-sold { padding: var(--size-3); border: var(--border-width-xxs) solid var(--colours-neutral-3) } .listing-details-location .location-content .location-average-price { display: flex; flex-direction: column; gap: var(--size-3) } .listing-details-location .location-content .location-average-price .average-price-top { display: flex; flex-direction: column; gap: var(--size-05) } .listing-details-location .location-content .location-average-price .average-price-top .title { color: var(--colours-neutral-10); font: var(--typography-text-xl-semibold-font) } .listing-details-location .location-content .location-average-price .average-price-top .legends { display: flex; justify-content: space-between; align-items: center; gap: var(--size-2) } @media screen and (min-width: 1188px) { .listing-details-location .location-content .location-average-price .average-price-top .legends { justify-content: flex-start } } .listing-details-location .location-content .location-average-price .average-price-top .legends .legend { display: flex; align-items: center; gap: var(--size-1) } .listing-details-location .location-content .location-average-price .average-price-top .legends .legend .legend-dot { width: var(--size-1); height: var(--size-1); border-radius: var(--border-rounded-full) } .listing-details-location .location-content .location-average-price .average-price-top .legends .legend .legend-text { font: var(--typography-text-xxs-semibold-font) } .listing-details-location .location-content .location-average-price .average-price-top .legends .freehold .legend-dot { background: var(--colours-primary-7); color: var(--colours-primary-7-text) } .listing-details-location .location-content .location-average-price .average-price-top .legends .sectional-scheme .legend-dot { background: var(--colours-secondary-7); color: var(--colours-secondary-7-text) } .listing-details-location .location-content .location-average-price .average-price-top .legends .vacant-land .legend-dot { background: var(--colours-neutral-6); color: var(--colours-neutral-10) } .listing-details-location .location-content .location-average-price .average-price-bot img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center } .listing-details-location .location-content .location-average-price .average-price-bot .main-svg { background: inherit !important } .listing-details-location .location-content .location-average-price .average-price-bot .main-svg .xgrid, .listing-details-location .location-content .location-average-price .average-price-bot .main-svg .ygrid, .listing-details-location .location-content .location-average-price .average-price-bot .main-svg .yzl { stroke: var(--colours-base-background-1) !important } .listing-details-location .location-content .location-average-price .average-price-bot .main-svg .xtick text, .listing-details-location .location-content .location-average-price .average-price-bot .main-svg .ytick text { fill: currentColor !important } .listing-details-location .location-content .market-activity-graph-summary { display: flex; flex-direction: column; gap: var(--size-2) } .listing-details-location .location-content .market-activity-graph-summary .freehold, .listing-details-location .location-content .market-activity-graph-summary .sectional, .listing-details-location .location-content .market-activity-graph-summary .estate { width: 100%; padding: var(--size-2); display: flex; flex-direction: column; gap: var(--size-1); background: var(--colours-base-background-1) } .listing-details-location .location-content .market-activity-graph-summary .freehold .summary-heading, .listing-details-location .location-content .market-activity-graph-summary .sectional .summary-heading, .listing-details-location .location-content .market-activity-graph-summary .estate .summary-heading { font: var(--typography-text-md-semibold-font) } .listing-details-location .location-content .market-activity-graph-summary .freehold .avg-price .number, .listing-details-location .location-content .market-activity-graph-summary .freehold .no-sales .number, .listing-details-location .location-content .market-activity-graph-summary .sectional .avg-price .number, .listing-details-location .location-content .market-activity-graph-summary .sectional .no-sales .number, .listing-details-location .location-content .market-activity-graph-summary .estate .avg-price .number, .listing-details-location .location-content .market-activity-graph-summary .estate .no-sales .number { display: flex; align-items: center; gap: var(--size-1); font: var(--typography-text-md-bold-font) } .listing-details-location .location-content .market-activity-graph-summary .freehold .avg-price .number .growth, .listing-details-location .location-content .market-activity-graph-summary .freehold .no-sales .number .growth, .listing-details-location .location-content .market-activity-graph-summary .sectional .avg-price .number .growth, .listing-details-location .location-content .market-activity-graph-summary .sectional .no-sales .number .growth, .listing-details-location .location-content .market-activity-graph-summary .estate .avg-price .number .growth, .listing-details-location .location-content .market-activity-graph-summary .estate .no-sales .number .growth { font: var(--typography-text-sm-medium-font) } .listing-details-location .location-content .market-activity-graph-summary .freehold .avg-price .number .carrat, .listing-details-location .location-content .market-activity-graph-summary .freehold .no-sales .number .carrat, .listing-details-location .location-content .market-activity-graph-summary .sectional .avg-price .number .carrat, .listing-details-location .location-content .market-activity-graph-summary .sectional .no-sales .number .carrat, .listing-details-location .location-content .market-activity-graph-summary .estate .avg-price .number .carrat, .listing-details-location .location-content .market-activity-graph-summary .estate .no-sales .number .carrat { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent } .listing-details-location .location-content .market-activity-graph-summary .freehold .avg-price .number .positive, .listing-details-location .location-content .market-activity-graph-summary .freehold .no-sales .number .positive, .listing-details-location .location-content .market-activity-graph-summary .sectional .avg-price .number .positive, .listing-details-location .location-content .market-activity-graph-summary .sectional .no-sales .number .positive, .listing-details-location .location-content .market-activity-graph-summary .estate .avg-price .number .positive, .listing-details-location .location-content .market-activity-graph-summary .estate .no-sales .number .positive { display: flex; align-items: center; gap: var(--size-05); color: var(--colours-primary-7) } .listing-details-location .location-content .market-activity-graph-summary .freehold .avg-price .number .positive .carrat, .listing-details-location .location-content .market-activity-graph-summary .freehold .no-sales .number .positive .carrat, .listing-details-location .location-content .market-activity-graph-summary .sectional .avg-price .number .positive .carrat, .listing-details-location .location-content .market-activity-graph-summary .sectional .no-sales .number .positive .carrat, .listing-details-location .location-content .market-activity-graph-summary .estate .avg-price .number .positive .carrat, .listing-details-location .location-content .market-activity-graph-summary .estate .no-sales .number .positive .carrat { border-bottom: 4px solid var(--colours-primary-7) } .listing-details-location .location-content .market-activity-graph-summary .freehold .avg-price .number .negative, .listing-details-location .location-content .market-activity-graph-summary .freehold .no-sales .number .negative, .listing-details-location .location-content .market-activity-graph-summary .sectional .avg-price .number .negative, .listing-details-location .location-content .market-activity-graph-summary .sectional .no-sales .number .negative, .listing-details-location .location-content .market-activity-graph-summary .estate .avg-price .number .negative, .listing-details-location .location-content .market-activity-graph-summary .estate .no-sales .number .negative { color: var(--colours-neutral-8) } .listing-details-location .location-content .market-activity-graph-summary .freehold .avg-price .number .negative .carrat, .listing-details-location .location-content .market-activity-graph-summary .freehold .no-sales .number .negative .carrat, .listing-details-location .location-content .market-activity-graph-summary .sectional .avg-price .number .negative .carrat, .listing-details-location .location-content .market-activity-graph-summary .sectional .no-sales .number .negative .carrat, .listing-details-location .location-content .market-activity-graph-summary .estate .avg-price .number .negative .carrat, .listing-details-location .location-content .market-activity-graph-summary .estate .no-sales .number .negative .carrat { border-top: 4px solid var(--colours-neutral-8) } .listing-details-location .location-content .market-activity-graph-summary .freehold .avg-price .label, .listing-details-location .location-content .market-activity-graph-summary .freehold .no-sales .label, .listing-details-location .location-content .market-activity-graph-summary .sectional .avg-price .label, .listing-details-location .location-content .market-activity-graph-summary .sectional .no-sales .label, .listing-details-location .location-content .market-activity-graph-summary .estate .avg-price .label, .listing-details-location .location-content .market-activity-graph-summary .estate .no-sales .label { font: var(--typography-text-xs-medium-font) } .listing-details-location .location-content .market-activity-graph-summary { gap: var(--size-1) } @media screen and (min-width: 1188px) { .listing-details-location .location-content .market-activity-graph-summary { display: grid; grid-template-columns: 1fr 1fr 1fr } .listing-details-location .location-content .market-activity-graph-summary .number { font: var(--typography-text-md-bold-font) } } .listing-details-location .location-content .lightstone-logo { display: flex; gap: var(--size-1); justify-content: flex-end; font: var(--typography-text-sm-medium-font) } .listing-details-location .location-content .lightstone-logo svg { width: 231px; height: 46px } .listing-details-location .location-content .location-recently-sold .recently-sold-top { margin-bottom: var(--size-3) } .listing-details-location .location-content .average-price-top-left p, .listing-details-location .location-content .recently-sold-top p { color: var(--colours-neutral-10); font: var(--typography-text-xl-semibold-font) } .listing-details-location .location-content .average-price-top-left span, .listing-details-location .location-content .recently-sold-top span { color: var(--colours-neutral-6); font: var(--typography-text-xs-semibold-font) } .listing-details-location .location-content .recently-sold-bot .recently-sold-bot-headings { display: none } .listing-details-location .location-content .recently-sold-bot .recently-sold-bot-headings p { color: var(--colours-neutral-5); font: var(--typography-text-xs-semibold-font) } .listing-details-location .location-content .recently-sold-bot .recently-sold-bot-row { margin-bottom: var(--size-1) } .listing-details-location .location-content .recently-sold-bot .recently-sold-bot-row p { font: var(--typography-text-sm-medium-font) } .listing-details-documents .listing-details-documents-content { padding: var(--size-3); display: flex; flex-direction: column; gap: var(--size-1); border: var(--border-width-xxs) solid var(--colours-neutral-3) } .listing-details-documents .listing-details-documents-content p, .listing-details-documents .listing-details-documents-content a { font: var(--typography-text-sm-medium-font) } .listing-details-documents .listing-details-documents-content .listing-details-documents-content-row div { display: flex; justify-content: space-between; align-items: center } .listing-details-booking-notes { padding: var(--size-3) 0 } .listing-details-finance .finance-content { margin-bottom: var(--size-3) } .listing-details-finance .finance-content #content-bondrepayment-calculator { margin-bottom: var(--size-2) } .listing-details-finance .finance-content #content-bondrepayment-calculator .fefform { box-shadow: none } .listing-details-finance .finance-content #content-bondrepayment-calculator .fefform form section fieldset { margin-bottom: var(--size-3); grid-template-columns: repeat(2, 1fr) } .listing-details-finance .finance-content #content-bondrepayment-calculator .fefform form .fefform-extras .captcha-policy { display: none } .listing-details-finance .finance-content .finance-content-monthly-and-total-repayment { text-align: center } .listing-details-finance .finance-content .finance-content-monthly-and-total-repayment .total-amount-repayable { margin-bottom: var(--size-2) } .listing-details-finance .finance-content .finance-content-monthly-and-total-repayment p { color: var(--colours-neutral-10); font: var(--typography-text-md-semibold-font) } .listing-details-finance .finance-content .finance-content-monthly-and-total-repayment h5 { color: var(--colours-primary-7); font-size: var(--size-3) } .listing-details-finance .listing-details-finance-calculators { padding: var(--size-2); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; background: var(--colours-base-background-1); color: var(--colours-neutral-10); font: var(--typography-text-md-bold-font) } @media screen and (min-width: 1188px) { .listing-details-finance .finance-content { margin-bottom: var(--size-4) } .listing-details-finance .finance-content #content-bondrepayment-calculator .fefform form section fieldset { column-gap: var(--size-4) } .listing-details-finance .finance-content #content-bondrepayment-calculator .fefform form .fefform-extras { width: 120px } .listing-details-finance .finance-content .finance-content-monthly-and-total-repayment { margin-top: calc(0px - var(--size-9)); display: flex; justify-content: flex-end; align-items: center; gap: var(--size-4); text-align: right } .listing-details-finance .finance-content .finance-content-monthly-and-total-repayment .total-amount-repayable { margin-bottom: 0; order: 2 } .listing-details-finance .finance-content .finance-content-monthly-and-total-repayment .monthly-repayment { order: 1 } .listing-details-finance .listing-details-finance-calculators { flex-direction: row; gap: var(--size-2); padding: var(--size-4) } } .listing-details-offer .offer-content .offer-top { color: var(--colours-neutral-8); font: var(--typography-text-xs-semibold-font); display: flex; gap: var(--size-2); flex-wrap: wrap } @media screen and (min-width: 1188px) { .listing-details-offer .offer-content .offer-top { flex-wrap: nowrap } } .listing-details-offer .offer-content .offer-top div { display: flex; flex-direction: column } .listing-details-offer .offer-content .offer-top div.offer-top-right { margin-left: auto; white-space: wrap } @media screen and (min-width: 1188px) { .listing-details-offer .offer-content .offer-top div.offer-top-right { max-width: 40%; text-align: right } } .listing-details-offer .offer-content .offer-top div span { margin-bottom: var(--size-2); color: var(--colours-primary-7); font: var(--typography-text-md-bold-font) } .listing-details-offer .offer-content .offer-top div span.open-offer-terms { font-size: inherit } .listing-details-offer .offer-content .offer-bot { margin-top: var(--size-3) } .listing-details-offer .offer-content .offer-bot #listing_details_make_offer_form .fefform { box-shadow: none } .listing-details-offer .offer-content .offer-bot #listing_details_make_offer_form .fefform form section { gap: var(--spacing-form-field-space-default-gap); display: grid; grid-template-columns: repeat(1, 1fr) } @media screen and (min-width: 1188px) { .listing-details-offer .offer-content .offer-bot #listing_details_make_offer_form .fefform form section { grid-template-columns: repeat(2, 1fr); gap: 0 32px } } @media screen and (min-width: 1188px) { .listing-details-offer .offer-content .offer-bot #listing_details_make_offer_form .fefform form section fieldset { grid-template-rows: repeat(5, var(--size-6)) } .listing-details-offer .offer-content .offer-bot #listing_details_make_offer_form .fefform form section fieldset#checks { grid-template-rows: repeat(2, var(--size-6)) } .listing-details-offer .offer-content .offer-bot #listing_details_make_offer_form .fefform form section fieldset#checks .fefield:not(.fefcheck) { grid-row-gap: 0 } } .listing-details-offer .offer-content .offer-bot #listing_details_make_offer_form .fefform form section fieldset .fefcheck { height: var(--size-3) } .listing-details-offer .offer-content .offer-bot #listing_details_make_offer_form .fefform form section fieldset .fefcheck label { font: var(--typography-text-xs-semibold-font) } .listing-details-offer .offer-content .offer-bot #listing_details_make_offer_form .fefform form .fefform-extras { margin-top: var(--size-3) } @media screen and (min-width: 1188px) { .listing-details-offer .offer-content .offer-bot #listing_details_make_offer_form .fefform form .fefform-extras .button-group { margin-left: auto } } .listing-details-offer .offer-content .offer-bot #listing_details_make_offer_form .fefform form .fefform-extras .captcha-policy { display: none } .listing-details-project { display: flex; flex-direction: column; gap: var(--size-3) } .listing-details-project .project-logo { width: 100%; height: fit-content; margin-bottom: var(--size-3); padding: var(--size-3); display: flex; justify-content: center; align-items: center; border: var(--border-width-xxs) solid var(--colours-neutral-3) } .listing-details-project .project-logo img { display: block; object-fit: cover; object-position: center center } .listing-details-project .listing-details-section-heading { margin: 0 } .listing-details-project .project-description { display: flex; flex-direction: column; gap: var(--size-3) } .listing-details-project .project-description .project-description-link { font: var(--typography-text-md-bold-font) } .listing-details-project .project-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-2) } .listing-details-project .project-links .primary-btn { font: var(--typography-text-sm-medium-font); padding-top: 13px; padding-bottom: 13px; flex: 0 0 100%; text-align: center; justify-content: center } .listing-details-project .project-links a { display: flex; align-items: center; gap: var(--size-1); font: var(--typography-text-sm-semibold-font) } .listing-details-project .project-links a .card-tag { display: inline-flex; align-items: center; height: var(--badge-size-sm); padding: 0 var(--badge-spacing-md); background: var(--colours-neutral-2); font: var(--typography-text-xxs-bold-font); border-radius: var(--border-rounded-full) } .content-body .listing-details-banner { margin: var(--size-3) 0; padding: var(--size-3); background: var(--colours-secondary-7) } .content-body .listing-details-banner h5 { margin-bottom: var(--size-3); color: var(--colours-base-white); font-size: var(--size-3) } .content-body .listing-details-banner .primary-btn { width: 280px; height: var(--button-size-md); padding: var(--spacing-button-spacing-md-padding); font: var(--typography-text-sm-medium-font) } @media screen and (min-width: 1188px) { .content-body .listing-details-banner { margin: var(--size-5) 0; padding: var(--size-5); display: flex; justify-content: space-between; align-items: center } .content-body .listing-details-banner h5 { margin: 0 } .content-body .listing-details-banner .primary-btn { width: unset } } .listing-details-news h2 { margin-bottom: var(--size-3) } .listing-details-news .news-content { display: flex; flex-direction: column; gap: var(--size-3) } .listing-details-news .news-content .listing-details-article { width: 100%; min-height: 114px; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--size-2) } .listing-details-news .news-content .listing-details-article .article-content { width: 100%; max-width: 496px; min-height: 114px; display: flex; flex-direction: column; justify-content: center; gap: var(--size-1); font: var(--typography-text-xs-medium-font) } .listing-details-news .news-content .listing-details-article .article-content a { font: var(--typography-text-xxs-semibold-font) } .listing-details-news .news-content .listing-details-article .article-img { width: 128px; min-width: 128px; max-width: 128px; height: 114px } .listing-details-news .news-content .listing-details-article .article-img img { width: 100%; height: 114px; display: block; object-fit: cover } .linked-listings { display: flex; flex-direction: column; gap: var(--size-3) } .linked-listings .linked-listing { display: flex; flex-direction: column; gap: var(--size-3) } .linked-listings .linked-listing .linked-listing-heading a { color: var(--colours-neutral-10) } .linked-listings .linked-listing .linked-listing-price-from-to { font: var(--typography-text-sm-semibold-font) } .linked-listings .linked-listing .linked-listing-price-from-to .linked-listing-price-from { color: var(--colours-primary-7); font: var(--typography-text-md-semibold-font) } .linked-listings .linked-listing .linked-listing-price-from-to .linked-listing-price-from span { color: var(--colours-neutral-10) } .linked-listings .linked-listing .linked-listing-links { display: flex; align-items: center; gap: var(--size-2) } .linked-listings .linked-listing .linked-listing-links .listing-link { font: var(--typography-text-md-semibold-font); display: flex; align-items: center; gap: var(--size-1) } .linked-listings .linked-listing .linked-listing-links .listing-link .card-tag { display: inline-flex; align-items: center; height: var(--badge-size-sm); padding: 0 var(--badge-spacing-md); background: var(--colours-neutral-2); font: var(--typography-text-xxs-bold-font); border-radius: var(--border-rounded-full) } .disclaimer { font: var(--typography-text-xxs-semibold-font) } .listing-details { display: grid; grid-template-areas: 'breadcrumbs side-content' 'gallery gallery' 'base base' 'sidebar sidebar' 'features features'; grid-template-columns: 1fr 72px } @media screen and (min-width: 1188px) { .listing-details { grid-template-areas: 'gallery gallery gallery' 'side-content breadcrumbs sidebar' 'side-content base sidebar' 'side-content features sidebar'; grid-template-columns: 56px auto 416px; gap: 0 var(--size-3) } } @media screen and (min-width: 1366px) { .listing-details { grid-template-areas: 'gallery gallery gallery gallery gallery gallery' 'left-space side-content breadcrumbs gap sidebar right-space' 'left-space side-content base gap sidebar right-space' 'left-space side-content features gap sidebar right-space'; grid-template-columns: auto 56px 640px 0 416px auto } } .grid-base { grid-area: base } .grid-sidebar { grid-area: sidebar } .grid-features { grid-area: features } .info-detail-label { font: var(--typography-text-sm-semibold-font) } .info-detail-value { color: var(--colours-primary-7); font: var(--typography-text-md-semibold-font) } .tabs-header { margin-bottom: var(--size-3); display: grid; grid-template-columns: repeat(2, 1fr) } .tabs-header .tab-heading { height: var(--button-size-lg); padding: var(--spacing-button-spacing-lg-padding); display: flex; justify-content: center; align-items: center; font: var(--typography-text-md-medium-font); border-bottom: var(--border-width-xxs) solid var(--colours-neutral-3) } .tabs-header .tab-heading[aria-selected="true"] { border-bottom: var(--border-width-md) solid var(--colours-primary-7) } .listing-details-stats { display: flex; align-items: center; gap: var(--size-3) } .listing-details-stats .listing-details-stat { display: flex; flex-direction: column; align-items: center; color: var(--colours-neutral-6); font: var(--typography-text-sm-medium-font) } .listing-details-stats .listing-details-stat div { display: flex; align-items: center; gap: var(--size-1); color: var(--colours-neutral-10); font: var(--typography-text-md-bold-font) } .listing-details-info { padding: var(--size-2); display: flex; flex-direction: column; gap: var(--size-2) } @media screen and (min-width: 1188px) { .listing-details-info { padding: var(--size-4) var(--size-2) } } .listing-details-info .listing-details-info-top { margin-bottom: var(--size-3) } .listing-details-info .listing-details-info-top .listing-details-info-heading { margin-bottom: var(--size-3); text-align: center } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-currency { width: 100%; max-width: 196px; margin: 0 auto; margin-bottom: var(--size-05); display: flex; justify-content: center; align-items: center; gap: var(--size-1); color: var(--colours-neutral-10); font: var(--typography-text-md-semibold-font) } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-currency #listing_details_change_currency_dropdown { width: 80px } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-currency #listing_details_change_currency_dropdown .fefform { width: 100%; border-radius: var(--border-rounded-full); box-shadow: none } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-currency #listing_details_change_currency_dropdown .fefform form { width: 100% } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-currency #listing_details_change_currency_dropdown .fefform form section fieldset .feffield .input-group { height: 32px; border-radius: var(--border-rounded-full) } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-currency #listing_details_change_currency_dropdown .fefform form section fieldset .feffield .input-group .react-select .react-select__menu { width: 94px; min-height: 248px; margin-top: var(--size-05); border-radius: var(--border-rounded-md); z-index: 50 } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-currency #listing_details_change_currency_dropdown .fefform form .fefform-extras { display: none } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-currency .listing-details-info-heading-currency-price { display: none; color: var(--colours-neutral-5); font: var(--typography-text-sm-medium-font) } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-price { display: flex; justify-content: center; align-items: center; gap: var(--size-025); text-align: center } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-price h4 { color: var(--colours-primary-7) } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-price span { color: var(--colours-primary-7); font: var(--typography-heading-h4-bold-font) } .listing-details-info .listing-details-info-top .listing-details-stats { justify-content: center } @media screen and (min-width: 1188px) { .listing-details-info .listing-details-info-top { margin-bottom: var(--size-2); display: flex; justify-content: space-between; align-items: center } .listing-details-info .listing-details-info-top .listing-details-info-heading { margin: 0; text-align: left } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-currency { margin: 0; justify-content: flex-start } .listing-details-info .listing-details-info-top .listing-details-info-heading .listing-details-info-heading-price { justify-content: flex-start } .listing-details-info .listing-details-info-top .listing-details-info-heading p { color: var(--colours-neutral-10); font: var(--typography-text-md-semibold-font) } .listing-details-info .listing-details-info-top .listing-details-stats { margin-bottom: var(--size-3); justify-content: center; border-bottom: none } } .listing-details-info .listing-details-info-bot { padding-bottom: var(--size-2); display: none; flex-direction: column; justify-content: center; align-items: center; gap: var(--size-1) } @media screen and (min-width: 1188px) { .listing-details-info .listing-details-info-bot { flex-direction: row; justify-content: space-between } } .listing-details-info .listing-details-info-bot:has(.card-tags), .listing-details-info .listing-details-info-bot:has(.card-address) { display: flex } .listing-details-info .listing-details-info-bot .card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-025) } .listing-details-info .listing-details-info-bot .card-tags .card-tag { display: flex; align-items: center; height: var(--badge-size-sm); padding: 0 var(--badge-spacing-sm); background: var(--badge-bg); color: var(--badge-text); font: var(--typography-text-xxs-bold-font); border-radius: var(--border-rounded-full) } .listing-details-info .listing-details-info-bot .card-address { font: var(--typography-text-xs-medium-font) } .listing-details-content-right-top { gap: var(--size-2); display: flex; flex-direction: column } .listing-details-agents { box-shadow: var(--shadows-xl) } @media screen and (min-width: 1188px) { .listing-details-agents { padding: var(--size-3); background: var(--colours-base-background) } } .listing-details-agents .swiper { margin: unset; width: 100% } .listing-details-agents .listing-details-agent-card { /* height: var(--size-10); */ display: flex; align-items: center; gap: var(--size-2); background: var(--colours-secondary-7) } .listing-details-agents .listing-details-agent-card br { display: none } @media screen and (min-width: 1188px) { .listing-details-agents .listing-details-agent-card br { display: block } } @media screen and (min-width: 1188px) { .listing-details-agents .listing-details-agent-card { padding: var(--size-2); height: 290px } } .listing-details-agents .listing-details-agent-card .card-img { width: 80px; height: 80px } @media screen and (min-width: 1188px) { .listing-details-agents .listing-details-agent-card .card-img { width: 120px; height: 180px } } .listing-details-agents .listing-details-agent-card .card-img:has(svg) { display: flex; align-items: flex-end } .listing-details-agents .listing-details-agent-card .card-img svg { fill: var(--colours-primary-7); width: 120px; height: 120px } .listing-details-agents .listing-details-agent-card .card-img img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center } .listing-details-agents .listing-details-agent-card .card-content { display: flex; flex-direction: column; justify-content: center } @media screen and (min-width: 1188px) { .listing-details-agents .listing-details-agent-card .card-content { margin: var(--size-2) 0 } } .listing-details-agents .listing-details-agent-card .card-content .card-agent-name { margin-bottom: var(--size-05); color: var(--colours-base-white); font: var(--typography-text-sm-bold-font) } @media screen and (min-width: 1188px) { .listing-details-agents .listing-details-agent-card .card-content .card-agent-name { color: var(--colours-base-white); font: var(--typography-text-xl-bold-font) } } .listing-details-agents .listing-details-agent-card .card-content .card-agent-designation { display: none } @media screen and (min-width: 1188px) { .listing-details-agents .listing-details-agent-card .card-content .card-agent-designation { display: inline; margin-bottom: var(--size-05); color: var(--colours-base-white); font: var(--typography-text-sm-regular-font) } } .listing-details-agents .listing-details-agent-card .card-content .card-agent-ffc { display: none } @media screen and (min-width: 1188px) { .listing-details-agents .listing-details-agent-card .card-content .card-agent-ffc { display: inline; margin-bottom: var(--size-05); color: var(--colours-base-white); font: var(--typography-text-xxs-medium-font) } } .listing-details-agents .listing-details-agent-card .card-content .card-link { display: none } @media screen and (min-width: 1188px) { .listing-details-agents .listing-details-agent-card .card-content .card-link { display: inline; margin-top: auto; color: var(--colours-base-white); font: var(--typography-text-xs-semibold-font) } } .listing-details-agents .listing-details-agent-card .card-content .card-icons { margin-top: var(--size-1); display: flex; align-items: center; gap: var(--size-1) } .listing-details-agents .listing-details-agent-card .card-content .card-icons .primary-btn { width: var(--button-size-sm); height: var(--button-size-sm); display: flex; justify-content: center; align-items: center; border-radius: var(--border-rounded-full) } .listing-details-agents .listing-details-agent-card .card-contact { margin-left: auto; padding-right: var(--size-2); background: none; border: 0 none; display: flex; align-items: center; color: var(--colours-base-white); min-height: 0; font: var(--typography-text-sm-regular-font); gap: var(--size-05) } .listing-details-agents .listing-details-agent-card .card-contact svg { --color1: var(--colours-base-white) } .listing-details-agents .listing-details-agent { display: flex; align-items: center; gap: var(--size-2) } .listing-details-agents .listing-details-agent .listing-details-agents-swiper-desktop .swiper-pagination { position: relative; top: unset; bottom: unset; left: unset; right: unset; margin: 0; padding: 0 } .listing-details-agents .listing-details-agent .listing-details-agents-swiper-desktop .swiper-pagination .swiper-pagination-bullet { width: var(--size-7); height: var(--size-025); border-radius: var(--border-rounded-none) } .listing-details-agents .listing-details-agent .listing-details-agents-swiper-desktop .swiper-pagination .swiper-pagination-bullet-active { height: var(--size-05) } .listing-details-agents .listing-details-agent .listing-details-agent-img { width: 80px; height: 80px } .listing-details-agents .listing-details-agent .listing-details-agent-img img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center } .listing-details-agents .listing-details-agent .listing-details-agent-content { display: flex; flex-direction: column; justify-content: center } .listing-details-agents .listing-details-agent .listing-details-agent-content .listing-details-agent-name { margin-bottom: var(--size-05); color: var(--colours-base-white); font: var(--typography-text-sm-bold-font) } .listing-details-agents .listing-details-agent .listing-details-agent-content .listing-details-agent-socials { display: flex; align-items: center; gap: var(--size-1) } .listing-details-agents .listing-details-agent .listing-details-agent-content .listing-details-agent-socials .listing-details-agent-social-link { width: var(--button-size-sm); height: var(--button-size-sm); display: flex; justify-content: center; align-items: center; border-radius: var(--border-rounded-full) } .listing-details-agents .listing-details-agent .swiper-button-next-custom { right: var(--swiper-navigation-sides-offset, 10px); left: auto; position: absolute; top: var(--swiper-navigation-top-offset, 25%); width: calc(var(--swiper-navigation-size) / 44* 27); height: var(--swiper-navigation-size); margin-top: calc(0px -(var(--swiper-navigation-size) / 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)) } .listing-details-agents .listing-details-form-container { padding: 0 var(--size-2) } @media screen and (min-width: 1188px) { .listing-details-agents .listing-details-form-container { padding: 0 } } .listing-details-agents .listing-details-form-container .listing-details-form-heading { display: flex } .listing-details-agents .listing-details-form-container .listing-details-form-heading button { background: var(--colours-base-background); flex: 0 0 50%; margin-bottom: var(--size-2); padding: var(--size-2) 0; border: 0 none; border-bottom: 1px solid var(--colours-neutral-3); text-align: center; color: var(--colours-neutral-10); font: var(--typography-text-md-medium-font); cursor: pointer } .listing-details-agents .listing-details-form-container .listing-details-form-heading button[aria-selected="true"] { border-bottom: 4px solid var(--colours-secondary-7) } .listing-details-agents .listing-details-form-container .listing-details-form-heading-booking-enquiry { margin-bottom: var(--size-2); padding: var(--size-2) 0; border-bottom: 4px solid var(--colours-secondary-7); text-align: center; color: var(--colours-neutral-10); font: var(--typography-text-md-medium-font) } .listing-details-agents .listing-details-form-container #listing_details_booking_enquiry_form .fefform form fieldset { display: grid; grid-template-columns: 1fr minmax(auto, 1fr) } .listing-details-agents .listing-details-form-container #listing_details_booking_enquiry_form .fefform form fieldset .feffield { margin: 0 } .listing-details-agents .listing-details-form-container #listing_details_booking_enquiry_form .fefform form fieldset .feffield:nth-child(3), .listing-details-agents .listing-details-form-container #listing_details_booking_enquiry_form .fefform form fieldset .feffield:nth-child(4), .listing-details-agents .listing-details-form-container #listing_details_booking_enquiry_form .fefform form fieldset .feffield:nth-child(9) { grid-column: span 2 } .listing-details-agents .listing-details-form-container #listing_details_booking_enquiry_form .fefform form fieldset .feffield:nth-child(10), .listing-details-agents .listing-details-form-container #listing_details_booking_enquiry_form .fefform form fieldset .feffield:nth-child(11) { margin-bottom: var(--size-2) } .listing-details-agents .listing-details-form-container #listing_details_agent_contact_form .fefform, .listing-details-agents .listing-details-form-container #listing_details_booking_enquiry_form .fefform { box-shadow: none } .listing-details-agents .listing-details-form-container #listing_details_agent_contact_form .fefform form button, .listing-details-agents .listing-details-form-container #listing_details_booking_enquiry_form .fefform form button { width: 83px } .listing-details-content-right-bot { /* display: none; */ background: var(--colours-base-background); padding: var(--size-3); box-shadow: var(--shadows-xl); color: var(--colours-neutral-10); font: var(--typography-text-md-semibold-font); z-index: 1 } @media screen and (min-width: 1188px) { .listing-details-content-right-bot { display: block } } .listing-details-content-right-bot .print, .listing-details-content-right-bot .brochure { margin-bottom: var(--size-1); display: flex; align-items: center; gap: var(--size-2) } .listing-details-content-right-bot .print .print-btn, .listing-details-content-right-bot .print .brochure-btn, .listing-details-content-right-bot .brochure .print-btn, .listing-details-content-right-bot .brochure .brochure-btn { width: var(--button-size-lg); height: var(--button-size-lg); display: flex; justify-content: center; align-items: center; border-radius: var(--border-rounded-full) } .listing-details-content-right-bot .print .print-btn .icon, .listing-details-content-right-bot .print .brochure-btn .icon, .listing-details-content-right-bot .brochure .print-btn .icon, .listing-details-content-right-bot .brochure .brochure-btn .icon { width: var(--size-3); height: var(--size-3) } .listing-details-content-right-bot .print .print-btn:last-child, .listing-details-content-right-bot .brochure .print-btn:last-child { all: unset; color: var(--colours-neutral-10); font: var(--typography-text-md-semibold-font); cursor: pointer } .listing-details-content-right-bot .print a:last-child, .listing-details-content-right-bot .brochure a:last-child { color: var(--colours-neutral-10); font: var(--typography-text-md-semibold-font) } .listing-details-content-right-bot .share { display: flex; align-items: center; gap: var(--size-1) } @media(max-width: 400px){ .listing-details-content-right-bot .share{ flex-direction: column; } } .listing-details-content-right-bot .share .share-icons { display: flex; gap: var(--size-1) } .listing-details-content-right-bot .share .share-divider { flex: 1 1 auto; width: 55px; height: 1px; min-width: 0; background: var(--colours-neutral-3) } .listing-details-content-right-bot .share .share-btn { width: var(--button-size-sm); height: var(--button-size-sm); display: flex; justify-content: center; align-items: center; border-radius: var(--border-rounded-full) } .listing-details-section-heading { margin-bottom: var(--size-3) } #listing_details_agent_contact_form .fefform { box-shadow: none } #listing_details_agent_contact_form .fefform form section { margin-bottom: var(--size-2) } #listing_details_agent_contact_form .fefform form section fieldset { display: grid; grid-template-columns: 1fr } #listing_details_agent_contact_form .fefform form section fieldset .feffield { margin: 0 } #listing_details_agent_contact_form .fefform form section fieldset .feffield.fefcheck .input-group { height: unset } #listing_details_agent_contact_form .fefform form section fieldset .recaptcha { grid-column: 1 / span 2 } @media screen and (min-width: 1188px) { #listing_details_agent_contact_form .fefform form section fieldset { grid-template-columns: 1fr 1fr } #listing_details_agent_contact_form .fefform form section fieldset .feffield:nth-child(3), #listing_details_agent_contact_form .fefform form section fieldset .feffield:nth-child(4), #listing_details_agent_contact_form .fefform form section fieldset .feffield:nth-child(5) { grid-column: span 2 } #listing_details_agent_contact_form .fefform form section fieldset .feffield .fefcheck .input-group { height: var(--size-6) } } #listing_details_agent_contact_form .fefform form section fieldset .message .input-group { height: 80px; padding: var(--size-1); overflow: hidden } #listing_details_agent_contact_form .fefform form section fieldset .message .input-group .input-field { width: 100%; height: 100%; max-height: 80px !important } #listing_details_agent_contact_form .fefform form .fefform-extras { gap: var(--size-2) } #listing_details_agent_contact_form .fefform form .fefform-extras .button-group { display: flex; justify-content: flex-end } #listing_details_agent_contact_form .fefform form .fefform-extras .button-group button { width: 83px } #listing_details_agent_viewing_form .fefform { box-shadow: none } #listing_details_agent_viewing_form section { padding-bottom: var(--size-2) } #listing_details_agent_viewing_form .input-group { height: unset } #listing_details_agent_viewing_form fieldset { display: grid; margin-bottom: var(--size-2); grid-template-columns: 1fr } #listing_details_agent_viewing_form fieldset .text-primary { color: var(--colours-primary-7); text-align: center; cursor: pointer } #listing_details_agent_viewing_form fieldset .group-viewing_date { display: flex; padding-bottom: 1px } #listing_details_agent_viewing_form fieldset .group-viewing_date .day-option { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 8px 16px; width: 62px; height: 83px; background: var(--colours-base-background); border: 1px solid var(--colours-neutral-3); border-radius: 0px; font: var(--typography-text-sm-regular-font); flex: none; order: 1; flex-grow: 1 } #listing_details_agent_viewing_form fieldset .group-viewing_date .day-option .day-option-number { font: var(--typography-text-lg-semibold-font); color: var(--colours-neutral-10) } #listing_details_agent_viewing_form fieldset .group-viewing_date .selected .day-option { color: var(--colours-primary-7); border-color: var(--colours-primary-7) } #listing_details_agent_viewing_form fieldset .group-viewing_date .checkinput .checkcontainer input { visibility: hidden; position: absolute; width: 1px; height: 1px } #listing_details_agent_viewing_form fieldset .group-viewing_date .checkinput .checkcontainer svg { display: none } #listing_details_agent_viewing_form fieldset .group-viewing_date .checkinput .checkcontainer .checkmark { display: none } #listing_details_agent_viewing_form fieldset .input-field { height: var(--size-6) } #listing_details_agent_viewing_form fieldset .feffield { grid-column: span 2 } #listing_details_agent_viewing_form fieldset .feffield.viewing_custom_times .input-group { padding: 0 } #listing_details_agent_viewing_form fieldset .feffield.viewing_custom_times .input-group textarea { --vertical-space: calc(var(--spacing-form-field-space-default-padding) / 2); display: block; padding: var(--vertical-space) var(--spacing-form-field-space-default-padding) } @media screen and (min-width: 1188px) { #listing_details_agent_viewing_form fieldset .feffield { grid-template-columns: 1fr 1fr } #listing_details_agent_viewing_form fieldset .feffield.first_name, #listing_details_agent_viewing_form fieldset .feffield.last_name, #listing_details_agent_viewing_form fieldset .feffield.add_to_mailing_list, #listing_details_agent_viewing_form fieldset .feffield.add_to_profiles { grid-column: span 1 } } #listing_details_agent_viewing_form fieldset .feffield .group-viewing_type { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-1); border: 0 none; padding: 0 } #listing_details_agent_viewing_form fieldset .feffield .group-viewing_type .checkinput { min-width: 0; width: 100% } #listing_details_agent_viewing_form fieldset .feffield .group-viewing_type .checkcontainer { display: none } #listing_details_agent_viewing_form fieldset .feffield .group-viewing_type .selected .viewing-type-option { color: var(--colours-primary-7); border-color: var(--colours-primary-7) } #listing_details_agent_viewing_form fieldset .feffield .group-viewing_type .selected .viewing-type-option svg { --color1: var(--colours-primary-7) } #listing_details_agent_viewing_form fieldset .feffield .group-viewing_type .viewing-type-option { box-sizing: border-box; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0px 24px; gap: var(--size-1); width: 100%; height: 48px; border: 1px solid var(--colours-neutral-3); border-radius: 0px; font: var(--typography-text-sm-regular-font); flex: none; order: 0; flex-grow: 1 } #listing_details_agent_viewing_form fieldset .feffield.viewing_date { flex-direction: row; align-items: center; gap: 0 var(--size-2) } #listing_details_agent_viewing_form fieldset .feffield.viewing_date .group-viewing_date { border: 0 none; min-width: 0; order: 2; flex: 1 1 1%; overflow: hidden; padding: 0; padding-bottom: 1px } #listing_details_agent_viewing_form fieldset .feffield.viewing_date .button { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: var(--size-1); width: 32px; flex: 0 0 32px; height: 32px; background: var(--colours-primary-7); border-radius: 0px; border: 0 none } #listing_details_agent_viewing_form fieldset .feffield.viewing_date .button svg { --color1: #ffffff } #listing_details_agent_viewing_form fieldset .feffield.viewing_date .button.swiper-button-disabled { opacity: 0.5 } #listing_details_agent_viewing_form fieldset .feffield.viewing_date .btn-next { order: 3 } #listing_details_agent_viewing_form fieldset .feffield.viewing_date .btn-prev { order: 1 } .content-header { width: 100%; height: var(--tab-size-horizontal); padding: 0 var(--tab-spacing); display: flex; background: var(--tab-bg); position: sticky; top: 0; gap: 40px; z-index: 40; align-items: center } .content-header .content-header-prev-btn, .content-header .content-header-next-btn { all: unset; cursor: pointer } @media screen and (min-width: 1188px) { .content-header .content-header-prev-btn, .content-header .content-header-next-btn { display: none } } .content-header .content-header-prev-btn svg, .content-header .content-header-next-btn svg { width: var(--size-2); height: var(--size-2); fill: var(--colours-base-black) } .content-header a { display: none; white-space: nowrap } .content-header a.active { display: flex; justify-content: center; align-items: center; flex: 1 1 0; color: var(--tab-text-active); font: var(--typography-text-md-medium-font) } @media screen and (min-width: 1188px) { .content-header { max-width: 608px; background: var(--tab-bg); margin: 0 var(--size-2); padding: 0; display: flex; align-items: center; border-top: var(--tab-border); border-bottom: var(--tab-border) } .content-header a { display: inline-flex; justify-content: center; align-items: center; height: var(--size-7); color: var(--tab-text); font: var(--typography-text-md-medium-font); text-decoration: none; cursor: pointer; position: relative } .content-header a.active { flex: 0 0 } .content-header a.active:after { content: ""; position: absolute; bottom: 0; border-bottom: var(--tab-border-active); width: 100% } } .listing-details-info-details { margin-bottom: var(--size-4); display: grid; grid-template-columns: repeat(2, 1fr); row-gap: var(--size-4); white-space: nowrap; gap: 2rem } @media screen and (min-width: 1366px) { .listing-details-info-details { grid-template-columns: repeat(4, 1fr) } } .content-body { padding: var(--size-5) var(--size-2) } .content-body>section { scroll-margin-top: 40px; padding: var(--size-3) 0 } @media screen and (min-width: 1188px) { .content-body>section { padding: var(--size-5) 0 } } .content-body .listing-details-divider { width: 100%; height: var(--size-1); background: var(--colours-neutral-3) } .listing-details-similar-listings { overflow-x: hidden; padding-left: var(--size-2) } .listing-details-similar-listings h2 { margin-bottom: var(--size-3); text-align: center } .listing-details-similar-listings .listing-details-similar-listings-content { height: 328px } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listings-cards { display: none } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listings-swiper .swiper-wrapper .swiper-slide { width: 304px !important } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listing-card { position: relative; width: 304px; height: 312px; padding: var(--size-3); display: flex; align-items: flex-end; box-shadow: 0px var(--size-1) var(--size-1) -4px rgba(15, 23, 41, 0.03), 0px 20px var(--size-3) -4px rgba(15, 23, 41, 0.08); cursor: pointer } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listing-card .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 10 } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listing-card .similar-listing-card-content { z-index: 20; color: var(--colours-base-white); font: var(--typography-text-sm-semibold-font) } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listing-card .similar-listing-card-content h5 { color: var(--colours-base-white); font-size: var(--size-3) } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listing-cards { display: none } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listing-card { position: relative; width: 304px; height: 312px; padding: var(--size-3); display: flex; align-items: flex-end; box-shadow: 0px 8px 8px -4px rgba(15, 23, 41, 0.03), 0px 20px 24px -4px rgba(15, 23, 41, 0.08); cursor: pointer } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listing-card .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 10 } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listing-card .similar-listing-card-play-btn-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-bottom: 36px; display: flex; justify-content: center; align-items: center; z-index: 20 } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listing-card .similar-listing-card-play-btn-container .similar-listing-card-play-btn { background: transparent; border: var(--border-width-none); cursor: pointer } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listing-card .similar-listing-card-content { z-index: 20 } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listing-card .similar-listing-card-content h5 { color: var(--colours-base-white); font: var(--typography-heading-h5-bold-font) } .listing-details-similar-listings .listing-details-similar-listings-content .similar-listing-card .similar-listing-card-content p { color: var(--colours-base-white); font: var(--typography-text-sm-semibold-font) } #modalContainerEmailAlertsSignUp .modal { max-width: 720px } #modalContainerEmailAlertsSignUp .modal .modal-header { justify-content: space-between } #modalContainerEmailAlertsSignUp .modal .modal-header span { display: block; font: var(--typography-text-xl-bold-font) } #modalContainerEmailAlertsSignUp .modal .modal-content #listing_details_email_alerts_form .fefform { display: flex; flex-direction: column; gap: var(--size-2); box-shadow: none } #modalContainerListingDetailsTransferCosts .modal, #modalContainerListingDetailsBondAffordability .modal { width: 100%; max-width: 960px; height: auto } #modalContainerListingDetailsTransferCosts .modal .modal-content, #modalContainerListingDetailsBondAffordability .modal .modal-content { max-height: 500px } #modalContainerListingDetailsTransferCosts .modal .modal-content #content-bondtrans-calculator .fefform, #modalContainerListingDetailsTransferCosts .modal .modal-content #content-bondaffordability-calculator .fefform, #modalContainerListingDetailsBondAffordability .modal .modal-content #content-bondtrans-calculator .fefform, #modalContainerListingDetailsBondAffordability .modal .modal-content #content-bondaffordability-calculator .fefform { box-shadow: none; background: var(--colours-base-background) } #modalContainerListingDetailsTransferCosts .modal .modal-content #content-bondtrans-calculator .fefform form fieldset, #modalContainerListingDetailsTransferCosts .modal .modal-content #content-bondaffordability-calculator .fefform form fieldset, #modalContainerListingDetailsBondAffordability .modal .modal-content #content-bondtrans-calculator .fefform form fieldset, #modalContainerListingDetailsBondAffordability .modal .modal-content #content-bondaffordability-calculator .fefform form fieldset { margin-bottom: var(--size-3); gap: var(--size-3) } #modalContainerListingDetailsTransferCosts .modal .modal-content #content-bondtrans-calculator .fefform form .fefform-extras, #modalContainerListingDetailsTransferCosts .modal .modal-content #content-bondaffordability-calculator .fefform form .fefform-extras, #modalContainerListingDetailsBondAffordability .modal .modal-content #content-bondtrans-calculator .fefform form .fefform-extras, #modalContainerListingDetailsBondAffordability .modal .modal-content #content-bondaffordability-calculator .fefform form .fefform-extras { gap: var(--size-3) } #modalContainerListingDetailsTransferCosts .modal .modal-content .grand-total, #modalContainerListingDetailsTransferCosts .modal .modal-content .monthly-payment, #modalContainerListingDetailsTransferCosts .modal .modal-content .loan-available, #modalContainerListingDetailsBondAffordability .modal .modal-content .grand-total, #modalContainerListingDetailsBondAffordability .modal .modal-content .monthly-payment, #modalContainerListingDetailsBondAffordability .modal .modal-content .loan-available { margin-bottom: var(--size-3); padding: var(--size-3); background: var(--colours-base-background-1); text-align: center } #modalContainerListingDetailsTransferCosts .modal .modal-content .grand-total h4, #modalContainerListingDetailsTransferCosts .modal .modal-content .monthly-payment h4, #modalContainerListingDetailsTransferCosts .modal .modal-content .loan-available h4, #modalContainerListingDetailsBondAffordability .modal .modal-content .grand-total h4, #modalContainerListingDetailsBondAffordability .modal .modal-content .monthly-payment h4, #modalContainerListingDetailsBondAffordability .modal .modal-content .loan-available h4 { color: var(--colours-primary-7) } #modalContainerListingDetailsTransferCosts .modal .modal-content .disclaimer-text p, #modalContainerListingDetailsBondAffordability .modal .modal-content .disclaimer-text p { font: var(--typography-text-xxs-medium-font) } #modalContainerListingDetailsTransferCosts .modal .modal-content .disclaimer-text span, #modalContainerListingDetailsBondAffordability .modal .modal-content .disclaimer-text span { font: var(--typography-text-xxs-bold-font) } #modalContainerListingDetailsTransferCosts .modal .modal-content .calculator-tables, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-transfer-tables, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-affordability-tables, #modalContainerListingDetailsBondAffordability .modal .modal-content .calculator-tables, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-transfer-tables, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-affordability-tables { width: 100%; margin: var(--size-5) 0 } #modalContainerListingDetailsTransferCosts .modal .modal-content .calculator-tables .table-heading, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-transfer-tables .table-heading, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-affordability-tables .table-heading, #modalContainerListingDetailsBondAffordability .modal .modal-content .calculator-tables .table-heading, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-transfer-tables .table-heading, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-affordability-tables .table-heading { margin-bottom: var(--size-3); font: var(--typography-text-xl-bold-font) } #modalContainerListingDetailsTransferCosts .modal .modal-content .calculator-tables .calculator-table, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-transfer-tables .calculator-table, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-affordability-tables .calculator-table, #modalContainerListingDetailsBondAffordability .modal .modal-content .calculator-tables .calculator-table, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-transfer-tables .calculator-table, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-affordability-tables .calculator-table { width: 100%; border-collapse: collapse } #modalContainerListingDetailsTransferCosts .modal .modal-content .calculator-tables .calculator-table .dummy-row, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-transfer-tables .calculator-table .dummy-row, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-affordability-tables .calculator-table .dummy-row, #modalContainerListingDetailsBondAffordability .modal .modal-content .calculator-tables .calculator-table .dummy-row, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-transfer-tables .calculator-table .dummy-row, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-affordability-tables .calculator-table .dummy-row { display: none; visibility: hidden } #modalContainerListingDetailsTransferCosts .modal .modal-content .calculator-tables .calculator-table tbody tr, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-transfer-tables .calculator-table tbody tr, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-affordability-tables .calculator-table tbody tr, #modalContainerListingDetailsBondAffordability .modal .modal-content .calculator-tables .calculator-table tbody tr, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-transfer-tables .calculator-table tbody tr, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-affordability-tables .calculator-table tbody tr { border-bottom: 1px solid var(--colours-neutral-3) } #modalContainerListingDetailsTransferCosts .modal .modal-content .calculator-tables .calculator-table tbody td, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-transfer-tables .calculator-table tbody td, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-affordability-tables .calculator-table tbody td, #modalContainerListingDetailsBondAffordability .modal .modal-content .calculator-tables .calculator-table tbody td, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-transfer-tables .calculator-table tbody td, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-affordability-tables .calculator-table tbody td { padding-top: var(--size-1); padding-bottom: var(--size-1); padding-right: var(--size-1) } #modalContainerListingDetailsTransferCosts .modal .modal-content .calculator-tables .calculator-table tbody td:first-child, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-transfer-tables .calculator-table tbody td:first-child, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-affordability-tables .calculator-table tbody td:first-child, #modalContainerListingDetailsBondAffordability .modal .modal-content .calculator-tables .calculator-table tbody td:first-child, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-transfer-tables .calculator-table tbody td:first-child, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-affordability-tables .calculator-table tbody td:first-child { color: var(--colours-neutral-8); font: var(--typography-text-xs-medium-font); text-align: left } #modalContainerListingDetailsTransferCosts .modal .modal-content .calculator-tables .calculator-table tbody td:nth-child(2), #modalContainerListingDetailsTransferCosts .modal .modal-content .calculator-tables .calculator-table tbody td:nth-child(3), #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-transfer-tables .calculator-table tbody td:nth-child(2), #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-transfer-tables .calculator-table tbody td:nth-child(3), #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-affordability-tables .calculator-table tbody td:nth-child(2), #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-affordability-tables .calculator-table tbody td:nth-child(3), #modalContainerListingDetailsBondAffordability .modal .modal-content .calculator-tables .calculator-table tbody td:nth-child(2), #modalContainerListingDetailsBondAffordability .modal .modal-content .calculator-tables .calculator-table tbody td:nth-child(3), #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-transfer-tables .calculator-table tbody td:nth-child(2), #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-transfer-tables .calculator-table tbody td:nth-child(3), #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-affordability-tables .calculator-table tbody td:nth-child(2), #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-affordability-tables .calculator-table tbody td:nth-child(3) { color: var(--colours-neutral-8); font: var(--typography-text-xs-bold-font); text-align: right } #modalContainerListingDetailsTransferCosts .modal .modal-content .calculator-tables .calculator-table tfoot tr td, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-transfer-tables .calculator-table tfoot tr td, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-affordability-tables .calculator-table tfoot tr td, #modalContainerListingDetailsBondAffordability .modal .modal-content .calculator-tables .calculator-table tfoot tr td, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-transfer-tables .calculator-table tfoot tr td, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-affordability-tables .calculator-table tfoot tr td { font: var(--typography-text-md-bold-font); text-align: right } #modalContainerListingDetailsTransferCosts .modal .modal-content .calculator-tables .calculator-table tfoot tr td:first-child, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-transfer-tables .calculator-table tfoot tr td:first-child, #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-affordability-tables .calculator-table tfoot tr td:first-child, #modalContainerListingDetailsBondAffordability .modal .modal-content .calculator-tables .calculator-table tfoot tr td:first-child, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-transfer-tables .calculator-table tfoot tr td:first-child, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-affordability-tables .calculator-table tfoot tr td:first-child { text-align: left } #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-transfer-table-wrapper:first-child, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-transfer-table-wrapper:first-child { margin-bottom: var(--size-4) } #modalContainerListingDetailsTransferCosts .modal .modal-content .bond-affordability-tables .calculator-table, #modalContainerListingDetailsBondAffordability .modal .modal-content .bond-affordability-tables .calculator-table { margin-bottom: var(--size-4) } #modalContainerListingDetailsTransferCosts .modal .modal-content #transfer-costs-table tbody tr:nth-child(10), #modalContainerListingDetailsBondAffordability .modal .modal-content #transfer-costs-table tbody tr:nth-child(10) { display: block } #modalContainerListingDetailsTransferCosts .modal .modal-content #bond-costs-table tbody tr:nth-child(7), #modalContainerListingDetailsBondAffordability .modal .modal-content #bond-costs-table tbody tr:nth-child(7) { display: block } #modalContainerAddToCalendar .modal { display: flex; align-items: center; justify-content: center } @media screen and (min-width: 1188px) { #modalContainerAddToCalendar .modal { max-width: 460px; max-height: 290px } } #modalContainerAddToCalendar .modal .modal-content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--size-3); padding: var(--size-3) } #modalContainerAddToCalendar .modal .modal-content p { font: var(--typography-text-lg-semibold-font) } #modalContainerAddToCalendar .modal .modal-content .social-btns { display: flex; justify-content: center; align-items: center; gap: var(--size-1) } #modalContainerAddToCalendar .modal .modal-content .social-btns .social-btn { width: var(--button-size-lg); height: var(--button-size-lg); display: flex; justify-content: center; align-items: center; border-radius: var(--border-rounded-full) } #modalContainerAddToCalendar .modal .modal-content .download-ics { height: var(--button-size-md); padding: var(--spacing-button-spacing-md-padding); display: flex; justify-content: center; align-items: center } #modalContainerAddToCalendar .modal .close-button { width: var(--button-size-md); min-width: var(--button-size-md); height: var(--button-size-md); margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background: var(--colours-primary-7); border: 0 none; position: absolute; top: var(--size-2); right: var(--size-2) } #modalContainerAddToCalendar .modal .close-button .icon { width: var(--size-3); height: var(--size-3) } #modalContainerListingDetailsGallery, #modalContainerListingDetailsFloorPlans, #modalContainerListingDetailsProgress { z-index: 60 } #modalContainerListingDetailsGallery .modal, #modalContainerListingDetailsFloorPlans .modal, #modalContainerListingDetailsProgress .modal { top: 0; left: 0; transform: none; max-width: 100vw; height: 100vh; display: grid; grid-template-areas: "header" "content" "footer"; grid-template-rows: min-content auto 80px } #modalContainerListingDetailsGallery .modal .modal-header, #modalContainerListingDetailsFloorPlans .modal .modal-header, #modalContainerListingDetailsProgress .modal .modal-header { grid-area: header; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--size-2); padding: var(--size-3) } @media screen and (min-width: 1188px) { #modalContainerListingDetailsGallery .modal .modal-header, #modalContainerListingDetailsFloorPlans .modal .modal-header, #modalContainerListingDetailsProgress .modal .modal-header { align-items: center } } #modalContainerListingDetailsGallery .modal .modal-header .stats, #modalContainerListingDetailsFloorPlans .modal .modal-header .stats, #modalContainerListingDetailsProgress .modal .modal-header .stats { display: flex; align-items: center; gap: var(--size-3) } #modalContainerListingDetailsGallery .modal .modal-header .stats .stat, #modalContainerListingDetailsFloorPlans .modal .modal-header .stats .stat, #modalContainerListingDetailsProgress .modal .modal-header .stats .stat { display: flex; flex-direction: column; align-items: center; gap: var(--size-05) } #modalContainerListingDetailsGallery .modal .modal-header .stats .stat .stat-top, #modalContainerListingDetailsFloorPlans .modal .modal-header .stats .stat .stat-top, #modalContainerListingDetailsProgress .modal .modal-header .stats .stat .stat-top { display: flex; align-items: center; gap: var(--size-1) } #modalContainerListingDetailsGallery .modal .modal-header .stats .stat .stat-top span, #modalContainerListingDetailsFloorPlans .modal .modal-header .stats .stat .stat-top span, #modalContainerListingDetailsProgress .modal .modal-header .stats .stat .stat-top span { color: var(--colours-neutral-10); font: var(--typography-text-md-bold-font) } #modalContainerListingDetailsGallery .modal .modal-header .stats .stat .stat-bot, #modalContainerListingDetailsFloorPlans .modal .modal-header .stats .stat .stat-bot, #modalContainerListingDetailsProgress .modal .modal-header .stats .stat .stat-bot { color: var(--colours-neutral-6); font: var(--typography-text-sm-medium-font) } #modalContainerListingDetailsGallery .modal .modal-header .price, #modalContainerListingDetailsFloorPlans .modal .modal-header .price, #modalContainerListingDetailsProgress .modal .modal-header .price { order: 1; height: var(--size-5); display: inline-flex; align-items: center; color: var(--colours-primary-7); font: var(--typography-text-xl-bold-font) } #modalContainerListingDetailsGallery .modal .modal-header .heading, #modalContainerListingDetailsFloorPlans .modal .modal-header .heading, #modalContainerListingDetailsProgress .modal .modal-header .heading { order: 3; color: var(--colours-neutral-10); font: var(--typography-text-xl-regular-font); flex: 0 0 100% } #modalContainerListingDetailsGallery .modal .modal-header .caption, #modalContainerListingDetailsFloorPlans .modal .modal-header .caption, #modalContainerListingDetailsProgress .modal .modal-header .caption { order: 4; display: none; font: var(--typography-text-xl-regular-font) } #modalContainerListingDetailsGallery .modal .modal-header .stats-contact-agent, #modalContainerListingDetailsFloorPlans .modal .modal-header .stats-contact-agent, #modalContainerListingDetailsProgress .modal .modal-header .stats-contact-agent { order: 5; display: flex; gap: var(--size-3) } #modalContainerListingDetailsGallery .modal .modal-header .close-button, #modalContainerListingDetailsFloorPlans .modal .modal-header .close-button, #modalContainerListingDetailsProgress .modal .modal-header .close-button { order: 2; width: var(--button-size-md); min-width: var(--button-size-md); height: var(--button-size-md); margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background: var(--colours-primary-7); border: 0 none } #modalContainerListingDetailsGallery .modal .modal-header .close-button .icon, #modalContainerListingDetailsFloorPlans .modal .modal-header .close-button .icon, #modalContainerListingDetailsProgress .modal .modal-header .close-button .icon { width: var(--size-3); height: var(--size-3) } @media screen and (min-width: 1188px) { #modalContainerListingDetailsGallery .modal .modal-header .price, #modalContainerListingDetailsGallery .modal .modal-header .heading, #modalContainerListingDetailsGallery .modal .modal-header .caption, #modalContainerListingDetailsGallery .modal .modal-header .stats-contact-agent, #modalContainerListingDetailsGallery .modal .modal-header .close-button, #modalContainerListingDetailsFloorPlans .modal .modal-header .price, #modalContainerListingDetailsFloorPlans .modal .modal-header .heading, #modalContainerListingDetailsFloorPlans .modal .modal-header .caption, #modalContainerListingDetailsFloorPlans .modal .modal-header .stats-contact-agent, #modalContainerListingDetailsFloorPlans .modal .modal-header .close-button, #modalContainerListingDetailsProgress .modal .modal-header .price, #modalContainerListingDetailsProgress .modal .modal-header .heading, #modalContainerListingDetailsProgress .modal .modal-header .caption, #modalContainerListingDetailsProgress .modal .modal-header .stats-contact-agent, #modalContainerListingDetailsProgress .modal .modal-header .close-button { order: unset; flex: unset } #modalContainerListingDetailsGallery .modal .modal-header .stats-contact-agent, #modalContainerListingDetailsFloorPlans .modal .modal-header .stats-contact-agent, #modalContainerListingDetailsProgress .modal .modal-header .stats-contact-agent { margin-left: auto } } #modalContainerListingDetailsGallery .modal .modal-content, #modalContainerListingDetailsFloorPlans .modal .modal-content, #modalContainerListingDetailsProgress .modal .modal-content { grid-area: content; position: relative; width: 100%; margin: 0; padding: 0; max-height: 100vh; max-width: 100vw } #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos { display: none; width: 100%; height: 100%; position: relative } #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-slide, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-slide, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-slide, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-slide, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-slide, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-slide, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-slide, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-slide, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-slide { width: 100%; height: 100% } #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-slide img, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-slide img, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-slide img, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-slide img, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-slide img, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-slide img, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-slide img, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-slide img, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-slide img { width: 100%; height: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; object-position: center center } #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-button-prev, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-button-next, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-button-prev, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-button-next, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-button-prev, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-button-next, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-button-prev, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-button-next, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-button-prev, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-button-next, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-button-prev, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-button-next, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-button-prev, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-button-next, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-button-prev, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-button-next, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-button-prev, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-button-next { width: var(--size-5); height: var(--size-10); display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.4); color: var(--colours-base-white) } #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-button-prev, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-button-prev, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-button-prev, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-button-prev, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-button-prev, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-button-prev, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-button-prev, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-button-prev, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 0px) } #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-button-next, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-button-next, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-button-next, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-button-next, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-button-next, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-button-next, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-button-next, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-button-next, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-button-next { right: var(--swiper-navigation-sides-offset, 0px) } #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination { padding: 0 var(--size-2); display: flex; justify-content: flex-end; gap: var(--size-1) } #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .fraction-container, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .fraction-container, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .fraction-container, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .fraction-container, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .fraction-container, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .fraction-container, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .fraction-container, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .fraction-container, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .fraction-container { height: var(--badge-size-md); padding: 0 var(--badge-spacing-md); display: flex; align-items: center; gap: var(--size-05); background: var(--badge-bg-neutral); color: var(--badge-text-neutral); font: var(--typography-text-xs-semibold-font); border: var(--border-width-none); border-radius: var(--border-rounded-sm) } #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-progress-grid { display: none } @media screen and (min-width: 1366px) { #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsGallery .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-gallery-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-floor-plans-photos .swiper-pagination .open-progress-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-gallery-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-floor-plans-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .photos-fullscreen-progress-btn, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-gallery-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-floor-plans-grid, #modalContainerListingDetailsProgress .modal .modal-content .listing-details-modal-progress-photos .swiper-pagination .open-progress-grid { display: block } } #modalContainerListingDetailsGallery .modal .modal-content .modal-grid, #modalContainerListingDetailsFloorPlans .modal .modal-content .modal-grid, #modalContainerListingDetailsProgress .modal .modal-content .modal-grid { display: none } #modalContainerListingDetailsGallery .modal .modal-content .modal-grid .grid-gallery, #modalContainerListingDetailsFloorPlans .modal .modal-content .modal-grid .grid-gallery, #modalContainerListingDetailsProgress .modal .modal-content .modal-grid .grid-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: var(--size-1) var(--size-1); overflow: auto } #modalContainerListingDetailsGallery .modal .modal-content .modal-grid .grid-gallery img, #modalContainerListingDetailsFloorPlans .modal .modal-content .modal-grid .grid-gallery img, #modalContainerListingDetailsProgress .modal .modal-content .modal-grid .grid-gallery img { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; object-position: center center } @media screen and (min-width: 1188px) { #modalContainerListingDetailsGallery .modal .modal-content .modal-grid .grid-gallery, #modalContainerListingDetailsFloorPlans .modal .modal-content .modal-grid .grid-gallery, #modalContainerListingDetailsProgress .modal .modal-content .modal-grid .grid-gallery { max-height: unset; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); grid-template-rows: repeat(auto-fit, minmax(220px, 1fr)); overflow: visible } #modalContainerListingDetailsGallery .modal .modal-content .modal-grid .grid-gallery img, #modalContainerListingDetailsFloorPlans .modal .modal-content .modal-grid .grid-gallery img, #modalContainerListingDetailsProgress .modal .modal-content .modal-grid .grid-gallery img { height: unset } } #modalContainerListingDetailsGallery .modal .listing-details-modal-grid-extras, #modalContainerListingDetailsFloorPlans .modal .listing-details-modal-grid-extras, #modalContainerListingDetailsProgress .modal .listing-details-modal-grid-extras { display: none } #modalContainerListingDetailsGallery .modal .open-contact-agent, #modalContainerListingDetailsFloorPlans .modal .open-contact-agent, #modalContainerListingDetailsProgress .modal .open-contact-agent { height: var(--button-size-md); padding: var(--spacing-button-spacing-md-padding); display: none; justify-content: center; align-items: center } @media screen and (min-width: 1366px) { #modalContainerListingDetailsGallery .modal .open-contact-agent, #modalContainerListingDetailsFloorPlans .modal .open-contact-agent, #modalContainerListingDetailsProgress .modal .open-contact-agent { display: flex } } #modalContainerListingDetailsGallery .modal .modal-footer, #modalContainerListingDetailsFloorPlans .modal .modal-footer, #modalContainerListingDetailsProgress .modal .modal-footer { grid-area: footer; padding: var(--size-2); display: flex; justify-content: center; align-items: center; gap: var(--size-1) } @media screen and (min-width: 1188px) { #modalContainerListingDetailsGallery .modal .modal-footer, #modalContainerListingDetailsFloorPlans .modal .modal-footer, #modalContainerListingDetailsProgress .modal .modal-footer { display: none } } #modalContainerListingDetailsGallery .modal .modal-footer .switch-btn, #modalContainerListingDetailsFloorPlans .modal .modal-footer .switch-btn, #modalContainerListingDetailsProgress .modal .modal-footer .switch-btn { width: var(--button-size-md); height: var(--button-size-md); display: flex; justify-content: center; align-items: center; background: var(--buttons-primary-ghost-background); border: var(--buttons-primary-ghost-border); border-radius: var(--border-rounded-none); cursor: pointer } #modalContainerListingDetailsGallery .modal .modal-footer .switch-btn .icon, #modalContainerListingDetailsFloorPlans .modal .modal-footer .switch-btn .icon, #modalContainerListingDetailsProgress .modal .modal-footer .switch-btn .icon { display: block; width: var(--size-3); height: var(--size-3) } #modalContainerListingDetailsGallery .modal .modal-footer .switch-btn .icon.active, #modalContainerListingDetailsFloorPlans .modal .modal-footer .switch-btn .icon.active, #modalContainerListingDetailsProgress .modal .modal-footer .switch-btn .icon.active { display: none; width: var(--size-3); height: var(--size-3) } #modalContainerListingDetailsGallery .modal .modal-footer .switch-btn.active, #modalContainerListingDetailsFloorPlans .modal .modal-footer .switch-btn.active, #modalContainerListingDetailsProgress .modal .modal-footer .switch-btn.active { width: var(--button-size-md); height: var(--button-size-md); padding: 0; display: flex; justify-content: center; align-items: center; background: var(--buttons-primary-background); border: var(--border-width-none); border-radius: var(--border-rounded-none) } #modalContainerListingDetailsGallery .modal .modal-footer .switch-btn.active .icon, #modalContainerListingDetailsFloorPlans .modal .modal-footer .switch-btn.active .icon, #modalContainerListingDetailsProgress .modal .modal-footer .switch-btn.active .icon { display: none; width: var(--size-3); height: var(--size-3) } #modalContainerListingDetailsGallery .modal .modal-footer .switch-btn.active .icon.active, #modalContainerListingDetailsFloorPlans .modal .modal-footer .switch-btn.active .icon.active, #modalContainerListingDetailsProgress .modal .modal-footer .switch-btn.active .icon.active { display: block; width: var(--size-3); height: var(--size-3) } #modalContainerListingDetailsGallery .modal-fullscreen, #modalContainerListingDetailsFloorPlans .modal-fullscreen, #modalContainerListingDetailsProgress .modal-fullscreen { width: 100vw; height: 100vh; max-width: unset } #modalContainerListingDetailsGallery .modal-fullscreen .modal-header, #modalContainerListingDetailsFloorPlans .modal-fullscreen .modal-header, #modalContainerListingDetailsProgress .modal-fullscreen .modal-header { height: 10vh } #modalContainerListingDetailsGallery .modal-fullscreen .modal-header .modal-header-left, #modalContainerListingDetailsFloorPlans .modal-fullscreen .modal-header .modal-header-left, #modalContainerListingDetailsProgress .modal-fullscreen .modal-header .modal-header-left { width: 50% } #modalContainerListingDetailsGallery .modal-fullscreen .modal-content, #modalContainerListingDetailsFloorPlans .modal-fullscreen .modal-content, #modalContainerListingDetailsProgress .modal-fullscreen .modal-content { height: 90vh; max-height: unset } #modalContainerListingDetailsGallery .modal-fullscreen .modal-content .modal-gallery-photos, #modalContainerListingDetailsGallery .modal-fullscreen .modal-content .listing-details-modal-floor-plans-photos, #modalContainerListingDetailsGallery .modal-fullscreen .modal-content .listing-details-modal-progress-photos, #modalContainerListingDetailsFloorPlans .modal-fullscreen .modal-content .modal-gallery-photos, #modalContainerListingDetailsFloorPlans .modal-fullscreen .modal-content .listing-details-modal-floor-plans-photos, #modalContainerListingDetailsFloorPlans .modal-fullscreen .modal-content .listing-details-modal-progress-photos, #modalContainerListingDetailsProgress .modal-fullscreen .modal-content .modal-gallery-photos, #modalContainerListingDetailsProgress .modal-fullscreen .modal-content .listing-details-modal-floor-plans-photos, #modalContainerListingDetailsProgress .modal-fullscreen .modal-content .listing-details-modal-progress-photos { max-height: unset } #contactAgentModal { z-index: 60 !important } #contactAgentModal .modal { max-width: 600px; height: 100vh; top: 0; left: 0; transform: none } @media screen and (min-width: 1188px) { #contactAgentModal .modal { left: 50%; transform: translate(-50%, 0) } } #contactAgentModal .modal .modal-content { max-height: calc(100vh - 72px); overflow: auto } #contactAgentModal .listing-details-agents { padding: 0; box-shadow: none } #contactAgentModal .listing-details-form-container { padding: 0 } #contactAgentModal .tab.form { display: none } #contactAgentModal .tab.scheduler { display: none } #contactAgentModal .tab.scheduler .tab-content.scheduler-content { min-height: 479px; display: flex; justify-content: center; align-items: center } #contactAgentModal .tab.form.active, #contactAgentModal .tab.scheduler.active { display: block } #contactAgentSticky { position: fixed; top: 100%; width: 100%; height: 0; transition: all ease-in-out 0.3s; z-index: 40; opacity: 0; background: var(--colours-base-background) } @media screen and (min-width: 1188px) { #contactAgentSticky { display: none } } #contactAgentSticky .listing-details-agents { box-shadow: none } #contactAgentSticky .listing-details-form-container { display: none; max-height: calc(100vh - 80px); overflow: auto } #contactAgentSticky.stuck { top: calc(100% - 80px); height: 80px; opacity: 1 } #contactAgentSticky.active { top: 0; height: 100vh } #contactAgentSticky.active .listing-details-form-container { display: block } .open-offer-terms { color: var(--colours-primary-7) } #makeAnOfferModal { z-index: 60 !important; display: flex; flex-direction: column; justify-content: center; align-items: center } #makeAnOfferModal .modal { position: relative; height: 100vh; margin: unset; top: unset; left: unset; transform: unset; overflow: auto } @media screen and (min-width: 1188px) { #makeAnOfferModal .modal { max-width: 80vh; height: 80vh } } #makeAnOfferModal .modal .modal-header { padding-left: var(--size-2); display: flex; justify-content: space-between } #makeAnOfferModal .modal .modal-header span { display: flex; align-items: center; font: var(--typography-text-xl-bold-font) } #makeAnOfferModal .modal .close-button { order: 2; width: var(--button-size-md); min-width: var(--button-size-md); height: var(--button-size-md); margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background: var(--colours-primary-7); border: 0 none } #makeAnOfferModal .modal .close-button .icon { width: var(--size-3); height: var(--size-3) } #makeAnOfferModal .modal .modal-content { padding: var(--size-3) var(--size-2); max-height: unset } #makeAnOfferModal .modal .modal-content strong { font-weight: bold } .print-agents { width: 100% } .print-agents .print-agent-card { width: 100%; display: flex; align-items: center; gap: var(--size-2) } .print-agents .print-agent-card .card-left { width: 30% } .print-agents .print-agent-card .card-right { width: 60%; display: flex; flex-direction: column; color: var(--colours-base-white) } .web-hide { display: none } @media print { .web-hide { display: block } .print-hide { display: none } }