/*** The new CSS reset - version 1.7.2 (last updated 23.6.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } * { box-sizing: border-box; } body { font-family: "Montserrat", sans-serif; font-weight: 400; height: 100%; overflow-x: hidden; } main { position: relative; } @media screen and (max-width: 768px) { body { max-width: 100vw; overflow-x: hidden; } } .content { max-width: 1276px; margin: 0 auto; margin-top: 50px; } section h1 { font-size: 25px; font-weight: 700; color: #2E2E2E; line-height: 20px; margin-bottom: 30px; } @media screen and (max-width: 768px) { section h1 { font-size: 22px; font-weight: 700; color: #2E2E2E; line-height: 140%; margin-bottom: 30px; } .content { overflow: hidden; margin-top: 10px; } .mobile_hide { display: none; } } #user_page.form_active::before, main.form_active::before { content: ""; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 100vh; z-index: 9; backdrop-filter: blur(10px); } div.nsl-container-block .nsl-container-buttons a { width: 40px !important; } @media print { .no-print, .no-print * { display: none !important; } } span.i { font-style: italic; } span.n { font-style: normal; } span.bn { font-style: normal; font-size: 115%; } .close_btn { position: absolute; top: 24px; right: 24px; width: 30px; height: 30px; cursor: pointer; z-index: 999; } .close_btn::before, .close_btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 25px; height: 3px; background-color: #41713F; border-radius: 3px; } .close_btn:before { transform: translate(-50%, -50%) rotate(45deg); } .close_btn::after { transform: translate(-50%, -50%) rotate(-45deg); } @media screen and (min-width: 768px) { .close_btn { top: 20px; right: 20px; } } #listning .add_to_favorites, .single_offer #main-carousel .add_to_favorites, .product_list_with_info .add_to_favorites { position: absolute; width: 25px; height: 25px; left: 25px; top: 17px; cursor: pointer; } #listning .add_to_favorites img, .single_offer #main-carousel .add_to_favorites img, .product_list_with_info .add_to_favorites img { display: none; } #listning .add_to_favorites .add_to_fav, .single_offer #main-carousel .add_to_favorites .add_to_fav, .product_list_with_info .add_to_favorites .add_to_fav { filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg); } #listning .add_to_favorites .add_to_fav:hover, .single_offer #main-carousel .add_to_favorites .add_to_fav:hover, .product_list_with_info .add_to_favorites .add_to_fav:hover { animation: pulse ease-in-out 0.5s; } #listning .add_to_favorites .active, .single_offer #main-carousel .add_to_favorites .active, .product_list_with_info .add_to_favorites .active { display: block; } #listning .info_window, .single_offer #main-carousel .info_window, .product_list_with_info .info_window { position: absolute; top: -10px; left: 50%; font-size: 12px; transform: translate(-50%, -100%); text-align: center; background-color: white; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); border: 1px solid #707070; transition: 0.3s all; padding: 7px 10px; display: none; } #listning .info_window:before, .single_offer #main-carousel .info_window:before, .product_list_with_info .info_window:before, #listning .info_window:after, .single_offer #main-carousel .info_window:after, .product_list_with_info .info_window:after { top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } #listning .info_window:before, .single_offer #main-carousel .info_window:before, .product_list_with_info .info_window:before { border-color: rgba(112, 112, 112, 0); border-top-color: #707070; border-width: 8px; margin-left: -8px; } #listning .info_window:after, .single_offer #main-carousel .info_window:after, .product_list_with_info .info_window:after { border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; border-width: 7px; margin-left: -7px; } #listning .info_window.active_info_window, .single_offer #main-carousel .info_window.active_info_window, .product_list_with_info .info_window.active_info_window { display: block; } header { background-color: #334E42; } nav { box-sizing: border-box; margin: 0 auto; max-width: 1400px; color: white; display: flex; justify-content: space-between; padding: 9px 0 6px 0; align-items: center; } .nav { width: 360px; } .nav-left img { max-width: 202px; } .nav-center img { max-width: 45px; margin: 0 auto; } .nav-center .desktop { display: none; } .nav-center .mobile { display: block; } .nav-right { display: flex; flex-direction: row; list-style-type: none; margin: 0; padding: 0; text-align: right; justify-content: right; } .nav-ele { text-transform: uppercase; padding: 0 15px; cursor: pointer; position: relative; } .menu__box { font-size: 11px; font-size: 11px; font-weight: 700; color: white; line-height: 20px; text-transform: uppercase; } .notifications { width: 23px; height: 23px; border-radius: 23px; background-color: #d12b00; position: absolute; transform: translate(50%, -50%); top: 0; right: 0; font-size: 10px; line-height: 23px; text-align: center; } .notifications img { width: 11px; height: 11px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .log_button { padding: 15px; background-color: #41713F; border-radius: 10px; -webkit-box-orient: vertical; } #status_txt { max-width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 768px) { header { position: relative; z-index: 9; } #menu__toggle { opacity: 0; } #menu__toggle:checked + .hamburger_menu_btn > span { transform: rotate(45deg); } #menu__toggle:checked + .hamburger_menu_btn > span::before { top: 0; transform: rotate(0deg); } #menu__toggle:checked + .hamburger_menu_btn > span::after { top: 0; transform: rotate(90deg); background-color: #afafaf; } #menu__toggle:checked ~ .menu__box { right: 0 !important; } #menu__toggle:checked + .hamburger_menu_btn > .header_active_bg { right: 0 !important; } .hamburger_menu_btn { position: relative; width: 26px; height: 26px; cursor: pointer; z-index: 3; } .hamburger_menu_btn span, .hamburger_menu_btn span::before, .hamburger_menu_btn span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: white; transition-duration: 0.25s; top: 50%; z-index: 23; } .hamburger_menu_btn span:before { content: ""; top: -8px; } .hamburger_menu_btn span:after { content: ""; top: 8px; } .header_active_bg { transition: 0.25s all; position: fixed; width: 100vw; right: -100%; top: 0; height: 80px; background-color: #334E42; z-index: 2; } .header_active_bg:before { content: "Menu"; position: absolute; transform: translateY(-50%); top: 50%; left: 20px; font-size: 22px; color: #BFBFBF; } .menu__box { display: block; position: fixed; top: 0; right: -100%; width: 100vw; height: 100%; margin: 0; padding: 100px 0; list-style: none; background-color: rgba(255, 255, 255, 0.8); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); transition-duration: 0.25s; z-index: 2; } .menu__item { display: block; padding: 12px 24px; font-size: 11px; font-weight: 600; text-decoration: none; transition-duration: 0.25s; color: white; width: 90%; background-color: #334E42; border-radius: 10px; margin: 0 auto; text-align: center; text-transform: uppercase; margin-bottom: 12px; } .menu__item:hover, .menu__item:focus { background-color: #41713F; } nav { padding: 9px 20px; } .nav { width: auto; } .nav-left img { max-width: 189px; } } @media screen and (min-width: 768px) { .nav-center img { max-width: 291px; margin: 0 auto; } .nav-center .desktop { display: block; } .nav-center .mobile { display: none; } .nav-right { justify-content: center; } .nav-right #menu__toogle, .nav-right .hamburger_menu_btn { display: none; } .nav-right .menu__box { display: flex; gap: 20px; justify-content: space-between; align-items: center; } .nav-right .log_button { position: relative; display: inline-block; } #status_txt { max-width: 115px; } } footer { background-color: #123124; } footer .content { margin-top: 0; display: flex; justify-content: space-between; padding: 16px 0; align-items: center; } footer p { color: white; font-size: 10px; font-weight: 500; vertical-align: middle; } footer a { color: #2DAA28; text-transform: uppercase; font-weight: 800; border-right: 1px solid white; padding: 2px 13px; } footer a:last-of-type { border-right: none; } @media screen and (max-width: 768px) { footer .content { flex-direction: column; max-width: 95%; margin: 0 auto; } footer p { text-align: center; } footer a { font-size: 10px; } footer div { margin-top: 10px; } } .text_block { text-align: center; max-width: 90%; margin: 0 auto; margin-top: 25px; } .text_block h4 { color: #5BA762; font-size: 20px; line-height: 24px; font-weight: 500; } .text_block p { color: #2E2E2E; font-size: 13px; line-height: 16px; } @media screen and (min-width: 768px) { .text_block p { font-size: 14px; line-height: 18px; } } #more_sites { padding-bottom: 40px; background-repeat: no-repeat; background-size: cover; background-position: top; } .legal_content { font-weight: 400; font-size: 12px; color: #385247; border-radius: 10px; padding: 15px 10px; background-color: rgba(255, 255, 255, 0.7); margin-top: 40px; text-align: center; } @media screen and (max-width: 768px) { #more_sites { margin-top: 100px; } #more_sites .content:first-child { margin-top: -80px; } #more_sites .sv_spacer { padding-top: 0; } .legal_content { max-width: 95%; margin: 0 auto; margin-top: 0; } } .four_ele_content { overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: column; } .four_ele_content .element { position: relative; max-width: 304px; width: 100%; margin: 0 auto; border-radius: 10px; overflow: hidden; } .four_ele_content .four_ele_content_title { font-size: 22px; } .four_ele_content img { width: 100%; object-fit: cover; } #four_ele_slider.splide { visibility: visible; } @media screen and (max-width: 768px) { .four_ele_content, #four_ele_slider { padding-left: 10px; display: grid; justify-content: space-between; flex-wrap: wrap; grid-template-columns: repeat(4, 1fr); overflow-x: scroll; gap: 20px; margin-left: 0; margin-right: 0; } .four_ele_content .element, #four_ele_slider .element { width: 304px; } .four_ele_content::-webkit-scrollbar, #four_ele_slider::-webkit-scrollbar { display: none; } #four_ele_slider .splide__inner_container { max-width: 286px; width: 100%; } #four_ele_slider .splide__inner_container img { max-width: unset; } #four_ele_slider .splide__list { gap: 20px; } #four_ele_slider .splide__track { overflow: unset; min-width: 286px; } } @media screen and (min-width: 768px) { .four_ele_content { flex-wrap: nowrap; flex-direction: row; } } .simple_text_block { font-size: 17px; font-weight: 400; color: #707070; line-height: 20px; line-height: 21px; } .simple_text_block h5 { font-weight: 700; } .simple_text_block p, .simple_text_block h5, .simple_text_block h4 { padding-bottom: 30px; } .simple_text_block h4 { font-size: 20px; font-weight: 500; color: #5BA762; line-height: 20px; } .simple_text_block h1 { font-size: 25px; font-weight: 500; color: #5BA762; line-height: 20px; } @media screen and (max-width: 768px) { .simple_text_block h1 { font-size: 22px; font-weight: 500; color: #5BA762; line-height: 20px; } .simple_text_block h4 { font-size: 17px; font-weight: 500; color: #5BA762; line-height: 20px; } } .list_with_img { font-size: 17px; font-weight: 400; color: #707070; line-height: 26px; } .list_with_img li { margin-left: 20px; list-style: disc; margin-bottom: 25px; } .list_with_img p { margin-bottom: 25px; } .list_with_img img { float: right; min-width: 304px; max-width: 304px; height: auto; object-fit: contain; object-position: top; margin-left: 18px; } .list_with_lines { font-size: 17px; font-weight: 400; color: #707070; line-height: 20px; margin-bottom: 30px; } .list_with_lines li { margin-bottom: 15px; } .split_article_by_half { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 80px; grid-row-gap: 10px; margin-bottom: 25px; font-size: 17px; font-weight: 400; color: #707070; line-height: 26px; } .split_article_by_half:before { content: ""; width: 1px; height: 100%; top: 0; left: 50%; background-color: #707070; position: absolute; } @media screen and (max-width: 768px) { .list_with_img { display: flex; flex-direction: column-reverse; } .list_with_img img { float: inherit; margin: 0 auto; max-width: 100%; } .split_article_by_half { grid-template-columns: repeat(1, 1fr); } .split_article_by_half:before { display: none; } .list_with_lines { font-size: 15px; font-weight: 400; color: #707070; line-height: 20px; } } .form_two_range_slider { position: relative; width: 100%; height: auto; display: flex; align-items: center; justify-content: center; flex-direction: column; /* All the same stuff for Firefox */ /* All the same stuff for IE */ } .form_two_range_slider .range_info_window { text-align: center; font-size: 12px; font-weight: 400; color: #2E2E2E; line-height: 20px; border: 1px solid #BFBFBF; border-radius: 5px; padding: 4px 8px; background-color: #FFF; } .form_two_range_slider .multi-range-slider { position: relative; width: 80%; height: 20px; display: block; } .form_two_range_slider input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; -moz-appearance: none; appearance: none; position: absolute; z-index: 10; height: 100%; margin: 0; pointer-events: none; transform: translateY(9px); } .form_two_range_slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } .form_two_range_slider input[type=range]:focus { outline: none; } .form_two_range_slider input[type=range]::-ms-track { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } .form_two_range_slider input[type=range]::-webkit-slider-thumb { pointer-events: all; -webkit-appearance: none; cursor: pointer; border: 0 none; width: 15px; height: 15px; background-color: #1D5716; border-radius: 50%; box-shadow: 0 0 0 0 rgba(29, 87, 22, 0.1); transition: box-shadow 0.3s ease-in-out; } .form_two_range_slider input[type=range]::-moz-range-thumb { pointer-events: all; cursor: pointer; border: 0 none; width: 15px; height: 15px; background-color: #1D5716; border-radius: 50%; box-shadow: 0 0 0 0 rgba(29, 87, 22, 0.1); transition: box-shadow 0.3s ease-in-out; } .form_two_range_slider input[type=range]::-moz-focus-outer { border: 0; } .form_two_range_slider input[type=range]::-ms-thumb { pointer-events: all; border: 0 none; cursor: pointer; width: 15px; height: 15px; background-color: #1D5716; border-radius: 50%; box-shadow: 0 0 0 0 rgba(29, 87, 22, 0.1); transition: box-shadow 0.3s ease-in-out; } .form_two_range_slider input[type=range].hover::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(29, 87, 22, 0.1); } .form_two_range_slider input[type=range].hover::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(29, 87, 22, 0.1); } .form_two_range_slider input[type=range].hover::-ms-thumb { box-shadow: 0 0 0 5px rgba(29, 87, 22, 0.1); } .form_two_range_slider input[type=range]::-webkit-slider-runnable-track { background: transparent; } .form_two_range_slider input[type=range]:focus::-webkit-slider-runnable-track { background: transparent; } .form_two_range_slider input[type=range]::-moz-range-track { background: transparent; } .form_two_range_slider input[type=range]::-ms-track { background: transparent; } .form_two_range_slider input[type=range]::-ms-fill-lower { background: transparent; } .form_two_range_slider input[type=range]:focus::-ms-fill-lower { background: transparent; } .form_two_range_slider input[type=range]::-ms-fill-upper { background: transparent; } .form_two_range_slider input[type=range]:focus::-ms-fill-upper { background: transparent; } .form_two_range_slider .slider { position: absolute; width: 100%; top: 7px; z-index: 1; height: 6px; } .form_two_range_slider .slider > .track { position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; border-radius: 5px; background-color: #BFBFBF; } .form_two_range_slider .slider > .range { position: absolute; z-index: 2; left: 25%; right: 25%; top: 0; bottom: 0; border-radius: 5px; background-color: #1D5716; } .form_two_range_slider .price__wrapper { display: flex; justify-content: space-between; font-size: 13px; margin-top: 20px; width: 80%; padding-bottom: 2px; } .form_two_range_slider .price__wrapper span { font-size: 14px; font-weight: 400; color: #2E2E2E; line-height: 20px; } .switch { position: relative; display: inline-block; width: 32px; height: 16px; /* Rounded sliders */ } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #C5C5C5; -webkit-transition: 0.4s; transition: 0.4s; } .switch .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 0px; bottom: 0px; background-color: #1D5716; -webkit-transition: 0.4s; transition: 0.4s; } .switch input:checked + .slider { background-color: #C5C5C5; } .switch input:focus + .slider { box-shadow: 0 0 1px #C5C5C5; } .switch input:checked + .slider:before { -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px); } .switch .slider.round { border-radius: 34px; } .switch .slider.round:before { border-radius: 50%; } #sidebar_filters, #advance_filters { position: relative; min-height: 100px; } #loader { position: absolute; width: 100%; height: 100%; z-index: 1; background-color: rgba(255, 255, 255, 0.8); top: 0; left: 0; } #loader::before { content: " "; border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #2E2E2E; width: 35px; height: 35px; -webkit-animation: spin 1s linear infinite; /* Safari */ animation: spin 1s linear infinite; position: sticky; display: block; margin-top: 20px; top: 50%; left: 50%; } #sidebar_filters #loader::before { left: 20%; } #planner_guide_popup #loader p { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -100%); } #planner_guide_popup #loader::before { position: absolute; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); } } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .breadcrumbs { display: flex; width: 100%; max-width: 1276px; margin: 0 auto; margin-top: 25px; margin-bottom: 25px; gap: 23px; } .breadcrumbs li { font-size: 10px; font-weight: 400; color: #6D6D6D; line-height: 20px; position: relative; } .breadcrumbs li:after { transition: all 0.5s; position: absolute; content: " "; top: 50%; right: -15px; border: solid #6D6D6D; border-width: 0 1px 1px 0; display: inline-block; padding: 2px; transform: translate(-50%, -60%) rotate(-45deg); -webkit-transform: translate(-50%, -60%) rotate(-45deg); } .breadcrumbs li:last-of-type:after { display: none; } .fs_14_reg { font-size: 14px; } .fw_bold { font-weight: bold; } .fw-reg { font-weight: 400; } .margin-0 { margin: 0px; } .search_input_container .input_bar { width: 100%; display: flex; flex-wrap: nowrap; } .search_input_container input { border: none; outline: none; display: inline-block; width: 100%; } .search_input_container .result_bar { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 8; background-color: white; border: 1px solid #d4d4d5; border-radius: 5px; transform: translate(0%, 100%); box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); max-height: 60vh; overflow-y: scroll; } .search_input_container .result_ele { padding: 12px 16px; color: black; text-decoration: none; font-size: 14px; border-bottom: 1px solid rgba(34, 36, 38, 0.1); display: flex; justify-content: space-between; font-weight: bold; } .search_input_container .result_ele img { height: 42px; width: 59px; margin-right: 10px; } .search_input_container .empty_result { padding: 12px 16px; font-size: 14px; color: black; } #single_offer_product_list { margin-bottom: -110px; } .product_list_with_info { overflow: visible; display: grid; justify-content: space-between; flex-wrap: wrap; grid-template-columns: repeat(4, 1fr); gap: 20px; } .product_list_with_info .element { max-width: 304px; width: 100%; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); border-radius: 10px; position: relative; background-color: white; margin-bottom: 22px; } .product_list_with_info img { max-height: 175px; object-fit: cover; width: 100%; border-radius: 10px 10px 0 0; } .product_list_with_info .description { padding: 15px; } .product_list_with_info .desc_title, .product_list_with_info .desc_pl_title { font-size: 15px; font-weight: 700; } .product_list_with_info .desc_title { color: #2E2E2E; } .product_list_with_info .desc_pl_title { color: #BFBFBF; padding-top: 5px; } .product_list_with_info .desc_desc { padding-top: 9px; font-size: 13px; color: #2E2E2E; line-height: 24px; letter-spacing: 0.24px; max-height: 112px; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: block; /* Fallback for non-webkit */ display: -webkit-box; } .product_list_with_info .labels_container { position: absolute; right: 15px; top: 16px; max-width: 170px; } .product_list_with_info .label { padding: 5px 10px; background-color: #00B90C; font-size: 12px; color: white; font-weight: 700; border-radius: 5px; text-align: center; max-width: 170px; margin-bottom: 10px; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(1.4); } 50% { transform: scale(0.8); } 75% { transform: scale(1.3); } 100% { transform: scale(1); } } @media screen and (max-width: 768px) { #single_offer_product_list { margin-bottom: 0; } .product_list_with_info { overflow-x: scroll; padding-left: 5px; padding-right: 5px; } .product_list_with_info .element { min-width: 286px; } .product_list_with_info::-webkit-scrollbar { display: none; } } .blur_bg_text { text-align: center; background: rgba(235, 233, 228, 0.5) 0% 0% no-repeat padding-box; border-radius: 0px 0px 10px 10px; opacity: 1; backdrop-filter: blur(21px); -webkit-backdrop-filter: blur(21px); position: absolute; bottom: 0; width: 100%; padding: 20px; font-weight: 500; color: #1D5716; cursor: pointer; } .slider .splide__arrow { width: 45px; height: 45px; border-radius: 10px; background-color: #41713F; } .slider .splide__arrow svg { fill: white; } .search_container { height: 80px; background-color: lightGrey; width: 100%; } .search_container .sc_content { max-width: 95%; margin: 0 auto; margin-top: 0; display: flex; justify-content: space-between; align-items: center; height: 100%; } .search_container .button_white { color: #1D5716; border: 1px solid #1D5716; border-radius: 5px; padding: 14px; font-weight: 700; font-size: 11px; background-color: white; } .search_container .search_input_container { max-width: 70%; width: 100%; border: 1px solid transparent; border-radius: 5px; padding-top: 12px; padding-bottom: 11px; padding-left: 18px; background-color: white; color: #2E2E2E; position: relative; } .search_container img { height: 16px; width: 16px; vertical-align: middle; margin-right: 13px; } .search_container button { display: none; } @media screen and (max-width: 768px) { .sc_content { gap: 20px; overflow-y: visible; } .search_input_container { display: flex; } } @media screen and (min-width: 768px) { .search_container { height: 130px; } .search_container .sc_content { justify-content: center; } .search_container .button_white { font-size: 16px; padding: 14px; text-transform: uppercase; border-radius: 10px; } .search_container .search_input_container { max-width: 600px; padding: 14px 0 14px 10px; margin: 0 20px; border-radius: 10px; } .search_container button { text-transform: uppercase; display: inline-block; color: white; background-color: #334E42; border-radius: 10px; font-size: 16px; font-weight: 700; padding: 15px; } } .hp_info_container { margin: 0 auto; border: 6px solid #51825B; border-radius: 5px; max-width: 95%; margin: 0 auto; margin-top: 30px; } .hp_info_container img { max-width: 43%; margin-top: -20px; float: left; } .hp_info_container .hpi_content { padding-top: 30px; padding: 25px 10px; } .hp_info_container h2 { font-size: 18px; color: #5BA762; font-weight: 500; } .hp_info_container p { display: inline-block; color: #707070; font-size: 13px; padding-top: 5px; } .hp_info_container a { text-align: right; padding-top: 5px; color: #5BA762; font-size: 13px; text-decoration: underline; display: block; } @media screen and (max-width: 768px) { .hp_info_container { margin-bottom: 30px; } } @media screen and (min-width: 768px) { .hp_info_container { max-width: 1276px; min-height: 230px; border: 6px solid #51825B; border-radius: 10px; } .hp_info_container .hpi_content { padding: 20px 20px; } .hp_info_container h2 { font-size: 28px; padding-bottom: 15px; } .hp_info_container p { display: block; font-size: 17px; line-height: 26px; } .hp_info_container a { padding-top: 15px; font-size: 16px; } } @media screen and (max-width: 768px) { #two_ele_slider { visibility: visible; max-width: 95%; margin: 0 auto; margin-top: 0; } #two_ele_slider .splide__slide { margin-bottom: 20px; } #two_ele_slider .splide__list { flex-direction: column; } #two_ele_slider img { width: 100%; } } @media screen and (min-width: 768px) { .slider_two_ele { position: relative; width: 100%; height: 100%; max-width: 1276px; margin: 0 auto; margin-top: 50px; } .slider_two_ele .two_ele_inner_container { margin: 0 auto; width: 90%; } .slider_two_ele .splide__slide { height: 367px; } .slider_two_ele .splide__inner_container { max-width: 520px; max-height: 367px; margin: 0 auto; border-radius: 10px; position: relative; overflow: auto; } .slider_two_ele img { width: 100%; height: 100%; max-width: 520px; max-height: 367px; object-fit: cover; } .slider_two_ele p { font-size: 22px; cursor: pointer; } } .slider_four_ele { position: relative; width: 100%; height: 100%; max-width: 1276px; margin: 0 auto; margin-top: 50px; } .slider_four_ele .four_ele_inner_container { margin: 0 auto; width: 90%; } .slider_four_ele .splide__slide { height: 270px; } .slider_four_ele .splide__inner_container { max-width: 270px; max-height: 270px; margin: 0 auto; border-radius: 10px; position: relative; overflow: auto; } .slider_four_ele img { width: 100%; height: 100%; max-width: 270px; max-height: 270px; object-fit: cover; } .slider_four_ele p { font-size: 20px; } #planner_guide_popup { display: none; position: fixed; transform: translate(-50%, -50%); z-index: 10; top: 50%; left: 50%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4509803922); border-radius: 10px; background-color: #EBE9E4; width: 1054px; padding: 40px 28px 30px; } #planner_guide_popup.pop_up_active { display: block; } #planner_guide_popup .fieldset_container { display: flex; flex-wrap: wrap; flex-basis: auto; gap: 20px; } #planner_guide_popup fieldset { display: inline-block; flex: 1; } #planner_guide_popup fieldset input[type=checkbox] { display: none; } #planner_guide_popup fieldset input[type=checkbox] + label { display: flex; position: relative; padding-left: 25px; padding-top: 0px; margin-bottom: 20px; font-size: 12px; line-height: 15px; color: #2E2E2E; cursor: pointer; } #planner_guide_popup fieldset input[type=checkbox] + label:last-child { margin-bottom: 0; } #planner_guide_popup fieldset input[type=checkbox] + label:after { content: ""; display: block; width: 16px; height: 16px; border: 1px solid #BFBFBF; border-radius: 4px; position: absolute; left: 0%; top: 2px; opacity: 1; background-color: white; } #planner_guide_popup fieldset input[type=checkbox]:checked + label:after { width: 5px; height: 12px; top: 2px; border-radius: 2px; opacity: 1; border: 3px solid white; border-top-color: transparent; border-left-color: transparent; background-color: transparent; left: calc(0% + 5px); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #planner_guide_popup fieldset input[type=checkbox]:checked + label:before { content: " "; content: ""; display: block; width: 16px; height: 16px; border: 1px solid #BFBFBF; border-radius: 4px; position: absolute; left: 0%; top: 2px; opacity: 1; background-color: #1D5716; } #planner_guide_popup .fieldset_header { font-size: 16px; font-weight: 400; color: #2E2E2E; line-height: 20px; margin-bottom: 25px; } #planner_guide_popup label { max-width: 260px; } #planner_guide_popup .input_container { display: grid; grid-template-columns: repeat(auto-fill, minMax(260px, 1fr)); gap: 25px; } #planner_header { text-align: center; margin-bottom: 37px; } #planner_header h2 { font-size: 27px; font-weight: 500; color: #5BA762; line-height: 20px; padding-bottom: 19px; } #planner_header p { font-size: 17px; font-weight: 400; color: #6D6D6D; line-height: 26px; } #step_content { max-height: 265px; overflow-y: scroll; margin-bottom: 49px; } #step_content::-webkit-scrollbar-track { border-radius: 10px; background-color: #BFBFBF; } #step_content::-webkit-scrollbar { width: 12px; background-color: #BFBFBF; } #step_content::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #1D5716; } .step_content_element { margin-bottom: 29px; } .step_content_element .step_head { text-align: center; font-size: 14px; font-weight: 700; color: #2E2E2E; line-height: 22px; padding-bottom: 5px; } .step_content_element .step_desc { text-align: center; font-size: 14px; font-weight: 400; color: #2E2E2E; line-height: 20px; padding-bottom: 25px; } #btn_row { padding-top: 20px; border-top: 1px solid #c6c4c0; display: flex; justify-content: space-between; gap: 20px; align-items: center; } #btn_row button { padding: 15px; background-color: #41713F; border-radius: 10px; font-size: 11px; font-weight: 700; color: white; line-height: 15px; text-transform: uppercase; cursor: pointer; } #steps_progress { display: flex; justify-content: center; gap: 60px; flex: 1; } #steps_progress .step { background-color: #2E2E2E; opacity: 0.45; height: 8px; width: 100%; max-width: 105px; } #steps_progress .step.active { background-color: #5BA762; opacity: 1; } @media screen and (max-width: 768px) { #planner_guide_popup { max-width: 100vw; top: 0; left: 0; transform: translate(0%, 0); overflow-y: scroll; max-height: 100vh; padding: 0; margin: 0; background-color: transparent; } #step_content { max-height: unset; overflow-y: auto; } #planner_header, #step_content { background-color: #EBE9E4; max-width: 90vw; margin: 0 auto; padding: 20px; } #planner_header { margin-top: 20px; border-radius: 5px 5px 0 0; box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.4509803922); z-index: 1; position: relative; } #planner_header h2 { font-size: 25px; line-height: 140%; text-align: left; } #step_content { margin-bottom: 40px; border-radius: 0 0 5px 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4509803922); } #btn_row { position: sticky; bottom: 0px; border-top: 0; background-color: #334E42; width: 100vw; padding: 15px 20px; } #btn_row button { white-space: nowrap; } #steps_progress { gap: 10px; } } .block_split { display: flex; justify-content: space-between; } .block_split_left { width: 520px; max-width: 520px; } .block_split_left img { width: 100%; } .two_column, .block_split, .product_info_content { margin-top: 30px; } .two_column { display: flex; justify-content: space-between; } .sv_spacer { padding-top: 110px; padding-top: 110px; } #full_scree_carousel { position: absolute; top: 0; left: 0; width: 100vw; height: 100vw; } .copy_to_clipboard_info { position: fixed; background-color: #EBE9E4; bottom: 20px; left: 20px; padding: 10px 15px; font-size: 14px; font-weight: bold; border-radius: 10px; color: #6D6D6D; z-index: 99999; } .two_column, .block_split, .product_info_content { margin-top: 30px; } .two_column { display: flex; justify-content: space-between; } #product_title { margin-top: 0; } .single_offer #main-carousel { width: inherit; margin-bottom: 20px; } .single_offer #main-carousel .add_to_favorites { position: absolute; width: 35px; height: 35px; left: 45px; top: 25px; z-index: 2; cursor: pointer; } .single_offer #main-carousel .add_to_favorites img { display: none; } .single_offer #main-carousel .add_to_favorites .add_to_fav { filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg); } .single_offer #main-carousel .add_to_favorites .add_to_fav:hover { animation: pulse ease-in-out 0.5s; } .single_offer #main-carousel .add_to_favorites .active { display: block; } .single_offer #main-carousel img { max-height: 347px; object-fit: cover; object-position: bottom; } .single_offer #thumbnail-carousel { margin: 1rem auto 0; max-width: 492px; } .single_offer #thumbnail-carousel .splide__track--nav > .splide__list > .splide__slide.is-active { border: none; } .single_offer #thumbnail-carousel .splide__arrow { border-radius: 10px; background-color: #41713F; top: 50%; opacity: 1; color: white; } .single_offer #thumbnail-carousel .splide__arrow svg { fill: white; } .single_offer #thumbnail-carousel .splide__arrow--prev { left: 0%; } .single_offer #thumbnail-carousel .splide__arrow--next { right: 0%; } .single_offer #thumbnail-carousel .splide__slide { width: 70px; height: 70px; overflow: hidden; list-style: none; margin: 0 0.2rem; cursor: pointer; } .single_offer #thumbnail-carousel img { width: 100%; height: auto; } @media screen and (max-width: 768px) { .single_offer #thumbnail-carousel { max-width: 90%; margin: 0 auto; } .single_offer #thumbnail-carousel .splide__arrow--prev { left: -2%; } .single_offer #thumbnail-carousel .splide__arrow--next { right: -3%; } } .single_offer .left_column { position: relative; z-index: 2; } .single_offer .single_offer_conetnt { max-width: 950px; } .single_offer .header h1 { color: #2E2E2E; font-size: 25px; font-weight: 800; line-height: 140%; margin-bottom: 0; } .single_offer .header p { font-size: 25px; color: #6D6D6D; font-weight: 800; padding-top: 8px; line-height: 140%; } .single_offer .group_description { font-size: 19px; color: #6D6D6D; font-weight: 400; } .single_offer .group_description span { text-align: left; float: right; } .single_offer .description { color: #707070; font-size: 17px; line-height: 26px; font-weight: 400; } .single_offer .desc_author { text-align: right; font-size: 12px; color: #707070; font-weight: 400; margin-top: 15px; } .map_content { max-width: 304px; width: 100%; } .product_container { width: 950px; max-width: 950px; gap: 20px; } .product_info_container { max-width: 412px; width: 100%; } .product_info_inner_container { margin-top: 25px; } .product_info_inner_container:first-of-type { margin-top: 0; } .go_back_btn { padding: 15px 15px 10px 15px; background-color: #334E42; color: white; font-weight: 700; font-size: 11px; line-height: 15px; text-transform: uppercase; border-radius: 10px; height: 45px; } .product_info_content { box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); border-radius: 0px 0px 10px 10px; padding: 15px; } .product_description { color: #2E2E2E; font-size: 14px; } .odd_elements_table tr:nth-of-type(odd) { background-color: rgba(29, 87, 22, 0.0509803922); } .odd_elements_table td { font-size: 13px; line-height: 22px; color: #2E2E2E; padding-top: 5px; padding-bottom: 8px; } .odd_elements_table tr td:first-of-type { padding-left: 14px; text-transform: uppercase; } .odd_elements_table tr td:last-of-type { padding-right: 15px; } .product_details_table { max-width: 615px; height: fit-content; width: 100%; } .product_details_table tr td:first-of-type { width: 200px; } .table_legend { max-width: 286px; width: 100%; } .table_legend .map { margin-bottom: 40px; } .product_vegetation { width: 100%; } @media screen and (max-width: 768px) { .product_container { max-width: 100%; } .single_offer .header h2, .single_offer .header p { font-size: 22px; } .single_offer .group_description { font-size: 19px; } .single_offer .group_description span { text-align: left; float: none; } .block_split.product_info_inner_container { flex-direction: row; } .go_back_btn { white-space: nowrap; } .product_details_table td { display: block; padding: 5px 10px; color: black; } .table_legend { max-width: 100%; } .table_legend .map { display: block; margin: 0 auto; margin-bottom: 40px; } .map_content { max-width: 100%; width: 100%; } } .bottom_flex_content { display: flex; flex-wrap: nowrap; justify-content: space-between; background-color: white; border-radius: 10px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); padding: 30px 10px 23px 10px; } .bottom_flex_content .content_element { max-width: 16.6666666667%; width: 100%; align-items: center; text-align: center; } .bottom_flex_content img { display: block; margin: 0 auto; max-height: 16px; margin-bottom: 15px; } .bottom_flex_content p { font-size: 16px; color: #2E2E2E; font-weight: 700; padding-bottom: 10px; } .bottom_flex_content span { padding-top: 15px; color: #2E2E2E; font-weight: 400; text-align: center; font-size: 14px; line-height: 22px; } @media screen and (max-width: 768px) { .bottom_flex_content { flex-wrap: wrap; max-width: 95%; margin: 0 auto; margin-top: 32px; margin-bottom: 26px; } .bottom_flex_content .content_element { max-width: 50%; width: 100%; align-items: center; text-align: center; margin-top: 33px; } } #producers_map_container { position: sticky; top: 10px; } #btn_group { display: flex; justify-content: space-between; margin-bottom: 57px; } #btn_group .btn { padding: 15px; text-transform: uppercase; color: white; font-weight: 700; border-radius: 10px; font-size: 14px; } #btn_group #prev { background-color: #6D6D6D; } #btn_group #next { background-color: #41713F; } #map_header { font-size: 16px; font-weight: 400; padding: 18px 12px; border-radius: 10px 10px 0 0; background-color: #1D5716; color: white; display: block; } #map { position: relative; width: 100%; padding: 0 auto; padding-top: 28px; padding-bottom: 28px; background: url(../img/mapa.png) 50% 50% no-repeat; display: flex; justify-content: center; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); } #map #regions-map { left: 0; position: absolute; top: 0; z-index: 20; } #map-wrapper { height: 220px; width: 220px; position: relative; } #map-wrapper .map-mask { z-index: 25; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #map-wrapper p { background-position: 0 0; background-repeat: no-repeat; height: 212px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } #map-wrapper .hide { display: none; } #map-wrapper #region-1 { background-image: url("../img/mapa/region-1.png"); z-index: 1; } #map-wrapper #region-2 { background-image: url("../img/mapa/region-2.png"); z-index: 2; } #map-wrapper #region-3 { background-image: url("../img/mapa/region-3.png"); z-index: 3; } #map-wrapper #region-4 { background-image: url("../img/mapa/region-4.png"); z-index: 4; } #map-wrapper #region-5 { background-image: url("../img/mapa/region-5.png"); z-index: 5; } #map-wrapper #region-6 { background-image: url("../img/mapa/region-6.png"); z-index: 6; } #map-wrapper #region-7 { background-image: url("../img/mapa/region-7.png"); z-index: 7; } #map-wrapper #region-8 { background-image: url("../img/mapa/region-8.png"); z-index: 8; } #map-wrapper #region-9 { background-image: url("../img/mapa/region-9.png"); z-index: 9; } #map-wrapper #region-10 { background-image: url("../img/mapa/region-10.png"); z-index: 10; } #map-wrapper #region-11 { background-image: url("../img/mapa/region-11.png"); z-index: 11; } #map-wrapper #region-12 { background-image: url("../img/mapa/region-12.png"); z-index: 12; } #map-wrapper #region-13 { background-image: url("../img/mapa/region-13.png"); z-index: 13; } #map-wrapper #region-14 { background-image: url("../img/mapa/region-14.png"); z-index: 14; } #map-wrapper #region-15 { background-image: url("../img/mapa/region-15.png"); z-index: 15; } #map-wrapper #region-16 { background-image: url("../img/mapa/region-16.png"); z-index: 16; } #producers { border-radius: 0 0 10px 10px; } #producers a { background-color: #1D5716; padding: 8px 21px; color: white; display: block; font-weight: 700; font-size: 13px; border-bottom: 1px solid white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #show_all { color: #1D5716; font-size: 13px; font-weight: 400; padding: 17px 0; text-align: center; display: block; border: 1px solid white; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); border-radius: 0 0 10px 10px; } .show_as_list { text-align: center; display: block; padding: 17px 0 0; font-size: 13px; font-weight: 400; color: #1D5716; line-height: 20px; } .scroll_to_producers_map { position: fixed; top: 30%; right: 0; transform: translate(0%, -50%) rotate(-90deg); transform-origin: bottom right; border-radius: 10px 10px 0 0; background-color: #334E42; z-index: 10; padding: 15px 22px; color: white; text-transform: uppercase; font-weight: bold; font-size: 11px; } @media screen and (max-width: 768px) { #btn_group { margin-bottom: 20px; } } #large_carousel_container { position: fixed; display: none; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.85); z-index: 9999; } #large_carousel_container img { margin-top: 20px; width: auto; height: auto; max-height: 85vh; object-fit: scale-down; } .large_carousel_element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 100vh; } .splide__slide.is-active { display: flex; flex-direction: column; } .splide_slide_header { text-align: center; margin: 0 auto; background-color: white; padding: 10px 15px; border-radius: 10px; width: fit-content; margin-top: 15px; font-size: 14px; color: #707070; } .splide_slide_header a { text-decoration: none; } #close_large { position: absolute; top: 30px; right: 30px; width: 50px; height: 50px; cursor: pointer; z-index: 999; } #close_large::before, #close_large::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 5px; background-color: white; border-radius: 3px; } #close_large:before { transform: translate(-50%, -50%) rotate(45deg); } #close_large::after { transform: translate(-50%, -50%) rotate(-45deg); } .single_offer .icons_container { display: flex; justify-content: flex-start; flex-wrap: wrap; } .single_offer .icons_container p, .single_offer .icons_container div { width: 25px; height: 25px; position: relative; display: inline-block; box-sizing: border-box; margin: 10px 0; } .single_offer .icons_container .share_icons { width: auto; height: auto; } .single_offer .icons_container span { visibility: hidden; position: absolute; top: 20%; left: 50%; transform: translate(-50%, -100%); background-color: white; color: #2E2E2E; font-size: 12px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); background: #FFFFFF; border: 1px solid #707070; transition: 0.3s all; padding: 7px 10px; opacity: 0; max-width: 178px; width: 178px; display: block; } .single_offer .icons_container span:after, .single_offer .icons_container span:before { top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .single_offer .icons_container span:after { border-color: rgba(255, 255, 255, 0); border-top-color: #FFFFFF; border-width: 7px; margin-left: -7px; } .single_offer .icons_container span:before { border-color: rgba(112, 112, 112, 0); border-top-color: #707070; border-width: 8px; margin-left: -8px; } .single_offer .big_icons p { width: 25%; height: 56px; } .single_offer .big_icons p:hover span { visibility: visible; opacity: 1; } .single_offer .action_icons { width: 50%; position: relative; justify-content: space-around; } .single_offer .action_icons p { width: 33%; height: 25px; } .single_offer .action_icons .share_icons { display: flex; margin: 0; justify-content: space-between; } .single_offer .action_icons h3 { font-size: 12px; color: #2E2E2E; font-weight: 400; text-transform: uppercase; margin: 0; } .single_offer .share_icons .icon { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 0; } .single_offer .share_icons .icon:before { fill: white; } .single_offer .icons_container { font-size: 20px; } .single_offer .icon-print { content: ""; position: absolute; width: 25px; height: 25px; background-image: url("../img/icons/iko_print.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .single_offer .icon-print:hover span { visibility: visible; opacity: 1; } .single_offer .icon-file { content: ""; position: absolute; width: 25px; height: 25px; background-image: url("../img/icons/iko_pdf.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .single_offer .icon-file:hover span { visibility: visible; opacity: 1; } .single_offer .icon-share { content: ""; position: absolute; width: 25px; height: 25px; background-image: url("../img/icons/iko_share.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .single_offer .icon-share:hover span { visibility: visible; opacity: 1; } .single_offer .icon-link { content: ""; position: absolute; width: 16px; height: 16px; background-image: url("../img/icons/iko_copy_link.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; background-color: grey; } .single_offer .icon-link:hover span { visibility: visible; opacity: 1; } .single_offer .icon-twitter { content: ""; position: absolute; width: 16px; height: 16px; background-image: url("../img/icons/iko_twitter.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; background-color: #1d9bf0; } .single_offer .icon-twitter:hover span { visibility: visible; opacity: 1; } .single_offer .icon-facebook { content: ""; position: absolute; width: 16px; height: 16px; background-image: url("../img/icons/iko_facebook.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; background-color: #1B74E4; } .single_offer .icon-facebook:hover span { visibility: visible; opacity: 1; } .single_offer .icon-link, .single_offer .icon-twitter, .single_offer .icon-facebook { background-size: 16px; } .single_offer .icon-sun { content: ""; position: absolute; width: 35px; height: 35px; background-image: url("../img/icons/iko_sun.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .single_offer .icon-sun:hover span { visibility: visible; opacity: 1; } .single_offer .icon-water { content: ""; position: absolute; width: 35px; height: 35px; background-image: url("../img/icons/iko_wet.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .single_offer .icon-water:hover span { visibility: visible; opacity: 1; } .single_offer .icon-tree { content: ""; position: absolute; width: 35px; height: 35px; background-image: url("../img/icons/iko_shape.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .single_offer .icon-tree:hover span { visibility: visible; opacity: 1; } .single_offer .icon-size { content: ""; position: absolute; width: 35px; height: 35px; background-image: url("../img/icons/iko_height.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .single_offer .icon-size:hover span { visibility: visible; opacity: 1; } .single_offer .icon-country { content: ""; position: absolute; width: 35px; height: 35px; background-image: url("../img/icons/iko_PL.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .single_offer .icon-country:hover span { visibility: visible; opacity: 1; } .single_offer .icon-cup { content: ""; position: absolute; width: 35px; height: 35px; background-image: url("../img/icons/iko_win.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .single_offer .icon-cup:hover span { visibility: visible; opacity: 1; } .single_offer .icon-honey { content: ""; position: absolute; width: 35px; height: 35px; background-image: url("../img/icons/iko_honey.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .single_offer .icon-honey:hover span { visibility: visible; opacity: 1; } @media screen and (max-width: 768px) { .single_offer { max-width: 95%; margin: 0 auto; margin-top: 0; } .two_column, .block_split { flex-direction: column; gap: 20px; } .block_split_left { max-width: 100%; width: 100%; } } #contact_form { background-color: #EBE9E4; padding: 36px 36px 44px; } #contact_form h2 { font-size: 17px; font-weight: 400; color: #2E2E2E; line-height: 20px; line-height: 26px; text-align: center; margin-bottom: 20px; } #contact_form .row, #contact_form #text_area { max-width: 844px; margin: 0 auto; width: 100%; margin-bottom: 20px; } #contact_form .row.row:last-of-type, #contact_form #text_area.row:last-of-type { margin-bottom: 0; } #contact_form input, #contact_form textarea { border-radius: 10px; background-color: white; position: relative; padding: 11px 41px; color: #707070; } #contact_form #text_area { position: relative; } #contact_form textarea { display: block; width: 100%; } #contact_form .row { display: flex; justify-content: space-between; align-items: flex-start; } #contact_form .input_container { position: relative; width: 49%; } #contact_form input { width: 100%; } #contact_form .icon { position: absolute; top: 12px; left: 12px; } #contact_form #checkbox_row input[type=checkbox] { display: none; } #contact_form #checkbox_row input[type=checkbox] + span { display: flex; position: relative; padding-left: 25px; padding-top: 0px; margin-bottom: 20px; font-size: 12px; line-height: 15px; color: #2E2E2E; cursor: pointer; } #contact_form #checkbox_row input[type=checkbox] + span:last-child { margin-bottom: 0; } #contact_form #checkbox_row input[type=checkbox] + span:after { content: ""; display: block; width: 16px; height: 16px; border: 1px solid #BFBFBF; border-radius: 4px; position: absolute; left: 0%; top: 2px; opacity: 1; background-color: white; } #contact_form #checkbox_row input[type=checkbox]:checked + span:after { width: 5px; height: 12px; top: 2px; border-radius: 2px; opacity: 1; border: 3px solid white; border-top-color: transparent; border-left-color: transparent; background-color: transparent; left: calc(0% + 5px); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #contact_form #checkbox_row input[type=checkbox]:checked + span:before { content: " "; content: ""; display: block; width: 16px; height: 16px; border: 1px solid #BFBFBF; border-radius: 4px; position: absolute; left: 0%; top: 2px; opacity: 1; background-color: #1D5716; } #contact_form #checkbox_row input[type=checkbox]:not(:checked) + span::before { content: " "; display: none; } #contact_form p { font-size: 12px; font-weight: 400; color: #2E2E2E; line-height: 20px; } #contact_form button { padding: 15px 57px; text-transform: uppercase; background-color: #8f9b93; border-radius: 10px; font-size: 15px; font-weight: 700; color: white; line-height: 20px; } @media screen and (max-width: 768px) { #contact_form h2 { font-size: 15px; font-weight: 400; color: #707070; line-height: 20px; } #contact_form .row:first-of-type { flex-direction: column; margin-bottom: 0; } #contact_form .row:first-of-type .input_container { width: 100%; margin-bottom: 20px; } } .contact_info_container { display: flex; max-height: 230px; margin-bottom: 30px; flex-wrap: nowrap; } .contact_info_container .contact_info { flex: 1; box-sizing: border-box; } .contact_info_container li { display: flex; gap: 20px; margin-bottom: 10px; } .contact_info_container .icon { position: relative; color: #707070; line-height: 20px; font-size: 17px; } .contact_info_container .map { flex: 2; } .contact_info_container #map { max-height: 100%; height: 100%; width: 100%; } .contact_info_container img { max-height: 100%; object-fit: cover; width: 100%; } @media screen and (max-width: 768px) { .contact_info_container { flex-wrap: wrap; flex-direction: column; max-height: inherit; gap: 20px; max-width: 90%; margin: 0 auto; margin-bottom: 20px; } } .icon_phone { top: 50%; left: 0; width: 16px; height: 16px; background-image: url("../img/icons/iko_phone.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 2; } .icon_mail { top: 50%; left: 0; width: 16px; height: 16px; background-image: url("../img/icons/iko_mail.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 2; } .icon_link { top: 50%; left: 0; width: 16px; height: 16px; background-image: url("../img/icons/iko_copy_link.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 2; } .icon_mail { top: 50%; left: 0; width: 16px; height: 16px; background-image: url("../img/icons/iko_mail.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 2; } .icon_pen { top: 50%; left: 0; width: 16px; height: 16px; background-image: url("../img/icons/iko_pen.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 2; } .icon_home { top: 50%; left: 0; width: 16px; height: 16px; background-image: url("../img/icons/iko_home.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 2; } .icon_lines { top: 50%; left: 0; width: 16px; height: 16px; background-image: url("../img/icons/iko_lines.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 2; } @media screen and (max-width: 768px) { #contact_site h1 { width: 90%; margin: 0 auto; margin-bottom: 20px; } } #about_us p { font-size: 17; font-weight: 400; color: #707070; line-height: 26px; margin-bottom: 30px; } #about_us h4 { margin: 40px 0; padding: 0; } @media screen and (max-width: 768px) { #about_us { max-width: 90%; margin: 0 auto; } #about_us p { font-size: 15px; font-weight: 400; color: #707070; line-height: 26px; } } #product_info img { height: 495px; object-fit: cover; } #categories { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; margin-bottom: 50px; } #categories p { font-size: 17px; font-weight: 400; color: #1D5716; line-height: 26px; } .description_section { margin-bottom: 60px; } .category_header { font-size: 22px; font-weight: 400; color: #707070; line-height: 26px; margin-bottom: 25px; } .more_info_link { text-decoration: underline; font-size: 16px; font-weight: 400; color: #2E2E2E; line-height: 24px; } @media screen and (max-width: 768px) { #product_info { max-width: 90%; margin: 0 auto; } #product_info h1 { color: black; } #categories { grid-template-columns: repeat(2, 1fr); } } #advance_filters { width: 100%; display: flex; justify-content: space-between; } #advance_filters .elmenet_subgroups.inactive:not(.active) .input_container, #advance_filters .inactive .input_container, #advance_filters .elmenet_subgroups.inactive:not(.active) .search_input_container, #advance_filters .inactive .search_input_container, #advance_filters .elmenet_subgroups.inactive:not(.active) .switch_label, #advance_filters .inactive .switch_label, #advance_filters .elmenet_subgroups.inactive:not(.active) .elmenet_subgroups, #advance_filters .inactive .elmenet_subgroups, #advance_filters .elmenet_subgroups.inactive:not(.active) .plant_active_filter, #advance_filters .inactive .plant_active_filter, #advance_filters .inactive #see_more { max-height: 0; transition: all 0.5s linear; overflow: hidden; } #advance_filters .elmenet_subgroups.inactive:not(.active) .search_input_container, #advance_filters .inactive .search_input_container { margin: 0; } #advance_filters .elmenet_subgroups.inactive:not(.active) .switch_label, #advance_filters .inactive .switch_label { padding: 0 19px; } #advance_filters .elmenet_subgroups.inactive:not(.active) .plant_active_filter, #advance_filters .inactive .plant_active_filter, #advance_filters .inactive #see_more { padding: 0 19px; margin: 0; border: 0; } #advance_filters .elmenet_subgroups.inactive:not(.active) .input_container, #advance_filters .inactive .input_container { padding: 0 18px; } #advance_filters .advance_filter_column { max-width: 404px; width: 100%; } #advance_filters .form_element { border-radius: 10px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); overflow: hidden; margin-bottom: 20px; transition: 1s all; } #advance_filters .fieldset_header { display: block; padding: 15px 18px; background-color: #EBE9E4; font-size: 16px; font-weight: 400; color: #2E2E2E; line-height: 24px; position: relative; } #advance_filters .fieldset_header:before { transition: all 0.5s; position: absolute; content: " "; top: 50%; right: 20px; border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 5px; transform: translate(-50%, -60%) rotate(-45deg); -webkit-transform: translate(-50%, -60%) rotate(-45deg); } #advance_filters .sub_header { text-transform: uppercase; font-size: 12px; font-weight: 400; color: #2E2E2E; line-height: 20px; } #advance_filters .input_container, #advance_filters .inner_input_container { padding: 15px 18px; display: grid; row-gap: 25px; column-gap: 35px; padding-bottom: 25px; } #advance_filters .group, #advance_filters .inner_input_container, #advance_filters .plant_type { grid-template-columns: 1fr 1fr; } #advance_filters .inline-group { grid-template-columns: repeat(6, 1fr); } #advance_filters .input_element { font-size: 12px; font-weight: 400; color: #2E2E2E; line-height: 20px; } #advance_filters .input_element input[type=checkbox] { display: none; } #advance_filters .input_element input[type=checkbox] + label { display: flex; position: relative; padding-left: 25px; padding-top: 0px; margin-bottom: 20px; font-size: 12px; line-height: 15px; color: #2E2E2E; cursor: pointer; } #advance_filters .input_element input[type=checkbox] + label:last-child { margin-bottom: 0; } #advance_filters .input_element input[type=checkbox] + label:after { content: ""; display: block; width: 16px; height: 16px; border: 1px solid #BFBFBF; border-radius: 4px; position: absolute; left: 0%; top: 0; opacity: 1; background-color: white; } #advance_filters .input_element input[type=checkbox]:checked + label:after { width: 5px; height: 12px; top: 0; border-radius: 2px; opacity: 1; border: 3px solid white; border-top-color: transparent; border-left-color: transparent; background-color: transparent; left: calc(0% + 5px); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #advance_filters .input_element input[type=checkbox]:checked + label:before { content: " "; content: ""; display: block; width: 16px; height: 16px; border: 1px solid #BFBFBF; border-radius: 4px; position: absolute; left: 0%; top: 0; opacity: 1; background-color: #1D5716; } #advance_filters .input_element.input_element_inline-group { text-align: center; } #advance_filters .input_element.input_element_inline-group input[type=checkbox] { display: none; } #advance_filters .input_element.input_element_inline-group input[type=checkbox] + label { display: flex; position: relative; padding-left: 0; padding-top: 20px; margin-bottom: 20px; font-size: 12px; line-height: 15px; color: #2E2E2E; cursor: pointer; justify-content: center; } #advance_filters .input_element.input_element_inline-group input[type=checkbox] + label:last-child { margin-bottom: 0; } #advance_filters .input_element.input_element_inline-group input[type=checkbox] + label:after { content: ""; display: block; width: 16px; height: 16px; border: 1px solid #BFBFBF; border-radius: 4px; position: absolute; left: 50%; top: 0; opacity: 1; background-color: white; -webkit-transform: translate(-50%); transform: translate(-50%); } #advance_filters .input_element.input_element_inline-group input[type=checkbox]:checked + label:after { width: 5px; height: 12px; top: 0; border-radius: 2px; opacity: 1; border: 3px solid white; border-top-color: transparent; border-left-color: transparent; background-color: transparent; left: 50%; -webkit-transform: translate(-50%) rotate(45deg); transform: translate(-50%) rotate(45deg); } #advance_filters .input_element.input_element_inline-group input[type=checkbox]:checked + label:before { content: " "; content: ""; display: block; width: 16px; height: 16px; border: 1px solid #BFBFBF; border-radius: 4px; position: absolute; left: 50%; top: 0; opacity: 1; background-color: #1D5716; -webkit-transform: translate(-50%); transform: translate(-50%); } #advance_filters .input_element.input_disabled { opacity: 0.5; } #advance_filters .color_visuality { min-width: 16px; max-width: 16px; height: 16px; display: inline-block; margin-right: 8px; } #advance_filters .active .input_container, #advance_filters .active .search_input_container, #advance_filters .active .switch_label, #advance_filters .active .elmenet_subgroups, #advance_filters .active .plant_active_filter, #advance_filters .active #see_more { overflow: hidden; max-height: 5000px; transition: all 0.1s linear; transform: translateY(0); } #advance_filters .active .input_container *, #advance_filters .active .search_input_container *, #advance_filters .active .switch_label *, #advance_filters .active .elmenet_subgroups *, #advance_filters .active .plant_active_filter *, #advance_filters .active #see_more * { visibility: visible; } #advance_filters .active .switch_label { padding: 15px 18px; } #advance_filters .active .plant_type { max-height: 50000px; } #advance_filters .active .search_input_container { margin-top: 1px; } #advance_filters .active #see_more { padding: 20px; } #advance_filters .active .plant_active_filter { margin: 15px 18px; margin-top: 0; border-bottom: 1px solid #707070; padding: 10px 0; display: flex; gap: 10px; } #advance_filters .active .input_container { padding: 15px 18px; } #advance_filters .active .fieldset_header:before { transform: translate(-50%, -60%) rotate(45deg); -webkit-transform: translate(-50%, -60%) rotate(45deg); } #advance_filters .elmenet_subgroups.inactive:not(.active) .fieldset_header:before { transform: translate(-50%, -60%) rotate(-45deg); -webkit-transform: translate(-50%, -60%) rotate(-45deg); } #advance_filters .switch_label { padding: 15px 18px; } #advance_filters .switch_name { font-size: 16px; font-weight: 400; color: #BFBFBF; line-height: 20px; } #advance_filters .switch_name.active { color: #2E2E2E; } #advance_filters .search_input_container { margin: 1px; background-color: #EBE9E4; } #advance_filters .search_input_container fieldset { margin: 19px 17px; background-color: white; border-radius: 10px; padding: 11px 14px; } #advance_filters .search_input_container input { width: 90%; } #advance_filters #see_more { text-align: center; font-size: 13px; font-weight: 400; color: #1D5716; line-height: 20px; padding: 20px; cursor: pointer; } #advance_filters .plant_active_filter { margin: 15px 18px; margin-top: 0; border-top: 1px solid #707070; border-bottom: 1px solid #707070; padding: 10px 0; display: block; } #advance_filters #plant_list_clear_btn { padding-right: 35px; position: relative; cursor: pointer; } #advance_filters #plant_list_clear_btn:before, #advance_filters #plant_list_clear_btn:after { content: " "; position: absolute; width: 1px; height: 12px; top: 50%; right: 15px; background-color: #707070; } #advance_filters #plant_list_clear_btn::after { transform: translate(-50%, -50%) rotate(45deg); } #advance_filters #plant_list_clear_btn:before { transform: translate(-50%, -50%) rotate(-45deg); } @media screen and (max-width: 768px) { #advance_filters { flex-direction: column; } #advance_filters .advance_filter_column { max-width: unset; } #advance_filters .form_element { border-radius: 0; margin-bottom: 5px; box-shadow: none; } } .plant_type { overflow: hidden; transition: 0.5s all; } .filter_active_inputs, .plant_active_filter { display: flex; gap: 20px; margin-bottom: 25px; flex-wrap: wrap; } .filter_active_inputs button, .plant_active_filter button { margin-left: 15px; width: 15px; height: 15px; cursor: pointer; position: relative; vertical-align: middle; } .filter_active_inputs button:before, .filter_active_inputs button:after, .plant_active_filter button:before, .plant_active_filter button:after { content: " "; position: absolute; width: 1px; height: 12px; top: 50%; left: 50%; background-color: #707070; } .filter_active_inputs button::after, .plant_active_filter button::after { transform: translate(-50%, -50%) rotate(45deg); } .filter_active_inputs button:before, .plant_active_filter button:before { transform: translate(-50%, -50%) rotate(-45deg); } .advance_filter_active_inputs #active_inputs_info_clear_all { display: none; } .active_input_container { border-radius: 5px; padding: 5px 10px; background-color: #EBE9E4; font-size: 12px; font-weight: 500; color: #787878; line-height: 20px; } @media screen and (max-width: 768px) { #active_inputs_info { margin: 10px 5px 20px; gap: 20px; } } #floating_info { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; justify-content: space-around; background-color: #334E42; height: 80px; align-items: center; vertical-align: middle; z-index: 2; transition: 2s all; } #floating_info.inactive { transform: translate(0, 100%); } #floating_info.red_btn a { background-color: #c03c1e; } #floating_info button, #floating_info a { font-size: 15px; font-weight: bold; color: white; line-height: 20px; text-transform: uppercase; cursor: pointer; } #floating_info a { padding: 15px; background-color: #41713F; border-radius: 10px; transition: 2s all; } #floating_info #search_result_info { font-size: 17px; font-weight: 400; color: #BFBFBF; line-height: 20px; } #floating_info #results_number { font-weight: 700; } #search_result_info { gap: 5px; } @media screen and (max-width: 768px) { #floating_info button[data-celarfilters] { display: none; } } #offer_listning { margin-top: 0; display: flex; justify-content: space-between; gap: 20px; margin-right: 20px; } #sidebar_filters { display: flex; min-width: 384px; max-width: 384px; background-color: #EBE9E4; padding-right: 35px; flex-direction: column; align-items: flex-end; height: fit-content; width: 100%; display: flex; justify-content: flex-start; } #sidebar_filters form, #sidebar_filters .section_block, #sidebar_filters .searchPhraseInputValue_container, #sidebar_filters #additional_inputs_on_sidebar { max-width: 262px; width: 100%; } #sidebar_filters #additional_inputs_on_sidebar { margin: 15px 0; } #sidebar_filters fieldset { border-bottom: 1px solid #BFBFBF; } #sidebar_filters fieldset:last-of-type { border-bottom: none; } #sidebar_filters .elmenet_subgroups.inactive:not(.active) .input_container, #sidebar_filters .inactive .input_container, #sidebar_filters .elmenet_subgroups.inactive:not(.active) .search_input_container, #sidebar_filters .inactive .search_input_container, #sidebar_filters .elmenet_subgroups.inactive:not(.active) .switch_label, #sidebar_filters .inactive .switch_label, #sidebar_filters .elmenet_subgroups.inactive:not(.active) .elmenet_subgroups, #sidebar_filters .inactive .elmenet_subgroups, #sidebar_filters .elmenet_subgroups.inactive:not(.active) .plant_active_filter, #sidebar_filters .inactive .plant_active_filter, #sidebar_filters .inactive #see_more { max-height: 0; transition: all 0.5s linear; overflow: hidden; } #sidebar_filters .elmenet_subgroups.inactive:not(.active) .search_input_container, #sidebar_filters .inactive .search_input_container { margin: 0; } #sidebar_filters .elmenet_subgroups.inactive:not(.active) .switch_label, #sidebar_filters .inactive .switch_label { padding: 0 19px; } #sidebar_filters .elmenet_subgroups.inactive:not(.active) .plant_active_filter, #sidebar_filters .inactive .plant_active_filter, #sidebar_filters .inactive #see_more { padding: 0 19px; margin: 0; border: 0; } #sidebar_filters .elmenet_subgroups.inactive:not(.active) .input_container, #sidebar_filters .inactive .input_container { padding: 0 0; } #sidebar_filters .advance_filter_column { max-width: 404px; width: 100%; } #sidebar_filters .form_element { border-radius: 0; box-shadow: none; overflow: hidden; margin-bottom: 5px; transition: 1s all; } #sidebar_filters .fieldset_header { display: block; padding: 10px 0; background-color: #EBE9E4; font-size: 16px; font-weight: 400; color: #2E2E2E; line-height: 24px; position: relative; } #sidebar_filters .fieldset_header:before { transition: all 0.5s; position: absolute; content: " "; top: 50%; right: 20px; border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 5px; transform: translate(-50%, -60%) rotate(-135deg); -webkit-transform: translate(-50%, -60%) rotate(-135deg); } #sidebar_filters .sub_header { text-transform: uppercase; font-size: 12px; font-weight: 400; color: #2E2E2E; line-height: 20px; } #sidebar_filters .input_container, #sidebar_filters .inner_input_container { padding: 10px 0; display: grid; row-gap: 25px; column-gap: 5px; padding-bottom: 25px; } #sidebar_filters .group, #sidebar_filters .inner_input_container, #sidebar_filters .plant_type { grid-template-columns: 1fr; } #sidebar_filters .inline-group { grid-template-columns: repeat(4, 1fr); } #sidebar_filters .input_element { font-size: 12px; font-weight: 400; color: #2E2E2E; line-height: 20px; } #sidebar_filters .input_element input[type=checkbox] { display: none; } #sidebar_filters .input_element input[type=checkbox] + label { display: flex; position: relative; padding-left: 25px; padding-top: 0px; margin-bottom: 20px; font-size: 12px; line-height: 15px; color: #2E2E2E; cursor: pointer; } #sidebar_filters .input_element input[type=checkbox] + label:last-child { margin-bottom: 0; } #sidebar_filters .input_element input[type=checkbox] + label:after { content: ""; display: block; width: 16px; height: 16px; border: 1px solid #BFBFBF; border-radius: 4px; position: absolute; left: 0%; top: 0; opacity: 1; background-color: white; } #sidebar_filters .input_element input[type=checkbox]:checked + label:after { width: 5px; height: 12px; top: 0; border-radius: 2px; opacity: 1; border: 3px solid white; border-top-color: transparent; border-left-color: transparent; background-color: transparent; left: calc(0% + 5px); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #sidebar_filters .input_element input[type=checkbox]:checked + label:before { content: " "; content: ""; display: block; width: 16px; height: 16px; border: 1px solid #BFBFBF; border-radius: 4px; position: absolute; left: 0%; top: 0; opacity: 1; background-color: #1D5716; } #sidebar_filters .input_element.input_element_inline-group { text-align: center; } #sidebar_filters .input_element.input_element_inline-group input[type=checkbox] { display: none; } #sidebar_filters .input_element.input_element_inline-group input[type=checkbox] + label { display: flex; position: relative; padding-left: 0; padding-top: 20px; margin-bottom: 20px; font-size: 12px; line-height: 15px; color: #2E2E2E; cursor: pointer; justify-content: center; } #sidebar_filters .input_element.input_element_inline-group input[type=checkbox] + label:last-child { margin-bottom: 0; } #sidebar_filters .input_element.input_element_inline-group input[type=checkbox] + label:after { content: ""; display: block; width: 16px; height: 16px; border: 1px solid #BFBFBF; border-radius: 4px; position: absolute; left: 50%; top: 0; opacity: 1; background-color: white; -webkit-transform: translate(-50%); transform: translate(-50%); } #sidebar_filters .input_element.input_element_inline-group input[type=checkbox]:checked + label:after { width: 5px; height: 12px; top: 0; border-radius: 2px; opacity: 1; border: 3px solid white; border-top-color: transparent; border-left-color: transparent; background-color: transparent; left: 50%; -webkit-transform: translate(-50%) rotate(45deg); transform: translate(-50%) rotate(45deg); } #sidebar_filters .input_element.input_element_inline-group input[type=checkbox]:checked + label:before { content: " "; content: ""; display: block; width: 16px; height: 16px; border: 1px solid #BFBFBF; border-radius: 4px; position: absolute; left: 50%; top: 0; opacity: 1; background-color: #1D5716; -webkit-transform: translate(-50%); transform: translate(-50%); } #sidebar_filters .input_element.input_disabled { opacity: 0.5; } #sidebar_filters .color_visuality { min-width: 16px; max-width: 16px; height: 16px; display: inline-block; margin-right: 8px; } #sidebar_filters .active .input_container, #sidebar_filters .active .search_input_container, #sidebar_filters .active .switch_label, #sidebar_filters .active .elmenet_subgroups, #sidebar_filters .active .plant_active_filter, #sidebar_filters .active #see_more { overflow: hidden; max-height: 5000px; transition: all 0.1s linear; transform: translateY(0); } #sidebar_filters .active .input_container *, #sidebar_filters .active .search_input_container *, #sidebar_filters .active .switch_label *, #sidebar_filters .active .elmenet_subgroups *, #sidebar_filters .active .plant_active_filter *, #sidebar_filters .active #see_more * { visibility: visible; } #sidebar_filters .active .switch_label { padding: 15px 18px; } #sidebar_filters .active .plant_type { max-height: 50000px; } #sidebar_filters .active .search_input_container { margin-top: 1px; } #sidebar_filters .active #see_more { padding: 20px; } #sidebar_filters .active .plant_active_filter { margin: 15px 0; margin-top: 0; border-bottom: 1px solid #707070; padding: 10px 0; display: flex; gap: 10px; } #sidebar_filters .active .input_container { padding: 10px 0 25px 0; } #sidebar_filters .active .fieldset_header:before { transform: translate(-50%, -60%) rotate(45deg); -webkit-transform: translate(-50%, -60%) rotate(45deg); } #sidebar_filters .elmenet_subgroups.inactive:not(.active) .fieldset_header:before { transform: translate(-50%, -60%) rotate(-45deg); -webkit-transform: translate(-50%, -60%) rotate(-45deg); } #sidebar_filters .switch_label { padding: 15px 18px; } #sidebar_filters .switch_name { font-size: 16px; font-weight: 400; color: #BFBFBF; line-height: 20px; } #sidebar_filters .switch_name.active { color: #2E2E2E; } #sidebar_filters .search_input_container { margin: 1px; background-color: #EBE9E4; } #sidebar_filters .search_input_container fieldset { margin: 0; background-color: white; border-radius: 10px; padding: 11px 14px; } #sidebar_filters .search_input_container input { width: 90%; } #sidebar_filters #see_more { text-align: center; font-size: 13px; font-weight: 400; color: #1D5716; line-height: 20px; padding: 20px; cursor: pointer; } #sidebar_filters .plant_active_filter { margin: 10px 0; margin-top: 0; border-top: 1px solid #707070; border-bottom: 1px solid #707070; padding: 10px 0; display: block; } #sidebar_filters #plant_list_clear_btn { padding-right: 35px; position: relative; cursor: pointer; } #sidebar_filters #plant_list_clear_btn:before, #sidebar_filters #plant_list_clear_btn:after { content: " "; position: absolute; width: 1px; height: 12px; top: 50%; right: 15px; background-color: #707070; } #sidebar_filters #plant_list_clear_btn::after { transform: translate(-50%, -50%) rotate(45deg); } #sidebar_filters #plant_list_clear_btn:before { transform: translate(-50%, -50%) rotate(-45deg); } @media screen and (max-width: 768px) { #sidebar_filters { flex-direction: column; } #sidebar_filters .advance_filter_column { max-width: unset; } #sidebar_filters .form_element { border-radius: 0; margin-bottom: 5px; box-shadow: none; } } #sidebar_filters .section_block { display: flex; gap: 16px; align-items: center; } #sidebar_filters .section_block:first-of-type { margin-top: 20px; } #sidebar_filters .section_block:last-of-type { margin-top: 40px; margin-bottom: 15px; } #sidebar_filters .section_block p { font-size: 16px; font-weight: 700; color: #2E2E2E; line-height: 20px; } #sidebar_filters .section_block button { cursor: pointer; font-size: 12px; font-weight: 400; color: #2E2E2E; line-height: 20px; } #sidebar_filters .section_block button.hidden { display: none; } #sidebar_filters .searchPhraseInputValue_container { position: relative; margin-top: 30px; } #sidebar_filters #searchPhraseInputValue { padding: 12px 16px; border-radius: 10px; background-color: white; display: block; width: 100%; } #sidebar_filters #reset_search_input { position: absolute; top: 50%; right: 20px; width: 16px; height: 16px; transform: translateY(-50%); cursor: pointer; } #sidebar_filters #reset_search_input.hidden { display: none; } #sidebar_filters #reset_search_input::before, #sidebar_filters #reset_search_input::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 22px; background-color: #2E2E2E; opacity: 0.3; } #sidebar_filters #reset_search_input::before { transform: translate(-50%, -50%) rotate(45deg); } #sidebar_filters #reset_search_input::after { transform: translate(-50%, -50%) rotate(-45deg); } #expand_all { font-size: 12px; font-weight: 400; color: #2E2E2E; line-height: 20px; cursor: pointer; } @media screen and (max-width: 768px) { #sidebar_filters { padding: 0; align-items: center; display: none; max-width: 100vw; } #sidebar_filters .searchPhraseInputValue_container { max-width: 90%; margin-bottom: 20px; } #sidebar_filters .searchPhraseInputValue_container #searchPhraseInputValue { border-radius: 5px; } #sidebar_filters form { max-width: 100vw; } #sidebar_filters .section_block { display: none; } #sidebar_filters #additional_inputs_on_sidebar { max-width: 90%; } #sidebar_filters fieldset { border-bottom: none; } #sidebar_filters fieldset:not(.multi-range-slider) { border-top: 1px solid #BFBFBF; } #sidebar_filters fieldset .fieldset_header, #sidebar_filters fieldset.active .search_input_container, #sidebar_filters fieldset .switch_label, #sidebar_filters fieldset.active .plant_active_filter, #sidebar_filters fieldset .input_container { max-width: 90%; margin: 0 auto; } #sidebar_filters .form_element:not(.active) .elmenet_subgroups { border-top: none; } } .offer_container { width: 100%; } .offer_container .row { border-bottom: 1px solid #707070; padding: 15px 0; } .offer_container .row:last-of-type { padding: 23px 0; border-bottom: none; } .offer_container .filter_active_inputs { margin-bottom: 0; } #listning { display: grid; grid-gap: 20px; } #listning .element { box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); border-radius: 10px; position: relative; background-color: white; margin-bottom: 22px; } #listning img { max-height: 175px; object-fit: cover; width: 100%; } #listning .desc_title, #listning .desc_pl_title { font-size: 15px; font-weight: 700; } #listning .desc_title { color: #2E2E2E; } #listning .desc_pl_title { color: #BFBFBF; padding-top: 5px; } #listning .desc_desc { padding-top: 9px; font-size: 13px; color: #2E2E2E; line-height: 24px; letter-spacing: 0.24px; max-height: 112px; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: block; /* Fallback for non-webkit */ display: -webkit-box; } #listning .labels_container { position: absolute; right: 15px; top: 16px; max-width: 170px; } #listning .label { padding: 5px 10px; background-color: #00B90C; font-size: 12px; color: white; font-weight: 700; border-radius: 5px; text-align: center; max-width: 170px; margin-bottom: 10px; } .list { grid-template-columns: 1fr; } .list .offer_pic { width: 304px; min-width: 304px; } .list .element { width: 100%; } .list a { display: flex; } .list img { max-width: 304px; border-radius: 10px 0 0 10px; } .list .description { padding: 21px; } .list .labels_container { right: unset; left: 285px; transform: translateX(-100%); } .list .desc_desc { -webkit-line-clamp: 3; } .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(304px, 1fr)); gap: 20px; } .tiles .element { max-width: 304px; } .tiles .description { padding: 15px; } .tiles .desc_desc { -webkit-line-clamp: 4; } .tiles img { border-radius: 10px 10px 0 0; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(1.4); } 50% { transform: scale(0.8); } 75% { transform: scale(1.3); } 100% { transform: scale(1); } } #config_listning { display: flex; justify-content: space-between; align-items: center; } #config_listning .group { display: flex; gap: 15px; align-items: center; } #show_by_tiles { margin-left: 20px; background-image: url("../img/icons/ikon_tiles.svg"); } #show_by_tiles.active { background-image: url("../img/icons/ikon_tiles_active.svg"); } #show_by_list { margin-right: 10px; background-image: url("../img/icons/ikon_list.svg"); } #show_by_list.active { background-image: url("../img/icons/ikon_list_active.svg"); } #show_by_tiles, #show_by_list { width: 16px; height: 16px; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; transition: 0.5s all; cursor: pointer; } .select_wrapper { border: 1px solid #BFBFBF; border-radius: 10px; position: relative; cursor: pointer; } .select_wrapper[data-beforeElement=numbers] .icon { background-image: url("../img/icons/ikon_elements.svg"); } .select_wrapper[data-beforeElement=sort] { min-width: 293px; } .select_wrapper[data-beforeElement=sort] .icon { background-image: url("../img/icons/iko_sort.svg"); } .select_wrapper .icon { content: " "; position: absolute; top: 50%; left: 20px; width: 16px; height: 16px; transform: translate(-50%, -50%); background-repeat: no-repeat; background-size: contain; background-position: center center; } .select_wrapper::after { transition: all 0.5s; position: absolute; content: " "; top: 45%; right: 15px; border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 4px; transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); } .select_wrapper select { text-align: center; font-size: 14px; font-weight: 400; color: #2E2E2E; line-height: 20px; } .custom-select { position: relative; font-family: Arial; padding: 11px 44px; } .custom-select select { display: none; /*hide original SELECT element:*/ } /*style the arrow inside the select element:*/ .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /*point the arrow upwards when the select box is open (active):*/ .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /*style the items (options), including the selected item:*/ .select-items div, .select-selected { color: #2E2E2E; cursor: pointer; user-select: none; } /*style items (options):*/ .select-items { position: absolute; background-color: white; top: 100%; right: 0; z-index: 99; padding: 15px; width: 100%; border: 1px solid #BFBFBF; border-radius: 10px; } .select-items div { font-size: 14px; font-weight: 400; color: #2E2E2E; line-height: 20px; margin-bottom: 15px; } .select-items div:last-of-type { margin-bottom: 0; } /*hide the items when the select box is closed:*/ .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } @media screen and (max-width: 768px) { #show_by_tiles, #show_by_list { display: none; } } .pagination_handler { display: flex; vertical-align: middle; align-items: center; gap: 10px; margin-top: 30px; } .pagination_handler div { display: flex; gap: 10px; } .pagination_handler div button { min-width: 43px; text-align: center; } .pagination_handler button { padding: 12px 14px; background-color: white; font-size: 14px; text-transform: uppercase; opacity: 0.8; border-radius: 10px; font-weight: 700; cursor: pointer; height: fit-content; transition: 0.5s all; } .pagination_handler button:hover { background-color: #EBE9E4; } .pagination_handler .active_pagination { opacity: 1; background-color: #EBE9E4; border: 1px solid #1D5716; } .pagination_handler .pagination_button[data-prev] { background: #EBE9E4 0% 0% no-repeat padding-box; border-radius: 10px; opacity: 0.5; min-width: 43px; position: relative; } .pagination_handler .pagination_button[data-prev]:before { content: " "; border: solid #7F7F7F; border-width: 0 2px 2px 0; display: inline-block; padding: 5px; top: 50%; left: 50%; transform: translate(3px) rotate(135deg); -webkit-transform: translate(3px) rotate(135deg); } .pagination_handler .pagination_button[data-next] { background-color: #41713F; color: white; opacity: 1; } @media screen and (max-width: 768px) { .pagination_handler { max-width: 95%; margin: 0 auto; margin-top: 0; } .pagination_handler button { padding: 8px 10px; font-size: 12px; } .pagination_handler button:hover { background-color: #EBE9E4; } .pagination_handler button[data-siteindex=dots] { padding-left: 0; padding-right: 0; min-width: unset; } .pagination_handler .pagination_button[data-prev] { min-width: 36px; } } @media screen and (max-width: 768px) { #offer_listning { flex-direction: column; margin-right: 0; gap: 0; } .mobile_switch { display: flex; width: 100%; vertical-align: middle; align-items: center; position: sticky; top: 0; background-color: white; z-index: 1; } .mobile_switch .icon { width: 16px; height: 16px; } .mobile_switch button { width: 50%; text-align: center; padding: 21px 0; display: flex; justify-content: center; align-items: center; gap: 16px; font-weight: 700; } .mobile_switch button.active { background-color: #ebe9e4; } #offer_container { max-width: 100%; flex-direction: column; } #offer_container #config_listning { border-bottom: none; } #offer_container #listning { border-bottom: none; border-top: 1px solid #707070; } #offer_container #listning .element { width: 100%; } #config_listning { flex-direction: row; max-width: 95%; margin: 0 auto; margin-top: 0; width: 100%; border-bottom: none; justify-content: space-between; } #config_listning #search_result_info { color: #BFBFBF; font-size: 13px; } #config_listning #results_number { font-weight: 700; } #config_listning .icon { display: none; } #config_listning .select_wrapper { padding: 11px 40px 11px 11px; border-radius: 5px; max-width: 73px; } #config_listning .select-selected { text-overflow: ellipsis; overflow: hidden; width: 30px; white-space: nowrap; font-size: 12px; text-align: center; } #config_listning .select_wrapper[data-beforeElement=sort] { min-width: unset; } #config_listning .select_wrapper[data-beforeElement=sort] .select-items { width: 90vw; } .tiles { grid-template-columns: 1fr; } .tiles .element { max-width: 93%; margin: 0 auto; min-height: 347px; } #active_inputs_row { padding-top: 20px; padding-bottom: 20px; margin-bottom: -20px; background-color: white; max-width: 100vw; } .filter_active_inputs { margin: 0 auto; } } @media screen and (min-width: 768px) { .mobile_switch { display: none; } #offer_container { position: -webkit-sticky; position: sticky; align-self: flex-end; right: 0; bottom: 20px; height: fit-content; margin: 0 auto; margin-right: 0; } } #user_page .green_btn, .log_in_form .green_btn { font-size: 11px; font-weight: 700; color: white; line-height: 20px; position: relative; padding: 11px 15px 11px 38px; text-transform: uppercase; background-color: #334E42; border-radius: 10px; cursor: pointer; } #user_page .green_btn .icon, .log_in_form .green_btn .icon { position: absolute; top: 50%; left: 22px; width: 14px; height: 14px; transform: translate(-50%, -50%); background-position: center center; background-size: contain; background-repeat: no-repeat; } #user_page #data_change .icon, .log_in_form #data_change .icon { background-image: url("../img/icons/iko_edit.svg"); transform: translate(-50%, -60%); } #user_page #log_out .icon, .log_in_form #log_out .icon { background-image: url("../img/icons/iko_logout.svg"); } #user_page #generate_pdf .icon, .log_in_form #generate_pdf .icon { background-image: url("../img/icons/iko_pdf.svg"); filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg); } #site_description { font-size: 17px; font-weight: 600; color: #707070; line-height: 20px; margin-bottom: 35px; } #action_buttons { display: flex; justify-content: space-between; margin-bottom: 35px; } #cart { position: relative; padding: 22px 0; } #cart .text_block, #cart .product_list_with_info { position: relative; margin-top: 0; } #cart .product_list_with_info { padding-top: 22px; } #cart #generate_pdf { display: block; margin: 0 auto; } #cart::before { content: ""; width: 100vw; height: 100%; transform: translate(-50%, -50%); background-color: #EBE9E4; position: absolute; top: 50%; left: 50%; } #cart .pagination_handler { justify-content: center; margin-bottom: 30px; } #cart .active_pagination { opacity: 0.9; background-color: white; } #cart .pagination_site_button:hover { background-color: white; opacity: 0.9; } #cart .pagination_button { opacity: 0.99; } #cart .pagination_button:hover { background-color: #41713F; opacity: 0.99; } #cart .pag_prev { opacity: 0.99; } #cart .pag_prev:hover { background-color: #EBE9E4; opacity: 0.99; } .cart_info { display: flex; flex-direction: column; text-align: center; justify-content: center; min-height: 308px; } .cart_info img { width: 64px; height: 65px; margin: 0 auto; } #data_change_form, .log_in_form { position: fixed; width: 1054px; height: auto; display: none; grid-template-columns: 1fr 1fr; transform: translate(-50%, -50%); z-index: 20; top: 50%; left: 50%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4509803922); border-radius: 10px; background-color: #EBE9E4; } #data_change_form.form_active, .log_in_form.form_active { display: grid; } #data_change_form img, .log_in_form img { object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%; } #data_change_form #form_close_btn, .log_in_form #form_close_btn { display: none; } #data_change_form .content, .log_in_form .content { display: grid; flex-direction: column; align-items: stretch; padding: 30px 25px; margin-top: 0; } #data_change_form #update_btn, .log_in_form #update_btn { text-align: center; padding-left: 0; padding-right: 0; height: 49px; } #data_change_form #name_surname, .log_in_form #name_surname { display: flex; column-gap: 20px; justify-content: space-between; } #data_change_form input, .log_in_form input { background-color: white; border-radius: 10px; padding: 11px 11px 11px 45px; font-size: 14px; font-weight: 500; color: #2E2E2E; line-height: 20px; width: 100%; } #data_change_form label, .log_in_form label { position: relative; margin-bottom: 19px; } #data_change_form label .icon, .log_in_form label .icon { content: ""; width: 16px; height: 12px; position: absolute; top: 50%; left: 22px; transform: translate(-50%, -50%); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; } #data_change_form label[for=current_password] .icon, #data_change_form label[for=new_password] .icon, #data_change_form label[for=new_password_confirm] .icon, .log_in_form label[for=current_password] .icon, .log_in_form label[for=new_password] .icon, .log_in_form label[for=new_password_confirm] .icon { width: 16px; height: 14px; background-image: url("../img/icons/iko_pass.svg"); } #data_change_form label[for=email] .icon, .log_in_form label[for=email] .icon { background-image: url("../img/icons/iko_mail.svg"); } #data_change_form label[for=name] .icon, #data_change_form label[for=surname] .icon, .log_in_form label[for=name] .icon, .log_in_form label[for=surname] .icon { background-image: url("../img/icons/iko_lines.svg"); } #data_change_form h2, .log_in_form h2 { font-size: 27px; font-weight: 500; color: #5BA762; line-height: 110%; text-align: center; padding-bottom: 19px; } #data_change_form .copy, .log_in_form .copy { font-size: 17px; font-weight: 400; color: #2E2E2E; line-height: 20px; text-align: center; padding-bottom: 19px; } #data_change_form #reset_question, .log_in_form #reset_question { font-size: 13px; font-weight: 400; color: #2E2E2E; line-height: 20px; padding-bottom: 19px; } #loginform input { margin-bottom: 20px; } #loginform .login-remember { margin-bottom: 20px; line-height: 20px; cursor: pointer; } #loginform .login-remember input { position: relative; width: 17px; height: 17px; padding: 0; border-radius: 5px; margin: 0; margin-right: 10px; } #loginform .login-remember input.activeRememberInput { background-color: #1D5716; background-image: url("../img/icons/iko_checked.svg"); background-position: 50% 50%; background-size: contain; } @media screen and (max-width: 768px) { #data_change_form, .log_in_form { grid-template-columns: 1fr; max-width: 90vw; transform: translate(-50%, 0%); top: 20px; } #data_change_form .content, .log_in_form .content { width: 100%; max-height: calc(100vh - 40px); overflow: scroll; } #data_change_form #form_close_btn, .log_in_form #form_close_btn { display: block; position: absolute; top: 20px; right: 20px; width: 43px; height: 43px; } #data_change_form #form_close_btn:before, #data_change_form #form_close_btn:after, .log_in_form #form_close_btn:before, .log_in_form #form_close_btn:after { content: " "; position: absolute; top: 50%; left: 50%; height: 25px; width: 4px; background-color: #BFBFBF; border-radius: 3px; } #data_change_form #form_close_btn::after, .log_in_form #form_close_btn::after { transform: translate(-50%, -50%) rotate(-45deg); } #data_change_form #form_close_btn::before, .log_in_form #form_close_btn::before { transform: translate(-50%, -50%) rotate(45deg); } #data_change_form img, .log_in_form img { display: none; } #data_change_form h2, .log_in_form h2 { text-align: left; font-size: 25px; padding-bottom: 30px; } #data_change_form .copy, .log_in_form .copy { font-size: 13px; padding-bottom: 30px; } #data_change_form #name_surname, .log_in_form #name_surname { flex-direction: column; } .log_in_form { top: 50%; transform: translate(-50%, -50%); } } @media screen and (max-width: 768px) { #user_page h1, #user_page #site_description, #user_page #action_buttons, #user_page #new_offers { max-width: 90%; margin: 0 auto; margin-bottom: 40px; } #cart .product_list_with_info { width: 90%; margin: 0 auto; flex-direction: column; align-items: center; display: flex; } #cart .product_list_with_info .element { width: 100%; max-width: unset; } } #alphabet_listning #config_listning { border: none; justify-content: flex-end; } #alphabet_listning .custom-select { border-radius: 4px; } #alphabet_listning [data-beforeelement=plant_group] { padding: 11px 42px 11px 12px; white-space: nowrap; text-overflow: ellipsis; width: 242px; } #alphabet_listning .pagination_handler { justify-content: center; } #alphabet_listning #listning { border-bottom: none; } #alphabet { padding-top: 0; display: flex; flex-wrap: nowrap; gap: 10px; overflow-y: scroll; border: none; /* ===== Scrollbar CSS ===== */ /* Firefox */ /* Chrome, Edge, and Safari */ } #alphabet button { width: 42px; min-width: 42px; height: 42px; border-radius: 4px; background-color: #1D5716; opacity: 0.4; text-align: center; text-transform: capitalize; cursor: pointer; font-size: 17px; font-weight: 700; color: white; line-height: 20px; } #alphabet .active { opacity: 1; } #alphabet { scrollbar-width: auto; scrollbar-color: #ebe9e4 #ffffff; } #alphabet::-webkit-scrollbar { width: 16px; height: 10px; } #alphabet::-webkit-scrollbar-track { background: #ffffff; } #alphabet::-webkit-scrollbar-thumb { background-color: #ebe9e4; border-radius: 10px; border: 3px solid #ffffff; } @media screen and (max-width: 768px) { #result #config_listning, #result #listning, #result .pagination_handler { max-width: 95%; margin: 0 auto; } #alphabet { padding-left: 10px; } #alphabet_listning { overflow: visible; } #alphabet_listning #config_listning { width: 100%; justify-content: space-between; } #alphabet_listning .group { justify-content: space-between; width: 100%; } #alphabet_listning .custom-select { max-width: unset; } #alphabet_listning .select-selected { width: 100%; overflow: hidden; } #alphabet_listning [data-beforeelement=plant_group] { width: 166px; } #alphabet_listning #listning .element { width: 100%; } } /*# sourceMappingURL=style.css.map */