/* Theme Name: Horváth Ingatlanok Theme URI: https://horvathingatlanok.com Description: A Horváth Ingatlanok ingatlangyűjtő portál alapértelmeeztt sablonja. Author: Digitalform Author URI: https://digitalform.hu Version: 1.0 */ *{ margin: 0; padding: 0; border: 0; flex-wrap: wrap; text-decoration: none; } @font-face { font-family: 'Barlow'; src: url("fonts/barlow-medium.woff2") format('woff2'); font-weight: 500; font-style: normal; font-stretch: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url("fonts/barlow-medium-italic.woff2") format('woff2'); font-weight: 500; font-style: italic; font-stretch: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url("fonts/barlow-semibold.woff2") format('woff2'); font-weight: 600; font-style: normal; font-stretch: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url("fonts/barlow-semibold-italic.woff2") format('woff2'); font-weight: 600; font-style: italic; font-stretch: normal; font-display: swap; } *, *:after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } :root { --color-gray: #666666; --color-silver: #f4f3f1; --color-silver-line: #dddddd; --color-green: #007b6d; --color-red: #dd2e44; --color-dark: #000000; --color-notice: #fdf4a1; --color-notice-text: #856404; --font-size-h1: clamp(32px, 5vw, 65px); --font-size-h2: clamp(30px, 6vw, 40px); --font-size-h3: clamp(20px, 5vw, 25px); } body { margin: auto; font-family: 'Barlow', sans-serif; font-size: 20px; font-weight: 500; color: var(--color-dark); line-height: 30px; background: #666666; overflow-x: hidden; } body.rwd_menu__opened { overflow-y: hidden !important; } textarea, input, select, button { font-family: 'Barlow', sans-serif; font-size: 20px; outline: none; } h1, h2, h3, h4 { font-weight: normal; line-height: 100%; } img.alignleft { margin: 0 20px 5px 0; float: left; } img.alignright { margin: 0 0 5px 20px; float: right; } img.aligncenter { margin: 0 auto 20px auto; display: block; } hr { width: 100%; margin: 20px 0; border-top: 3px solid var(--color-silver-line); } /* Classes */ .clear { clear: both; } .inner { max-width: 1280px; margin-left: auto; margin-right: auto; position: relative; } .inner.inner_600 { max-width: 600px; } .inner.inner_800 { max-width: 800px; } .vertical_middle { top: 50%; position: relative; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .hide { display: none !important; } .red { color: var(--color-red); } .center { text-align: center; } .uppercase { text-transform: uppercase; } /* Animation */ .anim, :before, :after { -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } /* Button */ .button { height: 50px; padding: 0 30px; font-size: 18px !important; font-weight: 500; text-decoration: none !important; color: #ffffff !important; line-height: 20px; background: var(--color-primary); display: inline-flex; align-content: center; justify-content: center; cursor: pointer; border-radius: 10px; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .button:hover { color: #ffffff !important; background-color: var(--color-dark); } .button:after { display: none !important; } .button.button_yellow { color: var(--color-dark) !important; background: var(--color-secondary); } .button.button_yellow:hover { color: #ffffff !important; background: var(--color-primary); } .button.button_h40 { height: 40px; padding: 0 15px; } .button:disabled, .button:disabled:hover { color: rgba(255 255 255 / 30%) !important; background-color: var(--color-gray) !important; } /* iOS Switch */ .ios-switch-labeled { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .ios-switch-labeled input { width: 0; height: 0; opacity: 0; position: absolute; } .ios-switch-labeled .switch-slider { width: 50px; height: 30px; background-color: var(--color-silver-line); border-radius: 15px; position: relative; transition: 0.4s; } .ios-switch-labeled .switch-slider:before { width: 24px; height: 24px; left: 3px; bottom: 3px; background-color: white; position: absolute; border-radius: 50%; content: ''; transition: 0.4s; box-shadow: 0 0 2px rgba(0 0 0 / 2%); } .ios-switch-labeled input:checked + .switch-slider { background-color: var(--color-green); } .ios-switch-labeled input:checked + .switch-slider:before { transform: translateX(20px); } .ios-switch-labeled .label-text { font-size: 18px; } /* Website */ #website { max-width: 1800px; min-height: 100vh; margin: auto; background: #ffffff; } /* Checkbox and radio */ input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; margin: -4px 4px 0 0 !important; padding: 0 !important; text-align: center !important; background-color: var(--color-silver); clear: none; cursor: pointer; display: inline-block; line-height: 0; outline: 0; vertical-align: middle !important; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; } input[type="radio"] { -webkit-border-radius: 50%; border-radius: 50%; } input[type="radio"]:checked:before { width: 14px; height: 14px; left: 4px; top: 4px; text-align: center; background: var(--color-red); position: relative; border-radius: 8px; display: block; content: ''; } input[type="checkbox"]:checked:before { width: 100%; height: 100%; left: 0; top: 0; color: #ffffff; background: var(--color-primary); position: relative; display: flex; align-items: center; justify-content: center; content: '✓'; } /* ------------- MODAL ------------- */ /* Saved Search */ #save-search-modal { max-width: 600px; border-radius: 10px; } #save-search-modal a { text-decoration: underline; color: var(--color-primary); user-select: none; } #save-search-modal a:hover { text-decoration: none; } #save-search-modal h3 { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px solid var(--color-silver-line); display: flex; align-items: center; } #save-search-modal h3 .icon { width: 40px; height: 40px; margin-right: 10px; background: var(--color-silver) url(images/icon-heart-red.svg) no-repeat center / auto 20px; border-radius: 50%; } #save-search-modal .intruction { margin-bottom: 20px; font-size: 18px; line-height: 30px; } /* More filters */ #more-filters { max-width: 600px; border-radius: 10px; } #more-filters h3 { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-silver-line); display: flex; align-items: center; } /* Faorite feedback */ #fav-feedback { max-width: 600px; border-radius: 10px; } #fav-feedback h3 { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-silver-line); display: flex; align-items: center; } #fav-feedback h3 .icon { width: 40px; height: 40px; margin-right: 10px; background: var(--color-silver) url(images/icon-heart-red.svg) no-repeat center / auto 20px; border-radius: 50%; } /* ------------------ NAVIGATION ------------------ */ #rwd_menu { left: 0; top: 80px; right: 0; bottom: 0; background: rgb(18 65 56 / 80%); position: fixed; z-index: 1000; visibility: hidden; opacity: 0%; } #rwd_menu .rwd_menu_wrap { width: 400px; height: 100%; left: -100%; padding: 30px 50px; background: #ffffff; position: absolute; z-index: 1000; overflow: auto; } #rwd_menu .rwd_menu_wrap label { margin-bottom: 10px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--color-primary); display: block; } #rwd_menu ul.menu { margin-left: 20px; margin-bottom: 30px; } #rwd_menu ul.menu li { margin: 2px 0; } #rwd_menu ul.menu li a { font-size: 22px; color: var(--color-dark); line-height: 100%; display: inline-block; } #rwd_menu ul.menu li a:hover { text-decoration: underline; } /* Contact */ #rwd_menu .contact { border: 1px solid var(--color-silver-line); } #rwd_menu .contact a.meta_box { height: 70px; padding-left: 20px; font-size: 18px; font-weight: 700; color: var(--color-primary); line-height: 70px; letter-spacing: 1px; border-bottom: 1px solid var(--color-silver-line); display: block; position: relative; } #rwd_menu .contact a.meta_box:last-child { border-bottom: none; } #rwd_menu .contact a.meta_box:hover { background: var(--color-silver); } #rwd_menu .contact a.meta_box:after { width: 70px; height: 100%; right: 0; top: 0; background-repeat: no-repeat; background-position: center; background-size: auto 30px; border-left: 1px solid var(--color-silver-line); position: absolute; content: ''; } #rwd_menu .contact a.meta_box.phone:after { background-image: url(images/icon-phone-green.svg); } #rwd_menu .contact a.meta_box.email:after { background-image: url(images/icon-mail-green.svg); } body.rwd_menu__opened #rwd_menu { visibility: visible; opacity: 100%; } body.rwd_menu__opened #rwd_menu .rwd_menu_wrap { left: 0; } /* -------------- HEADER -------------- */ #header { height: 80px; border-bottom: 1px solid var(--color-silver-line); } #header .header_wrap { max-width: none; height: 100%; padding-left: 50px; padding-right: 50px; display: flex; justify-content: space-between; align-items: center; } /* Menu */ #header ul.menu { display: flex; list-style: none; } #header ul.menu li { margin: 0 15px; } #header ul.menu li:first-child { margin-left: 0; } #header ul.menu li:last-child { margin-right: 0; } #header ul.menu li a { font-size: 18px; color: var(--color-gray); } #header ul.menu li a:hover { text-decoration: underline; color: var(--color-primary); } #header ul.menu li.current-menu-item a { color: var(--color-dark); } #header ul.menu li.profile { padding-left: 30px; border-left: 1px solid var(--color-silver-line); } #header ul.menu li.profile a { padding-left: 25px; color: var(--color-dark); background: url(images/icon-user-dark.svg) no-repeat left center / auto 18px; } #header ul.menu li.menu-item-has-children:hover a:after { width: 100%; background: #2bbfb1; } #header ul.menu li.menu-item-has-children:hover > ul { visibility: visible; opacity: 100%; } #header ul.menu li ul { width: 450px; left: 0; top: 100%; background: white; display: block; position: absolute; z-index: 10; visibility: hidden; opacity: 0; list-style: none; -moz-box-shadow: 0 2px 3px rgba(0 0 0 / 10%); -webkit-box-shadow: 0 2px 3px rgba(0 0 0 / 10%); box-shadow: 0 2px 3px rgba(0 0 0 / 10%); } #header ul.menu li ul li { margin-right: 0; } #header ul.menu li ul li a { padding: 25px 0 25px 85px; font-size: 18px; line-height: 20px; border-left: 5px solid transparent; text-transform: none; } #header ul.menu li ul li a:hover { background: #eef0f4; border-left-color: #2bbfb1; } #header ul.menu li ul li a:before { width: 50px; height: 50px; left: 20px; top: calc(50% - 25px); background-repeat: no-repeat; background-position: center; background-size: auto 24px; position: absolute; content: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #header ul.menu li ul li a:hover:before { background-color: #e1e5ec; } #header ul.menu li ul li.menu-item-78 a:before { background-image: url(images/icon_woods.svg); } #header ul.menu li ul li.menu-item-79 a:before { background-image: url(images/icon_window.svg); } #header ul.menu li ul li.menu-item-80 a:before { background-image: url(images/icon_design_elements.svg); } #header ul.menu li ul li.menu-item-81 a:before { background-image: url(images/icon_woodhouse.svg); } #header ul.menu li ul li.menu-item-82 a:before { background-image: url(images/icon_roof.svg); } #header ul.menu li ul li.menu-item-83 a:before { background-image: url(images/icon_screws.svg); } #header ul.menu li ul li.menu-item-114 a:before { background-image: url(images/icon_tile.svg); } #header ul.menu li ul li a:after { width: auto !important; height: 1px; left: 90px; right: 50px; background: #ddd !important; } #header ul.menu li ul li:last-child a:after { display: none !important; } /* Logo */ #header .logo { width: fit-content; height: 46px; left: 50%; top: 50%; display: block; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* RWD button */ #header .rwd_button { width: 50px; height: 50px; background: var(--color-primary); position: relative; border-radius: 10px; cursor: pointer; } #header .rwd_button .burg { width: 30px; top: calc(50% - 2px); left: 10px; position: absolute; } #header .rwd_button .burg:before, #header .rwd_button .burg:after { width: 30px; height: 2px; background: #ffffff; position: absolute; content: ''; -webkit-transition: 0.2s; transition: 0.2s; } #header .rwd_button .burg:before { top: calc(50% - 4px); left: 0; } #header .rwd_button .burg:after { top: calc(50% + 4px); right: 0; } body.rwd_menu__opened #header .rwd_button .burg:before { top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); } body.rwd_menu__opened #header .rwd_button .burg:after { top: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* ---------------------- MARKETING TEXT ---------------------- */ #marketing_text { padding: 150px 0; } #marketing_text .marketing_text_wrap { display: flex; align-items: end; } #marketing_text .marketing_text_wrap > div { flex-grow: 1; flex-basis: 0; } #marketing_text .marketing_text_wrap > div h1 { font-size: var(--font-size-h1); font-weight: 600; } #marketing_text .marketing_text_wrap > div h1 span { border-bottom: 4px solid var(--color-secondary); } #marketing_text .marketing_text_wrap > div a { text-decoration: underline; text-decoration-thickness: 1px; color: var(--color-primary); } #marketing_text .marketing_text_wrap > div a:hover { text-decoration: none; } /* ------------- SLIDE ------------- */ #slide { height: 800px; background: #f1f1f1; position: relative; } #slide .slide_image { height: 100%; position: relative; z-index: 1; } #slide .slide_image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } #slide #filters { width: 100%; max-width: 1280px; left: 0; right: 0; bottom: 20px; margin: auto; padding: 20px; color: var(--color-primary); background: #ffffff; position: fixed; z-index: 999; border-radius: 10px; transition: all 0.3s ease; } /* ------------------------- LATEST PROPERTIES ------------------------- */ #latest_properties { padding: 100px 0; } #latest_properties.featured { border-top: 1px solid var(--color-silver-line); } #latest_properties .latest_properties_header { margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between; } #latest_properties .latest_properties_header h2 { font-size: var(--font-size-h2); font-weight: 600; } /* -------------- FILTER -------------- */ #property-filter-form { display: grid; grid-template-columns: 200px 1fr 300px 200px; gap: 0 20px; align-items: end; } #property-filter-form .filter_row label { font-size: 14px; font-weight: 600; text-transform: uppercase; display: block; } #property-filter-form .filter_row .property_price_wrap { width: 100%; height: 50px; padding: 0 15px; border: 1px solid var(--color-silver-line); display: grid; grid-template-columns: 1fr 20px 1fr 50px; gap: 0; align-items: center; border-radius: 10px; } #property-filter-form .filter_row .property_price_wrap input[type="number"] { width: 100%; min-width: 0; height: 20px; font-size: 18px; } #property-filter-form .filter_row .property_price_wrap .separator { width: 20px; text-align: center; } #property-filter-form .filter_row .property_price_wrap .currency { width: 50px; height: 20px; padding-left: 15px; font-size: 16px; line-height: 20px; border-left: 1px solid var(--color-silver-line); } #property-filter-form .filter_row select, #property-filter-form .filter_row input[type="text"] { width: 100%; height: 50px; padding-left: 15px; font-size: 18px; border: 1px solid var(--color-silver-line); border-radius: 10px; } #property-filter-form .filter_row button[type="submit"] { width: 100%; height: 50px; font-size: 18px; color: white; background: var(--color-primary); border-radius: 10px; cursor: pointer; } #property-filter-form .more_filters { width: 50px; height: 50px; font-size: 0; background: var(--color-green) url(images/icon-filter-white.svg) no-repeat center / auto 20px; border-radius: 10px; } #property-filter-form .more_filters:hover { background-color: var(--color-primary); } #property-filter-form .save_searches { width: 50px; height: 50px; font-size: 0; background: var(--color-red) url(images/icon-heart-white.svg) no-repeat center / auto 20px; border-radius: 10px; } #property-filter-form .save_searches:hover { background-color: var(--color-primary); } #property-filter-form .full-width { width: 100%; margin-top: 10px; grid-column: 1 / -1; } #property-filter-form .full-width .more_filters_text { padding-left: 30px; font-size: 16px; color: var(--color-dark) !important; line-height: 20px; background: url(images/icon-filter-dark.svg) no-repeat left center / auto 18px; } /* Archive */ #filters_archive { padding: 20px 0; background: #ffffff; border-bottom: 1px solid var(--color-silver-line); } /* If user logged in */ body:not(body.home) #property-filter-form { grid-template-columns: 200px 1fr 300px 200px 50px; } body.logged-in.post-type-archive-property:not(body.home) #property-filter-form { grid-template-columns: 200px 1fr 300px 200px 50px 50px; grid-template-rows: auto auto; } /* --------------------- PROPERTY LIST --------------------- */ .property_list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 40px; } .property_list .property { height: fit-content; margin-bottom: 50px; padding-bottom: 80px; position: relative; } /* Add to faveories */ .property_list .property .fav-toggle { width: 50px; height: 50px; left: 10px; top: 10px; font-size: 0; background: #ffffff url(images/icon-heart-gray.svg) no-repeat center / auto 20px; display: flex; position: absolute; z-index: 10; border-radius: 10px; } .property_list .property .fav-toggle:hover { background-image: url(images/icon-heart-red.svg); } .property_list .property .fav-toggle.active { background-image: url(images/icon-heart-red.svg); } /* Thumbnail */ .property_list .property .thumbnail { display: block; position: relative; overflow: hidden; border-radius: 10px; } .property_list .property .thumbnail img { width: 100%; height: auto; display: block; position: relative; transform: scale(1) translateZ(0); transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1); } .property_list .property .thumbnail:hover img { transform: scale(1.05) translateZ(0); } .property_list .property .thumbnail .ribbon { width: 150px; top: 15px; right: -45px; padding: 5px 0; font-size: 16px; font-weight: 600; text-align: center; text-transform: uppercase; color: var(--color-dark); background: var(--color-secondary); position: absolute; transform: rotate(45deg); z-index: 10; pointer-events: none; } /* Entry */ .property_list .property .entry { padding-top: 20px; } .property_list .property .entry .title_price { display: flex; justify-content: space-between; } .property_list .property .entry .title_price h3 { margin-bottom: 0 !important; flex: 1; } .property_list .property .entry .title_price h3 a { font-size: 18px; font-weight: 600; text-decoration: none !important; color: var(--color-dark) !important; line-height: 20px; display: block; } .property_list .property .entry .title_price h3 a:hover { text-decoration: underline !important; } .property_list .property .entry .title_price .price { width: 120px; font-size: 20px; text-align: right; line-height: 100%; } /* .property_list .property .city_datas .city { margin-bottom: 10px; padding-left: 25px; font-size: 18px; line-height: 20px; color: var(--color-gray); background: url(images/icon-marker-dark.svg) no-repeat left center / auto 18px; } .property_list .property .city_datas .datas { padding-top: 5px; border-top: 1px solid var(--color-silver-line); display: flex; } .property_list .property .city_datas .datas > div { margin-right: 15px; font-size: 16px; } .property_list .property .city_datas .datas > div:last-child { margin-right: 0; } .property_list .property .city_datas .datas > div sup { line-height: 0; } */ .property_list .property .city_datas { width: 100%; left: 0; bottom: 0; margin-top: auto; position: absolute; } .property_list .property .city_datas .city { margin-bottom: 10px; font-size: 18px; line-height: 20px; color: var(--color-gray); } .property_list .property .city_datas .datas { display: flex; } .property_list .property .city_datas .datas > div:not(.sep) { padding-left: 30px; font-size: 16px; background-repeat: no-repeat; background-position: left center; background-size: auto 18px; display: flex; align-items: center; } .property_list .property .city_datas .datas > div.rooms { background-image: url(images/icon-bed-dark.svg); } .property_list .property .city_datas .datas > div.bathrooms { background-image: url(images/icon-bathroom-dark.svg); } .property_list .property .city_datas .datas > div.area { background-image: url(images/icon-area-dark.svg); } .property_list .property .city_datas .datas > div.sep { margin: 0 10px; font-size: 0; } .property_list .property .city_datas .datas > div.sep:first-child { display: none; } /* Two columns */ .property_list.two_columns { grid-template-columns: 1fr 1fr; } /* Nearby properties */ #nearby_properties { margin-top: 50px; padding-top: 50px; border-top: 2px solid var(--color-silver-line); } /* Map view */ .inner_map { display: flex; } .inner_map .property_list { width: 940px; padding: 0 50px; } .inner_map #property-map-wrapper { height: 100vh; top: 0; flex: 1; position: sticky; } .inner_map #property-map { height: 100%; } .map-popup a { outline: none !important; } .map-popup img { width: 100%; max-width: 300px; height: auto; margin-bottom: 10px; display: block; } .map-popup h4 { font-size: 16px; font-family: 'Barlow', sans-serif; font-weight: 600; line-height: 20px; } .mapboxgl-popup-close-button { width: 30px; height: 30px; top: -10px !important; right: -10px !important; color: #000000 !important; background: var(--color-secondary) !important; display: flex !important; align-items: center; justify-content: center; border-radius: 50% !important; } .mapboxgl-popup-close-button:hover { color: #ffffff !important; background: var(--color-primary) !important; } /* ----------------------- SINGLE PROPERTY ----------------------- */ /* Header */ #single_property_header .single_property_header_wrap { margin-bottom: 50px; display: flex; align-items: end; } #single_property_header .single_property_header_wrap > h1 { width: 100%; } #single_property_header .header_wrap_left { flex: 1; } #single_property_header .header_wrap_left .city { margin: -10px 0 20px; color: var(--color-gray); } #single_property_header .header_wrap_left .price { margin-bottom: 30px; font-size: var(--font-size-h3); font-weight: 600; } #single_property_header .header_wrap_left .property_short_description { font-size: 18px; color: var(--color-gray); } #single_property_header .header_wrap_left .property_action_buttons { margin-bottom: 30px; display: flex; } #single_property_header .header_wrap_left .property_action_buttons a { margin-right: 20px; } #single_property_header .header_wrap_left .property_action_buttons a.fav-toggle { height: 40px; font-size: 18px !important; text-decoration-thickness: 1px !important; color: var(--color-dark) !important; display: flex; align-items: center; } #single_property_header .header_wrap_left .property_action_buttons a.fav-toggle .icon { width: 40px; height: 40px; margin-right: 10px; background: var(--color-silver) url(images/icon-heart-gray.svg) no-repeat center / auto 20px; display: flex; z-index: 10; border-radius: 10px; } #single_property_header .header_wrap_left .property_action_buttons a.fav-toggle:hover .icon { background-image: url(images/icon-heart-red.svg); } #single_property_header .header_wrap_left .property_action_buttons a.fav-toggle.active { text-decoration: none !important; } #single_property_header .header_wrap_left .property_action_buttons a.fav-toggle.active .icon { background-color: var(--color-red); background-image: url(images/icon-heart-white.svg); } #single_property_header .header_wrap_right { width: 300px; margin-left: 100px; } #single_property_header .header_wrap_right .meta { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-silver-line); } #single_property_header .header_wrap_right .meta .value { font-size: var(--font-size-h2); line-height: 100%; } #single_property_header .header_wrap_right .meta .name { font-size: 18px; } /* Photos */ #property_gallery_grid { margin-bottom: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } #property_gallery_grid .gallery_big { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; } #property_gallery_grid .gallery_big img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; display: block; border-radius: 10px; } #property_gallery_grid .gallery_small_grid { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; } #property_gallery_grid .gallery_small_grid a { width: 100%; height: 100%; display: block; position: relative; border-radius: 10px; overflow: hidden; } #property_gallery_grid .gallery_small_grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; display: block; border-radius: 10px; } #property_gallery_grid .gallery_small_grid .has_overlay .overlay_text { inset: 0; font-weight: bold; font-size: 20px; text-align: center; color: #ffffff; background: rgba(0 0 0 / 50%); display: flex; align-items: center; justify-content: center; position: absolute; border-radius: 10px; pointer-events: none; } /* All data */ #property_datas { flex: 1; } #property_datas .grid_data { margin-bottom: 50px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px 40px; } #property_datas .grid_data .meta { padding-bottom: 20px; border-bottom: 1px solid var(--color-silver-line); } #property_datas .grid_data .meta sup { line-height: 0; } #property_datas .grid_data_checkbox { margin-bottom: 50px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px 40px; } #property_datas .grid_data_checkbox .meta { padding-bottom: 20px; padding-left: 30px; background: url(images/icon-check-green.svg) no-repeat left 6px / auto 20px; border-bottom: 1px solid var(--color-silver-line); } #property_datas .property_description { margin-bottom: 50px; padding: 30px; background: var(--color-silver); border-radius: 10px; } /* Property referent */ #property_referent { width: 300px; margin-left: 100px; } #property_referent .card { top: 20px; background: var(--color-silver); position: sticky; } #property_referent .card .card_top { padding: 20px; font-size: 18px; line-height: 25px; } #property_referent .card .cart_bottom { position: relative; } #property_referent .card .cart_bottom img { width: 100%; height: auto; display: block; } #property_referent .card .cart_bottom .caption { left: 20px; right: 20px; bottom: 20px; padding-top: 20px; font-size: 16px; text-transform: uppercase; color: white; line-height: 20px; border-top: 1px solid rgba(255 255 255 / 50%); position: absolute; } #property_referent .card .cart_bottom .caption small { font-size: 18px; display: block; } /* Make Contact */ #make_contact { width: 100%; left: 0; bottom: 0; padding: 10px; background: rgba(255 255 255 / 30%); position: fixed; z-index: 100; transition: opacity 0.3s ease; opacity: 0%; } #make_contact.visible { opacity: 100%; } #make_contact .button { width: 100%; } /* --------------- COMPARE --------------- */ #compare-banner { margin-top: 30px; padding: 20px; font-size: 16px; line-height: 20px; color: var(--color-notice-text); background: var(--color-notice); border-radius: 10px; } #compare-banner h3 { margin-bottom: 10px !important; color: var(--color-dark); } #compare-banner .button { margin-top: 20px; } .comparison_table { display: grid; grid-template-columns: 200px 1fr 1fr 1fr; gap: 0 30px; align-content: end; } .comparison_table .cell.property { padding: 20px 0; display: flex; align-content: end; } .comparison_table .cell.property div:not(.action_button) { width: 100%; height: 40px; font-size: 16px; line-height: 20px; border-bottom: 1px solid var(--color-silver-line); display: flex; align-items: center; } .comparison_table .cell.data { padding: 20px; background: var(--color-silver); position: relative; border-radius: 10px; } .comparison_table .cell.data .thumbnail { position: relative; overflow: hidden; border-radius: 10px; } .comparison_table .cell.data .thumbnail img { width: 100%; height: auto; display: block; position: relative; z-index: 1; } .comparison_table .cell.data .cover { inset: 0; background: linear-gradient(to bottom, rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 30%) 80%, rgba(0 0 0 / 100%) 100%); position: absolute; z-index: 2; } .comparison_table .cell.data .caption { left: 20px; right: 20px; bottom: 20px; padding-top: 20px; font-size: 16px; text-transform: uppercase; color: white; line-height: 20px; border-top: 1px solid rgba(255 255 255 / 50%); position: absolute; } .comparison_table .cell.data .compare-remove { width: 40px; height: 40px; right: 20px; top: 20px; background: var(--color-red) url(images/icon-remove-white.svg) no-repeat center / auto 12px; position: absolute; border-radius: 50%; z-index: 10; cursor: pointer; } .comparison_table .cell.data .compare-remove:hover { background-color: var(--color-dark); } .comparison_table .value_cells { } .comparison_table .value_cells .cell { height: 40px; border-bottom: 1px solid var(--color-silver-line); display: flex; align-items: center; justify-content: center; } .comparison_table .action_button { height: 50px; margin-top: 20px; } .comparison_table .action_button .button { width: 100%; } .comparison_table .cell.placeholder { padding: 20px; background: #ffffff; border: 2px dashed var(--color-silver-line); display: flex; align-items: center; justify-content: center; border-radius: 10px; } /* Slick dots */ .comparison_table ul.slick-dots { margin-top: 10px; margin-left: 0 !important; display: flex; justify-content: center; list-style: none; } .comparison_table ul.slick-dots li { margin: 0 10px; } .comparison_table ul.slick-dots li button { width: 24px; height: 24px; font-size: 16px; color: var(--color-dark); background: var(--color-silver); border-radius: 50%; cursor: pointer; } .comparison_table ul.slick-dots li.slick-active button { color: white; background: var(--color-green); } /* --------------- ABOUTUS --------------- */ #aboutus { background: var(--color-silver); } #aboutus .aboutus_wrap { display: flex; } #aboutus .aboutus_wrap > div { flex-grow: 1; flex-basis: 0; } #aboutus .aboutus_wrap .wrap_left { padding: 100px 0; } #aboutus .aboutus_wrap.has_thumbnail > div { flex-grow: inherit; flex-basis: auto; } #aboutus .aboutus_wrap.has_thumbnail .wrap_left { width: 50%; padding-top: 170px; padding-left: calc((100% - 1280px) / 2); padding-right: 100px; position: relative; } #aboutus .aboutus_wrap.has_thumbnail .wrap_left:before { width: 100%; height: 70px; left: 0; top: 0; background: #ffffff; position: absolute; content: ''; } #aboutus .aboutus_wrap.has_thumbnail .wrap_right { width: 50%; padding-left: 50px; padding-bottom: 20px; padding-right: calc((100% - 1280px) / 2); background: no-repeat left center / cover; display: flex; align-items: end; } #aboutus .aboutus_wrap.has_thumbnail .wrap_right .caption { width: 100%; padding-top: 20px; font-size: 18px; color: white; line-height: 20px; border-top: 1px solid rgba(255 255 255 / 50%); } #aboutus .aboutus_wrap.has_thumbnail .wrap_right .caption small { font-size: 18px; display: block; } #aboutus .aboutus_wrap .aboutus_subtitle { font-size: 18px; } #aboutus .aboutus_wrap .aboutus_title { margin: 10px 0 30px; font-size: var(--font-size-h2); font-weight: 600; line-height: 100%; } /* --------------------- SELECTED FAQS --------------------- */ #selected_faqs { padding: 100px 0; background: var(--color-silver); } #selected_faqs .selected_faqs_wrap { display: flex; } #selected_faqs .selected_faqs_wrap .selected_faqs_wrap_left { width: 50%; padding-right: 100px; display: flex; align-content: space-between; } #selected_faqs .selected_faqs_wrap .selected_faqs_wrap_left .faq_main_title { margin-bottom: 30px; font-size: var(--font-size-h2); font-weight: 600; line-height: 100%; } #selected_faqs .selected_faqs_wrap .selected_faqs_wrap_right { width: 50%; } .faq_category_wrap { margin-bottom: 100px; padding-bottom: 100px; border-bottom: 1px solid var(--color-primary); display: flex; justify-content: space-between; } .faq_category_wrap .faq_category_title { width: calc(50% - 100px); } .faq_category_wrap .faq_accordion { width: 50%; } .faq_accordion .faq_item { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--color-primary); } .faq_accordion .faq_item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .faq_accordion .faq_item .faq_question { margin-bottom: 0 !important; cursor: pointer; display: flex; } .faq_accordion .faq_item .faq_question .faq_count { width: 70px; font-size: 16px; } .faq_accordion .faq_item .faq_question .faq_title { padding-right: 50px; flex: 1; } .faq_accordion .faq_item .faq_question .faq_icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .faq_accordion .faq_item .faq_question .faq_icon svg { color: #000; transition: transform 0.3s ease, color 0.3s ease; } .faq_accordion .faq_item .faq_question .faq_icon svg path:nth-child(2), .faq_accordion .faq_item .faq_question .faq_icon svg path:nth-child(3) { transition: transform 0.3s ease; } .faq_accordion .faq_item .faq_question .faq_icon svg path:nth-child(2) { transform: rotate(45deg); transform-origin: top; clip-path: inset(0 0 2px); } .faq_accordion .faq_item .faq_question .faq_icon svg path:nth-child(3) { transform: rotate(-45deg); transform-origin: bottom; clip-path: inset(2px 0 0); } .faq_accordion .faq_item:hover .faq_question .faq_icon { background: var(--color-secondary); } .faq_accordion .faq_item .faq_question.active .faq_icon { background: var(--color-primary); } .faq_accordion .faq_item .faq_question.active .faq_icon svg { color: white; } .faq_accordion .faq_item .faq_question.active .faq_icon svg path:nth-child(2) { transform: rotate(0); clip-path: inset(0 0 0); } .faq_accordion .faq_item .faq_question.active .faq_icon svg path:nth-child(3) { transform: rotate(0); clip-path: inset(0 0 0); } .faq_accordion .faq_item .faq_content { padding: 30px 0 0 70px; } .faq_accordion .faq_item .faq_content p { margin-bottom: 20px; } .faq_accordion .faq_item .faq_content ul { margin-bottom: 20px; margin-left: 20px; } .faq_accordion .faq_item .faq_content ol { margin-bottom: 20px; margin-left: 20px; } /* ------------------- LATEST BLOG ------------------- */ #latest_blog { padding: 100px 0; } #latest_blog .intro { margin-bottom: 50px; } #latest_blog .latest_blog_title { max-width: 70%; font-size: var(--font-size-h2); font-weight: 600; line-height: 100%; } .blog_list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; } .blog_list article { margin-bottom: 50px; padding-bottom: 50px; position: relative; } .blog_list article a.thumbnail { width: 100%; background: var(--color-primary); display: block; border-radius: 10px; overflow: hidden; } .blog_list article a.thumbnail img { width: 100%; height: auto; display: block; position: relative; transform: scale(1) translateZ(0); transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1); } .blog_list article a.thumbnail:hover img { transform: scale(1.05) translateZ(0); } .blog_list article .entry { padding-top: 20px; } .blog_list article .entry h3 { margin-bottom: 0 !important; } .blog_list article .entry h3 a { font-size: var(---font-size-h3); font-weight: 600; text-decoration: none !important; color: var(--color-primary) !important; line-height: 100%; } .blog_list article .entry h3 a:hover { text-decoration: underline !important; text-decoration-thickness: 1px; } .blog_list article .entry .excerpt { margin-top: 20px; } .blog_list article .entry .excerpt p { margin-bottom: 0 !important; } .blog_list article .read_more { left: 0; bottom: 0; padding-bottom: 4px; font-size: 18px !important; text-decoration: none !important; text-transform: uppercase; color: var(--color-primary); line-height: 20px; border-bottom: 4px solid var(--color-secondary); position: absolute; } .blog_list article .read_more:after { width: 16px; height: 16px; right: -26px; top: 3px; background: url(images/icon-arrow-up-dark.svg) no-repeat center / auto 100%; position: absolute; content: ''; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .blog_list article .read_more:hover:after { transform: rotate(90deg) translateY(-10px); } /* ---------------------- BEFORE CONTENT ---------------------- */ #before_content { padding: 10px 50px; line-height: 20px; background: var(--color-primary); } .rank-math-breadcrumb { font-size: 16px; color: #ffffff; } .rank-math-breadcrumb a { color: rgba(255 255 255 / 50%); } /* ------------ HERO ------------ */ #hero { height: 450px; background-color: var(--color-primary); background: no-repeat center / cover; } #hero .cover { width: 100%; height: 100%; background: rgba(0 0 0 / 10%); } #hero .hero_wrap { height: 100%; padding-bottom: 50px; display: flex; flex-direction: column; justify-content: end; } #hero .hero_wrap h1 { margin: 10px 0; font-size: var(--font-size-h1); font-weight: 600; color: white; line-height: 100%; } #hero .hero_wrap .faq_search { width: 500px; height: 50px; margin-top: 20px; padding-left: 45px; background: #ffffff url(images/icon-search-dark.svg) no-repeat 15px center / auto 18px; border-radius: 10px; } #hero.faq { background-image: url(images/img-horvath-ingatlanok-01.jpg); } /* --------------- CONTENT --------------- */ body.single-post #container { background: var(--color-silver); } body.post-type-archive-faq #container { background: var(--color-silver); } #main { display: flex; } #content { padding: 40px 50px; flex: 1; } #content.no_padding_left_right { padding-left: 0; padding-right: 0; } #content p { margin-bottom: 20px; } #content p.success { width: 100%; padding: 10px; font-size: 18px; line-height: 25px; background-color: color-mix(in srgb, var(--color-green) 5%, white 95%); border: 1px solid var(--color-green); border-radius: 10px; } #content p.error { padding: 10px; font-size: 18px; line-height: 25px; background-color: color-mix(in srgb, var(--color-red) 10%, white 90%); border: 1px solid var(--color-red); border-radius: 10px; } #content ul.error { width: 100%; margin-left: 0 !important; padding: 20px 10px 20px 40px; font-size: 18px; line-height: 25px; background-color: color-mix(in srgb, var(--color-red) 10%, white 90%); border: 1px solid var(--color-red); border-radius: 10px; } #content a:not(.mapboxgl-ctrl a):not(.mapboxgl-popup a) { text-decoration: underline; text-decoration-thickness: 2px; color: var(--color-primary); } #content a:not(.mapboxgl-ctrl a):not(.mapboxgl-popup a):hover { text-decoration: none; } #content h1 { margin-bottom: 20px; font-size: var(--font-size-h1); font-weight: 600; line-height: 100%; } #content h1.property_h1 { font-size: var(--font-size-h2); } #content h2 { margin-bottom: 20px; font-size: var(--font-size-h2); font-weight: 600; line-height: 100%; } #content h3 { width: 100%; margin-bottom: 20px; font-size: var(--font-size-h3); font-weight: 600; line-height: 100%; } #content p + h3 { margin-top: 50px; } #content p img { max-width: 100%; height: auto; display: block; } #content ul { margin-bottom: 20px; margin-left: 20px; } #content ul.saved_searches_list { margin-left: 0; list-style: none; } #content ul.saved_searches_list li { padding: 10px 0; border-bottom: 1px solid var(--color-silver-line); display: flex; } #content ul.saved_searches_list li .list_title { flex: 1; } #content ul.saved_searches_list li .list_title small { font-size: 16px; display: block; } #content ul.saved_searches_list li .list_delete { width: 40px; } #content ul.saved_searches_list li .list_delete a { width: 40px; height: 40px; font-size: 0; background: var(--color-silver) url(images/icon-delete-dark.svg) no-repeat center / auto 20px; display: block; border-radius: 10px; } #content ul.saved_searches_list li .list_delete a:hover { background-color: var(--color-red); background-image: url(images/icon-delete-white.svg); } #content ul.favorites { margin-left: 0; list-style: none; } #content ul.favorites li { padding: 10px 0; border-bottom: 1px solid var(--color-silver-line); display: flex; align-items: center; } #content ul.favorites li .thumbnail { width: 50px; margin-right: 10px; } #content ul.favorites li .thumbnail img { width: 50px; height: 50px; display: block; } #content ul.favorites li .property_title { flex: 1; } #content ul.favorites li .property_title a { font-size: 18px; line-height: 20px; display: inline-block; } #content ul.favorites li .property_title .property_meta { font-size: 16px; color: var(--color-gray); display: flex; } #content ul.favorites li .property_title .property_meta sup { line-height: 0; } #content ul.favorites li .property_title .property_meta .sep { margin: 0 10px; } #content ul.favorites li .property_title .property_meta .sep:first-child { display: none; } #content ul.favorites li .delete_favorite { width: 40px; } #content ul.favorites li .delete_favorite button { width: 40px; height: 40px; font-size: 0; background: var(--color-silver) url(images/icon-delete-dark.svg) no-repeat center / auto 20px; display: block; border-radius: 10px; cursor: pointer; } #content ul.favorites li .delete_favorite button:hover { background-color: var(--color-red); background-image: url(images/icon-delete-white.svg); } /* Archive header */ #content header.archive_header { margin-bottom: 30px; display: flex; align-items: end; } #content header.archive_header .archive_title { flex: 1; } #content header.archive_header .archive_title .property_result_count { margin-top: -10px; font-size: 16px; line-height: 20px; } #content header.archive_header .map_view_and_order { display: flex; } #content header.archive_header .map_view_toggle { margin-right: 20px; } #content header.archive_header .property_order_form select { width: 250px; height: 50px; padding-left: 10px; font-size: 18px; border: 1px solid var(--color-silver-line); border-radius: 10px; } /* Contact */ #content .contact_wrap { display: flex; } #content .contact_wrap .contact_wrap_left { width: 50%; padding-left: calc((100% - 1280px) /2); padding-right: 100px; } #content .contact_wrap .contact_wrap_right { width: 50%; padding: 50px; border-left: 1px solid var(--color-silver-line); position: relative; } #content .contact_wrap .contact_wrap_right .featured_image { position: relative; } #content .contact_wrap .contact_wrap_right .featured_image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } #content .contact_wrap .contact_wrap_right .featured_image .caption { left: 20px; right: 20px; bottom: 20px; padding-top: 20px; font-size: 16px; text-transform: uppercase; color: white; line-height: 20px; border-top: 1px solid rgba(255 255 255 / 50%); position: absolute; } /* Hero Image */ #content .hero_image { margin-bottom: 50px; display: flex; } #content .hero_image .hero_wrap_left { width: 50%; padding-right: 50px; display: flex; align-items: space-between; align-content: space-between; } #content .hero_image .hero_wrap_left h1 { font-size: var(--font-size-h2); } #content .hero_image .hero_wrap_left .hero_wrap_left_bottom { width: 100%; } #content .hero_image .hero_wrap_left .reading_time { margin-bottom: 30px; font-size: 14px; } #content .hero_image .hero_wrap_left .share_this_post { width: 100%; display: flex; } #content .hero_image .hero_wrap_left .share_this_post label { width: 100%; margin-bottom: 10px; font-size: 16px; font-weight: 700; display: block; } #content .hero_image .hero_wrap_left .share_this_post a { min-width: 50px; height: 50px; margin-right: 10px; font-size: 16px; background: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; } #content .hero_image .hero_wrap_left .share_this_post a:hover { background: var(--color-dark); } #content .hero_image .hero_wrap_left .share_this_post a img { width: auto; height: 20px; display: block; } #content .hero_image .hero_wrap_left .share_this_post.active a.copy_to_clipboard { padding: 0 20px; text-decoration: none !important; color: white !important; background: var(--color-dark) !important; } #content .hero_image .hero_wrap_left .share_this_post.active a.copy_to_clipboard img { display: none; } #content .hero_image .hero_wrap_left .share_this_post.active a.copy_to_clipboard span { display: block !important; } #content .hero_image .hero_wrap_right { width: 50%; } #content .hero_image .hero_wrap_right img { width: 100% !important; height: auto !important; border: 1px solid var(--color-silver-line); display: block; border-radius: 30px; } /* Post Tags */ #content .post_tags { margin-bottom: 20px; padding-top: 20px; border-top: 10px solid var(--color-gray-nurse); display: flex; } #content .post_tags label { width: 100%; margin-bottom: 5px; font-weight: 700; display: block; } #content .post_tags a { height: 24px; margin: 0 10px 10px 0; padding: 0 10px; font-size: 14px; font-weight: 500; text-decoration: none !important; color: var(--color-dark) !important; line-height: 24px; background: var(--color-gray-nurse); border-radius: 12px; } #content .post_tags a:hover { background: var(--color-skeptic); } /* --------------- SIDEBAR --------------- */ #sidebar { width: 300px; margin-right: 100px; padding: 40px 0; } #sidebar .widget { margin-bottom: 30px; } /* Profile settings */ #sidebar .widget_profile_settings ul { list-style: none; } #sidebar .widget_profile_settings ul li { padding: 10px 0; border-bottom: 1px solid var(--color-silver-line); } #sidebar .widget_profile_settings ul li:first-child { padding-top: 0; } #sidebar .widget_profile_settings ul li:last-child { padding-bottom: 0; border-bottom: none; } #sidebar .widget_profile_settings ul li a { padding: 10px; font-size: 18px; text-decoration: none !important; color: var(--color-primary) !important; line-height: 20px; display: flex; align-items: center; border-radius: 10px; } #sidebar .widget_profile_settings ul li a:hover { text-decoration: underline !important; } #sidebar .widget_profile_settings ul li a.active { background: var(--color-silver); } #sidebar .widget_profile_settings ul li a .icon { width: 24px; height: 24px; margin-right: 10px; background: white no-repeat center center / auto 16px; border-radius: 50%; } #sidebar .widget_profile_settings ul li.profile a .icon { background-image: url(images/icon-options-dark.svg); } #sidebar .widget_profile_settings ul li.saved_searches a .icon { background-image: url(images/icon-house-dark.svg); } #sidebar .widget_profile_settings ul li.favorites a .icon { background-image: url(images/icon-heart-dark.svg); } #sidebar .widget_profile_settings ul li.wp_admin a .icon { background-image: url(images/icon-wp-dark.svg); } #sidebar .widget_profile_settings ul li.logout a .icon { background-image: url(images/icon-logout-dark.svg); } /* Tab Content */ .tab_content { display: none; } .tab_content.active { display: block; } /* -------------- FOOTER -------------- */ #footer { padding: 100px 0; font-size: 18px; color: white; background: var(--color-primary); } #footer a { text-decoration: none; color: #ffffff; } #footer a:hover { color: var(--color-secondary); } #footer ul { list-style: none; } /* Footer top */ #footer .footer_top { padding-bottom: 50px; border-bottom: 1px solid #ffffff; position: relative; } #footer .footer_top .text { max-width: 70%; font-size: var(--font-size-h2); font-weight: 600; line-height: 100%; } #footer .footer_top a.up { width: 50px; height: 50px; right: 0; top: 0; font-size: 0; background: var(--color-secondary) url(images/icon-arrow-up-dark.svg) no-repeat center / auto 20px; position: absolute; border-radius: 10px; } #footer .footer_top a.up:hover { background-color: #ffffff; } /* Footer center */ #footer .footer_center { padding: 50px 0 100px; display: flex; align-items: start; } #footer .footer_center .wrap_left { flex: 1; } /* Footer bottom */ #footer .footer_bottom { font-size: 18px; display: flex; justify-content: center; } #footer .footer_bottom a { text-decoration: underline; } #footer .footer_bottom .sep { margin: 0 10px; display: inline-block; } /* ------------ FORM ------------ */ .form_row { width: 100%; margin-bottom: 10px; position: relative; } .form_row.form_row_first { width: calc(50% - 10px); } .form_row.form_row_last { width: calc(50% - 10px); } .form_row p { margin-bottom: 0 !important; display: flex; } .form_row br { display: none !important; } .form_row label { font-size: 16px; display: block; } .form_row .wpcf7-list-item { margin: 0; position: relative; } .form_row .wpcf7-list-item label { top: auto; padding-left: 35px; line-height: 20px; display: block; position: relative; } .form_row .wpcf7-list-item input[type=checkbox] { left: 0; top: 1px; position: absolute; } .form_row select, .form_row textarea, .form_row input[type=tel], .form_row input[type=text], .form_row input[type=email], .form_row input[type=number], .form_row input[type=password] { width: 100%; height: 50px; padding-left: 10px; font-size: 18px; background: #ffffff; border: 1px solid var(--color-silver-line); outline: 2px solid transparent; outline-offset: 2px; border-radius: 10px; flex: 1; } .form_row select:focus, .form_row textarea:focus, .form_row input[type=tel]:focus, .form_row input[type=text]:focus, .form_row input[type=email]:focus, .form_row input[type=number]:focus, .form_row input[type=password]:focus { background: #ffffff; border-color: var(--color-primary); outline-color: var(--color-secondary); } .form_row select.filled, .form_row textarea.filled, .form_row input[type=tel].filled, .form_row input[type=text].filled, .form_row input[type=email].filled, .form_row input[type=number].filled, .form_row input[type=password].filled { background: #ffffff; } .form_row textarea { min-height: 150px; padding: 10px; resize: vertical; } /* Readonly */ .form_row input[readonly] { color: var(--color-gray) !important; background-color: #f5f5f5 !important; border-color: var(--color-silver-line) !important; cursor: not-allowed; outline: none !important; } /* Group */ .form_row .form_row_group { display: grid; gap: 0; } .form_row .form_row_group.grid_1fr_fix_1fr { grid-template-columns: 1fr 40px 1fr; } .form_row .form_row_group .separator { width: 40px; display: flex; align-items: center; justify-content: center; } .wpcf7 { margin-bottom: 30px; } .wpcf7-form, form { display: flex; flex-wrap: wrap; justify-content: space-between; } .wpcf7-acceptance label { font-weight: 400; text-transform: none; } .wpcf7-form-control-wrap { flex: 1; } .wpcf7-list-item label { width: 100%; padding-top: 0; font-size: 14px; } /* ------------- LOGIN ------------- */ #login-wrap { position: relative; } #login-wrap .preloader { width: 100%; height: 100%; left: 0; top: 0; background: rgba(255 255 255 / 80%) url(images/infinite-spinner.svg) no-repeat center / auto 50px; display: none; position: absolute; z-index: 10; } /* Register reminder */ #register-reminder { margin-bottom: 20px; padding: 15px 20px; font-size: 16px; text-align: center; color: #856404; background-color: #fdf4a1; border-radius: 10px; } #register-reminder a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; color: var(--color-primary); } #register-reminder a:hover { text-decoration: none; } /* ------------------- RWD DESIGN ------------------- */ @media only screen and (max-width: 1280px) { /* DISPLAY: None */ .hide_in_1280 { display: none !important; } /* DEFAULT */ .p_l_20 { padding-left: 20px; } .p_r_20 { padding-right: 20px; } /* HEADER */ #header .header_wrap { padding-left: 20px; padding-right: 20px; } /* MARKETING TEXT */ #marketing_text { padding: 100px 0; } /* FILTER */ #slide #filters { width: auto; max-width: none; left: 20px; right: 20px; } /* PROPERTY LIST */ .property_list { gap: 0 20px; } /* PROPERTY LIST: Map view */ .inner_map .property_list { width: 60%; padding: 0 20px; } /* FILTER */ body.logged-in.post-type-archive-property:not(body.home) #property-filter-form { grid-template-columns: 200px 1fr 300px 1fr 50px 50px; gap: 10px 20px !important; } body.logged-in.post-type-archive-property:not(body.home) .filter_row.property_type { grid-column: 1 / 2; grid-row: 1; } body.logged-in.post-type-archive-property:not(body.home) .filter_row.city { grid-column: 2 / 7; grid-row: 1; } body.logged-in.post-type-archive-property:not(body.home) .filter_row.property_price { grid-column: 1 / 2; grid-row: 2; } body.logged-in.post-type-archive-property:not(body.home) .filter_row.form_submit { grid-column: 2 / 5; grid-row: 2; } body.logged-in.post-type-archive-property:not(body.home) a.more_filters { grid-column: 5 / 6; grid-row: 2; align-self: end; } body.logged-in.post-type-archive-property:not(body.home) a.save_searches { grid-column: 6 / 7; grid-row: 2; align-self: end; } body:not(body.home) #property-filter-form { grid-template-columns: 200px 1fr 300px 1fr 50px; gap: 10px 20px !important; } body:not(body.home) .filter_row.property_type { grid-column: 1 / 2; grid-row: 1; } body:not(body.home) .filter_row.city { grid-column: 2 / 7; grid-row: 1; } body:not(body.home) .filter_row.property_price { grid-column: 1 / 2; grid-row: 2; } body:not(body.home) .filter_row.form_submit { grid-column: 2 / 6; grid-row: 2; } body:not(body.home) a.more_filters { grid-column: 6 / 6; grid-row: 2; align-self: end; } /* PROPERTY LIST: Property referent */ #property_referent { margin-left: 50px; } /* COMPARE */ .comparison_table { grid-template-columns: 1fr 1fr 1fr; gap: 0 20px; } .comparison_table .cell.property { display: none !important; } /* ABOUTUS */ #aboutus .aboutus_wrap.has_thumbnail .wrap_left { padding-top: 100px; padding-left: 20px; padding-right: 50px; } #aboutus .aboutus_wrap.has_thumbnail .wrap_left:before { height: 50px; } #aboutus .aboutus_wrap.has_thumbnail .wrap_right { padding-right: 20px; } /* BEFORE CONTENT */ #before_content { padding: 10px 20px; } /* CONTENT */ #content { padding: 30px 0; } /* CONTENT: Contact */ #content .contact_wrap .contact_wrap_left { padding-left: 20px; } #content .contact_wrap .contact_wrap_right { padding: 30px 20px; } /* SIDEBAR */ #sidebar { margin-right: 50px; } } @media only screen and (max-width: 960px) { /* DISPLAY: None */ .hide_in_960 { display: none !important; } .show_in_960 { display: block !important; } /* HEADER: Menu */ #header ul.menu.menu_right li:not(li.profile) { display: none; } #header ul.menu li.profile { padding-left: 0; border-left: none; } /* MARKETING TEXT */ #marketing_text { padding: 50px 0; } #marketing_text .marketing_text_wrap { display: block; } #marketing_text .marketing_text_wrap > div.marketing_title { margin-bottom: 30px; } /* SLIDE */ #slide { height: auto; padding: 20px; } #slide .slide_image { width: 100%; height: 100%; left: 0; top: 0; position: absolute; } #slide #filters { width: 100%; left: 0; right: 0; margin: 0; } /* LATEST PROPERTIES */ #latest_properties { padding: 50px 0; } /* FILTER */ #property-filter-form { grid-template-columns: 200px 1fr; grid-template-rows: auto auto; gap: 10px 20px; } /* PROPERTY LIST */ .property_list { grid-template-columns: 1fr 1fr; } /* PROPERTY LIST: Map view */ .inner_map .property_list { width: 100%; } /* SINGLE PROPERTY: Header */ #single_property_header .header_wrap_left { flex: auto; } #single_property_header .header_wrap_right { display: none; } /* SINGLE PROPERTY: Photos */ #property_gallery_grid { grid-template-columns: 1fr; } /* SINGLE PROPERTY: Property referent */ #property_referent { width: 100%; margin-left: 0; margin-top: 50px; } #property_referent .card { display: flex; } #property_referent .card .card_top { width: 60%; } #property_referent .card .cart_bottom { flex: 1; } /* SINGLE PROPERTY: All data */ #property_datas .grid_data { gap: 20px; } #property_datas .grid_data_checkbox { grid-template-columns: 1fr 1fr 1fr; gap: 20px; } /* ABOUTUS */ #aboutus .aboutus_wrap .wrap_left { padding: 50px 0; } #aboutus .aboutus_wrap.has_thumbnail .wrap_left { width: 100%; padding-top: 50px; padding-right: 20px; } #aboutus .aboutus_wrap.has_thumbnail .wrap_left:before { display: none; } #aboutus .aboutus_wrap.has_thumbnail .wrap_right { width: 100%; padding-left: 20px; background-position: left top; } #aboutus .aboutus_wrap.has_thumbnail .wrap_right:before { padding-top: 100%; display: block; content: ''; } #aboutus .aboutus_wrap.has_thumbnail .wrap_right .caption { width: 100%; } /* SELECTED FAQS */ #selected_faqs { padding: 50px 0; } #selected_faqs .selected_faqs_wrap .selected_faqs_wrap_left { width: 100%; margin-bottom: 50px; padding-right: 0; } #selected_faqs .selected_faqs_wrap .selected_faqs_wrap_left .intro { margin-bottom: 30px; } #selected_faqs .selected_faqs_wrap .selected_faqs_wrap_right { width: 100%; } .faq_category_wrap { padding-bottom: 0; border-bottom: none; } .faq_category_wrap .faq_category_title { width: 100%; margin-bottom: 30px; } .faq_category_wrap .faq_accordion { width: 100%; } /* LATEST BLOG */ #latest_blog { padding: 50px 0; } #latest_blog .latest_blog_title { max-width: 100%; } .blog_list { gap: 0 20px; } /* HERO */ #hero { height: 400px; } /* CONTENT: Contact */ #content .contact_wrap .contact_wrap_left { width: 100%; padding-right: 20px; } #content .contact_wrap .contact_wrap_right { width: 100%; padding: 50px 20px 0; border-left: none; } /* CONTENT: Hero Image */ #content .hero_image .hero_wrap_left { width: 100%; padding-right: 0; margin-bottom: 30px; } #content .hero_image .hero_wrap_left .reading_time { margin-bottom: 20px; } #content .hero_image .hero_wrap_right { width: 100%; } /* SIDEBAR */ #sidebar { width: 100%; margin-right: 0; padding-bottom: 0; } /* FOOTER */ #footer { padding: 50px 0 30px; } /* FOOTER: Footer center */ #footer .footer_center { padding: 50px 0; } /* FOOTER: Footer bottom */ #footer .footer_bottom { padding-top: 30px; border-top: 1px solid #ffffff; } #footer .footer_bottom .author { width: 100%; } } @media only screen and (max-width: 768px) { /* DISPLAY: None */ .hide_in_768 { display: none !important; } /* LATEST PROPERTIES */ #latest_properties .latest_properties_header { display: block; } #latest_properties .latest_properties_header h2 { width: 100%; margin-bottom: 20px; } /* FILTER */ body.logged-in.post-type-archive-property:not(body.home) #property-filter-form { grid-template-columns: 200px 1fr 1fr 1fr 50px 50px; } body.logged-in.post-type-archive-property:not(body.home) .filter_row.property_price { grid-column: 1 / 5; } body.logged-in.post-type-archive-property:not(body.home) .filter_row.form_submit { grid-column: 1 / 7; grid-row: 3; } body:not(body.home) #property-filter-form { grid-template-columns: 1fr 1fr 300px 1fr 50px; } body:not(body.home) .filter_row.property_type { grid-column: 1 / 3; grid-row: 1; } body:not(body.home) .filter_row.city { grid-column: 3 / 6; grid-row: 1; } body:not(body.home) .filter_row.property_price { grid-column: 1 / 5; grid-row: 2; } body:not(body.home) a.more_filters { grid-column: 5 / 6; grid-row: 2; align-self: end; } body:not(body.home) .filter_row.form_submit { grid-column: 1 / 6; grid-row: 3; } /* LATEST BLOG */ .blog_list { grid-template-columns: 1fr; } /* SINGLE PROPERTY: All data */ #property_datas .grid_data { grid-template-columns: 1fr 1fr; } #property_datas .grid_data_checkbox { grid-template-columns: 1fr 1fr; } /* COMPARE */ .comparison_table { display: block; } /* CONTENT: Archive header */ #content header.archive_header .archive_title { width: 100%; flex: auto; } #content header.archive_header .map_view_and_order { width: 100%; } /* CONTENT: Favorites */ #content ul.favorites li { position: relative; } #content ul.favorites li .thumbnail { margin-bottom: 10px; flex-basis: 100%; } #content ul.favorites li .delete_favorite { right: 0; top: 10px; position: absolute; } /* FOOTER: Footer center */ #footer .footer_center .wrap_left { width: 50%; margin-top: 50px; flex: auto; } #footer .footer_center .wrap_left:nth-child(-n+3) { margin-top: 0; } /* FOOTER: Footer bottom */ #footer .footer_bottom .law { width: 100%; } } @media only screen and (max-width: 640px) { /* HEADER: Menu */ #header ul.menu li.profile a { width: 50px; height: 50px; padding-left: 0; font-size: 0; background-color: var(--color-silver); background-position: center; background-size: auto 24px; display: block; border-radius: 10px; } /* FILTER */ #property-filter-form { grid-template-columns: 1fr; grid-template-rows: none; gap: 10px; } body:not(body.home) #property-filter-form { grid-template-columns: 1fr; } body:not(body.home) .filter_row.property_type { grid-column: 1 / 6; grid-row: 1; } body:not(body.home) .filter_row.city { grid-column: 1 / 6; grid-row: 2; } body:not(body.home) .filter_row.property_price { grid-column: 1 / 5; grid-row: 3; } body:not(body.home) a.more_filters { grid-column: 5 / 6; grid-row: 3; align-self: end; } body:not(body.home) .filter_row.form_submit { grid-column: 1 / 6; grid-row: 4; } /* PROPERTY LIST */ .property_list { grid-template-columns: 1fr; } .property_list.two_columns { grid-template-columns: 1fr; } /* SINGLE PROPERTY */ #single_property_header .header_wrap_left .property_action_buttons { margin-bottom: 20px; display: flex; } #single_property_header .header_wrap_left .property_action_buttons a { margin: 10px 0; } #single_property_header .header_wrap_left .property_action_buttons a.fav-toggle { margin-bottom: 0; } /* SINGLE PROPERTY: All data */ #property_datas .grid_data { grid-template-columns: 1fr; } #property_datas .grid_data_checkbox { grid-template-columns: 1fr; } /* SINGLE PROPERTY: Property referent */ #property_referent .card .card_top { width: 100%; } #property_referent .card .cart_bottom { flex: auto; } /* SELECTED FAQS */ .faq_accordion .faq_item .faq_question .faq_count { width: 30px; } .faq_accordion .faq_item .faq_content { padding-left: 30px; } /* HERO */ #hero { height: 300px; } #hero .hero_wrap .faq_search { width: 100%; } /* CONTENT: Archive header */ #content header.archive_header .archive_title { width: 100%; flex: auto; } #content header.archive_header .map_view_and_order { margin-top: 10px; } #content header.archive_header .property_order_form { width: 100%; margin-top: 10px; } #content header.archive_header .property_order_form select { width: 100%; } /* FORM */ .form_row.form_row_first, .form_row.form_row_last { width: 100%; } } @media only screen and (max-width: 480px) { /* DISPLAY: None */ .hide_in_480 { display: none !important; } /* DEFAULT */ .button { width: 100%; } /* MODAL */ .fancybox-content { padding: 30px 20px !important; } /* NAVIGATION */ #rwd_menu .rwd_menu_wrap { width: calc(100% - 70px); padding: 30px 20px; } /* FILTER */ body.logged-in.post-type-archive-property:not(body.home) #property-filter-form { grid-template-columns: 1fr 1fr 1fr 1fr 50px 50px; } body.logged-in.post-type-archive-property:not(body.home) .filter_row.property_type { grid-column: 1 / 7; grid-row: 1; } body.logged-in.post-type-archive-property:not(body.home) .filter_row.city { grid-column: 1 / 7; grid-row: 2; } body.logged-in.post-type-archive-property:not(body.home) .filter_row.property_price { grid-row: 3; } body.logged-in.post-type-archive-property:not(body.home) a.more_filters { grid-row: 3; } body.logged-in.post-type-archive-property:not(body.home) a.save_searches { grid-row: 3; } body.logged-in.post-type-archive-property:not(body.home) .filter_row.form_submit { grid-row: 4; } /* CONTENT: Favorites */ #content ul.favorites li .property_title .property_meta { line-height: 20px; display: block; } #content ul.favorites li .property_title .property_meta .sep { display: none; } /* FOOTER: Footer top */ #footer .footer_top .text { max-width: 100%; } }