/* Property Detail Styles */ #property-detail div.property-detail h1 { margin: 0% 0% 4px 0%; font-size: 1.875em; font-weight: 400; text-transform: uppercase; color: #95c11f; } #property-detail div.property-detail div.offset { padding: 0%; max-width: 1300px; } #property-detail div.property-detail div.extra div.offset { background-color: #F0F0F0; } #property-detail div.property-detail div.wg-slider div.slide-arrow { top: 54.75%; } #property-detail div.property-detail div.wg-slider div.slide-arrow:before { margin: 0% 30px; padding: 0%; width: 72px; height: 72px; font-family: 'Font Awesome 5 Pro'; font-size: 48px; line-height: 74px; font-weight: 300; text-align: center; color: #FFFFFF; background-color: rgb(65,65,65); border-radius: 0px; transition: background-color 0.3s ease; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; } #property-detail div.property-detail div.wg-slider div.arrow-left:before { content: '\f053'; } #property-detail div.property-detail div.wg-slider div.arrow-right:before { content: '\f054'; } #property-detail div.property-detail div.wg-slider div.slide-arrow:hover:before { background-color: rgb(51,51,51); } #property-detail div.property-detail div.placeholder div.responsive { padding-top: 56.153846153846%; height: 0px; position: relative; } #property-detail div.property-detail div.placeholder div.image { top: 0px; right: 0px; bottom: 0px; left: 0px; position: absolute; background-size: cover; background-position: center; background-repeat: no-repeat; } #property-detail div.property-detail div.map-container { padding-top: 43.8965724594%; height: 0px; position: relative; } #property-detail div.property-detail div.responsive-video { padding: 0%; } #property-detail div.property-detail div.responsive-video div.responsive-video-inner { padding-top: 56.153846153846%; padding-bottom: 0%; } #property-detail div.property-detail div.videos div.offset { background-color: transparent; } #property-detail div.property-detail div.documents-dimensions { margin: 0% auto; padding-top: 56.25%; width: 100%; height: 0px; display: block; position: relative; background-color: #E0E0E0; } #property-detail div.property-detail div.documents-wrapper { margin: 0%; padding: 0%; width: 100%; height: 100%; top: 0px; right: 0px; bottom: 0px; left: 0px; display: flex; position: absolute; align-items: center; } #property-detail div.property-detail div.documents-container { margin: 0% auto; padding: 3rem 1.5rem; max-width: 100%; max-height: 100%; text-align: center; flex: 1; overflow-y: auto; } #property-detail div.property-detail div.documents-container h3 { font-size: 1.75rem; font-weight: 700; } #property-detail div.property-detail ul.document-list { margin: 2rem auto 0% auto; padding: 0%; max-width: 800px; display: flex; align-items: stretch; flex-wrap: wrap; list-style: none; } #property-detail div.property-detail ul.document-list > .document { margin: 0% 0% 3% 3%; width: 48.5%; position: relative; } #property-detail div.property-detail ul.document-list > .document a { padding: 1.25rem 0.875rem; width: 100%; height: 100%; text-align: left; text-decoration: none; display: block; position: relative; background-color: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 6px; } #property-detail div.property-detail ul.document-list > .document .label { font-family: 'Lato', sans-serif; font-size: 0.875rem; line-height: 1.5em; font-weight: 600; text-transform: uppercase; color: #333333; } #property-detail div.property-detail ul.document-list > .document:hover a { background-color: #F0F0F0; } #property-detail div.property-detail ul.document-list > :nth-child(2n+1) { margin-left: 0%; } #property-detail div.property-detail ul.document-list > :nth-child(2n+2) { margin-left: 3%; } #property-detail div.property-detail div.main-detail { background-color: #e5f5f6; } #property-detail div.property-detail div.details { padding: 49px 70px 19px 52px; width: 72.46%; display: table-cell; position: relative; background-color: #005357; overflow: hidden; height: 220px; } #property-detail div.property-detail div.details div.sold { margin: 0%; padding: 12px 16px; width: 180px; right: -56px; top: 18px; font-size: 1.125em; line-height: 1em; font-weight: 600; text-align: center; text-transform: uppercase; position: absolute; display: block; color: #FFFFFF; background-color: #B12D2D; box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.25); z-index: 100; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); } #property-detail div.property-detail div.details div.under-offer { margin: 0%; padding: 12px 16px; width: 180px; right: -48px; top: 25px; font-size: 0.875em; line-height: 1em; font-weight: 600; text-align: center; text-transform: uppercase; position: absolute; display: block; color: #FFFFFF; background-color: #95c11f; box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.25); z-index: 100; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); } #property-detail div.property-detail div.details div.tender-sale { margin: 0%; padding: 12px 16px; width: 180px; right: -48px; top: 25px; font-size: 0.875em; line-height: 1em; font-weight: 600; text-align: center; text-transform: uppercase; position: absolute; display: block; color: #FFFFFF; background-color: #95c11f; box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.25); z-index: 100; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); } #property-detail div.property-detail div.details div.reduced { margin: 0%; padding: 12px 16px; width: 180px; right: -56px; top: 18px; font-size: 1.125em; line-height: 1em; font-weight: 600; text-align: center; text-transform: uppercase; position: absolute; display: block; color: #FFFFFF; background-color: #9A0000; box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.25); z-index: 100; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); } #property-detail div.property-detail div.details p { margin: 0%; font-size: 1.125em; line-height: 2em; color: #FFFFFF; } #property-detail div.property-detail div.details p.offers { margin: 0% 0% 5px 0%; font-size: 1.5em; line-height: 1.5em; } #property-detail div.property-detail div.details p.closing { font-size: 1em; line-height: 2em; } #property-detail div.property-detail div.details span.tag { margin: 8px 0% 0% 0%; padding: 6px 13px 8px 16px; font-size: 1em; text-transform: uppercase; display: inline-block; color: #414141; background-color: #F0F0F0; } #property-detail div.property-detail div.details div.column { padding: 0% 0% 0% 3px; width: 50%; display: inline-block; vertical-align: top; } #property-detail div.property-detail div.details div.column:last-of-type { padding: 3px 0% 0% 0%; text-align: right; } #property-detail div.property-detail div.attachments { padding: 48px 24px; width: 27.54%; display: table-cell; vertical-align: top; background-color: #004347; } #property-detail div.property-detail div.attachments div.extras { margin: 0%; display: flex; gap: 8px; } #property-detail div.property-detail div.attachments .extra { display: inline-block; color: #FFFFFF; text-decoration: none; display: flex; flex-direction: column; align-items: center; flex: 1; } #property-detail div.property-detail div.attachments .extra img, #property-detail div.property-detail div.attachments .extra svg { width: 100%; max-height: 34px; fill: #FFFFFF; transition: fill 0.3s ease; -webkit-transition: fill 0.3s ease; -moz-transition: fill 0.3s ease; } #property-detail div.property-detail div.attachments .extra span { margin: 4px 0% 0% 0%; font-size: 0.563em; line-height: 1em; font-weight: 300; text-transform: uppercase; text-align: center; display: block; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; } #property-detail div.property-detail div.attachments .extra span.icon { width: 30px; height: 30px; font-size: 30px; } #property-detail div.property-detail div.attachments .extra.active svg { fill: #95c11f !important; } #property-detail div.property-detail div.attachments .extra.active span { color: #95c11f; } #property-detail div.property-detail div.attachments .extra:hover svg { fill: #95c11f !important; } #property-detail div.property-detail div.attachments .extra:hover span { color: #95c11f; } #property-detail div.property-detail div.attachments .button.enquire { margin: 2.5rem 0% 0% 0%; padding: 10px 60px; font-size: 1em; line-height: 1.25em; text-align: center; text-transform: uppercase; display: block; color: #FFFFFF; background-color: #009ba4; border-radius: 4px; } #property-detail div.property-detail div.attachments .button.enquire:hover { background-color: #33afb6; } #property-detail div.property-detail div.attachments .extra.map svg path, #property-detail div.property-detail div.attachments .extra.plan svg path { fill: #FFFFFF !important; transition: fill 0.3s ease; -webkit-transition: fill 0.3s ease; -moz-transition: fill 0.3s ease; } #property-detail div.property-detail div.attachments .extra.map.active svg path, #property-detail div.property-detail div.attachments .extra.plan.active svg path { fill: #95c11f !important; } #property-detail div.property-detail div.attachments .extra.map:hover svg path, #property-detail div.property-detail div.attachments .extra.plan:hover svg path { fill: #95c11f !important; } #property-detail div.property-detail div.attachments button.extra { background-color: transparent; min-width: auto; line-height: 1.4; padding: 0; font-size: 1rem; } #property-detail div.property-detail div.main-detail div.offset { display: table; } #property-detail div.property-detail div.description { padding: 63px 62px 68px 26px; width: 72.46%; display: inline-block; vertical-align: top; } #property-detail div.property-detail div.description h3 { margin: 0% 0% 1.333em 0%; font-size: 1.5em; line-height: 1.5em; } #property-detail div.property-detail div.description p { margin: 0% 0% 1.875em 0%; line-height: 1.875em; } #property-detail div.property-detail div.description.full { padding: 63px 26px 68px 26px; width: 100%; display: block; } #property-detail div.property-detail div.features { margin: 52px 0% 0% 0%; padding: 2px 12px 2px 29px; width: 27.54%; display: inline-block; vertical-align: top; border-left: 7px solid #95c11f; } #property-detail div.property-detail div.features h3 { margin: 0% 0% 1.375em 0%; font-size: 1em; line-height: 1.5em; font-weight: 700; text-transform: uppercase; } #property-detail div.property-detail div.features ul { margin: 0%; padding: 0% 0% 0% 18px; list-style-type: square; } #property-detail div.property-detail div.features ul li { margin: 0% 0% 1em 0%; font-size: 1em; line-height: 1.25em; color: #333333; } #property-detail div.property-detail div.row.property-thoughts { position: relative; background-color: #bfe6e8; } #property-detail div.property-detail div.row.property-thoughts div.offset { display: flex; gap: 16px; } #property-detail div.property-detail div.row.property-thoughts .fa-thought-bubble { font-size: 3rem; color: #005357; } #property-detail div.property-detail div.row.property-thoughts .fa-arrow-up-from-arc { font-size: 1.25rem; color: #005357; } #property-detail div.property-detail div.row.property-thoughts .title { padding: 0.5rem; max-width: 300px; width: 100%; } #property-detail div.property-detail div.row.property-thoughts .title h2 { margin: 0; font-size: 1.75rem; padding-left: 2rem; } #property-detail div.property-detail div.row.property-thoughts .content { color: #005357; display: flex; align-items: center; margin: 1rem 0; max-width: 800px; width: 100%; } #property-detail div.property-detail div.row.property-thoughts .content p { color: inherit; margin: 0; padding: 0; } #property-detail div.property-detail div.row.property-thoughts button.close-btn { position: absolute; bottom: 0; right: 0; background-color: transparent; min-width: auto; display: flex; align-items: center; gap: 12px; color: #005357; line-height: 1.4; padding: 0; font-size: 1rem; } #property-detail div.property-detail div.row.property-thoughts.expand-section-wrapper { width: 100%; height: 0; overflow: hidden; color: white; transition: height 1.8s ease; } #property-detail div.property-detail div.row.property-thoughts.expand-section-wrapper .expand-section-content { padding: 2rem 3rem; } #map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #map .button, #map button { min-width: auto; } #map img { max-width: none; } /* Property Detail Popup Video Styles */ div.popup-background { background-color: rgba(0,0,0,0.8); } div.popup-panel.video-player { padding: 4% 0% 0% 0%; width: 100%; max-width: 1300px; background-color: transparent; border-radius: 0px; box-shadow: none; } div.popup-panel.video-player span.close { display: none; } div.popup-panel.video-player div.responsive-video div.responsive-video-inner { padding-bottom: 56.15%; background-color: #FFFFFF; } /* 900px Resolution Specific Styles */ @media only screen and (min-width: 0px) and (max-width: 900px) { /* Property Detail Styles */ #property-detail div.property-detail div.map-container { padding-top: 56.153846153846%; } #property-detail div.property-detail div.details { padding: 38px 24px 34px 24px; width: 100%; display: block; } #property-detail div.property-detail div.attachments { padding: 26px 24px; width: 100%; display: block; } #property-detail div.property-detail div.attachments div.extras { margin: 0% auto; max-width: 560px; } #property-detail div.property-detail div.attachments a.button.enquire { margin: 32px 0% 0% 0%; } #property-detail div.property-detail div.description { padding: 48px 24px 8px 24px; width: 100%; display: block; } #property-detail div.property-detail div.features { margin: 0%; padding: 38px 24px; width: 100%; display: block; border-top: 7px solid #95c11f; border-left: 0px; } /* 800px Resolution Specific Styles */ } @media only screen and (min-width: 0px) and (max-width: 800px) { /* Property Detail Mobile Styles */ #property-detail div.property-detail div.wg-slider div.slide-arrow { top: 50%; } #property-detail div.property-detail div.wg-slider div.slide-arrow:before { margin: 0% 9px; width: 32px; height: 32px; font-size: 16px; line-height: 32px; } #property-detail div.property-detail div.map-container { padding-top: 75%; } #property-detail div.property-detail div.responsive-video div.responsive-video-inner { padding-top: 56.25%; } #property-detail div.property-detail div.details { padding: 28px 18px 24px 18px; } #property-detail div.property-detail div.details p { font-size: 1em; } #property-detail div.property-detail div.details p.offers { margin: 16px 0% 0% 0%; font-size: 1.125em; line-height: 2em; font-weight: 600; } #property-detail div.property-detail div.attachments { padding: 26px 18px; } #property-detail div.property-detail div.description { padding: 36px 18px 32px 18px; } #property-detail div.property-detail div.description h3 { margin: 0% 0% 1em 0%; font-size: 1.25em; line-height: 1.5em; } #property-detail div.property-detail div.features { margin: 0%; padding: 38px 18px; } /* 700px Resolution Specific Styles */ } @media only screen and (min-width: 0px) and (max-width: 700px) { #property-detail div.property-detail div.row.property-thoughts div.offset { flex-direction: column; gap: 0px; } #property-detail div.property-detail div.row.property-thoughts .title { max-width: none; display: flex; align-items: center; } #property-detail div.property-detail div.row.property-thoughts .title h2 { padding-left: 1.5rem; } #property-detail div.property-detail div.row.property-thoughts .content { margin: 1rem 0 3rem; } #property-detail div.property-detail div.row.property-thoughts.expand-section-wrapper .expand-section-content { padding: 2rem; } /* 600px Resolution Specific Styles */ } @media only screen and (min-width: 0px) and (max-width: 600px) { /* Property Detail Mobile Styles */ #property-detail div.property-detail h1 { font-size: 1.625em; } #property-detail div.property-detail div.details { height: auto; } #property-detail div.property-detail div.details span.tag { display: none; } #property-detail div.property-detail div.details div.column { padding: 0% 0% 0% 4px; width: 100%; display: block; text-align: left; } #property-detail div.property-detail div.details div.column:last-of-type { padding: 0% 0% 0% 4px; text-align: left; } /* 400px Resolution Specific Styles */ } @media only screen and (min-width: 0px) and (max-width: 400px) { /* Property Detail Mobile Styles */ #property-detail div.property-detail div.row.property-thoughts .title { flex-direction: column; padding: 0; align-items: flex-start; gap: 8px; } #property-detail div.property-detail div.row.property-thoughts .title h2 { padding-left: 0; } }