/* HEADER */ .header { border: 0px solid red; height: 126px; width: 100%; z-index: 100; position: fixed; } .header__upper__bg { position: absolute; top: 0px; left: 0px; background-color: #FFFFFF; width: 100%; height: 84px; z-index: 90; } .header__lower__bg { height: 30px; width: 100%; background-color: rgba(0,0,0,0.4); position: absolute; top: 84px; left: 0px; } .header__inner { position: relative; height: 84px; margin-left: auto !important; margin-right: auto !important; width: calc(100% - 32px); max-width: 1252px; } .header__logo { height: 84px; width: 250px; background-color: #FFFFFF; position: absolute; top: 0px; left: 0px; z-index: 120; } .header__logo img { display: block; position: relative; width: 100%; height: 100%; } .header__top__row { position: relative; height: 30px; width: 100%; z-index: 100; } .header__menu { position: relative; display: flex; padding-left: 250px; height: 100%; width: 100%; padding-right: 100px; z-index: 99; flex-flow: row wrap; justify-content: space-around; align-items: center; } .menu__item { display: inline-block; position: relative; padding-left: 10px; padding-right: 10px; } .menu__item a { text-transform: uppercase; color: #000000; font-family: "Rockwell"; outline: none; border: 0px; font-size: 14px; line-height: 30px; padding-bottom: 10px; border-bottom: 2px solid transparent; } .menu__item.selected a { color: #FF6F20; border-bottom: 2px solid #FF6F20; } .header__menu .menu__item:hover a { color: #FF6F20 !important; border-bottom: 2px solid #FF6F20; } .header__middle__row { height: 100%; width: 100%; position: relative; z-index: 100; } .header__social__media { height: 100%; width:100px; position: absolute; top: 0px; right: 0px; z-index: 100; display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: center; } .header__sm__link { display: block; background-repeat: no-repeat; height: 15px; margin-right: 7px; } .header__sm__link--fb { width: 7.5px; background-image: url('../img/Facebook-Icon@2X.png'); background-size: 7.5px; } .header__sm__link--insta { width: 15px; background-image: url('../img/instragrm@2X.png'); background-size: 15px; } .header__sm__link--pin {width: 15px; background-image: url('../img/PinterestIcon@2X.png'); background-size: 15px; } .header__sm__link--tw { width: 21.5px; background-image: url('../img/Twitter-Icon@2X.png'); background-size: 21.5px; } .header__sm__link--yout {width: 22px; background-image: url('../img/YouTube-Icon.png'); } .header__lower { height: 30px; width: 100%; position: relative; padding: 0px 32px; } .sub__menu__outer { height: 0px; opacity: 0; transition: opacity 0.25s; position: absolute; top: 0px; left: 32px; right: 32px; z-index: 100; } .sub__menu__outer--selected { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; opacity: 1; transition: opacity 0.75s; height: 100%; z-index: 120; } .sub__menu__outer--hovered { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; opacity: 1; transition: opacity 0.75s; height: 100%; z-index: 120; } .sub__menu__outer--selected-hidden { height: 0px; opacity: 0; transition: opacity 0.25s; z-index: 110; } .sub__menu__item { display: inline-block; font-size: 16px; line-height: 30px; text-transform: lowercase; color: #FFFFFF; margin-right: 50px; } .sub__menu__item--selected a { color: #FF6F20; } .sub__menu__item a { color: #FFFFFF; } .sub__menu__item a:hover { color: #FF6F20 !important; } /* RESULTS NAVIGATION */ .results__navigation { text-transform: lowercase; color: #FFFFFF; font-family: "news_gothiclight"; font-size: 16px; line-height: 30px; display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: center; } .prop_nav_middle {font-size: 16px; line-height: 30px; z-index: 100; color: #FF6F20; padding-left: 7px; padding-right: 8px; } .results__navigation a { color: #FFFFFF; padding-right: 50px; } .results__navigation a:hover { color: #FF6F20; } .pro_nav_text { display: inline-block; } .prop_details_next_arrow { display: inline-block; width: 4px; height: 8px; margin-left: 6.5px; background-image: url('../img/next_result_arrow@2X.png'); background-size: 4px; background-repeat: no-repeat; } .prop_details_previous_arrow { display: inline-block; width: 4px; height: 8px; margin-right: 6.5px; background-image: url('../img/prev_result_arrow@2X.png'); background-size: 4px; background-repeat: no-repeat; } /* FOOTER */ .footer__search__blend { width: 100%; height: 2px; background-color: rgba(0,0,0,0.3); position: absolute; top: -2px; } .new_search_box_bg { position: absolute; width: calc(100% + 4px); height: 100%; left: -2px; top: -2px; background-color: rgba(0,0,0,0.3); z-index: 91; } .new_search_box_bg::after { content: ""; position: absolute; width: calc(100% - 4px); height: 2px; left: 2px; bottom: -2px; background-color: rgba(0,0,0,0.3); z-index: 91; } /* MOBILE MENU */ #header_mob { display: none; position: fixed; width: 100%; z-index: 120; } #header_mob_logo { width: calc(100% - 84px); position: relative; display: inline-block; background-color: #FFF; z-index: 120; vertical-align: top; text-align: center; } #header_mob_logo a { position: relative; width: 100%; max-width: 200px; display: inline-block; vertical-align: top; } #header_mob_logo img { width: 100%; } #header_mob_menu_row { position: relative; margin-top: 67px; width: 100%; height: 37px; z-index: 120; display: none; } #header_mob_menu_button { display: block; width: 50%; height: 100%; text-align: center; float: left; position: relative; color: #000000; font-family: "Rockwell"; line-height: 37px; font-size: 18px; text-transform: uppercase; cursor: pointer; } #header_mob_menu_button:hover { color: #FF6F20; } #header_mob_contact_button { display: block; width: 50%; height: 100%; text-align: center; float: right; position: relative; color: #000000; font-family: "Rockwell"; line-height: 37px; font-size: 18px; text-transform: uppercase; } #header_mob_contact_button a, #header_mob_back_to_home_button a { color: #000000 !important; font-family: "Rockwell"; } #header_mob_contact_button a:hover, #header_mob_back_to_home_button a:hover { color: #FF6F20 !important; } #header_mob_back_to_home_button { display: none; width: 100%; height: 100%; text-align: center; color: #000000; font-family: "Rockwell"; line-height: 37px; font-size: 18px; text-transform: uppercase; } #header_mob_third_row { width: 100%; margin-top: 20px; position: relative; text-align: center; z-index: 116; } #header_mob_third_row a { margin-left: auto! important; margin-right: auto! important; width: 233px; display: block; position: relative; } #header_mob_valuation_button { width: 233px; font-size: 13px; color: #FFFFFF; font-family: "Rockwell"; height: 42px; line-height: 42px; text-align: center; text-transform: uppercase; font-weight: bold; } #header_mob_valuation_button_bg { position: absolute; background-color: #000; width: 100%; height: 100%; top: 0px; left: 0px; zoom: 1; filter: alpha(opacity=20); opacity: 0.20; z-index: 100; } #header_mob_valuation_button_text { position: relative; z-index: 110; font-family: "Rockwell"; } #header_mob_menu { display: block; min-height: 100%; width: 0%; padding-top: 68px; border: 0px solid red; position: absolute; z-index: 118; font-family: "Rockwell"; overflow: hidden; } #header_mob_menu_inner { position: relative; min-height: 100%; width: 100%; display: block; } #header_mob_menu_inner .header__inner { padding-bottom: 20px; text-align: center; } #header_mob_menu_bg { position: fixed; background-color: #FFF; width: 0%; height: 100%; opacity: 0.95; z-index: 90; } .mob_menu_section_bar { font-family: "Rockwell"; position: relative; z-index: 100; width: 100%; background-color: #FFFFFF; height: 30px; text-align: center; font-size: 18px; line-height: 30px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; color: #000000; text-transform: uppercase; margin-top: 4px; cursor: pointer; } .mob_menu_section_bar:first-child { margin-top: 0px; } #mob_bar_mg { text-transform: lowercase; } .mob_menu_section { position: relative; width: 100%; border: 0px solid yellow; z-index: 100; display: none; margin: 0px auto !important; } #mob_menu_main { display: inline-block; max-width: 400px; opacity: 0; transition: opacity 0s 0s; } #header_mob_menu.open #mob_menu_main { opacity: 1; transition: opacity 0.5s 0.5s; } #mob_main_left { width: 50%; float: left; text-align: left; position: relative; } #mob_main_right { width: 50%; float: right; text-align: left; position: relative; } #mob_main_right .sub__menu__item { text-transform:capitalize; } #mob_main_right #strapline_text { display: none; } #header_mob_menu .menu__item { float: none; display: block; padding-left: 0px; padding-right: 0px; font-size: 14px; line-height: 30px; } #header_mob_menu .menu_item a { line-height: 30px; } #header_mob_menu .footer_tab_item { padding-left: 0px; padding-right: 0px; font-size: 14px; line-height: 30px; height: auto; padding-bottom: 0px; } #header_mob_menu .footer_tab_top_border { display: none; } #header_mob_menu .sub__menu__item { float: none; display: block; padding-left: 0px; padding-right: 0px; font-size: 14px; line-height: 30px; color: #000000; margin-right: 0px; } #header_mob_menu .sub__menu__item a { color: #000000; } #header_mob_menu .sub_menu_spacer { display: none; } /* HAMBURGER */ .menu_icon_outer { position: relative; display: none; cursor: pointer; z-index: 120; width: 26px; height: 26px; vertical-align: top; margin-right: 16px; margin-top: 5px; } .o-grid__item { display: inline-block; vertical-align: top; } .c-hamburger { display: block; position: relative; overflow: hidden; margin: 0; padding: 0; margin-top: 0px; width: 26px; height: 26px; font-size: 0; text-indent: -9999px; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; border: 0px; overflow: visible; } .c-hamburger:focus { outline: none; } .c-hamburger span { display: block; position: absolute; top: 12px; left: 0px; right: 0px; height: 2.5px; background-color: #000000; border-radius: 2px; } .c-hamburger span:before, .c-hamburger span:after { position: absolute; display: block; left: 0; width: 100%; height: 2.5px; background-color: #000000; content: ""; border-radius: 2px; } .c-hamburger span:before {top: -9px; } .c-hamburger span:after { bottom: -9px; } .menu_icon_outer:hover .c-hamburger span:before, .menu_icon_outer:hover .c-hamburger span, .menu_icon_outer:hover .c-hamburger span:after { background-color: #FF6F20; } .header--home .menu_icon_outer:hover .c-hamburger span:before, .header--home .menu_icon_outer:hover .c-hamburger span, .header--home .menu_icon_outer:hover .c-hamburger span:after { background-color: #FFFFFF; } .open .menu_icon_outer:hover .c-hamburger span:before, .open .menu_icon_outer:hover .c-hamburger span, .open .menu_icon_outer:hover .c-hamburger span:after { background-color: #FF6F20; } .c-hamburger--htx { background-color: transparent } .c-hamburger--htx span:before, .c-hamburger--htx span:after { transition-duration: 0.3s, 0.3s, 0.3s; transition-delay: 0.3s, 0.3s, 0s; } .c-hamburger--htx span:before { transition-property: height, top, transform; } .c-hamburger--htx span:after { transition-property: height, bottom, transform; } .c-hamburger--htx.is-active span, .is-active .c-hamburger--htx span { background: none !important; } .c-hamburger--htx.is-active span::before, .is-active .c-hamburger--htx span::before { height: 2.5px; top: 0px; transform: rotate(45deg); } .c-hamburger--htx.is-active span::after, .is-active .c-hamburger--htx span::after { height: 2.5px; bottom: 0px; transform: rotate(-45deg); } .c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after, .is-active .c-hamburger--htx span::before, .is-active .c-hamburger--htx span::after { transition-delay: 0s, 0s, 0.3s; } .body--modal--open { overflow: hidden; height: 100vh; } .body--modal--open #content { position: fixed; overflow: hidden; } html { scrollbar-width: thin; scrollbar-color: #FF6F20 transparent; overflow-y: scroll; } ::-webkit-scrollbar { width: 4px; border-radius: 2px; } ::-webkit-scrollbar-track { background: transparent; border-radius: 2px; width: 0px; } ::-webkit-scrollbar-thumb { background: #FF6F20; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #FF6F20; cursor: pointer; } ::-webkit-scrollbar-track-piece { background: transparent; } /* NEW FOOTER LINKS */ .new_details_footer_buttons { position: relative; display: none; padding: 0px 4px; } .new_details_footer_buttons a { color: #FFFFFF; padding: 10px 0px; display: inline-block; text-align: center; font-size: 14px; background-color: rgba(255,111,32,1); margin: 4px 4px 4px 4px; border-radius: 8px; border: 1px solid #FF6F20; } .new_details_footer_buttons a:hover { color: #FF6F20 !important; background-color: rgba(255,255,255,1); } .new_foot_button--call, .new_foot_button--email { width: calc(50% - 8px); } .new_foot_button--viewing { width: calc(50% - 8px); } .each_result_viewing_link { cursor: pointer; } /* NEW HEADER LINKS */ .header__lower__prop_dets { display: none; } @media screen and (max-width: 400px) { #header_mob_logo { width: calc(100% - 42px); text-align: center; } } @media screen and (max-width: 783px) { #header_mob { display: block; position: absolute; top: 0px; } .menu_icon_outer { display: inline-block; } .header__inner { height: 100%; width: 100%; padding: 16px 16px; font-size: 0px; line-height: 0px; } #content_inner { padding-left: 16px; padding-right: 16px; } .header__upper__bg { height: 100%; background-color: #FFFFFF; } /* .header__upper__bg:after { content: ""; position: absolute; left: 0px; top: 67px; width: 100%; height: 37px; background-color: rgba(255,255,255,0.65); } */ .footer__search__blend { top: auto; bottom: 0px; } .new_search_box_bg { height: calc(100% + 4px); } .new_search_box_bg::after { display: none; } .menu__item a { padding-bottom: 2px; } .new_details_footer_buttons { display: block; } #designstudio-button { display: none !important; } .details_footer #footer_search_left_box { display: none; } #footer.non_home_search_block { height: auto; background-color: rgba(255,255,255,1); border-top: 1px solid rgba(0,0,0,0.2); } .details_footer .footer__search__blend { display: none; } #property_menu_buttons_outermobile { display: none; } #property_main_outer { margin-top: 10px; padding: 0px 16px; } #pss_left, #pss_right, #pss_left_body, #pss_right_body { width: 34px; height: 34px; background-size: 34px; } #pss_left, #pss_left_body { left: -16px; } #pss_right, #pss_right_body { right: -16px; } #content_inner.details_content { padding-top: 10px; padding-bottom: 30px; margin-bottom: 54px; margin-top: 20px; } #property_slideshow_outer { margin-top: 10px; } #property_contact_details { padding: 0px 16px; } #content { padding-top: 84px; } .header__lower__prop_dets { display: block; position: absolute; left: 0px; right: 0px; top: 100%; height: 24px; background-color: rgba(0,0,0,0.5); z-index: 111; } .results__navigation { text-transform: lowercase; color: #FFFFFF; font-family: "news_gothiclight"; font-size: 12px; line-height: 24px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%; padding: 0px 8px; } .results__navigation--no-search { justify-content: center; } .prop_details_link_previous { width: 60px; flex-grow: 0; flex-shrink: 0; text-align: left; } .prop_details_link_previous.disabled, .prop_details_link_next.disabled { opacity: 0.2; } .prop_details_link_next { width: 60px; flex-grow: 0; flex-shrink: 0; text-align: right; } .results__navigation a { padding-right: 0px; } } @media screen and (max-width: 767px) { #property_menu_bar_outer_more { background-color: rgba(0,0,0,0.5); padding: 0px 16px; height: 30px; line-height: 30px; } #property_menu_bar { background-color: rgba(0,0,0,0.5); padding: 0px 8px; position: relative; width: 100%; font-size: 0px; line-height: 0px; } #property_menu_bar .each_icon_div { line-height: 24px; float: none; display: inline-block; width: 50%; } .property_menu_bar_social { width: auto; padding-top: 6px; height: auto; } #prop_dets_twitter { width: 24px; background-size: 24px; margin-right: 10px; } #prop_dets_facebook { width: 8px; background-size: 8px; margin-right: 10px; } .prop_dets_mail { width: 27px; background-size: 27px; } } @media only screen and (min-width: 768px) and (max-width: 1154px) { .header__inner { width: 100%; padding: 16px 16px; } .footer_inner { width: 100%; padding: 0px 16px; } .header__lower { padding: 0px 16px; } .sub__menu__outer { left: 16px; right: 16px; } .header__logo { width: 220px; padding-top: 7.5px; padding-bottom: 7.5px; left: 16px; } .header__menu { padding-left: 220px; padding-right: 0px; } .header__menu a { padding-left: 2px; padding-right: 2px; } .menu__item { padding-left: 1px; padding-right: 1px; } .menu__item a { font-size: 13px; } .header__middle__row { font-size: 13px; line-height: 42px; margin-bottom: 16px; } .header__social__media { display: none; } .sub__menu__item { font-size: 13px; margin-right: 30px; } .sub__menu__item a { padding-left: 2px; padding-right: 2px; } } @media only screen and (min-width: 768px) and (max-width: 900px) { .header__inner { width: 100%; padding: 16px 16px; } .header__logo { width: 220px; padding-top: 7.5px; padding-bottom: 7.5px; left: 16px; } } @media only screen and (min-width: 1155px) and (max-width: 1180px) { } @media screen and (min-width: 783px) and (max-width: 840px) { .header__logo { width: 200px; } .header__menu { padding-left: 200px; } .menu__item a { font-size: 13px; padding-bottom: 5px; } } @media screen and (max-width: 479px) { #content { padding-top: 76px; } #content_inner { padding-left: 8px; padding-right: 8px; width: calc(100% - 16px); } #content_inner.details_content { padding-top: 10px; padding-bottom: 40px; margin-bottom: 46px; } #property_menu_bar_outer_more { padding: 0px 8px; } #property_main_outer { padding: 0px 8px; } #property_contact_details { padding: 0px 8px; } #pss_left, #pss_right, #pss_left_body, #pss_right_body { width: 30px; height: 30px; background-size: 30px; } #pss_left, #pss_left_body { left: -8px; } #pss_right, #pss_right_body { right: -8px; } }