/* Property Detail Styles */ #property-detail div.property-detail h1 { margin: 0% 0% 4px 0%; font-size: 1.875em; font-weight: 300; color: var(--green); text-align: left; } #property-detail div.property-detail h2 { margin: 0% 0% 20px 0%; font-size: 24px; } #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: 48px; height: 48px; font-family: 'Font Awesome 5 Pro'; font-size: 49px; line-height: 48px; font-weight: 800; text-align: center; color: rgb(255,255,255, 0.5);; background-color: transparent; border-radius: 50%; 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: '\f137'; } #property-detail div.property-detail div.wg-slider div.arrow-right:before { content: '\f138'; } #property-detail div.property-detail div.wg-slider div.slide-arrow:hover:before { color:rgb(255,255,255,0.75); } #property-detail div.wg-slider .slide-caption { display: none; } #property-detail div.property-detail div.wg-slider .slides { padding-top: 75%; background-color: transparent; } #property-detail div.property-detail div.wg-slider .slide-image img { border-radius: 16px; } #property-detail div.property-detail div.map-container { position: relative; height: 600px; } #property-detail div.property-detail div.map-container #map { height: 600px; } #property-detail div.property-detail .name-banner { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0 1.5rem; width: 100%; } #property-detail div.property-detail .name-banner .icon { margin-right: 0.5rem; } #property-detail div.property-detail .name-banner .back { min-width: 75px; text-align: right; } #property-detail div.property-detail .button-list { display: flex; flex-direction: column; } #property-detail div.property-detail .button-list a.button { width: 80%; margin-bottom: 1rem; border: none; display: flex; padding: 0.5rem 0.75rem; align-items: center; max-width: 220px; } #property-detail div.property-detail .button-list a.button span.icon { font-size: 1.75rem; margin-right: 0.5rem; color: #FFF; } #property-detail div.property-detail .button-list a.button span.label { font-size: 0.875rem; } #property-detail div.property-detail .button-list a.button span.green { color: var(--green); } #property-detail div.property-detail .button-list a.button span.white { color: #FFF; } #property-detail div.property-detail .button-list a.button:last-of-type { margin-bottom: 0; } #property-detail div.property-detail .button-list a.button.light-green { background-color: var(--light-green); border: 1px solid var(--light-green); } #property-detail div.property-detail .button-list a.button.light-green:hover { border: 1px solid var(--light-green); background-color: #FFF; color: var(--light-green); } #property-detail div.property-detail .button-list a.button.light-green:hover span.white { color: var(--light-green); } #property-detail div.property-detail .button-list a.button.dark-green { background-color: var(--dark-green); border: 1px solid var(--dark-green); } #property-detail div.property-detail .button-list a.button.dark-green:hover { border: 1px solid var(--dark-green); background-color: #FFF; color: var(--dark-green); } #property-detail div.property-detail .button-list a.button.dark-green:hover span.white { color: var(--dark-green); } #property-detail div.property-detail .button-list a.button.sea-green { background-color: var(--sea-green); border: 1px solid var(--sea-green); } #property-detail div.property-detail .button-list a.button.sea-green:hover { border: 1px solid var(--sea-green); background-color: #FFF; color: var(--sea-green); } #property-detail div.property-detail .button-list a.button.sea-green:hover span.white { color: var(--sea-green); } #property-detail div.property-detail .button-list a.button.white { background-color: #FFF; border: 1px solid #FFF; } #property-detail div.property-detail .button-list a.button.white:hover { border-color: var(--green); } #property-detail div.property-detail .scroll_to_desc { display: block; font-size: 1rem; cursor: pointer; } #property-detail div.property-detail div.offset { max-width: 1300px; } #property-detail div.property-detail div.offset.wide { max-width: 1350px; } #property-detail div.property-detail div.main-detail { background-color: var(--light-grey); padding: 0 0 3rem; } #property-detail div.property-detail div.details { background-color: #FFF; border-radius: 16px; padding: 3rem 2rem; height: 100%; } #property-detail div.property-detail div.details p.size { margin: 0%; font-size: 24px; line-height: 1em; } #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: #C97900; 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: #C97900; 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.offers { margin: 0.5rem 0% 2rem 0%; font-size: 1.5em; line-height: 1.5em; } #property-detail div.property-detail div.details p.offers.sale .price { color: #f28f3b; } #property-detail div.property-detail div.details p.closing { font-size: 1em; line-height: 2em; } #property-detail div.property-detail div.details span.tag { font-size: 0.875rem; color: var(--light-grey-text-alt); } #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 .information-items { display: flex; flex-direction: column; } #property-detail div.property-detail .information-items .information-item { display: flex; flex-direction: column; margin-bottom: 1rem; position: relative; padding-left: 1.5rem; } #property-detail div.property-detail .information-items .information-item:last-of-type { margin-bottom: 0; } #property-detail div.property-detail .information-items .information-item h3 { margin: 0 0 0.75rem; font-size: 18px; font-weight: 600; } #property-detail div.property-detail .information-items .information-item p { margin: 0; } #property-detail div.property-detail .information-items .information-item .border-left { position: absolute; left: 0; top: 5px; bottom: 5px; width: 5px; border-radius: 10px; background-color: var(--green); } */ #property-detail div.property-detail .information-items h2, #property-detail div.property-detail .information-items h3, #property-detail div.property-detail .information-items h4, #property-detail div.property-detail .information-items h5 { position: relative; padding: 0 0 0 1.5rem; } #property-detail div.property-detail .information-items h2 { font-size:1.25rem; font-weight: 500; } #property-detail div.property-detail .information-items p { padding: 0 0 0 1.5rem; } #property-detail div.property-detail .information-items h2::after, #property-detail div.property-detail .information-items h3::after, #property-detail div.property-detail .information-items h4::after, #property-detail div.property-detail .information-items h5::after { position: absolute; left: 0; top: 0px; bottom: 0px; width: 5px; display: block; content: ""; background-color: var(--dark-green); border-radius: 10px; } #property-detail div.property-detail div.main-detail div.offset { display: flex; } #property-detail div.property-detail div.row { padding: 40px 0; } #property-detail div.property-detail div.row.no-pad-bottom { padding-bottom: 0 !important; } #property-detail div.property-detail div.row.no-pad-top { padding-top: 0 !important; } #property-detail div.property-detail div.row.large-pad { padding: 60px 0; } #property-detail div.property-detail div.row.sea-green { background-color: var(--sea-green); } #property-detail div.property-detail div.row.sea-green .icon { margin-right: 1rem; } #property-detail div.property-detail div.row.sea-green p { font-style: italic; color: #FFF; } #property-detail div.property-detail div.row.light-grey { background-color: var(--light-grey); } #property-detail div.property-detail div.offset .column { flex: 0 1 auto; width: 66%; } #property-detail div.property-detail div.offset .column.small { flex: 0 1 auto; width: 30%; margin-left: 4%; min-width: 375px; } #property-detail div.property-detail .summary { margin-bottom: 1rem; } #property-detail div.property-detail .summary p:last-of-type { margin-bottom: 0rem; } #property-detail div.property-detail .summary span.reference { color: var(--light-grey-text-alt); } #property-detail div.property-detail .maps-plans { display: flex; gap: 2%; flex-wrap: wrap; } #property-detail div.property-detail .maps-plans .image-box { flex: 0 1 auto; width: 49%; display: flex; margin-bottom: 1rem; } #property-detail div.property-detail .maps-plans .image-box picture { display: flex; } #property-detail div.property-detail .old-legend { display: flex; flex-direction: column; } #property-detail div.property-detail .old-legend.left { align-items: baseline; } #property-detail div.property-detail .old-legend.right { align-items: end; } #property-detail div.property-detail .old-legend .image-box { width: 50%; } #property-detail div.property-detail .old-legend .image-box picture { display: flex; } #property-detail div.property-detail div.description { 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.25em 0%; line-height: 1.5em; } #map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #map2 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #map .button, #map button { min-width: auto; } #map img { max-width: none; } #floating_details { box-shadow: -5px 0px 23px -3px rgba(0,0,0,0.2); position: fixed; right: -200px; top: 100px; z-index: 10000000; background-color: #FFF; border-top-left-radius: 8px; border-bottom-left-radius: 8px; transition: all 1s ease; } /* #floating_details.open { width: 55px; } */ #floating_details.offscreen { width: 0px; } #floating_details.open.active { width: 384px; } #floating_details .wrapper { padding: 0.5rem; width: 384px; } #floating_details .button { background-color: transparent; color: var(--dark-green); font-size: 1.5rem; border: 0; padding: 0.5rem; } #floating_details .button.open_floating_details { padding: 1rem; display: flex; } #floating_details .button.open_floating_details span { margin-left: 0.5rem; display: flex; align-items: center; } #floating_backtotop { position: fixed; top: 600px; right: 50px; right: -120px; transition: all 1s ease; } #floating_backtotop a { background-color: #FFF; color: var(--dark-green); border: none; font-size: 2rem; box-shadow:-5px 0px 23px -3px rgba(0,0,0,0.2); padding: 8px 20px; width: 72px; height:48px; } #floating_backtotop a i { position: absolute; top: 10px; left: 20px; } #floating_backtotop a:hover i { animation: updownAnni 1s; } #property-detail #floating_details.property-detail div.details { padding: 0.5rem 2rem 3rem; } @keyframes updownAnni { 0% { top: 10px; } 50% { top: 3px; } 100% { top: 10px; } } #property-detail .slideshow { position: relative; overflow: hidden; border-radius: 16px; height: 100%; } #property-detail .slideshow .placeholder picture { display: flex; } #property-detail div.property-detail span.ribbon { margin: 0%; padding: 45px 16px 16px; width: 270px; right: -108px; top: -13px; font-size: 1.5em; line-height: 1em; font-weight: 500; text-align: center; text-transform: uppercase; position: absolute; display: block; color: #FFFFFF; z-index: 100; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);} #property-detail div.property-detail span.ribbon.under-offer { background-color: #f28f3b; font-size: 0.75em; } #property-detail div.property-detail span.ribbon.sold { background-color: #B12D2D; } #property-detail div.property-detail span.ribbon.reduced { background-color: #eac435; font-size: 1rem; } #property-detail div.property-detail span.ribbon.sale { background-color: #f28f3b; } #property-detail div.property-detail .strikethrough { position: relative; font-size: 1.25rem; color: #766e6f; margin-right: 0.5rem; display: inline-block; } #property-detail div.property-detail .strikethrough::before { position: absolute; content: ""; left: 0; top: 50%; right: 0; border-top: 1px solid; border-color: inherit; -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); -ms-transform: rotate(-12deg); -o-transform: rotate(-12deg); transform: rotate(-12deg); color: #766e6f; } #property-detail .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } #property-detail .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* 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.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.features { margin: 0%; padding: 38px 24px; width: 100%; display: block; border-top: 7px solid #C97900; 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.offset { flex-wrap: wrap; } #property-detail div.property-detail div.offset .column { flex: 0 1 auto; width: 100%; } #property-detail div.property-detail div.offset .column.small { flex: 0 1 auto; width: 100%; margin-left: 0; margin-top: 2rem; min-width: 0; } #property-detail div.property-detail div.main-detail { padding: 0 0 2rem; } #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: 50px; height: 32px; font-size: 38px; line-height: 32px; } #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 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; } #property-detail div.property-detail .maps-plans .image-box { width: 100%; } #property-detail div.property-detail .old-legend .image-box { width: 100%; } /* #property-detail div.property-detail div.map-container { position: relative; height: 400px; } #property-detail div.property-detail div.map-container #map { height: 400px; } */ /* 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; } #floating_details .wrapper { width: 300px; } #property-detail div.property-detail .name-banner { padding: 0 0 1.5rem; } }